/*
 * SIM Aset SMOE - tema warna mengikuti logo PT. SMOE Indonesia
 * Hijau teal #006B5E (simbol logo), hitam #1A1A1A (tulisan logo)
 * @author Usnul Fikry (231055201029)
 */
:root {
    --smoe: #006B5E;
    --smoe-dark: #00524A;
    --smoe-darker: #003D37;
    --smoe-light: #E6F2F0;
    --ink: #1A1A1A;
    --muted: #5F6B69;
    --line: #DCE5E3;
    --sidebar-w: 256px;
    --bs-primary: #006B5E;
    --bs-primary-rgb: 0, 107, 94;
    --bs-link-color: #006B5E;
    --bs-link-hover-color: #00524A;
    --bs-body-color: #1A1A1A;
    --bs-body-font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { background: #F3F7F6; color: var(--ink); font-size: .925rem; }
a { color: var(--smoe); }
.btn-primary { --bs-btn-bg: var(--smoe); --bs-btn-border-color: var(--smoe); --bs-btn-hover-bg: var(--smoe-dark); --bs-btn-hover-border-color: var(--smoe-dark); --bs-btn-active-bg: var(--smoe-darker); --bs-btn-active-border-color: var(--smoe-darker); --bs-btn-disabled-bg: var(--smoe); --bs-btn-disabled-border-color: var(--smoe); }
.btn-outline-primary { --bs-btn-color: var(--smoe); --bs-btn-border-color: var(--smoe); --bs-btn-hover-bg: var(--smoe); --bs-btn-hover-border-color: var(--smoe); --bs-btn-active-bg: var(--smoe-dark); --bs-btn-active-border-color: var(--smoe-dark); }
.text-bg-primary { background-color: #2F6FB5 !important; }  /* STOCK = biru */
.form-control:focus, .form-select:focus { border-color: #5FA79D; box-shadow: 0 0 0 .2rem rgba(0, 107, 94, .18); }
.form-check-input:checked { background-color: var(--smoe); border-color: var(--smoe); }

/* ---------- layout ---------- */
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--smoe); color: #fff; display: flex; flex-direction: column; z-index: 1040; transition: transform .2s; }
.app-sidebar .brand { background: #fff; padding: 14px 18px 12px; border-bottom: 4px solid var(--smoe-darker); }
.app-sidebar .brand img { height: 44px; display: block; }
.app-sidebar .brand .app-name { font-weight: 700; color: var(--smoe); font-size: 1rem; margin-top: 6px; letter-spacing: .2px; }
.app-sidebar nav { overflow-y: auto; flex: 1; padding: 10px 0 16px; }
.app-sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.6); padding: 14px 22px 6px; }
.app-sidebar .nav-link { color: rgba(255,255,255,.92); padding: 9px 22px; display: flex; align-items: center; gap: 11px; border-left: 3px solid transparent; }
.app-sidebar .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-sidebar .nav-link.active { background: var(--smoe-darker); border-left-color: #fff; color: #fff; font-weight: 600; }
.app-sidebar .sidebar-foot { font-size: .72rem; color: rgba(255,255,255,.65); padding: 10px 22px 14px; border-top: 1px solid rgba(255,255,255,.12); }

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar { background: #fff; border-bottom: 1px solid var(--line); height: 60px; display: flex; align-items: center; padding: 0 22px; gap: 12px; position: sticky; top: 0; z-index: 1030; }
.app-topbar .page-title { font-weight: 600; font-size: 1.05rem; margin: 0; }
.app-content { padding: 22px; flex: 1; }
.app-footer { padding: 12px 22px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); background: #fff; }

.role-badge { background: var(--smoe-light); color: var(--smoe-dark); font-weight: 600; font-size: .72rem; border-radius: 20px; padding: 3px 10px; }
.bell-count { position: absolute; top: 2px; right: 0; font-size: .62rem; }
.notif-menu { width: 340px; max-height: 420px; overflow-y: auto; }
.notif-menu .unread { background: var(--smoe-light); }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.show { transform: none; box-shadow: 0 0 30px rgba(0,0,0,.3); }
    .app-main { margin-left: 0; }
    .app-content { padding: 16px; }
}

/* ---------- komponen ---------- */
.card { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; padding: 12px 16px; }
.stat-card { padding: 14px 16px; display: flex; flex-direction: row; align-items: center; gap: 12px; height: 100%; }
.stat-card .ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.35rem; flex: none; }
.stat-card .val { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.stat-card .lbl { color: var(--muted); font-size: .78rem; line-height: 1.25; }
@media (min-width: 1200px) and (max-width: 1599.98px) { .col-xl-2 > a > .stat-card { flex-direction: column; align-items: flex-start; } }
.ico-teal   { background: var(--smoe-light); color: var(--smoe); }
.ico-green  { background: #E3F4E8; color: #198754; }
.ico-blue   { background: #E5EEF8; color: #2F6FB5; }
.ico-orange { background: #FFF1E0; color: #D9730D; }
.ico-red    { background: #FBE7E7; color: #C62828; }
.table > :not(caption) > * > * { padding: .55rem .75rem; }
.table thead th { background: var(--smoe-light); color: var(--smoe-darker); font-weight: 600; font-size: .8rem; white-space: nowrap; }

/* ---------- halaman login ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-side { background: var(--smoe); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-side::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%;
    background: repeating-linear-gradient(-12deg, rgba(255,255,255,.10) 0 14px, transparent 14px 26px); }
.auth-side h1 { font-size: 2rem; font-weight: 700; }
.auth-side .lead { color: rgba(255,255,255,.85); max-width: 460px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.auth-form .box { width: 100%; max-width: 380px; }
.auth-form img.logo { height: 64px; }
@media (max-width: 767.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }
.pagination { --bs-pagination-color: var(--smoe); --bs-pagination-hover-color: var(--smoe-dark); --bs-pagination-active-bg: var(--smoe); --bs-pagination-active-border-color: var(--smoe); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(0,107,94,.18); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--smoe); }
/* filter ringkas di header kartu */
.card-header form.d-flex { flex-wrap: wrap; }
.card-header form.d-flex .form-control, .card-header form.d-flex .form-select { width: auto; flex: 0 1 auto; }
.card-header form.d-flex input[type=date] { width: 140px; }
.card-header form.d-flex input[type=search] { min-width: 190px; }