* {
    box-sizing: border-box;
}

:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --border: #e5e9f0;
    --text: #1e293b;
    --muted: #718096;

    --primary: #151f32;
    --primary-soft: #243149;

    --accent: #2563eb;
    --green: #16a34a;
    --orange: #ea580c;
    --red: #dc2626;

    --sidebar-width: 250px;
}

html,
body {
    margin: 0;
    padding: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--bg);
    color: var(--text);
}

button,
input,
select {
    font: inherit;
}

.hidden {
    display: none !important;
}


/* =========================================================
LOGIN
========================================================= */

.login-screen {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background:
        radial-gradient(
            circle at top right,
            #24436f 0,
            transparent 35%
        ),
        linear-gradient(
            140deg,
            #111827,
            #172337 55%,
            #203453
        );
}

.login-card {
    width: 100%;
    max-width: 420px;

    background: white;

    border-radius: 20px;

    padding: 40px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.28);
}

.login-logo {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #172337;
    color: white;

    font-weight: 800;
    font-size: 20px;

    margin-bottom: 24px;
}

.login-card h1 {
    margin: 0;
    font-size: 28px;
}

.login-subtitle {
    margin: 8px 0 30px;
    color: var(--muted);
}

.login-card label {
    display: block;

    margin: 17px 0 7px;

    font-size: 13px;
    font-weight: 600;
}

.login-card input {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--border);
    border-radius: 10px;

    outline: none;

    transition: 0.2s;
}

.login-card input:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.10);
}

.primary-btn {
    width: 100%;

    margin-top: 24px;

    padding: 13px;

    border: none;
    border-radius: 10px;

    background: #172337;
    color: white;

    cursor: pointer;
    font-weight: 700;
}

.primary-btn:hover {
    background: #213451;
}

.primary-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.login-error {
    margin-top: 14px;

    color: var(--red);

    min-height: 18px;

    font-size: 13px;
}

.login-footer {
    margin-top: 30px;

    text-align: center;

    font-size: 12px;
    color: #94a3b8;
}


/* =========================================================
APP
========================================================= */

.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: var(--sidebar-width);

    background: var(--primary);
    color: white;

    display: flex;
    flex-direction: column;

    z-index: 20;
}

.brand {
    height: 76px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 20px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.brand-icon {
    width: 40px;
    height: 40px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    color: var(--primary);

    font-weight: 900;
}

.brand-name {
    font-weight: 750;
    font-size: 16px;
}

.brand-sub {
    font-size: 11px;
    opacity: 0.6;

    margin-top: 2px;
}

.nav {
    flex: 1;

    padding: 16px 12px;

    overflow-y: auto;
}

.nav-group-title {
    font-size: 10px;
    font-weight: 700;

    opacity: 0.42;

    margin:
        18px 10px
        7px;
}

.nav-item {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px 12px;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: rgba(255,255,255,0.75);

    text-align: left;

    cursor: pointer;

    margin-bottom: 3px;

    transition: 0.15s;
}

.nav-item:hover {
    background: rgba(255,255,255,0.07);
    color: white;
}

.nav-item.active {
    background: rgba(255,255,255,0.12);
    color: white;
}

.nav-icon {
    width: 23px;
    text-align: center;
}

.soon {
    margin-left: auto;

    font-size: 9px;

    background: rgba(255,255,255,0.1);

    padding: 3px 5px;

    border-radius: 5px;
}

.disabled-item {
    opacity: 0.55;
    cursor: default;
}

.sidebar-footer {
    padding: 16px 20px;

    border-top:
        1px solid rgba(255,255,255,0.08);

    font-size: 11px;
}

.api-status {
    display: flex;
    align-items: center;

    gap: 7px;
}

.status-dot {
    width: 7px;
    height: 7px;

    background: #f59e0b;

    border-radius: 50%;
}

.status-dot.online {
    background: #22c55e;
}

.status-dot.offline {
    background: #ef4444;
}

.version {
    margin-top: 7px;

    opacity: 0.4;
}


/* =========================================================
MAIN
========================================================= */

.main {
    margin-left: var(--sidebar-width);

    min-height: 100vh;
}

.topbar {
    height: 76px;

    background: white;

    border-bottom:
        1px solid var(--border);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;

    position: sticky;
    top: 0;

    z-index: 10;
}

.topbar-left {
    display: flex;
    align-items: center;

    gap: 14px;
}

.topbar-left h2 {
    margin: 0;

    font-size: 17px;
}

.page-subtitle {
    margin-top: 4px;

    font-size: 11px;
    color: var(--muted);
}

.menu-btn {
    display: none;

    border: none;
    background: transparent;

    font-size: 22px;

    cursor: pointer;
}

.topbar-right {
    display: flex;
    align-items: center;

    gap: 14px;
}

.business-select {
    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 8px 10px;

    background: white;
}

.user-box {
    display: flex;
    align-items: center;

    gap: 9px;
}

.user-avatar {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #e8eef8;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;

    color: var(--primary);
}

.user-info {
    display: flex;
    flex-direction: column;

    font-size: 12px;
}

.user-info span {
    font-size: 10px;
    color: var(--muted);
}

.logout-btn {
    border: 1px solid var(--border);

    background: white;

    padding: 8px 10px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 12px;
}

.content {
    padding: 26px;
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.page-heading h1 {
    margin: 0;

    font-size: 23px;
}

.page-heading p {
    margin: 5px 0 0;

    font-size: 12px;
    color: var(--muted);
}

.refresh-btn {
    border: 1px solid var(--border);

    background: white;

    border-radius: 8px;

    padding: 9px 13px;

    cursor: pointer;
}


/* =========================================================
KPI
========================================================= */

.kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;

    margin-bottom: 18px;
}

.kpi-card {
    background: white;

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 18px;

    display: flex;
    align-items: center;

    gap: 15px;
}

.kpi-icon {
    width: 43px;
    height: 43px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef3fa;

    font-size: 19px;
}

.kpi-title {
    font-size: 11px;
    color: var(--muted);

    margin-bottom: 5px;
}

.kpi-number {
    font-size: 25px;
    font-weight: 760;
}

.kpi-sub {
    margin-top: 3px;

    font-size: 10px;
    color: var(--muted);
}


/* =========================================================
PANELS
========================================================= */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2.3fr)
        minmax(260px, 0.7fr);

    gap: 17px;
}

.panel {
    background: white;

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;
}

.panel-header {
    min-height: 65px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 18px;

    border-bottom:
        1px solid var(--border);
}

.panel-header h3 {
    margin: 0;

    font-size: 14px;
}

.panel-header p {
    margin: 4px 0 0;

    font-size: 10px;
    color: var(--muted);
}

.badge {
    background: #edf3fb;

    color: #355174;

    border-radius: 20px;

    padding: 5px 9px;

    font-size: 10px;
}

.table-wrapper {
    overflow: auto;
}

table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

th {
    background: #fafbfd;

    color: #64748b;

    text-align: left;

    padding: 11px 14px;

    font-size: 10px;

    font-weight: 700;

    border-bottom:
        1px solid var(--border);

    white-space: nowrap;
}

td {
    padding: 11px 14px;

    border-bottom:
        1px solid #eef1f5;

    white-space: nowrap;
}

tbody tr:hover {
    background: #fafcff;
}

.status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px 7px;

    border-radius: 6px;

    font-size: 9px;

    background: #ecfdf3;
    color: #15803d;
}

.status::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #22c55e;
}


/* =========================================================
ALERTS
========================================================= */

.alerts-panel {
    min-height: 300px;
}

.alert-item {
    padding: 14px 18px;

    border-bottom:
        1px solid var(--border);
}

.alert-title {
    font-size: 12px;
    font-weight: 650;
}

.alert-description {
    margin-top: 4px;

    font-size: 10px;
    color: var(--muted);
}

.alert-count {
    display: inline-block;

    margin-top: 8px;

    font-size: 17px;
    font-weight: 750;
}

.alert-ok {
    color: var(--green);
}

.alert-warning {
    color: var(--orange);
}

.search-input {
    width: 240px;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 8px 11px;

    outline: none;
}


/* =========================================================
TOAST
========================================================= */

.toast {
    position: fixed;

    right: 20px;
    bottom: 20px;

    max-width: 340px;

    background: #172337;
    color: white;

    padding: 12px 16px;

    border-radius: 9px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,0.18);

    font-size: 12px;

    opacity: 0;
    pointer-events: none;

    transform: translateY(10px);

    transition: 0.2s;

    z-index: 100;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .kpi-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 760px) {

    .sidebar {
        transform: translateX(-100%);

        transition: 0.2s;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
    }

    .menu-btn {
        display: block;
    }

    .user-info,
    .business-select {
        display: none;
    }

    .topbar {
        padding: 0 14px;
    }

    .content {
        padding: 15px;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .page-heading {
        align-items: flex-start;

        gap: 10px;
    }

    .search-input {
        width: 150px;
    }

}


/* =========================================================
WEB V1.1 - DESKTOP / COMPACT DASHBOARD
========================================================= */

.content {
    max-width: 1800px;
    margin: 0 auto;
}

.kpi-grid {
    grid-template-columns:
        repeat(4, minmax(180px, 1fr));

    gap: 14px;
}

.kpi-card {
    min-height: 112px;
    padding: 16px 18px;
}

.kpi-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;
}

.kpi-number {
    line-height: 1;
}

.dashboard-grid {
    align-items: start;
}

.panel {
    box-shadow:
        0 1px 2px
        rgba(15, 23, 42, 0.02);
}

#dashboard-assignment-body td {
    height: 48px;
}


/* Giữ bảng có chiều rộng tối thiểu,
   không bó cột quá nhỏ */

.table-wrapper table {
    min-width: 760px;
}


/* Sidebar desktop luôn hiển thị */

@media (min-width: 901px) {

    .sidebar {
        transform: none !important;
    }

    .main {
        margin-left: var(--sidebar-width);
    }

    .menu-btn {
        display: none;
    }

}


/* Tablet */

@media (
    min-width: 901px
) and (
    max-width: 1250px
) {

    :root {
        --sidebar-width: 220px;
    }

    .content {
        padding: 20px;
    }

    .kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}


/* Mobile */

@media (max-width: 900px) {

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
    }

    .menu-btn {
        display: block;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .content {
        padding: 14px;
    }

    .page-heading h1 {
        font-size: 20px;
    }

}


/* Màn hình desktop lớn */

@media (min-width: 1450px) {

    .kpi-card {
        min-height: 105px;
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(0, 3fr)
            minmax(280px, 1fr);
    }

}


/* =========================================================
DRIVER PROFILE MODAL
========================================================= */

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: #f4f7fb;
}

.modal-overlay {
    position: fixed;

    inset: 0;

    background:
        rgba(15, 23, 42, 0.45);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    z-index: 1000;
}

.modal-card {
    width: min(1000px, 96vw);

    max-height: 90vh;

    overflow-y: auto;

    background: white;

    border-radius: 16px;

    box-shadow:
        0 25px 80px
        rgba(15, 23, 42, 0.28);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 20px 24px;

    border-bottom:
        1px solid var(--border);
}

.modal-header h2 {
    margin: 0;

    font-size: 20px;
}

.modal-header p {
    margin: 5px 0 0;

    font-size: 11px;
    color: var(--muted);
}

.modal-close {
    border: none;
    background: transparent;

    font-size: 28px;

    cursor: pointer;

    color: #64748b;
}

.profile-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    padding: 20px 24px;
}

.profile-section {
    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 16px;
}

.profile-section h3 {
    margin: 0 0 14px;

    font-size: 13px;
}

.profile-field {
    margin-bottom: 12px;
}

.profile-field label {
    display: block;

    margin-bottom: 5px;

    font-size: 10px;
    color: var(--muted);

    font-weight: 700;
}

.profile-field input,
.profile-field select {
    width: 100%;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 9px 10px;
}

.profile-value {
    min-height: 35px;

    display: flex;
    align-items: center;

    padding: 8px 10px;

    border-radius: 8px;

    background: #f8fafc;

    font-size: 12px;
}

.document-item,
.asset-item {
    padding: 10px 0;

    border-bottom:
        1px solid #eef1f5;
}

.document-item:last-child,
.asset-item:last-child {
    border-bottom: none;
}

.document-label,
.asset-label {
    font-size: 10px;
    color: var(--muted);

    margin-bottom: 3px;
}

.document-value,
.asset-value {
    font-size: 12px;
    font-weight: 650;
}

.modal-footer {
    padding: 16px 24px;

    border-top:
        1px solid var(--border);

    display: flex;
    justify-content: flex-end;
}

.primary-action-btn {
    border: none;

    background: var(--primary);

    color: white;

    padding: 10px 16px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 700;
}


@media (max-width: 760px) {

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .modal-overlay {
        padding: 10px;
    }

}


/* =========================================================
AI DOCUMENTS
========================================================= */

