@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

/* =========================================================
   DESIGN TOKENS
   Palette: "Night Tower" — deep aviation navy + radar teal +
   runway amber, on a soft neutral canvas. Flat colors only.
   ========================================================= */
:root {
    --navy-900: #131c33;
    --navy-800: #1c2a4a;
    --navy-700: #28395f;
    --teal: #12b7c4;
    --teal-ink: #0d8b95;
    --teal-tint: #e3f7f8;
    --amber: #ff9d52;
    --amber-tint: #fff1e2;
    --bg: #f2f5f9;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --ink: #141b2e;
    --ink-soft: #69738a;
    --ink-faint: #9aa2b5;
    --border: rgba(19,28,51,.09);
    --border-soft: rgba(19,28,51,.06);
    --shadow-sm: 0 1px 2px rgba(19,28,51,.05), 0 6px 16px rgba(19,28,51,.05);
    --shadow-md: 0 10px 30px rgba(19,28,51,.09);
    --danger: #e0605a;
    --theme-grid: rgba(19,28,51,.07);
    --radius-xl: 22px;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 10px;
    --sidebar-w: 258px;
    --sidebar-w-collapsed: 80px;
    --topbar-h: 70px;
    --transition: .25s cubic-bezier(.4,0,.2,1);
    --font-ui: 'Vazirmatn', Tahoma, sans-serif;
}

[data-theme="night"] {
    --bg: #0a0f1e;
    --surface: #111a30;
    --surface-2: #0e1626;
    --navy-900: #080c18;
    --navy-800: #141f3a;
    --navy-700: #1c2c50;
    --ink: #eaeef8;
    --ink-soft: #8f9ab5;
    --ink-faint: #5f6a85;
    --border: rgba(234,238,248,.09);
    --border-soft: rgba(234,238,248,.06);
    --teal: #28d3e0;
    --teal-ink: #28d3e0;
    --teal-tint: rgba(40,211,224,.13);
    --amber: #ffb066;
    --amber-tint: rgba(255,176,102,.13);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.28);
    --shadow-md: 0 14px 34px rgba(0,0,0,.4);
    --theme-grid: rgba(234,238,248,.09);
}

/* =========================================================
   ACCENT PALETTES — 6 pastel schemes, flat colors only.
   Each defines --teal (primary) / --teal-ink / --teal-tint
   and --amber (secondary) / --amber-tint. Sidebar & neutrals
   stay constant so every scheme feels cohesive.
   ========================================================= */
[data-accent="sky"] {
    --teal: #12b7c4;
    --teal-ink: #0d8b95;
    --teal-tint: #e3f7f8;
    --amber: #ff9d52;
    --amber-tint: #fff1e2;
}

[data-accent="lavender"] {
    --teal: #8b7cf6;
    --teal-ink: #6a5bd1;
    --teal-tint: #efebff;
    --amber: #f2a6c9;
    --amber-tint: #fdeef5;
}

[data-accent="rose"] {
    --teal: #ff7f9b;
    --teal-ink: #e35872;
    --teal-tint: #ffe9ee;
    --amber: #ffb84d;
    --amber-tint: #fff3df;
}

[data-accent="mint"] {
    --teal: #3fbf94;
    --teal-ink: #2a9b78;
    --teal-tint: #e2f8f0;
    --amber: #a7d65c;
    --amber-tint: #f3f9e3;
}

[data-accent="sand"] {
    --teal: #e0a458;
    --teal-ink: #c1863c;
    --teal-tint: #fcf1e0;
    --amber: #6fa89c;
    --amber-tint: #e9f4f1;
}

[data-accent="ocean"] {
    --teal: #5b93e0;
    --teal-ink: #3f6fbf;
    --teal-tint: #e9f1fc;
    --amber: #ffb066;
    --amber-tint: #fff1e0;
}

/* dark-mode variants keep the same hue family, brighter for contrast */
[data-theme="night"][data-accent="sky"] {
    --teal: #28d3e0;
    --teal-ink: #28d3e0;
    --teal-tint: rgba(40,211,224,.13);
    --amber: #ffb066;
    --amber-tint: rgba(255,176,102,.13);
}

[data-theme="night"][data-accent="lavender"] {
    --teal: #a99bff;
    --teal-ink: #a99bff;
    --teal-tint: rgba(169,155,255,.15);
    --amber: #ffb3d1;
    --amber-tint: rgba(255,179,209,.15);
}

[data-theme="night"][data-accent="rose"] {
    --teal: #ff96ac;
    --teal-ink: #ff96ac;
    --teal-tint: rgba(255,150,172,.15);
    --amber: #ffc670;
    --amber-tint: rgba(255,198,112,.15);
}

[data-theme="night"][data-accent="mint"] {
    --teal: #57d9ac;
    --teal-ink: #57d9ac;
    --teal-tint: rgba(87,217,172,.15);
    --amber: #c0e878;
    --amber-tint: rgba(192,232,120,.15);
}

[data-theme="night"][data-accent="sand"] {
    --teal: #f0b96e;
    --teal-ink: #f0b96e;
    --teal-tint: rgba(240,185,110,.15);
    --amber: #8bc4b8;
    --amber-tint: rgba(139,196,184,.15);
}

[data-theme="night"][data-accent="ocean"] {
    --teal: #7ea9ec;
    --teal-ink: #7ea9ec;
    --teal-tint: rgba(126,169,236,.15);
    --amber: #ffc27d;
    --amber-tint: rgba(255,194,125,.15);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    direction: rtl;
    transition: background var(--transition), color var(--transition);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

input {
    font-family: inherit;
}

::selection {
    background: var(--teal-tint);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

.tabular {
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

.login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 940px;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    overflow: hidden;
}

.login-visual {
    background: var(--navy-900);
    color: #eaeef8;
    padding: 46px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    .login-visual .radar-deco {
        position: absolute;
        inset: 0;
        opacity: .5;
        pointer-events: none;
    }

    .login-visual .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        position: relative;
        z-index: 1;
    }

    .login-visual .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: var(--teal);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--navy-900);
        flex: none;
    }

    .login-visual .brand-name {
        font-weight: 600;
        font-size: 16px;
    }

    .login-visual .brand-sub {
        font-size: 11px;
        opacity: .6;
        margin-top: 2px;
    }

    .login-visual .route-illustration {
        margin: 26px 0;
        position: relative;
        z-index: 1;
    }

        .login-visual .route-illustration svg {
            width: 100%;
            height: auto;
        }

    .login-visual .visual-caption {
        position: relative;
        z-index: 1;
    }

        .login-visual .visual-caption h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .login-visual .visual-caption p {
            font-size: 13px;
            opacity: .65;
            max-width: 320px;
        }

    .login-visual .stat-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 11.5px;
        margin-top: 18px;
        position: relative;
        z-index: 1;
    }

        .login-visual .stat-pill i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--teal);
            display: inline-block;
        }

.login-form-side {
    padding: 50px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .login-form-side .form-head {
        margin-bottom: 28px;
    }

        .login-form-side .form-head h2 {
            font-size: 21px;
            font-weight: 600;
        }

        .login-form-side .form-head p {
            font-size: 13px;
            color: var(--ink-soft);
            margin-top: 6px;
        }

.field {
    margin-bottom: 18px;
}

    .field label {
        display: block;
        font-size: 12.5px;
        font-weight: 500;
        margin-bottom: 7px;
        color: var(--ink-soft);
    }

    .field .input-shell {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0 12px;
        transition: border-color var(--transition), box-shadow var(--transition);
    }

        .field .input-shell:focus-within {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px var(--teal-tint);
        }

        .field .input-shell svg {
            flex: none;
            color: var(--ink-faint);
        }

    .field input {
        border: 0;
        background: transparent;
        outline: none;
        padding: 12px 4px;
        width: 100%;
        font-size: 13.5px;
        color: var(--ink);
    }

    .field .toggle-eye {
        background: none;
        border: 0;
        color: var(--ink-faint);
        display: flex;
        padding: 4px;
    }

        .field .toggle-eye:hover {
            color: var(--ink);
        }

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    font-size: 12.5px;
}

.remember {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-soft);
}

    .remember input[type=checkbox] {
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 5px;
        border: 1.4px solid var(--border);
        background: var(--surface-2);
        display: grid;
        place-content: center;
        cursor: pointer;
    }

        .remember input[type=checkbox]:checked {
            background: var(--teal);
            border-color: var(--teal);
        }

            .remember input[type=checkbox]:checked::after {
                content: "";
                width: 8px;
                height: 5px;
                border-left: 2px solid var(--navy-900);
                border-bottom: 2px solid var(--navy-900);
                transform: rotate(-45deg) translateY(-1px);
            }

.forgot-link {
    color: var(--teal-ink);
    font-weight: 500;
}

    .forgot-link:hover {
        text-decoration: underline;
    }

.btn-primary {
    width: 100%;
    background: var(--navy-900);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 13px;
    font-size: 14px;
    font-weight: 600;
    transition: background var(--transition), transform var(--transition);
}

    .btn-primary:hover {
        background: var(--navy-800);
    }

    .btn-primary:active {
        transform: scale(.99);
    }

.login-foot-note {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: var(--ink-faint);
}

/* =========================================================
   DASHBOARD SHELL
   ========================================================= */
.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: var(--navy-900);
    color: #c9d2e6;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    transition: width var(--transition);
    z-index: 40;
}

.app.collapsed .sidebar {
    width: var(--sidebar-w-collapsed);
}

.sidebar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    min-height: var(--topbar-h);
}

    .sidebar-head .logo-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--teal);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--navy-900);
        flex: none;
    }

    .sidebar-head .logo-text {
        overflow: hidden;
        white-space: nowrap;
        transition: opacity var(--transition);
    }

        .sidebar-head .logo-text b {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
        }

        .sidebar-head .logo-text span {
            display: block;
            font-size: 10.5px;
            opacity: .55;
        }

.app.collapsed .logo-text {
    opacity: 0;
    width: 0;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.nav-item {
   /* margin-bottom: 0.5px;*/

}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 400;
    color: #aab5cc;
    position: relative;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

    .nav-link:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

.nav-item.active > .nav-link {
    background: var(--teal);
    color: var(--navy-900);
    font-weight: 400;
}

.nav-link .ico {
    flex: none;
    display: flex;
}

.nav-link .lbl {
    overflow: hidden;
    transition: opacity var(--transition);
}

.app.collapsed .nav-link .lbl,
.app.collapsed .nav-link .chev {
    opacity: 0;
    width: 0;
}

.nav-link .chev {
    margin-right: auto;
    transition: transform var(--transition);
    flex: none;
}

.nav-item.open .nav-link .chev {
    transform: rotate(180deg);
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
    padding-right: 30px;
    border-right: 1.5px dashed rgba(255,255,255,.15);
    margin-right: 20px;
}

.nav-item.open .submenu {
    max-height: 250px;
}

.submenu a {
    display: block;
    padding: 9px 6px;
    font-size: 11px;
    color: #8b96b0;
    transition: color var(--transition);
}

    .submenu a:hover {
        color: var(--teal);
    }

.app.collapsed .submenu {
    display: none;
}

.sidebar-foot {
    padding: 16px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 11px;
    color: #6b7590;
    white-space: nowrap;
    overflow: hidden;
}

.app.collapsed .sidebar-foot {
    text-align: center;
}

    .app.collapsed .sidebar-foot .full {
        display: none;
    }

.sidebar-foot .mini {
    display: none;
}

.app.collapsed .sidebar-foot .mini {
    display: block;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8,12,24,.5);
    z-index: 35;
}

.app.mobile-open .sidebar-overlay {
    display: block;
}

.main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.burger {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--ink);
    transition: background var(--transition);
}

    .burger:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

.page-title {
    font-size: 15.5px;
    font-weight: 600;
}

    .page-title span {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: var(--ink-soft);
        margin-top: 2px;
    }

.topbar-actions {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background var(--transition), transform var(--transition), color var(--transition);
}

    .icon-btn:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

    .icon-btn:active {
        transform: scale(.94);
    }

.admin-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

.admin-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--navy-900);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-chip .who b {
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.admin-chip .who span {
    display: block;
    font-size: 10px;
    color: var(--ink-soft);
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    transition: background var(--transition), color var(--transition);
}

    .logout-btn:hover {
        background: rgba(224,96,90,.12);
        color: var(--danger);
    }

.content {
    flex: 1;
    padding: 24px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

/* ---- stat cards with sparkline ---- */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 19px 20px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .stat-card .top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .stat-card .ico-badge {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        background: var(--teal-tint);
        color: var(--teal-ink);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stat-card:nth-child(3) .ico-badge {
        background: var(--amber-tint);
        color: var(--amber);
    }

    .stat-card .trend {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 999px;
    }

.trend.up {
    background: var(--teal-tint);
    color: var(--teal-ink);
}

.trend.down {
    background: rgba(224,96,90,.12);
    color: var(--danger);
}

.stat-card .value {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 2px;
}

.stat-card .label {
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.stat-card .spark {
    width: 100%;
    height: 32px;
    display: block;
}

/* ---- bento grid ---- */
.bento {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.span-8 {
    grid-column: span 8;
}

.span-4 {
    grid-column: span 4;
}

.tri-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

    .panel:hover {
        box-shadow: var(--shadow-md);
    }

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 10px;
}

    .panel-head h3 {
        font-size: 14.5px;
        font-weight: 600;
    }

    .panel-head .sub {
        font-size: 11.5px;
        color: var(--ink-soft);
        margin-top: 3px;
    }

.legend-row {
    display: flex;
    gap: 14px;
    flex: none;
}

.legend-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-soft);
}

    .legend-dot i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

.side-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

/* ---- split-flap clock (signature element) ---- */
.flap-widget .panel-head {
    margin-bottom: 16px;
}

.flap-board {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--navy-900);
    border-radius: var(--radius-md);
    padding: 16px 10px;
}

.flap-group {
    display: flex;
    gap: 3px;
}

.flap {
    position: relative;
    width: 26px;
    height: 38px;
    background: var(--navy-700);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

    .flap::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background: rgba(0,0,0,.5);
    }

    .flap span {
        font-family: var(--font-ui);
        font-weight: 700;
        font-size: 19px;
        color: var(--teal);
        font-variant-numeric: tabular-nums;
    }

.flap-sep {
    color: var(--teal);
    font-weight: 700;
    font-size: 18px;
    align-self: center;
    opacity: .7;
}

.flap-caption {
    text-align: center;
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 12px;
}

/* ---- calendar ---- */
.cal-widget .cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .cal-widget .cal-head b {
        font-size: 13px;
        font-weight: 600;
    }

.cal-nav-btn {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    transition: background var(--transition);
}

    .cal-nav-btn:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 3px;
    text-align: center;
    font-size: 11.5px;
}

    .cal-grid .dow {
        color: var(--ink-faint);
        font-weight: 600;
        padding-bottom: 6px;
        font-size: 10.5px;
    }

    .cal-grid .day {
        padding: 7px 0;
        border-radius: 8px;
        color: var(--ink);
        cursor: default;
    }

        .cal-grid .day.muted {
            color: var(--ink-faint);
            opacity: .5;
        }

        .cal-grid .day.today {
            background: var(--teal);
            color: var(--navy-900);
            font-weight: 700;
        }

/* ---- settings modal ---- */
.settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8,12,24,.45);
    z-index: 60;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .settings-overlay.open {
        display: flex;
    }

.settings-modal {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
    padding: 22px;
}

.settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .settings-head h3 {
        font-size: 15px;
        font-weight: 600;
    }

.settings-section {
    margin-bottom: 20px;
}

    .settings-section:last-child {
        margin-bottom: 0;
    }

.settings-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.mode-switch {
    display: flex;
    gap: 8px;
}

.mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

    .mode-btn:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

    .mode-btn.active {
        background: var(--teal);
        color: #fff;
        border-color: var(--teal);
    }

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
}

.swatch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 6px;
    border-radius: var(--radius-sm);
    border: 1.6px solid var(--border);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 500;
    transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

    .swatch-btn:hover {
        transform: translateY(-1px);
        color: var(--ink);
    }

    .swatch-btn.active {
        border-color: var(--teal);
        color: var(--ink);
        background: var(--teal-tint);
    }

.swatch-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

/* ---- floating theme toggle for login page ---- */
.floating-toggle {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), color var(--transition);
}

    .floating-toggle:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

footer.app-footer {
    padding: 18px 24px;
    font-size: 11.5px;
    color: var(--ink-soft);
    text-align: center;
    border-top: 1px solid var(--border-soft);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px) {
    .grid-stats {
        grid-template-columns: repeat(2,1fr);
    }

    .span-8, .span-4 {
        grid-column: span 12;
    }

    .tri-grid {
        grid-template-columns: 1fr 1fr;
    }

    .login-card {
        grid-template-columns: 1fr;
        max-width: 460px;
    }

    .login-visual {
        display: none;
    }
}

@media (max-width:980px) {
    .sidebar {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        transform: translateX(100%);
        width: 280px;
        box-shadow: var(--shadow-md);
    }

    .app.collapsed .sidebar {
        width: 280px;
    }

    .app.mobile-open .sidebar {
        transform: translateX(0);
    }

    .app.collapsed .logo-text,
    .app.collapsed .nav-link .lbl,
    .app.collapsed .nav-link .chev {
        opacity: 1;
        width: auto;
    }

    .app.collapsed .submenu {
        display: block;
    }

    .admin-chip .who {
        display: none;
    }

    .page-title span {
        display: none;
    }

    .tri-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width:640px) {
    .grid-stats {
        grid-template-columns: 1fr 1fr;
    }

    .content {
        padding: 14px;
    }

    .topbar {
        padding: 0 14px;
        gap: 8px;
    }

    .logout-btn span {
        display: none;
    }

    .logout-btn {
        padding: 9px;
    }

    .admin-chip {
        padding: 6px;
    }

    .login-form-side {
        padding: 32px 22px;
    }

    .flap span {
        font-size: 16px;
    }

    .flap {
        width: 22px;
        height: 33px;
    }
}

@media (max-width:420px) {
    .grid-stats {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SIDEBAR - SCROLLABLE NAVIGATION
   Keep the header and footer fixed while allowing the
   navigation links to scroll when the menu is long.
   ========================================================= */
.sidebar {
    min-height: 0;
    overflow: hidden;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

    .sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.22);
        border-radius: 10px;
    }

        .sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,.35);
        }

    .sidebar-nav > ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

@media (max-width:980px) {
    .sidebar-nav {
        min-height: 0;
        overflow-y: auto;
    }
}

/* =========================================================
   BACKOFFICE CONTENT — NEWS CATEGORIES
   Appended to style.css so existing dashboard styles remain intact.
   ========================================================= */
.bo-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

    .bo-page-head h1 {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.2px;
        margin-top: 8px;
    }

    .bo-page-head p {
        margin: 5px 0 0;
        color: var(--ink-soft);
        font-size: 12.5px;
    }

.bo-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-faint);
    font-size: 11px;
}

    .bo-breadcrumb a {
        color: var(--teal-ink);
        font-weight: 600;
    }

    .bo-breadcrumb b {
        font-weight: 500;
        color: var(--ink-soft);
    }

.bo-primary-btn, .bo-secondary-btn {
    border: 0;
    border-radius: var(--radius-sm);
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    transition: all var(--transition);
}

.bo-primary-btn {
    background: var(--navy-900);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

    .bo-primary-btn:hover {
        background: var(--navy-800);
        transform: translateY(-1px);
    }

.bo-secondary-btn {
    background: var(--surface-2);
    color: var(--ink-soft);
    border: 1px solid var(--border);
}

    .bo-secondary-btn:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

.bo-btn-icon {
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    margin-top: -2px;
}

.bo-panel {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.bo-panel-head {
    min-height: 92px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--border-soft);
}

    .bo-panel-head h2 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .bo-panel-head span {
        font-size: 11.5px;
        color: var(--ink-soft);
    }

    .bo-panel-head code {
        direction: ltr;
        display: inline-block;
        color: var(--teal-ink);
        background: var(--teal-tint);
        border-radius: 6px;
        padding: 1px 5px;
        font-size: 10.5px;
    }

.bo-table-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bo-search {
    width: 240px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--ink-faint);
    transition: all var(--transition);
}

    .bo-search:focus-within {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px var(--teal-tint);
    }

    .bo-search input {
        border: 0;
        outline: 0;
        background: transparent;
        width: 100%;
        font-family: var(--font-ui);
        font-size: 11.5px;
        color: var(--ink);
    }

.bo-count {
    white-space: nowrap;
    background: var(--teal-tint);
    color: var(--teal-ink);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 10.5px;
    font-weight: 600;
}

.bo-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bo-data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

    .bo-data-table th {
        padding: 13px 20px;
        text-align: right;
        background: var(--surface-2);
        color: var(--ink-soft);
        font-size: 11px;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .bo-data-table td {
        padding: 15px 20px;
        text-align: right;
        color: var(--ink);
        font-size: 12.5px;
        border-bottom: 1px solid var(--border-soft);
        vertical-align: middle;
    }

    .bo-data-table tbody tr {
        transition: background var(--transition);
    }

        .bo-data-table tbody tr:hover {
            background: var(--surface-2);
        }

        .bo-data-table tbody tr:last-child td {
            border-bottom: 0;
        }

    .bo-data-table .actions-col {
        width: 145px;
        text-align: center;
    }

.category-title-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .category-title-cell strong {
        font-weight: 600;
    }

.category-index {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--teal-tint);
    color: var(--teal-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex: none;
}

.slug-chip {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 10.5px;
}

.news-count {
    display: inline-flex;
    min-width: 30px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--amber-tint);
    color: var(--amber);
    font-weight: 700;
    font-size: 11px;
}

.row-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

    .action-btn:hover {
        transform: translateY(-1px);
    }

    .action-btn.edit:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
        border-color: transparent;
    }

    .action-btn.view:hover {
        background: var(--amber-tint);
        color: var(--amber);
        border-color: transparent;
    }

    .action-btn.delete:hover {
        background: rgba(224,96,90,.10);
        color: var(--danger);
        border-color: transparent;
    }

.bo-loading {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--ink-soft);
    font-size: 11.5px;
}

    .bo-loading span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--teal);
        animation: bo-pulse 1s infinite ease-in-out;
    }

        .bo-loading span:nth-child(2) {
            animation-delay: .15s
        }

        .bo-loading span:nth-child(3) {
            animation-delay: .3s
        }

@keyframes bo-pulse {
    0%,80%,100% {
        opacity: .25;
        transform: scale(.8)
    }

    40% {
        opacity: 1;
        transform: scale(1)
    }
}

.bo-empty {
    padding: 55px 20px;
    text-align: center;
    color: var(--ink-soft);
}

.bo-empty-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 13px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--ink-faint);
}

.bo-empty strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
    margin-bottom: 3px;
}

.bo-empty span {
    font-size: 11px;
}

.bo-error {
    padding: 40px;
    text-align: center;
    color: var(--danger);
    font-size: 12px;
}

