/* ========================================================= TRAX — Stagie Freight visual language Soft pastel cards, thin borders, teal/gold accents, Inter type Supports light (default) + dark via [data-theme="dark"] on ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { /* ---- Light theme (default) ---- */ --bg: #f0f4ff; --surface: #ffffff; --surface-2: #f8f9ff; --border: #e0e7ff; --border-strong: #c7d2fe; --text: #1a1a2e; --text-muted: #888; --text-faint: #aaa; --teal: #16866d; --teal-light: #1a9e82; --teal-tint-bg: #e8faf4; --teal-tint-border: #b2ead8; --gold: #f5c736; --gold-tint-bg: #fff8e6; --gold-tint-border: #fde89a; --blue: #4a90e2; --blue-tint-bg: #e6f0ff; --blue-tint-border: #b3ceff; --coral: #ff6b57; --coral-tint-bg: #fff0ee; --coral-tint-border: #ffc5bd; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(20,20,50,0.04); --shadow-md: 0 8px 24px rgba(20,20,50,0.06); } html[data-theme="dark"] { --bg: #0f1420; --surface: #1a2033; --surface-2: #212840; --border: #2a3350; --border-strong: #38426a; --text: #eef1fa; --text-muted: #9aa3c0; --text-faint: #6b7494; --teal-tint-bg: rgba(22,134,109,0.18); --teal-tint-border: rgba(47,217,172,0.45); --gold-tint-bg: rgba(245,199,54,0.14); --gold-tint-border: rgba(245,199,54,0.45); --blue-tint-bg: rgba(74,144,226,0.18); --blue-tint-border: rgba(74,144,226,0.45); --coral-tint-bg: rgba(255,107,87,0.16); --coral-tint-border: rgba(255,107,87,0.45); --shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --shadow-md: 0 8px 24px rgba(0,0,0,0.35); } * { box-sizing: border-box; } body { font-family: var(--font); background: var(--bg); color: var(--text); transition: background-color .25s ease, color .25s ease; } a { color: var(--teal); } a:hover { color: var(--teal-light); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } /* ---------- Animations ---------- */ @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes wiggle { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes growBar { from { width: 0; } to { width: var(--w, 0%); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } .content-wrapper { animation: slideIn .35s ease both; } /* ---------- Sidebar ---------- */ .main-sidebar { background: linear-gradient(160deg, var(--teal), var(--teal-light)) !important; border-right: none !important; display: flex; flex-direction: column; } .main-sidebar > .sidebar { flex: 1; overflow-y: auto; } .brand-link { background: transparent !important; border-bottom: 1.5px solid rgba(255,255,255,.2) !important; padding: 14px 14px 18px !important; display: flex; align-items: center; } .brand-link .fa-route { width: 32px; height: 32px; background: var(--gold); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--teal) !important; font-size: 15px !important; animation: wiggle 3s ease-in-out infinite; margin-right: 8px !important; } .brand-text { font-weight: 700; font-size: 0.95rem; letter-spacing: 0; color: #fff; } .main-sidebar .nav-sidebar > .nav-item > .nav-link, .main-sidebar .nav-treeview > .nav-item > .nav-link { border-radius: var(--r-sm); margin: 2px 8px; color: rgba(255,255,255,.78); font-weight: 500; transition: all .2s ease; } .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover, .main-sidebar .nav-sidebar > .nav-item > .nav-link.active, .main-sidebar .nav-treeview > .nav-item > .nav-link:hover, .main-sidebar .nav-treeview > .nav-item > .nav-link.active { background: rgba(255,255,255,.2) !important; color: #fff !important; box-shadow: none !important; } .main-sidebar .nav-sidebar > .nav-item > .nav-link.active { font-weight: 700; background: rgba(255,255,255,.25) !important; } .main-sidebar .nav-icon { color: inherit; opacity: .9; } .nav-header { color: rgba(255,255,255,.55) !important; font-size: .65rem; letter-spacing: .08em; padding: 12px 18px 4px; } .sb-user-chip { display: flex; align-items: center; gap: 8px; margin: 10px 10px 6px; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,.15); } .sb-user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; flex-shrink: 0; } .sb-user-chip .info { line-height: 1.2; overflow: hidden; } .sb-user-chip .name { font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-user-chip .role { font-size: .62rem; color: rgba(255,255,255,.7); } /* ---------- Navbar / topbar ---------- */ .main-header.navbar { background: var(--surface) !important; border-bottom: 1.5px solid var(--border) !important; box-shadow: none !important; } .main-header .nav-link { color: var(--text) !important; } .main-header .nav-link:hover { color: var(--teal) !important; } .status-pill { background: var(--teal-tint-bg); border: 1.5px solid var(--teal-tint-border); color: var(--teal); border-radius: var(--r-pill); padding: 4px 12px; font-size: .72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-light); animation: pulse 1.6s ease-in-out infinite; } /* Theme toggle switch */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: 4px 6px; cursor: pointer; color: var(--text-muted); font-size: .8rem; transition: all .2s ease; } .theme-toggle:hover { border-color: var(--border-strong); } .theme-toggle i { width: 16px; text-align: center; } .theme-toggle .fa-sun { color: var(--gold); } .theme-toggle .fa-moon { color: var(--blue); } /* ---------- Content wrapper bg ---------- */ .content-wrapper { background: var(--bg) !important; } h1,h2,h3,h4,h5,h6 { color: var(--text); font-weight: 700; } /* ---------- Welcome banner ---------- */ .welcome-banner { background: linear-gradient(120deg, var(--gold-tint-bg), var(--surface)); border: 2px solid var(--gold-tint-border); border-radius: var(--r-lg); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .welcome-banner h3 { font-size: 1.05rem; margin-bottom: 3px; } .welcome-banner p { font-size: .8rem; color: var(--text-muted); font-weight: 500; margin: 0; } .welcome-banner .emoji { font-size: 2rem; animation: float 2.5s ease-in-out infinite; } /* ---------- Stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .stat-card { border-radius: var(--r-md); padding: 16px; border: 2px solid transparent; position: relative; overflow: hidden; transition: transform .2s ease; } .stat-card:hover { transform: translateY(-3px); } .stat-card::before { content: ''; position: absolute; top: -14px; right: -14px; width: 56px; height: 56px; border-radius: 50%; opacity: .18; } .stat-card.teal { background: var(--teal-tint-bg); border-color: var(--teal-tint-border); } .stat-card.teal::before { background: var(--teal); } .stat-card.gold { background: var(--gold-tint-bg); border-color: var(--gold-tint-border); } .stat-card.gold::before { background: var(--gold); } .stat-card.blue { background: var(--blue-tint-bg); border-color: var(--blue-tint-border); } .stat-card.blue::before { background: var(--blue); } .stat-card.coral { background: var(--coral-tint-bg); border-color: var(--coral-tint-border); } .stat-card.coral::before { background: var(--coral); } .stat-card .label { font-size: .68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .stat-card .value { font-size: 1.9rem; font-weight: 300; letter-spacing: -0.03em; color: var(--text); margin: 2px 0; } .stat-card .sub { font-size: .7rem; color: var(--text-faint); font-weight: 500; } .stat-card .icon { position: absolute; top: 14px; right: 14px; font-size: 1.1rem; opacity: .5; } /* ---------- Cards (generic AdminLTE override) ---------- */ .card { background: var(--surface) !important; border: 1.5px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm) !important; color: var(--text); } .card-header { background: transparent !important; border-bottom: 1.5px solid var(--border) !important; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; padding: 14px 18px !important; } .card-title { font-size: .92rem; font-weight: 700; color: var(--text); } .card-body { padding: 16px 18px !important; color: var(--text); } .card-footer { background: transparent !important; border-top: 1.5px solid var(--border) !important; } /* ---------- Tables ---------- */ .table { color: var(--text); margin-bottom: 0; } .table thead th { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); border-bottom: 1.5px solid var(--border) !important; border-top: none !important; background: var(--surface-2); } .table td { border-top: 1px solid var(--border) !important; vertical-align: middle; font-size: .82rem; color: var(--text); } .table-hover tbody tr:hover { background: var(--surface-2) !important; } /* ---------- Badges (pill, tinted, bordered) ---------- */ .badge { border-radius: var(--r-pill) !important; font-weight: 600 !important; padding: 4px 10px !important; font-size: .68rem !important; border: 1.5px solid transparent; } .badge-status-ordered { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-muted); } .badge-status-in-transit { background: var(--blue-tint-bg); border-color: var(--blue-tint-border); color: var(--blue); } .badge-status-customs { background: var(--gold-tint-bg); border-color: var(--gold-tint-border); color: #a67c00; } .badge-status-arrived { background: var(--teal-tint-bg); border-color: var(--teal-tint-border); color: var(--teal); } .badge-status-delivered { background: var(--teal); border-color: var(--teal); color: #fff; } .badge-status-in-transit, .badge-status-customs { animation: pulse 2.2s ease-in-out infinite; } .badge-success { background: var(--teal-tint-bg) !important; border-color: var(--teal-tint-border) !important; color: var(--teal) !important; } .badge-secondary { background: var(--surface-2) !important; border-color: var(--border-strong) !important; color: var(--text-muted) !important; } .badge-warning { background: var(--gold-tint-bg) !important; border-color: var(--gold-tint-border) !important; color: #a67c00 !important; } .badge-danger { background: var(--coral-tint-bg) !important; border-color: var(--coral-tint-border) !important; color: var(--coral) !important; } .badge-info { background: var(--blue-tint-bg) !important; border-color: var(--blue-tint-border) !important; color: var(--blue) !important; } /* ---------- Buttons ---------- */ .btn { border-radius: var(--r-sm); font-weight: 600; font-size: .82rem; transition: all .15s ease; } .btn-trax { background: var(--teal); border-color: var(--teal); color: #fff; } .btn-trax:hover { background: var(--teal-light); border-color: var(--teal-light); color: #fff; transform: translateY(-1px); } .btn-outline-light { border-color: var(--border-strong); color: var(--text); background: var(--surface); } .btn-outline-light:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .btn-outline-danger { color: var(--coral); border-color: var(--coral-tint-border); } .btn-outline-danger:hover { background: var(--coral-tint-bg); color: var(--coral); border-color: var(--coral); } .btn-secondary { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); } .btn-sm { border-radius: var(--r-sm); } /* ---------- Forms ---------- */ .form-control, .custom-select, select.form-control { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: .85rem; } .form-control:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint-bg); background: var(--surface); color: var(--text); } label { font-weight: 600; font-size: .8rem; color: var(--text-muted); } .form-text.text-muted { color: var(--text-faint) !important; } .custom-control-label::before { background: var(--surface); border-color: var(--border-strong); } .custom-control-input:checked ~ .custom-control-label::before { background: var(--teal); border-color: var(--teal); } /* ---------- Route tracker (shipment status pipeline) ---------- */ .route-tracker { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: 10px 6px 4px; } .route-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; z-index: 2; } .route-step .node { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 2px solid var(--border-strong); color: var(--text-faint); font-size: .9rem; transition: all .3s ease; } .route-step.done .node { background: var(--teal-tint-bg); border-color: var(--teal); color: var(--teal); } .route-step.active .node { background: var(--teal); border-color: var(--teal); color: #fff; animation: pulse 1.4s ease-in-out infinite; box-shadow: 0 0 0 6px var(--teal-tint-bg); } .route-step.active .node .truck-icon { animation: wiggle 1s ease-in-out infinite; display: inline-block; } .route-step .label { margin-top: 8px; font-size: .68rem; font-weight: 600; color: var(--text-muted); text-align: center; } .route-step.active .label, .route-step.done .label { color: var(--text); } .route-line { position: absolute; top: 30px; left: 0; right: 0; height: 3px; background: var(--border); z-index: 1; } .route-line-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-light)); transition: width .4s ease; } @media (max-width: 575.98px) { .route-tracker { flex-direction: column; align-items: flex-start; gap: 14px; padding-left: 20px; } .route-step { flex-direction: row; align-items: center; gap: 10px; } .route-step .label { margin-top: 0; text-align: left; } .route-line { top: 0; bottom: 0; left: 19px; right: auto; width: 3px; height: auto; } .route-line-fill { width: 100% !important; height: var(--w, 0%); } } /* ---------- Dashboard stat bars ---------- */ .trax-statbar { margin-bottom: 16px; } .trax-statbar:last-child { margin-bottom: 0; } .trax-statbar__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .trax-statbar__count { font-weight: 700; color: var(--text); font-size: .85rem; } .trax-statbar__track { width: 100%; height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); } .trax-statbar__fill { height: 100%; width: var(--w, 0%); border-radius: 999px; animation: growBar .9s cubic-bezier(.22,1,.36,1) both; } .trax-statbar__fill.badge-status-ordered { background: var(--text-faint); } .trax-statbar__fill.badge-status-in-transit { background: var(--blue); } .trax-statbar__fill.badge-status-customs { background: var(--gold); } .trax-statbar__fill.badge-status-arrived { background: var(--teal-light); } .trax-statbar__fill.badge-status-delivered { background: linear-gradient(90deg, var(--teal), var(--teal-light)); } /* ---------- Login page ---------- */ body.login-page { background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-box { width: 380px; animation: slideIn .4s ease; } .login-logo { color: var(--text); font-weight: 800; font-size: 1.4rem; text-align: center; margin-bottom: 18px; } .login-logo i { width: 38px; height: 38px; background: var(--gold); color: var(--teal); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; margin-right: 8px; animation: wiggle 3s ease-in-out infinite; vertical-align: middle; } .login-card-body { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 28px 24px; } .login-box-msg { color: var(--text-muted); font-size: .85rem; text-align: center; margin-bottom: 16px; } .login-page .input-group-text { background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text-faint); } .login-page .form-control { border: 1.5px solid var(--border); } /* ---------- Small utility ---------- */ .text-muted { color: var(--text-muted) !important; } .small, small { color: var(--text-faint); } .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); } .alert { border-radius: var(--r-md); border-width: 1.5px; font-size: .85rem; } .alert-success { background: var(--teal-tint-bg); border-color: var(--teal-tint-border); color: var(--teal); } .alert-danger { background: var(--coral-tint-bg); border-color: var(--coral-tint-border); color: var(--coral); } .alert-warning { background: var(--gold-tint-bg); border-color: var(--gold-tint-border); color: #a67c00; } .alert-info { background: var(--blue-tint-bg); border-color: var(--blue-tint-border); color: var(--blue); } .alert-secondary { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); } .main-footer { background: var(--surface); border-top: 1.5px solid var(--border); color: var(--text-faint); font-size: .78rem; } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { body.sidebar-open::before { content: ""; position: fixed; inset: 0; background: rgba(15,20,32,0.55); backdrop-filter: blur(2px); z-index: 1030; animation: fadeIn 0.2s ease; } .main-sidebar { z-index: 1040; } .content-wrapper { padding: 10px !important; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .card-title { font-size: .88rem; } } /* ---------- Responsive tables: cards on phones, real table on tablet+ ---------- */ @media (max-width: 767.98px) { .table-responsive-stack table, .table-responsive-stack tbody, .table-responsive-stack tr, .table-responsive-stack td { display: block; width: 100%; } .table-responsive-stack { overflow-x: visible !important; } .table-responsive-stack thead { display: none; } .table-responsive-stack tr { margin-bottom: 12px; border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 6px 12px; background: var(--surface); box-shadow: var(--shadow-sm); } .table-responsive-stack tr:hover { background: var(--surface) !important; } .table-responsive-stack td { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px !important; border: none !important; border-bottom: 1px solid var(--border) !important; text-align: right; white-space: normal; font-size: .82rem; } .table-responsive-stack td:last-child { border-bottom: none !important; } .table-responsive-stack td::before { content: attr(data-label); font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); text-align: left; flex-shrink: 0; } .table-responsive-stack td[data-label=""]::before, .table-responsive-stack td:not([data-label])::before { content: none; } .table-responsive-stack td.cell-center { justify-content: center; } .table-responsive-stack td.cell-photo { justify-content: flex-start; } } /* ---------- Mobile-friendly filter bars & toolbars ---------- */ @media (max-width: 767.98px) { .card-header.form-inline, .card-header .form-inline { flex-direction: column; align-items: stretch !important; } .form-inline .form-control, .form-inline select, .form-inline .custom-control, .form-inline .btn { width: 100% !important; margin: 4px 0 !important; } .form-inline label { margin-bottom: 2px; } .card-header .btn.ml-auto { margin-left: 0 !important; } } /* ---------- Touch targets & spacing ---------- */ @media (max-width: 991.98px) { .btn { min-height: 40px; padding-top: .5rem; padding-bottom: .5rem; } .form-control, select.form-control { min-height: 42px; } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; } .navbar-nav .nav-link { padding: .5rem .6rem; } } /* ---------- Navbar truncation on very small phones ---------- */ @media (max-width: 400px) { .main-header .nav-link .badge { display: none; } .main-header .nav-link i.fa-user-circle + text, .main-header span.nav-link { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } .status-pill { display: none !important; } } /* ---------- Tablet tuning (768–991px) ---------- */ @media (min-width: 768px) and (max-width: 991.98px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .table td, .table th { font-size: .78rem; padding: .6rem; } } /* ---------- Small phone tuning (<576px) ---------- */ @media (max-width: 575.98px) { .stat-grid { grid-template-columns: 1fr; } .welcome-banner { flex-direction: column; align-items: flex-start; gap: 8px; } .welcome-banner .emoji { align-self: flex-end; margin-top: -28px; } .login-box { width: 92%; } } /* ---------- Small phone tuning (<400px) ---------- */ @media (max-width: 399.98px) { .welcome-banner h3 { font-size: .92rem; } .welcome-banner p { font-size: .72rem; } .stat-card .value { font-size: 1.5rem; } .login-logo { font-size: 1.15rem; } .card-body { padding: 12px 14px !important; } } /* ---------- Images inside forms/edit views ---------- */ @media (max-width: 575.98px) { .d-flex.flex-wrap > .mr-2.mb-2 { flex: 1 1 30%; } }