.document-upload-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 14px;
}

.doc-upload-btn {
    border: 1px solid #dbe2ea;

    background: #f8fafc;

    color: #334155;

    padding: 7px 9px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 10px;

    font-weight: 650;
}

.doc-upload-btn:hover {
    background: #eef3f8;
}

.ai-preview-card {
    width: min(
        720px,
        96vw
    );
}

.ai-preview-body {
    padding: 20px 24px;
}

.ai-processing {
    min-height: 240px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;
}

.ai-processing span {
    font-size: 11px;
    color: var(--muted);
}

.ai-spinner {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    border:
        3px solid #e2e8f0;

    border-top-color:
        #172337;

    animation:
        ai-spin 0.8s linear infinite;
}

@keyframes ai-spin {

    to {
        transform:
            rotate(360deg);
    }

}

.ai-fields {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 13px;
}

.ai-field {
    position: relative;
}

.ai-field label {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 5px;

    font-size: 10px;

    font-weight: 700;

    color: #64748b;
}

.ai-field input {
    width: 100%;

    border:
        1px solid #dbe2ea;

    border-radius: 8px;

    padding: 9px 10px;

    outline: none;
}

.ai-field input:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(
            37,
            99,
            235,
            0.08
        );
}

.confidence {
    font-size: 9px;

    padding: 2px 5px;

    border-radius: 5px;
}

.confidence-high {
    color: #15803d;
    background: #ecfdf3;
}

.confidence-medium {
    color: #a16207;
    background: #fefce8;
}

.confidence-low {
    color: #b91c1c;
    background: #fef2f2;
}

.ai-warning {
    grid-column:
        1 / -1;

    padding: 10px 12px;

    border-radius: 8px;

    background: #fff7ed;

    border: 1px solid #fed7aa;

    color: #9a3412;

    font-size: 11px;
}

.secondary-action-btn {
    border:
        1px solid var(--border);

    background: white;

    color: var(--text);

    padding: 10px 16px;

    border-radius: 8px;

    cursor: pointer;

    margin-right: 8px;
}


