:root {
    --app-bg: #f4f7f8;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafb;
    --app-border: #e2e8ec;
    --app-border-strong: #d1dbe0;
    --app-text: #172331;
    --app-muted: #647481;
    --app-muted-2: #94a3ad;
    --app-primary: #0f766e;
    --app-primary-dark: #115e59;
    --app-primary-soft: #edf9f7;
    --app-success: #15803d;
    --app-success-soft: #ecfdf3;
    --app-danger: #b42318;
    --app-danger-soft: #fef3f2;
    --app-warning: #b45309;
    --app-warning-soft: #fffbeb;
    --app-dark: #172331;
    --app-sidebar: #0b1f33;
    --app-sidebar-soft: #122a43;
    --app-sidebar-text: #d5dde6;
    --app-sidebar-muted: #8493a5;
    --app-sidebar-width: 276px;
    --app-topbar-height: 72px;
    --app-radius: 16px;
    --app-radius-sm: 12px;
    --app-shadow: 0 12px 30px rgba(15, 30, 45, .055);
    --app-shadow-lg: 0 24px 60px rgba(8, 24, 38, .16);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--app-text);
    background: var(--app-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

a:hover { color: inherit; }

button, input, select, textarea { font: inherit; }

.app-body { overflow-x: hidden; }

.app-shell { min-height: 100vh; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--app-sidebar-width);
    display: flex;
    flex-direction: column;
    color: var(--app-sidebar-text);
    background:
        radial-gradient(circle at 15% 5%, rgba(20, 184, 166, .16), transparent 30%),
        var(--app-sidebar);
    border-right: 1px solid rgba(255,255,255,.05);
    transition: transform .25s ease;
}

.sidebar-brand {
    min-height: var(--app-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #168c82, #0f766e);
    border-radius: 13px;
    box-shadow: 0 10px 24px rgba(15,118,110,.26);
    font-size: 1.2rem;
    overflow: hidden;
}

/* Keep uploaded company logos inside the fixed sidebar brand mark. */
.brand-mark img,
.brand-mark .sidebar-brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 9px;
    background: #fff;
    padding: 3px;
}

.brand-copy,
.auth-brand > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-copy strong,
.auth-brand strong { font-size: .98rem; letter-spacing: -.015em; }

.brand-copy small,
.auth-brand small { margin-top: 5px; color: var(--app-sidebar-muted); font-size: .72rem; }

.sidebar-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 0;
    border-radius: 10px;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 22px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

.sidebar-label {
    padding: 0 11px 9px;
    color: var(--app-sidebar-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.sidebar-nav { display: grid; gap: 5px; }

.sidebar-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--app-sidebar-text);
    text-decoration: none;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 650;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.sidebar-link i { width: 20px; text-align: center; font-size: 1rem; }

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

.sidebar-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(20,184,166,.20), rgba(15,118,110,.08));
    box-shadow: inset 3px 0 0 #5eead4;
}

.sidebar-footer-card {
    margin: 0 14px 16px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
}

.sidebar-footer-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    color: #99f6e4;
    background: rgba(20,184,166,.10);
    border-radius: 10px;
}

.sidebar-footer-card strong,
.sidebar-footer-card small { display: block; }
.sidebar-footer-card strong { color: #edf9f7; font-size: .78rem; }
.sidebar-footer-card small { color: var(--app-sidebar-muted); margin-top: 2px; font-size: .68rem; }

.app-main {
    min-height: 100vh;
    margin-left: var(--app-sidebar-width);
    display: flex;
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: var(--app-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 26px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(12px);
}

.topbar-left,
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.topbar-menu-btn {
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    padding: 0;
    color: var(--app-text);
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    font-size: 1.35rem;
}

.topbar-title { display: flex; flex-direction: column; }
.topbar-title span { font-weight: 750; letter-spacing: -.02em; }
.topbar-title small { color: var(--app-muted); font-size: .74rem; margin-top: 2px; }

.profile-trigger {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px 5px 5px;
    border: 0;
    background: transparent;
    border-radius: 12px;
}

.profile-trigger:hover,
.profile-trigger:focus { background: var(--app-surface-soft); }
.profile-trigger::after { color: var(--app-muted); margin-left: 2px; }

.profile-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #173b55, #0b1f33);
    border-radius: 11px;
    font-size: .86rem;
    font-weight: 800;
}

.profile-copy { flex-direction: column; align-items: flex-start; line-height: 1.1; }
.profile-copy strong { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.profile-copy small { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-muted); font-size: .68rem; margin-top: 4px; }

.app-dropdown-menu {
    min-width: 220px;
    padding: 7px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: var(--app-shadow-lg);
}

.app-dropdown-menu .dropdown-item {
    padding: 9px 10px;
    border-radius: 9px;
    font-size: .84rem;
}

.app-content { flex: 1; padding: 28px 26px 34px; }
.app-container { max-width: 1560px; padding: 0; }

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 26px;
    color: var(--app-muted);
    border-top: 1px solid var(--app-border);
    background: var(--app-surface);
    font-size: .76rem;
}

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.11); }

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

.page-heading-actions { align-items: center; }
.page-heading h1 { margin: 2px 0 6px; font-size: clamp(1.55rem, 2.3vw, 2rem); font-weight: 800; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--app-muted); font-size: .9rem; }
.page-kicker { color: var(--app-primary); font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.page-card,
.toolbar-card,
.metric-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.page-card { overflow: hidden; }
.toolbar-card { padding: 18px; margin-bottom: 18px; }

.page-card-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--app-border);
}

.page-card-header h2 { margin: 1px 0 4px; font-size: 1.04rem; font-weight: 800; letter-spacing: -.02em; }
.page-card-header p { margin: 0; color: var(--app-muted); font-size: .78rem; }
.page-card-body { padding: 22px; }
.page-card-footer { min-height: 66px; display: flex; align-items: center; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--app-border); background: #fbfcfe; }

.header-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    border-radius: 13px;
    font-size: 1.1rem;
}

.metric-card { min-height: 132px; display: flex; align-items: center; gap: 16px; padding: 20px; }
.metric-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 15px; font-size: 1.25rem; }
.metric-copy { display: flex; flex-direction: column; min-width: 0; }
.metric-copy span { color: var(--app-muted); font-size: .75rem; font-weight: 700; }
.metric-copy strong { margin: 2px 0 0; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.04em; }
.metric-copy small { margin-top: 5px; color: var(--app-muted-2); font-size: .7rem; }

