:root {
    --blue:#2563eb;
    --blue-dark:#1d4ed8;
    --navy:#101828;
    --text:#344054;
    --muted:#667085;
    --light:#98a2b3;
    --border:#e4e7ec;
    --bg:#f5f7fb;
    --white:#fff;
    --green:#12b76a;
    --orange:#f79009;
    --red:#f04438;
    --purple:#7a5af8;
    --shadow:0 8px 28px rgba(16,24,40,.055)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:14px;
    line-height:1.5
}
button,input,select {
    font:inherit
}
.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:252px;
    z-index:1050;
    padding:22px 14px;
    display:flex;
    flex-direction:column;
    background:#0f172a;
    color:#fff
}
.sidebar-brand {
    display:flex;
    gap:12px;
    align-items:center;
    padding:4px 10px 30px
}
.brand-icon {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(255,255,255,.09);
    color:#93c5fd;
    font-size:1.05rem
}
.sidebar-brand strong,.sidebar-brand small {
    display:block
}
.sidebar-brand strong {
    font-size:1rem;
    font-weight:800
}
.sidebar-brand small {
    margin-top:2px;
    color:#94a3b8;
    font-size:.68rem
}
.sidebar-nav {
    flex:1
}
.nav-label {
    display:block;
    padding:0 11px 10px;
    color:#64748b;
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.12em
}
.account-label {
    margin-top:30px
}
.sidebar .nav-link {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    margin:4px 0;
    border-radius:10px;
    color:#94a3b8;
    text-decoration:none;
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
    transition:.18s
}
.sidebar .nav-link i {
    font-size:1.02rem
}
.sidebar .nav-link:hover {
    background:rgba(255,255,255,.065);
    color:#fff
}
.sidebar .nav-link.active {
    background:#2563eb;
    color:#fff;
    box-shadow:0 8px 20px rgba(37,99,235,.25)
}
.sidebar-logout {
    display:flex;
    gap:12px;
    align-items:center;
    padding:14px 12px;
    border:0;
    border-top:1px solid rgba(255,255,255,.08);
    background:transparent;
    color:#94a3b8;
    text-align:left;
    font-size:.77rem;
    cursor:pointer
}
.main-wrapper {
    margin-left:252px;
    min-height:100vh
}
.topbar {
    position:sticky;
    top:0;
    z-index:1000;
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 34px;
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px)
}
.topbar-left,.topbar-right {
    display:flex;
    align-items:center
}
.topbar-left {
    gap:12px
}
.topbar-left h1 {
    margin:0;
    color:var(--navy);
    font-size:1rem;
    font-weight:800;
    letter-spacing:-.02em
}
.topbar-left p {
    margin:3px 0 0;
    color:var(--light);
    font-size:.72rem
}
.topbar-right {
    gap:10px
}
.icon-button {
    position:relative;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#667085;
    cursor:pointer;
    font-size:1rem
}
.icon-button:hover {
    background:#f2f4f7
}
.mobile-menu-btn {
    display:none
}
.notification-count {
    position:absolute;
    top:1px;
    right:0;
    min-width:17px;
    height:17px;
    display:grid;
    place-items:center;
    padding:0 4px;
    border-radius:20px;
    background:var(--red);
    color:#fff;
    font-size:.58rem;
    font-weight:800
}
.notification-wrapper,.profile-wrapper {
    position:relative
}
.notification-panel,.profile-dropdown {
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    z-index:1200;
    display:none;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 45px rgba(16,24,40,.14)
}
.notification-panel.show,.profile-dropdown.show {
    display:block
}
.notification-panel {
    width:360px
}
.notification-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 17px;
    border-bottom:1px solid var(--border);
    font-size:.8rem
}
.plain-button {
    border:0;
    background:transparent;
    color:#98a2b3;
    cursor:pointer
}
.notification-item {
    display:flex;
    gap:11px;
    padding:14px 17px;
    border-bottom:1px solid #f2f4f7;
    font-size:.72rem
}
.notification-item i {
    color:var(--blue);
    font-size:1.05rem
}
.notification-item strong,.notification-item small {
    display:block
}
.notification-item strong {
    font-size:.73rem;
    color:#344054
}
.notification-item small {
    margin-top:3px;
    color:#98a2b3
}
.profile-trigger {
    display:flex;
    align-items:center;
    gap:9px;
    padding:4px 8px 4px 4px;
    border:0;
    border-radius:11px;
    background:transparent;
    cursor:pointer
}
.profile-trigger:hover {
    background:#f8fafc
}
.avatar {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:.72rem;
    font-weight:800
}
.profile-info {
    text-align:left
}
.profile-info strong,.profile-info small {
    display:block
}
.profile-info strong {
    font-size:.72rem
}
.profile-info small {
    margin-top:2px;
    color:#98a2b3;
    font-size:.62rem
}
.profile-trigger>i {
    color:#98a2b3;
    font-size:.62rem
}
.profile-dropdown {
    width:200px;
    padding:7px
}
.profile-dropdown a,.profile-dropdown button {
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#475467;
    text-decoration:none;
    text-align:left;
    font-size:.72rem;
    cursor:pointer
}
.profile-dropdown a:hover,.profile-dropdown button:hover {
    background:#f2f4f7
}
.profile-dropdown button {
    color:var(--red)
}
.content {
    padding:32px 34px 42px;
    max-width:1800px;
    margin:auto
}
.page-section {
    display:none
}
.page-section.active {
    display:block
}
.dashboard-hero {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin-bottom:22px;
    padding:28px 30px;
    min-height:148px;
    overflow:hidden;
    border:1px solid #dfe7f5;
    border-radius:18px;
    background:linear-gradient(115deg,#fff 0%,#f8fbff 55%,#eef5ff 100%);
    box-shadow:var(--shadow)
}
.dashboard-hero:after {
    content:"";
    position:absolute;
    right:-80px;
    top:-150px;
    width:340px;
    height:340px;
    border:50px solid rgba(37,99,235,.035);
    border-radius:50%
}
.hero-copy,.hero-actions {
    position:relative;
    z-index:1
}
.hero-topline {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap
}
.section-eyebrow {
    color:var(--blue);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.13em
}
.date-pill {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border:1px solid #dbe5f5;
    border-radius:999px;
    background:rgba(255,255,255,.8);
    color:#667085;
    font-size:.66rem;
    font-weight:600
}
.date-pill i {
    color:var(--blue)
}
.dashboard-hero h2 {
    margin:8px 0 6px;
    color:var(--navy);
    font-size:1.8rem;
    font-weight:800;
    letter-spacing:-.05em
}
.dashboard-hero p {
    margin:0;
    color:var(--muted);
    font-size:.78rem
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:16px
}
.hero-mini-stat {
    padding:11px 14px;
    border:1px solid #e3e8f2;
    border-radius:11px;
    background:rgba(255,255,255,.8)
}
.hero-mini-stat span,.hero-mini-stat strong {
    display:block
}
.hero-mini-stat span {
    color:#98a2b3;
    font-size:.6rem
}
.hero-mini-stat strong {
    margin-top:3px;
    color:#344054;
    font-size:.68rem
}
.hero-mini-stat strong i {
    margin-right:5px;
    color:#12b76a;
    font-size:.5rem
}
.metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:18px
}
.metric-card {
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    min-height:112px;
    padding:20px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 5px 18px rgba(16,24,40,.035);
    overflow:hidden
}
.metric-card:after {
    content:"";
    position:absolute;
    right:-12px;
    top:-12px;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#f8fafc
}
.metric-icon {
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:12px;
    font-size:1.1rem;
    z-index:1
}
.metric-icon.blue {
    background:#eff6ff;
    color:#2563eb
}
.metric-icon.purple {
    background:#f4f3ff;
    color:#7a5af8
}
.metric-icon.green {
    background:#ecfdf3;
    color:#12b76a
}
.metric-icon.orange {
    background:#fffaeb;
    color:#f79009
}
.metric-icon.red {
    background:#fef3f2;
    color:#f04438
}
.metric-card span,.metric-card strong,.metric-card small {
    display:block
}
.metric-card span {
    color:#98a2b3;
    font-size:.68rem
}
.metric-card strong {
    margin-top:3px;
    color:var(--navy);
    font-size:1.3rem;
    font-weight:800;
    letter-spacing:-.03em
}
.metric-card small {
    margin-top:3px;
    color:#98a2b3;
    font-size:.62rem
}
.dashboard-main-grid {
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);
    gap:18px;
    margin-bottom:18px;
    align-items:start
}
.dashboard-bottom-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-bottom:18px;
    align-items:start
}
.panel-card {
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(16,24,40,.028)
}
.chart-panel {
    padding:21px
}
.large-panel {
    min-width:0
}
.panel-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px
}
.panel-header h3 {
    margin:0;
    color:#344054;
    font-size:.86rem;
    font-weight:800
}
.panel-header p {
    margin:4px 0 0;
    color:#98a2b3;
    font-size:.65rem
}
.panel-chip {
    padding:6px 9px;
    border-radius:20px;
    background:#ecfdf3;
    color:#067647;
    font-size:.6rem;
    font-weight:700
}
.chart-wrap {
    height:245px
}
.large-chart {
    height:280px
}
.doughnut-wrap {
    height:220px;
    max-width:290px;
    margin:auto
}
.stock-legend {
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-top:8px
}
.stock-legend span {
    display:flex;
    align-items:center;
    gap:6px;
    color:#667085;
    font-size:.63rem
}
.stock-legend i {
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block
}
.simple-list {
    padding:0 20px 7px
}
.simple-list-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:13px 0;
    border-bottom:1px solid #f2f4f7
}
.simple-list-item:last-child {
    border-bottom:0
}
.item-main {
    min-width:0
}
.item-main strong,.item-main small {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis
}
.item-main strong {
    color:#344054;
    font-size:.72rem;
    white-space:nowrap
}
.item-main small {
    margin-top:3px;
    color:#98a2b3;
    font-size:.62rem
}
.status-badge {
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:99px;
    font-size:.59rem;
    font-weight:700;
    white-space:nowrap
}
.status-badge.in,.status-badge.active {
    background:#ecfdf3;
    color:#067647
}
.status-badge.low {
    background:#fffaeb;
    color:#b54708
}
.status-badge.out {
    background:#fef3f2;
    color:#b42318
}
.status-badge.inactive {
    background:#f2f4f7;
    color:#667085
}
.panel-link {
    color:var(--blue);
    font-size:.65rem;
    font-weight:700;
    text-decoration:none;
    cursor:pointer
}
.approval-panel {
    padding-bottom:7px
}
.approval-badge {
    padding:6px 9px;
    border-radius:20px;
    background:#eff6ff;
    color:var(--blue);
    font-size:.6rem;
    font-weight:700
}
.approval-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:15px 20px;
    border-top:1px solid #f2f4f7
}
.approval-info strong,.approval-info small {
    display:block
}
.approval-info strong {
    font-size:.72rem
}
.approval-info small {
    margin-top:4px;
    color:#98a2b3;
    font-size:.62rem
}
.approval-actions {
    display:flex;
    gap:7px
}
.section-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px
}
.section-header h2 {
    margin:5px 0 6px;
    color:var(--navy);
    font-size:1.55rem;
    font-weight:800;
    letter-spacing:-.04em
}
.section-header p {
    margin:0;
    color:var(--muted);
    font-size:.72rem
}
.primary-button,.secondary-button,.danger-button {
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border-radius:9px;
    font-size:.7rem;
    font-weight:700;
    cursor:pointer;
    transition:.18s
}
.primary-button {
    border:1px solid var(--blue);
    background:var(--blue);
    color:#fff
}
.primary-button:hover {
    background:var(--blue-dark);
    border-color:var(--blue-dark)
}
.secondary-button {
    border:1px solid var(--border);
    background:#fff;
    color:#475467
}
.secondary-button:hover {
    background:#f8fafc
}
.danger-button {
    border:1px solid #fecdca;
    background:#fff;
    color:#b42318
}
.export-actions {
    display:flex;
    gap:8px
}
.summary-strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    margin-bottom:18px;
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:var(--border)
}
.summary-strip>div {
    padding:16px 19px;
    background:#fff
}
.summary-strip span,.summary-strip strong {
    display:block
}
.summary-strip span {
    color:#98a2b3;
    font-size:.62rem
}
.summary-strip strong {
    margin-top:4px;
    color:var(--navy);
    font-size:1.08rem
}
.toolbar {
    display:flex;
    gap:9px;
    padding:16px;
    border-bottom:1px solid var(--border)
}
.search-box {
    position:relative;
    flex:1
}
.search-box i {
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#98a2b3
}
.search-box input,.filter-select,.form-group input,.form-group select {
    width:100%;
    height:40px;
    border:1px solid var(--border);
    border-radius:9px;
    outline:0;
    background:#fff;
    color:#344054;
    font-size:.7rem
}
.search-box input {
    padding:0 12px 0 35px
}
.filter-select {
    width:180px;
    padding:0 10px
}
.search-box input:focus,.filter-select:focus,.form-group input:focus,.form-group select:focus {
    border-color:#93b4ff;
    box-shadow:0 0 0 3px rgba(37,99,235,.08)
}
.data-table {
    width:100%;
    border-collapse:collapse;
    margin:0
}
.data-table th,.data-table td {
    padding:13px 16px;
    border-bottom:1px solid #f2f4f7;
    text-align:left;
    vertical-align:middle;
    white-space:nowrap
}
.data-table th {
    background:#fcfcfd;
    color:#98a2b3;
    font-size:.58rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em
}
.data-table td {
    color:#475467;
    font-size:.69rem
}
.product-name {
    display:flex;
    align-items:center;
    gap:10px
}
.product-avatar {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#eff6ff;
    color:var(--blue)
}
.product-name strong,.product-name small {
    display:block
}
.product-name strong {
    color:#344054;
    font-size:.71rem
}
.product-name small {
    margin-top:2px;
    color:#98a2b3;
    font-size:.59rem
}
.action-group {
    display:flex;
    justify-content:flex-end;
    gap:4px
}
.action-button {
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#667085;
    cursor:pointer
}
.action-button:hover {
    background:#f2f4f7
}
.action-button.delete:hover {
    background:#fef3f2;
    color:var(--red)
}
.category-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
}
.category-card {
    padding:21px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fff;
    box-shadow:0 4px 16px rgba(16,24,40,.025)
}
.category-card-top {
    display:flex;
    justify-content:space-between
}
.category-icon {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#eff6ff;
    color:var(--blue);
    font-size:1.05rem
}
.category-card h3 {
    margin:18px 0 5px;
    font-size:.9rem
}
.category-card p {
    margin:0;
    color:#98a2b3;
    font-size:.64rem
}
.category-actions {
    display:flex
}
.three-metrics {
    grid-template-columns:repeat(3,1fr)
}
.profile-card {
    padding:26px
}
.profile-hero {
    display:flex;
    align-items:center;
    gap:15px;
    padding-bottom:23px;
    border-bottom:1px solid var(--border)
}
.profile-avatar {
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#dbeafe;
    color:#1d4ed8;
    font-weight:800;
    font-size:1.15rem
}
.profile-hero h3 {
    margin:0;
    font-size:1.05rem
}
.profile-hero p {
    margin:4px 0 0;
    color:#98a2b3;
    font-size:.65rem
}
.profile-form {
    padding-top:23px
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px
}
.form-grid.three {
    grid-template-columns:repeat(3,1fr)
}
.form-group {
    margin-bottom:15px
}
.form-group label {
    display:block;
    margin-bottom:7px;
    color:#344054;
    font-size:.65rem;
    font-weight:700
}
.form-group input,.form-group select {
    padding:0 11px
}
.profile-form hr {
    margin:8px 0 22px;
    border-color:var(--border)
}
.profile-form h4 {
    margin:0;
    font-size:.82rem
}
.form-help {
    margin:5px 0 16px;
    color:#98a2b3;
    font-size:.61rem
}
.admin-security-note {
    margin-top:15px;
    padding:13px 15px;
    border:1px solid #fedf89;
    border-radius:10px;
    background:#fffaeb;
    color:#b54708;
    font-size:.64rem;
    line-height:1.5
}
.role-hidden {
    display:none!important
}
.password-cell {
    display:flex;
    align-items:center;
    gap:3px
}
.modern-modal {
    border:0;
    border-radius:15px;
    overflow:hidden
}
.modern-modal .modal-header {
    padding:20px 22px;
    border-bottom:1px solid var(--border)
}
.modern-modal .modal-header h5 {
    margin:0;
    font-size:.9rem;
    font-weight:800;
    color:var(--navy)
}
.modern-modal .modal-header p {
    margin:4px 0 0;
    color:#98a2b3;
    font-size:.63rem
}
.modern-modal .modal-body {
    padding:20px 22px
}
.modern-modal .modal-footer {
    padding:14px 22px;
    border-top:1px solid var(--border)
}
.message-modal-body {
    padding:32px 23px!important
}
.message-icon {
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    margin:0 auto 13px;
    border-radius:50%;
    background:#ecfdf3;
    color:var(--green)
}
.message-modal-body h5 {
    font-size:.9rem
}
.message-modal-body p {
    margin:6px 0 19px;
    color:var(--muted);
    font-size:.69rem
}
.approval-detail {
    padding:14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#f8fafc
}
.approval-detail div {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:6px 0;
    font-size:.68rem
}
.approval-detail span {
    color:#98a2b3
}
.approval-detail strong {
    text-align:right;
    color:#344054
}
.sidebar-overlay {
    display:none
}
@media(max-width:1200px) {
    .metric-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .dashboard-bottom-grid {
        grid-template-columns:1fr 1fr
    }
    .dashboard-bottom-grid .panel-card:last-child {
        grid-column:1/-1
    }
    .category-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:992px) {
    .sidebar {
        transform:translateX(-100%);
        transition:.22s
    }
    .sidebar.open {
        transform:translateX(0)
    }
    .sidebar-overlay.show {
        display:block;
        position:fixed;
        inset:0;
        z-index:1040;
        background:rgba(15,23,42,.45)
    }
    .main-wrapper {
        margin-left:0
    }
    .mobile-menu-btn {
        display:grid
    }
    .topbar {
        padding:12px 20px
    }
    .content {
        padding:25px 20px 35px
    }
    .dashboard-main-grid {
        grid-template-columns:1fr
    }
    .dashboard-bottom-grid {
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:768px) {
    .profile-info {
        display:none
    }
    .dashboard-hero,.section-header {
        align-items:flex-start;
        flex-direction:column
    }
    .hero-actions {
        width:100%;
        justify-content:space-between
    }
    .dashboard-hero .primary-button,.section-header .primary-button {
        width:100%
    }
    .metric-grid,.dashboard-bottom-grid,.category-grid,.three-metrics,.summary-strip {
        grid-template-columns:1fr
    }
    .dashboard-bottom-grid .panel-card:last-child {
        grid-column:auto
    }
    .toolbar {
        flex-wrap:wrap
    }
    .search-box {
        flex-basis:100%
    }
    .filter-select {
        width:calc(50% - 5px)
    }
    .form-grid,.form-grid.three {
        grid-template-columns:1fr
    }
    .export-actions {
        width:100%
    }
    .export-actions button {
        flex:1
    }
}
@media(max-width:520px) {
    .content {
        padding:19px 12px 30px
    }
    .topbar {
        padding:10px 12px
    }
    .topbar-left p {
        display:none
    }
    .notification-panel {
        position:fixed;
        top:64px;
        left:12px;
        right:12px;
        width:auto
    }
    .dashboard-hero {
        padding:21px
    }
    .hero-actions {
        align-items:stretch;
        flex-direction:column
    }
    .hero-mini-stat {
        width:100%
    }
    .chart-panel {
        padding:17px
    }
    .large-chart {
        height:235px
    }
    .doughnut-wrap {
        height:205px
    }
}
/* =========================================================
   BMORTA PRODUCT MANAGEMENT — DASHBOARD UI 
   ========================================================= */
/* Dashboard page */
#dashboard {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}
/* ---------- Hero ---------- */
#dashboard .dashboard-hero {
    width: 100%;
    min-height: 0;
    margin: 0 0 20px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid #dfe7f5;
    border-radius: 18px;
    background: linear-gradient(120deg, #ffffff 0%, #f8fbff 58%, #eef5ff 100%);
    box-shadow: 0 8px 28px rgba(16,24,40,.055);
    overflow: hidden;
}
#dashboard .hero-copy {
    min-width: 0;
    flex: 1 1 auto;
}
#dashboard .hero-topline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#dashboard .section-eyebrow {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
}
#dashboard .date-pill {
    padding: 5px 10px;
    font-size: .64rem;
}
#dashboard .dashboard-hero h2 {
    margin: 7px 0 5px;
    font-size: 1.7rem;
    line-height: 1.2;
    letter-spacing: -.045em;
}
#dashboard .dashboard-hero p {
    margin: 0;
    font-size: .74rem;
    line-height: 1.5;
}
#dashboard .hero-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
#dashboard .hero-mini-stat {
    min-width: 150px;
    padding: 10px 13px;
}
/* ---------- KPI cards ---------- */
#dashboard .metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
#dashboard .metric-card {
    width: 100%;
    min-width: 0;
    min-height: 96px;
    height: auto;
    padding: 17px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(16,24,40,.035);
}
#dashboard .metric-card > div:last-child {
    min-width: 0;
}
#dashboard .metric-card strong {
    font-size: 1.18rem;
    line-height: 1.15;
}
#dashboard .metric-card span {
    font-size: .66rem;
}
#dashboard .metric-card small {
    font-size: .59rem;
}
/* ---------- Main charts ---------- */
#dashboard .dashboard-main-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .95fr);
    gap: 16px;
    margin: 0 0 16px;
    align-items: stretch;
}
#dashboard .dashboard-main-grid > .panel-card {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
}
#dashboard .chart-panel {
    padding: 19px 20px 18px;
}
#dashboard .large-panel {
    min-width: 0;
}
#dashboard .panel-header {
    min-height: 34px;
    margin: 0 0 10px;
}
#dashboard .panel-header h3 {
    font-size: .8rem;
    line-height: 1.2;
}
#dashboard .panel-header p {
    font-size: .59rem;
    line-height: 1.3;
}
#dashboard .panel-link {
    font-size: .59rem;
    white-space: nowrap;
}
#dashboard .panel-chip {
    padding: 5px 8px;
    font-size: .57rem;
    white-space: nowrap;
}
/* Chart.js must have a controlled drawing area */
#dashboard .chart-wrap {
    position: relative;
    width: 100%;
    height: 245px;
    min-height: 0;
}
#dashboard .large-chart {
    position: relative;
    width: 100%;
    height: 245px;
}
#dashboard .chart-wrap canvas,
#dashboard .large-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
#dashboard .doughnut-wrap {
    position: relative;
    width: min(100%, 235px);
    height: 205px;
    margin: 0 auto;
}
#dashboard .doughnut-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
#dashboard .stock-legend {
    margin-top: 3px;
    gap: 14px;
}
/* ---------- Lower information cards ---------- */
/*
   IMPORTANT:
   These cards are deliberately NOT given a fixed height.
   Their height is determined by their content.
*/
#dashboard .dashboard-bottom-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px;
    align-items: start;
}
#dashboard .dashboard-bottom-grid > .panel-card {
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden;
}
/* Make the card header part of normal flow */
#dashboard .dashboard-bottom-grid > .panel-card .panel-header {
    margin: 0;
    padding: 17px 18px 10px;
}
/* List takes exactly the amount of space its rows need */
#dashboard .dashboard-bottom-grid .simple-list {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 18px 5px !important;
    overflow: visible !important;
    flex: none !important;
}
/* Rows */
#dashboard .dashboard-bottom-grid .simple-list-item {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    padding: 11px 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#dashboard .dashboard-bottom-grid .item-main {
    min-width: 0;
    flex: 1 1 auto;
}
#dashboard .dashboard-bottom-grid .item-main strong {
    display: block;
    max-width: 100%;
    font-size: .69rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#dashboard .dashboard-bottom-grid .item-main small {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    font-size: .57rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#dashboard .dashboard-bottom-grid .status-badge {
    flex: 0 0 auto;
    font-size: .55rem;
    padding: 4px 7px;
}
/* ---------- Pending approvals ---------- */
#dashboard .approval-panel {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0;
}
#dashboard .approval-panel .panel-header {
    padding-bottom: 12px;
}
#dashboard .approval-panel .simple-list {
    padding: 0 18px 8px !important;
}
#dashboard .approval-item {
    width: 100%;
    min-width: 0;
    padding: 13px 0;
}
#dashboard .approval-info {
    min-width: 0;
}
#dashboard .approval-info strong {
    font-size: .68rem;
}
#dashboard .approval-info small {
    font-size: .58rem;
}
#dashboard .approval-actions {
    flex: 0 0 auto;
}
/* Empty state should not create a giant box */
#dashboard .simple-list .empty-state,
#dashboard .simple-list > .empty-state {
    padding: 18px 0 !important;
}
/* ---------- Better desktop proportions ---------- */
@media (min-width: 1400px) {
    #dashboard {
        max-width: 1500px;
    }
    #dashboard .dashboard-main-grid {
        grid-template-columns: minmax(0, 1.65fr) minmax(300px, .95fr);
    }
    #dashboard .chart-wrap,
    #dashboard .large-chart {
        height: 250px;
    }
    #dashboard .dashboard-bottom-grid .simple-list-item {
        padding: 12px 0 !important;
    }
}
/* ---------- Tablet ---------- */
@media (max-width: 1200px) {
    #dashboard .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #dashboard .dashboard-main-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    }
    #dashboard .dashboard-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #dashboard .dashboard-bottom-grid > .panel-card:last-child {
        grid-column: 1 / -1;
    }
}
/* ---------- Smaller tablet ---------- */
@media (max-width: 992px) {
    #dashboard .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
    #dashboard .dashboard-main-grid > .panel-card {
        height: auto !important;
    }
    #dashboard .dashboard-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    #dashboard .dashboard-hero {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    #dashboard .hero-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    #dashboard .hero-mini-stat {
        width: 100%;
    }
    #dashboard .metric-grid {
        grid-template-columns: 1fr;
    }
    #dashboard .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }
    #dashboard .dashboard-bottom-grid > .panel-card:last-child {
        grid-column: auto;
    }
    #dashboard .dashboard-bottom-grid > .panel-card {
        height: auto !important;
        min-height: 0 !important;
    }
    #dashboard .chart-wrap,
    #dashboard .large-chart {
        height: 220px;
    }
    #dashboard .doughnut-wrap {
        height: 200px;
    }
}
/* ---------- Small mobile ---------- */
@media (max-width: 520px) {
    #dashboard .dashboard-hero {
        padding: 18px;
    }
    #dashboard .dashboard-hero h2 {
        font-size: 1.4rem;
    }
    #dashboard .chart-panel {
        padding: 17px;
    }
    #dashboard .dashboard-bottom-grid .simple-list {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