@media (
    max-width: 600px
) {

    .ai-fields {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
CCCD 2-SIDE UPLOAD
========================================================= */

.cccd-upload-card {
    width: min(
        820px,
        96vw
    );
}

.cccd-upload-body {
    padding: 22px 24px;
}

.cccd-side-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}

.cccd-side-title {
    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 800;

    color: #475569;
}

.cccd-image-box {
    width: 100%;

    aspect-ratio: 1.58 / 1;

    border:
        1.5px dashed #cbd5e1;

    border-radius: 12px;

    background: #f8fafc;

    overflow: hidden;

    padding: 0;

    cursor: pointer;

    position: relative;
}

.cccd-image-box:hover {
    border-color: #64748b;

    background: #f1f5f9;
}

.cccd-empty {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #64748b;
}

.cccd-empty strong {
    font-size: 12px;
}

.cccd-empty span {
    font-size: 9px;

    color: #94a3b8;
}

.cccd-plus {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e8eef7;

    color: #172337;

    font-size: 24px;

    line-height: 1;
}

.cccd-preview {
    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #111827;
}

.cccd-file-name {
    margin-top: 7px;

    min-height: 16px;

    font-size: 10px;

    color: #64748b;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.cccd-info-box {
    margin-top: 18px;

    padding: 12px 14px;

    border-radius: 9px;

    border: 1px solid #dbeafe;

    background: #eff6ff;

    display: flex;

    flex-direction: column;

    gap: 4px;

    color: #1e40af;
}

.cccd-info-box strong {
    font-size: 11px;
}

.cccd-info-box span {
    font-size: 10px;

    line-height: 1.5;
}


/* AI preview cải thiện */

.ai-fields input.ai-low-confidence {
    border-color: #f59e0b;

    background: #fffbeb;
}

.ai-fields input.ai-high-confidence {
    border-color: #bbf7d0;
}


@media (max-width: 650px) {

    .cccd-side-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
HCNS DETAIL
========================================================= */

.employee-modal-card {
    width: min(
        1100px,
        96vw
    );

    max-height: 92vh;
}

.employee-detail-body {
    padding: 0 24px 22px;
}

.employee-tabs {
    display: flex;

    gap: 5px;

    padding: 14px 0;

    border-bottom:
        1px solid var(--border);

    overflow-x: auto;
}

.employee-tab {
    border: none;

    background: transparent;

    padding: 9px 13px;

    border-radius: 7px;

    cursor: pointer;

    color: #64748b;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}

.employee-tab:hover {
    background: #f1f5f9;
}

.employee-tab.active {
    background: #172337;

    color: white;
}

.employee-tab-content {
    padding-top: 18px;
}

.employee-profile-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(260px, 1fr);

    gap: 16px;
}

.employee-profile-card {
    border:
        1px solid var(--border);

    border-radius: 11px;

    padding: 17px;
}

.employee-profile-card h3 {
    margin: 0 0 15px;

    font-size: 13px;
}

.employee-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.employee-form-grid
.profile-field {
    margin: 0;
}

.employee-form-grid input,
.employee-form-grid select {
    width: 100%;

    min-height: 38px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    padding: 8px 10px;

    background: white;
}

.current-assignment-item {
    padding: 10px 0;

    border-bottom:
        1px solid #eef2f7;
}

.current-assignment-item:last-child {
    border-bottom: none;
}

.current-assignment-label {
    margin-bottom: 3px;

    color: var(--muted);

    font-size: 9px;

    text-transform: uppercase;
}

.current-assignment-value {
    font-size: 12px;

    font-weight: 700;
}

.employee-section-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;
}

.employee-section-header h3 {
    margin: 0;

    font-size: 14px;
}

.employee-section-header p {
    margin: 4px 0 0;

    font-size: 10px;

    color: var(--muted);
}

.empty-table-message {
    padding: 30px !important;

    text-align: center;

    color: #94a3b8;
}

@media (max-width: 760px) {

    .employee-profile-grid,
    .employee-form-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
FLEET VEHICLE DETAIL
========================================================= */

.vehicle-modal-card {
    width: min(
        1100px,
        96vw
    );

    max-height: 92vh;
}

.vehicle-detail-body {
    padding: 0 24px 22px;
}

.vehicle-tabs {
    display: flex;

    gap: 5px;

    padding: 14px 0;

    border-bottom:
        1px solid var(--border);

    overflow-x: auto;
}

.vehicle-tab {
    border: none;

    background: transparent;

    padding: 9px 13px;

    border-radius: 7px;

    cursor: pointer;

    color: #64748b;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}

.vehicle-tab:hover {
    background: #f1f5f9;
}

.vehicle-tab.active {
    background: #172337;

    color: white;
}

.vehicle-tab-content {
    padding-top: 18px;
}

.vehicle-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 13px;
}

.vehicle-form-grid input,
.vehicle-form-grid select {
    width: 100%;

    min-height: 38px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    padding: 8px 10px;

    background: white;
}

.vehicle-current-card {
    border:
        1px solid var(--border);

    border-radius: 12px;

    padding: 18px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.vehicle-current-item {
    padding: 11px;

    border-radius: 8px;

    background: #f8fafc;
}

.vehicle-current-label {
    margin-bottom: 4px;

    font-size: 9px;

    color: #64748b;

    text-transform: uppercase;
}

.vehicle-current-value {
    font-size: 13px;

    font-weight: 700;
}

.history-block {
    margin-bottom: 24px;
}

.history-block h3 {
    margin: 0 0 10px;

    font-size: 13px;
}


@media (max-width: 800px) {

    .vehicle-form-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-current-card {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
FLEET ASSIGNMENT
========================================================= */

.fleet-assign-card {
    width: min(
        520px,
        94vw
    );
}

.fleet-assign-body {
    padding: 22px 24px;
}

.fleet-assign-label {
    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    font-weight: 700;

    color: #64748b;
}

.fleet-assign-select {
    width: 100%;

    min-height: 42px;

    padding: 8px 10px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    background: white;
}

.fleet-assignment-warning {
    margin-top: 15px;

    padding: 11px 12px;

    border:
        1px solid #fde68a;

    border-radius: 8px;

    background: #fffbeb;

    color: #92400e;

    font-size: 10px;

    line-height: 1.55;
}

.assignment-action-row {
    display: flex;

    justify-content: flex-end;

    margin-top: 14px;
}

.assignment-change-btn {
    border: none;

    padding: 9px 13px;

    border-radius: 8px;

    background: #172337;

    color: white;

    cursor: pointer;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
GPS VEHICLE
========================================================= */

.gps-loading {
    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #64748b;

    font-size: 11px;
}

.gps-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 18px;
}

.gps-status-badge {
    display: inline-flex;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    background: #f1f5f9;
    color: #475569;
}

.gps-status-running {
    background: #ecfdf3;
    color: #15803d;
}

.gps-status-stopped {
    background: #fff7ed;
    color: #c2410c;
}

.gps-status-offline {
    background: #fef2f2;
    color: #b91c1c;
}

.gps-vehicle-plate {
    margin: 8px 0 0;

    font-size: 22px;
}

.gps-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.gps-card {
    min-height: 86px;

    padding: 13px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background: #fff;
}

.gps-card:first-child {
    grid-column: span 2;
}

.gps-label {
    margin-bottom: 7px;

    color: #64748b;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;
}

.gps-value {
    font-size: 12px;

    font-weight: 650;

    line-height: 1.5;

    word-break: break-word;
}

.gps-big-value {
    font-size: 20px;
}


@media (max-width: 800px) {

    .gps-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 520px) {

    .gps-grid {
        grid-template-columns: 1fr;
    }

    .gps-card:first-child {
        grid-column: span 1;
    }

}


/* =========================================================
GPS DASHBOARD
========================================================= */

.gps-dashboard-section {
    margin-top: 18px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background: white;

    overflow: hidden;
}

.gps-dashboard-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 16px 18px;

    border-bottom:
        1px solid var(--border);
}

.gps-dashboard-header h3 {
    margin: 0;

    font-size: 14px;
}

.gps-dashboard-header p {
    margin: 4px 0 0;

    font-size: 10px;

    color: #64748b;
}

.gps-refresh-btn {
    border:
        1px solid var(--border);

    background: #fff;

    padding: 7px 10px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 10px;

    font-weight: 700;
}

.gps-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 10px;

    padding: 15px 18px;
}

.gps-summary-card {
    padding: 13px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background: #f8fafc;
}

.gps-summary-label {
    font-size: 9px;

    color: #64748b;

    text-transform: uppercase;

    font-weight: 700;
}

.gps-summary-number {
    margin-top: 5px;

    font-size: 22px;

    font-weight: 800;

    color: #172337;
}

.gps-dashboard-table-wrap {
    overflow-x: auto;
}

.gps-dashboard-table {
    width: 100%;

    border-collapse: collapse;
}

.gps-dashboard-table th,
.gps-dashboard-table td {
    padding: 10px 12px;

    border-top:
        1px solid #eef2f7;

    text-align: left;

    font-size: 10px;
}

.gps-dashboard-table th {
    color: #64748b;

    font-weight: 700;

    background: #f8fafc;
}

.gps-row {
    cursor: pointer;
}

.gps-row:hover {
    background: #f8fafc;
}

.gps-dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    margin-right: 5px;
}

.gps-dot-running {
    background: #16a34a;
}

.gps-dot-stopped {
    background: #f59e0b;
}

.gps-dot-offline {
    background: #dc2626;
}

.gps-dot-unmatched {
    background: #94a3b8;
}

.gps-address-cell {
    min-width: 260px;

    max-width: 420px;
}

.gps-dashboard-empty {
    padding: 28px;

    text-align: center;

    color: #94a3b8;

    font-size: 11px;
}


@media (max-width: 900px) {

    .gps-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 520px) {

    .gps-summary-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
DASHBOARD V3.2
========================================================= */

.dashboard-kpi-button {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
    appearance: none;
}

.dashboard-kpi-button:hover {
    transform: translateY(-2px);
}

.dashboard-kpi-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dashboard-kpi-arrow {
    margin-left: auto;
    font-size: 28px;
    opacity: .45;
}

.dashboard-fleet-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
}

.dashboard-fleet-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: white;
}

.dashboard-link-button {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.dashboard-link-button:hover {
    text-decoration: underline;
}

.dashboard-link-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (max-width: 768px) {

    .dashboard-fleet-scroll {
        max-height: 360px;
    }

}


/* =========================================================
GPS DASHBOARD COMPACT v3.3
========================================================= */

.gps-summary-clickable {
    border: 1px solid var(--border);
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.gps-summary-clickable:hover {
    transform: translateY(-2px);
}

.gps-summary-clickable.active {
    box-shadow:
        0 0 0 2px
        rgba(0, 0, 0, .10);
}

.gps-summary-hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: .55;
}

.gps-dashboard-detail {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.gps-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.gps-detail-header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gps-detail-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.gps-dashboard-table-wrap {
    max-height: 390px;
    overflow-y: auto;
    overflow-x: auto;
}

.gps-dashboard-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: white;
}

.gps-row {
    cursor: pointer;
}

.gps-row:hover {
    background:
        rgba(0, 0, 0, .025);
}

@media (max-width: 768px) {

    .gps-dashboard-table-wrap {
        max-height: 330px;
    }

}


/* =========================================================
FLEET DASHBOARD COMPACT v3.4
========================================================= */

.dashboard-fleet-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.fleet-summary-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: white;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.fleet-summary-card span {
    display: block;
    font-size: 13px;
    opacity: .7;
}

.fleet-summary-card strong {
    display: block;
    margin-top: 4px;
    font-size: 24px;
}

.fleet-summary-card small {
    display: block;
    margin-top: 6px;
    opacity: .5;
}

.fleet-summary-card:hover {
    transform: translateY(-1px);
}

.fleet-summary-card.active {
    box-shadow:
        0 0 0 2px
        rgba(0, 0, 0, .10);
}

.dashboard-fleet-detail {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.dashboard-fleet-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.dashboard-fleet-detail-header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fleet-detail-close {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
}

.dashboard-fleet-scroll {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: auto;
}

.dashboard-fleet-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: white;
}

@media (max-width: 900px) {

    .dashboard-fleet-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
TRIP CONFIG UI
========================================================= */

.trip-config-section {
    margin-bottom: 28px;
}

.trip-config-section h3 {
    margin: 0 0 12px;
    font-size: 17px;
}

.trip-config-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trip-config-history-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
    align-items: center;

    padding: 12px 14px;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.trip-config-history-row strong,
.trip-config-history-row small {
    display: block;
}

.trip-config-history-row small {
    margin-top: 4px;
    opacity: .6;
}

.trip-config-stages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trip-config-stage {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.trip-config-stage > span {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #f1f5f9;

    font-weight: 700;
}

.trip-config-stage strong,
.trip-config-stage small {
    display: block;
}

.trip-config-stage small {
    margin-top: 3px;
    opacity: .55;
}

@media (max-width: 700px) {

    .trip-config-history-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

}

.trip-config-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.trip-config-section-head h3 {
    margin: 0;
}

@media (max-width: 700px) {
    .trip-config-section-head {
        align-items: stretch;
        flex-direction: column;
    }
}

.trip-create-rate-preview {
    margin-top: 16px;
}

.trip-rate-preview-card {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trip-rate-preview-card > div {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fafc;
}

.trip-rate-preview-card span,
.trip-rate-preview-card small {
    display: block;
}

.trip-rate-preview-card span {
    font-size: 12px;
    opacity: .65;
}

.trip-rate-preview-card strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
}

.trip-rate-preview-card small {
    margin-top: 4px;
    opacity: .55;
}

@media (max-width: 700px) {
    .trip-rate-preview-card {
        grid-template-columns: 1fr;
    }
}

.trip-default-trailer-box {
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f8fafc;
}

.trip-default-trailer-box strong,
.trip-default-trailer-box small {
    display: block;
}

.trip-default-trailer-box small {
    margin-top: 3px;
    opacity: .6;
}

.trip-approval-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.trip-approval-grid > div {
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.trip-approval-grid span,
.trip-approval-grid strong {
    display: block;
}

.trip-approval-grid span {
    font-size: 12px;
    opacity: .6;
}

.trip-approval-grid strong {
    margin-top: 4px;
}

.trip-approval-warning,
.trip-approval-ok {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.trip-approval-note {
    margin-top: 14px;
}

.trip-approval-note textarea {
    width: 100%;
    margin-top: 6px;
}

@media (max-width: 700px) {
    .trip-approval-grid {
        grid-template-columns: 1fr;
    }
}

.trip-approval-change-block {
    margin-top: 16px;
}

.trip-approval-change-block h3 {
    margin-bottom: 8px;
}

.trip-approval-change-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

.trip-approval-change-row > div:not(.trip-change-arrow) {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.trip-approval-change-row span,
.trip-approval-change-row strong {
    display: block;
}

.trip-approval-change-row span {
    font-size: 12px;
    opacity: .6;
}

.trip-approval-change-row strong {
    margin-top: 4px;
}

.trip-change-arrow {
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 700px) {
    .trip-approval-change-row {
        grid-template-columns: 1fr;
    }

    .trip-change-arrow {
        transform: rotate(90deg);
        text-align: center;
    }
}

/* =========================================================
TRIP DETAIL
========================================================= */

.trip-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.trip-detail-grid > div {
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.trip-detail-grid span,
.trip-detail-grid strong {
    display: block;
}

.trip-detail-grid span {
    font-size: 12px;
    opacity: .6;
}

.trip-detail-grid strong {
    margin-top: 4px;
}

.trip-detail-section {
    margin-top: 22px;
}

.trip-container-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trip-container-card {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.trip-container-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.trip-container-head span,
.trip-container-head strong {
    display: block;
}

.trip-container-head span {
    font-size: 12px;
    opacity: .6;
}

.trip-container-head strong {
    margin-top: 3px;
    font-size: 16px;
}

.trip-container-waiting,
.trip-container-matched {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.trip-container-weight,
.trip-container-source {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.trip-container-source small {
    display: block;
    margin-top: 4px;
    opacity: .65;
}

.trip-weight-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trip-weight-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.trip-weight-row small {
    display: block;
    margin-top: 3px;
    opacity: .6;
}

@media (max-width: 700px) {

    .trip-detail-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
VEHICLE GPS PREMIUM UI v1
========================================================= */

#vehicle-tab-gps {
    padding-top: 18px;
}

.vehicle-gps-premium {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(300px, .75fr);
    gap: 16px;
}


/* MAP */

.vehicle-gps-map-card {
    position: relative;
    min-height: 460px;

    border: 1px solid #dfe6ef;
    border-radius: 16px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf7f3,
            #e6f0f7
        );
}

.vehicle-gps-map-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(34, 197, 94, .13),
            transparent 26%
        ),
        radial-gradient(
            circle at 75% 70%,
            rgba(37, 99, 235, .10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #edf8f2,
            #e7f1f8
        );
}

.vehicle-gps-map-placeholder::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .32;

    background-image:
        linear-gradient(
            rgba(100, 116, 139, .12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(100, 116, 139, .12) 1px,
            transparent 1px
        );

    background-size: 48px 48px;
}

.vehicle-gps-map-center {
    position: relative;
    z-index: 2;

    text-align: center;
}

.vehicle-gps-truck-marker {
    width: 66px;
    height: 66px;

    margin: auto;

    display: grid;
    place-items: center;

    border: 5px solid white;
    border-radius: 50%;

    background: #0f766e;

    box-shadow:
        0 8px 30px
        rgba(15, 118, 110, .30);

    font-size: 28px;
}

.vehicle-gps-map-plate {
    display: inline-block;

    margin-top: 8px;

    padding: 5px 10px;

    background: #172033;
    color: white;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 4px 12px
        rgba(15, 23, 42, .18);
}

.vehicle-gps-map-note {
    margin-top: 9px;

    font-size: 11px;
    color: #64748b;
}

.vehicle-gps-map-top {
    position: absolute;
    z-index: 4;

    top: 14px;
    left: 14px;
    right: 14px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.vehicle-gps-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid
        rgba(226,232,240,.95);

    box-shadow:
        0 5px 18px
        rgba(15,23,42,.08);

    font-size: 11px;
    font-weight: 700;
}

.vehicle-gps-live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #16a34a;

    box-shadow:
        0 0 0 4px
        rgba(22,163,74,.12);
}

.vehicle-gps-map-open {
    border: 1px solid #dce4ee;
    background: rgba(255,255,255,.95);

    padding: 8px 11px;

    border-radius: 9px;

    cursor: pointer;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

    color: #334155;

    box-shadow:
        0 5px 18px
        rgba(15,23,42,.07);
}

.vehicle-gps-map-open:hover {
    background: white;
    transform: translateY(-1px);
}

.vehicle-gps-map-open:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* RIGHT INFORMATION */

.vehicle-gps-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vehicle-gps-main-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: white;

    overflow: hidden;
}

.vehicle-gps-main-head {
    padding: 18px;

    border-bottom: 1px solid #edf1f5;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );
}

.vehicle-gps-vehicle-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vehicle-gps-vehicle-line h3 {
    margin: 0;

    font-size: 22px;
    letter-spacing: .3px;
}

.vehicle-gps-status {
    display: inline-flex;
    align-items: center;

    padding: 6px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.gps-status-running {
    color: #087443;
    background: #dcfce7;
}

.gps-status-stopped {
    color: #9a5207;
    background: #ffedd5;
}

.gps-status-offline {
    color: #b42318;
    background: #fee2e2;
}

.vehicle-gps-speed-box {
    padding: 18px;

    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.vehicle-gps-speed-value {
    font-size: 38px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: -1px;

    color: #172033;
}

.vehicle-gps-speed-label {
    padding-bottom: 4px;

    font-size: 12px;
    color: #64748b;
}


/* LOCATION */

.vehicle-gps-location-card {
    padding: 16px;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: white;
}

.vehicle-gps-section-label {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 7px;

    color: #64748b;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .6px;
}

.vehicle-gps-address {
    font-size: 13px;
    line-height: 1.55;

    font-weight: 650;

    color: #1e293b;
}

.vehicle-gps-coordinate {
    margin-top: 7px;

    font-size: 10px;
    color: #94a3b8;
}


/* DRIVER */

.vehicle-gps-driver-card {
    padding: 15px 16px;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: white;
}

.vehicle-gps-driver-name {
    font-size: 15px;
    font-weight: 750;

    color: #1e293b;
}


/* DETAILS */

.vehicle-gps-info-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    overflow: hidden;

    background: white;
}

.vehicle-gps-info-item {
    padding: 12px 14px;

    min-width: 0;

    border-bottom: 1px solid #edf1f5;
}

.vehicle-gps-info-item:nth-child(odd) {
    border-right: 1px solid #edf1f5;
}

.vehicle-gps-info-item span {
    display: block;

    margin-bottom: 4px;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .4px;

    color: #94a3b8;
}

.vehicle-gps-info-item strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 12px;
    color: #334155;
}


/* LOADING */

.vehicle-gps-loading-new {
    min-height: 260px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #64748b;
    font-size: 13px;
}


/* MOBILE */

@media (max-width: 900px) {

    .vehicle-gps-premium {
        grid-template-columns: 1fr;
    }

    .vehicle-gps-map-card {
        min-height: 360px;
    }

}

@media (max-width: 600px) {

    .vehicle-gps-map-card {
        min-height: 300px;
        border-radius: 12px;
    }

    .vehicle-gps-main-card,
    .vehicle-gps-location-card,
    .vehicle-gps-driver-card,
    .vehicle-gps-info-grid {
        border-radius: 12px;
    }

    .vehicle-gps-speed-value {
        font-size: 32px;
    }

}



/* =========================================================
VEHICLE GPS REAL MAP v2
========================================================= */

.vehicle-gps-real-map {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: #eef3f7;
}

.vehicle-gps-map-top {
    z-index: 500;
}

.tt-gps-marker-wrapper {
    background: transparent !important;
    border: 0 !important;
}

.tt-gps-marker {
    position: absolute;
    left: 50%;
    top: 0;

    transform:
        translateX(-50%);

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        4px solid white;

    background:
        #0f766e;

    font-size: 23px;

    box-shadow:
        0 6px 20px
        rgba(15,23,42,.24),
        0 0 0 4px
        rgba(15,118,110,.14);
}

.tt-gps-marker.stopped {
    background:
        #d97706;
}

.tt-gps-marker.offline {
    background:
        #64748b;
}

.tt-gps-marker-plate {
    position: absolute;

    left: 50%;
    top: 53px;

    transform:
        translateX(-50%);

    padding:
        5px 9px;

    white-space:
        nowrap;

    border-radius:
        7px;

    background:
        #172033;

    color:
        white;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 3px 9px
        rgba(15,23,42,.18);
}

.tt-gps-popup {
    min-width: 220px;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    line-height:
        1.45;
}

.tt-gps-popup-title {
    display: block;

    margin-bottom:
        4px;

    font-size:
        16px;
}

.tt-gps-popup-status {
    margin-bottom:
        10px;

    color:
        #0f766e;

    font-weight:
        700;
}

.tt-gps-popup-time {
    margin-top:
        7px;

    color:
        #64748b;

    font-size:
        12px;
}

.vehicle-gps-real-map
.leaflet-popup-content-wrapper {
    border-radius:
        14px;

    box-shadow:
        0 12px 34px
        rgba(15,23,42,.18);
}

.vehicle-gps-real-map
.leaflet-control-zoom {
    border: 0;

    box-shadow:
        0 4px 14px
        rgba(15,23,42,.14);
}



/* ============================================================
   TRUNG THONG PLATFORM
   WEB UI V2
   ============================================================ */

:root {
    --tt-bg: #f5f7fb;
    --tt-surface: #ffffff;
    --tt-border: #e7ebf1;
    --tt-text: #172033;
    --tt-muted: #778196;

    --tt-primary: #173b6c;
    --tt-primary-soft: #edf3fb;

    --tt-radius: 14px;
    --tt-radius-sm: 10px;

    --tt-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 8px 24px rgba(15,23,42,.035);
}


/* ============================================================
   BODY
   ============================================================ */

body {
    background: var(--tt-bg);
    color: var(--tt-text);
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #173b6c 0%,
            #112f57 100%
        );

    border-right:
        1px solid rgba(255,255,255,.04);

    box-shadow:
        4px 0 24px rgba(15,23,42,.06);
}


.brand {
    height: 72px;

    padding-left: 18px;
    padding-right: 18px;
}


.brand-icon {
    width: 38px;
    height: 38px;

    border-radius: 11px;

    box-shadow:
        0 4px 14px rgba(0,0,0,.08);
}


.brand-name {
    font-size: 15px;
    letter-spacing: .15px;
}


.brand-sub {
    opacity: .56;
}


.nav {
    padding:
        12px 10px
        18px;
}


.nav-group-title {
    margin:
        20px 12px
        7px;

    font-size: 9px;

    letter-spacing: .85px;
    text-transform: uppercase;

    opacity: .43;
}


.nav-item {
    min-height: 42px;

    padding:
        10px 12px;

    border-radius: 9px;

    margin-bottom: 3px;

    font-size: 12px;
    font-weight: 520;

    color:
        rgba(255,255,255,.72);
}


.nav-item:hover {
    background:
        rgba(255,255,255,.075);

    color: #fff;
}


.nav-item.active {
    background:
        rgba(255,255,255,.13);

    color: #fff;

    box-shadow:
        inset 3px 0 0
        rgba(255,255,255,.78);
}


.nav-icon {
    width: 24px;

    opacity: .9;

    font-size: 15px;
}


.sidebar-footer {
    background:
        rgba(0,0,0,.06);

    padding: 14px 18px;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {
    height: 70px;

    padding:
        0 24px;

    background:
        rgba(255,255,255,.96);

    border-bottom:
        1px solid var(--tt-border);

    box-shadow:
        0 1px 2px
        rgba(15,23,42,.02);

    backdrop-filter:
        blur(10px);
}


.topbar-left h2 {
    font-size: 16px;

    font-weight: 720;

    color: var(--tt-text);
}


.page-subtitle {
    color: var(--tt-muted);

    font-size: 10px;
}


.business-select,
.logout-btn {
    border:
        1px solid var(--tt-border);

    border-radius: 9px;

    background: #fff;
}


.business-select:hover,
.logout-btn:hover {
    border-color: #cbd5e1;

    background: #f8fafc;
}


.user-avatar {
    width: 36px;
    height: 36px;

    background:
        var(--tt-primary-soft);

    color:
        var(--tt-primary);

    border:
        1px solid #dce6f3;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.content {
    max-width: 1720px;

    padding:
        24px 26px
        42px;

    margin:
        0 auto;
}


.page-heading {
    margin-bottom: 18px;
}


.page-heading h1 {
    font-size: 22px;

    font-weight: 760;

    letter-spacing: -.3px;
}


.page-heading p {
    color: var(--tt-muted);

    font-size: 11px;
}


.refresh-btn {
    min-height: 38px;

    border:
        1px solid var(--tt-border);

    border-radius: 9px;

    background: #fff;

    font-weight: 600;

    color: #475569;

    transition: .15s;
}


.refresh-btn:hover {
    background: #f8fafc;

    border-color: #cbd5e1;

    transform:
        translateY(-1px);
}


/* ============================================================
   KPI
   ============================================================ */

.kpi-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(180px,1fr)
        );

    gap: 13px;

    margin-bottom: 16px;
}


.kpi-card {
    min-height: 105px;

    padding: 16px;

    border:
        1px solid var(--tt-border);

    border-radius:
        var(--tt-radius);

    background:
        var(--tt-surface);

    box-shadow:
        0 1px 2px
        rgba(15,23,42,.025);

    transition:
        transform .15s,
        box-shadow .15s,
        border-color .15s;
}


.kpi-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #d7dee8;

    box-shadow:
        var(--tt-shadow);
}


.kpi-icon {
    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    border-radius: 11px;

    background:
        var(--tt-primary-soft);

    color:
        var(--tt-primary);

    font-size: 17px;
}


.kpi-title {
    margin-bottom: 6px;

    font-size: 10px;

    font-weight: 650;

    color:
        var(--tt-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .25px;
}


.kpi-number {
    font-size: 25px;

    line-height: 1;

    font-weight: 780;

    letter-spacing: -.6px;

    color:
        var(--tt-text);
}


.kpi-sub {
    margin-top: 6px;

    color:
        #94a3b8;
}


/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard-grid {
    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, .78fr);

    gap: 15px;

    align-items: start;
}


.panel {
    border:
        1px solid var(--tt-border);

    border-radius:
        var(--tt-radius);

    background:
        var(--tt-surface);

    box-shadow:
        0 1px 2px
        rgba(15,23,42,.025);
}


.panel-header {
    min-height: 60px;

    padding:
        13px 16px;

    border-bottom:
        1px solid #edf0f4;
}


.panel-header h3 {
    font-size: 13px;

    font-weight: 720;

    color:
        var(--tt-text);
}


.panel-header p {
    margin-top: 4px;

    color:
        var(--tt-muted);
}


.badge {
    background:
        var(--tt-primary-soft);

    color:
        var(--tt-primary);

    font-weight: 650;
}


/* ============================================================
   TABLES
   ============================================================ */

.table-wrapper {
    scrollbar-width: thin;
}


.table-wrapper table {
    min-width: 760px;
}


table {
    font-size: 11px;
}


th {
    background: #fafbfc;

    color: #687386;

    font-size: 9px;

    font-weight: 720;

    letter-spacing: .2px;

    text-transform: uppercase;
}


th,
td {
    padding:
        11px 13px;
}


tbody tr {
    transition:
        background .12s;
}


tbody tr:hover {
    background:
        #f8fafc;
}


/* ============================================================
   INPUT / SEARCH / SELECT
   ============================================================ */

input,
select,
textarea {
    border-radius: 9px;
}


input:focus,
select:focus,
textarea:focus {
    outline: none;

    border-color:
        #9eb5d2 !important;

    box-shadow:
        0 0 0 3px
        rgba(23,59,108,.07);
}


.search-input {
    min-height: 38px;

    border:
        1px solid var(--tt-border);

    background:
        #fff;
}


/* ============================================================
   BUTTONS
   ============================================================ */

button {
    font-family: inherit;
}


.primary-btn,
.btn-primary {
    border-radius: 9px;

    box-shadow: none;
}


button:not(.nav-item):not(.modal-close) {
    transition:
        background .15s,
        border-color .15s,
        transform .15s;
}


/* ============================================================
   DOI 3 SUMMARY
   Giảm khối xanh lớn của Dashboard cũ
   ============================================================ */

#doi3-summary {
    border-radius:
        var(--tt-radius) !important;

    border:
        1px solid
        var(--tt-border) !important;

    box-shadow:
        none !important;

    overflow: hidden;
}


/* Nếu JS tạo hero/summary gradient */
#doi3-summary [style*="linear-gradient"] {
    box-shadow:
        none !important;
}


/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
    backdrop-filter:
        blur(3px);
}


.modal-card {
    border-radius:
        16px;

    border:
        1px solid
        rgba(226,232,240,.9);

    box-shadow:
        0 24px 70px
        rgba(15,23,42,.18);
}


.modal-header {
    border-bottom:
        1px solid
        var(--tt-border);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}


::-webkit-scrollbar-track {
    background:
        transparent;
}


::-webkit-scrollbar-thumb {
    background:
        #cbd5e1;

    border-radius:
        20px;
}


::-webkit-scrollbar-thumb:hover {
    background:
        #94a3b8;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (
    min-width: 901px
) and (
    max-width: 1250px
) {

    :root {
        --sidebar-width:
            220px;
    }

    .content {
        padding:
            20px;
    }

    .kpi-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .dashboard-grid {
        grid-template-columns:
            1fr;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (
    max-width: 900px
) {

    .topbar {
        height: 62px;

        padding:
            0 13px;
    }

    .topbar-right {
        gap: 7px;
    }

    .content {
        padding:
            14px 12px
            32px;
    }

    .page-heading {
        margin-bottom:
            14px;
    }

    .page-heading h1 {
        font-size:
            19px;
    }

    .kpi-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap: 9px;
    }

    .kpi-card {
        min-height:
            92px;

        padding:
            12px;

        gap:
            10px;
    }

    .kpi-icon {
        width: 36px;
        height: 36px;

        flex:
            0 0 36px;

        font-size:
            15px;
    }

    .kpi-number {
        font-size:
            21px;
    }

    .dashboard-grid {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }

    .panel {
        border-radius:
            12px;
    }

    .panel-header {
        padding:
            12px 13px;
    }
}


@media (
    max-width: 520px
) {

    .kpi-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .kpi-card {
        align-items:
            flex-start;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
    }

    .logout-btn {
        padding:
            7px 8px;
    }
}


/* ============================================================
   END TRUNG THONG WEB UI V2
   ============================================================ */



/* ============================================================
   TRUNG THONG - DOI 3 DASHBOARD V2.1
   ============================================================ */

#doi3-dashboard-summary.doi3-summary {
    grid-column: 1 / -1 !important;

    background: #ffffff !important;
    color: #172033 !important;

    border: 1px solid #e3e9f1 !important;
    border-radius: 18px !important;

    padding: 20px !important;

    box-shadow:
        0 4px 18px rgba(15, 23, 42, .045) !important;

    margin-top: 16px !important;
}


/* ============================================================
   HEADER
   ============================================================ */

#doi3-dashboard-summary .doi3-summary-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    margin-bottom: 18px !important;
}