/* modal forms */
.bo-modal .modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.bo-modal .modal-header, .bo-modal .modal-footer {
    border-color: var(--border-soft);
    padding: 18px 20px;
}

.bo-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.bo-modal .modal-body {
    padding: 20px;
}

.bo-modal .modal-title {
    font-size: 15px;
    font-weight: 700;
    margin-top: 3px;
}

.bo-modal .modal-eyebrow {
    display: block;
    color: var(--teal-ink);
    font-size: 10.5px;
    font-weight: 600;
}

.bo-form-field {
    margin-bottom: 17px;
}

    .bo-form-field:last-of-type {
        margin-bottom: 0;
    }

    .bo-form-field label {
        display: block;
        margin-bottom: 7px;
        color: var(--ink-soft);
        font-size: 11.5px;
        font-weight: 600;
    }

    .bo-form-field small {
        display: block;
        margin-top: 5px;
        color: var(--ink-faint);
        font-size: 10px;
    }

.bo-input {
    width: 100%;
    height: 43px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink);
    outline: 0;
    padding: 0 12px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    transition: all var(--transition);
}

    .bo-input:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px var(--teal-tint);
    }

.modal-error {
    margin-top: 14px;
    color: var(--danger);
    font-size: 11.5px;
    white-space: pre-line;
}

.bo-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 11.5px;
}

    .bo-detail-item:last-child {
        border-bottom: 0;
    }

    .bo-detail-item span {
        color: var(--ink-soft);
    }

    .bo-detail-item strong {
        font-weight: 600;
        max-width: 70%;
        overflow-wrap: anywhere;
    }

.login-error {
    min-height: 0;
    color: var(--danger);
    font-size: 11px;
    margin-top: 5px;
}

.login-server-error {
    display: none;
    margin: 0 0 14px;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(224,96,90,.08);
    color: var(--danger);
    font-size: 11.5px;
    white-space: pre-line;
}

    .login-server-error:not(:empty) {
        display: block;
    }

.btn-primary:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

.submenu a.active {
    color: var(--teal);
    font-weight: 600;
}

@media (max-width:760px) {
    .bo-page-head {
        align-items: stretch;
        flex-direction: column;
    }

        .bo-page-head .bo-primary-btn {
            width: 100%;
        }

    .bo-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .bo-table-tools {
        width: 100%;
    }

    .bo-search {
        flex: 1;
        width: auto;
    }
}

@media (max-width:480px) {
    .bo-page-head h1 {
        font-size: 19px;
    }

    .bo-panel-head {
        padding: 16px;
    }

    .bo-table-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .bo-search {
        width: 100%;
    }

    .bo-data-table th, .bo-data-table td {
        padding: 12px 14px;
    }
}


/* NewCategory: detail & delete modals */
.bo-danger-eyebrow {
    color: var(--danger) !important;
}

.delete-warning-icon {
    width: 52px;
    height: 52px;
    margin: 2px auto 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    background: rgba(224,96,90,.09);
}

.delete-confirm-text {
    margin: 0;
    text-align: center;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.9;
}

.delete-category-name {
    margin: 12px 0;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--teal-ink);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.delete-hint {
    padding: 9px 11px;
    border-radius: 9px;
    background: rgba(224,96,90,.06);
    color: var(--ink-soft);
    font-size: 10.5px;
    line-height: 1.9;
    text-align: center;
}

.bo-danger-btn {
    min-height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--danger);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

    .bo-danger-btn:hover {
        filter: brightness(.96);
        transform: translateY(-1px);
    }

    .bo-danger-btn:disabled {
        opacity: .6;
        cursor: wait;
        transform: none;
    }

.category-error-message {
    padding: 13px;
    border-radius: 10px;
    background: rgba(224,96,90,.07);
    color: var(--danger);
    font-size: 11.5px;
    line-height: 2;
    text-align: center;
}

#categoryDetailModal .modal-dialog {
    max-width: 430px;
}

#categoryDetailModal .modal-body {
    padding: 8px 20px 18px;
}

@media (max-width:480px) {
    #categoryDetailModal .modal-dialog {
        margin: 12px;
    }

    .bo-danger-btn, .bo-secondary-btn, .bo-primary-btn {
        min-height: 40px;
    }
}

/* NewCategory delete modal - unified action buttons */
#deleteCategoryModal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

    #deleteCategoryModal .modal-footer > .bo-secondary-btn,
    #deleteCategoryModal .modal-footer > .bo-danger-btn {
        box-sizing: border-box;
        min-width: 108px;
        height: 40px;
        min-height: 40px;
        padding: 0 16px;
        margin: 0;
        border-radius: var(--radius-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-ui);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        transition: all var(--transition);
    }

    #deleteCategoryModal .modal-footer .bo-danger-btn {
        border: 1px solid var(--danger);
        background: var(--danger);
        color: #fff;
        box-shadow: none;
    }

        #deleteCategoryModal .modal-footer .bo-danger-btn:hover:not(:disabled) {
            filter: none;
            background: color-mix(in srgb, var(--danger) 90%, #000 10%);
            border-color: color-mix(in srgb, var(--danger) 90%, #000 10%);
            transform: translateY(-1px);
        }

    #deleteCategoryModal .modal-footer .bo-secondary-btn:hover {
        transform: translateY(-1px);
    }

    #deleteCategoryModal .modal-footer .bo-danger-btn:disabled {
        opacity: .6;
        cursor: wait;
        transform: none;
    }

@media (max-width:480px) {
    #deleteCategoryModal .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        #deleteCategoryModal .modal-footer > .bo-secondary-btn,
        #deleteCategoryModal .modal-footer > .bo-danger-btn {
            width: 100%;
        }
}


/* =========================================================
   BOOK CATEGORY / ARTICLE TYPE — BACKOFFICE CONSISTENT UI
   Added for category management screens. Keep additions here.
   ========================================================= */
.bo-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600
}

    .bo-status-pill.success {
        color: var(--teal-ink);
        background: var(--teal-tint)
    }

    .bo-status-pill.warning {
        color: #a66a17;
        background: var(--amber-tint)
    }

.bo-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.bo-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px
}

.bo-form-field-full {
    grid-column: 1/-1
}

.bo-form-field label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft)
}

.bo-form-field small {
    font-size: 11px;
    color: var(--ink-faint)
}

.bo-input {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    outline: none;
    font-family: var(--font-ui);
    font-size: 13px;
    transition: border-color var(--transition),box-shadow var(--transition)
}

    .bo-input:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px var(--teal-tint)
    }

textarea.bo-input {
    resize: vertical;
    min-height: 90px
}

.bo-switch-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px
}

    .bo-switch-row label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 13px;
        background: var(--surface-2);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-sm);
        font-size: 12px;
        color: var(--ink-soft)
    }

    .bo-switch-row input {
        accent-color: var(--teal)
    }

.bo-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.bo-detail-item {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 13px 15px;
    min-width: 0
}

    .bo-detail-item span {
        display: block;
        color: var(--ink-faint);
        font-size: 11px;
        margin-bottom: 4px
    }

    .bo-detail-item strong {
        display: block;
        color: var(--ink);
        font-size: 13px;
        overflow-wrap: anywhere
    }

.bo-modal .modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden
}

.bo-modal .modal-header {
    border-bottom: 1px solid var(--border-soft);
    padding: 18px 22px;
    background: var(--surface)
}

.bo-modal .modal-body {
    padding: 22px
}

.bo-modal .modal-footer {
    border-top: 1px solid var(--border-soft);
    padding: 14px 22px;
    display: flex;
    gap: 10px;
    justify-content: flex-start
}

.bo-modal .modal-title {
    font-size: 16px;
    font-weight: 700
}

.modal-eyebrow {
    display: block;
    color: var(--teal-ink);
    font-size: 10.5px;
    font-weight: 700;
    margin-bottom: 2px
}

.bo-danger-eyebrow {
    color: var(--danger)
}

.bo-primary-btn, .bo-secondary-btn, .bo-danger-btn {
    min-height: 42px;
    padding: 9px 17px;
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all var(--transition)
}

.bo-primary-btn {
    background: var(--navy-900);
    color: #fff;
    border-color: var(--navy-900)
}

    .bo-primary-btn:hover {
        background: var(--navy-800);
        color: #fff
    }

.bo-secondary-btn {
    background: var(--surface-2);
    color: var(--ink-soft);
    border-color: var(--border)
}

    .bo-secondary-btn:hover {
        background: var(--surface);
        color: var(--ink);
        border-color: var(--ink-faint)
    }

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

    .bo-danger-btn:hover {
        filter: brightness(.94);
        color: #fff
    }

    .bo-primary-btn:disabled, .bo-secondary-btn:disabled, .bo-danger-btn:disabled {
        opacity: .6;
        cursor: not-allowed
    }

.modal-error {
    color: var(--danger);
    font-size: 12px;
    line-height: 1.8;
    min-height: 0;
    margin-top: 8px
}

    .modal-error:empty {
        display: none
    }

.delete-warning-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(224,96,90,.10);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 700;
    margin: 2px auto 16px
}

.delete-confirm-text {
    text-align: center;
    margin: 0 0 10px;
    color: var(--ink-soft);
    font-size: 13px
}

.delete-category-name {
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px
}

.delete-hint {
    text-align: center;
    color: var(--ink-faint);
    font-size: 11px;
    line-height: 1.8
}

.category-error-message {
    background: rgba(224,96,90,.08);
    color: var(--danger);
    border: 1px solid rgba(224,96,90,.15);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-size: 12px
}

@media(max-width:700px) {
    .bo-form-grid, .bo-detail-grid {
        grid-template-columns: 1fr
    }

    .bo-form-field-full {
        grid-column: auto
    }

    .bo-modal .modal-body {
        padding: 18px
    }

    .bo-modal .modal-header {
        padding: 16px 18px
    }

    .bo-modal .modal-footer {
        padding: 12px 18px
    }

        .bo-modal .modal-footer .bo-primary-btn, .bo-modal .modal-footer .bo-secondary-btn, .bo-modal .modal-footer .bo-danger-btn {
            flex: 1
        }
}


/* =========================================================
   PROJECT CATEGORY — BACKOFFICE CONSISTENT UI
   This section intentionally stays at the end of style.css.
   ========================================================= */

.project-category-panel .bo-panel-head {
    min-height: 92px;
}

.project-category-table {
    min-width: 620px;
}

    .project-category-table .actions-col {
        width: 150px;
    }

.project-filter-chip {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#projectCategoryModalContainer .bo-modal .modal-dialog {
    width: 100%;
}

#projectCategoryModalContainer .bo-modal .modal-content {
    border-radius: var(--radius-lg);
}

#projectCategoryModalContainer .bo-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

#projectCategoryModalContainer .bo-modal .bo-primary-btn,
#projectCategoryModalContainer .bo-modal .bo-secondary-btn {
    min-width: 118px;
}

#deleteProjectCategoryModal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

    #deleteProjectCategoryModal .modal-footer > .bo-secondary-btn,
    #deleteProjectCategoryModal .modal-footer > .bo-danger-btn {
        box-sizing: border-box;
        min-width: 108px;
        height: 40px;
        min-height: 40px;
        padding: 0 16px;
        margin: 0;
        border-radius: var(--radius-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-ui);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    #deleteProjectCategoryModal .modal-footer .bo-danger-btn {
        border: 1px solid var(--danger);
        background: var(--danger);
        color: #fff;
        box-shadow: none;
    }

        #deleteProjectCategoryModal .modal-footer .bo-danger-btn:hover:not(:disabled) {
            filter: none;
            background: color-mix(in srgb, var(--danger) 90%, #000 10%);
            border-color: color-mix(in srgb, var(--danger) 90%, #000 10%);
            transform: translateY(-1px);
        }

    #deleteProjectCategoryModal .modal-footer .bo-secondary-btn:hover {
        transform: translateY(-1px);
    }

    #deleteProjectCategoryModal .modal-footer .bo-danger-btn:disabled {
        opacity: .6;
        cursor: wait;
        transform: none;
    }

.bo-validation-message {
    display: block;
    min-height: 0;
    margin-top: 5px;
    color: var(--danger);
    font-size: 10.5px;
    line-height: 1.8;
}

.bo-input[aria-invalid="true"] {
    border-color: var(--danger);
}

@media (max-width:760px) {
    .project-category-panel .bo-panel-head {
        align-items: stretch;
    }

    .project-category-table {
        min-width: 590px;
    }

    #projectCategoryModalContainer .bo-modal .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    #projectCategoryModalContainer .bo-modal .bo-primary-btn,
    #projectCategoryModalContainer .bo-modal .bo-secondary-btn {
        width: 100%;
    }
}

@media (max-width:480px) {
    #deleteProjectCategoryModal .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        #deleteProjectCategoryModal .modal-footer > .bo-secondary-btn,
        #deleteProjectCategoryModal .modal-footer > .bo-danger-btn {
            width: 100%;
        }
}

/* =========================================================
   NEWS MANAGEMENT — FINAL BACKOFFICE UI
   Appended intentionally at the end of style.css.
   ========================================================= */

.news-index-panel {
    overflow: hidden;
}

.news-index-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.news-search-box {
    position: relative;
    width: min(360px, 100%);
}

    .news-search-box i {
        position: absolute;
        top: 50%;
        right: 13px;
        transform: translateY(-50%);
        color: var(--ink-faint);
        pointer-events: none;
    }

    .news-search-box input {
        width: 100%;
        height: 40px;
        padding: 0 38px 0 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-2);
        color: var(--ink);
        outline: none;
        font-family: var(--font-ui);
        font-size: 12px;
    }

        .news-search-box input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px var(--teal-tint);
        }

.news-index-table {
    min-width: 1050px;
}

    .news-index-table .actions-col {
        width: 140px;
    }

.news-index-image,
.news-no-image {
    width: 58px;
    height: 48px;
    border-radius: 9px;
    object-fit: cover;
}

.news-no-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--ink-faint);
}

.news-title-cell {
    min-width: 190px;
    text-align: right;
}

    .news-title-cell strong {
        display: block;
        color: var(--ink);
        font-size: 12.5px;
        line-height: 1.8;
        white-space: normal;
    }

    .news-title-cell span {
        display: block;
        margin-top: 3px;
        color: var(--ink-faint);
        font-size: 10px;
        overflow-wrap: anywhere;
    }

.news-category-chip,
.news-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1.4;
    white-space: nowrap;
}

.news-category-chip {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--surface-2);
    color: var(--ink-soft);
    border: 1px solid var(--border-soft);
}

.news-status-chip.is-success {
    background: rgba(48, 167, 113, .10);
    color: #25885d;
}

.news-status-chip.is-muted {
    background: rgba(120, 130, 145, .10);
    color: var(--ink-soft);
}

.news-status-chip.is-warning {
    background: rgba(226, 169, 67, .12);
    color: #a66f12;
}

.news-date-cell {
    direction: rtl;
    white-space: nowrap;
    color: var(--ink-soft);
    font-size: 10.5px;
}

.news-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.bo-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    transition: all var(--transition);
}

    .bo-action-btn:hover {
        transform: translateY(-1px);
    }

    .bo-action-btn.edit:hover {
        color: var(--teal-ink);
        border-color: var(--teal);
        background: var(--teal-tint);
    }

    .bo-action-btn.view:hover {
        color: #5573a8;
        border-color: #9eb3d9;
        background: rgba(85, 115, 168, .08);
    }

    .bo-action-btn.delete:hover {
        color: var(--danger);
        border-color: var(--danger);
        background: rgba(224, 96, 90, .08);
    }

.news-form-modal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 1180px;
    margin: 12px auto;
    height: calc(100vh - 24px);
}

.news-form-modal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-form-modal .modal-header {
    flex: 0 0 auto;
}

.news-form-modal .news-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: var(--surface-2);
}

.news-form-modal .news-modal-footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    background: var(--surface);
}

.news-tabs {
    position: sticky;
    top: -22px;
    z-index: 5;
    display: flex;
    gap: 4px;
    margin: -22px -22px 22px;
    padding: 10px 22px 0;
    list-style: none;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
}

.news-tab-item {
    margin: 0;
}

.news-tab-button {
    min-height: 42px;
    padding: 0 17px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ink-faint);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .news-tab-button:hover {
        color: var(--ink);
    }

    .news-tab-button.active {
        color: var(--teal-ink);
        border-bottom-color: var(--teal);
    }

.news-tab-content {
    min-height: 280px;
}

.news-form-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 600;
}

.news-input,
.news-select {
    min-height: 42px;
}

.news-help {
    display: block;
    margin-top: 5px;
    color: var(--ink-faint);
    font-size: 10.5px;
    line-height: 1.8;
}

.news-info-box {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(67, 168, 161, .18);
    border-radius: var(--radius-sm);
    background: rgba(67, 168, 161, .07);
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.9;
}

.news-switch-card,
.news-date-card {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 11px;
}

    .news-switch-card input {
        accent-color: var(--teal);
    }

.news-date-card {
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 8px;
}

    .news-date-card span {
        color: var(--ink-faint);
    }

    .news-date-card strong {
        color: var(--ink-soft);
        font-size: 10.5px;
    }

.news-editor {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

    .news-editor:focus-within {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px var(--teal-tint);
    }

.news-editor-toolbar {
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-2);
}

    .news-editor-toolbar button {
        min-width: 32px;
        height: 31px;
        padding: 0 7px;
        border: 1px solid transparent;
        border-radius: 6px;
        background: transparent;
        color: var(--ink-soft);
        font-family: var(--font-ui);
        font-size: 11px;
        cursor: pointer;
    }

        .news-editor-toolbar button:hover {
            border-color: var(--border);
            background: var(--surface);
            color: var(--ink);
        }

.news-editor-divider {
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: var(--border);
}

.news-editor-content {
    min-height: 280px;
    max-height: 430px;
    overflow-y: auto;
    padding: 15px 16px;
    outline: none;
    color: var(--ink);
    background: var(--surface);
    font-size: 13px;
    line-height: 2.1;
}

    .news-editor-content:empty::before {
        content: 'متن خبر را اینجا وارد کنید...';
        color: var(--ink-faint);
    }

    .news-editor-content h2,
    .news-editor-content h3 {
        margin: 1.1em 0 .5em;
        color: var(--ink);
    }

    .news-editor-content blockquote {
        margin: 1em 0;
        padding: 8px 14px;
        border-right: 3px solid var(--teal);
        border-left: 0;
        background: var(--surface-2);
        color: var(--ink-soft);
    }

.news-editor-value {
    display: none !important;
}

.news-image-card {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.news-preview-image {
    width: 100%;
    height: 160px;
    display: block;
    object-fit: cover;
    background: var(--surface-2);
}

.news-image-card-body {
    padding: 10px;
    color: var(--ink-soft);
    font-size: 10.5px;
}

    .news-image-card-body .form-check {
        display: flex;
        align-items: center;
        gap: 7px;
    }

.news-image-delete-btn {
    width: 100%;
    min-height: 36px;
    margin-top: 10px;
    color: var(--danger);
    border-color: rgba(224, 96, 90, .28);
}

    .news-image-delete-btn:hover {
        color: var(--danger);
        border-color: var(--danger);
        background: rgba(224, 96, 90, .08);
    }

.news-section-title {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.news-delete-modal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 500px;
}

.news-delete-modal .modal-footer {
    align-items: center;
}

.news-delete-modal .bo-secondary-btn,
.news-delete-modal .bo-danger-btn {
    min-width: 120px;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    margin: 0;
    box-sizing: border-box;
}

    .news-delete-modal .bo-danger-btn:hover {
        transform: translateY(-1px);
    }

@media (max-width: 900px) {
    .news-index-table {
        min-width: 980px;
    }

    .news-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 700px) {
    .news-index-tools {
        width: 100%;
    }

    .news-search-box {
        flex: 1 1 100%;
        width: 100%;
    }

    .news-form-modal .modal-dialog {
        width: calc(100% - 10px);
        height: calc(100vh - 10px);
        margin: 5px auto;
    }

    .news-form-modal .modal-body {
        padding: 16px;
    }

    .news-tabs {
        top: -16px;
        margin: -16px -16px 18px;
        padding: 8px 16px 0;
    }

    .news-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch !important;
    }

        .news-modal-footer .bo-primary-btn,
        .news-modal-footer .bo-secondary-btn {
            width: 100%;
        }

    .news-delete-modal .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .news-delete-modal .bo-secondary-btn,
    .news-delete-modal .bo-danger-btn {
        width: 100%;
    }

    .news-editor-content {
        min-height: 230px;
    }
}


/* ==========================================================
   NEWS FORM FINAL FIXES
   CKEditor + modal footer + main image selector
   ========================================================== */

.news-form-modal .modal-content > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.news-form-modal .news-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.news-form-modal .news-modal-footer {
    flex: 0 0 auto;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 22px;
    border-top: 1px solid var(--border-soft);
    background: var(--surface);
    position: relative;
    z-index: 10;
}

    .news-form-modal .news-modal-footer .bo-primary-btn,
    .news-form-modal .news-modal-footer .bo-secondary-btn {
        min-height: 42px;
    }

.news-ckeditor-wrapper {
    overflow: visible;
    border: 0;
    background: transparent;
}

.news-ckeditor-source {
    width: 100%;
}

.news-form-modal .ck.ck-editor {
    width: 100%;
    border-radius: var(--radius-sm);
}

.news-form-modal .ck.ck-toolbar {
    border: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    background: var(--surface-2) !important;
}

.news-form-modal .ck.ck-editor__main > .ck-editor__editable {
    min-height: 300px;
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--border) !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-family: var(--font-ui), sans-serif;
    font-size: 13px;
    line-height: 2;
    padding: 14px 16px;
    direction: rtl;
    text-align: right;
}

    .news-form-modal .ck.ck-editor__main > .ck-editor__editable.ck-focused {
        border-color: var(--teal) !important;
        box-shadow: 0 0 0 3px var(--teal-tint) !important;
    }

.news-form-modal .ck.ck-button,
.news-form-modal .ck.ck-toolbar__separator {
    color: var(--ink-soft);
}

    .news-form-modal .ck.ck-button:hover:not(.ck-disabled),
    .news-form-modal .ck.ck-button.ck-on {
        color: var(--teal-ink);
        background: var(--teal-tint);
    }

.news-image-card-body .news-main-image-option {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}

.news-main-image-option input[type="checkbox"] {
    position: static !important;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 0 !important;
    accent-color: var(--teal);
    cursor: pointer;
}

.news-main-image-option span {
    line-height: 1.6;
}