/* =========================================================
   PENDING APPROVALS — COMPACT, CONTENT-FITTING CONTAINER
   ========================================================= */
#dashboard #adminApprovalPanel.approval-panel {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    align-self: start !important;
}
#dashboard #adminApprovalPanel.approval-panel > .panel-header {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 15px 18px 11px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#dashboard #adminApprovalPanel.approval-panel > .panel-header h3 {
    margin: 0;
    line-height: 1.25;
}
#dashboard #adminApprovalPanel.approval-panel > .panel-header p {
    margin: 3px 0 0;
    line-height: 1.25;
}
#dashboard #adminApprovalPanel #approvalList.approval-list {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 18px 8px !important;
    overflow: visible !important;
    display: block !important;
}
/* Empty state generated by script.js */
#dashboard #adminApprovalPanel #approvalList.approval-list > .simple-list {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
}
#dashboard #adminApprovalPanel #approvalList.approval-list > .simple-list > .simple-list-item {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 0 11px !important;
    border-bottom: 0 !important;
    display: flex;
    align-items: center;
}
/* Prevent the empty state from creating vertical space */
#dashboard #adminApprovalPanel #approvalList.approval-list > .simple-list > .simple-list-item .item-main {
    min-width: 0;
}
#dashboard #adminApprovalPanel #approvalList.approval-list > .simple-list > .simple-list-item .item-main strong {
    display: block;
    margin: 0;
    font-size: .69rem;
    line-height: 1.3;
}
#dashboard #adminApprovalPanel #approvalList.approval-list > .simple-list > .simple-list-item .item-main small {
    display: block;
    margin-top: 3px;
    font-size: .58rem;
    line-height: 1.3;
}
/* Actual pending request rows */
#dashboard #adminApprovalPanel #approvalList.approval-list > .approval-item {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    border-top: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
#dashboard #adminApprovalPanel #approvalList.approval-list > .approval-item:first-child {
    border-top: 0;
}
#dashboard #adminApprovalPanel .approval-info {
    min-width: 0;
    flex: 1 1 auto;
}
#dashboard #adminApprovalPanel .approval-info strong,
#dashboard #adminApprovalPanel .approval-info small {
    display: block;
}
#dashboard #adminApprovalPanel .approval-info strong {
    font-size: .68rem;
    line-height: 1.35;
}
#dashboard #adminApprovalPanel .approval-info small {
    margin-top: 3px;
    font-size: .58rem;
    line-height: 1.35;
}
#dashboard #adminApprovalPanel .approval-actions {
    flex: 0 0 auto;
}
/* Keep the badge compact */
#dashboard #adminApprovalPanel .approval-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* Mobile */
@media (max-width: 768px) {
    #dashboard #adminApprovalPanel #approvalList.approval-list {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    #dashboard #adminApprovalPanel.approval-panel > .panel-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    #dashboard #adminApprovalPanel #approvalList.approval-list > .approval-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }
    #dashboard #adminApprovalPanel .approval-actions {
        width: 100%;
    }
}
/* =========================================================
   BMORTA UI REFRESH
   VISUAL-ONLY OVERRIDES
   ---------------------------------------------------------
   This section changes presentation only.
   Existing HTML, JavaScript, storage, actions, permissions,
   approval workflow and reports are intentionally untouched.
   ========================================================= */