#doi3-dashboard-summary .doi3-summary-head h3 {
    margin: 0 !important;

    font-size: 20px !important;
    line-height: 1.25 !important;

    font-weight: 800 !important;
    color: #172033 !important;
}

#doi3-dashboard-summary .doi3-summary-head p {
    margin: 5px 0 0 !important;

    color: #7b879b !important;

    font-size: 13px !important;
}


/* ============================================================
   STATUS
   ============================================================ */

#doi3-dashboard-summary .doi3-status {
    background: #eaf8ef !important;
    color: #16803c !important;

    border: 1px solid #ccefd8 !important;

    padding: 7px 11px !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

#doi3-dashboard-summary .doi3-config-button {
    height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 14px !important;

    border: 1px solid #d9e1eb !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #26364d !important;

    font-size: 13px !important;
    font-weight: 750 !important;

    box-shadow: 0 2px 5px rgba(15, 23, 42, .025) !important;

    transition: .16s ease !important;
}

#doi3-dashboard-summary .doi3-config-button:hover {
    border-color: #9aa9bd !important;
    background: #f8fafc !important;
    transform: translateY(-1px);
}


/* ============================================================
   SEARCH
   ============================================================ */

#doi3-global-search {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) auto !important;

    gap: 10px !important;

    margin: 0 0 18px !important;

    padding: 12px !important;

    background: #f7f9fc !important;

    border: 1px solid #e3e9f1 !important;
    border-radius: 14px !important;
}

#doi3-global-search input {
    width: 100% !important;
    height: 44px !important;

    padding: 0 15px !important;

    border: 1px solid #d8e0ea !important;
    border-radius: 10px !important;

    background: #ffffff !important;

    color: #172033 !important;

    font-size: 14px !important;

    outline: none !important;
}

#doi3-global-search input::placeholder {
    color: #8a96a8 !important;
}

#doi3-global-search input:focus {
    border-color: #6f86a5 !important;

    box-shadow:
        0 0 0 3px rgba(65, 88, 120, .08) !important;
}

#doi3-global-search button {
    min-width: 92px !important;
    height: 44px !important;

    background: #17263c !important;
    color: #ffffff !important;

    border-color: #17263c !important;
}

#doi3-global-search button:hover {
    background: #223652 !important;
    border-color: #223652 !important;
}


/* ============================================================
   KPI GRID
   ============================================================ */

#doi3-dashboard-summary .doi3-summary-grid {
    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 10px !important;
}


/* ============================================================
   KPI CARDS
   ============================================================ */

#doi3-dashboard-summary .doi3-summary-card {
    position: relative !important;

    min-width: 0 !important;
    min-height: 112px !important;

    padding: 14px !important;

    background: #ffffff !important;

    border: 1px solid #e1e7ef !important;
    border-radius: 13px !important;

    color: #172033 !important;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, .025) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
}