.news-image-card-body .form-check {
    position: static;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

    .news-image-card-body .form-check .form-check-input {
        position: static !important;
        flex: 0 0 17px;
        width: 17px;
        height: 17px;
        margin: 0 !important;
        accent-color: var(--teal);
    }

    .news-image-card-body .form-check .form-check-label {
        margin: 0;
        color: var(--ink-soft);
        cursor: pointer;
    }

@media (max-width: 700px) {
    .news-form-modal .news-modal-footer {
        min-height: auto;
        padding: 10px 16px;
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .news-form-modal .news-modal-footer .bo-primary-btn,
        .news-form-modal .news-modal-footer .bo-secondary-btn {
            width: 100%;
        }

    .news-form-modal .ck.ck-editor__main > .ck-editor__editable {
        min-height: 220px;
        max-height: 360px;
    }
}

/* =========================================================
   GENERIC LIST TABLE - NEWS / ARTICLES / CATEGORIES
   ========================================================= */
.bo-list-table {
    width: 100%;
    min-width: 1120px;
    table-layout: fixed;
}

    .bo-list-table th,
    .bo-list-table td {
        padding: 13px 14px;
        vertical-align: middle;
    }

    .bo-list-table thead th {
        height: 48px;
        background: var(--surface-2);
        color: var(--ink-soft);
        font-weight: 700;
        border-bottom: 1px solid var(--border);
    }

    .bo-list-table tbody tr {
        background: var(--surface);
        transition: background var(--transition);
    }

        .bo-list-table tbody tr:hover {
            background: #f8fbfc;
        }

    .bo-list-table .actions-col,
    .bo-list-table td:last-child {
        text-align: center;
        white-space: nowrap;
    }

/* News list column proportions */
#newsTable th:nth-child(1), #newsTable td:nth-child(1) {
    width: 82px;
    text-align: center;
}

#newsTable th:nth-child(2), #newsTable td:nth-child(2) {
    width: 28%;
}

#newsTable th:nth-child(3), #newsTable td:nth-child(3) {
    width: 12%;
}

#newsTable th:nth-child(4), #newsTable td:nth-child(4) {
    width: 12%;
}

#newsTable th:nth-child(5), #newsTable td:nth-child(5) {
    width: 9%;
}

#newsTable th:nth-child(6), #newsTable td:nth-child(6) {
    width: 12%;
}

#newsTable th:nth-child(7), #newsTable td:nth-child(7) {
    width: 12%;
}

#newsTable th:nth-child(8), #newsTable td:nth-child(8) {
    width: 145px;
}

#newsTable .bo-table-image,
#newsTable .bo-table-no-image {
    width: 62px;
    height: 52px;
    border-radius: 10px;
}

@media (max-width: 1200px) {
    .bo-list-table {
        min-width: 1080px;
    }

        .bo-list-table th, .bo-list-table td {
            padding-left: 10px;
            padding-right: 10px;
        }
}


/* =========================================================
   FINAL UI CONSISTENCY FIXES — Categories & News
   ========================================================= */

/* News category detail: keep the three fields visually separated. */
#categoryDetailModal .bo-detail-grid-single {
    grid-template-columns: 1fr;
    gap: 10px;
}

#categoryDetailModal .bo-detail-item {
    min-height: 58px;
}

/* News detail modal: in RTL the close X must stay on the right,
   while the modal title block stays on the opposite side. */
.news-detail-modal .modal-header {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .news-detail-modal .modal-header > div {
        order: 2;
        text-align: right;
    }

    .news-detail-modal .modal-header > .btn-close {
        order: 1;
        margin: 0 !important;
        flex: 0 0 auto;
    }

/* News index: remove SEO column and give the title only a compact share
   of the available width so the remaining columns stay balanced. */
#newsTable th:nth-child(2),
#newsTable td:nth-child(2) {
    width: 18%;
    max-width: 18%;
}

#newsTable .news-title-cell {
    min-width: 0;
    max-width: 100%;
}

    #newsTable .news-title-cell strong {
        overflow-wrap: anywhere;
    }

    #newsTable .news-title-cell span {
        overflow-wrap: anywhere;
    }

@media (max-width: 900px) {
    #newsTable th:nth-child(2),
    #newsTable td:nth-child(2) {
        width: 22%;
        max-width: 22%;
    }
}



/* =========================================================
   BOOK MANAGEMENT — FINAL BACKOFFICE UI
   Consolidated from inline <style> blocks previously duplicated
   across Book/Create.cshtml and Book/Index.cshtml, plus new rules
   for classes that had no styling at all (Edit/Details pages).
   Appended intentionally at the end of style.css.
   ========================================================= */

/* ---- Index: toolbar & search ---- */
.book-index-panel {
    overflow: hidden;
}

.book-page-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.book-index-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.book-search-box {
    position: relative;
    width: min(320px, 100%);
}

    .book-search-box i {
        position: absolute;
        top: 50%;
        right: 13px;
        transform: translateY(-50%);
        color: var(--ink-faint);
        pointer-events: none;
    }

    .book-search-box input {
        width: 100%;
        height: 40px;
        padding: 0 38px 0 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-2);
        color: var(--ink);
        outline: none;
        font-family: var(--font-ui);
        font-size: 12px;
        transition: all var(--transition);
    }

        .book-search-box input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px var(--teal-tint);
        }

/* ---- Index: table ---- */
.book-management-table {
    min-width: 1120px;
}

    .book-management-table .book-title-column,
    .book-management-table td:nth-child(2) {
        width: 22%;
    }

    .book-management-table .actions-col {
        width: 150px;
    }

.book-title-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .book-title-cell strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--ink);
        font-size: 12.5px;
    }

    .book-title-cell span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--ink-faint);
        font-size: 10px;
    }

.bo-table-image, .bo-table-no-image {
    width: 58px;
    height: 48px;
    border-radius: 9px;
    object-fit: cover;
}

.bo-table-no-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--ink-faint);
}

.book-table-image,
.book-index-panel .bo-table-no-image {
    width: 52px;
    height: 68px;
    border-radius: 10px;
}

.book-category-chip {
    display: inline-flex;
    align-items: center;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10.5px;
    background: var(--surface-2);
    color: var(--ink-soft);
    border: 1px solid var(--border-soft);
}

.book-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    margin: 2px 4px 2px 0;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1.4;
    white-space: nowrap;
}

    .book-status-chip.is-success {
        background: rgba(48, 167, 113, .10);
        color: #25885d;
    }

    .book-status-chip.is-muted {
        background: rgba(120, 130, 145, .10);
        color: var(--ink-soft);
    }

    .book-status-chip.is-info {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

.book-pdf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(224, 96, 90, .08);
    color: var(--danger);
    text-decoration: none;
}

    .book-pdf-chip:hover {
        background: rgba(224, 96, 90, .14);
    }

.book-muted-value {
    color: var(--ink-faint);
}

.book-date-cell {
    direction: rtl;
    white-space: nowrap;
    color: var(--ink-soft);
    font-size: 10.5px;
}

.bo-empty-state {
    padding: 55px 20px;
    text-align: center;
    color: var(--ink-soft);
}

    .bo-empty-state i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        border-radius: 13px;
        background: var(--surface-2);
        font-size: 19px;
        color: var(--ink-faint);
    }

    .bo-empty-state strong {
        display: block;
        color: var(--ink);
        font-size: 13px;
        margin-bottom: 3px;
    }

    .bo-empty-state span {
        font-size: 11px;
    }

@media (max-width: 1200px) {
    .book-management-table {
        min-width: 1080px;
    }
}

@media (max-width: 760px) {
    .book-page-actions, .book-index-tools {
        width: 100%;
    }

        .book-page-actions > * {
            flex: 1;
            justify-content: center;
        }

    .book-index-tools {
        align-items: stretch;
    }

    .book-search-box {
        width: auto;
        flex: 1;
    }
}

/* ---- Create/Edit/Details: shared modal chrome ---- */
#bookCreateModal .modal-dialog,
#bookEditModal .modal-dialog,
#bookDetailsModal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 1180px;
    margin: 12px auto;
    height: calc(100vh - 24px);
}

.content-admin-modal {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

    .content-admin-modal .modal-header {
        flex: 0 0 auto;
        border-color: var(--border-soft);
        padding: 18px 22px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .content-admin-modal .modal-title {
        font-size: 15px;
        font-weight: 700;
        margin-top: 3px;
    }

    .content-admin-modal .modal-header small {
        display: block;
        margin-top: 4px;
        color: var(--ink-faint);
        font-size: 10.5px;
    }

    .content-admin-modal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        background: var(--surface-2);
        padding: 22px;
    }

    .content-admin-modal .modal-footer {
        flex: 0 0 auto;
        position: relative;
        z-index: 2;
        background: var(--surface);
        border-color: var(--border-soft);
        padding: 14px 22px;
        display: flex;
        gap: 10px;
        justify-content: flex-start;
    }

    .content-admin-modal .btn-close {
        opacity: .5;
    }

        .content-admin-modal .btn-close:hover {
            opacity: .9;
        }

/* ---- Create/Edit: tabs ---- */
.content-form-tabs {
    position: sticky;
    top: -22px;
    z-index: 5;
    display: flex;
    gap: 4px;
    margin: -22px -22px 22px;
    padding: 10px 22px 0;
    list-style: none;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
}

    .content-form-tabs .nav-item {
        margin: 0;
    }

    .content-form-tabs .nav-link {
        min-height: 42px;
        padding: 0 17px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: transparent;
        color: var(--ink-faint);
        font-family: var(--font-ui);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

        .content-form-tabs .nav-link:hover {
            color: var(--ink);
        }

        .content-form-tabs .nav-link.active {
            color: var(--teal-ink);
            background: transparent;
            border-bottom-color: var(--teal);
        }

/* ---- Create/Edit: form fields (native Bootstrap classes, repainted) ---- */
.content-admin-modal .form-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 600;
}

.content-admin-modal .form-control,
.content-admin-modal .form-select {
    width: 100%;
    min-height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    outline: 0;
    padding: 9px 12px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    transition: all var(--transition);
}

.content-admin-modal textarea.form-control {
    min-height: 90px;
    resize: vertical;
}

.content-admin-modal .form-control:focus,
.content-admin-modal .form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-tint);
    background: var(--surface);
}

.content-admin-modal .form-text {
    margin-top: 5px;
    color: var(--ink-faint);
    font-size: 10.5px;
    line-height: 1.8;
}

.content-admin-modal .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
}

.content-admin-modal .form-check-input {
    accent-color: var(--teal);
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: pointer;
}

.content-admin-modal .form-switch .form-check-input {
    width: 2.4em;
}

.content-admin-modal .form-check-label {
    color: var(--ink-soft);
    font-size: 11.5px;
    cursor: pointer;
}

.content-admin-modal .alert-info,
.seo-admin-intro {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(67, 168, 161, .18);
    border-radius: var(--radius-sm);
    background: rgba(67, 168, 161, .07);
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.9;
}

    .seo-admin-intro i {
        color: var(--teal-ink);
        font-size: 16px;
        margin-top: 1px;
    }

    .seo-admin-intro strong {
        display: block;
        color: var(--ink);
        margin-bottom: 3px;
        font-size: 12px;
    }

.content-admin-modal .alert-danger {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    background: rgba(224, 96, 90, .08);
    border: 1px solid rgba(224, 96, 90, .18);
    color: var(--danger);
    font-size: 11.5px;
}

.content-admin-modal .alert-light {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border-soft) !important;
    color: var(--ink-soft);
    font-size: 11.5px;
}

.seo-counter {
    margin-top: 5px;
    text-align: left;
    direction: ltr;
    color: var(--ink-faint);
    font-size: 10px;
}

.seo-switch-card,
.publish-status-card {
    min-height: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 11px;
}

.seo-switch-card {
    justify-content: flex-start;
}

.publish-status-card strong {
    display: block;
    color: var(--ink);
    font-size: 12.5px;
    margin-bottom: 3px;
}

.publish-status-card span {
    color: var(--ink-faint);
    font-size: 10.5px;
}

/* ---- Create/Edit/Details: buttons & badges inside the admin modal ---- */
.content-admin-modal .btn {
    min-height: 42px;
    padding: 0 17px;
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all var(--transition);
}

.content-admin-modal .btn-primary {
    background: var(--navy-900);
    color: #fff;
    border-color: var(--navy-900);
}

    .content-admin-modal .btn-primary:hover {
        background: var(--navy-800);
        color: #fff;
    }

    .content-admin-modal .btn-primary:disabled {
        opacity: .65;
        cursor: wait;
    }

.content-admin-modal .btn-light {
    background: var(--surface-2);
    color: var(--ink-soft);
    border-color: var(--border);
}

    .content-admin-modal .btn-light:hover {
        background: var(--surface);
        color: var(--ink);
    }

.content-admin-modal .btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

    .content-admin-modal .btn-danger:hover {
        filter: brightness(.94);
        color: #fff;
    }

.content-admin-modal .badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--font-ui);
}

    .content-admin-modal .badge.bg-success {
        background: rgba(48, 167, 113, .12) !important;
        color: #25885d !important;
    }

    .content-admin-modal .badge.bg-secondary {
        background: rgba(120, 130, 145, .12) !important;
        color: var(--ink-soft) !important;
    }

    .content-admin-modal .badge.bg-info {
        background: var(--teal-tint) !important;
        color: var(--teal-ink) !important;
    }

    .content-admin-modal .badge.bg-danger {
        background: rgba(224, 96, 90, .12) !important;
        color: var(--danger) !important;
    }

    .content-admin-modal .badge.bg-warning {
        background: var(--amber-tint) !important;
        color: #a66a17 !important;
    }

/* ---- Create/Edit: image upload / existing image cards ---- */
.book-image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.book-image-preview-item {
    min-width: 0;
}

.book-upload-image-card, .book-existing-image-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

    .book-existing-image-card.is-main {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px var(--teal-tint);
    }

    .book-upload-image-card > img, .book-existing-image-card > img {
        display: block;
        width: 100%;
        height: 150px;
        object-fit: cover;
        background: var(--surface-2);
    }

.book-upload-image-body, .book-existing-image-body {
    padding: 10px;
}

.book-upload-image-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.book-upload-image-body .form-check,
.book-existing-image-body .form-check {
    margin-bottom: 0;
}

.book-upload-image-body .form-control-sm {
    min-height: 36px;
    font-size: 11.5px;
}

.book-image-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 600;
}

.book-existing-image-card.is-main .book-image-status {
    background: var(--teal-tint);
    color: var(--teal-ink);
}

/* ---- Create/Edit: audit grid (created / updated / downloads) ---- */
.book-audit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

    .book-audit-grid > div {
        background: var(--surface);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        padding: 13px 15px;
    }

    .book-audit-grid span {
        display: block;
        color: var(--ink-faint);
        font-size: 10.5px;
        margin-bottom: 4px;
    }

    .book-audit-grid strong {
        display: block;
        color: var(--ink);
        font-size: 12.5px;
    }

/* ---- Details: hero, meta, sections ---- */
.book-detail-hero {
    display: flex;
    gap: 22px;
    margin-bottom: 26px;
}

.book-detail-cover {
    flex: 0 0 190px;
    width: 190px;
    height: 250px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

    .book-detail-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.content-image-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--ink-faint);
    font-size: 22px;
}

    .content-image-empty.large {
        font-size: 36px;
    }

.book-detail-summary {
    flex: 1;
    min-width: 0;
}

    .book-detail-summary h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 4px;
    }

.book-detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

    .book-detail-meta-grid > div {
        background: var(--surface);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        padding: 11px 13px;
    }

    .book-detail-meta-grid span {
        display: block;
        color: var(--ink-faint);
        font-size: 10.5px;
        margin-bottom: 4px;
    }

    .book-detail-meta-grid strong {
        display: block;
        color: var(--ink);
        font-size: 12px;
        overflow-wrap: anywhere;
    }

.book-detail-section {
    margin-bottom: 24px;
}

    .book-detail-section:last-child {
        margin-bottom: 0;
    }

.book-detail-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

    .book-detail-section-title h6 {
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        margin: 0;
    }

.book-detail-html {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 16px 18px;
    color: var(--ink);
    font-size: 12.5px;
    line-height: 2;
}

.book-detail-image-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

    .book-detail-image-card.is-main {
        border-color: var(--teal);
    }

    .book-detail-image-card img {
        display: block;
        width: 100%;
        height: 140px;
        object-fit: cover;
    }

.book-seo-item {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

    .book-seo-item span {
        display: block;
        color: var(--ink-faint);
        font-size: 10.5px;
        margin-bottom: 4px;
    }

    .book-seo-item strong {
        display: block;
        color: var(--ink);
        font-size: 12px;
        overflow-wrap: anywhere;
    }

.book-pdf-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.book-pdf-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(224, 96, 90, .10);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.book-pdf-card > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.book-pdf-card strong {
    display: block;
    color: var(--ink);
    font-size: 12.5px;
    margin-bottom: 3px;
    overflow-wrap: anywhere;
}

.book-pdf-card span {
    color: var(--ink-faint);
    font-size: 10.5px;
}

@media (max-width: 700px) {
    .book-detail-hero {
        flex-direction: column;
    }

    .book-detail-cover {
        width: 100%;
        height: 200px;
    }

    .book-detail-meta-grid {
        grid-template-columns: 1fr 1fr;
    }

    .book-audit-grid {
        grid-template-columns: 1fr;
    }

    .content-admin-modal .modal-body {
        padding: 16px;
    }

    .content-form-tabs {
        margin: -16px -16px 18px;
        padding: 10px 16px 0;
    }
}



/* =========================================================
   ARTICLE MANAGEMENT — family style, no inline page styles
   ========================================================= */
.article-page-head {
    margin-bottom: 22px;
}

.article-index-panel {
}

.article-index-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.article-search-box {
    position: relative;
    min-width: 280px;
}

    .article-search-box i {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-faint);
        pointer-events: none;
    }

    .article-search-box input {
        width: 100%;
        height: 40px;
        padding: 0 38px 0 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        outline: none;
        background: var(--surface);
        color: var(--ink);
        font-family: inherit;
        transition: border-color var(--transition),box-shadow var(--transition);
    }

        .article-search-box input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px var(--teal-tint);
        }

.article-filter-select {
    min-width: 145px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    padding: 0 12px;
    font-family: inherit;
    outline: none;
}

    .article-filter-select:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px var(--teal-tint);
    }

.article-management-table {
    min-width: 1050px;
}

.article-table-image {
    width: 56px;
    height: 68px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
}

.article-title-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 220px;
}

    .article-title-cell strong {
        font-size: 13px;
        line-height: 1.7;
        white-space: normal;
    }

    .article-title-cell span {
        font-size: 11px;
        color: var(--ink-faint);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .article-title-cell .article-code {
        color: var(--ink-soft);
        font-weight: 500;
    }

.article-type-chip, .article-code-chip {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
}

.article-type-chip {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--ink-soft);
}

.article-code-chip {
    background: var(--teal-tint);
    color: var(--teal-ink);
}

.article-status-chip, .article-seo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    white-space: nowrap;
}

    .article-status-chip.is-success, .article-seo-chip.is-complete {
        background: #ecfdf3;
        color: #15803d;
    }

    .article-status-chip.is-muted {
        background: var(--surface-2);
        color: var(--ink-soft);
    }

    .article-seo-chip.is-incomplete {
        background: var(--amber-tint);
        color: #a55b1c;
    }

.article-date-cell {
    white-space: nowrap;
    color: var(--ink-soft);
    font-size: 11.5px;
}

.article-management-table .action-btn i,
.article-management-table .article-status-chip i,
.article-management-table .article-seo-chip i {
    font-size: 14px;
    line-height: 1;
}

.article-management-table .bo-table-no-image {
    width: 56px;
    height: 68px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.article-management-table .actions-col {
    width: 170px;
}

.article-management-table .row-actions {
    justify-content: center;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.article-management-table .action-btn.pdf {
    color: #d04444;
}

    .article-management-table .action-btn.pdf:hover {
        background: #fff0f0;
        border-color: #f0b1b1;
    }

.article-form-modal .modal-content > form {
    display: contents;
}

.article-form-modal .modal-dialog {
    max-width: 1180px;
}

.article-form-modal .modal-content, .article-detail-modal .modal-content {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.article-form-modal .modal-header, .article-detail-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}

    .article-form-modal .modal-header .modal-title, .article-detail-modal .modal-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--ink);
    }

.modal-eyebrow {
    display: block;
    color: var(--teal-ink);
    font-size: 10.5px;
    font-weight: 700;
    margin-bottom: 3px;
}

.article-detail-subtitle {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 11.5px;
}

.article-form-modal .modal-body, .article-detail-modal .modal-body {
    padding: 0;
    background: var(--bg);
}

.article-form-error {
    margin: 18px 22px 0;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: #fff1f0;
    color: #a83d38;
    border: 1px solid #f0c2bf;
    font-size: 12px;
}

.article-form-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    gap: 3px;
    padding: 10px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
}

.article-form-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: max-content;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    font: 500 12px var(--font-ui);
    transition: all var(--transition);
}

    .article-form-tab-btn:hover {
        background: var(--surface-2);
        color: var(--ink);
    }

    .article-form-tab-btn.active {
        background: var(--teal-tint);
        color: var(--teal-ink);
        font-weight: 700;
    }

.article-form-pane {
    display: none;
    padding: 24px;
}

    .article-form-pane.active {
        display: block;
    }

.article-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border-soft);
}

    .article-section-heading > div > span {
        display: block;
        font-size: 10.5px;
        color: var(--teal-ink);
        font-weight: 700;
        margin-bottom: 3px;
    }

    .article-section-heading h3 {
        font-size: 17px;
        font-weight: 700;
    }

.article-required-note {
    font-size: 10.5px;
    color: var(--ink-faint);
}

    .article-required-note b, .bo-form-label span {
        color: var(--danger);
    }

.bo-form-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
}

.article-form-control {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: 400 12.5px var(--font-ui);
    transition: border-color var(--transition),box-shadow var(--transition);
}

    .article-form-control:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px var(--teal-tint);
        background: var(--surface);
    }

textarea.article-form-control {
    min-height: 100px;
    resize: vertical;
}

.article-form-control::placeholder {
    color: var(--ink-faint);
}

.article-form-pane .ck-editor__main {
    background: var(--surface);
}

.article-form-pane .ck-editor__editable {
    min-height: 300px;
    border-color: var(--border) !important;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 2;
}

