/* ============================================================
   TEK — Design System (dùng chung Car Parking & Access Control; phần riêng AC ở ac.css)
   Bootstrap 5.2.3 + FontAwesome 7 + DataTables 2.3.4
   Dùng chung cho Management App và Client App.
   Khi chuyển sang ASP.NET Core 10: copy nguyên file này vào
   wwwroot/css/tek.css và tham chiếu trong Views/Shared/_Layout.cshtml
   ============================================================ */

:root {
    /* Brand — TEK */
    --tek-primary: #1F3864;
    --tek-primary-600: #2A4B82;
    --tek-primary-300: #5980A6;
    --tek-primary-100: #EAF0F7;

    --tek-accent: #b14516;          /* giữ tông cam-nâu quen thuộc của GarageManagement */
    --tek-accent-100: #FDEBC8;

    --tek-ok: #1E7145;
    --tek-ok-100: #D6EADF;
    --tek-warn: #B26B00;
    --tek-warn-100: #FDEBC8;
    --tek-danger: #9C1E1E;
    --tek-danger-100: #F9DEDE;
    --tek-info: #1F4E79;
    --tek-info-100: #D6E6F5;

    --tek-ink: #1d1f20;
    --tek-muted: #6B6B6E;
    --tek-line: #dee2e6;
    --tek-bg: #f4f5f7;
    --tek-surface: #ffffff;

    --tek-radius: .5rem;
    --tek-radius-sm: .35rem;
    --tek-shadow: 0 .125rem .35rem rgba(31, 56, 100, .10);
    --tek-shadow-lg: 0 .5rem 1.5rem rgba(31, 56, 100, .16);

    /* Client app (tablet) — mọi control tối thiểu 44px, hành động chính 56-64px */
    --tek-touch: 44px;
    --tek-touch-lg: 56px;
    --tek-touch-xl: 64px;
}

body {
    background: var(--tek-bg);
    color: var(--tek-ink);
    font-size: .925rem;
}