#doi3-dashboard-summary .doi3-summary-card:hover {
    background: #ffffff !important;

    border-color: #b9c5d4 !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(15, 23, 42, .07) !important;
}

#doi3-dashboard-summary .doi3-summary-card:focus-visible {
    outline: 3px solid rgba(47, 82, 125, .15) !important;
    outline-offset: 2px !important;
}


/* label */

#doi3-dashboard-summary .doi3-summary-card span {
    display: block !important;

    color: #68768a !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: .025em !important;
}


/* number */

#doi3-dashboard-summary .doi3-summary-card strong {
    display: block !important;

    margin-top: 8px !important;

    color: #172033 !important;

    font-size: 27px !important;
    line-height: 1 !important;

    font-weight: 800 !important;
}


/* description */

#doi3-dashboard-summary .doi3-summary-card small {
    display: block !important;

    margin-top: 8px !important;

    color: #8490a1 !important;

    font-size: 11px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   CARD CANH BAO
   ============================================================ */

#doi3-dashboard-summary
.doi3-summary-card:nth-child(4) strong {
    color: #c76a15 !important;
}

#doi3-dashboard-summary
.doi3-summary-card:nth-child(6) strong {
    color: #b45309 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1350px) {

    #doi3-dashboard-summary .doi3-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 850px) {

    #doi3-dashboard-summary {
        padding: 15px !important;
    }

    #doi3-dashboard-summary .doi3-summary-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    #doi3-dashboard-summary .doi3-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 560px) {

    #doi3-global-search {
        grid-template-columns: 1fr !important;
    }

    #doi3-global-search button {
        width: 100% !important;
    }

    #doi3-dashboard-summary .doi3-summary-grid {
        grid-template-columns: 1fr !important;
    }

}



/* ============================================================
   SEARCH RESULT V2
   ============================================================ */

.doi3-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.doi3-search-box {
    position: relative;

    min-width: 0;
}


.doi3-search-icon {
    position: absolute;

    left: 14px;
    top: 50%;

    transform:
        translateY(-50%);

    pointer-events: none;

    opacity: .65;
}


#doi3-global-search
.doi3-search-box input {
    padding-left:
        42px !important;

    padding-right:
        42px !important;
}


.doi3-search-clear {
    position: absolute;

    right: 10px;
    top: 50%;

    transform:
        translateY(-50%);

    width: 27px;
    height: 27px;

    border: 0;

    border-radius: 50%;

    background: #eef2f6;

    color: #64748b;

    font-size: 19px;

    cursor: pointer;
}


.doi3-search-results {
    margin:
        -4px 0
        18px;

    background:
        #ffffff;

    border:
        1px solid #e1e7ef;

    border-radius:
        14px;

    overflow: hidden;

    box-shadow:
        0 7px 20px
        rgba(15,23,42,.055);
}


.doi3-search-result-head {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 15px;

    padding:
        13px 15px;

    border-bottom:
        1px solid #edf1f5;

    background:
        #fafbfd;
}


.doi3-search-result-head strong {
    display: block;

    color: #172033;

    font-size: 13px;
}


.doi3-search-result-head span {
    display: block;

    margin-top: 3px;

    color: #7a8799;

    font-size: 11px;
}


.doi3-search-result-head button {
    border:
        1px solid #dde4ed;

    background:
        #ffffff;

    color:
        #526174;

    border-radius:
        8px;

    padding:
        7px 10px;

    cursor:
        pointer;
}


.doi3-search-table-wrap {
    overflow-x: auto;
}


.doi3-search-table {
    min-width: 900px;

    width: 100%;

    border-collapse:
        collapse;
}


.doi3-search-table th {
    padding:
        10px 12px;

    background:
        #ffffff;

    border-bottom:
        1px solid #e9eef4;

    color:
        #748095;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;
}


.doi3-search-table td {
    padding:
        11px 12px;

    border-bottom:
        1px solid #f0f3f7;

    color:
        #334155;

    font-size:
        11px;
}


.doi3-search-table tr:last-child td {
    border-bottom: 0;
}


.doi3-search-table tbody tr:hover {
    background:
        #f8fafc;
}


.doi3-search-status {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        #edf3f8;

    color:
        #42566f;

    font-size:
        10px;

    font-weight:
        700;
}


.doi3-search-open {
    border: 0;

    border-radius:
        8px;

    background:
        #17263c;

    color:
        #ffffff;

    padding:
        7px 11px;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}


.doi3-search-loading,
.doi3-search-empty {
    padding:
        24px;

    text-align:
        center;

    color:
        #778196;
}


.doi3-search-empty strong {
    display: block;

    color:
        #334155;

    margin-bottom:
        4px;
}


.doi3-search-empty span {
    font-size:
        12px;
}


.doi3-search-empty.error strong {
    color:
        #b91c1c;
}


/* ============================================================
   SIDEBAR V2
   ============================================================ */

.nav .tt-nav-title {
    margin-top:
        20px;

    color:
        rgba(255,255,255,.43);

    letter-spacing:
        .09em;
}


.nav .tt-nav-title:first-child {
    margin-top:
        6px;
}


.sidebar .nav-item {
    position:
        relative;
}


.sidebar .nav-item.active::before {
    content: "";

    position:
        absolute;

    left:
        4px;

    top:
        9px;

    bottom:
        9px;

    width:
        3px;

    border-radius:
        5px;

    background:
        #ffffff;
}


@media (max-width: 700px) {

    .doi3-dashboard-actions {
        width: 100%;
    }

    .doi3-dashboard-actions
    .doi3-config-button {
        flex: 1;
    }

}



/* ============================================================
   DOI 3 DASHBOARD CLEAN V1
   Không đụng sidebar / API / GPS backend
   ============================================================ */


/* Dashboard rộng và thoáng hơn */

#view-dashboard .page-heading {
    margin-bottom: 16px;
}


/* ------------------------------------------------------------
   ẨN KPI CŨ
   GPS dashboard JS vẫn có thể dùng dữ liệu, chỉ không hiển thị
   ------------------------------------------------------------ */

#view-dashboard #kpi-grid {
    display: none !important;
}


/* ------------------------------------------------------------
   HOẠT ĐỘNG HÔM NAY
   ------------------------------------------------------------ */

#doi3-dashboard-summary {
    margin-top: 0 !important;
    margin-bottom: 18px !important;

    padding: 20px !important;

    border: 1px solid #dfe7f1 !important;
    border-radius: 18px !important;

    background: #ffffff !important;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, .025) !important;
}


#doi3-dashboard-summary .doi3-summary-head {
    margin-bottom: 16px;
}


#doi3-dashboard-summary .doi3-summary-head h3 {
    margin: 0 0 5px;

    font-size: 20px;
    font-weight: 800;

    color: #172033;
}


#doi3-dashboard-summary .doi3-summary-head p {
    margin: 0;

    color: #7c8aa0;
}


/* ------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------ */

#doi3-global-search {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;

    margin: 16px 0 18px !important;
}


#doi3-global-search .doi3-search-box {
    min-height: 48px;

    border: 1px solid #d8e1ec !important;
    border-radius: 12px !important;

    background: #ffffff !important;

    box-shadow: none !important;
}


#doi3-global-search input {
    font-size: 14px !important;
}


#doi3-global-search .doi3-search-submit {
    min-width: 104px;

    border-radius: 12px !important;
}


/* ------------------------------------------------------------
   SEARCH RESULTS
   ------------------------------------------------------------ */

#doi3-search-results:not([hidden]) {
    display: block !important;

    margin:
        -5px 0
        18px;

    border:
        1px solid #dfe7f1;

    border-radius:
        14px;

    background:
        #ffffff;

    overflow:
        hidden;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .07);
}


.doi3-search-result-head {
    padding:
        14px 16px !important;

    background:
        #f8fafc;
}


.doi3-search-table-wrap {
    max-height:
        360px;

    overflow:
        auto;
}


.doi3-search-table {
    width:
        100%;
}


/* ------------------------------------------------------------
   6 KPI HOẠT ĐỘNG
   ------------------------------------------------------------ */

#doi3-dashboard-summary .doi3-summary-grid {
    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 10px !important;
}


#doi3-dashboard-summary .doi3-summary-card {
    min-height: 112px !important;

    padding: 15px !important;

    border:
        1px solid #dfe7f1 !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    text-align:
        left !important;

    box-shadow:
        none !important;
}


#doi3-dashboard-summary
.doi3-summary-card:hover {
    border-color:
        #b9c8da !important;

    transform:
        translateY(-1px);
}


#doi3-dashboard-summary
.doi3-summary-card span {
    display:
        block;

    min-height:
        28px;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    color:
        #5f6f86;
}


#doi3-dashboard-summary
.doi3-summary-card strong {
    display:
        block;

    margin:
        5px 0;

    font-size:
        27px;

    line-height:
        1;

    color:
        #172033;
}


#doi3-dashboard-summary
.doi3-summary-card small {
    color:
        #8290a5;

    line-height:
        1.4;
}


/* ------------------------------------------------------------
   DASHBOARD PHÍA DƯỚI

   Đổi từ layout cũ sang:
   2/3 nội dung + 1/3 kiểm tra dữ liệu
   ------------------------------------------------------------ */

#view-dashboard .dashboard-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, .85fr) !important;

    gap:
        16px !important;

    align-items:
        start;
}


/* Đội xe hiện tại không còn cần thiết trên Tổng quan.
   Menu Đầu kéo / Moóc / Tài xế đã có sidebar. */

#view-dashboard #dashboard-fleet-panel {
    display:
        none !important;
}


/* Các panel còn lại */

#view-dashboard .dashboard-grid > .panel {
    border:
        1px solid #dfe7f1;

    border-radius:
        16px;

    box-shadow:
        none;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1180px) {

    #doi3-dashboard-summary
    .doi3-summary-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr))
            !important;
    }

}


@media (max-width: 900px) {

    #view-dashboard
    .dashboard-grid {

        grid-template-columns:
            1fr !important;
    }


    #doi3-dashboard-summary
    .doi3-summary-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;
    }

}


@media (max-width: 620px) {

    #doi3-global-search {

        grid-template-columns:
            1fr !important;
    }


    #doi3-global-search
    .doi3-search-submit {

        width:
            100%;
    }


    #doi3-dashboard-summary
    .doi3-summary-grid {

        grid-template-columns:
            1fr !important;
    }

}




/* ============================================================
   DOI3 KPI BUTTONS - INTERACTIVE
   ============================================================ */

#doi3-dashboard-summary .doi3-summary-card {
    position: relative !important;

    cursor: pointer !important;

    padding-right: 40px !important;
}


/* mũi tên bên phải */

#doi3-dashboard-summary
.doi3-summary-card::after {
    content: "›";

    position: absolute;

    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 25px;
    font-weight: 400;

    color: #9aa8ba;

    transition:
        transform .15s ease,
        color .15s ease;
}


/* hover */

#doi3-dashboard-summary
.doi3-summary-card:hover {
    background: #f8fafc !important;

    border-color: #9fb0c5 !important;

    box-shadow:
        0 8px 20px rgba(15,23,42,.065) !important;

    transform:
        translateY(-2px) !important;
}


#doi3-dashboard-summary
.doi3-summary-card:hover::after {
    color: #173b6c;

    transform:
        translate(3px,-50%);
}


/* focus bàn phím */

#doi3-dashboard-summary
.doi3-summary-card:focus-visible {
    outline: none !important;

    border-color:
        #54c8be !important;

    box-shadow:
        0 0 0 3px
        rgba(45,212,191,.22) !important;
}


/* dòng gợi ý bấm */

#doi3-dashboard-summary
.doi3-summary-card small::after {
    content: " · Xem danh sách";

    color: #566c86;
}


/* cảnh báo */

#doi3-dashboard-summary
.doi3-summary-card:nth-child(4) {
    background:
        #fffdf8 !important;
}


#doi3-dashboard-summary
.doi3-summary-card:nth-child(6) {
    background:
        #fffaf5 !important;
}


/* mobile */

@media (max-width: 620px) {

    #doi3-dashboard-summary
    .doi3-summary-card {
        min-height: 96px !important;
    }

}



/* ============================================================
   DOI3 KPI BUTTONS - INTERACTIVE
   ============================================================ */

#doi3-dashboard-summary .doi3-summary-card {
    position: relative !important;

    cursor: pointer !important;

    padding-right: 40px !important;
}


/* mũi tên bên phải */

#doi3-dashboard-summary
.doi3-summary-card::after {
    content: "›";

    position: absolute;

    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 25px;
    font-weight: 400;

    color: #9aa8ba;

    transition:
        transform .15s ease,
        color .15s ease;
}


/* hover */

#doi3-dashboard-summary
.doi3-summary-card:hover {
    background: #f8fafc !important;

    border-color: #9fb0c5 !important;

    box-shadow:
        0 8px 20px rgba(15,23,42,.065) !important;

    transform:
        translateY(-2px) !important;
}