.article-form-pane .ck.ck-toolbar {
    border-color: var(--border) !important;
    background: var(--surface-2);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.article-form-pane .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.article-form-pane .ck.ck-editor__editable.ck-focused {
    box-shadow: 0 0 0 3px var(--teal-tint) !important;
}

.article-form-footer {
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .article-form-footer > div {
        display: flex;
        gap: 8px;
    }

.article-save-hint {
    font-size: 10.5px;
    color: var(--ink-faint);
}

    .article-save-hint i {
        color: var(--teal-ink);
        margin-left: 4px;
    }

.article-small-btn {
    padding: 8px 12px !important;
    font-size: 11px !important;
}

.article-subsection {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 17px;
    margin-bottom: 16px;
}

.article-subsection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

    .article-subsection-head strong {
        display: block;
        font-size: 13px;
    }

    .article-subsection-head small {
        display: block;
        color: var(--ink-faint);
        font-size: 10.5px;
        margin-top: 2px;
    }

.article-inline-empty {
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--ink-faint);
    font-size: 11.5px;
    text-align: center;
    background: var(--surface-2);
}

.article-author-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-author-row {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.article-author-order {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .article-author-order span {
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: var(--teal-tint);
        color: var(--teal-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
    }

.article-author-fields {
    display: grid;
    grid-template-columns: minmax(190px,1.5fr) minmax(150px,1fr) auto 34px;
    gap: 9px;
    align-items: end;
}

    .article-author-fields label:not(.article-author-corresponding) {
        display: block;
        font-size: 10.5px;
        color: var(--ink-faint);
        margin-bottom: 5px;
    }

.article-author-corresponding {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 10.5px;
    color: var(--ink-soft);
    cursor: pointer;
}

    .article-author-corresponding input {
        accent-color: var(--teal);
    }

.article-icon-remove {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

    .article-icon-remove:hover {
        background: #fff0ef;
        border-color: #efc2bf;
    }

.article-topic-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
}

.article-check-card {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    cursor: pointer;
    transition: all var(--transition);
}

    .article-check-card:hover {
        border-color: var(--teal);
        background: var(--teal-tint);
    }

    .article-check-card input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.article-check-icon {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}

.article-check-card:has(input:checked) {
    border-color: var(--teal);
    background: var(--teal-tint);
}

    .article-check-card:has(input:checked) .article-check-icon {
        background: var(--teal);
        border-color: var(--teal);
        color: var(--navy-900);
    }

.article-check-card strong {
    display: block;
    font-size: 11.5px;
}

.article-check-card small {
    display: block;
    color: var(--ink-faint);
    font-size: 9.5px;
    margin-top: 2px;
}

.article-tag-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 9px;
    background: var(--surface);
}

.article-tag-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

    .article-tag-list:empty {
        margin-bottom: 0;
    }

.article-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--teal-tint);
    color: var(--teal-ink);
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 10.5px;
}

    .article-tag-item button {
        border: 0;
        background: transparent;
        color: inherit;
        padding: 0;
        line-height: 1;
    }

.article-tag-editor .article-form-control {
    border: 0 !important;
    box-shadow: none !important;
    min-height: 34px;
    padding-right: 4px;
    padding-left: 4px;
}

.article-reference-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-reference-row {
    display: grid;
    grid-template-columns: 30px 1fr 34px;
    gap: 8px;
    align-items: center;
    padding: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}

.article-reference-number {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--ink-soft);
}

.article-reference-row textarea {
    min-height: 62px;
}

.article-content-blocks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.article-content-row {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: 11px;
}

.article-content-row-head {
    display: grid;
    grid-template-columns: 30px 190px 34px;
    gap: 8px;
    align-items: center;
    margin-bottom: 9px;
}

.article-content-index {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--teal-tint);
    color: var(--teal-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.article-content-value {
    min-height: 90px;
}

.article-content-image-field {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed var(--border);
}

.article-content-existing-image {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    font-size: 10px;
    color: var(--ink-faint);
}

    .article-content-existing-image img {
        width: 70px;
        height: 55px;
        object-fit: cover;
        border-radius: 8px;
    }

.article-upload-panel {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 17px;
    margin-bottom: 14px;
}

.article-upload-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .article-upload-head strong {
        display: block;
        font-size: 13px;
    }

    .article-upload-head small {
        display: block;
        color: var(--ink-faint);
        font-size: 10.5px;
        margin-top: 2px;
    }

.article-upload-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 17px 0;
}

.article-image-preview-grid, .article-existing-image-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
}

.article-image-preview-card, .article-existing-image-card {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition),box-shadow var(--transition);
}

    .article-image-preview-card:has(input:checked), .article-existing-image-card.is-main {
        border-color: var(--teal);
        box-shadow: 0 0 0 2px var(--teal-tint);
    }

    .article-image-preview-card img, .article-existing-image-card img {
        width: 100%;
        height: 145px;
        object-fit: cover;
        display: block;
        background: var(--surface-2);
    }

.article-image-preview-info, .article-existing-image-body {
    padding: 9px;
}

    .article-image-preview-info strong {
        display: block;
        font-size: 10.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 7px;
    }

    .article-image-preview-info label, .article-main-radio {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10.5px;
        color: var(--ink-soft);
        cursor: pointer;
    }

        .article-image-preview-info input, .article-main-radio input {
            accent-color: var(--teal);
        }

.article-existing-image-card.is-deleted {
    opacity: .35;
    filter: grayscale(1);
}

.article-existing-image-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.article-delete-image-btn {
    border: 0;
    background: #fff0ef;
    color: var(--danger);
    border-radius: 7px;
    padding: 5px 7px;
    font: 500 10px var(--font-ui);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .article-delete-image-btn:hover {
        background: #ffe5e3;
    }

.article-current-file {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    font-size: 11px;
}

    .article-current-file a {
        color: var(--teal-ink);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .article-current-file label {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--danger);
        cursor: pointer;
    }

.article-seo-intro {
    margin-bottom: 18px;
}

.article-counter {
    font-size: 9.5px;
    color: var(--ink-faint);
    text-align: left;
    margin-top: 4px;
    direction: ltr;
}

.article-switch-card {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    cursor: pointer;
}

    .article-switch-card input {
        accent-color: var(--teal);
    }

    .article-switch-card strong {
        display: block;
        font-size: 11.5px;
    }

    .article-switch-card small {
        display: block;
        color: var(--ink-faint);
        font-size: 9.5px;
    }

    .article-switch-card.compact {
        min-height: 52px;
    }

        .article-switch-card.compact strong {
            font-size: 11px;
        }

        .article-switch-card.compact small {
            font-size: 9px;
        }

.article-detail-modal .modal-body {
    padding: 22px;
}

.article-detail-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) 290px;
    gap: 22px;
}

.article-detail-main {
    min-width: 0;
}

.article-detail-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.article-detail-main h2 {
    font-size: 25px;
    line-height: 1.65;
    margin: 0 0 5px;
}

.article-detail-slug {
    font-size: 11px;
    color: var(--ink-faint);
    margin-bottom: 20px;
}

.article-detail-summary {
    padding: 13px;
    border-radius: var(--radius-md);
    background: var(--teal-tint);
    border: 1px solid rgba(18,183,196,.12);
    margin-bottom: 20px;
}

    .article-detail-summary span {
        font-size: 10px;
        color: var(--teal-ink);
        font-weight: 700;
    }

    .article-detail-summary p {
        margin: 6px 0 0;
        font-size: 12px;
        line-height: 2;
        color: var(--ink-soft);
    }

.article-detail-body {
    font-size: 13px;
    line-height: 2.25;
    color: var(--ink);
}

    .article-detail-body img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .article-detail-body table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
    }

    .article-detail-body th, .article-detail-body td {
        border: 1px solid var(--border);
        padding: 8px;
    }

.article-detail-callout {
    margin-top: 20px;
    padding: 14px;
    border-right: 3px solid var(--teal);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

    .article-detail-callout strong {
        display: block;
        font-size: 11.5px;
        color: var(--teal-ink);
        margin-bottom: 7px;
    }

    .article-detail-callout div {
        font-size: 12px;
        line-height: 2;
        color: var(--ink-soft);
    }

.article-detail-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.article-detail-main-image {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.article-detail-info-card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 8px 13px;
}

.article-detail-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 10.5px;
}

    .article-detail-info-row:last-child {
        border-bottom: 0;
    }

    .article-detail-info-row span {
        color: var(--ink-faint);
    }

    .article-detail-info-row strong {
        color: var(--ink);
        font-weight: 600;
        text-align: left;
    }

.article-detail-pdf {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border-radius: var(--radius-md);
    background: #fff1f1;
    color: #bd3e3e;
    border: 1px solid #f4d2d2;
}

    .article-detail-pdf > i:first-child {
        font-size: 22px;
    }

    .article-detail-pdf span {
        flex: 1;
    }

    .article-detail-pdf strong, .article-detail-pdf small {
        display: block;
    }

    .article-detail-pdf strong {
        font-size: 10.5px;
    }

    .article-detail-pdf small {
        font-size: 9px;
        opacity: .75;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.article-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.article-detail-section {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 14px;
}

.article-detail-grid .article-detail-section {
    margin-top: 0;
}

.article-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

    .article-detail-section-head h3 {
        font-size: 13px;
        font-weight: 700;
    }

        .article-detail-section-head h3 i {
            color: var(--teal-ink);
            margin-left: 5px;
        }

    .article-detail-section-head > span {
        font-size: 9.5px;
        color: var(--ink-faint);
    }

.article-detail-authors {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-detail-author {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-md);
}

.article-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--teal-tint);
    color: var(--teal-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.article-detail-author strong, .article-detail-author span, .article-detail-author em {
    display: block;
}

.article-detail-author strong {
    font-size: 10.5px;
}

.article-detail-author span {
    font-size: 9px;
    color: var(--ink-faint);
}

.article-detail-author em {
    font-size: 8.5px;
    color: var(--teal-ink);
    font-style: normal;
    margin-top: 2px;
}

.article-detail-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .article-detail-chip-list span {
        padding: 5px 8px;
        background: var(--surface-2);
        border: 1px solid var(--border-soft);
        border-radius: 999px;
        font-size: 9.5px;
        color: var(--ink-soft);
    }

    .article-detail-chip-list.is-tags span {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

    .article-detail-chip-list em {
        font-size: 10px;
        color: var(--ink-faint);
        font-style: normal;
    }

.article-detail-media-section {
    margin-top: 14px;
}

.article-detail-image-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 8px;
}

.article-detail-image-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

    .article-detail-image-card img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        display: block;
    }

    .article-detail-image-card span {
        position: absolute;
        bottom: 5px;
        right: 5px;
        left: 5px;
        background: rgba(19,28,51,.8);
        color: #fff;
        border-radius: 7px;
        padding: 4px;
        text-align: center;
        font-size: 8.5px;
    }

.article-detail-content-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.article-detail-content-card {
    padding: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    position: relative;
    padding-top: 31px;
    font-size: 11.5px;
    line-height: 2;
}

.article-detail-content-type {
    position: absolute;
    top: 7px;
    right: 8px;
    color: var(--teal-ink);
    font-size: 9px;
    font-weight: 700;
    background: var(--teal-tint);
    border-radius: 999px;
    padding: 3px 7px;
}

.article-detail-content-card img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 7px;
}

.article-detail-references {
    margin: 0;
    padding-right: 22px;
}

    .article-detail-references li {
        padding: 7px 0;
        border-bottom: 1px solid var(--border-soft);
        font-size: 11px;
        line-height: 2;
    }

        .article-detail-references li:last-child {
            border-bottom: 0;
        }

.article-detail-seo {
    margin-top: 14px;
}

.article-detail-seo-item {
    height: 100%;
    padding: 11px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

    .article-detail-seo-item span {
        display: block;
        color: var(--ink-faint);
        font-size: 9.5px;
        margin-bottom: 4px;
    }

    .article-detail-seo-item strong {
        display: block;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.8;
        word-break: break-word;
    }

.article-delete-modal .modal-content {
    border-radius: var(--radius-lg);
}

@media (max-width:1100px) {
    .article-detail-hero {
        grid-template-columns: 1fr;
    }

    .article-detail-side {
        display: grid;
        grid-template-columns: 220px 1fr;
        align-items: start;
    }

        .article-detail-side .article-detail-main-image {
            grid-row: span 2;
        }

    .article-topic-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .article-image-preview-grid, .article-existing-image-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .article-detail-image-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
}

@media (max-width:800px) {
    .article-index-tools {
        width: 100%;
    }

    .article-search-box {
        min-width: 0;
        flex: 1;
    }

    .article-filter-select {
        flex: 0 0 145px;
    }

    .article-form-pane {
        padding: 17px;
    }

    .article-form-tabs {
        padding: 8px 12px;
    }

    .article-form-tab-btn {
        padding: 9px 10px;
        font-size: 10.5px;
    }

    .article-author-fields {
        grid-template-columns: 1fr 1fr;
    }

    .article-author-corresponding {
        grid-column: 1/2;
    }

    .article-author-fields .article-icon-remove {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .article-topic-grid {
        grid-template-columns: 1fr;
    }

    .article-image-preview-grid, .article-existing-image-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .article-detail-grid {
        grid-template-columns: 1fr;
    }

        .article-detail-grid .article-detail-section {
            margin-top: 12px;
        }

    .article-detail-side {
        grid-template-columns: 1fr;
    }

        .article-detail-side .article-detail-main-image {
            grid-row: auto;
            max-height: 360px;
        }

    .article-detail-image-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .article-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

        .article-form-footer > div {
            justify-content: flex-end;
        }

    .article-save-hint {
        display: none;
    }
}

@media (max-width:600px) {
    .article-page-head .bo-primary-btn {
        width: 100%;
        justify-content: center;
    }

    .article-index-tools {
        align-items: stretch;
    }

    .article-search-box, .article-filter-select {
        flex: 1 1 100%;
        min-width: 0;
    }

    .article-author-fields {
        grid-template-columns: 1fr;
    }

    .article-author-corresponding {
        grid-column: auto;
    }

    .article-author-fields .article-icon-remove {
        grid-column: auto;
        grid-row: auto;
        justify-self: start;
    }

    .article-content-row-head {
        grid-template-columns: 30px 1fr 34px;
    }

    .article-reference-row {
        grid-template-columns: 28px 1fr 34px;
    }

    .article-image-preview-grid, .article-existing-image-grid {
        grid-template-columns: 1fr 1fr;
    }

    .article-detail-image-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .article-detail-main h2 {
        font-size: 19px;
    }
}

/* ---------- Persian Date Picker (pdp) ---------- */
.persian-date-input {
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E") no-repeat left 12px center/16px 16px;
}

.pdp-popup {
    z-index: 2000;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md,10px);
    box-shadow: var(--shadow-md);
    padding: 12px;
    width: 270px;
    font: 400 12.5px var(--font-ui);
    color: var(--ink);
}

.pdp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pdp-nav {
    border: 0;
    background: var(--surface-2);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
}

    .pdp-nav:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

.pdp-title {
    font-weight: 700;
}

.pdp-weekdays {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    text-align: center;
    color: var(--ink-faint);
    font-size: 11px;
    margin-bottom: 4px;
}

.pdp-days {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 2px;
}

.pdp-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
}

    .pdp-day:not(.pdp-empty):hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

.pdp-empty {
    cursor: default;
}

.pdp-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    padding-top: 8px;
}

    .pdp-foot button {
        border: 0;
        background: transparent;
        color: var(--teal-ink);
        font-size: 11.5px;
        cursor: pointer;
        font-weight: 600;
    }

        .pdp-foot button:hover {
            text-decoration: underline;
        }





/* =========================================================
   بخش مدیریت مقالات - اصلاحات و افزوده‌های جدید
   (طبق دستور پروژه، تمام استایل‌های اضافه در انتهای فایل درج شده‌اند)
   ========================================================= */

/* ---- تقویم شمسی سراسری (Persian Date Picker) ----
   استایل بر پایه همان زبان بصری ویجت تقویم داشبورد (.cal-widget/.cal-grid)
   تا در سراسر سایت هم‌خانواده و یکدست باشد. */
.persian-date-input-ready {
    cursor: pointer;
    background-image: none;
}

    .persian-date-input-ready:disabled,
    .persian-date-input-ready[readonly] {
        background-color: var(--surface);
        opacity: 1;
    }

.persian-datepicker-panel {
    z-index: 2000;
    width: 264px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    direction: rtl;
    font: 400 12.5px var(--font-ui);
}

.persian-datepicker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 12px;
}

    .persian-datepicker-head .pdp-label {
        flex: 1;
        text-align: center;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink);
    }

.persian-datepicker-panel .cal-grid {
    margin-bottom: 10px;
}

.persian-datepicker-panel .day.pdp-day {
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

    .persian-datepicker-panel .day.pdp-day:hover {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

    .persian-datepicker-panel .day.pdp-day.selected {
        background: var(--teal);
        color: #fff;
        font-weight: 700;
    }

.persian-datepicker-panel .day.muted {
    cursor: default;
}

.persian-datepicker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

    .persian-datepicker-foot button {
        border: none;
        background: transparent;
        font-size: 11px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        cursor: pointer;
        transition: background var(--transition), color var(--transition);
    }

    .persian-datepicker-foot .pdp-clear-btn {
        color: var(--danger, #e0605a);
    }

        .persian-datepicker-foot .pdp-clear-btn:hover {
            background: rgba(224,96,90,.10);
        }

    .persian-datepicker-foot .pdp-today-btn {
        color: var(--teal-ink);
    }

        .persian-datepicker-foot .pdp-today-btn:hover {
            background: var(--teal-tint);
        }

/* ---- مودال جزئیات مقاله: کوچک‌تر شدن تصویر اصلی و رفع سرریز متن ---- */
.article-detail-main-image {
    width: 100%;
    max-width: 190px;
    aspect-ratio: 4/5;
    margin: 0 auto;
}

@media (max-width:1100px) {
    .article-detail-side .article-detail-main-image {
        max-width: 150px;
    }
}

@media (max-width:800px) {
    .article-detail-side .article-detail-main-image {
        max-width: 130px;
        max-height: none;
    }
}

.article-detail-summary p,
.article-detail-callout div,
.article-detail-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

    .article-detail-body img {
        max-width: 100%;
    }

/* ---- مودال حذف مقاله: هم‌سان‌سازی با استایل مودال حذف اخبار ---- */
.article-delete-modal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 500px;
}

.article-delete-modal .modal-footer {
    align-items: center;
}

.article-delete-modal .bo-secondary-btn,
.article-delete-modal .bo-danger-btn {
    min-width: 120px;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    margin: 0;
    box-sizing: border-box;
}

    .article-delete-modal .bo-danger-btn:hover {
        transform: translateY(-1px);
    }

@media (max-width: 700px) {
    .article-delete-modal .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .article-delete-modal .bo-secondary-btn,
    .article-delete-modal .bo-danger-btn {
        width: 100%;
    }
}

/* =========================================================
   Course Categories
   Dedicated styles — keep these rules at the end of style.css
   ========================================================= */

.course-category-page-head {
    align-items: flex-end;
}

.course-category-panel {
    overflow: hidden;
}

.course-category-table {
    min-width: 640px;
}

.course-category-title-cell {
    min-width: 260px;
}

    .course-category-title-cell > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .course-category-title-cell strong {
        color: var(--ink);
        font-size: 11.5px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .course-category-title-cell small {
        color: var(--ink-faint);
        font-size: 9px;
    }

.course-category-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--teal-tint);
    color: var(--teal-ink);
    border: 1px solid var(--border-soft);
    font-size: 10px;
    font-weight: 700;
}

.course-category-modal .modal-dialog {
    width: calc(100% - 28px);
}

.course-category-modal .modal-content {
    overflow: hidden;
}

.course-category-modal .modal-header {
    padding: 18px 20px;
}

.course-category-modal .modal-body {
    padding: 20px;
}

.course-category-modal .modal-footer {
    padding: 14px 20px;
}

.course-category-form-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    margin-bottom: 20px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.course-category-form-icon,
.course-category-detail-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--teal-tint);
    color: var(--teal-ink);
}

.course-category-form-card strong,
.course-category-form-card span {
    display: block;
}

.course-category-form-card strong {
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 11px;
}

.course-category-form-card span {
    color: var(--ink-faint);
    font-size: 9.5px;
    line-height: 1.9;
}

.course-category-field {
    margin: 0;
}

    .course-category-field label {
        display: block;
        margin-bottom: 7px;
        color: var(--ink);
        font-size: 10.5px;
        font-weight: 700;
    }

    .course-category-field small {
        display: block;
        margin-top: 6px;
        color: var(--ink-faint);
        font-size: 9px;
    }

    .course-category-field .bo-input {
        width: 100%;
        min-height: 44px;
    }

        .course-category-field .bo-input:focus {
            border-color: var(--teal-ink);
            box-shadow: 0 0 0 3px var(--teal-tint);
        }

        .course-category-field .bo-input.is-invalid {
            border-color: #d95c68;
            box-shadow: 0 0 0 3px rgba(217, 92, 104, .08);
        }

.course-category-field-error {
    margin-top: 6px;
    color: #c74754;
    font-size: 9px;
    line-height: 1.8;
}

.course-category-edit-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

    .course-category-edit-meta span {
        color: var(--ink-faint);
        font-size: 9.5px;
    }

    .course-category-edit-meta strong {
        color: var(--teal-ink);
        font-size: 10px;
        direction: ltr;
    }

.course-category-detail-hero {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

    .course-category-detail-hero > div:last-child {
        min-width: 0;
    }

    .course-category-detail-hero span,
    .course-category-detail-hero strong {
        display: block;
    }

    .course-category-detail-hero span {
        margin-bottom: 4px;
        color: var(--ink-faint);
        font-size: 9px;
    }

    .course-category-detail-hero strong {
        color: var(--ink);
        font-size: 13px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

.course-category-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.course-category-detail-item {
    min-height: 72px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

    .course-category-detail-item span,
    .course-category-detail-item strong {
        display: block;
    }

    .course-category-detail-item span {
        margin-bottom: 6px;
        color: var(--ink-faint);
        font-size: 9px;
    }

    .course-category-detail-item strong {
        color: var(--ink);
        font-size: 11px;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }

.course-category-delete-modal .delete-category-name {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .course-category-page-head {
        align-items: stretch;
    }

        .course-category-page-head .bo-primary-btn {
            width: 100%;
            justify-content: center;
        }

    .course-category-panel .bo-panel-head {
        align-items: stretch;
    }

    .course-category-panel .bo-table-tools {
        width: 100%;
        flex-wrap: wrap;
    }

    .course-category-panel .bo-search {
        min-width: 0;
        flex: 1 1 100%;
    }

    .course-category-table {
        min-width: 560px;
    }

    .course-category-title-cell {
        min-width: 220px;
    }
}

@media (max-width: 480px) {
    .course-category-modal .modal-dialog {
        width: calc(100% - 18px);
        margin: 9px auto;
    }

    .course-category-modal .modal-header,
    .course-category-modal .modal-body,
    .course-category-modal .modal-footer {
        padding-right: 14px;
        padding-left: 14px;
    }

    .course-category-form-card {
        align-items: flex-start;
    }

    .course-category-detail-grid {
        grid-template-columns: 1fr;
    }

    .course-category-table {
        min-width: 520px;
    }
}

* =========================================================
HandWritten Categories
Dedicated styles — keep these rules at the end of style.css
========================================================= */
.handwritten-category-page-head {
    align-items: flex-end
}

.handwritten-category-panel {
    overflow: hidden
}

.handwritten-category-table {
    min-width: 640px
}

.handwritten-category-title-cell {
    min-width: 260px
}

    .handwritten-category-title-cell > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px
    }

    .handwritten-category-title-cell strong {
        color: var(--ink);
        font-size: 11.5px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .handwritten-category-title-cell small {
        color: var(--ink-faint);
        font-size: 9px
    }

.handwritten-category-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--teal-tint);
    color: var(--teal-ink);
    border: 1px solid var(--border-soft);
    font-size: 10px;
    font-weight: 700
}

.handwritten-category-modal .modal-dialog {
    width: calc(100% - 28px)
}

.handwritten-category-modal .modal-content {
    overflow: hidden
}

.handwritten-category-modal .modal-header {
    padding: 18px 20px
}

.handwritten-category-modal .modal-body {
    padding: 20px
}

.handwritten-category-modal .modal-footer {
    padding: 14px 20px
}

.handwritten-category-form-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    margin-bottom: 20px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-2)
}

