/* =========================================================
   FILE: assets/css/style.css
   Sistem Monitoring Kendaraan Gudang Real-Time
   Warna utama: #1e3a8a (biru dongker), #f3f4f6 (abu)
   ========================================================= */

:root {
    --biru-utama: #1e3a8a;
    --biru-terang: #2563eb;
    --abu-bg: #f3f4f6;
    --putih: #ffffff;
    --kuning: #facc15;
    --biru-loading: #3b82f6;
    --orange: #f97316;
    --hijau: #22c55e;
    --abu-keluar: #9ca3af;
    --merah: #ef4444;
    --teks-gelap: #1f2937;
    --border-warna: #e5e7eb;
    --radius: 10px;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--abu-bg);
    color: var(--teks-gelap);
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ===================== LOGIN PAGE ===================== */
.login-body {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-container { width: 100%; max-width: 420px; }
.login-box {
    background: var(--putih);
    border-radius: var(--radius);
    padding: 40px 32px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.logo-circle {
    width: 70px; height: 70px; border-radius: 50%;
    background: var(--biru-utama); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 18px; margin: 0 auto 14px;
}
.login-logo h1 { font-size: 18px; color: var(--biru-utama); letter-spacing: 1px; }
.login-logo h2 { font-size: 13px; color: #6b7280; font-weight: normal; margin-top: 4px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #374151; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border-warna);
    border-radius: 8px; font-size: 14px; transition: border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--biru-terang); box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.btn { padding: 11px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; transition: opacity .2s, transform .1s; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--biru-utama); color: #fff; }
.btn-primary:hover { opacity: 0.9; }
.btn-block { width: 100%; }
.btn-secondary { background: #e5e7eb; color: #374151; }
.btn-success { background: var(--hijau); color: #fff; }
.btn-warning { background: var(--kuning); color: #78350f; }
.btn-info { background: var(--biru-loading); color: #fff; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-danger { background: var(--merah); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 6px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }

.login-footer { text-align: center; margin-top: 20px; color: #6b7280; font-size: 13px; }

/* ===================== LAYOUT UTAMA ===================== */
.app-wrapper { display: flex; min-height: 100vh; }

.topbar {
    position: fixed; top: 0; left: 240px; right: 0; height: 64px;
    background: var(--putih); border-bottom: 1px solid var(--border-warna);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; z-index: 100; box-shadow: var(--shadow);
    transition: left .2s;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.btn-toggle-sidebar { background: none; border: none; font-size: 20px; color: var(--biru-utama); display: none; }
.logo-app { display: flex; align-items: center; gap: 10px; }
.logo-icon { font-size: 26px; }
.logo-text strong { display: block; color: var(--biru-utama); font-size: 15px; }
.logo-text small { color: #6b7280; font-size: 11px; }
.topbar-center h3 { color: #374151; font-size: 16px; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.jam-realtime {
    font-weight: 700; color: var(--biru-utama); font-size: 15px;
    background: var(--abu-bg); padding: 6px 14px; border-radius: 6px; letter-spacing: 1px;
}
.user-info { display: flex; align-items: center; gap: 10px; }
.user-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--biru-utama);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.user-detail strong { display: block; font-size: 13.5px; }
.user-detail small { color: #6b7280; font-size: 11.5px; }

.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
    background: var(--biru-utama); z-index: 200; padding-top: 64px;
    transition: left .2s; overflow-y: auto;
}
.sidebar-menu { display: flex; flex-direction: column; padding: 16px 0; }
.menu-item {
    color: #dbeafe; padding: 13px 24px; font-size: 14.5px; font-weight: 500;
    display: flex; align-items: center; gap: 12px; transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}
.menu-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.menu-item.active { background: rgba(255,255,255,0.14); color: #fff; border-left-color: var(--kuning); }
.menu-icon { font-size: 17px; }
.menu-logout { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.15); }

.main-content {
    margin-left: 240px; margin-top: 64px; padding: 24px; width: calc(100% - 240px);
    min-height: calc(100vh - 64px);
}

/* ===================== CARD DASHBOARD ===================== */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.card-stat {
    background: var(--putih); border-radius: var(--radius); padding: 18px 20px;
    box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px;
    border-left: 5px solid var(--biru-utama);
}
.card-stat.c-antri { border-left-color: var(--kuning); }
.card-stat.c-loading { border-left-color: var(--biru-loading); }
.card-stat.c-unloading { border-left-color: var(--orange); }
.card-stat.c-selesai { border-left-color: var(--hijau); }
.card-stat.c-rata { border-left-color: #8b5cf6; }
.card-icon { font-size: 30px; }
.card-info .card-value { font-size: 24px; font-weight: 800; color: var(--teks-gelap); }
.card-info .card-label { font-size: 12.5px; color: #6b7280; font-weight: 600; }

.grid-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.chart-box {
    background: var(--putih); border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow);
}
.chart-box h4 { margin-bottom: 12px; color: var(--biru-utama); font-size: 15px; }
.chart-box canvas { max-height: 280px; }

.panel {
    background: var(--putih); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow); margin-bottom: 20px;
}
.panel h4 { color: var(--biru-utama); margin-bottom: 14px; font-size: 16px; }

/* ===================== TABEL ===================== */
.table-wrapper { overflow-x: auto; }
table.table-data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.table-data th {
    background: var(--biru-utama); color: #fff; padding: 10px 12px; text-align: left;
    white-space: nowrap; position: sticky; top: 0;
}
table.table-data td { padding: 9px 12px; border-bottom: 1px solid var(--border-warna); white-space: nowrap; }
table.table-data tbody tr:hover { background: #f9fafb; }

.badge-status {
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #fff;
    display: inline-block;
}
.status-antri { background: var(--kuning); color: #78350f; }
.status-loading { background: var(--biru-loading); }
.status-unloading { background: var(--orange); }
.status-selesai { background: var(--hijau); }
.status-keluar { background: var(--abu-keluar); }

/* ===================== FORM INPUT KENDARAAN ===================== */
.form-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.form-grid .full-width { grid-column: 1 / -1; }

/* ===================== TABS GATE ===================== */
.gate-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.gate-tab-btn {
    padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-warna);
    background: #fff; font-size: 13px; font-weight: 600; color: #374151;
}
.gate-tab-btn.active { background: var(--biru-utama); color: #fff; border-color: var(--biru-utama); }
.gate-content { display: none; }
.gate-content.active { display: block; }
.gate-vehicle-card {
    background: #fff; border-radius: 8px; padding: 12px 16px; margin-bottom: 10px;
    box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px;
}
.gate-empty { color: #9ca3af; text-align: center; padding: 30px 0; font-size: 14px; }

/* ===================== FILTER LAPORAN ===================== */
.filter-bar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
    align-items: end;
}
.filter-bar .btn-filter-group { display: flex; gap: 8px; }

.summary-box {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
    margin: 16px 0;
}
.summary-item {
    background: var(--abu-bg); border-radius: 8px; padding: 14px; text-align: center;
}
.summary-item .val { font-size: 20px; font-weight: 800; color: var(--biru-utama); }
.summary-item .lbl { font-size: 12px; color: #6b7280; margin-top: 4px; }

/* ===================== MASTER DATA TABS ===================== */
.master-tabs { display: flex; gap: 10px; margin-bottom: 18px; border-bottom: 2px solid var(--border-warna); }
.master-tab-btn {
    padding: 10px 20px; font-weight: 600; color: #6b7280; border-bottom: 3px solid transparent;
    background: none; border-top: none; border-left: none; border-right: none;
}
.master-tab-btn.active { color: var(--biru-utama); border-bottom-color: var(--biru-utama); }
.master-content { display: none; }
.master-content.active { display: block; }

/* ===================== KARTU CETAK ===================== */
.kartu-cetak {
    max-width: 420px; margin: 30px auto; background: #fff; border: 2px dashed var(--biru-utama);
    border-radius: 10px; padding: 24px;
}
.kartu-cetak h2 { text-align: center; color: var(--biru-utama); margin-bottom: 4px; }
.kartu-cetak .sub { text-align: center; color: #6b7280; font-size: 12.5px; margin-bottom: 16px; }
.kartu-cetak table { width: 100%; font-size: 14px; }
.kartu-cetak table td { padding: 6px 0; vertical-align: top; }
.kartu-cetak table td.label { width: 130px; color: #6b7280; }
.kartu-cetak .no-polisi-besar {
    text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 2px;
    background: var(--biru-utama); color: #fff; padding: 10px; border-radius: 8px; margin-bottom: 16px;
}
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
    .topbar { left: 0; }
    .sidebar { left: -240px; }
    .sidebar.show { left: 0; }
    .main-content { margin-left: 0; width: 100%; }
    .btn-toggle-sidebar { display: block; }
    .topbar-center h3 { font-size: 13.5px; }
    .jam-realtime { font-size: 12px; padding: 5px 8px; }
    .user-detail { display: none; }
}
@media (max-width: 500px) {
    .main-content { padding: 14px; }
    .card-stat { padding: 14px; }
    .card-info .card-value { font-size: 19px; }
}

/* ===================== MODAL SEDERHANA ===================== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 500;
    display: none; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.show { display: flex; }
.modal-box {
    background: #fff; border-radius: var(--radius); padding: 24px; width: 100%; max-width: 480px;
    max-height: 90vh; overflow-y: auto;
}
.modal-box h4 { color: var(--biru-utama); margin-bottom: 16px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.action-btn-group { display: flex; gap: 6px; flex-wrap: wrap; }

.no-polisi-cell { font-weight: 700; }


/* =========================================================
   PROFESSIONAL UI / RESPONSIVE / TV 45"
   ========================================================= */
:root{
    --navy:#0f172a;
    --navy-2:#172554;
    --surface:#ffffff;
    --muted:#64748b;
    --line:#e2e8f0;
    --soft:#f8fafc;
    --radius-lg:16px;
}
body{background:#f1f5f9;}
.panel,.chart-box,.card-stat{border:1px solid rgba(15,23,42,.06);border-radius:16px;}
.panel{padding:22px;}
.card-stat{min-height:112px;padding:20px;background:linear-gradient(145deg,#fff,#f8fafc);}
.card-info .card-value{font-size:30px;letter-spacing:-.5px;}
.card-info .card-value small{font-size:16px;color:var(--muted);margin-left:2px;}
.card-label{letter-spacing:.1px;}
.dashboard-hero{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    margin-bottom:20px;padding:24px 26px;border-radius:18px;color:#fff;
    background:linear-gradient(115deg,#0f172a,#1e3a8a 60%,#2563eb);
    box-shadow:0 12px 30px rgba(15,23,42,.16);
}
.dashboard-hero .eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;opacity:.7;margin-bottom:6px;}
.dashboard-hero h1{font-size:25px;margin-bottom:5px;letter-spacing:-.5px;}
.dashboard-hero p{font-size:13px;opacity:.82;max-width:760px;}
.dashboard-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.tv-launch{white-space:nowrap;background:#fff;color:#0f172a!important;border:0;}
.tv-exit{white-space:nowrap;background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25);}
.percent-card .card-info{flex:1;min-width:0;}
.mini-progress{height:5px;background:#e2e8f0;border-radius:10px;overflow:hidden;margin-top:8px;}
.mini-progress span{display:block;height:100%;width:0;border-radius:10px;transition:width .5s ease;background:currentColor;}
.c-loading .mini-progress span{color:#3b82f6;background:#3b82f6;}
.c-unloading .mini-progress span{color:#f97316;background:#f97316;}
.c-selesai .mini-progress span{color:#22c55e;background:#22c55e;}
.client-chip{
    display:inline-flex;align-items:center;padding:4px 9px;border-radius:7px;
    background:#eef2ff;color:#3730a3;font-size:11px;font-weight:800;white-space:nowrap;
}
table.table-data th{font-size:12px;letter-spacing:.2px;text-transform:uppercase;}
table.table-data td{padding:11px 12px;}
table.table-data tbody tr:nth-child(even){background:#fafafa;}
table.table-data tbody tr:hover{background:#eff6ff;}
.form-group label{font-size:12.5px;letter-spacing:.15px;}
.form-group input,.form-group select,.form-group textarea{background:#fff;min-height:44px;}
.btn{min-height:40px;}
.btn-sm{min-height:32px;}
.gate-tabs{padding-bottom:4px;}
.gate-tab-btn{min-height:38px;}
.gate-vehicle-card{border:1px solid var(--line);padding:15px 17px;}
.sidebar{background:linear-gradient(180deg,#0f172a,#172554);}
.logo-text strong{letter-spacing:.3px;}

@media (min-width: 1400px){
    .main-content{padding:26px 30px;}
    .grid-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;}
    .grid-charts{grid-template-columns:1.15fr 1.15fr .8fr;gap:18px;}
    .chart-box canvas{max-height:300px;}
}
@media (max-width: 1100px){
    .dashboard-hero{align-items:flex-start;}
    .grid-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width: 700px){
    .dashboard-hero{padding:19px;display:block;}
    .dashboard-hero h1{font-size:20px;}
    .dashboard-actions{margin-top:14px;}
    .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .card-stat{min-height:92px;padding:14px;}
    .card-icon{font-size:24px;}
    .card-info .card-value{font-size:23px;}
    .grid-charts{grid-template-columns:1fr;}
    .chart-box{padding:15px;}
    .panel{padding:15px;}
    .form-grid{grid-template-columns:1fr;}
    .form-grid .full-width{grid-column:auto;}
}
@media (max-width: 420px){
    .grid-cards{grid-template-columns:1fr 1fr;}
    .card-icon{display:none;}
    .card-info .card-value{font-size:21px;}
    .card-info .card-label{font-size:11px;}
    .topbar{padding:0 10px;}
    .logo-text small{display:none;}
    .main-content{padding:10px;}
}

/* ---------------------------------------------------------
   TV 45" / Full Screen Operations Control Room
   Buka Dashboard -> Mode TV 45"
   --------------------------------------------------------- */
.app-wrapper:has(.tv-mode) .sidebar{display:none;}
.app-wrapper:has(.tv-mode) .topbar{display:none;}
.app-wrapper:has(.tv-mode) .main-content{
    margin:0;width:100%;padding:24px 28px;min-height:100vh;
    background:#07111f;color:#e2e8f0;
}
.tv-mode .dashboard-hero{
    margin-bottom:18px;padding:18px 24px;
    background:linear-gradient(110deg,#0b1220,#172554 55%,#1d4ed8);
}
.tv-mode .dashboard-hero h1{font-size:28px;}
.tv-mode .dashboard-hero p{color:#cbd5e1;}
.tv-mode .tv-launch{display:none;}
.tv-mode .tv-exit{display:none;}
.tv-mode .grid-cards{
    grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;margin-bottom:14px;
}
.tv-mode .card-stat{
    min-height:102px;padding:14px;border:1px solid #263449;
    background:linear-gradient(145deg,#111c2e,#0d1727);color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.tv-mode .card-info .card-value{font-size:30px;color:#fff;}
.tv-mode .card-info .card-label{color:#94a3b8;}
.tv-mode .mini-progress{background:#263449;}
.tv-mode .grid-charts{
    grid-template-columns:1.1fr 1.1fr .8fr;gap:14px;margin-bottom:14px;
}
.tv-mode .chart-box{
    padding:16px;border:1px solid #263449;background:#0d1727;color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.tv-mode .chart-box h4{color:#e2e8f0;font-size:14px;}
.tv-mode .chart-box canvas{max-height:235px;}
.tv-mode .panel{
    padding:16px;border:1px solid #263449;background:#0d1727;
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.tv-mode .panel h4{color:#e2e8f0;margin-bottom:9px;}
.tv-mode table.table-data{font-size:12px;color:#f8fafc;}
.tv-mode table.table-data th{background:#172554;padding:8px 10px;color:#ffffff;}
.tv-mode table.table-data td{padding:7px 10px;border-bottom-color:#263449;color:#f8fafc;}
.tv-mode table.table-data tbody tr:nth-child(even){background:#111c2e;}
.tv-mode table.table-data tbody tr:hover{background:#172554;}
.tv-mode .client-chip{background:#1e293b;color:#dbeafe;}
.tv-mode .date-only{color:#f8fafc !important;font-weight:700;}
.tv-mode .time-only{color:#ffffff !important;font-weight:900;}
.tv-mode .datetime-empty{color:#cbd5e1 !important;}
.tv-mode .gate-value{background:#fef3c7;color:#92400e;}
.tv-mode .badge-status{font-size:11px;padding:3px 9px;}

@media (min-width:1600px){
    .tv-mode .grid-cards{grid-template-columns:repeat(9,minmax(0,1fr));}
    .tv-mode .chart-box canvas{max-height:245px;}
}
@media (max-width:1300px){
    .tv-mode .grid-cards{grid-template-columns:repeat(5,minmax(0,1fr));}
    .tv-mode .grid-charts{grid-template-columns:1fr 1fr;}
}

/* =========================================================
   GATE WORKFLOW + SMKG LIVE ENHANCEMENTS
   ========================================================= */
.field-optional{font-weight:500;color:#94a3b8;font-size:11px;margin-left:4px;}
.datetime-cell{line-height:1.25;white-space:nowrap;}
.time-only{font-weight:700;color:#334155;}
.btn-edit-gate{border:1px solid #cbd5e1;background:#f8fafc;color:#334155;}
.btn-edit-gate:hover{background:#eff6ff;border-color:#93c5fd;color:#1e3a8a;}
.modal-kicker{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#2563eb;margin-bottom:5px;}
.modal-desc{font-size:12.5px;color:#64748b;margin:-8px 0 18px;}
.gate-modal-box{max-width:430px;border:1px solid #e2e8f0;box-shadow:0 24px 60px rgba(15,23,42,.18);}
.gate-modal-box select{min-height:46px;font-size:14px;}
@media (max-width:700px){
    .btn-edit-gate{width:100%;}
    .action-btn-group .btn{margin-bottom:2px;}
}

/* =========================================================
   SMKG LIVE - DATE/TIME + GATE ACTION
   ========================================================= */
.datetime-cell {
    min-width: 112px;
    text-align: left;
    white-space: nowrap;
}
.date-only {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
}
.time-only {
    display: inline-block;
    margin-top: 2px;
    font-size: 13px;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: .15px;
}
.datetime-empty {
    color: #94a3b8;
    font-weight: 700;
}
.gate-cell {
    min-width: 100px;
}
.gate-value {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
    font-size: 12px;
}
.gate-value.gate-empty {
    background: #fef3c7;
    color: #92400e;
}
.status-cell {
    min-width: 92px;
    white-space: nowrap;
}
.live-action-cell {
    min-width: 150px;
    white-space: nowrap;
}
.live-action-cell .btn-edit-gate,
.action-btn-group .btn-edit-gate {
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer;
    border: 0;
    box-shadow: 0 4px 10px rgba(30,58,138,.12);
}
.table-data th:nth-child(8),
.table-data th:nth-child(9) {
    min-width: 112px;
}
@media (max-width: 1100px) {
    .live-action-cell .btn-edit-gate {
        white-space: normal;
        line-height: 1.2;
    }
}