#doi3-dashboard-summary
.doi3-summary-card:hover::after {
    color: #173b6c;

    transform:
        translate(3px,-50%);
}


/* focus bàn phím */

#doi3-dashboard-summary
.doi3-summary-card:focus-visible {
    outline: none !important;

    border-color:
        #54c8be !important;

    box-shadow:
        0 0 0 3px
        rgba(45,212,191,.22) !important;
}


/* dòng gợi ý bấm */

#doi3-dashboard-summary
.doi3-summary-card small::after {
    content: " · Xem danh sách";

    color: #566c86;
}


/* cảnh báo */

#doi3-dashboard-summary
.doi3-summary-card:nth-child(4) {
    background:
        #fffdf8 !important;
}


#doi3-dashboard-summary
.doi3-summary-card:nth-child(6) {
    background:
        #fffaf5 !important;
}


/* mobile */

@media (max-width: 620px) {

    #doi3-dashboard-summary
    .doi3-summary-card {
        min-height: 96px !important;
    }

}


/* ============================================================
   DOI3 KPI DRILLDOWN RESULTS
   ============================================================ */

.doi3-metric-results {
    margin-top: 14px;

    border:
        1px solid #dfe7f1;

    border-radius:
        14px;

    background:
        #ffffff;

    overflow:
        hidden;

    box-shadow:
        0 8px 24px rgba(15,23,42,.055);
}


.doi3-metric-results[hidden] {
    display:
        none !important;
}


.doi3-metric-results
.doi3-search-table-wrap {
    max-height:
        360px;

    overflow:
        auto;
}



/* ============================================================
   DOI 3 CONFIG V2
============================================================ */

.tt-config-page {
    width: 100%;
}

.tt-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.tt-config-header h2 {
    margin: 0;
    font-size: 25px;
    color: #152033;
}

.tt-config-header p {
    margin: 6px 0 0;
    color: #7b879b;
    font-size: 14px;
}

.tt-config-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #d9e8df;
    border-radius: 999px;
    background: #f2fbf5;
    color: #168348;
    font-size: 13px;
    font-weight: 700;
}

.tt-config-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22a95a;
}


.tt-config-layout {
    display: grid;
    grid-template-columns: minmax(310px, 36%) 1fr;
    gap: 20px;
    align-items: start;
}


.tt-config-routes,
.tt-config-detail {
    border: 1px solid #dde5ef;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}


.tt-config-section-title {
    padding: 18px 20px;
    border-bottom: 1px solid #e6ebf2;
}

.tt-config-section-title > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tt-config-section-title strong {
    font-size: 16px;
    color: #172033;
}

.tt-config-section-title small {
    padding: 5px 9px;
    border-radius: 999px;
    background: #f0f4f9;
    color: #64748b;
}


.tt-config-route-list {
    padding: 9px;
}


.tt-config-route-card {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 12px;
    padding: 14px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    transition: .15s ease;
    margin-bottom: 4px;
}

.tt-config-route-card:hover {
    background: #f6f9fc;
}

.tt-config-route-card.active {
    background: #eef8f7;
    border-color: #b9e5df;
    box-shadow: inset 3px 0 0 #138d82;
}


.tt-config-route-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}


.tt-config-route-number {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #edf2f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #40516a;
}


.tt-config-route-name {
    min-width: 0;
}

.tt-config-route-name strong {
    display: block;
    color: #172033;
    font-size: 14px;
    line-height: 1.4;
}

.tt-config-route-name span {
    display: block;
    color: #8a96a8;
    font-size: 12px;
    margin-top: 4px;
}


.tt-config-route-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.tt-config-route-stats > div {
    text-align: right;
}

.tt-config-route-stats small {
    display: block;
    color: #94a0b1;
    font-size: 10px;
}

.tt-config-route-stats strong {
    display: block;
    color: #243044;
    font-size: 12px;
    margin-top: 2px;
}

.tt-config-chevron {
    color: #8793a5;
    font-size: 24px;
}


.tt-config-detail {
    padding: 22px;
    min-height: 500px;
}


.tt-config-detail-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.tt-config-detail-head h2 {
    margin: 5px 0 7px;
    font-size: 22px;
    color: #152033;
}

.tt-config-code {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #8995a7;
}

.tt-config-active {
    display: inline-block;
    font-size: 12px;
    color: #168348;
    font-weight: 700;
}


.tt-config-current {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}


.tt-config-current-card {
    padding: 18px;
    border: 1px solid #e0e7ef;
    border-radius: 14px;
    background: #fafbfd;
}

.tt-config-current-card small {
    color: #7b8798;
    font-size: 11px;
    font-weight: 800;
}

.tt-config-current-card > div {
    margin: 12px 0;
}

.tt-config-current-card strong {
    font-size: 30px;
    color: #152033;
}

.tt-config-current-card strong.money {
    font-size: 23px;
}

.tt-config-current-card span {
    margin-left: 5px;
    color: #7f8a9d;
    font-size: 13px;
}

.tt-config-current-card button {
    border: 1px solid #d5dee9;
    background: #fff;
    border-radius: 9px;
    padding: 8px 12px;
    color: #26364c;
    font-weight: 700;
    cursor: pointer;
}


.tt-config-block {
    border: 1px solid #e1e7ef;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

.tt-config-block-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.tt-config-block-head h3 {
    margin: 0;
    color: #182236;
    font-size: 16px;
}

.tt-config-block-head p {
    margin: 4px 0 0;
    color: #8995a6;
    font-size: 12px;
}

.tt-config-block-head > span {
    background: #f1f5f9;
    border-radius: 999px;
    padding: 5px 9px;
    color: #64748b;
    font-size: 11px;
}


.tt-config-timeline {
    margin-top: 18px;
}

.tt-config-stage {
    display: flex;
    gap: 13px;
    min-height: 58px;
}

.tt-stage-line {
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tt-stage-line span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #173d69;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.tt-stage-line i {
    width: 2px;
    flex: 1;
    background: #dbe3ec;
}

.tt-stage-content {
    padding: 4px 0 15px;
}

.tt-stage-content strong {
    display: block;
    color: #1c273a;
    font-size: 14px;
}

.tt-stage-content small {
    display: block;
    margin-top: 4px;
    color: #8995a6;
}


.tt-config-history-block {
    border: 1px solid #e1e7ef;
    border-radius: 14px;
    overflow: hidden;
}

.tt-config-history-block summary {
    list-style: none;
    padding: 16px 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tt-config-history-block summary::-webkit-details-marker {
    display: none;
}

.tt-config-history-block summary strong {
    display: block;
    color: #1d293b;
}

.tt-config-history-block summary small {
    display: block;
    color: #8995a6;
    margin-top: 3px;
}

.tt-config-history-block summary > span {
    font-size: 22px;
    color: #8a96a8;
}

.tt-config-history-content {
    border-top: 1px solid #e6ebf1;
    padding: 18px;
}

.tt-history-group + .tt-history-group {
    margin-top: 22px;
}

.tt-history-group h4 {
    margin: 0 0 10px;
    color: #334155;
}


.tt-config-welcome {
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tt-config-welcome-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #eef3f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.tt-config-welcome h3 {
    margin: 15px 0 6px;
    color: #1e293b;
}

.tt-config-welcome p {
    max-width: 350px;
    color: #8995a6;
    line-height: 1.6;
}


@media (max-width: 1050px) {

    .tt-config-layout {
        grid-template-columns: 1fr;
    }

    .tt-config-current {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 700px) {

    .tt-config-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tt-config-current {
        grid-template-columns: 1fr;
    }

    .tt-config-route-stats > div {
        display: none;
    }
}



/* ============================================================
   DOI3 CONFIG FIX - NO OVERLAP
   ============================================================ */

#view-trip-config {
    overflow: visible !important;
}


#trip-config-list {
    width: 100% !important;
    max-width: none !important;
}


/* Không dùng modal tuyến cũ khi đã có master-detail */

#trip-config-modal {
    z-index: 1200;
}


/* Rate modal luôn nổi trên cùng */

#trip-rate-modal {
    z-index: 5000 !important;
}


#trip-rate-modal .modal-card {
    width: min(620px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 40px) !important;

    overflow-y: auto !important;

    margin: auto !important;

    border-radius: 16px !important;

    background: #fff !important;
}


#trip-rate-modal .modal-header {
    position: sticky;
    top: 0;

    z-index: 2;

    background: #fff !important;
}


/* Form rate không được chồng field */

#trip-rate-modal form,
#trip-rate-modal .form-grid,
#trip-rate-modal .modal-body {
    min-width: 0 !important;
}


#trip-rate-modal label {
    display: block !important;

    width: 100% !important;

    margin-bottom: 13px !important;

    color: #475569 !important;

    font-size: 12px !important;

    font-weight: 650 !important;
}


#trip-rate-modal input,
#trip-rate-modal select,
#trip-rate-modal textarea {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    margin-top: 6px !important;

    padding: 10px 11px !important;

    border: 1px solid #d5dee9 !important;

    border-radius: 9px !important;

    background: #fff !important;

    color: #172033 !important;
}


/* Theo loại xe / theo xe */

#trip-rate-vehicle-type-wrap,
#trip-rate-vehicle-wrap {
    width: 100% !important;
}


#trip-rate-vehicle-wrap select {
    min-height: 42px !important;

    cursor: pointer !important;
}


#trip-rate-vehicle-wrap.hidden,
#trip-rate-vehicle-type-wrap.hidden {
    display: none !important;
}


/* Layout config chính */

.tt-config-layout {
    overflow: visible !important;
}


.tt-config-routes,
.tt-config-detail {
    min-width: 0 !important;
}


.tt-config-detail {
    overflow: visible !important;
}


/* History không đè nhau */

.trip-config-history-row {
    display: grid !important;

    grid-template-columns:
        minmax(150px, 1.4fr)
        minmax(120px, .8fr)
        minmax(120px, .8fr) !important;

    gap: 12px !important;

    align-items: center !important;
}


@media (max-width: 700px) {

    .trip-config-history-row {
        grid-template-columns:
            1fr !important;
    }

    #trip-rate-modal .modal-card {
        width: calc(100vw - 16px) !important;
    }

}



/* ============================================================
   TRIP CONFIG V2.2
   ============================================================ */


/* Danh sách tuyến bên trái */

.tt-config-route-card {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    gap: 12px !important;

    padding:
        14px 12px !important;

    overflow: hidden !important;
}


.tt-config-route-main {
    display: grid !important;

    grid-template-columns:
        38px
        minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 12px !important;

    min-width: 0 !important;
}


.tt-config-route-number {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    max-width: 38px !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    font-size: 11px !important;
}


.tt-config-route-name {
    min-width: 0 !important;

    overflow: hidden !important;
}


.tt-config-route-name strong {
    display: block !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    line-height: 1.35 !important;

    max-width: 100% !important;
}


.tt-config-route-name span {
    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* Dầu / lương */

.tt-config-route-stats {
    display: grid !important;

    grid-template-columns:
        58px
        82px
        18px !important;

    gap: 7px !important;

    align-items: center !important;
}


.tt-config-route-stats > div {
    min-width: 0 !important;

    text-align: right !important;
}


.tt-config-route-stats strong {
    white-space: nowrap !important;

    font-size: 11px !important;
}


.tt-config-chevron {
    text-align: right;
}


/* Form modal */

#trip-rate-vehicle-type-wrap select,
#trip-rate-vehicle-wrap select {
    width: 100% !important;

    min-height: 42px !important;

    padding:
        9px 11px !important;

    border:
        1px solid #d5dee9 !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    color:
        #172033 !important;

    cursor: pointer !important;
}


#trip-rate-vehicle-type-wrap.hidden,
#trip-rate-vehicle-wrap.hidden {
    display: none !important;
}


/* Chiều rộng sidebar config */

@media (min-width: 1200px) {

    .tt-config-layout {
        grid-template-columns:
            minmax(390px, 440px)
            minmax(0, 1fr) !important;
    }

}


@media (max-width: 1199px) {

    .tt-config-route-stats {
        grid-template-columns:
            50px
            72px
            18px !important;
    }

}




/* ============================================================
   VEHICLE FUEL MATRIX
   ============================================================ */

#view-vehicles .table-wrapper {
    overflow-x: auto !important;
}


#view-vehicles table {
    min-width: 1180px !important;
}


#view-vehicles th,
#view-vehicles td {
    vertical-align: middle !important;
}


.vehicle-sticky-plate {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
}


thead .vehicle-sticky-plate {
    z-index: 4 !important;
}


.fuel-route-head {
    min-width: 155px !important;
    max-width: 190px !important;
}


.fuel-route-head > span {
    display: block;

    font-size: 11px;
    font-weight: 700;

    color: #64748b;

    text-transform: uppercase;

    margin-bottom: 4px;
}