.handwritten-category-form-icon, .handwritten-category-detail-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--teal-tint);
    color: var(--teal-ink)
}

.handwritten-category-form-card strong, .handwritten-category-form-card span {
    display: block
}

.handwritten-category-form-card strong {
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 11px
}

.handwritten-category-form-card span {
    color: var(--ink-faint);
    font-size: 9.5px;
    line-height: 1.9
}

.handwritten-category-field {
    margin: 0
}

    .handwritten-category-field label {
        display: block;
        margin-bottom: 7px;
        color: var(--ink);
        font-size: 10.5px;
        font-weight: 700
    }

    .handwritten-category-field small {
        display: block;
        margin-top: 6px;
        color: var(--ink-faint);
        font-size: 9px
    }

    .handwritten-category-field .bo-input {
        width: 100%;
        min-height: 44px
    }

        .handwritten-category-field .bo-input:focus {
            border-color: var(--teal-ink);
            box-shadow: 0 0 0 3px var(--teal-tint)
        }

        .handwritten-category-field .bo-input.is-invalid {
            border-color: #d95c68;
            box-shadow: 0 0 0 3px rgba(217,92,104,.08)
        }

.handwritten-category-field-error {
    margin-top: 6px;
    color: #c74754;
    font-size: 9px;
    line-height: 1.8
}

.handwritten-category-edit-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-soft)
}

    .handwritten-category-edit-meta span {
        color: var(--ink-faint);
        font-size: 9.5px
    }

    .handwritten-category-edit-meta strong {
        color: var(--teal-ink);
        font-size: 10px;
        direction: ltr
    }

.handwritten-category-detail-hero {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border: 1px solid var(--border-soft)
}

    .handwritten-category-detail-hero > div:last-child {
        min-width: 0
    }

    .handwritten-category-detail-hero span, .handwritten-category-detail-hero strong {
        display: block
    }

    .handwritten-category-detail-hero span {
        margin-bottom: 4px;
        color: var(--ink-faint);
        font-size: 9px
    }

    .handwritten-category-detail-hero strong {
        color: var(--ink);
        font-size: 13px;
        font-weight: 700;
        overflow-wrap: anywhere
    }

.handwritten-category-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.handwritten-category-detail-item {
    min-height: 72px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border-soft)
}

    .handwritten-category-detail-item span, .handwritten-category-detail-item strong {
        display: block
    }

    .handwritten-category-detail-item span {
        margin-bottom: 6px;
        color: var(--ink-faint);
        font-size: 9px
    }

    .handwritten-category-detail-item strong {
        color: var(--ink);
        font-size: 11px;
        line-height: 1.8;
        overflow-wrap: anywhere
    }

.handwritten-category-delete-modal .delete-category-name {
    max-width: 100%;
    overflow-wrap: anywhere
}

@media(max-width:700px) {
    .handwritten-category-page-head {
        align-items: stretch
    }

        .handwritten-category-page-head .bo-primary-btn {
            width: 100%;
            justify-content: center
        }

    .handwritten-category-panel .bo-panel-head {
        align-items: stretch
    }

    .handwritten-category-panel .bo-table-tools {
        width: 100%;
        flex-wrap: wrap
    }

    .handwritten-category-panel .bo-search {
        min-width: 0;
        flex: 1 1 100%
    }

    .handwritten-category-table {
        min-width: 560px
    }

    .handwritten-category-title-cell {
        min-width: 220px
    }
}

@media(max-width:480px) {
    .handwritten-category-modal .modal-dialog {
        width: calc(100% - 18px);
        margin: 9px auto
    }

    .handwritten-category-modal .modal-header, .handwritten-category-modal .modal-body, .handwritten-category-modal .modal-footer {
        padding-right: 14px;
        padding-left: 14px
    }

    .handwritten-category-form-card {
        align-items: flex-start
    }

    .handwritten-category-detail-grid {
        grid-template-columns: 1fr
    }

    .handwritten-category-table {
        min-width: 520px
    }
}

/* =========================================================
   About Us Management
   ========================================================= */
.about-page-head {
    align-items: flex-end
}

.about-panel {
    overflow: hidden
}

.about-table {
    min-width: 920px
}

.about-title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px
}

    .about-title-cell > div {
        min-width: 0
    }

    .about-title-cell strong, .about-title-cell small {
        display: block
    }

    .about-title-cell strong {
        font-size: 12px;
        color: var(--ink);
        font-weight: 750;
        overflow-wrap: anywhere
    }

    .about-title-cell small {
        font-size: 9px;
        color: var(--ink-faint);
        margin-top: 3px
    }

.about-summary {
    display: block;
    max-width: 260px;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.about-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 27px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--ink);
    font-size: 10px;
    font-weight: 700
}

.about-table-image {
    width: 58px;
    height: 42px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    display: block
}

.about-no-image {
    font-size: 9px;
    color: var(--ink-faint)
}

.about-dynamic-modal .modal-dialog {
    width: min(1080px,calc(100% - 28px));
    max-width: none;
    margin: 14px auto
}

.about-dynamic-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(15,23,42,.16)
}

.about-dynamic-modal .modal-header {
    padding: 17px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface)
}

.about-dynamic-modal .modal-body {
    background: var(--surface-2)
}

.about-form-body {
    max-height: calc(100vh - 175px);
    overflow: auto;
    padding: 18px
}

.about-form-section, .about-detail-section {
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: var(--surface);
    margin-bottom: 14px
}

.about-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

    .about-section-title strong {
        font-size: 12px;
        color: var(--ink)
    }

    .about-section-title span {
        font-size: 9px;
        color: var(--ink-faint)
    }

.about-add-btn {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 10px !important
}

.about-repeat-list {
    display: grid;
    gap: 10px
}

.about-repeat-card {
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    background: var(--surface-2)
}

.about-repeat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px
}

    .about-repeat-head strong {
        font-size: 10px;
        color: var(--ink)
    }

.about-repeat-card label, .about-form-section .form-label {
    font-size: 9px;
    color: var(--ink-muted);
    margin-bottom: 5px
}

.about-repeat-card .form-control, .about-form-section .form-control {
    border-radius: 9px;
    border-color: var(--border-soft);
    font-size: 11px;
    min-height: 38px
}

.about-repeat-card textarea, .about-form-section textarea {
    resize: vertical
}

.about-remove-btn {
    border: 0;
    background: transparent;
    color: var(--danger,#dc3545);
    font-size: 9px;
    cursor: pointer
}

.about-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    color: var(--ink-muted);
    cursor: pointer
}

    .about-check input {
        accent-color: currentColor
    }

.about-current-image {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px
}

    .about-current-image img {
        width: 86px;
        height: 62px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid var(--border-soft)
    }

    .about-current-image span {
        font-size: 9px;
        color: var(--ink-faint)
    }

.about-repeat-empty {
    padding: 16px;
    border: 1px dashed var(--border-soft);
    border-radius: 12px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 10px
}

.about-detail-body {
    max-height: calc(100vh - 175px);
    overflow: auto;
    padding: 18px
}

.about-detail-hero {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 15px;
    border-radius: 15px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    margin-bottom: 12px
}

    .about-detail-hero img {
        width: 100px;
        height: 76px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid var(--border-soft)
    }

    .about-detail-hero span, .about-detail-grid span, .about-detail-text > span {
        display: block;
        color: var(--ink-faint);
        font-size: 9px;
        margin-bottom: 5px
    }

    .about-detail-hero strong {
        font-size: 15px;
        color: var(--ink)
    }

    .about-detail-hero p {
        margin: 5px 0 0;
        color: var(--ink-muted);
        font-size: 10px;
        line-height: 1.9
    }

.about-detail-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 12px
}

    .about-detail-grid > div {
        padding: 12px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--border-soft)
    }

    .about-detail-grid strong {
        font-size: 10px;
        color: var(--ink);
        overflow-wrap: anywhere
    }

.about-detail-text {
    padding: 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    line-height: 2;
    color: var(--ink-muted);
    font-size: 10px;
    margin-bottom: 14px
}

.about-detail-cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px
}

.about-detail-card {
    display: flex;
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft)
}

    .about-detail-card img {
        width: 48px;
        height: 42px;
        object-fit: cover;
        border-radius: 8px;
        flex: none
    }

    .about-detail-card strong, .about-detail-card small {
        display: block;
        overflow-wrap: anywhere
    }

    .about-detail-card strong {
        font-size: 10px;
        color: var(--ink)
    }

    .about-detail-card small {
        font-size: 8px;
        color: var(--ink-faint);
        margin-top: 3px;
        line-height: 1.6
    }

.about-delete-modal .delete-category-name {
    overflow-wrap: anywhere
}

@media(max-width:800px) {
    .about-page-head {
        align-items: stretch
    }

        .about-page-head .bo-primary-btn {
            width: 100%;
            justify-content: center
        }

    .about-panel .bo-panel-head {
        align-items: stretch
    }

    .about-panel .bo-table-tools {
        width: 100%;
        flex-wrap: wrap
    }

    .about-panel .bo-search {
        min-width: 0;
        flex: 1 1 100%
    }

    .about-detail-grid {
        grid-template-columns: 1fr 1fr
    }

    .about-detail-cards {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:560px) {
    .about-dynamic-modal .modal-dialog {
        width: calc(100% - 12px);
        margin: 6px auto
    }

    .about-dynamic-modal .modal-header, .about-dynamic-modal .modal-footer {
        padding: 13px
    }

    .about-form-body, .about-detail-body {
        padding: 10px;
        max-height: calc(100vh - 125px)
    }

    .about-form-section, .about-detail-section {
        padding: 11px
    }

    .about-detail-grid, .about-detail-cards {
        grid-template-columns: 1fr
    }

    .about-table {
        min-width: 850px
    }

    .about-title-cell {
        min-width: 190px
    }

    .about-summary {
        max-width: 180px
    }

    .about-dynamic-modal .modal-footer .bo-primary-btn, .about-dynamic-modal .modal-footer .bo-secondary-btn {
        flex: 1;
        justify-content: center
    }
}

/* =========================================================
   About Us - multi image management
   Added at the end of the main stylesheet intentionally.
   ========================================================= */
.about-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.about-image-upload-box {
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

    .about-image-upload-box small {
        display: block;
        margin-top: 8px;
        color: var(--ink-muted);
        font-size: 11px;
    }

.about-image-preview-card {
    position: relative;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

    .about-image-preview-card img {
        width: 100%;
        height: 120px;
        display: block;
        object-fit: cover;
        border-radius: 9px;
        background: var(--surface-2);
    }

    .about-image-preview-card label {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 8px 2px 4px;
        color: var(--ink-soft);
        font-size: 11px;
        cursor: pointer;
    }

    .about-image-preview-card > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--ink-muted);
        font-size: 10px;
    }

    .about-image-preview-card.marked-delete {
        opacity: .45;
        border-color: var(--danger);
    }

.about-image-delete-btn {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--danger);
    font-size: 10px;
    cursor: pointer;
}

.about-detail-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 9px;
    width: min(100%, 430px);
}

.about-detail-image-item {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
}

    .about-detail-image-item.is-main {
        border-color: var(--teal);
    }

    .about-detail-image-item img {
        width: 100%;
        height: 92px;
        display: block;
        object-fit: cover;
    }

    .about-detail-image-item span {
        display: block;
        padding: 5px 7px;
        font-size: 9px;
        color: var(--ink-muted);
    }

@media (max-width: 576px) {
    .about-images-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   FAQ Management
   Added at the end of the main stylesheet intentionally.
   ========================================================= */
.faq-panel {
    min-width: 0;
}

.faq-data-table {
    min-width: 980px;
}

.faq-row-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 700;
}

.faq-question-cell {
    min-width: 230px;
    max-width: 360px;
}

    .faq-question-cell strong {
        display: -webkit-box;
        overflow: hidden;
        color: var(--ink);
        font-size: 13px;
        line-height: 1.9;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

.faq-answer-preview {
    width: 300px;
    max-width: 100%;
    overflow: hidden;
    color: var(--ink-muted);
    font-size: 11px;
    line-height: 1.9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.faq-delay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}

.faq-modal .modal-dialog {
    width: min(920px, calc(100% - 24px));
    max-width: 920px;
}

.faq-form-grid {
    margin-top: 16px;
}

.faq-form-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.faq-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 20px;
    font-weight: 800;
}

.faq-form-intro strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 13px;
}

.faq-form-intro span {
    display: block;
    color: var(--ink-muted);
    font-size: 11px;
    line-height: 1.8;
}

.faq-answer-input {
    min-height: 170px;
    resize: vertical;
    line-height: 2;
}

.faq-detail-question {
    padding: 16px 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
}

    .faq-detail-question span,
    .faq-detail-answer-head span {
        display: block;
        margin-bottom: 7px;
        color: var(--ink-muted);
        font-size: 10px;
        font-weight: 700;
    }

    .faq-detail-question strong {
        display: block;
        color: var(--ink);
        font-size: 14px;
        line-height: 2;
    }

.faq-detail-grid {
    margin-top: 14px;
}

.faq-detail-answer {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    background: var(--surface);
}

.faq-detail-answer-head {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

    .faq-detail-answer-head span {
        margin: 0;
    }

.faq-detail-answer-content {
    padding: 17px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 2.2;
    word-break: break-word;
}

    .faq-detail-answer-content p:last-child {
        margin-bottom: 0;
    }

@media (max-width: 768px) {
    .faq-question-cell {
        min-width: 190px;
    }

    .faq-answer-preview {
        width: 220px;
    }

    .faq-form-intro {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .faq-modal .modal-dialog {
        width: calc(100% - 14px);
        margin: 7px auto;
    }

    .faq-form-intro {
        padding: 11px;
    }

    .faq-form-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 17px;
    }
}


/* =========================================================
   Team Management
   ========================================================= */

.team-page-head {
    margin-bottom: 18px;
}

.team-panel {
    overflow: hidden;
}

.team-table {
    min-width: 980px;
}

.team-person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
}

    .team-person-cell > div:last-child {
        min-width: 0;
    }

    .team-person-cell strong {
        display: block;
        color: var(--ink);
        font-size: 12px;
        line-height: 1.8;
    }

    .team-person-cell small {
        display: block;
        max-width: 210px;
        margin-top: 2px;
        overflow: hidden;
        color: var(--ink-muted);
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.team-table-image {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.team-table-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 17px;
    font-weight: 800;
}

.team-position-chip,
.team-image-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.6;
}

.team-image-status {
    color: var(--accent);
    border-color: var(--accent-soft);
    background: var(--accent-soft);
}

    .team-image-status.is-empty {
        color: var(--ink-muted);
        border-color: var(--border);
        background: var(--surface-2);
    }

.team-summary {
    display: block;
    max-width: 280px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-dynamic-modal .modal-dialog {
    width: min(1100px, calc(100% - 28px));
    max-width: 1100px;
}

.team-dynamic-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 28px);
    overflow: hidden;
}

.team-dynamic-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.team-form-body {
    padding: 18px;
}

.team-form-section {
    padding: 17px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

    .team-form-section:last-child {
        margin-bottom: 0;
    }

.team-biography-input {
    min-height: 130px;
    resize: vertical;
    line-height: 2;
}

.team-image-upload-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 15px;
    align-items: center;
    padding: 14px;
    border: 1px dashed var(--border-strong, var(--border));
    border-radius: 13px;
    background: var(--surface-2);
}

.team-image-input-wrap small {
    display: block;
    margin-top: 7px;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.8;
}

.team-image-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

    .team-image-preview img,
    .team-current-image {
        width: 150px;
        height: 150px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: var(--surface);
        object-fit: cover;
    }

    .team-image-preview span {
        color: var(--ink-muted);
        font-size: 10px;
    }

.team-image-alt-grid {
    margin-top: 14px;
}

.team-current-image-box {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
}

    .team-current-image-box > div:last-child {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .team-current-image-box strong {
        color: var(--ink);
        font-size: 12px;
    }

    .team-current-image-box span {
        color: var(--ink-muted);
        font-size: 10px;
        line-height: 1.8;
    }

.team-current-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-size: 11px;
}

.team-detail-body {
    padding: 18px;
}

.team-detail-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
}

.team-detail-image {
    flex: 0 0 128px;
    width: 128px;
    height: 128px;
    border-radius: 22px;
    border: 1px solid var(--border);
    object-fit: cover;
    background: var(--surface);
}

.team-detail-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-size: 11px;
}

.team-detail-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
}

.team-detail-hero h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
}

.team-detail-hero strong {
    color: var(--ink-soft);
    font-size: 12px;
}

.team-detail-section {
    margin-top: 15px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.team-detail-text {
    padding: 13px;
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 2.1;
    white-space: pre-wrap;
}

.team-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .team-links-grid > div {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        padding: 11px 12px;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: var(--surface-2);
    }

    .team-links-grid span {
        color: var(--ink-muted);
        font-size: 10px;
    }

    .team-links-grid strong {
        overflow: hidden;
        color: var(--ink-soft);
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.team-link-full {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .team-image-upload-box {
        grid-template-columns: 1fr;
    }

    .team-image-preview {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .team-table {
        min-width: 880px;
    }

    .team-dynamic-modal .modal-dialog {
        width: calc(100% - 14px);
        margin: 7px auto;
    }

    .team-form-body,
    .team-detail-body {
        padding: 12px;
    }

    .team-form-section {
        padding: 13px;
    }

    .team-detail-hero {
        align-items: flex-start;
    }

    .team-detail-image {
        flex-basis: 92px;
        width: 92px;
        height: 92px;
        border-radius: 16px;
    }
}

@media (max-width: 576px) {
    .team-detail-hero {
        flex-direction: column;
    }

    .team-links-grid {
        grid-template-columns: 1fr;
    }

    .team-link-full {
        grid-column: auto;
    }
}

/* Team modal scrolling fix - keeps header and footer visible while the form body scrolls */
.team-dynamic-modal .modal-dialog {
    height: calc(100vh - 28px);
    max-height: calc(100vh - 28px);
}

.team-dynamic-modal .modal-content {
    height: 100%;
    max-height: 100%;
}

    .team-dynamic-modal .modal-content > form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

        .team-dynamic-modal .modal-content > form > .modal-body {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .team-dynamic-modal .modal-content > form > .modal-footer {
            flex: 0 0 auto;
        }

@media (max-width: 768px) {
    .team-dynamic-modal .modal-dialog {
        height: calc(100vh - 14px);
        max-height: calc(100vh - 14px);
        margin: 7px auto;
    }
}


/* =========================================================
   PROJECT MANAGEMENT — FINAL BACKOFFICE UI
   Same family as News/Book management. Reuses book-detail-*
   and bo-detail-* patterns above for the detail modal so the
   look stays consistent without duplicating rules.
   Appended intentionally at the end of style.css.
   ========================================================= */

/* ---- Index: toolbar & search ---- */
.project-index-panel {
    overflow: hidden;
}

.project-page-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.project-index-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.project-search-box {
    position: relative;
    width: min(320px, 100%);
}

    .project-search-box i {
        position: absolute;
        top: 50%;
        right: 13px;
        transform: translateY(-50%);
        color: var(--ink-faint);
        pointer-events: none;
    }

    .project-search-box input {
        width: 100%;
        height: 40px;
        padding: 0 38px 0 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-2);
        color: var(--ink);
        outline: none;
        font-family: var(--font-ui);
        font-size: 12px;
        transition: all var(--transition);
    }

        .project-search-box input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px var(--teal-tint);
        }

/* ---- Index: table ---- */
.project-management-table {
    min-width: 980px;
}

    .project-management-table .project-title-column,
    .project-management-table td:nth-child(2) {
        width: 26%;
    }

    .project-management-table .actions-col {
        width: 140px;
    }

.project-title-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .project-title-cell strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--ink);
        font-size: 12.5px;
    }

.project-table-image,
.project-index-panel .bo-table-no-image {
    width: 58px;
    height: 48px;
    border-radius: 9px;
}

.project-category-chip {
    display: inline-flex;
    align-items: center;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10.5px;
    background: var(--surface-2);
    color: var(--ink-soft);
    border: 1px solid var(--border-soft);
}

.project-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1.4;
    white-space: nowrap;
}

    .project-status-chip.is-success {
        background: rgba(48, 167, 113, .10);
        color: #25885d;
    }

    .project-status-chip.is-muted {
        background: rgba(120, 130, 145, .10);
        color: var(--ink-soft);
    }

    .project-status-chip.is-info {
        background: var(--teal-tint);
        color: var(--teal-ink);
    }

.project-pdf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(224, 96, 90, .08);
    color: var(--danger);
    text-decoration: none;
}

    .project-pdf-chip:hover {
        background: rgba(224, 96, 90, .14);
    }

.project-muted-value {
    color: var(--ink-faint);
}

.project-date-cell {
    direction: rtl;
    white-space: nowrap;
    color: var(--ink-soft);
    font-size: 10.5px;
}

@media (max-width: 1100px) {
    .project-management-table {
        min-width: 900px;
    }
}

@media (max-width: 760px) {
    .project-page-actions, .project-index-tools {
        width: 100%;
    }

        .project-page-actions > * {
            flex: 1;
            justify-content: center;
        }

    .project-index-tools {
        align-items: stretch;
    }

    .project-search-box {
        width: auto;
        flex: 1;
    }
}

/* ---- Create/Edit modal ---- */
.project-form-modal .modal-dialog {
    width: calc(100% - 24px);
}

.project-image-preview {
    margin-top: 12px;
    width: 100%;
    max-width: 260px;
    height: 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
}

    .project-image-preview img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.project-switch-card {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 12px;
    cursor: pointer;
}

    .project-switch-card input {
        accent-color: var(--teal);
        width: 17px;
        height: 17px;
        cursor: pointer;
    }

/* ---- Detail modal ---- */
.project-detail-hero {
    display: flex;
    gap: 22px;
    margin-bottom: 24px;
}

.project-detail-cover {
    flex: 0 0 190px;
    width: 190px;
    height: 190px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

    .project-detail-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.project-detail-summary {
    flex: 1;
    min-width: 0;
}

    .project-detail-summary h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 4px;
    }

@media (max-width: 700px) {
    .project-detail-hero {
        flex-direction: column;
    }

    .project-detail-cover {
        width: 100%;
        height: 200px;
    }
}


/* =========================================================
   Project management - final modal safety rules
   ========================================================= */
.project-form-modal .modal-dialog {
    max-height: calc(100vh - 24px);
}

.project-form-modal .modal-content {
    max-height: calc(100vh - 24px);
}

.project-form-modal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 190px);
    scrollbar-width: thin;
}

