/* ===========================================================================
   Blog admin area — login, add/edit form, post list.
   Standalone on purpose: it does not load the public site theme, so changes
   here can never affect smartfin.ae's front end.
   Palette matches assets/css/mazi-theme.css.
   =========================================================================== */

:root {
    --ba-blue: #1e5eff;
    --ba-blue-2: #3fb6ff;
    --ba-blue-deep: #0b3ec9;
    --ba-grad: linear-gradient(90deg, #1046d6 0%, #2f7bff 55%, #3fb6ff 100%);
    --ba-ink: #191820;
    --ba-muted: #6b6b7b;
    --ba-line: #e4e4ed;
    --ba-bg: #f3f3f6;
    --ba-card: #ffffff;
    --ba-dark: #0b0a12;
    --ba-danger: #e5484d;
    --ba-success: #12a150;
    --ba-radius: 16px;
    --ba-shadow: 0 6px 26px rgba(20, 20, 43, .07);
}

* { box-sizing: border-box; }

.ba-body {
    margin: 0;
    background: var(--ba-bg);
    color: var(--ba-ink);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.ba-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

.ba-main { padding: 30px 0 60px; }

/* ---------------------------------------------------------------- topbar */

.ba-topbar {
    background: var(--ba-dark);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 40;
}

.ba-topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
    height: 66px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.ba-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.ba-brand img { height: 26px; width: auto; }

.ba-brand span {
    font-size: 14px;
    padding-left: 11px;
    border-left: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
}

.ba-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
}

.ba-nav a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 9px;
    transition: background .18s, color .18s;
}

.ba-nav a i { margin-right: 6px; font-size: 13px; }
.ba-nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.ba-nav a.is-active {
    background: var(--ba-blue);
    color: #fff;
}

.ba-user {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.ba-user-name { color: rgba(255, 255, 255, .8); white-space: nowrap; }
.ba-user-name i { margin-right: 6px; }

.ba-logout {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 9px;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
}

.ba-logout:hover {
    background: rgba(229, 72, 77, .16);
    border-color: rgba(229, 72, 77, .5);
    color: #fff;
}

/* ------------------------------------------------------------ page head */

.ba-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ba-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ba-blue);
    margin-bottom: 6px;
}

.ba-page-head h1 {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ba-page-head p { margin: 0; color: var(--ba-muted); font-size: 14px; }

/* ---------------------------------------------------------------- cards */

.ba-card {
    background: var(--ba-card);
    border: 1px solid var(--ba-line);
    border-radius: var(--ba-radius);
    box-shadow: var(--ba-shadow);
    padding: 26px;
    margin-bottom: 22px;
}

.ba-card-title {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ba-line);
}

.ba-card-title i { color: var(--ba-blue); font-size: 14px; }

/* --------------------------------------------------------------- layout */

.ba-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

.ba-col-side { position: sticky; top: 90px; }

/* --------------------------------------------------------------- fields */

.ba-field { margin-bottom: 20px; }
.ba-field:last-child { margin-bottom: 0; }

.ba-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--ba-ink);
}

.ba-field label span { color: var(--ba-danger); }

.ba-field input[type="text"],
.ba-field input[type="email"],
.ba-field input[type="password"],
.ba-field input[type="date"],
.ba-field input[type="time"],
.ba-field input[type="file"],
.ba-field textarea,
.ba-field select {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ba-ink);
    background: #fbfbfd;
    border: 1px solid var(--ba-line);
    border-radius: 11px;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.ba-field textarea { resize: vertical; min-height: 76px; }

.ba-field input::placeholder,
.ba-field textarea::placeholder { color: #a9a9ba; }

.ba-field input:focus,
.ba-field textarea:focus,
.ba-field select:focus {
    background: #fff;
    border-color: var(--ba-blue);
    box-shadow: 0 0 0 3px rgba(30, 94, 255, .13);
}

.ba-field.has-error input,
.ba-field.has-error textarea,
.ba-field.has-error select,
.ba-field.has-error .ql-toolbar,
.ba-field.has-error .ql-container {
    border-color: var(--ba-danger);
}

.ba-field input[type="file"] { padding: 10px 12px; font-size: 13px; }

.ba-hint, .ba-count {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--ba-muted);
}