.fuel-route-head > small {
    display: block;

    color: #172033;

    font-size: 12px;
    line-height: 1.35;

    white-space: normal;
}


.vehicle-fuel-cell {
    min-width: 135px;

    text-align: center;
}


.vehicle-fuel-cell strong {
    display: block;

    color: #172033;

    font-size: 14px;
    font-weight: 750;
}


.vehicle-fuel-cell small {
    display: inline-block;

    margin-top: 4px;

    padding: 2px 7px;

    border-radius: 999px;

    font-size: 10px;
    line-height: 1.45;
}


.fuel-source-vehicle {
    background: #dcfce7;
    color: #15803d;
}


.fuel-source-vehicle_type {
    background: #dbeafe;
    color: #1d4ed8;
}


.fuel-source-route {
    background: #f1f5f9;
    color: #64748b;
}


.vehicle-fuel-cell.no-rate {
    color: #94a3b8;
}




/* ============================================================
   TRUNG THONG REAL TRUCK GPS MARKER
   ============================================================ */

.tt-gps-marker-wrapper {
    background: transparent !important;
    border: 0 !important;
}


.tt-gps-truck-marker {
    position: absolute;

    left: 50%;
    top: 3px;

    transform:
        translateX(-50%);

    width: 94px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}


.tt-gps-truck-image {
    display: block;

    width: 92px;
    height: auto;

    transform-origin:
        50% 50%;

    transition:
        transform .55s ease;

    filter:
        drop-shadow(
            0 4px 5px
            rgba(15,23,42,.26)
        );
}


.tt-gps-truck-marker.running
.tt-gps-truck-image {
    opacity: 1;
}


.tt-gps-truck-marker.stopped
.tt-gps-truck-image {
    opacity: .94;
}


.tt-gps-truck-marker.offline
.tt-gps-truck-image {
    opacity: .58;

    filter:
        grayscale(.65)
        drop-shadow(
            0 3px 4px
            rgba(15,23,42,.18)
        );
}


/* Bien so nam duoi xe */

.tt-gps-marker-plate {
    position: absolute !important;

    left: 50% !important;
    top: 58px !important;

    transform:
        translateX(-50%) !important;

    padding:
        4px 8px !important;

    white-space:
        nowrap !important;

    border-radius:
        6px !important;

    background:
        #172033 !important;

    color:
        #fff !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    box-shadow:
        0 3px 9px
        rgba(15,23,42,.18) !important;
}




/* ============================================================
   GPS REAL TRUNG THONG TRUCK MARKER
   ============================================================ */

.tt-gps-marker-wrapper {
    background: transparent !important;
    border: 0 !important;
}


.tt-gps-truck-marker {
    position: absolute;

    left: 50%;
    top: 0;

    width: 112px;
    height: 58px;

    transform:
        translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}


.tt-gps-truck-image {
    display: block;

    width: 108px;
    height: auto;

    transform-origin:
        center center;

    transition:
        transform .6s ease;

    filter:
        drop-shadow(
            0 5px 5px
            rgba(15,23,42,.30)
        );
}


.tt-gps-truck-marker.stopped
.tt-gps-truck-image {
    opacity: .96;
}


.tt-gps-truck-marker.offline
.tt-gps-truck-image {
    opacity: .55;

    filter:
        grayscale(.75)
        drop-shadow(
            0 4px 4px
            rgba(15,23,42,.22)
        );
}


/* Ghi đè marker emoji cũ */
.tt-gps-marker {
    display: none !important;
}


.tt-gps-marker-plate {
    top: 62px !important;
}




/* ============================================================
   GPS TRUNG THONG REAL TRUCK
   ============================================================ */

.tt-gps-marker-wrapper {
    background: transparent !important;
    border: 0 !important;
}


.tt-gps-truck-marker {
    position: absolute;

    left: 50%;
    top: 0;

    width: 118px;
    height: 60px;

    transform:
        translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;

    pointer-events: none;
}


.tt-gps-truck-image {
    display: block;

    width: 112px;
    height: auto;

    transform-origin:
        50% 50%;

    transition:
        transform .55s ease;

    filter:
        drop-shadow(
            0 5px 6px
            rgba(15,23,42,.28)
        );
}


.tt-gps-truck-marker.stopped
.tt-gps-truck-image {
    opacity: .96;
}


.tt-gps-truck-marker.offline
.tt-gps-truck-image {
    opacity: .55;

    filter:
        grayscale(.7)
        drop-shadow(
            0 4px 5px
            rgba(15,23,42,.20)
        );
}


/* Marker emoji cũ không còn dùng */
.tt-gps-marker {
    display: none !important;
}


/* Biển số nằm dưới ảnh xe */

.tt-gps-marker-plate {
    top: 63px !important;
    z-index: 5 !important;
}




/* ============================================================
   GPS TRUCK MARKER - FORCE SIZE
   Khóa kích thước ảnh, chống CSS chung của modal ghi đè
   ============================================================ */

#vehicle-gps-map
.tt-gps-marker-wrapper {
    width: 120px !important;
    height: 82px !important;

    background: transparent !important;
    border: 0 !important;

    overflow: visible !important;
}


#vehicle-gps-map
.tt-gps-marker-wrapper
.tt-gps-truck-marker {
    position: absolute !important;

    left: 50% !important;
    top: 4px !important;

    width: 104px !important;
    height: 56px !important;

    max-width: 104px !important;
    max-height: 56px !important;

    transform:
        translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
}


#vehicle-gps-map
.tt-gps-marker-wrapper
.tt-gps-truck-marker
img.tt-gps-truck-image {

    position: static !important;

    display: block !important;

    width: 96px !important;
    max-width: 96px !important;

    height: auto !important;
    max-height: 54px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    transform-origin:
        50% 50% !important;

    box-shadow: none !important;
}


/* Biển số luôn nằm ngang, không xoay theo xe */

#vehicle-gps-map
.tt-gps-marker-wrapper
.tt-gps-marker-plate {

    position: absolute !important;

    left: 50% !important;
    top: 61px !important;

    transform:
        translateX(-50%) !important;

    width: auto !important;
    height: auto !important;

    white-space: nowrap !important;

    z-index: 10 !important;
}





/* ============================================================
   MAIN DASHBOARD DOI3 OPERATIONS
   ============================================================ */

.dashboard-doi3-section {
    margin-bottom: 18px;
}

.dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 11px;
}

.dashboard-section-heading h2 {
    margin: 0;

    font-size: 15px;
    font-weight: 760;

    color: #172033;
}

.dashboard-section-heading p {
    margin: 4px 0 0;

    font-size: 10px;
    color: #778196;
}


.dashboard-doi3-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(250px, 1fr);

    gap: 14px;

    align-items: stretch;
}


.dashboard-operation-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    height: 100%;
}


.dashboard-operation-card {
    position: relative;

    min-height: 118px;

    padding: 17px;

    background: #ffffff;

    border:
        1px solid #e7ebf1;

    border-radius: 12px;

    box-shadow:
        0 1px 2px rgba(15,23,42,.025);

    overflow: hidden;
}


.dashboard-operation-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: #94a3b8;
}


.dashboard-operation-card.blue::before {
    background: #2563eb;
}

.dashboard-operation-card.green::before {
    background: #16a34a;
}

.dashboard-operation-card.orange::before {
    background: #d97706;
}


.dashboard-operation-label {
    font-size: 11px;
    font-weight: 700;

    color: #64748b;

    text-transform: uppercase;
    letter-spacing: .02em;
}


.dashboard-operation-value {
    margin-top: 11px;

    font-size: 28px;
    line-height: 1;

    font-weight: 780;

    color: #172033;
}


.dashboard-operation-note {
    margin-top: 9px;

    font-size: 10px;
    color: #778196;
}


.dashboard-warning-panel {
    background: #ffffff;

    border:
        1px solid #e7ebf1;

    border-radius: 12px;

    overflow: hidden;
}


.dashboard-warning-header {
    min-height: 59px;

    padding: 13px 16px;

    display: flex;
    align-items: center;

    border-bottom:
        1px solid #e7ebf1;
}


.dashboard-warning-header strong {
    display: block;

    font-size: 13px;

    color: #172033;
}


.dashboard-warning-header small {
    display: block;

    margin-top: 3px;

    font-size: 9px;

    color: #778196;
}


.dashboard-warning-list {
    padding: 4px 0;
}


.dashboard-warning-row {
    min-height: 40px;

    padding: 8px 15px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border-bottom:
        1px solid #f0f2f5;
}


.dashboard-warning-row:last-child {
    border-bottom: 0;
}


.dashboard-warning-name {
    font-size: 11px;

    color: #475569;
}


.dashboard-warning-value {
    min-width: 28px;

    padding: 3px 7px;

    text-align: center;

    border-radius: 12px;

    font-size: 11px;
}


.dashboard-warning-value.warning {
    background: #fff7ed;
    color: #c2410c;
}


.dashboard-warning-value.ok {
    background: #ecfdf3;
    color: #15803d;
}


.dashboard-doi3-empty {
    grid-column: 1 / -1;

    padding: 24px;

    background: #ffffff;

    border:
        1px solid #e7ebf1;

    border-radius: 12px;

    color: #778196;

    font-size: 11px;
}


@media (max-width: 1250px) {

    .dashboard-doi3-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 1000px) {

    .dashboard-operation-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .dashboard-operation-grid {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   TRUNG THONG - DOI 3 MAIN DASHBOARD V2
   ============================================================ */

/* Tổng thể dashboard */
#view-dashboard {
    max-width: 1600px;
    margin: 0 auto;
}

/* Heading gọn lại */
#view-dashboard .page-heading {
    margin-bottom: 14px;
}

#view-dashboard .page-heading h1 {
    font-size: 22px;
    margin-bottom: 3px;
}

#view-dashboard .page-heading p {
    font-size: 12px;
}


/* ============================================================
   KPI NGHIỆP VỤ ĐỘI 3 - ƯU TIÊN TRÊN CÙNG
   ============================================================ */

.dashboard-doi3-section {
    margin: 0 0 18px 0;
}

.dashboard-section-heading {
    margin-bottom: 10px;
}

.dashboard-section-heading h2 {
    font-size: 16px;
    font-weight: 800;
}

.dashboard-section-heading p {
    font-size: 11px;
}

.dashboard-doi3-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(270px, 1fr);
    gap: 14px;
    align-items: stretch;
}

.dashboard-operation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-operation-card {
    min-height: 126px;
    padding: 17px 18px;
    border-radius: 13px;
}

.dashboard-operation-label {
    font-size: 11px;
    font-weight: 800;
}

.dashboard-operation-value {
    margin-top: 12px;
    font-size: 31px;
    font-weight: 800;
}

.dashboard-operation-note {
    margin-top: 9px;
    font-size: 10px;
}


/* Cảnh báo */

.dashboard-warning-panel {
    min-height: 126px;
    border-radius: 13px;
}

.dashboard-warning-header {
    min-height: 54px;
    padding: 11px 15px;
}

.dashboard-warning-header strong {
    font-size: 13px;
}

.dashboard-warning-row {
    min-height: 37px;
    padding: 7px 14px;
}

.dashboard-warning-name {
    font-size: 10.5px;
}


/* ============================================================
   KPI NGUỒN LỰC - THU GỌN
   ============================================================ */

#kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;

    margin-top: 16px;
    margin-bottom: 18px;
}

#kpi-grid .kpi-card {
    position: relative;

    min-height: 92px;
    padding: 13px 15px;

    border-radius: 12px;

    background: #fff;
    border: 1px solid #e7ebf1;

    box-shadow:
        0 1px 2px rgba(15,23,42,.025);

    text-align: left;
}

#kpi-grid .kpi-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    font-size: 18px;

    border-radius: 10px;
}

#kpi-grid .kpi-title {
    font-size: 10px;
}

#kpi-grid .kpi-number {
    margin-top: 4px;

    font-size: 23px;
    line-height: 1;

    font-weight: 800;
}

#kpi-grid .kpi-sub {
    margin-top: 5px;

    font-size: 9.5px;
}

.dashboard-kpi-arrow {
    position: absolute;

    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;
}


/* ============================================================
   ĐỘI XE
   ============================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;

    align-items: start;
}

#dashboard-fleet-panel {
    width: 100%;
}

.dashboard-fleet-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.fleet-summary-card {
    min-height: 82px;
    padding: 12px 14px;

    border-radius: 11px;
}

.fleet-summary-card strong {
    font-size: 22px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1150px) {

    .dashboard-doi3-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-operation-grid,
    #kpi-grid,
    .dashboard-fleet-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 650px) {

    .dashboard-operation-grid,
    #kpi-grid,
    .dashboard-fleet-summary {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   DOI3 DASHBOARD - ACTIVE TRIPS CLEAN V3
   ============================================================ */