.project-form-modal .modal-footer {
    flex-shrink: 0;
}

.project-form-modal .persian-date-input {
    cursor: pointer;
    direction: rtl;
    text-align: right;
}

/* =========================================================
   SCROLLABLE MODAL FIX (shared: Book + Project forms)
   Bootstrap's .modal-dialog-scrollable only works when
   .modal-header/.modal-body/.modal-footer are DIRECT children
   of .modal-content. Book/Project forms wrap them in a <form>
   for a single native submit, which breaks that flex chain and
   lets the form grow past the viewport instead of scrolling
   internally. This re-establishes the flex chain through the
   <form> wrapper for any modal using .modal-dialog-scrollable.
   ========================================================= */
.modal-dialog-scrollable .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .modal-dialog-scrollable .modal-content > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

        .modal-dialog-scrollable .modal-content > form > .modal-header,
        .modal-dialog-scrollable .modal-content > form > .modal-footer {
            flex: 0 0 auto;
        }

        .modal-dialog-scrollable .modal-content > form > .modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

/* Project form modals: bound the dialog height so the flex
   chain above has something real to scroll within. */
#projectCreateModal .modal-dialog,
#projectEditModal .modal-dialog {
    height: calc(100vh - 24px);
}

/* ---- Project Edit: current image/PDF card with remove option ---- */
.project-current-file-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

    .project-current-file-card > img {
        flex: none;
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        background: var(--surface-2);
    }

.project-current-file-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(224, 96, 90, .10);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.project-current-file-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .project-current-file-body strong {
        color: var(--ink);
        font-size: 12px;
    }

    .project-current-file-body span {
        color: var(--ink-faint);
        font-size: 10.5px;
    }

        .project-current-file-body span a {
            color: var(--teal-ink);
            text-decoration: none;
            font-weight: 600;
        }

            .project-current-file-body span a:hover {
                text-decoration: underline;
            }

.project-remove-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    color: var(--danger);
    font-size: 10.5px;
    cursor: pointer;
    width: fit-content;
}

    .project-remove-check input {
        accent-color: var(--danger);
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

        .project-remove-check input:disabled {
            cursor: not-allowed;
            opacity: .5;
        }


/* =========================================================
   Slider Management
   ========================================================= */
.slider-index-panel {
    overflow: hidden;
}

.slider-index-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.slider-search-box {
    position: relative;
    min-width: 280px;
}

    .slider-search-box i {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        opacity: .55;
    }

    .slider-search-box input {
        width: 100%;
        min-height: 42px;
        border: 1px solid var(--bo-border, #e6e8ee);
        border-radius: 12px;
        background: var(--bo-surface, #fff);
        padding: 8px 40px 8px 14px;
        outline: none;
    }

        .slider-search-box input:focus {
            border-color: var(--bo-primary, #6c63ff);
            box-shadow: 0 0 0 3px rgba(108,99,255,.08);
        }

.slider-management-table th,
.slider-management-table td {
    vertical-align: middle;
}

.slider-table-image {
    width: 112px;
    height: 68px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.slider-title-cell {
    min-width: 170px;
}

    .slider-title-cell strong {
        display: block;
        line-height: 1.8;
    }

.slider-text-cell {
    max-width: 330px;
    color: #69707d;
    line-height: 1.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slider-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(108,99,255,.08);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

    .slider-link-chip:hover {
        text-decoration: none;
    }

.slider-form-modal .modal-dialog,
.slider-detail-modal .modal-dialog {
    max-width: 900px;
}

.slider-form-modal .modal-content,
.slider-detail-modal .modal-content,
.slider-delete-modal .modal-content {
    max-height: calc(100vh - 32px);
}

.slider-form-modal .modal-body,
.slider-detail-modal .modal-body {
    overflow-y: auto;
}

.slider-image-preview {
    margin-top: 14px;
    border: 1px dashed #dfe3ea;
    border-radius: 14px;
    padding: 10px;
    background: #fafbfc;
}

    .slider-image-preview img {
        width: 100%;
        max-height: 260px;
        object-fit: contain;
        border-radius: 10px;
        display: block;
    }

.slider-current-image {
    border: 1px solid #eceef2;
    border-radius: 14px;
    padding: 14px;
    background: #fafbfc;
}

.slider-current-image-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

    .slider-current-image-head span {
        font-weight: 700;
    }

    .slider-current-image-head small {
        color: #8a909b;
    }

.slider-current-image-preview {
    display: block;
    width: 100%;
    max-height: 230px;
    object-fit: contain;
    border-radius: 10px;
}

.slider-current-empty {
    width: 100%;
    min-height: 150px;
}

.slider-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 22px;
}

.slider-detail-image-box {
    border: 1px solid #eceef2;
    background: #fafbfc;
    border-radius: 16px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slider-detail-image {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.slider-detail-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #969ca7;
}

    .slider-detail-no-image i {
        font-size: 38px;
    }

.slider-detail-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.slider-detail-item {
    padding: 14px 16px;
    border: 1px solid #eceef2;
    border-radius: 14px;
    background: #fff;
}

    .slider-detail-item > span {
        display: block;
        font-size: 12px;
        color: #8a909b;
        margin-bottom: 7px;
    }

    .slider-detail-item strong,
    .slider-detail-item p,
    .slider-detail-item a {
        margin: 0;
        line-height: 1.9;
        overflow-wrap: anywhere;
    }

    .slider-detail-item a {
        color: inherit;
    }

@media (max-width: 768px) {
    .slider-page-head {
        gap: 16px;
    }

    .slider-index-tools {
        width: 100%;
    }

    .slider-search-box {
        min-width: 0;
        width: 100%;
    }

    .slider-detail-layout {
        grid-template-columns: 1fr;
    }

    .slider-detail-image-box {
        min-height: 220px;
    }

    .slider-current-image-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .slider-form-modal .modal-dialog,
    .slider-detail-modal .modal-dialog {
        margin: 8px;
    }
}


/* =========================================================
   Logo Management — Modal Architecture
   ========================================================= */
.logo-page-head {
    margin-bottom: 22px;
}

.logo-panel {
    overflow: hidden;
}

.logo-table th, .logo-table td {
    vertical-align: middle;
}

.logo-table-image {
    width: 74px;
    height: 50px;
    object-fit: contain;
    background: var(--surface-2);
    border-radius: 12px;
    padding: 6px;
    border: 1px solid var(--border-soft);
}

.logo-title-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .logo-title-cell strong {
        color: var(--ink);
        font-size: 13px;
    }

.logo-link-cell {
    display: inline-block;
    max-width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--teal-ink);
    font-size: 11px;
}

.logo-form-modal .modal-dialog, .logo-detail-modal .modal-dialog {
    max-height: calc(100vh - 28px);
}

.logo-form-modal .modal-content, .logo-detail-modal .modal-content {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(22,34,43,.18);
}

.logo-form-body, .logo-detail-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.logo-form-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-soft);
}

    .logo-form-section:first-child {
        padding-top: 0;
    }

    .logo-form-section:last-child {
        border-bottom: 0;
        padding-bottom: 4px;
    }

.logo-section-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

    .logo-section-title strong {
        color: var(--ink);
        font-size: 13px;
    }

    .logo-section-title span {
        color: var(--ink-faint);
        font-size: 11px;
        line-height: 1.8;
    }

.logo-image-preview {
    margin-top: 14px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px dashed var(--border-soft);
    border-radius: 16px;
    background: var(--surface-2);
}

    .logo-image-preview img {
        max-width: 100%;
        max-height: 180px;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 10px;
    }

.logo-current-image {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: var(--surface-2);
}

    .logo-current-image img {
        width: 92px;
        height: 62px;
        object-fit: contain;
        background: var(--surface);
        border-radius: 10px;
        padding: 6px;
        border: 1px solid var(--border-soft);
    }

    .logo-current-image div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .logo-current-image strong {
        font-size: 12px;
        color: var(--ink);
    }

    .logo-current-image span {
        font-size: 10.5px;
        color: var(--ink-faint);
    }

.logo-detail-hero {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 22px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-soft);
}

.logo-detail-image {
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 18px;
}

    .logo-detail-image img {
        max-width: 100%;
        max-height: 125px;
        object-fit: contain;
    }

.logo-detail-no-image {
    color: var(--ink-faint);
    font-size: 34px;
}

.logo-detail-hero > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logo-detail-hero span, .logo-detail-grid span {
    color: var(--ink-faint);
    font-size: 10.5px;
}

.logo-detail-hero strong {
    color: var(--ink);
    font-size: 18px;
}

.logo-detail-hero p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1.9;
}

.logo-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

    .logo-detail-grid > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 14px;
        border: 1px solid var(--border-soft);
        border-radius: 14px;
        background: var(--surface-2);
    }

    .logo-detail-grid strong {
        color: var(--ink);
        font-size: 11.5px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

.logo-delete-modal .modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(22,34,43,.18);
}

@media (max-width: 767.98px) {
    .logo-detail-hero {
        grid-template-columns: 1fr;
    }

    .logo-detail-grid {
        grid-template-columns: 1fr;
    }

    .logo-detail-image {
        min-height: 120px;
    }

    .logo-form-modal .modal-dialog, .logo-detail-modal .modal-dialog {
        margin: 10px;
    }
}


/* =========================================================
   Client Management — Modal Architecture
   Added at the end of style.css
   ========================================================= */
.client-page-head {
    align-items: flex-end;
}

.client-panel {
    overflow: hidden;
}

.client-table-image {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
    border-radius: 14px;
    padding: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

.client-table-no-image {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--ink-faint);
    font-size: 22px;
}

.client-title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

    .client-title-cell > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .client-title-cell strong {
        color: var(--ink);
        font-size: 12.5px;
        font-weight: 750;
    }

    .client-title-cell small {
        color: var(--ink-faint);
        font-size: 10px;
    }

.client-row-index {
    width: 27px;
    height: 27px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-faint);
    font-size: 10px;
    font-weight: 700;
}

.client-alt-value {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-muted);
    font-size: 11px;
}

.client-link-chip {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 9px;
    border-radius: 9px;
    background: rgba(20, 151, 145, .08);
    color: var(--teal-ink);
    font-size: 10.5px;
    font-weight: 650;
    text-decoration: none;
    direction: ltr;
}

    .client-link-chip:hover {
        text-decoration: underline;
    }

.client-muted-value {
    color: var(--ink-faint);
}

.client-empty-state {
    padding: 34px 16px;
}

.client-dynamic-modal .modal-dialog {
    max-width: 860px;
}

.client-dynamic-modal .modal-content,
.client-delete-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
}

.client-modal-body {
    padding: 22px;
}

.client-form-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: var(--surface-2);
}

.client-form-icon {
    width: 40px;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(20, 151, 145, .10);
    color: var(--teal-ink);
    font-size: 18px;
}

.client-form-intro > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.client-form-intro strong {
    color: var(--ink);
    font-size: 12px;
}

.client-form-intro span {
    color: var(--ink-faint);
    font-size: 10.5px;
}

.client-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.client-form-field {
    min-width: 0;
}

.client-form-field-full {
    grid-column: 1 / -1;
}

.client-form-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
}

    .client-form-field label b {
        color: var(--danger);
    }

    .client-form-field label span {
        color: var(--ink-faint);
        font-weight: 500;
    }

.client-form-field .bo-input {
    width: 100%;
}

.client-upload-box {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 104px;
    padding: 12px;
    border: 1px dashed var(--border-soft);
    border-radius: 16px;
    background: var(--surface-2);
}

.client-upload-preview {
    width: 82px;
    height: 82px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--ink-faint);
    font-size: 25px;
}

    .client-upload-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 7px;
    }

.client-upload-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .client-upload-content strong {
        color: var(--ink);
        font-size: 11.5px;
    }

    .client-upload-content span {
        color: var(--ink-faint);
        font-size: 10px;
        line-height: 1.7;
    }

    .client-upload-content input[type="file"] {
        max-width: 100%;
        margin-top: 4px;
        font-size: 10.5px;
    }

.client-current-image-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-2);
}

    .client-current-image-card > img,
    .client-no-current-image {
        width: 72px;
        height: 72px;
        flex: none;
        object-fit: contain;
        padding: 7px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--border-soft);
    }

.client-no-current-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-size: 22px;
}

.client-current-image-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.client-current-image-card strong {
    color: var(--ink);
    font-size: 11px;
}

.client-current-image-card span {
    color: var(--ink-faint);
    font-size: 10px;
}

.client-form-message {
    margin-bottom: 14px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(224, 96, 90, .08);
    color: var(--danger);
    font-size: 10.5px;
}

.client-field-error {
    margin-top: 5px;
    color: var(--danger);
    font-size: 10px;
}

.client-spinner {
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: -2px;
    margin-left: 5px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    animation: client-spin .7s linear infinite;
}

@keyframes client-spin {
    to {
        transform: rotate(360deg);
    }
}

.client-delete-body {
    text-align: center;
    padding: 24px 22px 18px;
}

.client-warning-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: rgba(224, 96, 90, .10);
    color: var(--danger);
}

.client-delete-body p {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.9;
}

    .client-delete-body p strong {
        color: var(--danger);
    }

.client-delete-body > small {
    display: block;
    margin-top: 6px;
    color: var(--ink-faint);
    font-size: 10px;
}

.client-inline-error {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(224, 96, 90, .08);
    color: var(--danger);
    font-size: 10px;
}

.client-detail-body {
    padding: 22px;
}

.client-detail-hero {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 17px;
    background: var(--surface-2);
}

.client-detail-image {
    width: 130px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--ink-faint);
    font-size: 30px;
}

    .client-detail-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 10px;
    }

.client-detail-hero > div:last-child {
    min-width: 0;
}

.client-detail-hero span,
.client-detail-card span {
    display: block;
    margin-bottom: 5px;
    color: var(--ink-faint);
    font-size: 10px;
}

.client-detail-hero h3 {
    margin: 0 0 7px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
}

.client-detail-hero p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 11px;
    line-height: 1.8;
}

.client-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.client-detail-card {
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface);
}

.client-detail-card-full {
    grid-column: 1 / -1;
}

.client-detail-card strong,
.client-detail-card a {
    color: var(--ink);
    font-size: 11px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.client-detail-card a {
    color: var(--teal-ink);
    text-decoration: none;
}

    .client-detail-card a:hover {
        text-decoration: underline;
    }

@media (max-width: 768px) {
    .client-page-head {
        align-items: stretch;
    }

        .client-page-head .bo-primary-btn {
            width: 100%;
            justify-content: center;
        }

    .client-form-grid,
    .client-detail-grid {
        grid-template-columns: 1fr;
    }

    .client-form-field-full,
    .client-detail-card-full {
        grid-column: auto;
    }

    .client-detail-hero {
        grid-template-columns: 1fr;
    }

    .client-detail-image {
        width: 100%;
        height: 130px;
    }

    .client-upload-box {
        align-items: flex-start;
    }
}


/* =========================================================
   VALUE MANAGEMENT — MODAL ARCHITECTURE
   Added at the end of style.css
   ========================================================= */
.value-page-head {
    align-items: flex-start;
}

    .value-page-head .bo-primary-btn {
        flex: 0 0 auto;
    }

.value-form-grid,
.value-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.value-form-field-full,
.value-detail-card-full {
    grid-column: 1 / -1;
}

.value-form-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.value-form-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(154, 211, 207, .18);
    color: var(--teal-ink);
    font-size: 19px;
}

.value-form-intro strong {
    display: block;
    color: var(--ink);
    font-size: 13px;
    margin-bottom: 3px;
}

.value-form-intro span {
    display: block;
    color: var(--ink-faint);
    font-size: 10.5px;
}

.value-form-message {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(224, 96, 90, .20);
    background: rgba(224, 96, 90, .07);
    color: var(--danger);
    font-size: 11px;
    line-height: 1.8;
}

.value-form-field {
    min-width: 0;
}

    .value-form-field label {
        display: block;
        margin-bottom: 7px;
        color: var(--ink);
        font-size: 11.5px;
        font-weight: 700;
    }

        .value-form-field label b {
            color: var(--danger);
        }

        .value-form-field label span {
            color: var(--ink-faint);
            font-weight: 500;
        }

    .value-form-field small {
        display: block;
        margin-top: 6px;
        color: var(--ink-faint);
        font-size: 9.5px;
        line-height: 1.7;
    }

    .value-form-field code {
        direction: ltr;
        display: inline-block;
        padding: 1px 5px;
        border-radius: 5px;
        background: var(--surface-2);
        color: var(--teal-ink);
        font-size: 9px;
    }

.value-description-input {
    min-height: 145px;
    resize: vertical;
    line-height: 1.9;
}

.value-icon-input-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

    .value-icon-input-wrap .value-icon-preview {
        width: 43px;
        min-width: 43px;
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: var(--surface-2);
        color: var(--teal-ink);
        font-size: 18px;
    }

    .value-icon-input-wrap .bo-input {
        flex: 1;
        min-width: 0;
    }

.value-table-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(154, 211, 207, .14);
    color: var(--teal-ink);
    font-size: 18px;
}

.value-title-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 170px;
}

    .value-title-cell > div {
        min-width: 0;
    }

    .value-title-cell strong {
        display: block;
        color: var(--ink);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .value-title-cell small {
        display: block;
        margin-top: 3px;
        color: var(--ink-faint);
        font-size: 9.5px;
    }

.value-row-index {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-faint);
    font-size: 9px;
    font-weight: 700;
}

.value-description-cell {
    display: block;
    max-width: 360px;
    color: var(--ink-muted);
    font-size: 10.5px;
    line-height: 1.8;
}

.value-link-chip {
    display: inline-block;
    max-width: 220px;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--teal-ink);
    font-size: 9.5px;
    text-decoration: none;
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .value-link-chip:hover {
        color: var(--teal-ink);
        text-decoration: underline;
    }

.value-muted-value {
    color: var(--ink-faint);
}

.value-detail-body {
    min-height: 0;
}

.value-detail-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.value-detail-icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(154, 211, 207, .18);
    color: var(--teal-ink);
    font-size: 30px;
}

.value-detail-hero > div:last-child {
    min-width: 0;
}

.value-detail-hero span {
    display: block;
    color: var(--ink-faint);
    font-size: 10px;
    margin-bottom: 3px;
}

.value-detail-hero h3 {
    margin: 0 0 5px;
    color: var(--ink);
    font-size: 18px;
}

.value-detail-hero p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 11px;
    line-height: 1.9;
}

.value-detail-card {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

    .value-detail-card > span {
        display: block;
        margin-bottom: 6px;
        color: var(--ink-faint);
        font-size: 9.5px;
    }

    .value-detail-card > strong,
    .value-detail-card > a {
        color: var(--ink);
        font-size: 11.5px;
        line-height: 1.8;
    }

    .value-detail-card > p {
        margin: 0;
        color: var(--ink-muted);
        font-size: 11px;
        line-height: 2;
        white-space: pre-line;
    }

    .value-detail-card > a {
        color: var(--teal-ink);
        text-decoration: none;
        word-break: break-all;
    }

        .value-detail-card > a:hover {
            text-decoration: underline;
        }

.value-detail-icon-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-ink);
}

    .value-detail-icon-name strong {
        color: var(--ink-muted);
        font-size: 10px;
        font-weight: 600;
    }

.value-empty-state {
    min-height: 190px;
}

    .value-empty-state .bo-empty-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.value-warning-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(224, 96, 90, .10);
    color: var(--danger);
}

.value-delete-body {
    text-align: center;
}

    .value-delete-body p {
        margin: 0;
        color: var(--ink);
        font-size: 12px;
        line-height: 1.9;
    }

        .value-delete-body p strong {
            color: var(--danger);
        }

    .value-delete-body small {
        display: block;
        margin-top: 7px;
        color: var(--ink-faint);
        font-size: 9.5px;
        line-height: 1.7;
    }

.value-inline-error {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(224, 96, 90, .07);
    color: var(--danger);
    font-size: 10px;
    line-height: 1.7;
}

.value-modal-form .bo-primary-btn.is-loading,
.value-delete-modal .bo-danger-btn.is-loading {
    opacity: .7;
    pointer-events: none;
}

    .value-modal-form .bo-primary-btn.is-loading::after,
    .value-delete-modal .bo-danger-btn.is-loading::after {
        content: '';
        width: 13px;
        height: 13px;
        margin-right: 7px;
        display: inline-block;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-left-color: transparent;
        border-radius: 50%;
        animation: value-button-spin .65s linear infinite;
    }

@keyframes value-button-spin {
    to {
        transform: rotate(360deg);
    }
}

#valueCreateModal .modal-dialog,
#valueEditModal .modal-dialog,
#valueDetailModal .modal-dialog {
    height: calc(100vh - 24px);
}

@media (max-width: 768px) {
    .value-form-grid,
    .value-detail-grid {
        grid-template-columns: 1fr;
    }

    .value-form-field-full,
    .value-detail-card-full {
        grid-column: auto;
    }

    .value-page-head {
        flex-direction: column;
    }

        .value-page-head .bo-primary-btn {
            width: 100%;
        }

    .value-detail-hero {
        align-items: flex-start;
    }

    .value-description-cell {
        max-width: 230px;
    }
}


/* =========================================================
   Value Strategic Icon Picker — appended
   ========================================================= */
.value-icon-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 7px;
}

.value-icon-option {
    min-height: 145px;
    padding: 16px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

    .value-icon-option:hover {
        border-color: var(--teal-ink);
        transform: translateY(-2px);
    }

    .value-icon-option.is-selected {
        border-color: var(--teal-ink);
        background: rgba(154, 211, 207, .13);
        box-shadow: 0 0 0 3px rgba(154, 211, 207, .12);
    }

.value-icon-option-symbol {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--surface-2);
    color: var(--teal-ink);
    font-size: 24px;
}

.value-icon-option strong {
    font-size: 12px;
    font-weight: 800;
}

.value-icon-option code {
    direction: ltr;
    font-family: Consolas, Monaco, monospace;
    font-size: 9.5px;
    color: var(--ink-faint);
}

.value-form-field-full .value-icon-picker + small {
    display: block;
    margin-top: 8px;
    color: var(--ink-faint);
    font-size: 9.5px;
    line-height: 1.8;
}

@media (max-width: 680px) {
    .value-icon-picker {
        grid-template-columns: 1fr;
    }

    .value-icon-option {
        min-height: 110px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 12px;
    }

    .value-icon-option-symbol {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
    }
}

/* =========================================================
   ContactUs Management — modal architecture
   ========================================================= */
.contactus-page-head {
    align-items: flex-start;
}

.contactus-panel {
    overflow: hidden;
}

.contactus-status-filter {
    min-width: 150px;
    height: 36px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    padding: 0 10px;
    font-size: 11px;
    outline: none;
}

    .contactus-status-filter:focus {
        border-color: var(--teal-ink);
    }

.contact-user-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 180px;
}

.contact-row-index {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex: 0 0 28px;
}

.contact-user-cell > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-user-cell strong, .contact-title-cell {
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
}