.ba-error {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ba-danger);
}

.ba-field-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ba-field-foot .ba-count { white-space: nowrap; }

.ba-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ba-input-wrap > i {
    position: absolute;
    left: 15px;
    font-size: 14px;
    color: #a2a2b4;
    pointer-events: none;
    transition: color .18s;
}

/* The second selector must stay: inside a .ba-field, the generic
   `.ba-field input[type="email"]` rule above outranks a bare `.ba-input-wrap
   input`, and would reset the left padding that keeps text clear of the icon. */
.ba-input-wrap input,
.ba-field .ba-input-wrap input {
    width: 100%;
    padding: 12px 14px 12px 44px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ba-ink);
    background: #fbfbfd;
    border: 1px solid var(--ba-line);
    border-radius: 11px;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

/* Fields with a trailing button (the password eye) need room on the right too. */
.ba-input-wrap.has-action input,
.ba-field .ba-input-wrap.has-action input { padding-right: 48px; }

.ba-input-wrap:focus-within > i { color: var(--ba-blue); }

.ba-input-wrap input:focus {
    background: #fff;
    border-color: var(--ba-blue);
    box-shadow: 0 0 0 3px rgba(30, 94, 255, .13);
}

.ba-eye {
    position: absolute;
    right: 6px;
    background: none;
    border: 0;
    padding: 9px 11px;
    color: #a2a2b4;
    cursor: pointer;
    font-size: 14px;
    border-radius: 8px;
}

.ba-eye:hover { color: var(--ba-blue); }

/* slug field */

.ba-slug-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ba-line);
    border-radius: 11px;
    background: #fbfbfd;
    overflow: hidden;
}

.ba-slug-wrap:focus-within {
    border-color: var(--ba-blue);
    box-shadow: 0 0 0 3px rgba(30, 94, 255, .13);
}

.ba-slug-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
    color: var(--ba-muted);
    background: #f0f0f5;
    border-right: 1px solid var(--ba-line);
    white-space: nowrap;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ba-slug-wrap input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.ba-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ba-muted);
    cursor: pointer;
}

.ba-check input { width: auto; accent-color: var(--ba-danger); }

/* --------------------------------------------------------------- editor */

#editor {
    min-height: 340px;
    background: #fff;
    font-size: 15px;
    font-family: inherit;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow { border-color: var(--ba-line); }

.ql-toolbar.ql-snow { border-radius: 11px 11px 0 0; background: #fbfbfd; }
.ql-container.ql-snow { border-radius: 0 0 11px 11px; font-family: inherit; }
.ql-editor { min-height: 340px; }
.ql-editor.ql-blank::before { color: #a9a9ba; font-style: normal; }
.ql-snow .ql-stroke { stroke: #55556a; }
.ql-snow .ql-fill { fill: #55556a; }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--ba-blue); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--ba-blue); }

/* ---------------------------------------------------------- cover image */

.ba-cover-current img,
.ba-cover-preview img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 11px;
    border: 1px solid var(--ba-line);
    display: block;
}

.ba-cover-current { margin-bottom: 18px; }
.ba-cover-preview { margin-top: 12px; }

/* -------------------------------------------------------------- buttons */

.ba-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s, box-shadow .16s, background .18s, color .18s;
}

.ba-btn i { font-size: 13px; }

.ba-btn-primary {
    background: var(--ba-grad);
    color: #fff;
    box-shadow: 0 6px 18px rgba(30, 94, 255, .26);
}

.ba-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(30, 94, 255, .34);
}

.ba-btn:disabled { opacity: .68; cursor: not-allowed; transform: none; }

.ba-btn-ghost {
    background: #fff;
    color: var(--ba-ink);
    border-color: var(--ba-line);
}

.ba-btn-ghost:hover { border-color: var(--ba-blue); color: var(--ba-blue); }

.ba-btn-plain { background: none; color: var(--ba-muted); padding: 12px 10px; }
.ba-btn-plain:hover { color: var(--ba-blue); }

.ba-btn-block { width: 100%; }

.ba-actions { display: grid; gap: 10px; }

.ba-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--ba-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ba-muted);
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
    transition: color .18s, border-color .18s, background .18s;
}