:root {
    --blue: #5b5ce2;
    --blue-dark: #4748c7;
    --navy: #17172b;
    --text: #344054;
    --muted: #7b8194;
    --light: #9aa1b2;
    --border: #e7e8f0;
    --bg: #f4f5fa;
    --white: #ffffff;
    --purple: #7c4dff;
    --shadow: 0 10px 30px rgba(38, 38, 75, .07);
}
/* ---------- Base ---------- */
body {
    background:
        radial-gradient(circle at 82% 0%, rgba(124, 77, 255, .055), transparent 24rem),
        #f4f5fa;
    color: var(--text);
}
.main-wrapper {
    background: transparent;
}
.content {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 32px 42px;
}
/* ---------- Sidebar ---------- */
.sidebar {
    width: 252px;
    padding: 24px 15px 18px;
    background:
        radial-gradient(circle at 20% 8%, rgba(124, 77, 255, .18), transparent 16rem),
        linear-gradient(180deg, #15152a 0%, #10101f 100%);
    box-shadow: 8px 0 30px rgba(15, 15, 35, .08);
}
.sidebar-brand {
    padding: 2px 10px 34px;
}
.brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(124, 77, 255, .25), rgba(91, 92, 226, .18));
    border-color: rgba(255, 255, 255, .12);
    color: #b7b8ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar-brand strong {
    font-size: 1.02rem;
    letter-spacing: -.02em;
}
.sidebar-brand small {
    color: #888ba5;
}
.nav-label {
    padding-left: 12px;
    color: #6e7189;
    font-size: .59rem;
    letter-spacing: .16em;
}
.sidebar .nav-link {
    min-height: 44px;
    padding: 11px 13px;
    margin: 3px 0;
    border-radius: 11px;
    color: #979ab1;
}
.sidebar .nav-link i {
    width: 19px;
    font-size: .98rem;
}
.sidebar .nav-link:hover {
    background: rgba(255,255,255,.055);
    color: #fff;
}
.sidebar .nav-link.active {
    background: linear-gradient(135deg, #6566ef 0%, #7650e9 100%);
    color: #fff;
    box-shadow: 0 9px 22px rgba(91, 92, 226, .28);
}
.sidebar-logout {
    padding: 14px 13px;
    color: #85889e;
}
/* ---------- Topbar ---------- */
.topbar {
    min-height: 72px;
    padding: 10px 32px;
    background: rgba(255,255,255,.9);
    border-bottom-color: #e9eaf1;
    box-shadow: 0 1px 0 rgba(17,24,39,.015);
}
.topbar-left h1 {
    color: #202038;
    font-size: 1rem;
}
.topbar-left p {
    color: #9a9fb0;
}
.icon-button {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}
.icon-button:hover {
    background: #f1f1f8;
    color: var(--blue);
}
.profile-trigger {
    padding: 4px 9px 4px 4px;
    border-radius: 12px;
}
.profile-trigger:hover {
    background: #f5f5fa;
}
.avatar {
    background: linear-gradient(135deg, #e8e7ff, #dce5ff);
    color: #5555d2;
}
.profile-info strong {
    color: #303047;
}
.profile-info small {
    color: #9ba0b0;
}
.notification-panel,
.profile-dropdown {
    border-color: #e4e5ed;
    border-radius: 15px;
    box-shadow: 0 18px 45px rgba(31, 31, 61, .15);
}
/* ---------- Dashboard hero ---------- */
#dashboard {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}
#dashboard .dashboard-hero {
    min-height: 166px;
    margin-bottom: 20px;
    padding: 27px 30px;
    border: 1px solid #e1e3f0;
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 50%, rgba(124,77,255,.13), transparent 12rem),
        radial-gradient(circle at 78% 10%, rgba(91,92,226,.08), transparent 14rem),
        linear-gradient(120deg, #ffffff 0%, #fafaff 48%, #f0efff 100%);
    box-shadow: 0 12px 35px rgba(58, 57, 100, .075);
}
#dashboard .dashboard-hero:after {
    right: -105px;
    top: -165px;
    width: 390px;
    height: 390px;
    border: 52px solid rgba(91,92,226,.045);
}
#dashboard .hero-topline {
    gap: 10px;
}
#dashboard .section-eyebrow {
    color: #5c5ddd;
    font-size: .61rem;
    letter-spacing: .16em;
}
#dashboard .date-pill {
    padding: 6px 11px;
    border-color: #e1e3f1;
    background: rgba(255,255,255,.82);
    color: #747b8e;
    box-shadow: 0 3px 10px rgba(45,45,80,.03);
}
#dashboard .date-pill i {
    color: #6667e7;
}
#dashboard .dashboard-hero h2 {
    margin: 9px 0 5px;
    color: #17172b;
    font-size: clamp(1.65rem, 2vw, 2rem);
    line-height: 1.12;
}
#dashboard .dashboard-hero p {
    color: #7b8194;
    font-size: .75rem;
}
#dashboard .hero-actions {
    gap: 10px;
}
#dashboard .hero-mini-stat {
    min-width: 154px;
    padding: 11px 14px;
    border-color: #e2e4ef;
    border-radius: 12px;
    background: rgba(255,255,255,.78);
}
#dashboard .hero-mini-stat span {
    color: #9a9fb0;
}
#dashboard .hero-mini-stat strong {
    color: #42445c;
}
#dashboard .hero-mini-stat strong i {
    color: #24b47e;
}
#dashboard .hero-actions .primary-button {
    min-height: 42px;
    padding: 0 17px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #5b5ce2, #7551e9);
    box-shadow: 0 9px 20px rgba(91,92,226,.23);
}
/* ---------- KPI cards ---------- */
#dashboard .metric-grid {
    gap: 15px;
    margin-bottom: 20px;
}
#dashboard .metric-card {
    min-height: 108px;
    padding: 18px 19px;
    border-color: #e4e5ed;
    border-radius: 17px;
    box-shadow: 0 8px 24px rgba(36,36,67,.045);
    transition: transform .18s ease, box-shadow .18s ease;
}
#dashboard .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(36,36,67,.08);
}
#dashboard .metric-card:after {
    width: 76px;
    height: 76px;
    right: -20px;
    top: -20px;
    background: #fafaff;
}
#dashboard .metric-icon {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
    border-radius: 14px;
}
#dashboard .metric-icon.blue {
    background: #eeefff;
    color: #5b5ce2;
}
#dashboard .metric-icon.purple {
    background: #f1ecff;
    color: #7c4dff;
}
#dashboard .metric-icon.green {
    background: #eafaf3;
    color: #16a772;
}
#dashboard .metric-icon.orange {
    background: #fff5df;
    color: #e79010;
}
#dashboard .metric-card span {
    color: #9096a7;
}
#dashboard .metric-card strong {
    color: #202038;
    font-size: 1.32rem;
}
/* ---------- Chart area ---------- */
#dashboard .dashboard-main-grid {
    gap: 16px;
    margin-bottom: 16px;
}
#dashboard .dashboard-main-grid > .panel-card {
    border-color: #e2e4ec;
    border-radius: 18px;
    box-shadow: 0 9px 25px rgba(35,35,65,.045);
}
#dashboard .chart-panel {
    padding: 20px 21px 18px;
}
#dashboard .panel-header {
    min-height: 34px;
    margin-bottom: 13px;
}
#dashboard .panel-header h3 {
    color: #2c2d43;
    font-size: .83rem;
    letter-spacing: -.01em;
}
#dashboard .panel-header p {
    color: #979cad;
    font-size: .6rem;
}
#dashboard .panel-chip {
    background: #ecfaf4;
    color: #16835d;
    border: 1px solid #d8f2e6;
}
#dashboard .chart-wrap {
    height: 248px;
}
#dashboard .large-chart {
    height: 248px;
}
#dashboard .doughnut-wrap {
    height: 205px;
    max-width: 235px;
}
#dashboard .stock-legend {
    gap: 17px;
}
/* ---------- Bottom dashboard cards ---------- */
#dashboard .dashboard-bottom-grid {
    gap: 16px;
    margin-bottom: 16px;
}
#dashboard .dashboard-bottom-grid > .panel-card {
    border-color: #e2e4ec;
    border-radius: 18px;
    box-shadow: 0 9px 25px rgba(35,35,65,.045);
}
#dashboard .dashboard-bottom-grid > .panel-card .panel-header {
    padding: 18px 19px 11px;
}
#dashboard .dashboard-bottom-grid .simple-list {
    padding: 0 19px 6px !important;
}
#dashboard .dashboard-bottom-grid .simple-list-item {
    min-height: 0 !important;
    padding: 12px 0 !important;
    gap: 14px;
}
#dashboard .dashboard-bottom-grid .item-main strong {
    color: #33344b;
    font-size: .7rem;
}
#dashboard .dashboard-bottom-grid .item-main small {
    color: #9a9fb0;
    font-size: .58rem;
}
#dashboard .dashboard-bottom-grid .status-badge {
    padding: 5px 8px;
    font-size: .55rem;
}
/* Give activity rows a subtle timeline-like feel */
#dashboard .dashboard-bottom-grid > .panel-card:nth-child(3) .simple-list-item {
    position: relative;
    padding-left: 15px !important;
}
#dashboard .dashboard-bottom-grid > .panel-card:nth-child(3) .simple-list-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7067e8;
    box-shadow: 0 0 0 4px #f0efff;
}
/* ---------- Pending approvals ---------- */
#dashboard #adminApprovalPanel.approval-panel {
    border: 1px solid #e1e3ed !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fcfcff 100%) !important;
    box-shadow: 0 9px 25px rgba(35,35,65,.04) !important;
}
#dashboard #adminApprovalPanel.approval-panel > .panel-header {
    padding: 17px 19px 11px !important;
}
#dashboard #adminApprovalPanel .approval-badge {
    padding: 6px 10px;
    background: #efefff;
    color: #5b5ce2;
    border: 1px solid #e2e1ff;
}
#dashboard #adminApprovalPanel #approvalList.approval-list {
    padding: 0 19px 7px !important;
}
#dashboard #adminApprovalPanel #approvalList.approval-list > .simple-list > .simple-list-item {
    padding: 13px 0 !important;
}
#dashboard #adminApprovalPanel #approvalList.approval-list > .approval-item {
    padding: 13px 0 !important;
    border-top-color: #eeeeF4;
}
#dashboard #adminApprovalPanel .approval-info strong {
    color: #34354c;
}
#dashboard #adminApprovalPanel .approval-info small {
    color: #9a9fb0;
}
/* ---------- Other application pages ---------- */
.section-header {
    margin-bottom: 20px;
}
.section-header h2 {
    color: #202038;
    font-size: 1.65rem;
}
.section-header p {
    color: #7f8597;
}
.primary-button {
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #5b5ce2, #7551e9);
    box-shadow: 0 8px 18px rgba(91,92,226,.16);
}
.primary-button:hover {
    background: linear-gradient(135deg, #4f50d3, #6844dc);
}
.secondary-button,
.danger-button {
    border-radius: 10px;
}
.panel-card {
    border-color: #e3e5ed;
    border-radius: 17px;
    box-shadow: 0 8px 24px rgba(35,35,65,.035);
}
/* ---------- Summary strip ---------- */
.summary-strip {
    border-color: #e2e4ed;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(35,35,65,.025);
}
.summary-strip > div {
    padding: 17px 20px;
}
/* ---------- Toolbar ---------- */
.toolbar {
    padding: 15px;
    background: #fcfcfe;
    border-bottom-color: #e8e9f0;
}
.search-box input,
.filter-select,
.form-group input,
.form-group select {
    border-color: #dedfe8;
    border-radius: 10px;
}
.search-box input:focus,
.filter-select:focus,
.form-group input:focus,
.form-group select:focus {
    border-color: #7778e9;
    box-shadow: 0 0 0 3px rgba(91,92,226,.09);
}
/* ---------- Tables ---------- */
.data-table th {
    background: #fafafe;
    color: #9298a9;
}
.data-table th,
.data-table td {
    border-bottom-color: #eeeff3;
}
.data-table tbody tr {
    transition: background .15s ease;
}
.data-table tbody tr:hover {
    background: #fafaff;
}
.product-avatar {
    background: #eeefff;
    color: #5b5ce2;
}
/* ---------- Category cards ---------- */
.category-grid {
    gap: 17px;
}
.category-card {
    padding: 22px;
    border-color: #e3e5ed;
    border-radius: 17px;
    box-shadow: 0 8px 22px rgba(35,35,65,.035);
    transition: transform .18s ease, box-shadow .18s ease;
}
.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(35,35,65,.075);
}
.category-icon {
    background: #eeefff;
    color: #5b5ce2;
}
/* ---------- Profile ---------- */
.profile-card {
    border-color: #e3e5ed;
    border-radius: 17px;
    box-shadow: 0 8px 24px rgba(35,35,65,.035);
}
.profile-avatar {
    background: linear-gradient(135deg, #e8e7ff, #dce5ff);
    color: #5555d2;
}
/* ---------- Modals ---------- */
.modern-modal {
    border-radius: 17px;
    box-shadow: 0 24px 65px rgba(28,28,58,.18);
}
.modern-modal .modal-header {
    padding: 21px 23px;
}
.modern-modal .modal-body {
    padding: 22px 23px;
}
.modern-modal .modal-footer {
    padding: 15px 23px;
    background: #fcfcfe;
}
/* ---------- Responsive alignment ---------- */
@media (min-width: 1400px) {
    .content {
        padding-left: 34px;
        padding-right: 34px;
    }
    #dashboard {
        max-width: 1500px;
    }
}
@media (max-width: 1200px) {
    .content {
        padding-left: 24px;
        padding-right: 24px;
    }
    #dashboard .dashboard-bottom-grid {
        gap: 15px;
    }
}
@media (max-width: 992px) {
    .content {
        padding: 23px 20px 36px;
    }
    .topbar {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 768px) {
    .content {
        padding: 20px 16px 32px;
    }
    #dashboard .dashboard-hero {
        padding: 21px;
        border-radius: 17px;
    }
    #dashboard .metric-card {
        min-height: 100px;
    }
    #dashboard .dashboard-main-grid,
    #dashboard .dashboard-bottom-grid {
        gap: 14px;
    }
    #dashboard .dashboard-bottom-grid > .panel-card {
        border-radius: 16px;
    }
}
@media (max-width: 520px) {
    .content {
        padding: 17px 12px 28px;
    }
    .topbar {
        padding-left: 12px;
        padding-right: 12px;
    }
    #dashboard .dashboard-hero {
        padding: 18px;
    }
    #dashboard .dashboard-hero h2 {
        font-size: 1.42rem;
    }
    #dashboard .chart-panel {
        padding: 17px;
    }
}