.contact-user-cell small {
    color: var(--ink-faint);
    font-size: 9px;
    direction: ltr;
    text-align: right;
}

.contact-text-cell {
    display: block;
    max-width: 300px;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-date-cell {
    color: var(--ink-faint);
    font-size: 9.5px;
    white-space: nowrap;
}

.contact-status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.contact-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 8.5px;
    white-space: nowrap;
}

    .contact-status.confirmed {
        background: rgba(63,191,148,.11);
        color: #258a6b;
    }

    .contact-status.pending {
        background: rgba(224,164,88,.12);
        color: #a06b23;
    }

    .contact-status.active {
        background: rgba(91,147,224,.11);
        color: #4778b9;
    }

    .contact-status.inactive {
        background: rgba(130,130,140,.10);
        color: var(--ink-faint);
    }

.contactus-dynamic-modal .modal-dialog {
    height: calc(100vh - 24px);
}

.contactus-dynamic-modal .modal-content, .contactus-delete-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.contactus-modal-body {
    padding: 20px;
}

.contactus-form-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    border-radius: 13px;
    margin-bottom: 16px;
}

.contactus-form-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(154,211,207,.16);
    color: var(--teal-ink);
    font-size: 20px;
    flex: 0 0 42px;
}

.contactus-form-intro > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contactus-form-intro strong {
    font-size: 12px;
    color: var(--ink);
}

.contactus-form-intro span {
    font-size: 9.5px;
    color: var(--ink-faint);
}

.contactus-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.contactus-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.contactus-form-field-full {
    grid-column: 1 / -1;
}

.contactus-form-field label {
    color: var(--ink);
    font-size: 10px;
    font-weight: 800;
}

    .contactus-form-field label b {
        color: var(--danger);
    }

.contactus-form-field .bo-input {
    width: 100%;
}

.contactus-form-message {
    margin-bottom: 12px;
    padding: 9px 11px;
    border-radius: 9px;
    background: rgba(224,96,90,.08);
    color: var(--danger);
    font-size: 10px;
    line-height: 1.8;
}

.contactus-status-note, .contactus-readonly-value {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-faint);
    font-size: 10px;
}

    .contactus-status-note i {
        color: #b47b31;
    }

.contactus-switch {
    min-height: 40px;
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--surface-2);
    cursor: pointer;
}

    .contactus-switch input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .contactus-switch span {
        width: 35px;
        height: 19px;
        border-radius: 20px;
        background: #c9cbd1;
        position: relative;
        transition: .18s;
        flex: 0 0 35px;
    }

        .contactus-switch span::after {
            content: '';
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            top: 2px;
            right: 2px;
            transition: .18s;
            box-shadow: 0 1px 3px rgba(0,0,0,.12);
        }

    .contactus-switch input:checked + span {
        background: var(--teal-ink);
    }

        .contactus-switch input:checked + span::after {
            transform: translateX(-16px);
        }

    .contactus-switch b {
        font-size: 9.5px;
        color: var(--ink-muted);
    }

.contactus-modal-form .bo-primary-btn.is-loading, .contactus-delete-modal .bo-danger-btn.is-loading {
    opacity: .65;
    pointer-events: none;
}

    .contactus-modal-form .bo-primary-btn.is-loading::after, .contactus-delete-modal .bo-danger-btn.is-loading::after {
        content: '';
        width: 13px;
        height: 13px;
        margin-right: 7px;
        display: inline-block;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-left-color: transparent;
        border-radius: 50%;
        animation: contactus-spin .65s linear infinite;
    }

@keyframes contactus-spin {
    to {
        transform: rotate(360deg);
    }
}

.contactus-delete-body {
    text-align: center;
}

.contactus-warning-icon {
    width: 58px;
    height: 58px;
    margin: 2px auto 13px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(224,96,90,.10);
    color: var(--danger);
    font-size: 26px;
}

.contactus-delete-body p {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.9;
}

    .contactus-delete-body p strong {
        color: var(--danger);
    }

.contactus-delete-body small {
    display: block;
    margin-top: 7px;
    color: var(--ink-faint);
    font-size: 9.5px;
}

.contactus-inline-error {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(224,96,90,.07);
    color: var(--danger);
    font-size: 10px;
    line-height: 1.7;
}

.contactus-detail-body {
    padding: 20px;
}

.contactus-detail-hero {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 15px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

.contactus-detail-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(154,211,207,.16);
    color: var(--teal-ink);
    font-size: 25px;
    flex: 0 0 52px;
}

.contactus-detail-hero > div:last-child {
    min-width: 0;
}

.contactus-detail-hero span {
    font-size: 9px;
    color: var(--ink-faint);
}

.contactus-detail-hero h3 {
    margin: 4px 0 5px;
    font-size: 15px;
    color: var(--ink);
}

.contactus-detail-hero p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 2;
    white-space: pre-line;
}

.contactus-detail-status {
    margin: 12px 0;
    padding: 8px 11px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-faint);
    font-size: 9.5px;
}

    .contactus-detail-status span {
        margin: 0 5px;
    }

.contactus-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.contactus-detail-card {
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: var(--surface);
    min-width: 0;
}

.contactus-detail-card-full {
    grid-column: 1 / -1;
}

.contactus-detail-card > span {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-faint);
    font-size: 9px;
}

.contactus-detail-card strong, .contactus-detail-card p {
    margin: 0;
    color: var(--ink);
    font-size: 10px;
    line-height: 1.9;
}

.contactus-detail-card p {
    white-space: pre-line;
    color: var(--ink-muted);
}

@media (max-width:900px) {
    .contactus-table {
        min-width: 920px;
    }

    .bo-table-wrap {
        overflow-x: auto;
    }
}

@media (max-width:760px) {
    .contactus-form-grid, .contactus-detail-grid {
        grid-template-columns: 1fr;
    }

    .contactus-form-field-full, .contactus-detail-card-full {
        grid-column: auto;
    }

    .contactus-page-head {
        flex-direction: column;
    }

        .contactus-page-head .bo-primary-btn {
            width: 100%;
        }

    .bo-table-tools {
        flex-wrap: wrap;
    }

    .contactus-status-filter {
        width: 100%;
    }
}

/* =========================================================
   CallAction Management — modal architecture
   ========================================================= */
.callaction-page-head {
    align-items: flex-start
}

.callaction-panel {
    overflow: hidden
}

.callaction-image-cell {
    width: 52px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-ink);
    font-size: 18px
}

    .callaction-image-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.callaction-title-cell {
    color: var(--ink);
    font-size: 11px;
    font-weight: 800
}

.callaction-text-cell {
    display: block;
    max-width: 320px;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.callaction-link-cell {
    display: block;
    max-width: 250px;
    color: var(--teal-ink);
    font-size: 9.5px;
    direction: ltr;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.callaction-muted {
    color: var(--ink-faint);
    font-size: 10px
}

.callaction-dynamic-modal .modal-dialog {
    height: calc(100vh - 24px)
}

.callaction-dynamic-modal .modal-content, .callaction-delete-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden
}

.callaction-modal-body {
    padding: 20px
}

.callaction-form-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    border-radius: 13px;
    margin-bottom: 16px
}

.callaction-form-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(154,211,207,.16);
    color: var(--teal-ink);
    font-size: 20px;
    flex: 0 0 42px
}

.callaction-form-intro > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.callaction-form-intro strong {
    font-size: 12px;
    color: var(--ink)
}

.callaction-form-intro span {
    font-size: 9.5px;
    color: var(--ink-faint)
}

.callaction-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.callaction-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.callaction-form-field-full {
    grid-column: 1/-1
}

.callaction-form-field label {
    color: var(--ink);
    font-size: 10px;
    font-weight: 800
}

    .callaction-form-field label b {
        color: var(--danger)
    }

    .callaction-form-field label span {
        color: var(--ink-faint);
        font-weight: 500
    }

.callaction-form-field .bo-input {
    width: 100%
}

.callaction-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.9
}

.callaction-form-message {
    margin-bottom: 12px;
    padding: 9px 11px;
    border-radius: 9px;
    background: rgba(224,96,90,.08);
    color: var(--danger);
    font-size: 10px;
    line-height: 1.8
}

.callaction-upload-box {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border: 1px dashed var(--border-soft);
    border-radius: 13px;
    background: var(--surface-2)
}

.callaction-upload-preview {
    width: 86px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-size: 22px;
    flex: 0 0 86px
}

    .callaction-upload-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.callaction-upload-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

    .callaction-upload-content strong {
        font-size: 10.5px;
        color: var(--ink)
    }

    .callaction-upload-content span {
        font-size: 9px;
        color: var(--ink-faint)
    }

    .callaction-upload-content input {
        font-size: 9px;
        margin-top: 3px
    }

.callaction-current-image-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: var(--surface-2)
}

    .callaction-current-image-card img, .callaction-no-current-image {
        width: 74px;
        height: 58px;
        border-radius: 9px;
        object-fit: cover;
        border: 1px solid var(--border-soft);
        background: var(--surface);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-faint);
        font-size: 20px;
        flex: 0 0 74px
    }

    .callaction-current-image-card > div:last-child {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .callaction-current-image-card strong {
        font-size: 10px;
        color: var(--ink)
    }

    .callaction-current-image-card span {
        font-size: 9px;
        color: var(--ink-faint)
    }

.callaction-modal-form .bo-primary-btn.is-loading, .callaction-delete-modal .bo-danger-btn.is-loading {
    opacity: .65;
    pointer-events: none
}

    .callaction-modal-form .bo-primary-btn.is-loading::after, .callaction-delete-modal .bo-danger-btn.is-loading::after {
        content: '';
        width: 13px;
        height: 13px;
        margin-right: 7px;
        display: inline-block;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-left-color: transparent;
        border-radius: 50%;
        animation: callaction-spin .65s linear infinite
    }

@keyframes callaction-spin {
    to {
        transform: rotate(360deg)
    }
}

.callaction-delete-body {
    text-align: center
}

.callaction-warning-icon {
    width: 58px;
    height: 58px;
    margin: 2px auto 13px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(224,96,90,.10);
    color: var(--danger);
    font-size: 26px
}

.callaction-delete-body p {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.9
}

    .callaction-delete-body p strong {
        color: var(--danger)
    }

.callaction-delete-body small {
    display: block;
    margin-top: 7px;
    color: var(--ink-faint);
    font-size: 9.5px
}

.callaction-inline-error {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(224,96,90,.07);
    color: var(--danger);
    font-size: 10px;
    line-height: 1.7
}

.callaction-detail-body {
    padding: 20px
}

.callaction-detail-hero {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 15px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft)
}

.callaction-detail-image {
    width: 84px;
    height: 68px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-ink);
    font-size: 24px;
    flex: 0 0 84px
}

    .callaction-detail-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.callaction-detail-hero > div:last-child {
    min-width: 0
}

.callaction-detail-hero span {
    font-size: 9px;
    color: var(--ink-faint)
}

.callaction-detail-hero h3 {
    margin: 4px 0 5px;
    font-size: 15px;
    color: var(--ink)
}

.callaction-detail-hero p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 2;
    white-space: pre-line
}

.callaction-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin-top: 12px
}

.callaction-detail-card {
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: var(--surface);
    min-width: 0
}

.callaction-detail-card-full {
    grid-column: 1/-1
}

.callaction-detail-card > span {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-faint);
    font-size: 9px
}

.callaction-detail-card strong, .callaction-detail-card p {
    margin: 0;
    color: var(--ink);
    font-size: 10px;
    line-height: 1.9
}

.callaction-detail-card p {
    white-space: pre-line;
    color: var(--ink-muted)
}

.callaction-detail-card a {
    color: var(--teal-ink);
    font-size: 10px;
    direction: ltr;
    display: block;
    word-break: break-all
}

@media(max-width:900px) {
    .callaction-table {
        min-width: 900px
    }

    .bo-table-wrap {
        overflow-x: auto
    }
}

@media(max-width:760px) {
    .callaction-form-grid, .callaction-detail-grid {
        grid-template-columns: 1fr
    }

    .callaction-form-field-full, .callaction-detail-card-full {
        grid-column: auto
    }

    .callaction-page-head {
        flex-direction: column
    }

        .callaction-page-head .bo-primary-btn {
            width: 100%
        }

    .callaction-upload-box {
        align-items: flex-start;
        flex-direction: column
    }

    .callaction-upload-preview {
        width: 100%;
        height: 130px;
        flex-basis: 130px
    }
}

/* ==========================================================
   CONTENT MANAGEMENT - COUNSELING / SHARED MODAL CRUD
   ========================================================== */
.content-management-head {
    align-items: flex-start
}

.content-management-panel {
    margin-top: 18px
}

.content-management-table td {
    vertical-align: middle
}

.content-table-image {
    width: 58px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px
}

.content-management-table td:nth-child(2) strong {
    display: block
}

.content-management-table td:nth-child(2) small {
    display: block;
    margin-top: 4px;
    color: var(--ink-muted);
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.content-form-modal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 920px
}

.content-form-modal .modal-body {
    padding: 22px
}

.content-form-modal .modal-footer {
    align-items: center
}

.content-image-picker {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 12px
}

.content-image-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition: .18s ease
}

    .content-image-card:hover {
        border-color: var(--primary);
        transform: translateY(-1px)
    }

    .content-image-card img {
        width: 100%;
        height: 130px;
        object-fit: cover;
        border-radius: 9px;
        background: var(--surface-2)
    }

    .content-image-card code {
        font-size: 10px;
        color: var(--ink-muted);
        word-break: break-all
    }

    .content-image-card span {
        font-size: 11px;
        color: var(--ink-soft);
        display: flex;
        align-items: center;
        gap: 6px
    }

    .content-image-card.existing.is-removed {
        opacity: .35;
        filter: grayscale(1)
    }

        .content-image-card.existing.is-removed .content-remove-image {
            pointer-events: none
        }

.content-remove-image {
    margin-top: 4px
}

.bo-danger-outline {
    border: 1px solid rgba(224,96,90,.3);
    background: transparent;
    color: var(--danger);
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 11px
}

    .bo-danger-outline:hover {
        background: rgba(224,96,90,.08)
    }

.content-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

    .content-detail-grid > div {
        padding: 14px;
        border: 1px solid var(--border-soft);
        border-radius: 12px;
        background: var(--surface-2)
    }

    .content-detail-grid span, .content-detail-text > span {
        display: block;
        color: var(--ink-muted);
        font-size: 11px;
        margin-bottom: 6px
    }

    .content-detail-grid strong {
        display: block;
        color: var(--ink);
        font-size: 13px;
        word-break: break-word
    }

.content-detail-text {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 12px
}

    .content-detail-text > div {
        line-height: 1.95;
        color: var(--ink-soft);
        white-space: pre-wrap
    }

.content-detail-section-title {
    margin: 18px 0 10px;
    font-weight: 700;
    color: var(--ink);
    font-size: 13px
}

.content-detail-images {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px
}

    .content-detail-images img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        border-radius: 10px;
        border: 2px solid transparent
    }

        .content-detail-images img.is-main {
            border-color: var(--primary)
        }

.content-delete-modal .modal-dialog {
    max-width: 500px
}

.content-warning-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: rgba(224,96,90,.1);
    color: var(--danger);
    font-size: 25px
}

.content-delete-modal .modal-body {
    text-align: center
}

    .content-delete-modal .modal-body small {
        display: block;
        color: var(--ink-muted);
        margin-top: 7px
    }

.content-inline-error {
    margin-top: 12px;
    color: var(--danger);
    font-size: 12px
}

.content-form-modal .bo-validation-message {
    display: block;
    min-height: 16px
}

.content-form-modal .alert {
    margin-bottom: 16px
}

@media(max-width:800px) {
    .content-image-picker {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .content-detail-images {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .content-detail-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .content-image-picker, .content-detail-images {
        grid-template-columns: 1fr
    }

    .content-form-modal .modal-dialog {
        width: calc(100% - 10px);
        height: calc(100vh - 10px);
        margin: 5px auto
    }

    .content-form-modal .modal-body {
        padding: 16px
    }

    .content-form-modal .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch
    }

        .content-form-modal .modal-footer button {
            width: 100%
        }
}

/* =========================================================
   Footer Management - modal based
   ========================================================= */
.footer-page-head {
    align-items: flex-start;
}

.footer-page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-index-panel {
    overflow: hidden;
}

.footer-empty-state {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .footer-empty-state > i {
        font-size: 42px;
        opacity: .55;
        margin-bottom: 4px;
    }

    .footer-empty-state .bo-primary-btn {
        margin-top: 8px;
    }

.footer-summary-card {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) auto;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--border-color, #e8ebef);
    border-radius: 18px;
    background: var(--card-bg, #fff);
    align-items: start;
}

.footer-summary-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18,183,196,.10);
    font-size: 28px;
    color: var(--accent, #12b7c4);
}

.footer-summary-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.footer-summary-eyebrow {
    display: block;
    font-size: 12px;
    color: #8a919b;
    margin-bottom: 4px;
}

.footer-summary-title-row h3 {
    margin: 0;
    font-size: 20px;
}

.footer-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(40,167,69,.10);
    color: #268a3d;
    font-size: 12px;
    white-space: nowrap;
}

.footer-summary-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

    .footer-summary-grid > div {
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(127,127,127,.055);
        min-width: 0;
    }

    .footer-summary-grid span, .footer-summary-grid strong {
        display: block;
    }

    .footer-summary-grid span {
        font-size: 11px;
        color: #9299a3;
        margin-bottom: 5px;
    }

    .footer-summary-grid strong {
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.footer-summary-actions {
    display: flex;
    gap: 7px;
    align-items: center;
}

.footer-modal-body {
    padding: 22px;
}

.footer-form-section, .footer-detail-section {
    border: 1px solid var(--border-color,#e8ebef);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    background: var(--card-bg,#fff);
}

    .footer-form-section:last-child, .footer-detail-section:last-child {
        margin-bottom: 0;
    }

    .footer-form-section-head, .footer-detail-section > h6 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

        .footer-form-section-head > i, .footer-detail-section > h6 > i {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(18,183,196,.10);
            color: var(--accent,#12b7c4);
        }

        .footer-form-section-head h6 {
            margin: 0 0 3px;
            font-size: 15px;
        }

        .footer-form-section-head span {
            font-size: 11px;
            color: #8e959f;
        }

.footer-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.footer-field-wide {
    grid-column: 1 / -1;
}

.footer-form-section .bo-form-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
}

.footer-form-section .form-control {
    min-height: 42px;
    border-radius: 10px;
}

.footer-form-section textarea.form-control {
    resize: vertical;
}

.footer-link-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) 40px;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border-radius: 12px;
    background: rgba(127,127,127,.055);
}

.footer-link-remove {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(220,53,69,.08);
    color: #c52f3d;
    cursor: pointer;
}

.footer-add-link-btn {
    margin-top: 12px;
    border: 1px dashed #aeb6bf;
    background: transparent;
    border-radius: 10px;
    padding: 9px 14px;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
}

    .footer-add-link-btn:hover {
        border-color: var(--accent,#12b7c4);
        color: var(--accent,#12b7c4);
    }

.footer-detail-body {
    padding: 22px;
}

.footer-detail-hero {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg,rgba(18,183,196,.10),rgba(18,183,196,.025));
    margin-bottom: 16px;
}

.footer-detail-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    font-size: 27px;
    color: var(--accent,#12b7c4);
}

.footer-detail-hero span {
    font-size: 11px;
    color: #8d949e;
}

.footer-detail-hero h3 {
    margin: 4px 0 5px;
    font-size: 21px;
}

.footer-detail-hero p {
    margin: 0;
    color: #707782;
    font-size: 13px;
    line-height: 1.9;
}

.footer-detail-section > h6 {
    font-size: 14px;
}

.footer-detail-wide {
    grid-column: 1/-1;
}

.footer-detail-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.footer-detail-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .footer-detail-links a, .footer-social-list a {
        text-decoration: none;
        color: inherit;
    }

    .footer-detail-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(127,127,127,.055);
        font-size: 12px;
    }

        .footer-detail-links a i {
            opacity: .65;
        }

.footer-detail-empty {
    color: #9299a3;
    font-size: 12px;
    padding: 10px 0;
}

