/* ========================================================================== TRANSPORT ERP — PREMIUM THEME Light/Dark via [data-theme] on , driven by CSS variables. ========================================================================== */ :root{ --bg: #f4f6fb; --surface: #ffffff; --surface-2: #f8f9fc; --border: #e7e9f3; --text: #1e2233; --text-muted: #7d8298; --sidebar-bg: #14162b; --sidebar-text: #b7bad3; --sidebar-active: #4d6bfe; --sidebar-hover: #1e2140; --primary: #4d6bfe; --primary-dark: #3b54d6; --success: #17b26a; --danger: #f04438; --warning: #f79009; --info: #0ba5ec; --radius: 14px; --shadow-sm: 0 1px 2px rgba(20,22,43,.06); --shadow-md: 0 8px 24px rgba(20,22,43,.08); --topbar-h: 68px; --sidebar-w: 260px; } [data-theme="dark"]{ --bg: #0f1123; --surface: #171933; --surface-2: #1d2040; --border: #2a2d52; --text: #eef0fb; --text-muted: #9195b8; --sidebar-bg: #0b0c1c; --sidebar-text: #9b9fc4; --sidebar-hover: #14162b; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 8px 24px rgba(0,0,0,.4); } *{ box-sizing: border-box; } body{ background: var(--bg); color: var(--text); font-family: 'Inter','Segoe UI',system-ui,sans-serif; font-size: 14.5px; transition: background .2s ease, color .2s ease; } a{ text-decoration: none; } /* ---------------- Sidebar ---------------- */ .app-sidebar{ position: fixed; top:0; left:0; bottom:0; width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-text); z-index: 1030; display:flex; flex-direction:column; transition: width .2s ease, transform .2s ease; } .app-sidebar .brand{ height: var(--topbar-h); display:flex; align-items:center; gap:.6rem; padding: 0 1.25rem; color:#fff; font-weight:700; font-size:1.05rem; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink:0; } .app-sidebar .brand .logo-badge{ width:34px;height:34px;border-radius:10px; background: linear-gradient(135deg,var(--primary),#8fa0ff); display:flex;align-items:center;justify-content:center; font-weight:800; color:#fff; } .app-sidebar nav{ overflow-y:auto; padding: .75rem .75rem 1.5rem; flex:1; } .app-sidebar .nav-section-title{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-muted); padding: 1rem .75rem .35rem; opacity:.7; } .app-sidebar .nav-link{ display:flex; align-items:center; gap:.7rem; color: var(--sidebar-text); padding:.62rem .8rem; border-radius:10px; font-size:.88rem; margin-bottom:2px; } .app-sidebar .nav-link i{ font-size:1.05rem; width:20px; text-align:center; } .app-sidebar .nav-link:hover{ background: var(--sidebar-hover); color:#fff; } .app-sidebar .nav-link.active{ background: linear-gradient(135deg,var(--primary),#6f8bff); color:#fff; box-shadow: var(--shadow-sm); } .app-sidebar .nav-link .badge{ margin-left:auto; } /* ---------------- Topbar ---------------- */ .app-topbar{ position: fixed; top:0; left:var(--sidebar-w); right:0; height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display:flex; align-items:center; gap:1rem; padding: 0 1.5rem; z-index: 1020; transition: left .2s ease; } .app-main{ margin-left: var(--sidebar-w); padding-top: calc(var(--topbar-h) + 1.5rem); padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 2rem; min-height: 100vh; transition: margin-left .2s ease; } body.sidebar-collapsed .app-sidebar{ width: 78px; } body.sidebar-collapsed .app-sidebar .brand span, body.sidebar-collapsed .app-sidebar .nav-link span, body.sidebar-collapsed .app-sidebar .nav-section-title{ display:none; } body.sidebar-collapsed .app-topbar{ left: 78px; } body.sidebar-collapsed .app-main{ margin-left: 78px; } .theme-toggle-btn, .icon-btn{ width:40px;height:40px;border-radius:10px; border:1px solid var(--border); background: var(--surface-2); color: var(--text); display:flex; align-items:center; justify-content:center; } .icon-btn:hover, .theme-toggle-btn:hover{ background: var(--border); } /* ---------------- Cards ---------------- */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-header{ background: transparent; border-bottom:1px solid var(--border); font-weight:600; } .stat-card{ border-radius: var(--radius); padding: 1.15rem 1.25rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display:flex; align-items:center; gap:1rem; } .stat-card .icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; font-size:1.3rem; color:#fff; flex-shrink:0; } .stat-card .value{ font-size:1.45rem; font-weight:700; line-height:1; color:var(--text); } .stat-card .label{ font-size:.78rem; color:var(--text-muted); margin-top:2px; } .bg-grad-blue{ background: linear-gradient(135deg,#4d6bfe,#7d9cff); } .bg-grad-green{ background: linear-gradient(135deg,#17b26a,#5adf9a); } .bg-grad-orange{ background: linear-gradient(135deg,#f79009,#ffc069); } .bg-grad-red{ background: linear-gradient(135deg,#f04438,#ff8f88); } .bg-grad-purple{ background: linear-gradient(135deg,#8b5cf6,#c4b5fd); } .bg-grad-teal{ background: linear-gradient(135deg,#0ba5ec,#67e8f9); } /* ---------------- Tables ---------------- */ .table{ color: var(--text); } .table thead th{ background: var(--surface-2); color: var(--text-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border-bottom: 1px solid var(--border); font-weight:700; white-space:nowrap; } .table td{ vertical-align:middle; border-color: var(--border); } .table-hover tbody tr:hover{ background: var(--surface-2); } .badge-soft-success{ background: rgba(23,178,106,.12); color:#17b26a; font-weight:600; } .badge-soft-danger{ background: rgba(240,68,56,.12); color:#f04438; font-weight:600; } .badge-soft-warning{ background: rgba(247,144,9,.14); color:#b9670a; font-weight:600; } .badge-soft-info{ background: rgba(11,165,236,.12); color:#0ba5ec; font-weight:600; } .badge-soft-primary{ background: rgba(77,107,254,.12); color:#4d6bfe; font-weight:600; } .badge-soft-secondary{ background: rgba(125,130,152,.14); color:#7d8298; font-weight:600; } /* ---------------- Forms ---------------- */ .form-control, .form-select{ background: var(--surface); border:1px solid var(--border); color: var(--text); border-radius:9px; } .form-control:focus, .form-select:focus{ background: var(--surface); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(77,107,254,.15); } .form-label{ font-size:.82rem; font-weight:600; color:var(--text-muted); } .input-group-text{ background: var(--surface-2); border-color: var(--border); color: var(--text-muted); } .btn-primary{ background: var(--primary); border-color: var(--primary); } .btn-primary:hover{ background: var(--primary-dark); border-color: var(--primary-dark); } .btn-soft{ background: var(--surface-2); border:1px solid var(--border); color: var(--text); } .btn-soft:hover{ background: var(--border); } /* ---------------- Modal / Login ---------------- */ .modal-content{ background: var(--surface); color: var(--text); border-radius: var(--radius); border:1px solid var(--border); } .login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: radial-gradient(1200px 600px at 10% 10%, #202453 0%, #0f1123 45%, #0b0c1c 100%); } .login-card{ width: 100%; max-width: 400px; background: var(--surface); border-radius:20px; padding:2.25rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); } /* ---------------- Misc ---------------- */ .page-title{ font-size:1.3rem; font-weight:700; } .breadcrumb-muted{ color: var(--text-muted); font-size:.85rem; } .section-divider{ height:1px; background:var(--border); margin: 1rem 0; } ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ background: var(--border); border-radius:8px; } @media (max-width: 991px){ .app-sidebar{ transform: translateX(-100%); width: var(--sidebar-w); } body.sidebar-mobile-open .app-sidebar{ transform: translateX(0); } .app-topbar, .app-main{ left:0; margin-left:0; } }