.quick-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    color: var(--app-text);
    text-decoration: none;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.quick-link-card:hover { transform: translateY(-2px); border-color: #bfd5d3; box-shadow: 0 12px 24px rgba(16,24,40,.07); }
.quick-link-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 12px; }
.quick-link-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.quick-link-card strong { font-size: .88rem; }
.quick-link-card small { margin-top: 3px; color: var(--app-muted); font-size: .74rem; }
.quick-link-card > i { color: var(--app-muted-2); }

.btn { border-radius: 10px; font-weight: 700; font-size: .84rem; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-dark); --bs-btn-hover-border-color: var(--app-primary-dark); --bs-btn-active-bg: var(--app-primary-dark); --bs-btn-active-border-color: var(--app-primary-dark); box-shadow: 0 6px 15px rgba(15,118,110,.16); }
.btn-dark { --bs-btn-bg: var(--app-dark); --bs-btn-border-color: var(--app-dark); }
.btn-light { --bs-btn-bg: #f8fafc; --bs-btn-border-color: var(--app-border); --bs-btn-color: var(--app-text); --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-border-color: var(--app-border-strong); }

.form-label { margin-bottom: 7px; color: #344054; font-size: .78rem; font-weight: 750; }
.form-control,
.form-select {
    min-height: 43px;
    color: var(--app-text);
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    font-size: .84rem;
    box-shadow: none;
}

textarea.form-control { min-height: auto; }
.form-control:focus,
.form-select:focus { border-color: #71b8b0; box-shadow: 0 0 0 3px rgba(15,118,110,.10); }
.form-control::placeholder { color: #98a2b3; }
.form-text { color: var(--app-muted); font-size: .7rem; }

.input-icon-group { position: relative; }
.input-icon-group > i { position: absolute; left: 14px; top: 50%; z-index: 2; transform: translateY(-50%); color: var(--app-muted-2); }
.input-icon-group .form-control { padding-left: 39px; }
.password-group .form-control { padding-right: 44px; }
.password-toggle { position: absolute; right: 6px; top: 50%; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; transform: translateY(-50%); color: var(--app-muted); background: transparent; border: 0; border-radius: 8px; }
.password-toggle:hover { color: var(--app-text); background: #f3f4f6; }

.app-switch { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; }
.app-switch .form-check-input { width: 42px; height: 22px; flex: 0 0 42px; margin: 1px 0 0; }
.app-switch .form-check-label { display: flex; flex-direction: column; }
.app-switch .form-check-label strong { font-size: .8rem; }
.app-switch .form-check-label small { margin-top: 2px; color: var(--app-muted); font-size: .69rem; }

.app-alert { display: flex; align-items: flex-start; gap: 10px; border: 0; border-radius: 13px; font-size: .8rem; box-shadow: var(--app-shadow); }
.app-alert > i { margin-top: 1px; }

.modern-table { --bs-table-bg: transparent; }
.modern-table thead th { padding: 13px 18px; color: #667085; background: #f8fafc; border-bottom: 1px solid var(--app-border); font-size: .68rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.modern-table tbody td { padding: 14px 18px; border-bottom: 1px solid #eef1f5; font-size: .8rem; vertical-align: middle; }
.modern-table tbody tr:last-child td { border-bottom: 0; }
.modern-table tbody tr:hover { background: #fbfcfe; }

.table-date { color: var(--app-muted); white-space: nowrap; }

.soft-badge { padding: 7px 9px; color: #344054; background: #f2f4f7; border: 1px solid #eaecf0; border-radius: 8px; font-size: .68rem; font-weight: 700; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.status-badge > span { width: 6px; height: 6px; border-radius: 50%; }
.status-active { color: #166534; background: #ecfdf3; }
.status-active > span { background: #22c55e; }
.status-inactive { color: #9f1239; background: #fff1f2; }
.status-inactive > span { background: #f43f5e; }
.status-system { color: #1d4ed8; background: #eff6ff; }
.status-system > span { background: #3b82f6; }

.action-menu-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; color: var(--app-muted); background: #fff; border: 1px solid var(--app-border); border-radius: 9px; }
.action-menu-btn:hover { color: var(--app-text); background: #f8fafc; }

.slug-code { padding: 5px 8px; color: #334155; background: #f1f5f9; border-radius: 7px; font-size: .7rem; }

.empty-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--app-muted); }
.empty-state > i { margin-bottom: 10px; color: #c2cad6; font-size: 2rem; }
.empty-state strong { color: var(--app-text); font-size: .9rem; }
.empty-state span { margin-top: 4px; font-size: .74rem; }

.app-pagination-wrap { width: 100%; display: flex; justify-content: flex-end; }
.app-pagination-wrap .pagination { margin: 0; gap: 5px; }
.app-pagination-wrap .page-item .page-link { min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 5px 10px; color: #475467; background: #fff; border: 1px solid var(--app-border); border-radius: 9px !important; font-size: .74rem; font-weight: 700; box-shadow: none; }
.app-pagination-wrap .page-item .page-link:hover { color: var(--app-primary); background: var(--app-primary-soft); border-color: #b9ded9; }
.app-pagination-wrap .page-item.active .page-link { color: #fff; background: var(--app-primary); border-color: var(--app-primary); box-shadow: 0 5px 12px rgba(15,118,110,.20); }
.app-pagination-wrap .page-item.disabled .page-link { color: #b5bdc9; background: #f8fafc; }



.form-actions-sticky { position: sticky; bottom: 14px; z-index: 1010; width: fit-content; margin: 20px 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 9px; background: rgba(255,255,255,.96); border: 1px solid var(--app-border); border-radius: 13px; box-shadow: 0 16px 34px rgba(16,24,40,.13); backdrop-filter: blur(12px); }

.app-confirm-modal .modal-content { border-radius: 20px; box-shadow: var(--app-shadow-lg); }
.confirm-icon { width: 62px; height: 62px; margin: 0 auto; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 19px; font-size: 1.4rem; }
.confirm-icon.is-delete { color: var(--app-danger); background: var(--app-danger-soft); }
.confirm-icon.is-cancel { color: var(--app-warning); background: var(--app-warning-soft); }
.confirm-icon.is-send { color: var(--app-primary); background: var(--app-primary-soft); }
.app-confirm-modal .modal-title { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.app-confirm-modal p { font-size: .78rem; line-height: 1.55; }
.app-confirm-modal .modal-footer { display: flex; flex-wrap: nowrap; }

.app-overlay { display: none; }

.auth-body {
    display: grid;
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 10%, rgba(20,184,166,.13), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(15,118,110,.10), transparent 30%),
        #f5f7fb;
}

.auth-shell { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 26px 16px; }
.auth-card { width: min(100%, 440px); padding: 34px; background: #fff; border: 1px solid var(--app-border); border-radius: 22px; box-shadow: 0 30px 80px rgba(16,24,40,.13); }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand small { color: var(--app-muted); }
.auth-heading { margin: 32px 0 24px; }
.auth-heading .eyebrow { color: var(--app-primary); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.auth-heading h1 { margin: 5px 0 7px; font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; }
.auth-heading p { margin: 0; color: var(--app-muted); font-size: .82rem; }
.auth-security-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 23px; padding-top: 18px; color: var(--app-muted); border-top: 1px solid var(--app-border); font-size: .7rem; }
.auth-security-note i { color: var(--app-success); }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: var(--app-shadow-lg); }
    .app-sidebar.is-open { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .topbar-menu-btn { display: grid; }
    .app-overlay { position: fixed; inset: 0; z-index: 1035; display: block; visibility: hidden; opacity: 0; background: rgba(15,23,42,.45); transition: .2s ease; }
    .app-overlay.is-visible { visibility: visible; opacity: 1; }
    body.sidebar-open { overflow: hidden; }
}

@media (max-width: 767.98px) {
    .app-topbar { padding-inline: 16px; }
    .app-content { padding: 22px 16px 28px; }
    .app-footer { padding-inline: 16px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .page-heading-actions > .btn { width: 100%; }
    .page-card-header { padding: 16px; }
    .page-card-body { padding: 16px; }
    .modern-table thead th,
    .modern-table tbody td { padding-inline: 14px; }
    .form-actions-sticky { width: 100%; bottom: 8px; }
    .form-actions-sticky .btn { flex: 1; }
}

@media (max-width: 479.98px) {
    .auth-card { padding: 26px 20px; border-radius: 18px; }
    .app-confirm-modal .modal-dialog { margin: 14px; }
}

/* ================================================================
   Global navigation, forms and AJAX index standard
   ================================================================ */
.sidebar-nav { gap: 4px; }
.sidebar-dropdown-toggle { width: 100%; border: 0; background: transparent; text-align: left; }
.sidebar-dropdown-toggle .sidebar-chevron { margin-left: auto; width: auto; font-size: .72rem; transition: transform .2s ease; }
.sidebar-dropdown-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
.sidebar-submenu-wrap { margin: 1px 0 5px 20px; }
.sidebar-submenu { position: relative; display: grid; gap: 2px; padding: 4px 0 5px 18px; }
.sidebar-submenu::before { content: ''; position: absolute; left: 1px; top: 3px; bottom: 5px; width: 1px; background: rgba(255,255,255,.10); }
.sidebar-sublink { position: relative; display: flex; align-items: center; min-height: 34px; padding: 7px 10px; border-radius: 9px; color: #aab7ca; text-decoration: none; font-size: .78rem; font-weight: 600; transition: .2s ease; }
.sidebar-sublink::before { content: ''; position: absolute; left: -20px; width: 8px; height: 8px; border-radius: 50%; background: #4a5a70; border: 2px solid var(--app-sidebar); }
.sidebar-sublink:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar-sublink.active { color: #fff; background: rgba(20,184,166,.12); }
.sidebar-sublink.active::before { background: #5eead4; }
.sidebar-badge { margin-left: auto; padding: 3px 7px; border-radius: 20px; background: rgba(94,234,212,.12); color: #99f6e4; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.topbar-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; color: var(--app-text); text-decoration: none; background: var(--app-surface-soft); border: 1px solid var(--app-border); border-radius: 12px; font-size: 1rem; transition: .2s ease; }
.topbar-icon-btn:hover { color: var(--app-primary); background: var(--app-primary-soft); border-color: #b9ded9; }
.profile-avatar-image { overflow: hidden; padding: 0; }
.profile-avatar-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.form-master-card { overflow: visible; }
.form-master-card > .page-card-body { padding: 0 24px; }
.form-section { padding: 26px 0; }
.form-section-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.form-section-heading h3 { margin: 1px 0 4px; font-size: 1rem; font-weight: 800; letter-spacing: -.015em; }
.form-section-heading p { margin: 0; color: var(--app-muted); font-size: .78rem; }
.form-section-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 11px; }
.form-section-divider { height: 1px; background: var(--app-border); }
.form-card-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; background: #fbfcfe; border-top: 1px solid var(--app-border); border-radius: 0 0 16px 16px; }
.avatar-uploader { padding: 16px; border: 1px dashed #cfd7e5; border-radius: 14px; background: #fbfcfe; text-align: center; }
.avatar-preview { width: 112px; height: 112px; margin: 0 auto 14px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg,#e7f6f4,#f1f8f7); color: var(--app-primary); font-size: 2rem; font-weight: 800; border: 1px solid #c8e3df; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-uploader small { display: block; margin-top: 8px; color: var(--app-muted); font-size: .7rem; }

.index-workspace { position: relative; }
.index-workspace::after { content: ''; position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; background: rgba(248,250,252,.58); backdrop-filter: blur(1px); border-radius: 16px; transition: opacity .15s ease; }
.index-workspace.is-loading::after { opacity: 1; pointer-events: auto; }
.index-workspace.is-loading::before { content: ''; position: absolute; z-index: 21; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid #d7eeeb; border-top-color: var(--app-primary); border-radius: 50%; animation: appSpin .65s linear infinite; }
@keyframes appSpin { to { transform: rotate(360deg); } }
.index-toolbar { display: grid; gap: 16px; }
.index-filter-form { display: grid; grid-template-columns: minmax(260px,2fr) minmax(150px,1fr) minmax(145px,.8fr) 100px auto; gap: 12px; align-items: end; }
.index-search { min-width: 0; }
.index-filter-actions { display: flex; gap: 8px; }
.index-export-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--app-border); }
.index-export-label { color: var(--app-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.index-export-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.index-export-actions .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 10px; font-size: .74rem; font-weight: 750; }
.btn-soft-danger { color: #b42318; background: #fef3f2; border-color: #fecdca; }
.btn-soft-danger:hover { color: #912018; background: #fee4e2; border-color: #fda29b; }
.btn-soft-success { color: #067647; background: #ecfdf3; border-color: #abefc6; }
.btn-soft-success:hover { color: #05603a; background: #dcfae6; border-color: #75e0a7; }
.btn-soft-dark { color: #344054; background: #f2f4f7; border-color: #e4e7ec; }
.btn-soft-dark:hover { color: #182230; background: #e4e7ec; }
.btn-soft-whatsapp { color: #067647; background: #ecfdf3; border-color: #abefc6; }
.btn-soft-whatsapp:hover { color: #045d3b; background: #d8fbe7; border-color: #75e0a7; }

.bulk-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 12px 14px; color: #344054; background: #edf9f7; border: 1px solid #b9ded9; border-radius: 12px; }
.bulk-action-bar[hidden] { display: none !important; }
.bulk-action-bar strong, .bulk-action-bar small { display: block; }
.bulk-action-bar strong { font-size: .8rem; }
.bulk-action-bar small { margin-top: 2px; color: #667085; font-size: .68rem; }
.table-check { width: 44px; text-align: center; }
.modern-table .table-check .form-check-input { margin: 0; width: 17px; height: 17px; cursor: pointer; }
.empty-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--app-muted); text-align: center; }
.empty-state i { width: 46px; height: 46px; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 14px; font-size: 1.2rem; margin-bottom: 4px; }
.empty-state strong { color: var(--app-text); font-size: .88rem; }
.empty-state span { font-size: .74rem; }

@media (max-width: 1199.98px) {
    .index-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .index-search { grid-column: span 2; }
    .index-filter-actions { align-self: end; }
}
@media (max-width: 767.98px) {
    .form-master-card > .page-card-body { padding: 0 16px; }
    .form-card-actions { padding: 14px 16px; }
    .index-filter-form { grid-template-columns: 1fr; }
    .index-search { grid-column: auto; }
    .index-export-bar { align-items: flex-start; flex-direction: column; }
    .index-export-actions { width: 100%; }
    .index-export-actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
    .bulk-action-bar { align-items: flex-start; flex-direction: column; }
}

.app-pagination-wrap .pagination li { list-style: none; }
.app-pagination-wrap .pagination li > a, .app-pagination-wrap .pagination li > span { min-width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; padding:5px 10px; color:#475467; background:#fff; border:1px solid var(--app-border); border-radius:9px; font-size:.74rem; font-weight:700; text-decoration:none; }
.app-pagination-wrap .pagination li > a:hover { color:var(--app-primary); background:var(--app-primary-soft); border-color:#b9ded9; }
.app-pagination-wrap .pagination li.active > a, .app-pagination-wrap .pagination li.active > span { color:#fff; background:var(--app-primary); border-color:var(--app-primary); box-shadow:0 5px 12px rgba(15,118,110,.20); }
.app-pagination-wrap .pagination li.disabled > a, .app-pagination-wrap .pagination li.disabled > span { color:#b5bdc9; background:#f8fafc; pointer-events:none; }



/* Professional responsive refinements */
@media (max-width: 991.98px) {
    .app-topbar { min-height: 66px; }
    .app-content { padding-top: 24px; }
}

@media (max-width: 767.98px) {
    .page-heading { margin-bottom: 19px; }
    .page-heading h1 { font-size: clamp(1.38rem, 7vw, 1.72rem); }
    .page-heading p { font-size: .82rem; line-height: 1.5; }
    .toolbar-card { padding: 14px; }
    .page-card, .toolbar-card, .metric-card { border-radius: 14px; }
    .form-card-actions { flex-wrap: wrap; }
    .form-card-actions > .btn, .form-card-actions > a.btn { min-height: 42px; }
    .app-pagination-wrap { justify-content: center; overflow-x: auto; padding-bottom: 2px; }
}

@media (max-width: 575.98px) {
    :root { --app-topbar-height: 64px; }
    .app-topbar { gap: 10px; padding-inline: 12px; }
    .topbar-actions { gap: 7px; }
    .topbar-title small, .profile-copy { display: none; }
    .profile-trigger { padding-right: 5px; }
    .app-content { padding: 18px 12px 24px; }
    .app-footer { align-items: flex-start; flex-direction: column; gap: 7px; padding: 15px 12px; }
    .page-heading-actions > .btn, .page-heading-actions > a.btn { width: 100%; }
    .index-filter-actions { display: grid; grid-template-columns: 1fr 44px; width: 100%; }
    .index-filter-actions .btn { min-height: 42px; }
    .index-export-actions .btn { flex: 1 1 100%; }
    .modern-table thead th, .modern-table tbody td { padding: 12px; }
    .bulk-action-bar .btn { width: 100%; }
    .form-card-actions { flex-direction: column-reverse; }
    .form-card-actions > .btn, .form-card-actions > a.btn { width: 100%; }
}

/* Company identity shared across the system */
.sidebar-brand-logo{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:9px;background:#fff;padding:3px;box-shadow:none}
.sidebar-brand-logo-fallback{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#173b55,#0f766e);color:#fff;font-size:1.05rem;box-shadow:0 4px 14px rgba(15,23,42,.14)}

/* =========================================================
   Live notifications, PWA controls, page loader & login hello
   ========================================================= */
.app-page-loader {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(246, 249, 252, .96);
    backdrop-filter: blur(10px);
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility .28s ease;
}
.app-page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-page-loader-card {
    width: min(330px, 88vw);
    padding: 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
}
.app-page-loader-logo {
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, var(--app-primary), #0b5c56);
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(15,118,110,.20);
    font-size: 1.75rem;
    font-weight: 850;
}
.app-page-loader-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; }
.app-page-loader-copy { display: flex; flex-direction: column; }
.app-page-loader-copy strong { color: var(--app-text); font-size: .96rem; }
.app-page-loader-copy small { margin-top: 4px; color: var(--app-muted); font-size: .75rem; }
.app-page-loader-line {
    position: relative;
    height: 4px;
    margin-top: 18px;
    display: block;
    overflow: hidden;
    background: #edf2f7;
    border-radius: 99px;
}
.app-page-loader-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -42%;
    width: 42%;
    height: 100%;
    background: var(--app-primary);
    border-radius: inherit;
    animation: appLoaderSweep 1.05s ease-in-out infinite;
}
@keyframes appLoaderSweep { 0% { left: -42%; } 55% { left: 58%; } 100% { left: 100%; } }

.notification-trigger { position: relative; border: 1px solid var(--app-border); padding: 0; }
.notification-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: #dc2626;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
}
.notification-menu {
    width: min(390px, calc(100vw - 24px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 17px;
    box-shadow: var(--app-shadow-lg);
}
.notification-menu-head {
    min-height: 68px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--app-border);
    background: #fff;
}
.notification-menu-head > div { display: flex; flex-direction: column; min-width: 0; }
.notification-menu-head strong { font-size: .9rem; }
.notification-menu-head small { margin-top: 3px; color: var(--app-muted); font-size: .7rem; }
.notification-menu-head .btn-link { padding: 5px; font-size: .7rem; font-weight: 750; }
.notification-menu-list { max-height: 380px; overflow-y: auto; background: #fff; }
.notification-menu-item {
    display: flex;
    gap: 11px;
    padding: 12px 14px;
    color: var(--app-text);
    text-decoration: none;
    border-bottom: 1px solid #eef2f6;
    transition: background .18s ease;
}
.notification-menu-item:hover { color: var(--app-text); background: #f8fbfb; }
.notification-menu-item.is-unread { background: #f2fbf9; }
.notification-item-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    border-radius: 10px;
}
.notification-item-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.notification-item-copy strong { font-size: .78rem; line-height: 1.25; }
.notification-item-copy span { margin-top: 3px; color: #667085; font-size: .7rem; line-height: 1.42; }
.notification-item-copy small { margin-top: 5px; color: #98a2b3; font-size: .64rem; }
.notification-unread-dot { width: 7px; height: 7px; margin-top: 6px; flex: 0 0 7px; background: var(--app-primary); border-radius: 50%; }
.notification-menu-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--app-muted); font-size: .76rem; }
.notification-menu-empty i { font-size: 1.45rem; color: #aab4c0; }
.notification-menu-footer { padding: 10px 14px; text-align: center; background: #fbfcfe; border-top: 1px solid var(--app-border); }
.notification-menu-footer a { color: var(--app-primary); text-decoration: none; font-size: .74rem; font-weight: 750; }

.profile-menu { min-width: 250px; padding: 0; overflow: hidden; }
.profile-menu-head { padding: 14px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--app-border); background: #fbfcfe; }
.profile-menu-head > div { min-width: 0; display: flex; flex-direction: column; }
.profile-menu-head strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.profile-menu-head small { margin-top: 3px; color: var(--app-muted); font-size: .68rem; }
.profile-menu .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; }
.profile-menu .dropdown-item i { width: 18px; color: #667085; text-align: center; }
.profile-menu .dropdown-item:hover { background: var(--app-surface-soft); }
.profile-menu .dropdown-item.text-danger i { color: inherit; }

.notification-center-list { display: grid; }
.notification-center-item { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; color: var(--app-text); text-decoration: none; border-bottom: 1px solid var(--app-border); }
.notification-center-item:last-child { border-bottom: 0; }
.notification-center-item:hover { color: var(--app-text); background: #fbfcfe; }
.notification-center-item.is-unread { background: #f5fbfa; }
.notification-center-item .notification-item-icon { width: 42px; height: 42px; flex-basis: 42px; }
.notification-center-item .notification-item-copy strong { font-size: .84rem; }
.notification-center-item .notification-item-copy span { font-size: .77rem; }

.login-welcome-modal .modal-dialog { max-width: 560px; }
.login-welcome-modal .modal-content { overflow: hidden; border-radius: 22px; box-shadow: 0 30px 90px rgba(15, 23, 42, .18); }
.login-welcome-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 24px;
    color: #fff;
    background: linear-gradient(135deg, #0b1f33 0%, #123b50 62%, #0f766e 100%);
}
.login-welcome-hero .btn-close { position: absolute; top: 16px; right: 16px; filter: invert(1); opacity: .8; }
.login-welcome-avatar { width: 70px; height: 70px; flex: 0 0 70px; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.15); border: 3px solid rgba(255,255,255,.18); border-radius: 20px; font-size: 1.45rem; font-weight: 850; }
.login-welcome-avatar img { width: 100%; height: 100%; object-fit: cover; }
.login-welcome-kicker { color: #99f6e4; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.login-welcome-hero h2 { margin: 3px 0 4px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; }
.login-welcome-hero p { margin: 0; color: #dbe7ee; font-size: .75rem; }
.login-welcome-separator { margin: 0 6px; opacity: .55; }
.login-welcome-summary { padding: 17px 20px; background: #f8fafc; border-bottom: 1px solid var(--app-border); }
.login-welcome-summary > div { display: flex; align-items: center; gap: 11px; }
.login-welcome-summary-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 11px; }
.login-welcome-summary strong, .login-welcome-summary small { display: block; }
.login-welcome-summary strong { font-size: .8rem; }
.login-welcome-summary small { margin-top: 3px; color: var(--app-muted); font-size: .69rem; }
.login-welcome-list { padding: 5px 20px 8px; }
.login-welcome-item { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef2f6; }
.login-welcome-item:last-child { border-bottom: 0; }
.login-welcome-item > span { width: 7px; height: 7px; margin-top: 6px; background: var(--app-primary); border-radius: 50%; }
.login-welcome-item strong { font-size: .77rem; }
.login-welcome-item p { margin: 2px 0 0; color: var(--app-muted); font-size: .7rem; line-height: 1.4; }
.login-welcome-empty { min-height: 115px; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.login-welcome-empty i { color: #16a34a; font-size: 1.55rem; }
.login-welcome-empty strong, .login-welcome-empty span { display: block; }
.login-welcome-empty strong { font-size: .82rem; }
.login-welcome-empty span { margin-top: 2px; color: var(--app-muted); font-size: .72rem; }

.app-toast-stack { position: fixed; z-index: 4900; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 40px)); display: grid; gap: 10px; }
.app-live-toast { display: flex; align-items: flex-start; gap: 11px; padding: 13px; background: #fff; border: 1px solid var(--app-border); border-radius: 14px; box-shadow: var(--app-shadow-lg); animation: appToastIn .2s ease both; }
.app-live-toast i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; color: var(--app-primary); background: var(--app-primary-soft); border-radius: 10px; }
.app-live-toast div { min-width: 0; flex: 1; }
.app-live-toast strong { display: block; font-size: .78rem; }
.app-live-toast span { display: block; margin-top: 2px; color: var(--app-muted); font-size: .7rem; line-height: 1.35; }
@keyframes appToastIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 575.98px) {
    .notification-menu { position: fixed !important; inset: 70px 12px auto 12px !important; transform: none !important; width: auto; }
    .login-welcome-hero { padding: 22px 18px; align-items: flex-start; }
    .login-welcome-avatar { width: 58px; height: 58px; flex-basis: 58px; border-radius: 16px; }
}

/* Modern business login */
.auth-business-body{min-height:100vh;background:#eef2f6;color:var(--app-text)}
.auth-business-shell{width:min(1180px,calc(100% - 32px));min-height:min(720px,calc(100vh - 48px));margin:24px auto;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(410px,.94fr);overflow:hidden;background:#fff;border:1px solid #dfe5ec;border-radius:28px;box-shadow:0 28px 80px rgba(15,23,42,.14)}
.auth-business-brand-panel{position:relative;display:flex;flex-direction:column;padding:48px;background:linear-gradient(145deg,#102b40 0%,#173f5f 52%,#245a82 100%);color:#fff;overflow:hidden}
.auth-business-brand-panel:before,.auth-business-brand-panel:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.055);pointer-events:none}.auth-business-brand-panel:before{width:430px;height:430px;right:-210px;top:-170px}.auth-business-brand-panel:after{width:280px;height:280px;left:-130px;bottom:-150px}
.auth-business-brand,.auth-mobile-brand{position:relative;z-index:1;display:flex;align-items:center;gap:14px}.auth-business-logo{width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;overflow:hidden;border-radius:16px;background:#fff;color:#173f5f;font-size:1.2rem;font-weight:900;box-shadow:0 10px 28px rgba(5,22,36,.18)}.auth-business-logo img{width:100%;height:100%;object-fit:contain;padding:6px}.auth-business-brand strong,.auth-mobile-brand strong{display:block;font-size:1.02rem;font-weight:800}.auth-business-brand small,.auth-mobile-brand small{display:block;margin-top:2px;font-size:.72rem;color:rgba(255,255,255,.67)}
.auth-business-message{position:relative;z-index:1;max-width:560px;margin:auto 0}.auth-business-kicker{display:inline-flex;align-items:center;color:#f0b94a;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.auth-business-message h1{max-width:540px;margin:14px 0 16px;font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08;letter-spacing:-.055em;font-weight:850}.auth-business-message p{max-width:510px;margin:0;color:rgba(255,255,255,.72);font-size:.92rem;line-height:1.8}
.auth-business-points{position:relative;z-index:1;display:grid;gap:12px;margin-top:34px}.auth-business-points>div{display:flex;align-items:center;gap:13px;padding:13px 14px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(5px)}.auth-business-points i{width:35px;height:35px;display:grid;place-items:center;flex:0 0 35px;border-radius:10px;background:rgba(255,255,255,.11);color:#f0c468}.auth-business-points strong{display:block;font-size:.8rem}.auth-business-points small{display:block;margin-top:2px;color:rgba(255,255,255,.62);font-size:.68rem;line-height:1.45}.auth-business-footer{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-top:36px;color:rgba(255,255,255,.5);font-size:.66rem}
.auth-business-form-panel{display:grid;place-items:center;padding:48px;background:#fff}.auth-business-form-wrap{width:min(100%,420px)}.auth-mobile-brand{display:none;margin-bottom:30px}.auth-mobile-brand small{color:var(--app-muted)}.auth-business-heading{margin-bottom:28px}.auth-business-heading h2{margin:8px 0 8px;font-size:1.8rem;font-weight:850;letter-spacing:-.045em}.auth-business-heading p{margin:0;color:var(--app-muted);font-size:.8rem}.auth-business-form{display:grid;gap:18px}.auth-field .form-label{margin-bottom:7px;color:#334155;font-size:.74rem;font-weight:800}.auth-input-group .form-control{height:50px;padding-left:44px;border-radius:12px;border-color:#d7dee7;background:#fbfcfd;font-size:.82rem}.auth-input-group>i{left:15px}.auth-input-group .form-control:focus{background:#fff;border-color:#7aa5c5;box-shadow:0 0 0 4px rgba(36,90,130,.09)}.auth-signin-btn{height:50px;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:12px;font-size:.82rem;font-weight:800}.auth-business-security{display:flex;align-items:flex-start;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid #edf0f4;color:var(--app-muted);font-size:.68rem;line-height:1.5}.auth-business-security i{color:var(--app-success);font-size:.88rem}

/* Business dashboard */
.dashboard-module{display:grid;gap:18px}.dashboard-welcome{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:190px;padding:30px 34px;overflow:hidden;border:1px solid #d7e1e9;border-radius:22px;background:linear-gradient(125deg,#f7fafc 0%,#fff 54%,#eef6fb 100%);box-shadow:0 16px 40px rgba(15,23,42,.055)}.dashboard-welcome:after{content:"";position:absolute;width:260px;height:260px;right:-110px;top:-130px;border-radius:999px;background:rgba(36,90,130,.07)}.dashboard-welcome-copy{position:relative;z-index:1}.dashboard-eyebrow,.dashboard-panel-kicker{display:inline-flex;align-items:center;gap:6px;color:#245a82;font-size:.63rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.dashboard-welcome h1{margin:7px 0 6px;font-size:clamp(1.65rem,3vw,2.35rem);font-weight:850;letter-spacing:-.05em}.dashboard-welcome p{margin:0;color:#697789;font-size:.8rem}.dashboard-welcome-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}.dashboard-welcome-meta span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #dde6ed;border-radius:999px;background:#fff;color:#526274;font-size:.66rem;font-weight:700}.dashboard-welcome-meta i{color:#245a82}.dashboard-user-card{position:relative;z-index:1;display:flex;align-items:center;gap:13px;min-width:225px;padding:13px 16px;border:1px solid rgba(36,90,130,.14);border-radius:17px;background:rgba(255,255,255,.84);box-shadow:0 10px 26px rgba(15,23,42,.06)}.dashboard-user-avatar{width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;overflow:hidden;border-radius:15px;background:#173f5f;color:#fff;font-weight:900}.dashboard-user-avatar img{width:100%;height:100%;object-fit:cover}.dashboard-user-card strong{display:block;font-size:.8rem}.dashboard-user-card small{display:block;margin-top:3px;color:#7c8997;font-size:.65rem}
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.dashboard-kpi-card{position:relative;min-width:0;padding:18px;border:1px solid #e0e6ec;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.045);overflow:hidden}.dashboard-kpi-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kpi-accent,#245a82)}.dashboard-kpi-top{display:flex;align-items:center;gap:9px}.dashboard-kpi-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:color-mix(in srgb,var(--kpi-accent,#245a82) 11%,white);color:var(--kpi-accent,#245a82)}.dashboard-kpi-label{color:#647386;font-size:.68rem;font-weight:800}.dashboard-kpi-card>strong{display:block;margin:14px 0 4px;color:#172033;font-size:1.18rem;font-weight:850;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-kpi-card>strong small{margin-right:4px;color:#8692a1;font-size:.55rem;font-weight:800}.dashboard-kpi-card p{margin:0;color:#8a96a5;font-size:.63rem}.dashboard-kpi-income{--kpi-accent:#21835f}.dashboard-kpi-expense{--kpi-accent:#c94e59}.dashboard-kpi-purchase{--kpi-accent:#d59b19}.dashboard-kpi-profit{--kpi-accent:#245a82}.dashboard-kpi-profit.is-negative{--kpi-accent:#b9404c}
.dashboard-business-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:16px}.dashboard-panel{min-width:0;padding:20px;border:1px solid #e0e6ec;border-radius:19px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.04)}.dashboard-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:17px}.dashboard-panel-head h2{margin:4px 0 3px;font-size:1rem;font-weight:850;letter-spacing:-.025em}.dashboard-panel-head p{margin:0;color:#8793a2;font-size:.65rem}.dashboard-panel-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:11px;background:#eef5fa;color:#245a82}.dashboard-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:18px}.dashboard-mini-grid>div{padding:12px;border:1px solid #e7ebf0;border-radius:12px;background:#fafbfd}.dashboard-mini-grid span{display:block;color:#8793a2;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em}.dashboard-mini-grid strong{display:block;margin-top:6px;color:#223044;font-size:.83rem;font-weight:850}.dashboard-mini-grid strong small{font-size:.52rem;color:#8d99a7}.dashboard-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 9px;color:#657487;font-size:.63rem;font-weight:800}.dashboard-list-head a{color:#245a82;text-decoration:none;font-size:.62rem}.dashboard-list-head a:hover{text-decoration:underline}.dashboard-customer-list,.dashboard-top-list{display:grid;gap:1px}.dashboard-customer-row,.dashboard-top-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-top:1px solid #eef1f4}.dashboard-customer-avatar{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:#eef4f8;color:#245a82;font-size:.7rem;font-weight:900}.dashboard-customer-copy{min-width:0;flex:1}.dashboard-customer-copy strong{display:block;overflow:hidden;color:#2b3748;font-size:.69rem;text-overflow:ellipsis;white-space:nowrap}.dashboard-customer-copy small{display:block;margin-top:2px;overflow:hidden;color:#929daa;font-size:.58rem;text-overflow:ellipsis;white-space:nowrap}.dashboard-customer-value{text-align:right}.dashboard-customer-value small{display:block;color:#9aa4b0;font-size:.53rem}.dashboard-customer-value strong{display:block;margin-top:2px;color:#293749;font-size:.64rem}.dashboard-rank{width:24px;flex:0 0 24px;color:#a1aab6;font-size:.59rem;font-weight:900}.dashboard-empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:90px;color:#8b97a5;font-size:.68rem}.dashboard-empty i{color:#21835f;font-size:1rem}
.dashboard-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.dashboard-chart-card{min-width:0}.dashboard-trend-card{grid-column:1/-1}.dashboard-chart-card .report-chart-head{margin-bottom:14px}.dashboard-chart-card .report-chart-body{min-height:220px}.dashboard-trend-card .report-chart-body{min-height:230px}
@media(max-width:1199.98px){.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-business-grid{grid-template-columns:1fr}.dashboard-top-panel{min-height:0}}
@media(max-width:991.98px){.auth-business-shell{grid-template-columns:1fr;width:min(680px,calc(100% - 28px));min-height:0;margin:14px auto}.auth-business-brand-panel{display:none}.auth-business-form-panel{padding:42px 34px}.auth-mobile-brand{display:flex}.dashboard-welcome{align-items:flex-start}.dashboard-user-card{min-width:190px}.dashboard-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.dashboard-welcome{display:block;padding:22px}.dashboard-user-card{margin-top:18px;width:100%}.dashboard-kpi-grid,.dashboard-chart-grid{grid-template-columns:1fr}.dashboard-trend-card{grid-column:auto}.dashboard-mini-grid{grid-template-columns:1fr 1fr}.dashboard-customer-value strong{font-size:.6rem}}
@media(max-width:575.98px){.auth-business-shell{width:100%;margin:0;min-height:100vh;border:0;border-radius:0}.auth-business-form-panel{padding:28px 20px}.auth-business-heading h2{font-size:1.55rem}.dashboard-mini-grid{grid-template-columns:1fr}.dashboard-customer-row,.dashboard-top-row{align-items:flex-start}.dashboard-customer-value{max-width:110px}.dashboard-welcome-meta{gap:6px}.dashboard-welcome-meta span{padding:6px 8px;font-size:.6rem}}

/* Modern topbar refresh — presentation only. */
.topbar-modern{min-height:70px;padding:9px 24px;gap:18px;background:rgba(255,255,255,.94);border-bottom-color:#e8edf3;box-shadow:0 1px 0 rgba(15,23,42,.02);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.topbar-modern .topbar-left,.topbar-modern .topbar-actions{gap:10px}.topbar-modern .topbar-title{min-width:0;justify-content:center;line-height:1.15}.topbar-modern .topbar-title>span{color:#172033;font-size:.88rem;font-weight:800;letter-spacing:-.018em}.topbar-modern .topbar-title>small{display:inline-flex;align-items:center;gap:6px;margin-top:5px;color:#8a94a4;font-size:.67rem;font-weight:650}.topbar-modern .topbar-title>small i{color:#98a2b3;font-size:.68rem}
.topbar-control-btn,.topbar-modern .topbar-icon-btn,.topbar-modern .topbar-menu-btn{width:41px;height:41px;min-width:41px;display:grid;place-items:center;padding:0;color:#344054;background:#fff;border:1px solid #e4e9f0;border-radius:13px;box-shadow:0 2px 7px rgba(15,23,42,.035);font-size:1.05rem;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.topbar-modern .topbar-menu-btn{font-size:1.3rem}.topbar-control-btn:hover,.topbar-control-btn:focus-visible,.topbar-modern .topbar-icon-btn:hover,.topbar-modern .topbar-menu-btn:hover{color:var(--app-primary);background:#f6fbfa;border-color:#bfe3de;box-shadow:0 7px 18px rgba(15,118,110,.08);transform:translateY(-1px);outline:0}.topbar-modern .notification-trigger{position:relative}.topbar-modern .notification-badge{top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-width:2px;font-size:.57rem;box-shadow:0 2px 7px rgba(220,38,38,.18)}
.topbar-modern .profile-trigger{position:relative;gap:10px;min-height:48px;padding:4px 7px 4px 5px;color:#172033;background:#fff;border:1px solid transparent;border-radius:15px;box-shadow:none;text-align:left;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}.topbar-modern .profile-trigger::after{display:none}.topbar-modern .profile-trigger:hover,.topbar-modern .profile-trigger:focus,.topbar-modern .profile-trigger[aria-expanded=true]{background:#f8fafc;border-color:#e4e9f0;box-shadow:0 5px 16px rgba(15,23,42,.045);outline:0}
.profile-avatar-shell{position:relative;width:41px;height:41px;flex:0 0 41px;display:inline-grid;place-items:center}.topbar-modern .profile-avatar{width:41px;height:41px;flex:0 0 41px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#1b4b67,#0b263b);border:2px solid #fff;box-shadow:0 0 0 1px #dce3eb,0 5px 13px rgba(15,23,42,.09);font-size:.84rem;font-weight:850;letter-spacing:.01em}.topbar-modern .profile-avatar-image{overflow:hidden;padding:0}.topbar-modern .profile-avatar-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.profile-presence-dot{position:absolute;right:-1px;bottom:1px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#12b76a;box-shadow:0 1px 4px rgba(18,183,106,.28)}
.topbar-modern .profile-copy{min-width:0;max-width:170px;gap:3px;line-height:1.15}.topbar-modern .profile-copy strong{max-width:170px;color:#202939;font-size:.78rem;font-weight:800;letter-spacing:-.012em}.topbar-modern .profile-copy small{max-width:170px;margin:0;color:#8993a3;font-size:.64rem;font-weight:650}.profile-chevron{width:24px;height:24px;display:grid;place-items:center;color:#98a2b3;border-radius:8px;font-size:.68rem;transition:transform .18s ease,background .18s ease}.profile-trigger[aria-expanded=true] .profile-chevron{background:#eef3f6;transform:rotate(180deg)}.topbar-dropdown-kicker{color:var(--app-primary);font-size:.56rem;font-weight:850;text-transform:uppercase;letter-spacing:.09em}
.topbar-modern .notification-menu{margin-top:9px!important;border-radius:18px;box-shadow:0 20px 50px rgba(15,23,42,.13)}.topbar-modern .notification-menu-head{min-height:78px;padding:14px 16px;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}.topbar-modern .notification-menu-head strong{margin-top:2px;font-size:.9rem;font-weight:800}
.topbar-modern .profile-menu{width:290px;min-width:290px;margin-top:9px!important;padding:0;overflow:hidden;border:1px solid #e3e8ef;border-radius:18px;background:#fff;box-shadow:0 20px 50px rgba(15,23,42,.14)}.topbar-modern .profile-menu-head{padding:17px;gap:13px;background:linear-gradient(145deg,#f8fbfb 0%,#fff 75%);border-bottom:1px solid #edf0f4}.profile-avatar-shell-lg,.profile-avatar-shell-lg .profile-avatar{width:48px;height:48px;flex-basis:48px}.profile-avatar-shell-lg .profile-presence-dot{width:11px;height:11px;right:0;bottom:1px}.profile-menu-identity{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start}.topbar-modern .profile-menu-identity strong{max-width:190px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#172033;font-size:.86rem;font-weight:850}.topbar-modern .profile-menu-identity small{max-width:190px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7f8a9a;font-size:.67rem;font-weight:650}
.profile-menu-body{display:grid;gap:3px;padding:8px}.topbar-modern .profile-menu .dropdown-item{min-height:44px;display:flex;align-items:center;gap:10px;padding:8px 9px;color:#344054;background:transparent;border:0;border-radius:11px;font-size:.76rem;font-weight:700;transition:background .15s ease,color .15s ease}.topbar-modern .profile-menu .dropdown-item:hover,.topbar-modern .profile-menu .dropdown-item:focus{color:#163f4d;background:#f4f9f8}.profile-menu-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;color:#526173;background:#f2f5f7;border-radius:9px;font-size:.86rem}.topbar-modern .profile-menu .dropdown-item:hover .profile-menu-icon{color:var(--app-primary);background:var(--app-primary-soft)}.profile-menu-arrow{margin-left:auto;color:#a4acb8;font-size:.66rem}.profile-menu-footer{padding:8px;border-top:1px solid #edf0f4;background:#fbfcfd}.profile-menu-footer form{margin:0}.topbar-modern .profile-menu .profile-signout{color:#b42318}.topbar-modern .profile-menu .profile-signout .profile-menu-icon{color:#b42318;background:#fff1f0}.topbar-modern .profile-menu .profile-signout:hover{color:#912018;background:#fff5f4}
@media(max-width:767.98px){.topbar-modern{min-height:64px;padding:8px 12px}.topbar-modern .topbar-actions{gap:7px}.topbar-modern .topbar-control-btn,.topbar-modern .topbar-icon-btn,.topbar-modern .topbar-menu-btn{width:39px;height:39px;min-width:39px;border-radius:12px}.topbar-modern .profile-trigger{min-height:43px;padding:2px 3px;border-color:transparent;background:transparent;box-shadow:none}.topbar-modern .profile-avatar-shell,.topbar-modern .profile-avatar{width:39px;height:39px;flex-basis:39px}.topbar-modern .profile-chevron{display:none}.topbar-modern .profile-menu{width:min(290px,calc(100vw - 24px));min-width:0}}