/* =========================================================================
   SMS ERP — admin theme (Bootstrap 5)
   A clean, modern dashboard shell: fixed sidebar, sticky topbar, soft cards.
   ========================================================================= */
:root {
    --sms-primary: #4f46e5;
    --sms-primary-rgb: 79, 70, 229;
    --sms-primary-dark: #4338ca;
    --sms-sidebar-bg: #1e2a3b;
    --sms-sidebar-bg-2: #18222f;
    --sms-sidebar-text: #aeb9c7;
    --sms-sidebar-active: #ffffff;
    --sms-body-bg: #f4f6fb;
    --sms-card-shadow: 0 2px 12px rgba(20, 30, 60, .06);
    --sms-sidebar-w: 260px;
}

body {
    background: var(--sms-body-bg);
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: .9rem;
    color: #384551;
}

/* ---------- Layout shell ---------- */
.sms-layout { display: flex; min-height: 100vh; }

.sms-sidebar {
    width: var(--sms-sidebar-w);
    background: linear-gradient(180deg, var(--sms-sidebar-bg), var(--sms-sidebar-bg-2));
    color: var(--sms-sidebar-text);
    position: fixed; top: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
}
.sms-content {
    flex: 1; min-width: 0;
    margin-left: var(--sms-sidebar-w);
    display: flex; flex-direction: column;
    transition: margin .25s ease;
}

/* ---------- Sidebar brand ---------- */
.sms-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.05rem 1.25rem;
    color: #fff; font-weight: 700; font-size: 1.15rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.sms-brand .logo {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--sms-primary); color: #fff;
    display: grid; place-items: center; font-size: 1.1rem;
}

/* ---------- Sidebar menu ---------- */
.sms-menu { list-style: none; margin: 0; padding: .5rem 0 2rem; overflow-y: auto; flex: 1; }
.sms-menu::-webkit-scrollbar { width: 6px; }
.sms-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.sms-menu .header {
    text-transform: uppercase; font-size: .68rem; letter-spacing: .08em;
    color: rgba(255,255,255,.35); padding: 1rem 1.5rem .35rem; font-weight: 600;
}
.sms-menu a {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem 1.5rem; color: var(--sms-sidebar-text);
    text-decoration: none; font-weight: 500; border-left: 3px solid transparent;
    transition: all .15s ease;
}
.sms-menu a:hover { color: #fff; background: rgba(255,255,255,.04); }
.sms-menu a i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sms-menu li.active > a {
    color: var(--sms-sidebar-active);
    background: rgba(var(--sms-primary-rgb), .18);
    border-left-color: var(--sms-primary);
}
.sms-menu .badge-soon {
    margin-left: auto; font-size: .6rem; font-weight: 600;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.55);
    padding: .15rem .4rem; border-radius: 4px;
}
.sms-menu .submenu { list-style: none; margin: 0; padding: 0; background: rgba(0,0,0,.18); }
.sms-menu .submenu a { padding-left: 3.1rem; font-size: .85rem; }
.sms-menu .caret { margin-left: auto; transition: transform .2s; font-size: .8rem; }
.sms-menu li.open > a .caret { transform: rotate(90deg); }

/* ---------- Topbar ---------- */
.sms-topbar {
    height: 64px; background: #fff; position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
    box-shadow: 0 1px 4px rgba(20,30,60,.05);
}
.sms-topbar .btn-toggle { border: 0; background: transparent; font-size: 1.4rem; color: #5a6678; }
.sms-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--sms-primary); color: #fff;
    display: grid; place-items: center; font-weight: 600; font-size: .85rem;
}
.sms-avatar.sm { width: 30px; height: 30px; font-size: .72rem; }