.doi3-active-trip-strip {
    margin-top: 14px;

    display: grid;

    grid-template-columns:
        minmax(280px, 1.6fr)
        minmax(250px, .9fr)
        auto;

    align-items: center;

    gap: 12px;

    padding: 13px 15px;

    background: #ffffff;

    border:
        1px solid #e3e8ef;

    border-radius: 12px;
}


.doi3-active-trip-main {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.doi3-active-trip-title {
    display: flex;

    align-items: center;

    gap: 10px;
}


.doi3-active-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #16a34a;

    box-shadow:
        0 0 0 5px
        rgba(22,163,74,.10);
}


.doi3-active-trip-title strong {
    display: block;

    font-size: 13px;

    color: #172033;
}


.doi3-active-trip-title small {
    display: block;

    margin-top: 3px;

    font-size: 10px;

    color: #7b8799;
}


.doi3-active-trip-number {
    min-width: 42px;

    font-size: 27px;
    line-height: 1;

    font-weight: 800;

    text-align: center;

    color: #172033;
}


.doi3-active-trip-meta {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}


.doi3-active-trip-meta > div {
    min-height: 48px;

    padding: 8px 11px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    background: #f8fafc;

    border:
        1px solid #edf0f4;

    border-radius: 9px;
}


.doi3-active-trip-meta span {
    font-size: 10px;

    color: #64748b;
}


.doi3-active-trip-meta strong {
    font-size: 15px;

    color: #172033;
}


.doi3-active-trip-open {
    min-height: 42px;

    padding: 0 14px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    white-space: nowrap;

    border:
        1px solid #dbe3ec;

    border-radius: 9px;

    background: #ffffff;

    color: #173b6c;

    font-size: 11px;

    font-weight: 750;

    cursor: pointer;
}


.doi3-active-trip-open:hover {
    background: #f5f8fc;

    border-color: #cbd6e3;
}


/* Không cho summary cũ chiếm khoảng trống nếu còn CSS cũ */
.doi3-summary-grid {
    display: none !important;
}


@media (max-width: 1050px) {

    .doi3-active-trip-strip {
        grid-template-columns: 1fr;
    }

    .doi3-active-trip-open {
        width: 100%;
    }
}


@media (max-width: 650px) {

    .doi3-active-trip-meta {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   DOI3 OPERATIONS V4 - COMPACT + CLICKABLE
   ============================================================ */


/* Không kéo 4 card cao bằng bảng cảnh báo */
.dashboard-doi3-layout {
    align-items: start !important;
}


.dashboard-operation-grid {
    height: auto !important;
    align-self: start !important;
}


/* 4 ô gọn hơn */
.dashboard-operation-card {
    appearance: none;

    width: 100%;

    min-height: 142px !important;
    height: 142px !important;

    padding: 15px 16px !important;

    display: flex !important;
    flex-direction: column !important;

    text-align: left !important;

    font-family: inherit !important;

    cursor: pointer !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


.dashboard-operation-card:hover {
    transform: translateY(-2px);

    border-color: #cbd7e6 !important;

    box-shadow:
        0 8px 22px
        rgba(15,23,42,.08) !important;

    background: #fbfdff !important;
}


.dashboard-operation-card:active {
    transform: translateY(0);
}


.dashboard-operation-top {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
}


.dashboard-operation-arrow {
    font-size: 20px;
    line-height: 1;

    color: #94a3b8;
}


.dashboard-operation-value {
    margin-top: 12px !important;

    font-size: 30px !important;
}


.dashboard-operation-note {
    margin-top: 7px !important;

    min-height: 15px;
}


.dashboard-operation-open {
    margin-top: auto;

    padding-top: 8px;

    font-size: 9.5px;

    font-weight: 700;

    color: #64748b;
}


.dashboard-operation-card:hover
.dashboard-operation-open {
    color: #173b6c;
}


/* Cảnh báo gọn, bấm được */

.dashboard-warning-row.clickable {
    cursor: pointer;

    transition:
        background .15s ease;
}


.dashboard-warning-row.clickable:hover {
    background: #f8fafc;
}


.dashboard-warning-right {
    display: flex;

    align-items: center;

    gap: 5px;
}


.dashboard-warning-arrow {
    font-size: 17px;

    color: #94a3b8;
}


/* Đưa 2 khối cân hơn */
.dashboard-doi3-layout {
    grid-template-columns:
        minmax(0, 3.2fr)
        minmax(270px, 1fr) !important;
}


/* Thu chiều cao GPS một chút */
#view-dashboard
.gps-dashboard-panel,
#view-dashboard
.gps-overview-panel {
    margin-bottom: 10px;
}


@media (max-width: 1150px) {

    .dashboard-operation-card {
        height: 128px !important;
        min-height: 128px !important;
    }

}


/* V6.4 Batch tracking */
.doi3-tracking-dropdown{position:relative}
.doi3-tracking-dropdown-menu{
    position:absolute;
    z-index:5000;
    right:0;
    top:calc(100% + 8px);
    width:285px;
    background:#fff;
    border:1px solid #dbe4ec;
    border-radius:12px;
    box-shadow:0 18px 45px rgba(16,35,55,.18);
    padding:7px;
}
.doi3-tracking-dropdown-menu button{
    width:100%;
    display:block;
    text-align:left;
    background:#fff;
    border:0;
    border-radius:8px;
    padding:11px 12px;
    cursor:pointer;
    color:#102d48;
    font-family:inherit;
}
.doi3-tracking-dropdown-menu button:hover{background:#f1f6f9}
.doi3-tracking-dropdown-menu b,
.doi3-tracking-dropdown-menu small{display:block}
.doi3-tracking-dropdown-menu small{color:#738197;margin-top:3px}
.doi3-batch-modal{width:min(940px,100%)}
.doi3-batch-settings{
    display:grid;
    grid-template-columns:1.3fr 1fr .7fr;
    gap:12px;
}
.doi3-batch-settings label>span{display:block;font-weight:700;margin-bottom:6px}
.doi3-batch-settings input,
.doi3-batch-settings select,
.doi3-batch-search{
    width:100%;
    padding:10px 11px;
    border:1px solid #ccd9e4;
    border-radius:8px;
    background:#fff;
    font:inherit;
}
.doi3-batch-check{
    display:flex!important;
    align-items:center;
    gap:8px;
    padding-top:24px;
}
.doi3-batch-check input{width:auto!important}
.doi3-batch-check span{margin:0!important}
.doi3-batch-select-actions{display:flex;gap:8px;flex-wrap:wrap}
.doi3-batch-search{margin:10px 0}
#doi3-batch-trip-list{
    max-height:390px;
    overflow:auto;
    border:1px solid #e0e7ed;
    border-radius:10px;
}
.doi3-batch-trip-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:center;
    padding:11px 12px;
    border-bottom:1px solid #edf1f4;
    cursor:pointer;
}
.doi3-batch-trip-row:last-child{border-bottom:0}
.doi3-batch-trip-row:hover{background:#f8fbfc}
.doi3-batch-trip-main b,
.doi3-batch-trip-main small{display:block}
.doi3-batch-trip-main small{color:#718094;margin-top:3px}
.doi3-batch-trip-side{font-size:12px;color:#51667a;text-align:right}
#doi3-batch-result{margin-top:16px}
.doi3-batch-result-card{
    border:1px solid #c8e1d3;
    background:#f5fbf7;
    border-radius:12px;
    padding:14px;
}
.doi3-batch-result-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}
.doi3-batch-result-head b,
.doi3-batch-result-head small{display:block}
.doi3-batch-result-head small{margin-top:3px;color:#64758a}
.doi3-batch-total-link{
    margin-top:12px;
    padding:12px;
    background:#fff;
    border:1px solid #d8e5de;
    border-radius:10px;
}
.doi3-batch-total-link>span{font-size:12px;color:#637488;font-weight:700}
.doi3-batch-total-link input,
.doi3-batch-link-row input{
    width:100%;
    padding:9px 10px;
    border:1px solid #ccd9e4;
    border-radius:7px;
    background:#fff;
    font:inherit;
}
.doi3-batch-total-link input{margin:7px 0}
.doi3-batch-total-link>div{display:flex;gap:8px;flex-wrap:wrap}
.doi3-batch-links-table{
    margin-top:12px;
    background:#fff;
    border:1px solid #dce6df;
    border-radius:10px;
    overflow:hidden;
}
.doi3-batch-link-row{
    display:grid;
    grid-template-columns:minmax(150px,.8fr) minmax(260px,1.6fr) auto;
    gap:9px;
    align-items:center;
    padding:9px 10px;
    border-bottom:1px solid #edf1ee;
}
.doi3-batch-link-row:last-child{border-bottom:0}
.doi3-batch-link-row b,
.doi3-batch-link-row small{display:block}
.doi3-batch-link-row small{color:#738197;margin-top:2px}

@media(max-width:760px){
    .doi3-batch-settings{grid-template-columns:1fr}
    .doi3-batch-check{padding-top:0}
    .doi3-batch-link-row{grid-template-columns:1fr}
    .doi3-batch-trip-side{display:none}
}
/* V6.5 */
#doi3-tracking-workspace-v65{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:200px;
    z-index:50;
    padding:78px 28px 40px 28px;
    background:#f3f6f8;
    overflow:auto;
}
.v65-page{max-width:1450px;margin:0 auto;font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}
.v65-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px}
.v65-head small{color:#d79b18;font-weight:800;letter-spacing:.14em}.v65-head h1{margin:4px 0 3px;color:#14324f;font-size:30px}.v65-head p{margin:0;color:#6d7e90}
.v65-create{position:relative}.v65-create-menu{position:absolute;right:0;top:calc(100% + 8px);width:290px;z-index:50;background:#fff;border:1px solid #dbe4ec;border-radius:12px;padding:7px;box-shadow:0 16px 40px #17324d2a}
.v65-create-menu button{width:100%;border:0;background:#fff;text-align:left;padding:11px;border-radius:8px;cursor:pointer;font:inherit;color:#17324d}.v65-create-menu button:hover{background:#f1f6f9}.v65-create-menu b,.v65-create-menu span{display:block}.v65-create-menu span{color:#718194;font-size:12px;margin-top:3px}
.v65-filter{display:grid;grid-template-columns:1.4fr .9fr .9fr .9fr .8fr 1fr .8fr auto auto;gap:9px;align-items:end;background:#fff;border:1px solid #dce5ec;border-radius:14px;padding:14px}
.v65-filter label span{display:block;font-size:11px;font-weight:750;color:#617386;margin-bottom:5px}.v65-filter input,.v65-filter select{width:100%;min-height:38px;border:1px solid #ccd8e3;border-radius:8px;padding:8px;background:#fff;font:inherit}
.v65-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.v65-summary article{background:#fff;border:1px solid #dce5ec;border-radius:12px;padding:15px}.v65-summary span,.v65-summary b{display:block}.v65-summary span{font-size:12px;color:#6c7e90}.v65-summary b{font-size:27px;color:#153451;margin-top:5px}
.v65-table-card{background:#fff;border:1px solid #dce5ec;border-radius:14px;overflow:hidden}.v65-table-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border-bottom:1px solid #e5ebef}.v65-table-head h2{margin:0;color:#142e48}.v65-table-head small{color:#738197}
.v65-table-wrap{overflow:auto}.v65-table-wrap table{width:100%;border-collapse:collapse;min-width:1050px}.v65-table-wrap th{text-align:left;font-size:11px;color:#6d7d8e;background:#f6f8fa;padding:10px 12px}.v65-table-wrap td{padding:11px 12px;border-top:1px solid #edf1f4;color:#263f56;font-size:13px}.v65-table-wrap td b,.v65-table-wrap td small{display:block}.v65-table-wrap td small{color:#7c8b9c}
.v65-pill{display:inline-flex;padding:6px 9px;border-radius:999px;background:#edf2f5;font-size:11px;font-weight:800;white-space:nowrap}.v65-pill.active,.v65-pill.on{background:#e7f7ef;color:#08764a}.v65-pill.expired{background:#fff4dc;color:#9b6600}.v65-pill.revoked{background:#fce9e9;color:#a53030}
@media(max-width:1000px){#doi3-tracking-workspace-v65{padding:82px 3vw 30px}.v65-filter{grid-template-columns:1fr 1fr}.v65-summary{grid-template-columns:1fr 1fr}}
.v652-quick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.v652-quick button{border:1px solid #cfdbe5;background:#fff;color:#17324d;border-radius:999px;padding:8px 12px;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.v652-quick button.active,.v652-quick button:hover{background:#0e806f;border-color:#0e806f;color:#fff}
.v652-quick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.v652-quick button{border:1px solid #cfdbe5;background:#fff;color:#17324d;border-radius:999px;padding:8px 12px;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.v652-quick button.active,.v652-quick button:hover{background:#0e806f;border-color:#0e806f;color:#fff}