/* ============================== SHELL ============================== */
.tek-topbar {
    background: var(--tek-primary);
    color: #fff;
    min-height: 52px;
    box-shadow: var(--tek-shadow);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.tek-topbar .navbar-brand { color: #fff; font-weight: 700; letter-spacing: .3px; }
.tek-topbar .navbar-brand span { color: #8FB4DA; font-weight: 400; }
.tek-topbar .nav-link { color: rgba(255,255,255,.82); }
.tek-topbar .nav-link:hover, .tek-topbar .nav-link:focus { color: #fff; }
.tek-topbar .dropdown-menu { font-size: .9rem; }

/* Bộ chọn phạm vi: Tenant / Bãi xe */
.tek-scope {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--tek-radius-sm);
    padding: .2rem .6rem;
    color: #fff;
    line-height: 1.15;
}
.tek-scope .k { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: #A9C6E3; display: block; }
.tek-scope .v { font-size: .86rem; font-weight: 600; }

.tek-sidebar {
    width: 232px;
    min-width: 232px;
    background: var(--tek-surface);
    border-right: 1px solid var(--tek-line);
    min-height: calc(100vh - 52px);
    position: sticky;
    top: 52px;
    overflow-y: auto;
    max-height: calc(100vh - 52px);
}
.tek-sidebar .nav-section {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--tek-muted);
    padding: .9rem .9rem .3rem;
    font-weight: 700;
}
.tek-sidebar .nav-link {
    color: #33383d;
    padding: .46rem .9rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
}
.tek-sidebar .nav-link i { width: 18px; text-align: center; color: var(--tek-primary-300); }
.tek-sidebar .nav-link:hover { background: var(--tek-primary-100); color: var(--tek-primary); }
.tek-sidebar .nav-link.active {
    background: var(--tek-primary);
    color: #fff;
    font-weight: 600;
}
.tek-sidebar .nav-link.active i { color: #fff; }
.tek-sidebar .badge-soft { margin-left: auto; font-size: .68rem; }

.tek-main { flex: 1 1 auto; min-width: 0; padding: 1rem 1.15rem 3rem; }

/* ============================== PAGE HEAD ============================== */
.tek-pagehead { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .35rem; }
.tek-pagehead h1 { font-size: 1.16rem; font-weight: 700; margin: 0; color: var(--tek-primary); }
.tek-pagehead .sub { font-size: .8rem; color: var(--tek-muted); }
.tek-pagehead .spacer { flex: 1 1 auto; }
.tek-crumb { font-size: .76rem; color: var(--tek-muted); margin-bottom: .55rem; }
.tek-crumb a { color: var(--tek-primary-300); text-decoration: none; }

/* ============================== CARDS ============================== */
.card { border: 1px solid var(--tek-line); border-radius: var(--tek-radius); box-shadow: var(--tek-shadow); }
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--tek-line);
    font-weight: 600;
    font-size: .92rem;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.card-header .spacer { flex: 1 1 auto; }
.card-header i.hd { color: var(--tek-primary-300); }
.card-header.hd-primary { background: var(--tek-primary); color: #fff; }
.card-header.hd-primary i.hd { color: #fff; }
/* Modal dùng chung lớp hd-primary với card — trước đây thiếu rule nên tiêu đề chữ trắng trên nền trắng */
.modal-header.hd-primary { background: var(--tek-primary); color: #fff; }
.card-header.hd-ok { background: var(--tek-ok); color: #fff; }
.card-header.hd-ok i.hd { color: #fff; }
.card-header.hd-warn { background: var(--tek-warn); color: #fff; }
.card-header.hd-warn i.hd { color: #fff; }
.card-header.hd-danger { background: var(--tek-danger); color: #fff; }
.card-header.hd-danger i.hd { color: #fff; }
.card-body { padding: .9rem; }

/* ============================== KPI ============================== */
.tek-kpi { background: #fff; border: 1px solid var(--tek-line); border-radius: var(--tek-radius); padding: .75rem .9rem; height: 100%; }
.tek-kpi .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tek-muted); font-weight: 700; }
.tek-kpi .v { font-size: 1.65rem; font-weight: 700; line-height: 1.15; color: var(--tek-primary); }
.tek-kpi .v small { font-size: .95rem; color: var(--tek-muted); font-weight: 400; }
.tek-kpi .d { font-size: .76rem; color: var(--tek-muted); }
.tek-kpi .up { color: var(--tek-ok); font-weight: 600; }
.tek-kpi .down { color: var(--tek-danger); font-weight: 600; }

/* ============================== BAY GRID (lưới ô đỗ) ============================== */
.tek-zone { border: 1px solid var(--tek-line); border-radius: var(--tek-radius); background: #fff; margin-bottom: .85rem; }
.tek-zone-head {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .5rem .8rem; border-bottom: 1px solid var(--tek-line);
}
.tek-zone-head .name { font-weight: 700; color: var(--tek-primary); }
.tek-zone-head .meta { font-size: .78rem; color: var(--tek-muted); }
.tek-zone-head .spacer { flex: 1 1 auto; }

.tek-bays { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; padding: .7rem .8rem; }
.tek-bay {
    border: 1px solid var(--tek-line);
    border-radius: var(--tek-radius-sm);
    min-height: 46px;
    padding: 3px 4px;
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: .62rem; line-height: 1.1; cursor: pointer;
    background: #fff; transition: transform .08s ease;
}
.tek-bay:hover { transform: translateY(-1px); box-shadow: var(--tek-shadow); }
.tek-bay .id { font-weight: 700; color: var(--tek-muted); }
.tek-bay .plate { font-weight: 700; font-size: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tek-bay.free      { background: #fff; }
.tek-bay.free .id  { color: #b9bdc2; }
.tek-bay.busy      { background: var(--tek-primary-100); border-color: var(--tek-primary-300); }
.tek-bay.busy .id  { color: var(--tek-primary); }
.tek-bay.busy .plate { color: var(--tek-primary); }
.tek-bay.month     { background: var(--tek-ok-100); border-color: var(--tek-ok); }
.tek-bay.month .id, .tek-bay.month .plate { color: var(--tek-ok); }
.tek-bay.over      { background: var(--tek-danger); border-color: var(--tek-danger); }
.tek-bay.over .id, .tek-bay.over .plate { color: #fff; }
.tek-bay.resv      { background: repeating-linear-gradient(45deg, #fff, #fff 5px, #f0f0f2 5px, #f0f0f2 10px); border-style: dashed; }
.tek-bay.ev        { background: var(--tek-warn-100); border-color: var(--tek-warn); }
.tek-bay.ev .id, .tek-bay.ev .plate { color: var(--tek-warn); }

.tek-legend { display: flex; gap: .85rem; flex-wrap: wrap; font-size: .76rem; color: var(--tek-muted); }
.tek-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.tek-legend i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--tek-line); display: inline-block; }

/* ============================== BIỂN SỐ XE ============================== */
.tek-plate {
    display: inline-block; background: #fff; border: 2px solid var(--tek-ink);
    border-radius: 5px; padding: .18rem .6rem .25rem; text-align: center; line-height: 1;
}
.tek-plate .cc { font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tek-muted); display: block; }
.tek-plate .no { font-size: 1.5rem; font-weight: 700; letter-spacing: .05em; font-family: "Segoe UI", Tahoma, sans-serif; }
.tek-plate.lg .no { font-size: 2.3rem; }
.tek-plate.sm .no { font-size: 1.05rem; }
.tek-plate.moto .no { font-size: 1.15rem; }
.tek-plate.blue { border-color: var(--tek-info); background: var(--tek-info); }
.tek-plate.blue .no, .tek-plate.blue .cc { color: #fff; }

/* ============================== TABLES ============================== */
table.dataTable thead th, .table > thead > tr > th {
    background: var(--tek-primary-100);
    color: var(--tek-primary);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid var(--tek-line);
}
.table > tbody > tr > td { font-size: .86rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--tek-primary-100); }
.table-sm > :not(caption) > * > * { padding: .38rem .5rem; }

/* ============================== BADGES / CHIPS ============================== */
.chip {
    display: inline-flex; align-items: center; gap: .28rem;
    font-size: .72rem; font-weight: 600; padding: .16rem .5rem;
    border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.chip-ok     { background: var(--tek-ok-100);     color: var(--tek-ok);     border-color: var(--tek-ok); }
.chip-warn   { background: var(--tek-warn-100);   color: var(--tek-warn);   border-color: var(--tek-warn); }
.chip-danger { background: var(--tek-danger-100); color: var(--tek-danger); border-color: var(--tek-danger); }
.chip-info   { background: var(--tek-info-100);   color: var(--tek-info);   border-color: var(--tek-info); }
.chip-muted  { background: #eceded;               color: var(--tek-muted);  border-color: #d7d9db; }
.chip-primary{ background: var(--tek-primary-100);color: var(--tek-primary);border-color: var(--tek-primary-300); }

.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pulse { animation: tekpulse 1.6s infinite; }
@keyframes tekpulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ============================== PHASE TAG ============================== */
.ph { font-size: .62rem; font-weight: 700; padding: .05rem .32rem; border-radius: 3px; vertical-align: middle; }
.ph-1 { background: var(--tek-ok-100); color: var(--tek-ok); }
.ph-2 { background: var(--tek-info-100); color: var(--tek-info); }
.ph-3 { background: #EADDF4; color: #5B2C86; }

/* ============================== FEED ============================== */
.tek-feed { max-height: 420px; overflow-y: auto; }
.tek-feed .item { display: flex; gap: .55rem; padding: .45rem .15rem; border-bottom: 1px solid #f0f1f2; font-size: .82rem; }
.tek-feed .item:last-child { border-bottom: 0; }
.tek-feed .t { color: var(--tek-muted); font-variant-numeric: tabular-nums; font-size: .78rem; min-width: 42px; }
.tek-feed .body { flex: 1 1 auto; min-width: 0; }
.tek-feed .amt { font-weight: 700; white-space: nowrap; }

/* ============================== TIMELINE ============================== */
.tek-timeline { position: relative; padding-left: 1.4rem; }
.tek-timeline:before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--tek-line); }
.tek-timeline .ev { position: relative; padding: .4rem 0 .5rem; border-bottom: 1px solid #f2f3f4; }
.tek-timeline .ev:last-child { border-bottom: 0; }
.tek-timeline .ev:before {
    content: ""; position: absolute; left: -1.4rem; top: .72rem;
    width: 11px; height: 11px; border-radius: 50%; background: #fff;
    border: 2px solid var(--tek-primary-300);
}
.tek-timeline .ev.money:before { background: var(--tek-ok); border-color: var(--tek-ok); }
.tek-timeline .ev.gate:before  { background: var(--tek-primary); border-color: var(--tek-primary); }
.tek-timeline .ev.alert:before { background: var(--tek-danger); border-color: var(--tek-danger); }
.tek-timeline .tm { font-size: .76rem; color: var(--tek-muted); font-variant-numeric: tabular-nums; }
.tek-timeline .ti { font-weight: 600; font-size: .86rem; }
.tek-timeline .no { font-size: .8rem; color: var(--tek-muted); }

/* ============================== BẢNG KÊ PHÍ ============================== */
.tek-charge .ln { display: flex; align-items: flex-start; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid #f0f1f2; }
.tek-charge .ln .lb { flex: 1 1 auto; min-width: 0; }
.tek-charge .ln .lb b { font-weight: 600; font-size: .9rem; }
.tek-charge .ln .lb small { display: block; color: var(--tek-muted); font-size: .76rem; }
.tek-charge .ln .am { font-size: 1.05rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tek-charge .ln .am.minus { color: var(--tek-ok); }
.tek-charge .ln .am.none { color: #b9bdc2; font-weight: 400; }
.tek-total { display: flex; align-items: flex-end; justify-content: space-between; padding-top: .7rem; }
.tek-total .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tek-muted); font-weight: 700; }
.tek-total .v { font-size: 2.5rem; font-weight: 700; color: var(--tek-primary); line-height: 1; font-variant-numeric: tabular-nums; }

/* ============================== CAMERA ============================== */
.tek-cam {
    background: #2b2d30; border: 1px solid #1c1e20; border-radius: var(--tek-radius-sm);
    display: flex; align-items: center; justify-content: center; position: relative;
    color: #8a8d91; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    min-height: 150px; overflow: hidden;
}
.tek-cam .tag { position: absolute; top: 5px; left: 6px; background: rgba(0,0,0,.6); color: #cfd3d7;
    font-size: .62rem; padding: .1rem .35rem; border-radius: 3px; letter-spacing: .06em; }
.tek-cam .live { position: absolute; top: 5px; right: 6px; }
.tek-cam .box { position: absolute; border: 2px solid #46D17A; border-radius: 2px; }

/* ============================== CLIENT APP (tablet) ============================== */
.client-body { background: #e9ebee; }
.client-bar {
    background: var(--tek-primary); color: #fff; min-height: 56px;
    display: flex; align-items: center; gap: .8rem; padding: 0 .9rem;
    position: sticky; top: 0; z-index: 1030;
}
.client-bar .brand { font-weight: 700; font-size: 1rem; }
.client-bar .brand span { color: #8FB4DA; }
.client-bar .lane { font-size: .95rem; font-weight: 600; }
.client-bar .spacer { flex: 1 1 auto; }
.client-bar .fact { text-align: right; line-height: 1.1; }
.client-bar .fact .k { font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; color: #A9C6E3; display: block; }
.client-bar .fact .v { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.touch      { min-height: var(--tek-touch); font-size: .95rem; }
.touch-lg   { min-height: var(--tek-touch-lg); font-size: 1.05rem; font-weight: 600; }
.touch-xl   { min-height: var(--tek-touch-xl); font-size: 1.15rem; font-weight: 700; }
/* Nút không khai báo cỡ chạm thì lấy mức sàn 44px.
   Phải loại trừ .touch-lg và .touch-xl: selector ".client-body .btn" có độ ưu tiên
   cao hơn ".touch-lg" nên nếu không loại trừ, mọi nút 56px và 64px đều bị kéo về 44px. */
.client-body .btn:not([class*="touch"]),
.client-body .form-control, .client-body .form-select { min-height: var(--tek-touch); }

/* Bàn phím sửa biển số */
.tek-keypad { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.tek-keypad.num { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tek-keypad button {
    min-height: var(--tek-touch); font-weight: 600; font-size: 1rem;
    border: 1px solid var(--tek-line); background: #fff; border-radius: var(--tek-radius-sm);
}
.tek-keypad button:active { background: var(--tek-primary-100); }
.tek-keypad.num button { min-height: 58px; font-size: 1.3rem; }

/* Phương thức truy cập / thanh toán */
.tek-method {
    width: 100%; text-align: left; border: 1px solid var(--tek-line); background: #fff;
    border-radius: var(--tek-radius-sm); padding: .55rem .75rem; min-height: 50px;
    display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem;
}
.tek-method .nm { font-weight: 600; }
.tek-method .hint { margin-left: auto; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tek-muted); }
.tek-method.on { background: var(--tek-primary); border-color: var(--tek-primary); color: #fff; }
.tek-method.on .hint { color: #B9D3EC; }

.tek-paygrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.tek-paygrid button {
    min-height: 68px; border: 1px solid var(--tek-line); background: #fff;
    border-radius: var(--tek-radius-sm); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .1rem; padding: .4rem;
}
.tek-paygrid button .nm { font-weight: 700; font-size: .95rem; }
.tek-paygrid button .sb { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tek-muted); }
.tek-paygrid button.on { background: var(--tek-primary); border-color: var(--tek-primary); color: #fff; }
.tek-paygrid button.on .sb { color: #B9D3EC; }

/* ============================== MISC ============================== */
.tek-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .9rem; font-size: .84rem; }
.tek-stat-row .k { color: var(--tek-muted); }
.tek-stat-row .v { font-weight: 600; text-align: right; }

.kv { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; border-bottom: 1px solid #f2f3f4; font-size: .85rem; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--tek-muted); }
.kv .v { font-weight: 600; text-align: right; }

.mono { font-variant-numeric: tabular-nums; font-family: Consolas, "Courier New", monospace; }
.text-tek { color: var(--tek-primary) !important; }
.bg-tek { background: var(--tek-primary) !important; }
.btn-tek { background: var(--tek-primary); border-color: var(--tek-primary); color: #fff; }
.btn-tek:hover { background: var(--tek-primary-600); border-color: var(--tek-primary-600); color: #fff; }
.btn-outline-tek { border-color: var(--tek-primary-300); color: var(--tek-primary); }
.btn-outline-tek:hover { background: var(--tek-primary); border-color: var(--tek-primary); color: #fff; }

.req:after { content: " *"; color: var(--tek-danger); }
.form-label { font-size: .8rem; font-weight: 600; margin-bottom: .2rem; color: #41464b; }
.form-text { font-size: .74rem; }
.small-muted { font-size: .78rem; color: var(--tek-muted); }

.tek-empty { text-align: center; padding: 2.2rem 1rem; color: var(--tek-muted); }
.tek-empty i { font-size: 2rem; opacity: .35; display: block; margin-bottom: .5rem; }

/* Băng thông báo mockup */
.tek-mock-note {
    background: #FFF9E6; border: 1px solid #D6B656; color: #7F4F00;
    border-radius: var(--tek-radius-sm); padding: .45rem .7rem; font-size: .78rem; margin-bottom: .8rem;
}
.tek-mock-note b { color: #6b4200; }

/* Offline banner */
.tek-offline { background: var(--tek-warn); color: #fff; font-size: .8rem; padding: .3rem .8rem; text-align: center; font-weight: 600; }

@media (max-width: 991.98px) {
    .tek-sidebar { position: fixed; left: -240px; transition: left .2s ease; z-index: 1040; height: 100vh; max-height: 100vh; }
    .tek-sidebar.open { left: 0; }
    .tek-bays { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

@media print {
    .tek-topbar, .tek-sidebar, .no-print { display: none !important; }
    .tek-main { padding: 0; }
    .card { box-shadow: none; }
}

/* ============================================================
   LÀN XE — TRẠNG THÁI, THIẾT BỊ, THÔNG TIN GỌN
   Bổ sung 22/09/2026 sau khi đối chiếu phần mềm bãi xe của ZKTeco.
   Mục tiêu: nhân viên bốt liếc một cái là biết đủ, không phải mở thêm màn hình.
   ============================================================ */

/* Máy trạng thái làn — 5 trạng thái ở mục 5.2 biên bản chốt kiến trúc */
.tek-lanestate { display: flex; gap: 2px; align-items: stretch; font-size: .6rem; }
.tek-lanestate span {
    flex: 1 1 0; text-align: center; padding: .18rem .1rem; background: #eceded;
    color: #9a9da1; border-radius: 2px; font-weight: 600; letter-spacing: .03em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tek-lanestate span.done { background: var(--tek-primary-100); color: var(--tek-primary-300); }
.tek-lanestate span.on   { background: var(--tek-primary); color: #fff; }

/* Dải sức khoẻ thiết bị — xám là chết, vàng là chập chờn */
.tek-devbar { display: inline-flex; gap: .25rem; align-items: center; }
.tek-devbar span {
    width: 21px; height: 21px; border-radius: 5px; display: inline-flex;
    align-items: center; justify-content: center; font-size: .62rem;
    border: 1px solid transparent; cursor: default;
}
.tek-devbar .up   { background: var(--tek-ok-100);     color: var(--tek-ok);     border-color: var(--tek-ok); }
.tek-devbar .warn { background: var(--tek-warn-100);   color: var(--tek-warn);   border-color: var(--tek-warn); }
.tek-devbar .down { background: var(--tek-danger-100); color: var(--tek-danger); border-color: var(--tek-danger); }
.tek-devbar.on-dark span      { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
.tek-devbar.on-dark .warn     { background: rgba(255,200,90,.32);  color: #FFE7B8; }
.tek-devbar.on-dark .down     { background: rgba(255,120,120,.38); color: #FFE0E0; }

/* Dải ảnh các lượt xe gần đây — ZKTeco có, rất hữu ích để bắt xe bám đuôi */
.tek-filmstrip { display: flex; gap: .3rem; }
.tek-filmstrip .fs {
    flex: 1 1 0; min-width: 0; height: 48px; position: relative; overflow: hidden;
    background: #2b2d30; border: 1px solid #1c1e20; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #70747a; font-size: .56rem; letter-spacing: .08em;
}
.tek-filmstrip .fs b { position: absolute; bottom: 2px; left: 3px; right: 3px;
    color: #dfe3e7; font-size: .58rem; font-weight: 700; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: Consolas, "Courier New", monospace; text-shadow: 0 1px 2px #000; }
.tek-filmstrip .fs .t { position: absolute; top: 2px; right: 3px; background: rgba(0,0,0,.65);
    color: #cfd3d7; font-size: .55rem; padding: 0 .22rem; border-radius: 2px; }

/* Thông tin siêu gọn — dùng cho chế độ 4 làn, nơi không còn chỗ cho bảng .kv */
.tek-minikv { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .7rem; font-size: .72rem; }
.tek-minikv > div { display: flex; gap: .35rem; min-width: 0; align-items: baseline;
    border-bottom: 1px dotted #e6e8ea; padding-bottom: .12rem; }
.tek-minikv .k { color: var(--tek-muted); flex: 0 0 auto; }
.tek-minikv .v { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tek-minikv .v.warn { color: var(--tek-warn); }
.tek-minikv .v.dang { color: var(--tek-danger); }

/* Làn rảnh — KHÔNG để trống. Camera vẫn chạy, nút mở barrier vẫn dùng được */
.tek-idle {
    border: 1px dashed var(--tek-primary-300); background: var(--tek-primary-100);
    border-radius: var(--tek-radius-sm); padding: .5rem .7rem; text-align: center;
    color: var(--tek-primary);
}
.tek-idle .h { font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.tek-idle .s { font-size: .72rem; color: var(--tek-primary-300); }

/* Cảnh báo đối chiếu vào–ra ngay trên thẻ làn */
.tek-mismatch {
    background: var(--tek-warn-100); border: 1px solid var(--tek-warn); color: #7F4F00;
    border-radius: var(--tek-radius-sm); padding: .3rem .5rem; font-size: .72rem;
}

/* ============================================================
   CHẾ ĐỘ TOÀN MÀN HÌNH
   Dùng Fullscreen API của trình duyệt. Bắt buộc phải do người dùng bấm nút
   mới gọi được — trình duyệt không cho tự bật.
   ============================================================ */
body.tek-fs .tek-mock-note { display: none; }          /* ghi chú mockup — ẩn khi trình diễn */
body.tek-fs .tek-topbar { position: sticky; top: 0; }

/* ============================================================
   LƯỚI CÁCH NHẬN DẠNG — bản gọn
   Sáu ô xếp 3 cột thay vì 6 hàng ngang, tiết kiệm khoảng 200px chiều cao
   ============================================================ */
.tek-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.tek-methods .tek-method {
    width: auto; margin: 0; flex-direction: column; text-align: center;
    gap: .18rem; padding: .45rem .3rem; min-height: 64px; justify-content: center;
}
.tek-methods .tek-method i { font-size: 1.05rem; }
.tek-methods .tek-method .nm { font-size: .72rem; line-height: 1.15; font-weight: 600; }
.tek-methods .tek-method .hint { display: none; }      /* chuyển thành chú thích khi rê chuột */

/* ============================================================
   LÀN ĐÔI — một vào một ra, đảo chiều được
   ============================================================ */
.tek-dirbar {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--tek-line);
    border-radius: var(--tek-radius-sm); padding: .5rem .75rem;
}
.tek-dirbar .cfg { display: flex; align-items: center; gap: .45rem; font-size: .85rem; }
.tek-dirbar .cfg b { font-variant-numeric: tabular-nums; }

/* Chip hướng làn — xanh lá là vào, cam là ra */
.tek-dir { font-weight: 700; letter-spacing: .04em; }
.tek-dir-in  { background: var(--tek-ok-100);   color: var(--tek-ok);   border-color: var(--tek-ok); }
.tek-dir-out { background: var(--tek-warn-100); color: var(--tek-warn); border-color: var(--tek-warn); }

/* Hiệu ứng lật khi đảo chiều — để nhân viên thấy rõ làn vừa đổi */
@keyframes tekflip { 0% { transform: rotateY(0) } 50% { transform: rotateY(90deg) } 100% { transform: rotateY(0) } }
.tek-flip { animation: tekflip .45s ease; }

/* ============================================================
   BỐ CỤC LÀN THEO MÁY TRẠM
   Sơ đồ thu nhỏ để Admin nhìn phát biết bố cục gồm mấy ô, chiều nào
   ============================================================ */
.tek-lay { display: inline-flex; gap: 3px; vertical-align: middle; }
.tek-lay .pane {
    width: 40px; height: 30px; border-radius: 4px; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    font-size: .54rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
    border: 1px solid transparent;
}
.tek-lay .pane i { font-size: .72rem; margin-bottom: 1px; }
.tek-lay .pane.in  { background: var(--tek-ok-100);   color: var(--tek-ok);   border-color: var(--tek-ok); }
.tek-lay .pane.out { background: var(--tek-warn-100); color: var(--tek-warn); border-color: var(--tek-warn); }
.tek-lay.lg .pane { width: 74px; height: 56px; font-size: .68rem; }
.tek-lay.lg .pane i { font-size: 1.1rem; margin-bottom: 3px; }

/* Ô chọn làn trong cửa sổ tạo bố cục */
.tek-slot {
    border: 1px solid var(--tek-line); border-radius: var(--tek-radius-sm);
    padding: .5rem .6rem; background: #fafbfc;
}
.tek-slot .hd { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--tek-muted); font-weight: 700; margin-bottom: .3rem; }

/* Cảnh báo bố cục trùng chức năng */
.tek-dup { font-size: .72rem; color: var(--tek-warn); }

/* ============================== KÉO CO GIÃN CARD (Client App) ==============================
   Nhân viên tự kéo card to nhỏ cho vừa màn hình bốt. Mức kéo được nhớ lại cho lần sau.
   - Kéo ngang  : đổi tỉ lệ hai cột, cột còn lại tự nhường chỗ
   - Kéo dọc    : đổi chiều cao card, các card dưới tự dồn xuống
   - Kéo chéo   : đổi cả hai
   - Bấm đúp    : trả riêng card đó về mặc định                                              */

.tek-cols { --tek-split: 58.333%; }
/* Lưới làn chia đôi đều — duallane, multilane */
.tek-cols.tek-cols-even { --tek-split: 50%; }

@media (min-width: 992px) {
    .tek-cols > .tek-col-l {
        flex: 0 0 var(--tek-split); max-width: var(--tek-split); width: var(--tek-split);
    }
    .tek-cols > .tek-col-r {
        flex: 0 0 calc(100% - var(--tek-split)); max-width: calc(100% - var(--tek-split));
        width: calc(100% - var(--tek-split));
    }
}

/* Tay nắm: mảng chấm ở góc phải dưới, cắt chéo thành hình tam giác */
.tek-grip {
    position: absolute; right: 0; bottom: 0; width: 30px; height: 30px;
    cursor: nwse-resize; touch-action: none; z-index: 6;
    opacity: .4; transition: opacity .12s ease;
    background-image: radial-gradient(currentColor 1.15px, transparent 1.3px);
    background-size: 5px 5px; background-position: right 4px bottom 4px;
    -webkit-mask-image: linear-gradient(315deg, #000 44%, transparent 48%);
    mask-image: linear-gradient(315deg, #000 44%, transparent 48%);
    color: var(--tek-primary);
    border-bottom-right-radius: var(--tek-radius);
}
.tek-grip:hover, .tek-grip:focus-visible { opacity: .95; outline: none; }
.card:hover > .tek-grip { opacity: .66; }

.tek-rsz { position: relative; }
/* Dùng !important để thắng .h-100 của Bootstrap ở trang làn đôi và 4 làn */
.tek-rsz.is-sized { height: var(--tek-h) !important; }
.tek-rsz.is-sized > .card-body { overflow: auto; }
.tek-rsz.is-drag { outline: 2px solid var(--tek-primary); outline-offset: -2px; }
body.tek-dragging, body.tek-dragging * { user-select: none !important; cursor: nwse-resize !important; }

/* Nhãn kích thước hiện trong lúc kéo */
.tek-rszhint {
    position: fixed; z-index: 2000; pointer-events: none;
    background: var(--tek-primary); color: #fff; font-weight: 700;
    font-size: .74rem; line-height: 1; padding: .34rem .5rem;
    border-radius: var(--tek-radius-sm); box-shadow: var(--tek-shadow);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================== BẢNG LED — KHUNG XEM TRƯỚC ==============================
   Mô phỏng bảng LED ma trận điểm ngoài làn. Nền đen, chữ phát sáng, nét vuông.
   Chỉ dùng để xem trước mẫu hiển thị; nội dung thật do Client App tại bốt đổ vào.      */

.tek-led {
    background: #0a0a0a; border: 3px solid #2b2b2b; border-radius: 6px;
    padding: .7rem .9rem; font-family: "Consolas", "Courier New", monospace;
    font-weight: 700; letter-spacing: .09em; line-height: 1.45;
    box-shadow: inset 0 0 22px rgba(0,0,0,.9);
    background-image: radial-gradient(rgba(255,255,255,.045) .5px, transparent .6px);
    background-size: 3px 3px;
}
.tek-led .ln { white-space: pre; overflow: hidden; text-overflow: clip; }
.tek-led .c-amber { color: #ffb020; text-shadow: 0 0 6px rgba(255,176,32,.75); }
.tek-led .c-green { color: #35e06a; text-shadow: 0 0 6px rgba(53,224,106,.7); }
.tek-led .c-red   { color: #ff4040; text-shadow: 0 0 6px rgba(255,64,64,.75); }
.tek-led .c-off   { color: #2e2e2e; text-shadow: none; }
.tek-led.sz-1 { font-size: 1.45rem; }
.tek-led.sz-2 { font-size: 1.15rem; }
.tek-led.sz-3 { font-size: .98rem; }
@keyframes tekLedBlink { 0%,49% { opacity:1 } 50%,100% { opacity:.18 } }
.tek-led .blink { animation: tekLedBlink 1s steps(1,end) infinite; }

/* Thẻ mã placeholder trong ô soạn mẫu */
.tek-token {
    display: inline-block; font-family: "Consolas", monospace; font-size: .72rem;
    background: var(--tek-primary-50, #eef3f9); color: var(--tek-primary);
    border: 1px solid var(--tek-primary-300, #9db8d8); border-radius: 4px;
    padding: .06rem .34rem; margin: .1rem .14rem .1rem 0; cursor: pointer;
    white-space: nowrap;
}
.tek-token:hover { background: var(--tek-primary); color: #fff; }