/* ---------- Top menu bar (mirrors sidebar) ---------- */
.sms-topmenu {
    background: #fff; border-bottom: 1px solid #eef1f6;
    position: sticky; top: 64px; z-index: 1020;
}
.sms-topmenu-inner {
    display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px;
    padding: 0 1rem;
}
.sms-topmenu .tm-link {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 0; background: transparent; color: #5a6678; text-decoration: none;
    font-weight: 600; font-size: .83rem; padding: .55rem .8rem;
    border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.sms-topmenu .tm-link i { font-size: .95rem; }
.sms-topmenu .tm-link.dropdown-toggle::after { margin-left: .15rem; }
.sms-topmenu .tm-link:hover { color: var(--sms-primary); }
.sms-topmenu .tm-link.active { color: var(--sms-primary); border-bottom-color: var(--sms-primary); }
.sms-topmenu .dropdown-menu { font-size: .85rem; margin-top: 0; border: 1px solid #eef1f6; }
.sms-topmenu .dropdown-item { border-radius: 6px; padding: .35rem .6rem; }
.sms-topmenu .dropdown-item.active { background: rgba(var(--sms-primary-rgb), .12); color: var(--sms-primary); }

/* Mega-menu panel: columns side-by-side so everything is visible at once.
   display:flex only when open (.show) so it stays hidden otherwise. */
.sms-topmenu .tm-mega {
    flex-wrap: wrap; gap: .5rem 1.25rem;
    padding: .85rem 1rem; width: max-content; max-width: 92vw;
}
.sms-topmenu .tm-mega.show { display: flex; }
.sms-topmenu .tm-col { flex: 0 0 auto; width: 185px; }
.sms-topmenu .tm-col-head {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: #8a96a6; font-weight: 700; padding: .15rem .6rem .3rem;
    border-bottom: 1px solid #f0f2f6; margin-bottom: .25rem;
}

/* ---------- Page body ---------- */
.sms-page { padding: 1.5rem; flex: 1; }
.page-head { margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.35rem; font-weight: 700; margin: 0; color: #2b3543; }
.page-head .breadcrumb { margin: .25rem 0 0; font-size: .8rem; }

/* ---------- Cards ---------- */
.card { border: 0; border-radius: 12px; box-shadow: var(--sms-card-shadow); }
.card-header { background: transparent; border-bottom: 1px solid #eef1f6; font-weight: 600; padding: 1rem 1.25rem; }
.stat-card .icon {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem;
}
.stat-card .value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: #2b3543; }
.stat-card .label { color: #8a96a6; font-size: .8rem; }

/* ---------- Dashboard KPI gradient cards ---------- */
.kpi { border: 0; border-radius: 12px; color: #fff; overflow: hidden; position: relative; box-shadow: var(--sms-card-shadow); height: 100%; }
.kpi .kpi-body { padding: 1rem 1.1rem; }
.kpi .kpi-val { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kpi .kpi-label { opacity: .92; font-size: .9rem; }
.kpi .kpi-icon { position: absolute; right: .7rem; top: .7rem; font-size: 2.4rem; opacity: .25; }
.kpi .kpi-foot { background: rgba(0,0,0,.13); padding: .45rem 1.1rem; font-size: .8rem; display: flex; justify-content: space-between; align-items: center; }
.kpi .kpi-foot a, .kpi .kpi-foot { color: #fff; text-decoration: none; }
.grad-green  { background: linear-gradient(135deg, #1f9d63, #12643f); }
.grad-red    { background: linear-gradient(135deg, #e0566a, #b23a4d); }
.grad-cyan   { background: linear-gradient(135deg, #21b6d4, #1690a8); }
.grad-amber  { background: linear-gradient(135deg, #f2b134, #d9920f); }
.grad-blue   { background: linear-gradient(135deg, #2f8fe0, #1f6ab0); }
.grad-teal   { background: linear-gradient(135deg, #1aa179, #137a5b); }
.grad-orange { background: linear-gradient(135deg, #f08a3c, #d96e1a); }
.grad-purple { background: linear-gradient(135deg, #8b5cf6, #6d3fd4); }

/* ---------- Dashboard quick-action tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    text-align: center; text-decoration: none; padding: .85rem .35rem; border: 1px solid #eef1f6;
    border-radius: 10px; color: #3a4654; transition: transform .12s, box-shadow .12s, border-color .12s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,30,60,.1); border-color: transparent; color: #2b3543; }
.tile .tile-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.25rem; }
.tile .tile-label { font-size: .76rem; font-weight: 600; line-height: 1.15; }

/* ---------- Bits ---------- */
.btn-primary { --bs-btn-bg: var(--sms-primary); --bs-btn-border-color: var(--sms-primary); --bs-btn-hover-bg: var(--sms-primary-dark); --bs-btn-hover-border-color: var(--sms-primary-dark); --bs-btn-active-bg: var(--sms-primary-dark); }
.btn-outline-primary { --bs-btn-color: var(--sms-primary); --bs-btn-border-color: var(--sms-primary); --bs-btn-hover-bg: var(--sms-primary); --bs-btn-hover-border-color: var(--sms-primary); }
.text-primary { color: var(--sms-primary) !important; }
a { color: var(--sms-primary); }
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.bg-soft-primary { background: rgba(var(--sms-primary-rgb), .12); color: var(--sms-primary); }
.bg-soft-success { background: rgba(25,135,84,.12); color: #198754; }
.bg-soft-warning { background: rgba(255,193,7,.16); color: #b8860b; }
.bg-soft-info    { background: rgba(13,202,240,.14); color: #0aa2c0; }
.bg-soft-danger  { background: rgba(220,53,69,.12); color: #dc3545; }

/* ---------- Responsive ---------- */
.sms-backdrop { display: none; }
@media (max-width: 991.98px) {
    .sms-sidebar { transform: translateX(-100%); }
    .sms-content { margin-left: 0; }
    body.sidebar-open .sms-sidebar { transform: translateX(0); }
    body.sidebar-open .sms-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; }
}

/* ---------- Print ---------- */
@media print {
    .sms-sidebar, .sms-topbar, .page-head .breadcrumb, footer, .no-print,
    .sms-backdrop, form.row { display: none !important; }
    .sms-content { margin-left: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff; }
}

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.auth-card { width: 100%; max-width: 420px; border-radius: 16px; }