.ba-icon-btn:hover { color: var(--ba-blue); border-color: var(--ba-blue); }

.ba-icon-btn-danger:hover {
    color: #fff;
    background: var(--ba-danger);
    border-color: var(--ba-danger);
}

/* --------------------------------------------------------------- alerts */

.ba-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 17px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.ba-alert i { margin-top: 2px; }

.ba-alert-success {
    background: rgba(18, 161, 80, .09);
    border-color: rgba(18, 161, 80, .28);
    color: #0c7a3d;
}

.ba-alert-error {
    background: rgba(229, 72, 77, .09);
    border-color: rgba(229, 72, 77, .28);
    color: #b32126;
}

.ba-alert-info {
    background: rgba(30, 94, 255, .08);
    border-color: rgba(30, 94, 255, .26);
    color: var(--ba-blue-deep);
}

/* -------------------------------------------------------------- filters */

.ba-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--ba-card);
    border: 1px solid var(--ba-line);
    border-radius: var(--ba-radius);
    box-shadow: var(--ba-shadow);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.ba-filters .ba-input-wrap { flex: 1 1 260px; }

.ba-filters select {
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ba-ink);
    background: #fbfbfd;
    border: 1px solid var(--ba-line);
    border-radius: 11px;
    outline: none;
}

/* ---------------------------------------------------------------- table */

.ba-table-wrap {
    background: var(--ba-card);
    border: 1px solid var(--ba-line);
    border-radius: var(--ba-radius);
    box-shadow: var(--ba-shadow);
    overflow-x: auto;
}

.ba-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.ba-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ba-muted);
    padding: 15px 16px;
    border-bottom: 1px solid var(--ba-line);
    white-space: nowrap;
}

.ba-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f1f6;
    font-size: 14px;
    vertical-align: middle;
}

.ba-table tbody tr:last-child td { border-bottom: 0; }
.ba-table tbody tr:hover { background: #fafaff; }

.ba-th-cover, .ba-td-cover { width: 66px; padding-right: 0 !important; }

.ba-td-cover img {
    width: 50px;
    height: 38px;
    object-fit: cover;
    border-radius: 7px;
    display: block;
    border: 1px solid var(--ba-line);
}

.ba-cover-none {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 38px;
    border-radius: 7px;
    background: #f1f1f6;
    color: #b8b8c8;
    font-size: 13px;
}

.ba-td-title strong { display: block; font-weight: 600; }

.ba-td-title small {
    display: block;
    color: var(--ba-muted);
    font-size: 12.5px;
    margin-top: 2px;
}

.ba-muted { color: #b8b8c8; }

.ba-td-actions { white-space: nowrap; }
.ba-td-actions form { display: inline-block; margin-left: 5px; }
.ba-th-actions { text-align: left; }

.ba-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ba-badge-published { background: rgba(18, 161, 80, .12); color: #0c7a3d; }
.ba-badge-draft { background: rgba(107, 107, 123, .14); color: #55556a; }

/* ---------------------------------------------------------------- empty */

.ba-empty {
    background: var(--ba-card);
    border: 1px solid var(--ba-line);
    border-radius: var(--ba-radius);
    box-shadow: var(--ba-shadow);
    padding: 64px 26px;
    text-align: center;
}

.ba-empty > i { font-size: 40px; color: #d3d3e0; }
.ba-empty h3 { margin: 18px 0 6px; font-size: 19px; font-weight: 700; }
.ba-empty p { margin: 0 0 22px; color: var(--ba-muted); }

/* ------------------------------------------------------- login (sign in) */

/* The auth screen owns the whole viewport: no admin chrome, no page padding. */
.ba-body-auth { background: #fff; }
.ba-body-auth .ba-main { padding: 0; }

.ba-auth {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* ---- left: brand panel ---- */

.ba-auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 54px 58px;
    background:
        radial-gradient(760px 420px at 10% -10%, rgba(63, 182, 255, .26), transparent 60%),
        radial-gradient(680px 400px at 92% 108%, rgba(30, 94, 255, .34), transparent 58%),
        var(--ba-dark);
    color: #fff;
}

.ba-auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    pointer-events: none;
}

.ba-auth-orb-1 {
    width: 300px;
    height: 300px;
    background: rgba(30, 94, 255, .6);
    top: -70px;
    left: -70px;
}

.ba-auth-orb-2 {
    width: 260px;
    height: 260px;
    background: rgba(63, 182, 255, .45);
    bottom: -90px;
    right: -60px;
}

.ba-auth-brand-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    margin: auto;
}

.ba-auth-logo { display: inline-block; margin-bottom: auto; }
.ba-auth-logo img { height: 34px; width: auto; }

.ba-auth-pitch { padding: 48px 0; }

.ba-auth-pitch h2 {
    margin: 0 0 16px;
    font-size: 34px;
    line-height: 1.24;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
}

.ba-auth-pitch p {
    margin: 0 0 30px;
    font-size: 15.5px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .68);
}

.ba-auth-points { list-style: none; margin: 0; padding: 0; }

.ba-auth-points li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .82);
}

.ba-auth-points i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--ba-blue-2);
    font-size: 13px;
}

