/* ===========================================
   MoroBolsin Admin — Custom UI Enhancement
   =========================================== */

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --ac-radius:    10px;
    --ac-radius-sm: 7px;
    --ac-shadow:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --ac-shadow-md: 0 4px 12px rgba(0,0,0,.08);
}

body, .h1,.h2,.h3,.h4,.h5,.h6,
h1,h2,h3,h4,h5,h6,
p, span, a, td, th, input, select, textarea, button {
    font-family: 'Inter', sans-serif !important;
}

/* ══════════════════════════════
   SIDEBAR MENU ITEMS
══════════════════════════════ */
#sidebar-menu .menu-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 20px 20px 6px;
    opacity: .45;
}
#sidebar-menu ul li > a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    margin: 1px 10px;
    border-radius: var(--ac-radius-sm);
    font-size: 13.5px;
    font-weight: 400;
    transition: background .15s, color .15s;
    gap: 10px;
}
#sidebar-menu ul li > a i:first-child {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    opacity: .75;
}
#sidebar-menu ul li > a .badge {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 20px;
}
/* Active item highlight */
#sidebar-menu ul li > a.mm-active,
#sidebar-menu ul li.mm-active > a {
    font-weight: 600;
}
#sidebar-menu ul li > a.mm-active i:first-child,
#sidebar-menu ul li.mm-active > a i:first-child {
    opacity: 1;
}
/* Sub-menu */
#sidebar-menu ul.sub-menu {
    padding: 2px 0 6px;
}
#sidebar-menu ul.sub-menu li > a {
    padding: 8px 14px 8px 44px;
    font-size: 13px;
    margin: 0 10px;
}
/* Touch targets for mobile */
@media (max-width: 991px) {
    #sidebar-menu ul li > a {
        padding: 12px 16px;
        min-height: 44px;
    }
    #sidebar-menu ul.sub-menu li > a {
        min-height: 42px;
    }
}

/* ══════════════════════════════
   TOPBAR
══════════════════════════════ */
#page-topbar {
    box-shadow: 0 1px 0 rgba(0,0,0,.07);
}
.navbar-header {
    padding: 0 16px 0 0;
}
/* User avatar initials */
.user-avatar-initials {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: rgba(85,100,153,.15);
    color: #556499;
    flex-shrink: 0;
}
.dropdown-menu {
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-md);
    border: 1px solid rgba(0,0,0,.06);
    padding: 4px;
}
.dropdown-item {
    border-radius: 6px;
    font-size: 13.5px;
    padding: 7px 12px;
}
.dropdown-item:hover {
    border-radius: 6px;
}
.dropdown-divider {
    margin: 4px 0;
}

/* ══════════════════════════════
   CARDS
══════════════════════════════ */
.card {
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
    border: 1px solid rgba(0,0,0,.055);
}
.card-header {
    border-radius: var(--ac-radius) var(--ac-radius) 0 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 14px 18px;
}
.card-body {
    padding: 18px;
}

/* ══════════════════════════════
   TABLES
══════════════════════════════ */
.table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
    border-bottom-width: 1px;
    padding: 10px 14px;
    opacity: .55;
}
.table td {
    font-size: 13.5px;
    padding: 11px 14px;
    vertical-align: middle;
}
.table-hover tbody tr {
    transition: background .1s;
}
/* Responsive table: horizontal scroll on mobile */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════
   FORMS
══════════════════════════════ */
.form-control,
.form-select {
    border-radius: var(--ac-radius-sm);
    font-size: 13.5px;
    border-color: rgba(0,0,0,.12);
}
.form-control:focus,
.form-select:focus {
    border-color: #556ee6;
    box-shadow: 0 0 0 3px rgba(85,110,230,.12);
}
.form-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}
.input-group > .form-control,
.input-group > .form-select {
    border-radius: var(--ac-radius-sm) !important;
}
.input-group > .btn {
    border-radius: var(--ac-radius-sm) !important;
}

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn {
    border-radius: var(--ac-radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .01em;
}
.btn-sm {
    border-radius: 6px;
    font-size: 12.5px;
}
.btn-rounded {
    border-radius: 20px !important;
}
/* Mobile: full-width buttons in form groups */
@media (max-width: 576px) {
    .btn-group-mobile-full .btn {
        width: 100%;
        margin-bottom: 6px;
        border-radius: var(--ac-radius-sm) !important;
    }
}

/* ══════════════════════════════
   BADGES
══════════════════════════════ */
.badge {
    font-weight: 500;
    border-radius: 5px;
    letter-spacing: .02em;
}

/* ══════════════════════════════
   PAGE TITLE / BREADCRUMB
══════════════════════════════ */
.page-title-box h4 {
    font-size: 17px;
    font-weight: 600;
}
.breadcrumb {
    font-size: 12px;
}

/* ══════════════════════════════
   DASHBOARD STAT CARDS
══════════════════════════════ */
.stat-card {
    border-radius: var(--ac-radius);
    overflow: hidden;
    position: relative;
}
.stat-card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}
.stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}
.stat-card .stat-label {
    font-size: 12.5px;
    margin: 0;
    opacity: .55;
    font-weight: 500;
}
.stat-card .stat-trend {
    font-size: 12px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ══════════════════════════════
   QUICK ACTIONS
══════════════════════════════ */
.quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    border: 1px solid transparent;
}
.quick-action:hover {
    background: rgba(85,110,230,.05);
    border-color: rgba(85,110,230,.1);
    color: inherit;
}
.qa-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.qa-title {
    font-size: 13.5px;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
}
.qa-sub {
    font-size: 12px;
    opacity: .5;
    margin: 0;
}

/* ══════════════════════════════
   EMPTY STATE
══════════════════════════════ */
.empty-state {
    padding: 48px 24px;
    text-align: center;
}
.empty-state i {
    font-size: 36px;
    opacity: .15;
    display: block;
    margin-bottom: 10px;
}
.empty-state p {
    opacity: .4;
    font-size: 14px;
    margin: 0;
}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.footer {
    font-size: 12.5px;
    opacity: .6;
}

/* ══════════════════════════════
   SCROLLBAR
══════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 10px; }

/* ══════════════════════════════
   DARK MODE
══════════════════════════════ */
/* Cards */
.dark-mode-theme .card,
[data-sidebar="dark"] ~ .main-content .card {
    border-color: rgba(255,255,255,.05);
}
/* Dropdown */
.dark-mode-theme .dropdown-menu {
    border-color: rgba(255,255,255,.06);
}

/* ══════════════════════════════
   MOBILE RESPONSIVE UTILITIES
══════════════════════════════ */
@media (max-width: 767px) {
    .card-body {
        padding: 14px;
    }
    .card-header {
        padding: 12px 14px;
    }
    .stat-card .stat-value {
        font-size: 22px;
    }
    /* Stack filter forms vertically */
    .filter-row .col-sm-4,
    .filter-row .col-sm-3,
    .filter-row .col-sm-2 {
        margin-bottom: 8px;
    }
    /* Page title spacing */
    .page-title-box {
        margin-bottom: 12px;
    }
    /* Table font size */
    .table td, .table th {
        font-size: 12.5px;
        padding: 9px 10px;
    }
}

@media (max-width: 480px) {
    .page-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .stat-card .stat-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
}