.footer-social-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

    .footer-social-list a {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(127,127,127,.055);
    }

    .footer-social-list span {
        font-size: 11px;
        color: #8d949e;
    }

    .footer-social-list b {
        font-size: 12px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.footer-delete-modal .delete-warning-icon {
    margin-bottom: 12px;
}

@media (max-width: 992px) {
    .footer-summary-card {
        grid-template-columns: 52px minmax(0,1fr);
    }

    .footer-summary-icon {
        width: 52px;
        height: 52px;
    }

    .footer-summary-actions {
        grid-column: 1/-1;
        justify-content: flex-start;
    }

    .footer-summary-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .footer-detail-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .footer-page-actions {
        width: 100%;
    }

        .footer-page-actions .bo-primary-btn, .footer-page-actions .bo-secondary-btn {
            flex: 1;
            justify-content: center;
        }

    .footer-summary-card {
        grid-template-columns: 1fr;
    }

    .footer-summary-icon {
        margin-bottom: 2px;
    }

    .footer-summary-grid, .footer-form-grid, .footer-social-list {
        grid-template-columns: 1fr;
    }

    .footer-field-wide, .footer-detail-wide {
        grid-column: auto;
    }

    .footer-link-row {
        grid-template-columns: 1fr;
    }

    .footer-link-remove {
        width: 100%;
    }

    .footer-summary-title-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   EDUCATION MANAGEMENT
   Modal-first / No DataTable
   ========================================================= */
.education-page-head,
.education-category-head {
    margin-bottom: 22px
}

.education-index-tools,
.education-category-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.education-search-box {
    min-width: 260px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border-color,#e5e7eb);
    border-radius: 12px;
    background: var(--card-bg,#fff)
}

    .education-search-box i {
        color: #8b93a3
    }

    .education-search-box input {
        border: 0;
        outline: 0;
        background: transparent;
        width: 100%;
        font-family: inherit
    }

.education-filter-select {
    height: 42px;
    min-width: 145px;
    border: 1px solid var(--border-color,#e5e7eb);
    border-radius: 12px;
    background: var(--card-bg,#fff);
    padding: 0 12px;
    font-family: inherit
}

.education-management-table th, .education-management-table td {
    vertical-align: middle
}

.education-table-image {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,.06)
}

.education-title-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 190px
}

    .education-title-cell strong {
        font-size: 14px
    }

    .education-title-cell span {
        font-size: 11px;
        color: #8a91a0;
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .education-title-cell small {
        color: #9299a6
    }

.education-category-chip, .education-access-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(91,147,224,.08);
    color: #5878a8;
    font-size: 11px;
    white-space: nowrap
}

.education-access-chip {
    background: rgba(63,191,148,.1);
    color: #3d8c72
}

.education-status-chip, .education-seo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap
}

    .education-status-chip.is-published, .education-seo-chip.is-complete {
        background: rgba(63,191,148,.11);
        color: #328568
    }

    .education-status-chip.is-draft {
        background: rgba(139,124,246,.1);
        color: #7568c8
    }

    .education-status-chip.is-archived {
        background: rgba(120,128,140,.11);
        color: #6e7580
    }

    .education-seo-chip.is-incomplete {
        background: rgba(224,164,88,.13);
        color: #a36f28
    }

.education-media-counts {
    display: flex;
    gap: 8px
}

    .education-media-counts span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #727b8a;
        font-size: 12px
    }

    .education-media-counts i {
        font-size: 14px
    }

.education-date-cell {
    font-size: 12px;
    color: #7b8492;
    white-space: nowrap
}

/* Category */
.education-category-title-cell {
    display: flex;
    align-items: center;
    gap: 10px
}

    .education-category-title-cell strong {
        font-size: 14px
    }

.education-count-chip {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(18,183,196,.09);
    color: #188c96;
    font-size: 11px
}

.education-category-edit-note {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #f7f9fc;
    color: #707887;
    font-size: 12px
}

    .education-category-edit-note i {
        margin-left: 5px
    }

/* Modals */
.education-modal .modal-dialog {
    max-height: calc(100vh - 28px);
    margin-top: 14px;
    margin-bottom: 14px
}

.education-modal .modal-content {
    max-height: calc(100vh - 28px);
    overflow: hidden
}

.education-modal .modal-body {
    overflow-y: auto
}

.education-modal-body {
    padding: 0 22px 22px
}

.education-modal .modal-header {
    padding: 18px 22px
}

.education-modal .modal-footer {
    padding: 14px 22px
}

.education-modal-subtitle {
    margin: 5px 0 0;
    color: #8b93a1;
    font-size: 11px
}

.education-form-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    gap: 6px;
    padding: 12px 0;
    background: var(--card-bg,#fff);
    border-bottom: 1px solid rgba(0,0,0,.06);
    overflow: auto
}

.education-tab {
    border: 1px solid #e6e9ef;
    background: #fafbfc;
    color: #747d8c;
    border-radius: 10px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer
}

    .education-tab i {
        margin-left: 4px
    }

    .education-tab.is-active {
        background: rgba(18,183,196,.1);
        border-color: rgba(18,183,196,.25);
        color: #168c95
    }

.education-tab-pane {
    display: none;
    padding-top: 18px
}

    .education-tab-pane.is-active {
        display: block
    }

.education-section-heading {
    margin-bottom: 15px
}

    .education-section-heading span {
        display: block;
        font-size: 10px;
        color: #11a2ad;
        margin-bottom: 4px
    }

    .education-section-heading h3 {
        font-size: 16px;
        margin: 0;
        font-weight: 700
    }

.education-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

    .education-form-grid .education-full {
        grid-column: 1/-1
    }

    .education-form-grid .bo-form-field {
        min-width: 0
    }

    .education-form-grid .bo-input {
        width: 100%
    }

.education-rich-text {
    min-height: 190px
}

.education-inline-warning {
    display: block;
    margin-top: 6px;
    color: #a36f28;
    font-size: 10px;
    line-height: 1.8
}

.education-switch-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-top: 15px
}

.education-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid #e8ebf0;
    border-radius: 12px;
    background: #fafbfc;
    font-size: 11px;
    color: #606978
}

    .education-switch input {
        accent-color: #12aab5
    }

.education-upload-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.education-upload-card {
    border: 1px dashed #d9dee8;
    border-radius: 16px;
    padding: 18px;
    background: #fbfcfe;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start
}

.education-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18,183,196,.1);
    color: #0e9da8;
    font-size: 19px
}

.education-upload-card strong {
    display: block;
    font-size: 13px
}

.education-upload-card small {
    display: block;
    color: #89919e;
    font-size: 10px;
    line-height: 1.9;
    margin-top: 3px
}

.education-file-picker {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #e2e6ed;
    color: #526071;
    font-size: 11px;
    cursor: pointer
}

    .education-file-picker input {
        display: none
    }

.education-selected-files {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .education-selected-files > div {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 9px;
        border-radius: 9px;
        background: #fff;
        border: 1px solid #eceff4;
        font-size: 10px
    }

    .education-selected-files span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: ltr
    }

    .education-selected-files small {
        margin-right: auto;
        white-space: nowrap
    }

.education-existing-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 16px
}

.education-media-column {
    min-width: 0
}

.education-media-column-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: end;
    margin-bottom: 9px
}

    .education-media-column-head strong {
        font-size: 12px
    }

    .education-media-column-head span {
        font-size: 9px;
        color: #8c94a1
    }

.education-existing-images {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px
}

.education-existing-image {
    position: relative;
    border: 1px solid #e5e8ee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff
}

    .education-existing-image img {
        display: block;
        width: 100%;
        height: 95px;
        object-fit: cover
    }

.education-main-radio, .education-delete-check {
    position: absolute;
    left: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 5px;
    border-radius: 7px;
    background: rgba(20,25,35,.72);
    color: #fff;
    font-size: 8px
}

.education-main-radio {
    top: 5px
}

.education-delete-check {
    bottom: 5px
}

    .education-main-radio input, .education-delete-check input {
        margin-left: 4px;
        accent-color: #12b7c4
    }

.education-existing-file, .education-detail-file-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid #e7eaf0;
    border-radius: 11px;
    background: #fff
}

.education-existing-files {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 260px;
    overflow: auto
}

.education-existing-file > div:nth-child(2) {
    min-width: 0;
    flex: 1
}

.education-existing-file strong, .education-detail-file-card strong {
    display: block;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.education-existing-file small, .education-detail-file-card span {
    display: block;
    font-size: 9px;
    color: #8a929f;
    margin-top: 3px
}

.education-existing-file > a, .education-existing-file .education-file-delete {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #f6f7f9;
    color: #687181;
    cursor: pointer
}

    .education-existing-file .education-file-delete input {
        display: none
    }

.education-existing-file .education-file-delete {
    color: #b65c68
}

.education-file-type-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f4f7;
    color: #667080
}

.education-inline-empty {
    padding: 20px;
    text-align: center;
    border: 1px dashed #dfe4eb;
    border-radius: 12px;
    color: #9098a5;
    font-size: 11px
}

/* Detail */
.education-detail-body {
    padding: 20px 22px
}

.education-detail-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) 285px;
    gap: 20px
}

.education-detail-main h2 {
    font-size: 24px;
    margin: 13px 0 4px
}

.education-detail-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.education-detail-slug {
    font-size: 11px;
    color: #9098a4;
    margin-bottom: 14px
}

.education-detail-summary {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f7f9fc;
    color: #646e7d;
    font-size: 12px;
    line-height: 2
}

.education-detail-content {
    font-size: 13px;
    line-height: 2.2;
    color: #454e5b
}

.education-detail-side {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.education-detail-main-image {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 15px
}

.education-detail-placeholder {
    height: 190px;
    border-radius: 15px;
    background: #f6f8fa;
    color: #a1a8b2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px
}

    .education-detail-placeholder i {
        font-size: 30px
    }

.education-detail-info-card {
    border: 1px solid #e8ebf0;
    border-radius: 14px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

    .education-detail-info-card > div {
        padding: 7px 8px;
        background: #fafbfc;
        border-radius: 9px
    }

    .education-detail-info-card span, .education-detail-meta-list span, .education-detail-seo-grid span {
        display: block;
        color: #8b93a0;
        font-size: 9px;
        margin-bottom: 3px
    }

    .education-detail-info-card strong {
        font-size: 10px
    }

.education-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 18px
}

.education-detail-section {
    border: 1px solid #e8ebf0;
    border-radius: 15px;
    padding: 15px;
    background: #fff;
    margin-top: 15px
}

.education-detail-grid .education-detail-section {
    margin-top: 0
}

.education-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px
}

    .education-detail-section-head h3 {
        font-size: 13px;
        margin: 0
    }

        .education-detail-section-head h3 i {
            margin-left: 5px;
            color: #12a5af
        }

    .education-detail-section-head > span {
        font-size: 9px;
        color: #9299a5
    }

.education-detail-text {
    white-space: pre-line;
    color: #596272;
    font-size: 11px;
    line-height: 2
}

.education-detail-meta-list {
    display: grid;
    gap: 9px
}

    .education-detail-meta-list > div {
        padding: 9px;
        border-radius: 10px;
        background: #fafbfc
    }

    .education-detail-meta-list strong {
        font-size: 10px;
        color: #596272;
        line-height: 1.9
    }

.education-detail-image-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px
}

.education-detail-image-card {
    position: relative;
    border-radius: 11px;
    overflow: hidden;
    background: #f7f8fa;
    border: 1px solid #e8ebef
}

    .education-detail-image-card img {
        width: 100%;
        height: 125px;
        display: block;
        object-fit: cover
    }

    .education-detail-image-card > span {
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 4px 6px;
        border-radius: 7px;
        background: rgba(20,25,35,.72);
        color: #fff;
        font-size: 8px
    }

    .education-detail-image-card small {
        display: block;
        padding: 6px;
        font-size: 9px;
        color: #727b89
    }

.education-detail-file-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
}

.education-detail-file-card {
    color: inherit;
    text-decoration: none
}

    .education-detail-file-card:hover {
        background: #f9fafc
    }

    .education-detail-file-card > div:nth-child(2) {
        min-width: 0;
        flex: 1
    }

    .education-detail-file-card > i {
        color: #7b8491
    }

.education-detail-seo {
    background: linear-gradient(180deg,#fbfcff,#fff)
}

.education-detail-seo-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px
}

    .education-detail-seo-grid > div {
        padding: 10px;
        border-radius: 10px;
        background: #fafbfc
    }

        .education-detail-seo-grid > div.full {
            grid-column: 1/-1
        }

    .education-detail-seo-grid strong {
        display: block;
        font-size: 10px;
        color: #515b6a;
        line-height: 1.8;
        word-break: break-word
    }

.education-delete-modal .modal-content {
    overflow: hidden
}

@media(max-width:992px) {
    .education-detail-hero, .education-existing-media {
        grid-template-columns: 1fr
    }

    .education-upload-grid, .education-detail-file-list {
        grid-template-columns: 1fr
    }

    .education-detail-side {
        max-width: 420px
    }
}

@media(max-width:768px) {
    .education-form-grid, .education-detail-grid {
        grid-template-columns: 1fr
    }

        .education-form-grid .education-full, .education-detail-seo-grid > div.full {
            grid-column: auto
        }

    .education-switch-grid {
        grid-template-columns: 1fr
    }

    .education-index-tools {
        width: 100%
    }

    .education-search-box {
        min-width: 0;
        flex: 1
    }

    .education-filter-select {
        flex: 0 0 145px
    }

    .education-existing-images {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .education-detail-image-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .education-detail-body {
        padding: 14px
    }
}

@media(max-width:560px) {
    .education-filter-select {
        flex: 1
    }

    .education-form-tabs {
        gap: 5px
    }

    .education-tab {
        padding: 8px 9px
    }

    .education-existing-images {
        grid-template-columns: 1fr 1fr
    }
}

.education-upload-item {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 9px !important
}

    .education-upload-item .education-upload-file-name {
        grid-column: 1/-1;
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0
    }

        .education-upload-item .education-upload-file-name span {
            flex: 1;
            min-width: 0
        }

        .education-upload-item .education-upload-file-name small {
            margin-right: auto
        }

    .education-upload-item .bo-input {
        min-height: 34px !important;
        padding: 7px 9px !important;
        font-size: 10px !important
    }

.education-existing-image {
    padding-bottom: 74px
}

    .education-existing-image .education-media-input {
        position: relative;
        z-index: 2;
        width: calc(100% - 10px);
        margin: 5px
    }

.education-existing-file-fields {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .education-existing-file-fields .education-media-input {
        min-height: 30px !important;
        padding: 5px 8px !important;
        font-size: 9px !important
    }

    .education-existing-file-fields small {
        margin-top: 0 !important
    }

@media(max-width:768px) {
    .education-upload-item {
        grid-template-columns: 1fr
    }

        .education-upload-item .education-upload-file-name {
            grid-column: auto
        }
}

.education-main-image-select {
    grid-column: 1 / -1;
    margin-top: 2px;
}

    .education-main-image-select label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }

    .education-main-image-select input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .education-main-image-select span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 11px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 11px;
        color: #777;
        background: #fff;
        transition: .2s ease;
    }

    .education-main-image-select input[type="radio"]:checked + span {
        border-color: #c76265;
        color: #c76265;
        background: #fff5f5;
    }

        .education-main-image-select input[type="radio"]:checked + span i {
            color: #c76265;
        }


/* =========================================================
   Unified Category Management
   Shared by Book / News / Article / Education / Project
   Added at the end of style.css intentionally.
   ========================================================= */
.category-panel {
    overflow: hidden;
}

.category-title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .category-title-cell strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.category-index {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    font-size: .78rem;
    font-weight: 700;
    background: var(--bo-surface-2,#f3f4f6);
}

.bo-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

    .bo-status-pill.success {
        background: rgba(34,197,94,.10);
        color: #16803a;
    }

    .bo-status-pill.warning {
        background: rgba(245,158,11,.12);
        color: #a16207;
    }

.slug-chip {
    display: inline-flex;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bo-surface-2,#f5f6f8);
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: .78rem;
}

.category-edit-count {
    margin-top: 16px;
    padding: 11px 14px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 10px;
    background: var(--bo-surface-2,#f7f8fa);
    color: #64748b;
    font-size: .82rem;
}

    .category-edit-count strong {
        color: inherit;
    }

.category-error-message {
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(239,68,68,.08);
    color: #b91c1c;
    line-height: 1.8;
}

.bo-form-field-full {
    grid-column: 1 / -1;
}

.bo-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 18px;
}

    .bo-switch-row label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .86rem;
        font-weight: 600;
        cursor: pointer;
    }

    .bo-switch-row input {
        accent-color: currentColor;
    }

@media (max-width: 768px) {
    .category-panel .bo-table-wrap {
        overflow-x: auto;
    }

    .category-panel .bo-data-table {
        min-width: 760px;
    }

    .bo-form-field-full {
        grid-column: auto;
    }
}


/* Footer image + MyService additions */
.footer-image-editor {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    align-items: start
}

.footer-image-preview-box {
    width: 220px;
    height: 150px;
    border-radius: 14px;
    border: 1px dashed var(--border);
    background: var(--surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

    .footer-image-preview-box img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.footer-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: var(--ink-faint);
    font-size: 12px
}

    .footer-image-empty i {
        font-size: 30px
    }

.footer-image-help {
    display: block;
    margin-top: 7px;
    color: var(--ink-faint);
    font-size: 11px
}

.footer-image-remove {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--danger);
    font-size: 12px
}

.myservice-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px
}

.myservice-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm)
}

.myservice-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.myservice-card-icon, .myservice-detail-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-tint);
    color: var(--teal-ink)
}

.myservice-card-actions {
    display: flex;
    gap: 5px
}

.myservice-card-content {
    padding: 18px 0
}

    .myservice-card-content h3 {
        margin: 4px 0;
        font-size: 19px
    }

    .myservice-card-content p {
        color: var(--ink-soft);
        font-size: 12px
    }

.myservice-eyebrow {
    color: var(--teal-ink);
    font-size: 11px
}

.myservice-sub-head {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
    font-size: 12px
}

.myservice-modal-body, .myservice-detail-body {
    max-height: 72vh;
    overflow-y: auto;
    padding: 22px
}

.myservice-form-section, .myservice-detail-section {
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    margin-bottom: 16px
}

.myservice-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 15px
}

.subservice-editor {
    display: grid;
    gap: 13px
}

.subservice-row {
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    background: var(--surface-2);
    padding: 14px
}

.subservice-row-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px
}

.subservice-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.subservice-field-wide {
    grid-column: 1/-1
}

.subservice-add-btn {
    width: 100%;
    margin-top: 14px;
    padding: 11px;
    border: 1px dashed var(--border);
    background: var(--surface-2);
    color: var(--teal-ink);
    border-radius: 12px
}

.myservice-detail-hero {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 20px;
    border-radius: 16px;
    background: var(--surface-2)
}

.myservice-detail-sub-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.myservice-detail-sub-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 13px;
    background: var(--surface-2)
}

.myservice-detail-sub-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-tint);
    color: var(--teal-ink);
    border-radius: 11px
}

@media(max-width:900px) {
    .myservice-grid, .myservice-detail-sub-grid, .myservice-form-grid, .subservice-fields, .footer-image-editor {
        grid-template-columns: 1fr
    }

    .subservice-field-wide {
        grid-column: auto
    }
}


/* =========================================================
   MyService Management
   Single Repository / Single Service / Single Controller
   Modal-first UI - appended intentionally at the end.
   ========================================================= */
.myservice-dynamic-modal .modal-content,
.myservice-detail-modal .modal-content {
    overflow: hidden;
}

.myservice-dynamic-modal .modal-dialog,
.myservice-detail-modal .modal-dialog {
    max-width: 1120px;
}

.myservice-modal-body,
.myservice-detail-body {
    max-height: 72vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
}

    .myservice-modal-body::-webkit-scrollbar,
    .myservice-detail-body::-webkit-scrollbar {
        width: 7px;
    }

    .myservice-modal-body::-webkit-scrollbar-thumb,
    .myservice-detail-body::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(100,116,139,.25);
    }

.myservice-form-section {
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--surface);
}

.myservice-form-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

    .myservice-form-head > i {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        border-radius: 11px;
        background: var(--teal-tint);
        color: var(--teal-ink);
        font-size: 16px;
    }

    .myservice-form-head h6 {
        margin: 0 0 3px;
        font-size: 13px;
    }

    .myservice-form-head span {
        color: var(--ink-faint);
        font-size: 10px;
    }

.myservice-form-grid,
.subservice-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.myservice-field-wide,
.subservice-field-wide {
    grid-column: 1 / -1;
}

.subservice-editor {
    display: grid;
    gap: 12px;
}

.subservice-row {
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-2);
}

.subservice-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.subservice-number {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}

    .subservice-number i {
        color: var(--teal-ink);
    }

.subservice-remove-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(239,68,68,.16);
    border-radius: 9px;
    background: rgba(239,68,68,.06);
    color: var(--danger);
    cursor: pointer;
}

    .subservice-remove-btn:hover {
        background: rgba(239,68,68,.12);
    }

.subservice-add-btn {
    width: 100%;
    min-height: 42px;
    margin-top: 13px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--teal-ink);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

    .subservice-add-btn:hover {
        background: var(--teal-tint);
    }

.myservice-detail-hero {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--surface-2);
}

.myservice-detail-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    border-radius: 14px;
    background: var(--teal-tint);
    color: var(--teal-ink);
    font-size: 19px;
}

.myservice-detail-hero > div:last-child {
    min-width: 0;
}

    .myservice-detail-hero > div:last-child > span {
        color: var(--teal-ink);
        font-size: 10px;
        font-weight: 700;
    }

.myservice-detail-hero h3 {
    margin: 4px 0;
    font-size: 18px;
}

.myservice-detail-hero p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.9;
    white-space: pre-line;
}

.myservice-detail-section {
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--surface);
}

.myservice-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

    .myservice-detail-section-head h6 {
        margin: 0;
        font-size: 12px;
    }

        .myservice-detail-section-head h6 i {
            color: var(--teal-ink);
        }

    .myservice-detail-section-head > span {
        color: var(--ink-faint);
        font-size: 10px;
    }

.myservice-detail-sub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.myservice-detail-sub-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    background: var(--surface-2);
}

.myservice-detail-sub-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: 11px;
    background: var(--teal-tint);
    color: var(--teal-ink);
}

.myservice-detail-sub-content {
    min-width: 0;
}

    .myservice-detail-sub-content h5 {
        margin: 0 0 5px;
        font-size: 12px;
    }

    .myservice-detail-sub-content p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 10px;
        line-height: 1.8;
        white-space: pre-line;
    }

    .myservice-detail-sub-content a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 8px;
        color: var(--teal-ink);
        font-size: 10px;
        text-decoration: none;
        direction: rtl;
    }

.myservice-empty-state {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--ink-faint);
    font-size: 11px;
}

    .myservice-empty-state i {
        font-size: 25px;
    }

@media (max-width: 900px) {
    .myservice-form-grid,
    .subservice-fields,
    .myservice-detail-sub-grid {
        grid-template-columns: 1fr;
    }

    .myservice-field-wide,
    .subservice-field-wide {
        grid-column: auto;
    }

    .myservice-modal-body,
    .myservice-detail-body {
        padding: 14px;
        max-height: 70vh;
    }
}

@media (max-width: 560px) {
    .myservice-detail-hero {
        align-items: flex-start;
        padding: 14px;
    }

    .myservice-detail-section {
        padding: 14px;
    }
}


/* News tags & author relations */
.news-relation-card {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 16px;
    background: rgba(248,249,250,.65);
}

.news-relation-title {
    font-weight: 700;
    margin-bottom: 14px;
}

.news-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
}

.news-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.1);
    background: #fff;
    font-size: .9rem;
}

.news-tag-remove {
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    font-size: 18px;
}

.news-index-tags {
    display: block;
    opacity: .75;
    margin-top: 2px;
}


/* =========================================================
   Newsletter Subscribers Management
   Read-only grid + inline unsubscribe/delete actions.
   Appended at the end of style.css intentionally.
   ========================================================= */
.newsletter-page-head {
    align-items: flex-end;
}

.newsletter-panel {
    overflow: hidden;
}

.newsletter-table {
    min-width: 760px;
}

.newsletter-row-index {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 700;
}

.newsletter-email-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 190px;
}

    .newsletter-email-cell strong {
        display: block;
        direction: ltr;
        text-align: right;
        color: var(--ink);
        font-size: 12px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .newsletter-email-cell span {
        display: block;
        color: var(--ink-faint);
        font-size: 10.5px;
    }

.newsletter-date-cell {
    direction: rtl;
    white-space: nowrap;
    color: var(--ink-soft);
    font-size: 10.5px;
}

.newsletter-row-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

    .newsletter-row-actions form {
        display: inline-flex;
        margin: 0;
    }

.newsletter-unsub-btn,
.newsletter-delete-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    cursor: pointer;
    transition: all var(--transition);
}

    .newsletter-unsub-btn:hover {
        background: var(--amber-tint);
        color: var(--amber);
        border-color: transparent;
        transform: translateY(-1px);
    }

    .newsletter-delete-btn:hover {
        background: rgba(224, 96, 90, .10);
        color: var(--danger);
        border-color: transparent;
        transform: translateY(-1px);
    }

.newsletter-empty-hint {
    color: var(--ink-faint);
}

@media (max-width: 900px) {
    .newsletter-table {
        min-width: 660px;
    }

    .bo-table-wrap {
        overflow-x: auto;
    }
}

@media (max-width: 760px) {
    .newsletter-page-head {
        align-items: stretch;
    }

        .newsletter-page-head .bo-primary-btn {
            width: 100%;
            justify-content: center;
        }

    .newsletter-panel .bo-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .newsletter-panel .bo-search {
        width: 100%;
    }
}