.ba-auth-foot {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .4);
}

/* ---- right: form panel ---- */

.ba-auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 40px;
    background: #fff;
}

.ba-auth-form-wrap { width: 100%; max-width: 400px; }

/* Shown only when the brand panel is hidden on small screens. */
.ba-auth-logo-sm { display: none; margin-bottom: 30px; }
.ba-auth-logo-sm img { height: 32px; width: auto; }

.ba-auth-head { margin-bottom: 30px; }

.ba-auth-head h1 {
    margin: 0 0 7px;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.ba-auth-head p { margin: 0; color: var(--ba-muted); font-size: 15px; }

.ba-btn-lg { padding: 15px 22px; font-size: 15px; margin-top: 8px; }

.ba-auth-note {
    margin: 24px 0 0;
    font-size: 12.5px;
    color: var(--ba-muted);
    text-align: center;
}

.ba-auth-note i { margin-right: 6px; color: var(--ba-blue); }

.ba-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ba-muted);
    text-decoration: none;
    transition: color .18s, gap .18s;
}

.ba-auth-back:hover { color: var(--ba-blue); gap: 12px; }
.ba-auth-back i { font-size: 11px; }

/* --------------------------------------------------------------- footer */

.ba-footer {
    padding: 24px 22px 34px;
    text-align: center;
    font-size: 13px;
    color: var(--ba-muted);
}

.ba-footer a { color: var(--ba-blue); text-decoration: none; }
.ba-footer a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1024px) {
    .ba-grid { grid-template-columns: 1fr; }
    .ba-col-side { position: static; }

    .ba-auth-brand { padding: 42px 38px; }
    .ba-auth-pitch h2 { font-size: 28px; }
    .ba-auth-form-side { padding: 42px 32px; }
}

/* Below this width the brand panel would squeeze the form, so drop it and
   fall back to a single centred column with the dark logo instead. */
@media (max-width: 860px) {
    .ba-auth { grid-template-columns: 1fr; }
    .ba-auth-brand { display: none; }
    .ba-auth-logo-sm { display: inline-block; }
    .ba-auth-form-side { align-items: flex-start; padding: 48px 26px; min-height: 100vh; }
    .ba-auth-form-wrap { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 780px) {
    .ba-topbar-inner {
        height: auto;
        padding: 14px 18px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .ba-nav { order: 3; width: 100%; margin-right: 0; }
    .ba-nav a { flex: 1; text-align: center; }
    .ba-user { margin-left: auto; }
    .ba-user-name { display: none; }
    .ba-page-head h1 { font-size: 23px; }
    .ba-card { padding: 20px 17px; }
    .ba-auth-head h1 { font-size: 25px; }
    .ba-wrap { padding: 0 16px; }
}