/* =========================================================
   RETAIL TRANSPORT
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #080d12;
    color: #ffffff;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.app {
    display: flex;
    width: 100%;
    min-height: 100vh;
}


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

.sidebar {
    position: sticky;
    top: 0;

    width: 250px;
    min-width: 250px;
    height: 100vh;

    flex-shrink: 0;
    overflow: hidden;

    background-image: url("images/sidebar-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;

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

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


/* MENU */

.sidebar-menu {
    position: absolute;

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

    z-index: 10;
}

.menu-item {
    width: 100%;
    height: 43px;

    display: flex;
    align-items: center;

    gap: 11px;

    margin: 0 0 4px;
    padding: 0 13px;

    border: 1px solid transparent;
    border-radius: 8px;

    outline: none;

    color: rgba(255,255,255,0.88);

    background: rgba(25,17,5,0.10);

    backdrop-filter: blur(1px);

    font-size: 13px;
    font-weight: 400;
    text-align: left;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.menu-item:hover {
    color: #ffffff;

    background:
        rgba(118,82,20,0.30);

    border-color:
        rgba(255,255,255,0.06);
}

.menu-item.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(164,114,26,0.70),
            rgba(118,81,18,0.52)
        );

    border-color:
        rgba(255,255,255,0.08);

    box-shadow:
        0 5px 18px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.menu-icon {
    width: 18px;
    min-width: 18px;

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

    font-size: 14px;

    color:
        rgba(255,255,255,0.90);
}

.menu-divider {
    height: 1px;

    margin:
        12px 10px 13px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
        );
}


/* SIDEBAR FOOTER */

.sidebar-footer {
    position: absolute;

    left: 24px;
    right: 15px;
    bottom: 20px;

    z-index: 10;

    display: flex;
    flex-direction: column;

    text-shadow:
        0 2px 5px rgba(0,0,0,0.75);
}

.sidebar-footer strong {
    color:
        rgba(255,255,255,0.95);

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

.sidebar-footer span {
    margin-top: 5px;

    color:
        rgba(255,255,255,0.62);

    font-size: 8px;
}

.sidebar-footer small {
    margin-top: 13px;

    color:
        rgba(255,255,255,0.65);

    font-size: 8px;
}


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

.main {
    flex: 1;

    min-width: 0;
    min-height: 100vh;

    padding:
        0 26px 30px;

    background:
        radial-gradient(
            circle at 55% -10%,
            #18212c 0%,
            #0d141c 38%,
            #080d12 72%
        );
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    height: 88px;

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

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

.page-title h1 {
    margin: 0;

    color: #ffffff;

    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;

    letter-spacing: -0.5px;
}

.page-title p {
    margin: 6px 0 0;

    color:
        rgba(255,255,255,0.48);

    font-size: 12px;
}

.topbar-right {
    height: 100%;

    display: flex;
    align-items: center;
}


/* DATE */

.top-date {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-right: 18px;
}

.date-icon {
    color: #f7b643;
    font-size: 17px;
}

.date-info {
    min-width: 86px;
}

.date-info strong,
.date-info span {
    display: block;
}

.date-info strong {
    color: #ffffff;

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

.date-info span {
    margin-top: 4px;

    color:
        rgba(255,255,255,0.48);

    font-size: 9px;
}


/* CLOCK */

.live-clock {
    min-width: 90px;

    margin-left: 8px;
    padding-left: 18px;

    border-left:
        1px solid rgba(255,255,255,0.09);
}

.live-clock strong {
    display: block;

    color: #ffffff;

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

    font-variant-numeric: tabular-nums;
}

.live-clock span {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 4px;

    color:
        rgba(255,255,255,0.45);

    font-size: 9px;
}

.online-dot {
    display: inline-block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #f7b744;

    box-shadow:
        0 0 7px rgba(247,183,68,0.65);
}


/* NOTIFICATION */

.notification {
    width: 50px;

    text-align: center;

    color: #f7b643;

    font-size: 15px;
}


/* PROFILE */

.profile {
    display: flex;
    align-items: center;

    gap: 10px;
}

.avatar {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #7c581b,
            #3c2b0d
        );

    color: #ffffff;

    font-size: 12px;
}

.profile-text {
    min-width: 120px;
}

.profile-text strong,
.profile-text span {
    display: block;
}

.profile-text strong {
    color: #ffffff;

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

.profile-text span {
    margin-top: 4px;

    color:
        rgba(255,255,255,0.42);

    font-size: 9px;
}

.profile-arrow {
    padding-left: 5px;

    color:
        rgba(255,255,255,0.55);

    font-size: 16px;
}


/* =========================================================
   PAGE SYSTEM
   ========================================================= */

.app-page {
    display: none;
}

.app-page.active {
    display: block;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    height: 225px;

    margin-top: 18px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius: 16px;

    background-image:
        url("images/hero-truck.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.30);
}

.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5,8,12,0.96) 0%,
            rgba(5,8,12,0.83) 24%,
            rgba(5,8,12,0.25) 53%,
            rgba(5,8,12,0.18) 72%,
            rgba(5,8,12,0.70) 100%
        );
}

.hero-content {
    position: absolute;

    left: 27px;
    top: 27px;

    z-index: 2;
}

.hero-kicker {
    margin-bottom: 12px;

    color: #f8c260;

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

    letter-spacing: 2.6px;
}

.hero h2 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;
    line-height: 1.05;
    font-weight: 800;

    letter-spacing: -0.7px;
}

.hero h2 span {
    display: block;

    margin-top: 5px;

    color:
        rgba(255,255,255,0.82);

    font-weight: 300;
}

.hero h2 strong {
    color: #f8bb4e;
    font-weight: 800;
}

.hero-content p {
    margin: 11px 0 0;

    color:
        rgba(255,255,255,0.55);

    font-size: 12px;
}

.hero-tags {
    position: absolute;

    right: 25px;
    top: 27px;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 9px;
}

.hero-tags span {
    position: relative;

    color:
        rgba(255,255,255,0.52);

    font-size: 9px;

    letter-spacing: 2px;
}

.hero-tags .active {
    color:
        rgba(255,255,255,0.82);
}

.hero-tags .active::after {
    content: "";

    position: absolute;

    right: -1px;
    bottom: -9px;

    width: 24px;
    height: 3px;

    border-radius: 4px;

    background: #f7b744;
}


/* =========================================================
   CONTENT HEADING
   ========================================================= */

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

    padding:
        26px 2px 20px;
}

.content-kicker {
    margin-bottom: 8px;

    color: #f8bd53;

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

    letter-spacing: 2.2px;
}

.content-heading h2 {
    margin: 0;

    color: #ffffff;

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

    letter-spacing: -0.5px;
}

.content-heading p {
    margin:
        7px 0 0;

    color:
        rgba(255,255,255,0.44);

    font-size: 12px;
}


/* =========================================================
   DIRECTORY TABS
   ========================================================= */

.directory-tabs {
    display: flex;

    gap: 8px;

    margin-bottom: 14px;

    padding: 5px;

    width: fit-content;

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 12px;

    background:
        rgba(255,255,255,0.025);
}

.directory-tab {
    min-width: 180px;
    height: 46px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        0 14px;

    border:
        1px solid transparent;

    border-radius: 9px;

    color:
        rgba(255,255,255,0.58);

    background: transparent;

    transition:
        0.18s ease;
}

.directory-tab:hover {
    color: #ffffff;

    background:
        rgba(255,255,255,0.035);
}

.directory-tab.active {
    color: #ffffff;

    border-color:
        rgba(248,189,83,0.25);

    background:
        linear-gradient(
            135deg,
            rgba(141,98,25,0.50),
            rgba(79,55,15,0.40)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,0.16);
}

.directory-tab-icon {
    color: #f8bd53;

    font-size: 16px;
}

.directory-tab strong {
    min-width: 28px;

    padding:
        4px 7px;

    border-radius: 20px;

    color:
        rgba(255,255,255,0.85);

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

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

    text-align: center;
}


/* =========================================================
   DIRECTORY TOOLBAR
   ========================================================= */

.directory-toolbar {
    min-height: 68px;

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

    gap: 18px;

    margin-bottom: 12px;

    padding:
        10px 12px;

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 12px;

    background:
        rgba(13,20,28,0.78);

    box-shadow:
        0 10px 35px rgba(0,0,0,0.14);
}

.directory-search {
    width: min(520px, 100%);

    height: 42px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        0 13px;

    border:
        1px solid rgba(255,255,255,0.09);

    border-radius: 9px;

    background:
        rgba(255,255,255,0.025);
}

.directory-search span {
    color:
        rgba(255,255,255,0.35);

    font-size: 17px;
}

.directory-search input {
    flex: 1;

    min-width: 0;

    border: 0;
    outline: 0;

    color: #ffffff;

    background: transparent;

    font-size: 12px;
}

.directory-search input::placeholder {
    color:
        rgba(255,255,255,0.28);
}

.directory-toolbar-right {
    display: flex;
    align-items: center;

    gap: 14px;
}

.directory-total {
    min-width: 72px;

    padding-right: 14px;

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

    text-align: right;
}

.directory-total span,
.directory-total strong {
    display: block;
}

.directory-total span {
    color:
        rgba(255,255,255,0.38);

    font-size: 9px;
}

.directory-total strong {
    margin-top: 3px;

    color: #ffffff;

    font-size: 15px;
}


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

.primary-button,
.secondary-button {
    min-height: 42px;

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

    gap: 7px;

    padding:
        0 17px;

    border-radius: 9px;

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

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.primary-button {
    border:
        1px solid rgba(248,192,90,0.55);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a3711c,
            #724f14
        );

    box-shadow:
        0 7px 22px rgba(133,91,20,0.24);
}

.primary-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 9px 27px rgba(157,108,24,0.34);
}

.secondary-button {
    border:
        1px solid rgba(255,255,255,0.12);

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

    background:
        rgba(255,255,255,0.035);
}

.secondary-button:hover {
    color: #ffffff;

    background:
        rgba(255,255,255,0.06);
}


/* =========================================================
   DIRECTORY TABLE
   ========================================================= */

.directory-panel {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.075);

    border-radius: 13px;

    background:
        rgba(10,16,23,0.78);

    box-shadow:
        0 15px 45px rgba(0,0,0,0.18);
}

.directory-table-wrap {
    width: 100%;

    overflow: auto;
}

.directory-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: auto;
}

.directory-table thead {
    background:
        rgba(255,255,255,0.035);
}

.directory-table th {
    height: 44px;

    padding:
        0 14px;

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

    color:
        rgba(255,255,255,0.40);

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

    letter-spacing: 0.6px;

    text-align: left;
    text-transform: uppercase;

    white-space: nowrap;
}

.directory-table td {
    min-height: 52px;

    padding:
        13px 14px;

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

    color:
        rgba(255,255,255,0.76);

    font-size: 11px;

    vertical-align: middle;
}

.directory-table tbody tr {
    transition:
        background 0.15s ease;
}

.directory-table tbody tr:hover {
    background:
        rgba(255,255,255,0.025);
}

.directory-table tbody tr:last-child td {
    border-bottom: 0;
}

.directory-id {
    color: #f8c260 !important;

    font-weight: 700;

    white-space: nowrap;
}

.directory-name {
    color: #ffffff !important;

    font-weight: 600;
}

.directory-city {
    white-space: nowrap;
}

.directory-postal {
    color:
        rgba(255,255,255,0.55) !important;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}

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

    gap: 6px;

    padding:
        5px 8px;

    border-radius: 20px;

    color: #70dda2;

    background:
        rgba(44,188,111,0.09);

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

    white-space: nowrap;
}

.status-badge::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #4bd48a;

    box-shadow:
        0 0 8px rgba(75,212,138,0.45);
}

.status-badge.inactive {
    color:
        rgba(255,255,255,0.42);

    background:
        rgba(255,255,255,0.05);
}

.status-badge.inactive::before {
    background:
        rgba(255,255,255,0.35);

    box-shadow: none;
}

.directory-empty {
    min-height: 220px;

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

    gap: 6px;

    color:
        rgba(255,255,255,0.40);
}

.directory-empty[hidden] {
    display: none;
}

.directory-empty strong {
    color:
        rgba(255,255,255,0.72);

    font-size: 14px;
}

.directory-empty span {
    font-size: 11px;
}


/* =========================================================
   PLACEHOLDER PAGES
   ========================================================= */

.placeholder-page {
    min-height: 420px;

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

    color:
        rgba(255,255,255,0.35);
}

.placeholder-page > span {
    margin-bottom: 12px;

    color: #f8bd53;

    font-size: 28px;
}

.placeholder-page h2 {
    margin: 0;

    color:
        rgba(255,255,255,0.80);

    font-size: 22px;
}

.placeholder-page p {
    margin:
        8px 0 0;

    font-size: 11px;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 1000;

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

    padding: 20px;

    background:
        rgba(2,5,8,0.78);

    backdrop-filter:
        blur(7px);
}

.modal-backdrop[hidden] {
    display: none;
}

.directory-modal {
    width: min(570px, 100%);

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.10);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #121b25,
            #0b1118
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,0.55);
}

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

    padding:
        22px 24px 18px;

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

.modal-kicker {
    color: #f8bd53;

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

    letter-spacing: 2px;
}

.modal-header h3 {
    margin:
        6px 0 0;

    color: #ffffff;

    font-size: 20px;
}

.modal-close {
    width: 34px;
    height: 34px;

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

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

    border-radius: 8px;

    color:
        rgba(255,255,255,0.55);

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

    font-size: 20px;
}

.modal-close:hover {
    color: #ffffff;

    background:
        rgba(255,255,255,0.06);
}

#directory-form {
    padding:
        20px 24px 24px;
}

.form-row {
    display: flex;

    gap: 12px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group-grow {
    flex: 1;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(255,255,255,0.54);

    font-size: 10px;
}

.form-group input,
.form-group select {
    width: 100%;
    height: 42px;

    padding:
        0 12px;

    border:
        1px solid rgba(255,255,255,0.09);

    border-radius: 8px;

    outline: none;

    color: #ffffff;

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

    font-size: 12px;
}

.form-group input:focus,
.form-group select:focus {
    border-color:
        rgba(248,189,83,0.48);

    box-shadow:
        0 0 0 3px rgba(248,189,83,0.06);
}

.form-group select option {
    color: #ffffff;

    background: #111922;
}

.form-group input::placeholder {
    color:
        rgba(255,255,255,0.25);
}

.form-group small {
    display: block;

    margin-top: 6px;

    color:
        rgba(255,255,255,0.30);

    font-size: 9px;
}

.postal-input {
    position: relative;
}

.postal-input input {
    padding-right: 65px;
}

.postal-input span {
    position: absolute;

    right: 10px;
    top: 50%;

    transform:
        translateY(-50%);

    padding:
        4px 7px;

    border-radius: 5px;

    color: #f9cb77;

    background:
        rgba(248,189,83,0.09);

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

    letter-spacing: 0.7px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;

    gap: 9px;

    margin-top: 6px;
}


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

@media (max-width: 1100px) {

    .sidebar {
        width: 220px;
        min-width: 220px;
    }

    .sidebar-menu {
        top: 165px;

        left: 10px;
        right: 10px;
    }

    .menu-item {
        height: 40px;

        font-size: 12px;
    }

    .main {
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-title h1 {
        font-size: 23px;
    }

    .hero h2 {
        font-size: 25px;
    }

    .directory-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .directory-search {
        width: 100%;
    }

    .directory-toolbar-right {
        justify-content: flex-end;
    }

}


@media (max-width: 800px) {

    .sidebar {
        width: 190px;
        min-width: 190px;
    }

    .topbar-right {
        display: none;
    }

    .directory-tabs {
        width: 100%;
    }

    .directory-tab {
        flex: 1;

        min-width: 0;
    }

    .form-row {
        flex-direction: column;

        gap: 0;
    }

}
/* =========================================================
   DIRECTORY STATUS
   ========================================================= */

.status-button {
    border:
        1px solid rgba(75,212,138,0.16);

    cursor: pointer;

    font-family: inherit;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.status-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(75,212,138,0.38);

    background:
        rgba(44,188,111,0.15);
}

.status-button.inactive {
    color:
        rgba(255,255,255,0.42);

    border-color:
        rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.05);
}

.status-button.inactive::before {
    background:
        rgba(255,255,255,0.35);

    box-shadow: none;
}

.status-button.inactive:hover {
    color:
        rgba(255,255,255,0.75);

    border-color:
        rgba(255,255,255,0.18);

    background:
        rgba(255,255,255,0.08);
}

/* =========================================================
   EXCEL IMPORT / ORDERS — LOGIC VERSION
   ========================================================= */
.import-panel,.orders-panel{border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(10,16,23,.78);box-shadow:0 15px 45px rgba(0,0,0,.18)}
.import-panel{padding:16px}.import-dropzone{min-height:116px;display:flex;align-items:center;gap:16px;padding:20px;border:1px dashed rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.02);transition:.18s}.import-dropzone.dragging{border-color:#f8bd53;background:rgba(163,113,28,.08)}
.import-file-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:12px;color:#f8c260;background:rgba(248,189,83,.09);font-size:11px;font-weight:800;letter-spacing:.6px}.import-dropzone-text{flex:1}.import-dropzone-text strong,.import-dropzone-text span{display:block}.import-dropzone-text strong{font-size:13px}.import-dropzone-text span{margin-top:6px;color:rgba(255,255,255,.42);font-size:10px}
.import-status{margin-top:12px;padding:11px 13px;border-radius:9px;display:flex;gap:10px;align-items:center;font-size:10px}.import-status[hidden]{display:none}.import-status strong{font-size:11px}.import-status.loading{color:#b9d5ff;background:rgba(56,128,255,.08)}.import-status.success{color:#70dda2;background:rgba(44,188,111,.08)}.import-status.error{color:#facd7e;background:rgba(248,189,83,.09)}
.import-preview{margin-top:14px;border:1px solid rgba(255,255,255,.07);border-radius:11px;overflow:hidden}.import-preview[hidden]{display:none}.import-preview-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}.import-preview-head span,.import-preview-head strong{display:block}.import-preview-head span{color:rgba(255,255,255,.4);font-size:9px}.import-preview-head strong{margin-top:4px;font-size:12px}.import-stats,.orders-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.06)}.import-stats>div,.orders-summary>div{padding:13px 15px;background:#0b1219}.import-stats span,.import-stats strong,.orders-summary span,.orders-summary strong{display:block}.import-stats span,.orders-summary span{color:rgba(255,255,255,.38);font-size:9px}.import-stats strong,.orders-summary strong{margin-top:5px;font-size:15px}.import-warnings{padding:12px 15px;color:#fce5bc;background:rgba(248,189,83,.06);font-size:10px}.import-warnings[hidden]{display:none}.import-warnings strong,.import-warnings span{display:block}.import-warnings span{margin-top:4px;color:rgba(255,255,255,.52)}
.orders-toolbar{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(13,20,28,.78)}.orders-search{width:min(620px,100%)}.orders-summary{grid-template-columns:repeat(4,1fr);margin-bottom:12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;overflow:hidden}.orders-table-wrap,.order-items-wrap{width:100%;overflow:auto}.orders-table,.order-items-table{width:100%;border-collapse:collapse}.orders-table th,.order-items-table th{height:44px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);background:rgba(255,255,255,.035);font-size:8px;font-weight:600;text-align:left;text-transform:uppercase;white-space:nowrap}.orders-table td,.order-items-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.055);color:rgba(255,255,255,.76);font-size:10px;vertical-align:middle}.orders-table tr:hover,.order-items-table tr:hover{background:rgba(255,255,255,.025)}.order-open-button{padding:7px 10px;border:1px solid rgba(248,189,83,.22);border-radius:7px;color:#f9cb78;background:rgba(163,113,28,.12);font-size:9px}
.order-modal-backdrop,.duplicate-modal-backdrop{position:fixed;inset:0;z-index:10000;display:flex;background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}.order-modal-backdrop[hidden],.duplicate-modal-backdrop[hidden]{display:none}.order-modal-backdrop{justify-content:flex-end}.order-details-modal{width:min(1120px,94vw);height:100vh;overflow:auto;background:#0b1219;border-left:1px solid rgba(255,255,255,.08);box-shadow:-20px 0 60px rgba(0,0,0,.4)}.order-details-header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.07)}.order-details-header h3{margin:5px 0 0;font-size:22px}.order-details-header p{margin:6px 0 0;color:rgba(255,255,255,.42);font-size:10px}.order-details-info{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 24px}.order-details-info>div{padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.02)}.order-details-info span,.order-details-info strong{display:block}.order-details-info span{color:rgba(255,255,255,.38);font-size:8px}.order-details-info strong{margin-top:5px;font-size:10px}.order-items-wrap{margin:0 24px 24px;width:calc(100% - 48px);border:1px solid rgba(255,255,255,.07);border-radius:10px}.order-items-table{}.order-items-table td strong,.order-items-table td small{display:block}.order-items-table td small{margin-top:4px;color:rgba(255,255,255,.38)}
.duplicate-modal-backdrop{align-items:center;justify-content:center}.duplicate-modal{width:min(500px,calc(100vw - 30px));padding:22px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:#0d151e;box-shadow:0 30px 80px rgba(0,0,0,.45)}.duplicate-modal h3{margin:7px 0;font-size:20px}.duplicate-modal p{margin:0 0 18px;color:rgba(255,255,255,.52);font-size:11px;line-height:1.5}.duplicate-actions{display:flex;gap:8px}.duplicate-actions>*{flex:1}.duplicate-all-actions{display:flex;justify-content:space-between;gap:10px;margin-top:12px}.duplicate-all-actions button{border:0;color:rgba(255,255,255,.46);background:transparent;font-size:9px}.duplicate-all-actions button:hover{color:#fff}
@media(max-width:900px){.import-dropzone{flex-wrap:wrap}.import-stats{grid-template-columns:repeat(2,1fr)}.orders-summary{grid-template-columns:repeat(2,1fr)}.order-details-info{grid-template-columns:repeat(2,1fr)}}


/* EXPORT: компактна таблиця, щоб усі поля поміщалися */
.export-documents-section { margin-top: 18px; }
.export-documents-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.export-documents-head > div:first-child { min-width:190px; }
.export-documents-head h3 { margin:3px 0 0; font-size:18px; color:#fff; }
.export-search { flex:1; width:auto; max-width:460px; margin-left:auto; }
.export-orders-panel, .export-orders-panel .orders-table-wrap { width:100%; }
.compact-orders-table { width:100%; min-width:0 !important; table-layout:fixed; font-size:10px; }
.compact-orders-table th { padding:8px 5px; font-size:8px; white-space:nowrap; }
.compact-orders-table td { padding:8px 5px; font-size:9px; line-height:1.18; overflow: visible; text-overflow: clip; }
.compact-orders-table th:nth-child(1) { width:5%; }
.compact-orders-table th:nth-child(2) { width:6%; }
.compact-orders-table th:nth-child(3) { width:5%; }
.compact-orders-table th:nth-child(4) { width:18%; }
.compact-orders-table th:nth-child(5) { width:20%; }
.compact-orders-table th:nth-child(6) { width:14%; }
.compact-orders-table th:nth-child(7) { width:4%; }
.compact-orders-table th:nth-child(8) { width:6%; }
.compact-orders-table th:nth-child(9) { width:7%; }
.compact-orders-table th:nth-child(10) { width:8%; }
.compact-orders-table th:nth-child(11) { width:7%; }
.compact-open-button { padding:6px 8px !important; font-size:9px !important; }

/* Лист відбору — повноекранний */
#order-details-modal.modal-backdrop {
    padding:0 !important;
    align-items:stretch !important;
}
#order-details-modal .order-details-modal,
#order-details-modal .directory-modal {
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    max-height:none !important;
    margin:0 !important;
    border-radius:0 !important;
    display:flex;
    flex-direction:column;
}
#order-details-modal .order-details-content,
#order-details-modal .modal-body {
    flex:1;
    overflow:auto;
}
#order-details-modal .order-items-table-wrap {
    overflow:auto;
}
#order-details-modal .order-items-table {
    width:100%;
    table-layout:auto;
}


/* PAGE VISIBILITY — захист від відображення блоків між вкладками */
.app-page { display: none; }
.app-page.active { display: block; }


/* =========================================================
   V4 — ЛИСТ ВІДБОРУ: СПРАВДІ НА ВЕСЬ ЕКРАН
   ========================================================= */
#order-details-modal.order-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

#order-details-modal .order-details-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#order-details-modal .order-details-header {
    flex: 0 0 auto;
}

#order-details-modal .order-details-info {
    flex: 0 0 auto;
}

#order-details-modal .order-items-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
}

#order-details-modal .order-items-table {
    width: 100% !important;
    
}

/* Місткість — окрема компактна колонка */
#order-details-modal .order-items-table th:nth-child(4),
#order-details-modal .order-items-table td:nth-child(4) {
    width: 90px;
    white-space: nowrap;
}


/* =========================================================
   V5 — FILTERS / MULTISELECT / CONSOLIDATED TT
   ========================================================= */
.column-filter {
    display:block;
    width:100%;
    min-width:0;
    margin-top:5px;
    padding:5px 6px;
    border:1px solid #28323c;
    border-radius:5px;
    background:#0b1218;
    color:#dce3e9;
    font-size:8px;
    outline:none;
}
.column-filter:focus { border-color:#9b6c1b; }

.export-selection-bar {
    display:flex;
    align-items:center;
    gap:16px;
    padding:10px 12px;
    margin:10px 0;
    border:1px solid #222c35;
    border-radius:9px;
    background:#10171e;
}
.select-all-label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.export-selection-bar #export-selected-count { margin-left:auto; }
.selected-row { background:rgba(155,108,27,.12) !important; }

.compact-orders-table th:first-child { width:32px !important; }
.compact-orders-table th:nth-child(2) { width:5% !important; }

.order-status-filters {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}
.status-filter {
    border:1px solid #28323c;
    background:#111820;
    color:#9ca7b2;
    border-radius:8px;
    padding:9px 13px;
    cursor:pointer;
}
.status-filter.active { color:#fff; border-color:#9b6c1b; background:#251e14; }

.tt-list { display:grid; gap:12px; }
.tt-card {
    border:1px solid #25303a;
    border-radius:12px;
    background:#0d141a;
    padding:15px;
}
.tt-card.completed {
    border-color:#1f8d62;
    background:rgba(20,112,75,.11);
    box-shadow:inset 4px 0 0 #28b77e;
}
.tt-card-head, .tt-card-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.tt-card-head > div { display:flex; align-items:center; gap:12px; }
.tt-number { color:#f7b43f; font-weight:800; }
.tt-status {
    border-radius:999px;
    padding:6px 10px;
    font-size:10px;
    font-weight:700;
}
.tt-status.new { background:#202832; color:#b7c1ca; }
.tt-status.picking { background:#392a12; color:#ffca65; }
.tt-status.completed { background:#123526; color:#62e4ad; }

.tt-documents {
    margin-top:12px;
    padding:10px 12px;
    border-radius:8px;
    background:#111a21;
}
.tt-documents span { display:block; color:#73808c; font-size:9px; margin-bottom:4px; }
.tt-documents strong { font-size:11px; line-height:1.5; }

.tt-metrics {
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:8px;
    margin:12px 0;
}
.tt-metrics > div {
    border:1px solid #202a33;
    border-radius:8px;
    padding:10px;
}
.tt-metrics span, .tt-metrics small {
    display:block;
    color:#75818c;
    font-size:9px;
}
.tt-metrics strong { display:block; margin-top:5px; font-size:12px; }
.fact-pallet-input, .tt-status-select {
    width:100%;
    margin-top:5px;
    border:1px solid #2b3640;
    background:#0a1117;
    color:#fff;
    border-radius:6px;
    padding:7px 8px;
}
.tt-status-select { width:auto; margin:0; }
.ready-date { margin-right:auto; color:#ffca65; font-size:10px; }

@media (max-width: 1100px) {
    .tt-metrics { grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* =========================================================
   V6 — ЧИТАБЕЛЬНІ ФІЛЬТРИ ТА ШИРИНА ТАБЛИЦІ
   ========================================================= */
.export-orders-panel .orders-table-wrap { overflow-x:auto !important; overflow-y:visible; }
.compact-orders-table { width:100% !important;  table-layout:fixed !important; }
.compact-orders-table .export-head-labels th {
    height:30px; padding:8px 8px 3px !important; font-size:9px !important; white-space:nowrap;
}
.compact-orders-table .export-filter-row th { padding:4px 6px 9px !important; background:#121920; }
.compact-orders-table .column-filter {
    display:block; width:100%; height:31px; box-sizing:border-box; margin:0;
    padding:6px 8px; font-size:10px; border-radius:6px;
}
.compact-orders-table td { padding:9px 7px !important; font-size:10px !important; line-height:1.25 !important; }
.compact-orders-table th:nth-child(1){width:34px!important}
.compact-orders-table th:nth-child(2){width:72px!important}
.compact-orders-table th:nth-child(3){width:88px!important}
.compact-orders-table th:nth-child(4){width:72px!important}
.compact-orders-table th:nth-child(5){width:255px!important}
.compact-orders-table th:nth-child(6){width:285px!important}
.compact-orders-table th:nth-child(7){width:195px!important}
.compact-orders-table th:nth-child(8){width:58px!important}
.compact-orders-table th:nth-child(9){width:78px!important}
.compact-orders-table th:nth-child(10){width:92px!important}
.compact-orders-table th:nth-child(11){width:105px!important}
.compact-orders-table th:nth-child(12){width:80px!important}
.export-selection-bar #export-selected-count { margin-left:0 !important; }
.export-selection-bar #reset-test-data-button { margin-left:auto; }

/* V7 — компактний блок Замовлення */
.orders-v7-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}
.orders-v7-toolbar h2{margin:2px 0;font-size:23px}.orders-v7-toolbar p{margin:0;color:#7f8b96;font-size:10px}
.orders-v7-tools{width:min(410px,40vw)}.orders-v7-search{width:100%;max-width:none}
.orders-v7-statuses{margin:0 0 9px;gap:6px}.orders-v7-statuses .status-filter{padding:7px 10px;font-size:9px;border-radius:7px}
.orders-v7-statuses .status-filter b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:17px;margin-left:5px;padding:0 5px;border-radius:9px;background:#27323c;color:#dce4ea;font-size:8px}
.orders-v7-statuses .status-filter.active b{background:#9b6c1b;color:#fff}
.orders-v7-kpis{display:grid;grid-template-columns:.6fr .9fr .9fr .75fr 1.05fr .9fr 1.25fr;gap:6px;margin-bottom:9px}
.orders-v7-kpis>div{min-width:0;border:1px solid #222d36;border-radius:8px;background:#101820;padding:7px 9px}
.orders-v7-kpis span{display:block;color:#75818c;font-size:8px;margin-bottom:2px}.orders-v7-kpis strong{display:block;color:#edf2f5;font-size:12px;white-space: normal;overflow: visible;text-overflow: clip}
.orders-v7-table-panel{border:1px solid #222d36;border-radius:9px;background:#0d141a;overflow:hidden}.orders-v7-table-wrap{overflow-x:auto}
.orders-v7-table{width:100%;border-collapse:collapse;table-layout:fixed}.orders-v7-table thead{background:#141c23}
.orders-v7-table th{height:31px;padding:0 7px;text-align:left;color:#788590;font-size:8px;font-weight:700;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid #26313a}
.orders-v7-table td{height:41px;padding:4px 7px;color:#cdd5db;font-size:9px;border-bottom:1px solid #1d2730;vertical-align:middle;overflow: visible;text-overflow: clip}
.orders-v7-table tbody tr:last-child td{border-bottom:0}.orders-v7-table tbody tr:hover{background:#111c24}.orders-v7-table .completed-row{background:rgba(22,110,72,.11)}
.orders-v7-table th:nth-child(1){width:70px}.orders-v7-table th:nth-child(2){width:235px}.orders-v7-table th:nth-child(3){width:175px}.orders-v7-table th:nth-child(4){width:48px}.orders-v7-table th:nth-child(5){width:68px}.orders-v7-table th:nth-child(6){width:72px}.orders-v7-table th:nth-child(7){width:96px}.orders-v7-table th:nth-child(8){width:50px}.orders-v7-table th:nth-child(9){width:96px}.orders-v7-table th:nth-child(10){width:86px}.orders-v7-table th:nth-child(11){width:122px}.orders-v7-table th:nth-child(12){width:38px}
.tt-code{color:#f7b43f!important;font-weight:800;white-space:nowrap}.tt-store-cell strong{display:block;color:#eef3f6;font-size:9px;white-space: normal;overflow: visible;text-overflow: clip}.tt-store-cell small{display:block;margin-top:2px;color:#697681;font-size:8px;white-space: normal;overflow: visible;text-overflow: clip}.tt-sender-cell{white-space:nowrap}
.v7-fact{width:52px!important;height:25px!important;margin:0!important;padding:3px 6px!important;font-size:9px!important}.docs-count-button,.row-more-button{border:1px solid #2b3741;background:#111b23;color:#d7dfe5;border-radius:6px;height:25px;cursor:pointer}.docs-count-button{min-width:29px;padding:0 6px;font-weight:700}.row-more-button{width:29px}.v7-status{width:114px!important;height:26px;margin:0!important;padding:3px 5px!important;font-size:8px!important}.v7-status.completed{border-color:#237d58;color:#68dda9;background:#102b20}.v7-status.picking{border-color:#7e5b1f;color:#f0c66c;background:#2b2415}.ready-cell{white-space:nowrap;color:#d8bd7c!important}
@media(max-width:1200px){.orders-v7-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.orders-v7-tools{width:350px}}

/* V8 sidebar */
.sidebar-menu{top:215px!important;left:14px!important;right:14px!important;gap:7px!important}
.menu-item{min-height:46px!important;padding:0 12px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:9px!important;background:rgba(44,30,6,.48)!important;display:grid!important;grid-template-columns:34px 1fr 16px!important;align-items:center!important;gap:9px!important;color:rgba(255,255,255,.9)!important;font-size:12px!important;font-weight:500!important}
.menu-item.active{background:linear-gradient(90deg,rgba(188,128,25,.75),rgba(109,72,9,.72))!important;border-color:rgba(248,187,81,.55)!important;box-shadow:inset 3px 0 0 #f7b644,0 0 18px rgba(176,114,7,.14)!important}
.menu-icon{width:31px!important;height:31px!important;display:grid!important;place-items:center!important}.menu-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-chevron{color:rgba(255,255,255,.55);font-size:19px;text-align:right}.menu-divider{margin:3px 6px!important}
@media(max-width:1100px){.sidebar-menu{top:195px!important}}
.ready-date-backdrop[hidden]{display:none!important}.ready-date-backdrop{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,7,12,.72);backdrop-filter:blur(8px)}
.ready-date-modal{width:min(520px,calc(100vw - 30px));border:1px solid rgba(247,179,61,.65);border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#121b23,#0a1117 72%);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.ready-date-header{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid #26313a;background:linear-gradient(90deg,rgba(124,83,14,.32),rgba(15,23,30,.2))}.ready-date-title-wrap{display:flex;align-items:center;gap:11px}.ready-date-title-wrap h3{margin:2px 0 0;font-size:18px}.ready-calendar-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:rgba(155,108,27,.2);color:#f8bc53}.ready-date-close{width:32px;height:32px;border:0;border-radius:7px;background:transparent;color:#aeb7bf;font-size:22px;cursor:pointer}
.ready-date-body{padding:17px}.ready-date-body>p{margin:0 0 12px;color:#a3aeb7;font-size:11px}.ready-order-context{padding:10px 12px;margin-bottom:14px;border:1px solid #26313a;border-radius:8px;background:#0d151c}.ready-order-context strong,.ready-order-context span{display:block}.ready-order-context strong{font-size:12px;color:#fff}.ready-order-context span{margin-top:3px;font-size:9px;color:#77838d}
.ready-date-field>span{display:block;margin-bottom:6px;color:#89959f;font-size:9px}.ready-date-field input{width:100%;height:48px;box-sizing:border-box;padding:0 13px;border:1px solid #35424d;border-radius:9px;color:#fff;background:#0a1218;color-scheme:dark;font:600 14px system-ui;outline:none}.ready-date-field input:focus{border-color:#d09024;box-shadow:0 0 0 3px rgba(208,144,36,.12)}
.ready-quick-dates{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.ready-quick-dates button{padding:7px 9px;border:1px solid #2b3741;border-radius:7px;background:#111a21;color:#aeb8c0;font-size:9px;cursor:pointer}.ready-date-actions{display:flex;justify-content:flex-end;gap:8px;padding:13px 17px;border-top:1px solid #222c35;background:#0c1319}

/* =========================================================
   V9 — CALENDAR MODAL / RETAIL TRANSPORT
   ========================================================= */
.ready-calendar-modal{
    width:min(430px,calc(100vw - 28px))!important;
    border:1px solid #27333d!important;
    border-radius:12px!important;
    background:#0d151c!important;
    box-shadow:0 28px 80px rgba(0,0,0,.68)!important;
}
.ready-calendar-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    padding:16px 17px 13px;border-bottom:1px solid #202b34;
}
.ready-calendar-head h3{margin:3px 0 0;color:#f4f7f9;font-size:17px;line-height:1.2}
.ready-calendar-context{
    margin:12px 14px 0;padding:9px 11px;border:1px solid #222e37;border-radius:8px;background:#101920
}
.ready-calendar-context strong,.ready-calendar-context span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ready-calendar-context strong{font-size:10px;color:#eef2f5}
.ready-calendar-context span{margin-top:3px;font-size:8px;color:#75818b}
.ready-calendar-shell{padding:12px 14px 10px}
.ready-calendar-nav{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;margin-bottom:10px}
.ready-calendar-nav strong{text-align:center;color:#eef3f6;font-size:12px;text-transform:capitalize}
.ready-calendar-nav button{
    width:30px;height:30px;border:1px solid #293640;border-radius:7px;background:#111b22;color:#c9d2d9;
    font-size:20px;line-height:1;cursor:pointer
}
.ready-calendar-nav button:hover{border-color:#a4731d;color:#fff;background:#251e14}
.ready-calendar-week,.ready-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ready-calendar-week{margin-bottom:4px}
.ready-calendar-week span{text-align:center;color:#65727d;font-size:8px;font-weight:700;text-transform:uppercase}
.ready-day{
    aspect-ratio:1/1;min-height:37px;border:1px solid transparent;border-radius:7px;background:transparent;
    color:#d7dfe4;font-size:10px;font-weight:600;cursor:pointer
}
.ready-day:hover:not(:disabled){border-color:#49303a;background:#1c171c}
.ready-day.outside{color:#45515b}
.ready-day.today{border-color:#8b631d;color:#f8be59}
.ready-day.selected{
    border-color:#d2942b!important;background:linear-gradient(145deg,#ae771a,#77500f)!important;
    color:#fff!important;box-shadow:0 4px 14px rgba(163,109,17,.24)
}
.ready-day.past{opacity:.24;cursor:not-allowed}
.ready-calendar-bottom{
    display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px 13px;
    border-top:1px solid #202b34;background:#0b1218
}
.ready-selected-date{min-width:0}
.ready-selected-date span{display:block;color:#687681;font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.ready-selected-date strong{display:block;margin-top:3px;color:#e6ecef;font-size:10px;white-space:nowrap}
.ready-calendar-bottom .ready-date-actions{padding:0!important;border:0!important;background:transparent!important;flex-shrink:0}
.ready-calendar-bottom .secondary-button,.ready-calendar-bottom .primary-button{height:34px;padding:0 12px;font-size:9px}
@media(max-width:520px){
    .ready-calendar-bottom{align-items:stretch;flex-direction:column}
    .ready-calendar-bottom .ready-date-actions{justify-content:flex-end}
}

/* =========================================================
   V10 — MATCHED COMPACT CALENDAR / FILTERS / DIALOG / SCROLL
   ========================================================= */
.orders-v10-filters{display:flex;align-items:flex-end;gap:8px;margin:0 0 9px}
.orders-v10-filters label{width:min(260px,25vw)}.orders-v10-filters label span{display:block;margin:0 0 4px;color:#6f7d88;font-size:8px;text-transform:uppercase}
.orders-v10-filters select,.v10-status{appearance:none;-webkit-appearance:none;background-color:#0d161d!important;background-image:linear-gradient(45deg,transparent 50%,#b8c2c9 50%),linear-gradient(135deg,#b8c2c9 50%,transparent 50%)!important;background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50%!important;background-size:4px 4px,4px 4px!important;background-repeat:no-repeat!important;border:1px solid #2b3842!important;color:#e4e9ed!important;border-radius:7px!important}
.orders-v10-filters select{width:100%;height:34px;padding:0 30px 0 10px;font-size:9px}
.orders-v10-filters option,.v10-status option{background:#0d161d;color:#fff}
.v10-status{padding-right:25px!important}
.v10-ready-modal{width:min(520px,calc(100vw - 24px))!important;border-color:#c28722!important;border-radius:9px!important}
.v10-modal-title{height:48px;display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid #26313a;background:linear-gradient(90deg,rgba(122,82,15,.25),transparent)}
.v10-modal-title strong{font-size:12px}.v10-modal-title button{margin-left:auto;border:0;background:transparent;color:#7d8992;font-size:17px;cursor:pointer}.v10-cal-icon{color:#f8bc53}
.v10-modal-intro{padding:10px 14px 2px;color:#aab4bc;font-size:9px}.v10-order-line{padding:0 14px 9px;color:#87939d;font-size:8px}.v10-order-line strong{color:#edf2f5}.v10-order-line small{display:block;margin-top:2px;color:#66737e}
.v10-calendar-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(150px,.85fr);gap:10px;padding:0 14px 10px}.v10-calendar-layout .ready-calendar-shell{padding:9px;border:1px solid #26323b;border-radius:7px;background:#0a1218}
.v10-calendar-layout .ready-day{min-height:27px;font-size:8px;border-radius:5px}.v10-calendar-layout .ready-calendar-nav{margin-bottom:6px}.v10-calendar-layout .ready-calendar-nav strong{font-size:9px}.v10-calendar-layout .ready-calendar-nav button{width:25px;height:25px;font-size:16px}.v10-calendar-layout .ready-calendar-week span{font-size:7px}
.v10-date-side{padding:9px;border:1px solid #26323b;border-radius:7px;background:#0b1319}.v10-date-side>span{display:block;margin-bottom:5px;color:#75818b;font-size:7px;text-transform:uppercase}.v10-date-value{display:flex;align-items:center;gap:7px;padding:8px;margin-bottom:10px;border:1px solid #27333c;border-radius:6px;background:#101920}.v10-date-value b{color:#f8ba4f}.v10-date-value strong{font-size:9px}
.v10-date-side .ready-quick-dates{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0}.v10-date-side .ready-quick-dates button{padding:6px 4px;font-size:7px}.v10-date-side .ready-quick-dates button:last-child{grid-column:1/-1}
.v10-actions{padding:9px 14px!important}.v10-actions button{height:31px!important;font-size:8px!important}
.app-dialog-backdrop[hidden]{display:none!important}.app-dialog-backdrop{position:fixed;inset:0;z-index:13000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,7,12,.76);backdrop-filter:blur(7px)}
.app-dialog{width:min(440px,calc(100vw - 28px));border:1px solid #8d631c;border-radius:10px;background:#0d151c;box-shadow:0 25px 80px rgba(0,0,0,.65);overflow:hidden}.app-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;border-bottom:1px solid #26313a}.app-dialog-head span{color:#f7b84a;font-size:7px;letter-spacing:.16em}.app-dialog-head h3{margin:3px 0 0;font-size:17px}.app-dialog-head button{border:0;background:transparent;color:#87939d;font-size:20px;cursor:pointer}.app-dialog-store{padding:11px 14px;border-bottom:1px solid #202a33}.app-dialog-store strong,.app-dialog-store span{display:block}.app-dialog-store strong{font-size:11px}.app-dialog-store span{margin-top:3px;color:#75818b;font-size:8px}.app-dialog-docs{padding:13px 14px}.app-dialog-docs>span{color:#7c8993;font-size:8px}.app-dialog-docs>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.app-dialog-docs b{padding:6px 8px;border:1px solid #2b3740;border-radius:6px;background:#111a21;color:#eef2f5;font-size:9px}.app-dialog-actions{display:flex;justify-content:flex-end;padding:10px 14px;border-top:1px solid #202a33}
.orders-v7-table{}.orders-v7-table th:nth-child(1){width:68px}.orders-v7-table th:nth-child(2){width:82px}.orders-v7-table th:nth-child(3){width:220px}.orders-v7-table th:nth-child(4){width:170px}.orders-v7-table th:nth-child(5){width:48px}.orders-v7-table th:nth-child(6){width:65px}.orders-v7-table th:nth-child(7){width:68px}.orders-v7-table th:nth-child(8){width:94px}.orders-v7-table th:nth-child(9){width:48px}.orders-v7-table th:nth-child(10){width:92px}.orders-v7-table th:nth-child(11){width:84px}.orders-v7-table th:nth-child(12){width:118px}.orders-v7-table th:nth-child(13){width:36px}
.tt-date-cell{white-space:nowrap;color:#9aa6af!important}
*{scrollbar-width:thin;scrollbar-color:#7a571c #101820}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:#101820;border-radius:8px}*::-webkit-scrollbar-thumb{background:#6e501c;border:2px solid #101820;border-radius:8px}*::-webkit-scrollbar-thumb:hover{background:#a37321}

/* ========================================================= V11 ========================================================= */
.select-col{width:30px!important;text-align:center!important}.select-col input,.planning-check{accent-color:#d29224}
.orders-to-planning{margin-left:auto;white-space:nowrap}.orders-to-planning b{margin-left:6px;padding:2px 6px;border-radius:10px;background:rgba(255,255,255,.14)}
.log-v11-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:10px}.log-v11-head h2{margin:2px 0;font-size:23px}.log-v11-head p{margin:0;color:#7c8993;font-size:10px}
.log-v11-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:9px}.log-v11-kpis>div{padding:8px 10px;border:1px solid #22303a;border-radius:8px;background:#101820}.log-v11-kpis span{display:block;color:#74818b;font-size:8px}.log-v11-kpis strong{display:block;margin-top:2px;color:#eef3f6;font-size:13px}
.log-v11-filters{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(190px,.8fr) minmax(190px,.8fr) auto;gap:7px;margin-bottom:9px}.log-v11-filters>.directory-search{max-width:none;width:auto}
.log-v11-panel{border:1px solid #22303a;border-radius:9px;overflow:hidden;background:#0c141a}.log-v11-table-wrap{overflow:auto;}.log-v11-table{width:100%;border-collapse:collapse;table-layout:fixed}.log-v11-table thead{position:sticky;top:0;z-index:2;background:#141d24}.log-v11-table th{height:31px;padding:0 7px;text-align:left;color:#74818c;font-size:8px;text-transform:uppercase;border-bottom:1px solid #26323b}.log-v11-table td{height:40px;padding:4px 7px;color:#cdd5da;font-size:9px;border-bottom:1px solid #1d2830;overflow: visible;text-overflow: clip;white-space: normal}.log-v11-table tbody tr:hover{background:#111c24}
.route-modal-backdrop[hidden],.vehicle-modal-backdrop[hidden]{display:none!important}.route-modal-backdrop,.vehicle-modal-backdrop{position:fixed;inset:0;z-index:15000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,7,12,.78);backdrop-filter:blur(8px)}
.route-modal{width:min(1050px,calc(100vw - 30px));max-height:calc(100vh - 30px);display:flex;flex-direction:column;border:1px solid #8d631c;border-radius:12px;background:#0c141a;box-shadow:0 30px 90px rgba(0,0,0,.68);overflow:hidden}.route-modal-head,.vehicle-modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:15px 17px;border-bottom:1px solid #26313a;background:linear-gradient(90deg,rgba(116,78,13,.25),transparent)}.route-modal-head h3,.vehicle-modal-head h3{margin:3px 0 0;font-size:20px}.route-modal-head button,.vehicle-modal-head button{border:0;background:transparent;color:#9ba6ae;font-size:23px;cursor:pointer}.route-modal-body{padding:15px;overflow:auto}.route-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.route-form-grid label>span,.vehicle-grid label>span{display:block;margin-bottom:5px;color:#83909a;font-size:8px;text-transform:uppercase}.route-form-grid input,.route-form-grid select,.vehicle-grid input,.vehicle-grid select,.vehicle-grid textarea{width:100%;box-sizing:border-box;border:1px solid #2b3943;border-radius:7px;background:#0a1319;color:#edf2f5;outline:none}.route-form-grid input,.route-form-grid select,.vehicle-grid input,.vehicle-grid select{height:36px;padding:0 10px;font-size:10px}.route-vehicle-field{grid-column:span 2}.route-inline{display:grid;grid-template-columns:1fr auto;gap:6px}.route-inline button{border:1px solid #8c631d;border-radius:7px;background:#241d11;color:#f9c973;padding:0 10px;font-size:9px;cursor:pointer}
.route-selected-block{margin-top:14px;border:1px solid #25313a;border-radius:8px;overflow:hidden}.route-selected-head{display:flex;justify-content:space-between;padding:9px 11px;background:#131c23;font-size:9px}.route-selected-head span{color:#89959e}.route-selected-block #route-selected-list>div{display:grid;grid-template-columns:24px 1fr 80px;align-items:center;gap:8px;padding:7px 10px;border-top:1px solid #1e2931}.route-selected-block b{color:#f7b849}.route-selected-block span strong,.route-selected-block span small{display:block}.route-selected-block span strong{font-size:9px}.route-selected-block span small{margin-top:2px;color:#687681;font-size:8px}.route-selected-block em{text-align:right;color:#bfc8ce;font-size:9px;font-style:normal}.route-modal-actions,.vehicle-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:11px 15px;border-top:1px solid #26313a;background:#0a1117}
.vehicle-modal{width:min(1120px,calc(100vw - 30px));max-height:calc(100vh - 28px);display:flex;flex-direction:column;border:1px solid #9a6c1d;border-radius:12px;background:#0c141a;box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:hidden}.vehicle-modal-head p{margin:4px 0 0;color:#82909a;font-size:9px}.vehicle-modal-body{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:auto}.vehicle-card{padding:12px;border:1px solid #24323b;border-radius:9px;background:#0f181f}.vehicle-card.vehicle-wide{grid-column:1/-1}.vehicle-card h4{margin:0 0 11px;color:#eef3f6;font-size:11px}.vehicle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vehicle-tech{grid-template-columns:repeat(4,minmax(0,1fr))}.vehicle-comment{grid-column:1/-1}.vehicle-grid textarea{height:64px;padding:9px;resize:vertical;font-size:10px}.vehicle-section-line{display:flex;justify-content:space-between;align-items:center}.app-switch{display:flex;align-items:center;gap:7px;color:#cbd3d8;font-size:9px}.app-switch input{display:none}.app-switch span{width:32px;height:17px;border-radius:10px;background:#26323a;position:relative}.app-switch span:after{content:"";position:absolute;left:3px;top:3px;width:11px;height:11px;border-radius:50%;background:#9aa5ad;transition:.2s}.app-switch input:checked+span{background:#a67219}.app-switch input:checked+span:after{left:18px;background:#fff}
.native-select-v11{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}.custom-select-v11{position:relative;min-width:0}.custom-select-button-v11{width:100%;height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;border:1px solid #2b3943;border-radius:7px;background:#0b151c;color:#e9eef1;font-size:9px;text-align:left;cursor:pointer}.custom-select-button-v11 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-select-button-v11 i{color:#9ba6ae;font-style:normal}.custom-select-list-v11{position:absolute;z-index:17000;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow:auto;padding:4px;border:1px solid #34424c;border-radius:8px;background:#0b141a;box-shadow:0 18px 45px rgba(0,0,0,.55)}.custom-select-list-v11[hidden]{display:none!important}.custom-select-option-v11{width:100%;min-height:31px;padding:6px 8px;border:0;border-radius:5px;background:transparent;color:#dce3e7;font-size:9px;text-align:left;cursor:pointer}.custom-select-option-v11:hover{background:#251e14;color:#fff}.custom-select-option-v11.selected{background:#7b5515;color:#fff}.route-form-grid .custom-select-button-v11,.vehicle-grid .custom-select-button-v11{height:36px}.orders-v10-filters .custom-select-v11{width:100%}
.app-toast-v11{position:fixed;right:20px;bottom:20px;z-index:20000;transform:translateY(20px);opacity:0;padding:10px 13px;border:1px solid #8d631c;border-radius:8px;background:#111a21;color:#eef3f6;font-size:10px;transition:.2s;pointer-events:none}.app-toast-v11.show{transform:none;opacity:1}
@media(max-width:1000px){.route-form-grid{grid-template-columns:repeat(2,1fr)}.vehicle-modal-body{grid-template-columns:1fr}.vehicle-card.vehicle-wide{grid-column:auto}.vehicle-tech{grid-template-columns:repeat(2,1fr)}.log-v11-filters{grid-template-columns:1fr 1fr}.log-v11-kpis{grid-template-columns:repeat(3,1fr)}}

/* ========================================================= V12 — ORDERS / DETAILS ========================================================= */
.orders-v7-table{table-layout:fixed!important}
.orders-v7-table th:nth-child(1){width:32px!important}.orders-v7-table th:nth-child(2){width:72px!important}.orders-v7-table th:nth-child(3){width:82px!important}.orders-v7-table th:nth-child(4){width:245px!important}.orders-v7-table th:nth-child(5){width:205px!important}.orders-v7-table th:nth-child(6){width:48px!important}.orders-v7-table th:nth-child(7){width:64px!important}.orders-v7-table th:nth-child(8){width:72px!important}.orders-v7-table th:nth-child(9){width:92px!important}.orders-v7-table th:nth-child(10){width:48px!important}.orders-v7-table th:nth-child(11){width:92px!important}.orders-v7-table th:nth-child(12){width:88px!important}.orders-v7-table th:nth-child(13){width:142px!important}.orders-v7-table th:nth-child(14){width:94px!important}
.orders-v7-table td{overflow: visible;text-overflow: clip}.tt-sender-cell{white-space:nowrap!important}.weight-one-line,.money-one-line{white-space:nowrap!important}.status-right{overflow:visible!important}.details-right{overflow:visible!important}
.status-right .custom-select-v11{width:132px}.status-right .custom-select-button-v11{height:30px;font-size:8px}.status-right .custom-select-list-v11{min-width:150px;right:0;left:auto}
.tt-details-button{height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;border:1px solid #30404b;border-radius:7px;background:#0e1820;color:#dbe3e8;font-size:8px;cursor:pointer;white-space:nowrap}.tt-details-button:hover{border-color:#a5731e;background:#251e13;color:#fff}
.tt-detail-backdrop[hidden]{display:none!important}.tt-detail-backdrop{position:fixed;inset:0;z-index:19000;background:#071017;display:flex}
.tt-detail-screen{width:100%;height:100%;display:flex;flex-direction:column;background:#0a1218;color:#eaf0f3}
.tt-detail-head{height:74px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #26323b;background:linear-gradient(90deg,rgba(110,74,12,.23),transparent 42%)}.tt-detail-head h2{margin:3px 0 0;font-size:21px}.tt-detail-head p{margin:3px 0 0;color:#7d8993;font-size:9px}.tt-detail-head>button{width:36px;height:36px;border:1px solid #2b3943;border-radius:8px;background:#101920;color:#aeb8bf;font-size:22px;cursor:pointer}
.tt-detail-body{flex:1;min-height:0;padding:14px 20px 20px;overflow:auto}
.tt-detail-info{display:grid;grid-template-columns:1.35fr 1.5fr repeat(6,minmax(90px,.7fr));gap:7px;margin-bottom:12px}.tt-detail-info>div{min-height:55px;padding:9px 10px;border:1px solid #24313a;border-radius:8px;background:#0e171e}.tt-detail-info span,.tt-detail-document-meta span{display:block;color:#71808b;font-size:7px;text-transform:uppercase;letter-spacing:.04em}.tt-detail-info strong{display:block;margin-top:4px;font-size:10px;white-space: normal;overflow: visible;text-overflow: clip}.tt-detail-info small{display:block;margin-top:3px;color:#697781;font-size:7px;white-space: normal;overflow: visible;text-overflow: clip}
.tt-detail-docs-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 12px;border:1px solid #26333c;border-radius:8px 8px 0 0;background:#121b22}.tt-detail-docs-head>div:first-child strong,.tt-detail-docs-head>div:first-child span{display:block}.tt-detail-docs-head>div:first-child strong{font-size:11px}.tt-detail-docs-head>div:first-child span{margin-top:2px;color:#74818b;font-size:8px}.tt-detail-doc-tabs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.tt-detail-doc-tabs button{height:28px;padding:0 9px;border:1px solid #2d3b45;border-radius:6px;background:#0b141a;color:#bdc7cd;font-size:8px;cursor:pointer}.tt-detail-doc-tabs button.active{border-color:#d19123;background:#805815;color:#fff}
.tt-detail-document-meta{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-left:1px solid #26333c;border-right:1px solid #26333c;background:#0c151b}.tt-detail-document-meta>div{padding:8px 10px;border-right:1px solid #202b33}.tt-detail-document-meta>div:last-child{border-right:0}.tt-detail-document-meta strong{display:block;margin-top:3px;font-size:9px;white-space: normal;overflow: visible;text-overflow: clip}
.tt-detail-table-wrap{border:1px solid #26333c;border-radius:0 0 8px 8px;overflow:auto}.tt-detail-table{width:100%;border-collapse:collapse;table-layout:fixed}.tt-detail-table th{height:34px;padding:0 10px;background:#151e25;color:#73818c;font-size:8px;text-align:left;text-transform:uppercase;border-bottom:1px solid #2a3640}.tt-detail-table td{height:42px;padding:6px 10px;color:#cbd4da;font-size:9px;border-bottom:1px solid #1d2830}.tt-detail-table th:nth-child(1){width:130px}.tt-detail-table th:nth-child(2){width:145px}.tt-detail-table th:nth-child(3){width:auto}.tt-detail-table th:nth-child(4){width:100px}.tt-detail-table th:nth-child(5){width:75px}.tt-detail-table th:nth-child(6){width:105px}.tt-detail-table th:nth-child(7){width:115px}.detail-product strong{display:block;white-space:normal}
.tt-detail-no-data{padding:28px;border:1px solid #26333c;border-top:0;border-radius:0 0 8px 8px;text-align:center;background:#0c151b}.tt-detail-no-data strong,.tt-detail-no-data span{display:block}.tt-detail-no-data strong{font-size:11px}.tt-detail-no-data span{max-width:680px;margin:6px auto 0;color:#74818b;font-size:9px;line-height:1.5}
@media(max-width:1100px){.tt-detail-info{grid-template-columns:repeat(4,1fr)}.tt-detail-document-meta{grid-template-columns:repeat(3,1fr)}}

/* ========================================================= V12.1 ========================================================= */
/* Keep right-side Status + Details fully visible; table scroll remains inside its own panel. */
.orders-v7-panel,.orders-v7-table-wrap{min-width:0!important}
.orders-v7-table-wrap{overflow-x:auto!important;overflow-y:visible!important;padding-bottom:3px}
.orders-v7-table{width:100%!important;}
.orders-v7-table th:nth-child(1){width:28px!important}
.orders-v7-table th:nth-child(2){width:68px!important}
.orders-v7-table th:nth-child(3){width:76px!important}
.orders-v7-table th:nth-child(4){width:215px!important}
.orders-v7-table th:nth-child(5){width:170px!important}
.orders-v7-table th:nth-child(6){width:42px!important}
.orders-v7-table th:nth-child(7){width:58px!important}
.orders-v7-table th:nth-child(8){width:62px!important}
.orders-v7-table th:nth-child(9){width:82px!important}
.orders-v7-table th:nth-child(10){width:42px!important}
.orders-v7-table th:nth-child(11){width:84px!important}
.orders-v7-table th:nth-child(12){width:80px!important}
.orders-v7-table th:nth-child(13){width:132px!important}
.orders-v7-table th:nth-child(14){width:90px!important}
.orders-v7-table td.status-right,.orders-v7-table td.details-right{overflow:visible!important}
.status-right .custom-select-v11{width:124px!important}
.tt-details-button{width:82px!important;padding:0 7px!important}
.tt-detail-doc-tabs button b{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:8px;background:rgba(255,255,255,.12);font-size:7px}
.tt-detail-table thead tr:has(th:nth-child(8)) th:nth-child(1){width:82px}
.tt-detail-table thead tr:has(th:nth-child(8)) th:nth-child(2){width:125px}
.tt-detail-table thead tr:has(th:nth-child(8)) th:nth-child(3){width:140px}
.tt-detail-table thead tr:has(th:nth-child(8)) th:nth-child(4){width:auto}
.tt-detail-table thead tr:has(th:nth-child(8)) th:nth-child(5){width:90px}
.tt-detail-table thead tr:has(th:nth-child(8)) th:nth-child(6){width:65px}
.tt-detail-table thead tr:has(th:nth-child(8)) th:nth-child(7){width:100px}
.tt-detail-table thead tr:has(th:nth-child(8)) th:nth-child(8){width:110px}
.detail-doc-code{color:#f8bd55!important;font-weight:700;white-space:nowrap}

/* V12.2 — slightly stronger empty-state hint */
.tt-detail-no-data strong{color:#f0f4f6}
.tt-detail-no-data span{color:#8b99a3}


/* =========================================================
   V16 AUDIT — STABLE SIDEBAR GEOMETRY
   Same visual position on desktop monitors; no 250→220→190 jump.
   ========================================================= */
@media (min-width: 801px){
    .sidebar{
        width:250px!important;
        min-width:250px!important;
        flex:0 0 250px!important;
        height:100vh!important;
        background-size:100% 100%!important;
        background-position:center top!important;
    }
    .sidebar-menu{
        top:185px!important;
        left:14px!important;
        right:14px!important;
    }
}


/* V17 — stable sidebar without vertical stretching */
@media (min-width:801px){
  .sidebar{
    width:250px!important;
    min-width:250px!important;
    flex:0 0 250px!important;
    height:100vh!important;
    overflow:hidden!important;
    background-size:250px auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
  .sidebar-menu{
    top:185px!important;
    left:14px!important;
    right:14px!important;
    width:auto!important;
    transform:none!important;
  }
}

/* =========================================================
   SIDEBAR — ADAPTIVE COMPOSITION / MENU BELOW BRAND
   Authoritative desktop rules. Keep artwork composition fixed;
   move the whole navigation below the WINETIME brand area.
   ========================================================= */
@media (min-width: 801px){
  .sidebar{
    width:250px!important;
    min-width:250px!important;
    flex:0 0 250px!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    position:relative!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% 100%!important;
  }

  .sidebar-menu{
    /* 23.5% keeps the menu below the full fox/WINETIME mark
       on both short and tall desktop viewports. */
    top:23.5vh!important;
    left:14px!important;
    right:14px!important;
    width:auto!important;
    transform:none!important;
  }

  .sidebar-footer{
    left:20px!important;
    right:14px!important;
    bottom:14px!important;
  }
}


/* =========================================================
   FINAL LAYOUT TUNING
   1) Navigation sits lower, clear of the complete WINETIME mark.
   2) Hero artwork is fitted by width so the truck is not enlarged
      and cropped by background-size: cover.
   ========================================================= */
@media (min-width: 801px){
  .sidebar-menu{
    top:25.5vh!important;
  }

  .hero{
    background-size:100% auto!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:#070b0f!important;
  }
}

/* =========================================================
   ROUTES — FINAL AGREED DESIGN
   ========================================================= */
.routes18-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.routes18-head h2{margin:4px 0 2px;font-size:24px}.routes18-head p{margin:0;color:#78858e;font-size:10px}.routes18-head-actions{display:flex;gap:8px}
.routes18-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.routes18-kpi{min-height:86px;padding:14px 16px;border:1px solid #1f2c35;border-radius:10px;background:linear-gradient(145deg,#0d1820,#0a1218);box-shadow:0 10px 25px rgba(0,0,0,.12);text-align:left;color:#fff}
.routes18-kpi span,.routes18-kpi small{display:block}.routes18-kpi span{color:#a8b2b9;font-size:9px}.routes18-kpi strong{display:block;margin:6px 0 2px;font-size:24px}.routes18-kpi small{color:#73818a;font-size:8px}.routes18-kpi-action{cursor:pointer}.routes18-kpi-action strong{color:#f7b849}.routes18-kpi-action:hover{border-color:#8d631c}
.routes18-toolbar{display:grid;grid-template-columns:minmax(260px,1.5fr) 135px 180px 170px 150px auto;gap:8px;align-items:center;margin-bottom:12px}.routes18-toolbar>input,.routes18-toolbar>select{height:38px;padding:0 10px;border:1px solid #2a3740;border-radius:8px;background:#0a1319;color:#dfe5e8}
.routes18-panel{border:1px solid #24323b;border-radius:11px;background:#0a1319;overflow:hidden}.routes18-panel-title{display:flex;justify-content:space-between;padding:13px 15px;border-bottom:1px solid #223039}.routes18-panel-title strong{font-size:14px}.routes18-panel-title span{color:#85919a;font-size:9px}
.routes18-table-wrap{overflow:auto;}.routes18-table{width:100%;border-collapse:collapse;font-size:9px}.routes18-table th{position:sticky;top:0;z-index:2;padding:9px 8px;background:#10202a;color:#9ba8b0;font-weight:500;text-align:left;white-space:nowrap}.routes18-table td{padding:9px 8px;border-top:1px solid #1c2931;vertical-align:middle}.routes18-table tr:hover td{background:#0e1920}.routes18-table td small{display:block;margin-top:2px;color:#75828a;font-size:7px}.routes18-direction{min-width:220px;max-width:290px}.routes18-direction strong,.routes18-direction small{white-space: normal;overflow: visible;text-overflow: clip}.route18-status{display:inline-flex;padding:5px 8px;border-radius:12px;font-size:8px;white-space:nowrap}.route18-status.planned{color:#a8e8c9;background:#123126}.route18-status.in_progress{color:#87c8ff;background:#102c43}.route18-status.completed{color:#c8d0d5;background:#273039}.route18-more{width:29px;height:29px;border:1px solid #26353e;border-radius:7px;background:#111e26;color:#cbd4d9;cursor:pointer}
.routes18-total{display:flex;align-items:center;gap:12px;padding:11px 15px;border-top:1px solid #223039;color:#aeb8be;font-size:9px}.routes18-total i{width:1px;height:14px;background:#34414a}

.route18-modal{width:min(1240px,calc(100vw - 36px));height:min(820px,calc(100vh - 30px))}
.route18-steps{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 18px;border-bottom:1px solid #26313a;background:#0a1218}.route18-steps span{display:flex;align-items:center;gap:7px;color:#64727c;font-size:9px}.route18-steps span b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#17242d;color:#7c8992}.route18-steps span.active{color:#e7ecef}.route18-steps span.active b{background:#dc9e32;color:#fff}.route18-steps i{width:70px;height:1px;background:#27353e}
.route18-step{min-height:500px}.route18-select-toolbar{display:grid;grid-template-columns:1fr 220px auto;gap:8px;margin-bottom:10px}.route18-selection-summary{display:flex;gap:18px;align-items:center;padding:10px 12px;margin-bottom:10px;border:1px solid #26353e;border-radius:8px;background:#101b22;color:#9da9b1;font-size:9px}.route18-selection-summary strong{color:#fff}
.route18-tt-table-wrap{height:440px;overflow:auto;border:1px solid #25333c;border-radius:9px}.route18-tt-table{width:100%;border-collapse:collapse;font-size:9px}.route18-tt-table th{position:sticky;top:0;z-index:2;padding:9px;background:#11202a;color:#9aa7af;text-align:left}.route18-tt-table td{padding:8px 9px;border-top:1px solid #1e2b33}.route18-tt-table td small{display:block;margin-top:2px;color:#74818a}.route18-tt-table tr:hover td{background:#101a21}
.route18-mode-title{text-align:center;padding:42px 0 25px}.route18-mode-title strong,.route18-mode-title span{display:block}.route18-mode-title strong{font-size:20px}.route18-mode-title span{margin-top:7px;color:#7e8b94;font-size:10px}.route18-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:850px;margin:0 auto}.route18-mode-card{min-height:220px;padding:24px;border:1px solid #2a3943;border-radius:12px;background:linear-gradient(145deg,#101b22,#0b1319);color:#fff;text-align:left;cursor:pointer}.route18-mode-card:hover,.route18-mode-card.selected{border-color:#dc9e32;box-shadow:0 0 0 1px rgba(220,158,50,.18),0 20px 50px rgba(0,0,0,.25)}.route18-mode-card b{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#8b6017;color:#fff}.route18-mode-card strong,.route18-mode-card span,.route18-mode-card small{display:block}.route18-mode-card strong{margin-top:25px;font-size:18px}.route18-mode-card span{margin-top:8px;color:#d3dbe0;font-size:11px}.route18-mode-card small{margin-top:10px;color:#71808a;font-size:9px}
.route18-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.route18-form-grid label>span{display:block;margin-bottom:5px;color:#83909a;font-size:8px;text-transform:uppercase}.route18-form-grid input,.route18-form-grid select{width:100%;height:36px;box-sizing:border-box;padding:0 10px;border:1px solid #2b3943;border-radius:7px;background:#0a1319;color:#edf2f5;outline:none}.route18-vehicle{grid-column:span 2}.route18-comment{grid-column:span 2}.route18-actions{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center}
@media(max-width:1200px){.routes18-toolbar{grid-template-columns:1fr 1fr 1fr}.routes18-kpis{grid-template-columns:repeat(2,1fr)}.route18-form-grid{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   LOCK APPROVED SIDEBAR COMPOSITION
   Routes UI must not alter the agreed sidebar artwork/layout.
   ========================================================= */
@media (min-width:801px){
  .sidebar{
    width:250px!important;
    min-width:250px!important;
    flex:0 0 250px!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
  .sidebar-menu{
    top:25.5vh!important;
    left:14px!important;
    right:14px!important;
    width:auto!important;
    transform:none!important;
  }
  .sidebar-footer{
    position:absolute!important;
    left:20px!important;
    right:14px!important;
    bottom:18px!important;
    z-index:4!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }
}


/* =========================================================
   SIDEBAR FINAL FIX — 19.09.2026
   No bottom crop / no detached footer panel.
   The artwork remains proportional and the sidebar follows viewport.
   ========================================================= */
@media (min-width:801px){
  .app-shell,
  body{
    min-height:100vh!important;
  }

  .sidebar{
    position:sticky!important;
    top:0!important;
    align-self:flex-start!important;
    width:250px!important;
    min-width:250px!important;
    flex:0 0 250px!important;
    height:100vh!important;
    min-height:720px!important;
    overflow:hidden!important;
    background-color:#160f05!important;
    background-size:250px auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }

  /* Continue the dark-red artwork behind the footer instead of a black cut-off block. */
  .sidebar::after{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:24%!important;
    pointer-events:none!important;
    background:linear-gradient(to bottom,rgba(22,15,5,0),#160f05 88%)!important;
  }

  .sidebar-menu{
    z-index:3!important;
    top:25.5vh!important;
    left:14px!important;
    right:14px!important;
  }

  .sidebar-footer{
    position:absolute!important;
    z-index:5!important;
    left:20px!important;
    right:14px!important;
    bottom:18px!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* Vehicle / route new fields */
#vehicle-parking-place,
#route-ttn-place{
  width:100%;
}


/* =========================================================
   FINAL UI PATCH — 19.09.2026
   ========================================================= */

/* Road must visually continue to the very bottom. */
@media (min-width:801px){
  .sidebar{
    background-size:100% 100%!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
  .sidebar::after{display:none!important;}
  .sidebar-footer{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
}
.sidebar-clear-data{
  margin-top:10px;width:max-content;padding:5px 8px;border:1px solid rgba(249,198,103,.38);
  border-radius:6px;background:rgba(64,43,7,.34);color:rgba(255,255,255,.78);font-size:8px;cursor:pointer
}
.sidebar-clear-data:hover{border-color:#f7b643;color:#fff;background:rgba(128,86,15,.48)}

/* Directory tabs can wrap cleanly with the new master-data groups. */
.directory-tabs{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
.directory-tab{min-width:145px!important}

/* Searchable multi-selects */
.custom-select-list-v11{max-height:320px!important}
.custom-select-search-v11{
  position:sticky;top:0;z-index:2;width:100%;height:34px;box-sizing:border-box;margin:0 0 5px;padding:0 10px;
  border:1px solid #34424c;border-radius:6px;background:#0f1b22;color:#fff;outline:none;font-size:9px
}
.custom-select-search-v11:focus{border-color:#a1711f;box-shadow:0 0 0 2px rgba(220,158,50,.12)}
.custom-select-options-v11{max-height:255px;overflow:auto}
.custom-select-option-v11{display:flex!important;align-items:center!important;gap:8px!important}
.multi-check{display:grid;place-items:center;width:15px;height:15px;min-width:15px;border:1px solid #53616a;border-radius:3px;font-size:9px}
.custom-select-option-v11.selected .multi-check{border-color:#f7b43f;background:#d39427;color:#fff}

/* Step 1: only Scan + Next as requested. */
.route18-actions{grid-template-columns:auto auto 1fr auto auto!important}
#route18-scan{border-color:#a37321!important;color:#fff!important}


/* =========================================================
   MASTER DATA CREATE MODAL
   ========================================================= */
.masterdata-modal-card{width:min(760px,calc(100vw - 32px))!important}
.masterdata-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px 20px}
.masterdata-fields label{display:flex;flex-direction:column;gap:7px}
.masterdata-fields label span{font-size:9px;color:#8797a2;text-transform:uppercase;letter-spacing:.03em}
.masterdata-fields input,.masterdata-fields select{
 width:100%;box-sizing:border-box;height:42px;padding:0 12px;border:1px solid #2d3c46;border-radius:8px;background:#0d1920;color:#fff;outline:none
}
.masterdata-fields input:focus,.masterdata-fields select:focus{border-color:#d3962d;box-shadow:0 0 0 2px rgba(211,150,45,.12)}
@media(max-width:700px){.masterdata-fields{grid-template-columns:1fr}}


/* CRITICAL: hidden modal must never occupy page layout */
[hidden]{display:none!important;}
#masterdata-modal[hidden],#directory-modal[hidden],#vehicle-modal[hidden],.modal-overlay[hidden],.vehicle-modal-backdrop[hidden]{display:none!important;}
/* --- автоматично згенеровано з попередніх шарів: підняття дрібних шрифтів до єдиної шкали (12 / 13 / 13.5 / 14) --- */
body.wt .hero-kicker{font-size:13.5px}
body.wt .hero-content p{font-size:14px}
body.wt .hero-tags span{font-size:13px}
body.wt .content-kicker{font-size:13px}
body.wt .content-heading p{font-size:14px}
body.wt .directory-tab strong{font-size:13.5px}
body.wt .directory-search input{font-size:14px}
body.wt .directory-total span{font-size:13px}
body.wt .primary-button{font-size:14px}
body.wt .secondary-button{font-size:14px}
body.wt .directory-table th{font-size:13px}
body.wt .directory-table td{font-size:14px}
body.wt .status-badge{font-size:13px}
body.wt .directory-empty span{font-size:14px}
body.wt .placeholder-page p{font-size:14px}
body.wt .modal-kicker{font-size:12px}
body.wt .form-group label{font-size:13.5px}
body.wt .form-group input{font-size:14px}
body.wt .form-group select{font-size:14px}
body.wt .form-group small{font-size:13px}
body.wt .postal-input span{font-size:12px}
body.wt .import-file-icon{font-size:14px}
body.wt .import-dropzone-text span{font-size:13.5px}
body.wt .import-status{font-size:13.5px}
body.wt .import-status strong{font-size:14px}
body.wt .import-preview-head span{font-size:13px}
body.wt .import-preview-head strong{font-size:14px}
body.wt .import-stats span{font-size:13px}
body.wt .orders-summary span{font-size:13px}
body.wt .import-warnings{font-size:13.5px}
body.wt .orders-table th{font-size:12px}
body.wt .order-items-table th{font-size:12px}
body.wt .orders-table td{font-size:13.5px}
body.wt .order-items-table td{font-size:13.5px}
body.wt .order-open-button{font-size:13px}
body.wt .order-details-header p{font-size:13.5px}
body.wt .order-details-info span{font-size:12px}
body.wt .order-details-info strong{font-size:13.5px}
body.wt .duplicate-modal p{font-size:14px}
body.wt .duplicate-all-actions button{font-size:13px}
body.wt .compact-orders-table{font-size:13.5px}
body.wt .compact-orders-table th{font-size:12px}
body.wt .compact-orders-table td{font-size:13.5px}
body.wt .compact-open-button{font-size:13px}
body.wt .column-filter{font-size:12px}
body.wt .tt-status{font-size:13.5px}
body.wt .tt-documents span{font-size:13px}
body.wt .tt-documents strong{font-size:14px}
body.wt .tt-metrics span{font-size:13px}
body.wt .tt-metrics small{font-size:13px}
body.wt .tt-metrics strong{font-size:14px}
body.wt .ready-date{font-size:13.5px}
body.wt .compact-orders-table .export-head-labels th{font-size:13px}
body.wt .compact-orders-table .column-filter{font-size:13.5px}
body.wt .orders-v7-toolbar p{font-size:13.5px}
body.wt .orders-v7-statuses .status-filter{font-size:13px}
body.wt .orders-v7-statuses .status-filter b{font-size:12px}
body.wt .orders-v7-kpis span{font-size:12px}
body.wt .orders-v7-kpis strong{font-size:14px}
body.wt .orders-v7-table th{font-size:12px}
body.wt .orders-v7-table td{font-size:13px}
body.wt .tt-store-cell strong{font-size:13px}
body.wt .tt-store-cell small{font-size:12px}
body.wt .v7-fact{font-size:13px}
body.wt .v7-status{font-size:12px}
body.wt .ready-date-body>p{font-size:14px}
body.wt .ready-order-context strong{font-size:14px}
body.wt .ready-order-context span{font-size:13px}
body.wt .ready-date-field>span{font-size:13px}
body.wt .ready-quick-dates button{font-size:13px}
body.wt .ready-calendar-context strong{font-size:13.5px}
body.wt .ready-calendar-context span{font-size:12px}
body.wt .ready-calendar-nav strong{font-size:14px}
body.wt .ready-selected-date span{font-size:12px}
body.wt .ready-selected-date strong{font-size:13.5px}
body.wt .ready-calendar-bottom .secondary-button{font-size:13px}
body.wt .ready-calendar-bottom .primary-button{font-size:13px}
body.wt .orders-v10-filters label span{font-size:12px}
body.wt .orders-v10-filters select{font-size:13px}
body.wt .v10-modal-title strong{font-size:14px}
body.wt .v10-modal-intro{font-size:13px}
body.wt .v10-order-line{font-size:12px}
body.wt .v10-calendar-layout .ready-calendar-nav strong{font-size:13px}
body.wt .v10-date-side>span{font-size:12px}
body.wt .v10-date-value strong{font-size:13px}
body.wt .v10-date-side .ready-quick-dates button{font-size:12px}
body.wt .v10-actions button{font-size:12px}
body.wt .app-dialog-head span{font-size:12px}
body.wt .app-dialog-store strong{font-size:14px}
body.wt .app-dialog-store span{font-size:12px}
body.wt .app-dialog-docs>span{font-size:12px}
body.wt .app-dialog-docs b{font-size:13px}
body.wt .log-v11-head p{font-size:13.5px}
body.wt .log-v11-kpis span{font-size:12px}
body.wt .log-v11-table th{font-size:12px}
body.wt .log-v11-table td{font-size:13px}
body.wt .route-form-grid label>span{font-size:12px}
body.wt .vehicle-grid label>span{font-size:12px}
body.wt .route-form-grid input{font-size:13.5px}
body.wt .route-form-grid select{font-size:13.5px}
body.wt .vehicle-grid input{font-size:13.5px}
body.wt .vehicle-grid select{font-size:13.5px}
body.wt .route-inline button{font-size:13px}
body.wt .route-selected-head{font-size:13px}
body.wt .route-selected-block span strong{font-size:13px}
body.wt .route-selected-block span small{font-size:12px}
body.wt .route-selected-block em{font-size:13px}
body.wt .vehicle-modal-head p{font-size:13px}
body.wt .vehicle-card h4{font-size:14px}
body.wt .vehicle-grid textarea{font-size:13.5px}
body.wt .app-toast-v11{font-size:13.5px}
body.wt .tt-details-button{font-size:12px}
body.wt .tt-detail-head p{font-size:13px}
body.wt .tt-detail-info span{font-size:12px}
body.wt .tt-detail-document-meta span{font-size:12px}
body.wt .tt-detail-info strong{font-size:13.5px}
body.wt .tt-detail-info small{font-size:12px}
body.wt .tt-detail-docs-head>div:first-child strong{font-size:14px}
body.wt .tt-detail-docs-head>div:first-child span{font-size:12px}
body.wt .tt-detail-doc-tabs button{font-size:12px}
body.wt .tt-detail-document-meta strong{font-size:13px}
body.wt .tt-detail-table th{font-size:12px}
body.wt .tt-detail-table td{font-size:13px}
body.wt .tt-detail-no-data strong{font-size:14px}
body.wt .tt-detail-no-data span{font-size:13px}
body.wt .tt-detail-doc-tabs button b{font-size:12px}
body.wt .routes18-head p{font-size:13.5px}
body.wt .routes18-kpi span{font-size:13px}
body.wt .routes18-kpi small{font-size:12px}
body.wt .routes18-panel-title span{font-size:13px}
body.wt .routes18-table{font-size:13px}
body.wt .routes18-table td small{font-size:12px}
body.wt .route18-status{font-size:12px}
body.wt .routes18-total{font-size:13px}
body.wt .route18-steps span{font-size:13px}
body.wt .route18-selection-summary{font-size:13px}
body.wt .route18-tt-table{font-size:13px}
body.wt .route18-mode-title span{font-size:13.5px}
body.wt .route18-mode-card span{font-size:14px}
body.wt .route18-mode-card small{font-size:13px}
body.wt .route18-form-grid label>span{font-size:12px}
body.wt .masterdata-fields label span{font-size:13px}

/* =========================================================
   DESIGN SYSTEM v2 — WineTime dark
   Єдині токени, типографіка, контейнер із max-width, компоненти.
   Розміщено в кінці файлу: перекриває попередні шари без зміни їх.
   ========================================================= */
:root {
    --wt-bg: #080d12;
    --wt-panel: #0a1319;
    --wt-panel-2: #0d161d;
    --wt-field: #0a1218;
    --wt-line: #26333c;
    --wt-line-soft: rgba(255,255,255,.08);
    --wt-text: #eef3f6;
    --wt-muted: #8ea0ab;
    --wt-red: #a3711c;
    --wt-red-2: #724f14;
    --wt-accent: #f8bd53;
    --wt-ok: #34d399;
    --wt-warn: #f5b13d;
    --wt-radius: 10px;
    --fs-body: 14px;
    --fs-table: 13px;
    --fs-input: 14px;
    --fs-help: 12.5px;
    --fs-card: 15.5px;
    --fs-kicker: 11px;
    --fs-h1: 26px;
    --fs-h2: 24px;
    --content-max: none;
    --sidebar-w: 250px;
}

/* ---------- каркас: контрольована ширина ---------- */
body.wt { font-size: var(--fs-body); line-height: 1.4; color: var(--wt-text); }
body.wt .main { padding: 0 clamp(14px, 1.8vw, 32px) 30px; min-width: 0; }
body.wt .topbar,
body.wt .app-page { width: 100%; max-width: var(--content-max); margin-left: auto; margin-right: auto; }

/* ---------- типографіка ---------- */
body.wt .page-title h1 { font-size: var(--fs-h1); }
body.wt .page-title p { font-size: 13px; }
body.wt .date-info strong, body.wt .live-clock strong, body.wt .profile-text strong { font-size: 13.5px; }
body.wt .date-info span, body.wt .live-clock span, body.wt .profile-text span { font-size: 12px; }
body.wt .content-kicker, body.wt .modal-kicker, body.wt .hero-kicker { font-size: var(--fs-kicker); letter-spacing: 2px; }
body.wt .routes18-head h2, body.wt .orders-v7-toolbar h2, body.wt .content-heading h2, body.wt .export-documents-head h3 { font-size: var(--fs-h2); }
body.wt .routes18-head p, body.wt .orders-v7-toolbar p, body.wt .content-heading p { font-size: 13px; }
body.wt table td { font-size: var(--fs-table); }
body.wt table th { font-size: 12.5px; letter-spacing: .03em; }
body.wt table td small { font-size: 12px; }
body.wt label > span, body.wt .wt-field > span { font-size: 12.5px; letter-spacing: .01em; color: var(--wt-muted); font-weight: 600; text-transform: none; }
body.wt input, body.wt select, body.wt textarea { font-size: var(--fs-input); }
body.wt .primary-button, body.wt .secondary-button, body.wt .danger-button { font-size: 13.5px; min-height: 40px; }
body.wt .menu-item { font-size: 13.5px; }
body.wt .status-filter { font-size: 13px; }
body.wt .status-filter b { font-size: 12px; }
body.wt .routes18-kpi span, body.wt .orders-v7-kpis span { font-size: 12.5px; }
body.wt .routes18-kpi small { font-size: 12px; }
body.wt .routes18-kpi strong { font-size: 26px; }
body.wt .route18-status, body.wt .status-badge, body.wt .tt-status { font-size: 12px; }
body.wt .directory-search input { font-size: var(--fs-input); }
body.wt .directory-tab { font-size: 13.5px; }
body.wt .route18-steps span { font-size: 12.5px; }
body.wt .route18-mode-card strong { font-size: 16px; }
body.wt .route18-mode-card span, body.wt .route18-mode-card small { font-size: 13px; }
body.wt .routes18-panel-title strong { font-size: var(--fs-card); }
body.wt .routes18-panel-title span, body.wt .routes18-total { font-size: 12.5px; }
body.wt .app-toast-v11 { font-size: 13.5px; }
body.wt .modal-header h3, body.wt .route-modal-head h3 { font-size: 22px; }

/* ---------- поля вводу (єдиний вигляд) ---------- */
body.wt .directory-search,
body.wt .wt-field input:not([type=checkbox]),
body.wt .wt-field textarea,
body.wt .wt-sel-btn,
body.wt .wt-date-btn {
    min-height: 42px;
    border: 1px solid var(--wt-line);
    border-radius: 9px;
    background: var(--wt-field);
    color: var(--wt-text);
}
body.wt .wt-field input:not([type=checkbox]),
body.wt .wt-field textarea { width: 100%; padding: 0 13px; outline: none; }
body.wt .wt-field textarea { padding: 10px 13px; resize: vertical; min-height: 64px; font-family: inherit; }
body.wt .wt-field input::placeholder, body.wt .wt-field textarea::placeholder { color: rgba(255,255,255,.32); }
body.wt .wt-field input:focus, body.wt .wt-field textarea:focus,
body.wt .wt-select.is-open .wt-sel-btn, body.wt .wt-sel-btn:focus-visible,
body.wt .wt-date.is-open .wt-date-btn, body.wt .wt-date-btn:focus-visible { border-color: var(--wt-accent); box-shadow: 0 0 0 3px rgba(248,189,83,.14); outline: none; }
body.wt .wt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.wt .wt-field.span2 { grid-column: span 2; }
body.wt .wt-field .req, body.wt .req { color: var(--wt-accent); font-style: normal; }
body.wt .wt-hint { color: var(--wt-muted); font-size: 12px; }
body.wt .wt-err { color: #ff8095; font-size: 12px; }
body.wt .wt-field.has-err input, body.wt .wt-field.has-err textarea, body.wt .wt-field.has-err .wt-sel-btn { border-color: #d8324f; }

/* ---------- WTSelect ---------- */
.wt-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
.wt-select, .wt-date { position: relative; display: block; min-width: 0; width: 100%; }
.wt-sel-btn, .wt-date-btn {
    width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 12px; text-align: left; cursor: pointer;
    font-size: var(--fs-input); transition: border-color .15s, background .15s;
}
.wt-sel-btn:hover:not(:disabled), .wt-date-btn:hover { border-color: #3a4b57; background: #0c151c; }
.wt-sel-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.wt-sel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; padding: 4px 0; }
.wt-sel-text b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wt-text); }
.wt-sel-text small { font-size: 12px; color: var(--wt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-sel-btn.is-empty .wt-sel-text b { color: rgba(255,255,255,.4); font-weight: 400; }
.wt-sel-chev { color: var(--wt-muted); font-style: normal; font-size: 15px; transition: transform .15s; }
.wt-select.is-open .wt-sel-chev { transform: rotate(180deg); }
.wt-sel-clear { font-style: normal; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--wt-muted); font-size: 16px; line-height: 1; }
.wt-sel-clear:hover { color: #fff; background: rgba(255,255,255,.12); }
.wt-select.is-multi.has-value .wt-sel-btn { border-color: rgba(248,189,83,.55); }
.wt-invalid .wt-sel-btn, .wt-invalid .wt-date-btn, .wt-invalid input { border-color: #d8324f !important; background: rgba(120,15,40,.18) !important; }

.wt-pop {
    position: fixed; z-index: 40000; background: #0c141a; border: 1px solid #2c3a45; border-radius: 11px;
    box-shadow: 0 22px 60px rgba(0,0,0,.65); color: var(--wt-text); overflow: hidden;
}
.wt-sel-pop { display: flex; flex-direction: column; max-height: min(420px, 60vh); }
.wt-sel-search { display: flex; align-items: center; gap: 8px; margin: 8px; padding: 0 11px; height: 38px; border: 1px solid var(--wt-line); border-radius: 8px; background: var(--wt-field); }
.wt-sel-search[hidden] { display: none; }
.wt-sel-search span { color: var(--wt-muted); }
.wt-sel-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--wt-text); font-size: 14px; }
.wt-sel-list { overflow-y: auto; padding: 4px 6px 6px; flex: 1; }
.wt-sel-opt { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.wt-sel-opt + .wt-sel-opt { margin-top: 2px; }
.wt-sel-opt:hover, .wt-sel-opt.is-cur { background: rgba(255,255,255,.07); }
.wt-sel-opt.is-on { background: linear-gradient(90deg, rgba(163,113,28,.85), rgba(114,79,20,.75)); color: #fff; }
.wt-sel-opt.is-dis { opacity: .45; cursor: not-allowed; }
.wt-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wt-opt-text em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-opt-text small { font-size: 12px; color: var(--wt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-sel-opt.is-on .wt-opt-text small { color: rgba(255,255,255,.75); }
.wt-opt-tick { font-style: normal; color: #fff; }
.wt-check { width: 18px; height: 18px; border: 1.5px solid #4a5a66; border-radius: 5px; display: grid; place-items: center; font-size: 12px; color: #fff; flex: none; }
.wt-sel-opt.is-on .wt-check { background: var(--wt-red); border-color: var(--wt-accent); }
.wt-sel-none, .wt-sel-more { padding: 12px; text-align: center; color: var(--wt-muted); font-size: 13px; }
.wt-sel-foot { border-top: 1px solid var(--wt-line); padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #0a1218; }
.wt-sel-foot[hidden] { display: none; }
.wt-sel-actions { display: flex; gap: 6px; }
.wt-sel-actions button, .wt-sel-add { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-text); font-size: 13px; cursor: pointer; }
.wt-sel-actions button:hover, .wt-sel-add:hover { border-color: #3d505d; background: #15212a; }
.wt-sel-actions .wt-apply { margin-left: auto; background: linear-gradient(135deg, var(--wt-red), var(--wt-red-2)); border-color: rgba(248,192,90,.55); }
.wt-sel-add { text-align: left; color: #ff8095; border-style: dashed; }
/* стилізований scrollbar */
.wt-sel-list, .rd-body, .wt-dlg-body, body.wt .route-modal-body, body.wt .routes18-table-wrap, body.wt .orders-v7-table-wrap { scrollbar-width: thin; scrollbar-color: #5a431d #0a1218; }
.wt-sel-list::-webkit-scrollbar, .rd-body::-webkit-scrollbar, .wt-dlg-body::-webkit-scrollbar, body.wt .route-modal-body::-webkit-scrollbar { width: 9px; height: 9px; }
.wt-sel-list::-webkit-scrollbar-thumb, .rd-body::-webkit-scrollbar-thumb, .wt-dlg-body::-webkit-scrollbar-thumb, body.wt .route-modal-body::-webkit-scrollbar-thumb { background: #5a431d; border-radius: 6px; }
.wt-sel-list::-webkit-scrollbar-track, .rd-body::-webkit-scrollbar-track, .wt-dlg-body::-webkit-scrollbar-track { background: #0a1218; }

/* ---------- WTDate ---------- */
.wt-date-btn span.is-empty { color: rgba(255,255,255,.4); }
.wt-date-btn span { flex: 1; }
.wt-cal-ico { font-style: normal; color: var(--wt-muted); }
.wt-cal { width: 300px; padding: 12px; }
.wt-cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.wt-cal-head strong { flex: 1; text-align: center; font-size: 15px; }
.wt-cal-head button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-text); cursor: pointer; font-size: 15px; }
.wt-cal-head button:hover { border-color: var(--wt-accent); color: #fff; }
.wt-cal-dow, .wt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wt-cal-dow span { text-align: center; font-size: 12px; color: var(--wt-muted); padding: 4px 0; font-weight: 600; }
.wt-day { height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--wt-text); font-size: 13.5px; cursor: pointer; }
.wt-day.out { color: rgba(255,255,255,.28); }
.wt-day:hover { background: rgba(255,255,255,.08); }
.wt-day.today { border-color: rgba(248,189,83,.7); }
.wt-day.sel { background: linear-gradient(135deg, var(--wt-red), var(--wt-red-2)); color: #fff; font-weight: 700; border-color: var(--wt-accent); }
.wt-cal-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wt-line); }
.wt-cal-foot button { background: transparent; border: 0; color: #ff8095; font-size: 13.5px; cursor: pointer; padding: 4px 6px; }
.wt-cal-foot button:hover { color: #fff; }

/* ---------- меню дій ---------- */
.wt-menu { padding: 6px; min-width: 220px; }
.wt-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--wt-text); font-size: 14px; text-align: left; cursor: pointer; }
.wt-menu button i { width: 18px; text-align: center; font-style: normal; color: var(--wt-muted); }
.wt-menu button:hover { background: rgba(255,255,255,.07); }
.wt-menu button.danger { color: #ff8095; }
.wt-menu button.danger:hover { background: rgba(210,157,61,.18); }
.wt-menu hr { border: 0; border-top: 1px solid var(--wt-line); margin: 5px 2px; }

/* ---------- модальні вікна WT ---------- */
.wt-overlay { position: fixed; inset: 0; z-index: 30000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(2,7,12,.78); backdrop-filter: blur(8px); }
.wt-dialog { width: min(640px, 100%); max-height: calc(100vh - 36px); display: flex; flex-direction: column; border: 1px solid #8d631c; border-radius: 12px; background: #0c141a; box-shadow: 0 30px 90px rgba(0,0,0,.7); overflow: hidden; color: var(--wt-text); }
.wt-dialog.w420 { width: min(440px, 100%); }
.wt-dialog.w820 { width: min(820px, 100%); }
.wt-dialog.w1180 { width: min(1180px, 100%); }
.wt-dialog.w1240 { width: min(1240px, 100%); height: calc(100vh - 36px); }
.wt-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--wt-line); background: linear-gradient(90deg, rgba(108,75,18,.32), rgba(12,20,26,0)); }
.wt-dlg-head h3 { margin: 4px 0 0; font-size: 21px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wt-kicker { color: var(--wt-accent); font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.wt-x { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-muted); font-size: 20px; cursor: pointer; flex: none; }
.wt-x:hover { color: #fff; border-color: var(--wt-accent); }
.wt-dlg-body { padding: 16px 20px; overflow: auto; }
.wt-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--wt-line); background: #0a1218; }
.wt-form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wt-form .wt-form-grid { padding: 18px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; overflow: auto; }
.wt-form .wt-field.full { grid-column: 1 / -1; }
.danger-button { border: 1px solid rgba(210,157,61,.6); background: linear-gradient(135deg, #b17f28, #7b5718); color: #fff; border-radius: 9px; padding: 0 18px; cursor: pointer; font-weight: 600; }

/* ---------- форма створення маршруту ---------- */
body.wt .route18-modal { width: min(1180px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); }
body.wt .route-modal-head h3 { font-size: 22px; }
.wt-rf { display: flex; flex-direction: column; gap: 14px; }
.wt-rf-group { border: 1px solid var(--wt-line); border-radius: 11px; background: var(--wt-panel); padding: 14px 16px 16px; }
.wt-rf-group h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #ff8095; display: flex; align-items: center; gap: 10px; }
.wt-rf-group h4 em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--wt-muted); font-weight: 500; font-size: 13px; margin-left: auto; }
.wt-rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; align-items: start; }
.wt-rf-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wt-rf-grid .wt-field[hidden] { display: none; }
@media (max-width: 1100px) { .wt-rf-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wt-note { padding: 10px 12px; border: 1px solid rgba(248,189,83,.35); border-radius: 9px; background: rgba(120,15,40,.18); font-size: 13px; margin-bottom: 10px; }
.wt-mini-table { border: 1px solid var(--wt-line); border-radius: 9px; overflow: hidden; }
.wt-mini-head, .wt-mini-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 100px 90px 110px; gap: 10px; padding: 8px 12px; align-items: center; font-size: 13px; }
.wt-mini-head { background: #0d161d; color: var(--wt-muted); font-size: 12.5px; font-weight: 600; }
.wt-mini-row { border-top: 1px solid var(--wt-line); }
.wt-mini-row b { color: var(--wt-accent); font-size: 16px; }
.wt-mini-row small { display: block; color: var(--wt-muted); font-size: 12px; }
.wt-empty-row { text-align: center; color: var(--wt-muted); padding: 22px !important; }
.wt-muted { color: var(--wt-muted); }

/* ---------- маршрути: таблиця ---------- */
body.wt .routes18-toolbar, body.wt .wt-toolbar { display: grid; grid-template-columns: minmax(260px, 1.6fr) 170px 190px 190px 180px auto; gap: 10px; align-items: center; margin-bottom: 12px; }
body.wt #page-ttnreg .wt-toolbar { grid-template-columns: minmax(260px, 1.6fr) 170px 190px 190px auto; }
body.wt .routes18-table { width: 100%; table-layout: auto; }
body.wt .routes18-table th { padding: 11px 12px; white-space: nowrap; }
body.wt .routes18-table td { padding: 11px 12px; vertical-align: middle; }
body.wt .routes18-table td small { display: block; color: var(--wt-muted); margin-top: 2px; }
body.wt .routes18-table td.num, body.wt .routes18-table th:nth-child(4), body.wt .routes18-table th:nth-child(5), body.wt .routes18-table th:nth-child(6) { text-align: right; }
.rt-id { white-space: nowrap; }
.rt-link { background: none; border: 0; padding: 0; color: var(--wt-accent); font-weight: 700; font-size: 14px; cursor: pointer; text-align: left; }
.rt-link:hover { text-decoration: underline; }
.rt-dir strong { font-size: 13.5px; font-weight: 600; display: block; }
.rt-dir strong i { font-style: normal; color: var(--wt-accent); margin: 0 4px; }
.rt-dir small { font-size: 12px; }
.rt-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rt-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-text); white-space: nowrap; }
.rt-badge.inter { border-color: rgba(245,177,61,.5); color: #f5b13d; background: rgba(245,177,61,.08); }
.rt-badge.direct { border-color: rgba(52,211,153,.45); color: #34d399; background: rgba(52,211,153,.07); }
.rt-badge.parent { border-color: rgba(147,197,253,.4); color: #93c5fd; background: rgba(59,130,246,.08); }
.rt-badge.person { color: var(--wt-muted); font-weight: 500; }
.route18-status, .tr-status { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.route18-status.planned { background: rgba(147,197,253,.1); color: #93c5fd; border-color: rgba(147,197,253,.3); }
.route18-status.in_progress { background: rgba(245,177,61,.1); color: #f5b13d; border-color: rgba(245,177,61,.35); }
.route18-status.arrived { background: rgba(167,139,250,.12); color: #c4b5fd; border-color: rgba(167,139,250,.4); }
.route18-status.completed { background: rgba(52,211,153,.1); color: #34d399; border-color: rgba(52,211,153,.35); }
.tr-status.formed { background: rgba(147,197,253,.1); color: #93c5fd; border-color: rgba(147,197,253,.3); }
.tr-status.edited { background: rgba(245,177,61,.1); color: #f5b13d; border-color: rgba(245,177,61,.35); }
.tr-status.printed { background: rgba(52,211,153,.1); color: #34d399; border-color: rgba(52,211,153,.35); }
.route18-more { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-text); cursor: pointer; font-size: 16px; }
.route18-more:hover { border-color: var(--wt-accent); }
.rt-act { text-align: right; }

/* реєстр ТТН */
.ttnreg-act { display: flex; flex-wrap: wrap; gap: 5px; min-width: 250px; justify-content: flex-end; }
.ttnreg-act button:not(.route18-more) { height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-text); font-size: 12.5px; cursor: pointer; }
.ttnreg-act button:not(.route18-more):hover { border-color: var(--wt-accent); background: #1a1f28; }
.ttnreg-act .route18-more { width: 30px; height: 30px; }
.dtc { display: block; white-space: nowrap; }
.ttnreg-sum { font-size: 22px !important; }
.ttn-view { padding: 0 !important; flex: 1; min-height: 0; background: #2a2f36; }
.ttn-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- деталі маршруту ---------- */
.rd-dialog { height: min(900px, calc(100vh - 36px)); }
.rd-head .rd-actions, .wt-dlg-head .rd-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.rd-head .secondary-button, .rd-head .primary-button, .wt-dlg-head .secondary-button { min-height: 36px; padding: 0 14px; }
.rd-body { display: flex; flex-direction: column; gap: 14px; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 20px; }
.rd-grid div span { display: block; color: var(--wt-muted); font-size: 12px; margin-bottom: 2px; }
.rd-grid div strong { font-size: 14px; font-weight: 600; }
.rd-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.rd-totals div { border: 1px solid var(--wt-line); border-radius: 9px; background: var(--wt-panel); padding: 9px 12px; }
.rd-totals span { display: block; font-size: 12px; color: var(--wt-muted); }
.rd-totals b { font-size: 17px; }
.rd-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--wt-line); }
.rd-tabs button { padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--wt-muted); font-size: 13.5px; cursor: pointer; }
.rd-tabs button.on { color: #fff; border-bottom-color: var(--wt-accent); }
.rd-tt, .rd-doc { border: 1px solid var(--wt-line); border-radius: 10px; background: var(--wt-panel); margin-bottom: 8px; }
.rd-doc { margin: 8px 12px; background: var(--wt-panel-2); }
.rd-tt > summary, .rd-doc > summary { list-style: none; cursor: pointer; display: grid; align-items: center; gap: 14px; padding: 11px 14px; font-size: 13.5px; }
.rd-tt > summary { grid-template-columns: 34px minmax(0, 1fr) 90px 90px 110px auto; }
.rd-doc > summary { grid-template-columns: minmax(0, 1fr) 110px 90px 160px; font-size: 13px; }
.rd-tt > summary::-webkit-details-marker, .rd-doc > summary::-webkit-details-marker { display: none; }
.rd-tt > summary b { color: var(--wt-accent); font-size: 17px; }
.rd-tt-name small { display: block; color: var(--wt-muted); font-size: 12px; }
.rd-table-wrap { overflow-x: auto; padding: 0 12px 12px; }
.rd-table { width: 100%; border-collapse: collapse; }
.rd-table th, .rd-table td { padding: 7px 9px; border-top: 1px solid var(--wt-line); text-align: right; font-size: 13px; white-space: nowrap; }
.rd-table th { color: var(--wt-muted); font-size: 12px; font-weight: 600; }
.rd-table td.l, .rd-table th:nth-child(3) { text-align: left; white-space: normal; }
.rd-table td:first-child, .rd-table th:first-child { text-align: left; }
.rd-cons tr.grp td { background: #0d161d; }
.rd-cons tr.src td { color: var(--wt-muted); font-size: 12.5px; }
.rd-cons tfoot td { border-top: 2px solid var(--wt-line); font-weight: 700; }
.rd-none { padding: 6px 14px 12px; }
.rd-history { display: flex; flex-direction: column; gap: 8px; }
.rd-history span { padding: 9px 12px; border: 1px solid var(--wt-line); border-radius: 9px; background: var(--wt-panel); font-size: 13.5px; }
.rd-children { border: 1px solid var(--wt-line); border-radius: 11px; padding: 12px 16px; background: var(--wt-panel); }
.rd-children h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #ff8095; }
.rd-child { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--wt-line); align-items: center; }

/* ---------- Замовлення: компактна верхня частина ---------- */
body.wt #page-orders .wt-orders-bar { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: end; margin: 14px 0 10px; }
body.wt #page-orders .wt-orders-filters { grid-column: 1; display: flex; align-items: flex-end; gap: 10px; margin: 0; }
body.wt #page-orders .wt-orders-filters label { display: flex; flex-direction: column; gap: 5px; width: 240px; }
body.wt #page-orders .wt-orders-filters label > span { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--wt-muted); font-weight: 600; }
body.wt #page-orders .wt-orders-filters .secondary-button { min-height: 42px; }
body.wt #page-orders .orders-to-planning { grid-column: 2; grid-row: 1; min-height: 42px; }
body.wt #page-orders .wt-orders-statuses { grid-column: 1 / -1; margin: 0; gap: 8px; display: flex; flex-wrap: wrap; }
body.wt #page-orders .wt-orders-statuses .status-filter { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; }
body.wt #page-orders .wt-kpi-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
body.wt #page-orders .wt-kpi-strip > div { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; padding: 7px 12px; min-height: 0; height: auto; min-width: 0; }
body.wt #page-orders .wt-kpi-strip span { display: inline; font-size: 12.5px; white-space: nowrap; margin: 0; }
body.wt #page-orders .wt-kpi-strip strong { display: inline; font-size: 14.5px; margin-left: auto; overflow: visible; }
body.wt .orders-v7-table {  }
body.wt .orders-v7-table th { text-transform: none; font-size: 12.5px; letter-spacing: 0; padding: 0 8px; height: 36px; }
body.wt .orders-v7-table td { padding: 6px 8px; font-size: 13px; height: 48px; }
body.wt .orders-v7-table .tt-store-cell strong { font-size: 13px; }
body.wt .orders-v7-table .tt-store-cell small { font-size: 12px; }
body.wt .orders-v7-table th:nth-child(1) { width: 34px !important; }
body.wt .orders-v7-table th:nth-child(2) { width: 78px !important; }
body.wt .orders-v7-table th:nth-child(3) { width: 88px !important; }
body.wt .orders-v7-table th:nth-child(4) { width: 200px !important; }
body.wt .orders-v7-table th:nth-child(5) { width: 156px !important; }
body.wt .orders-v7-table th:nth-child(6) { width: 46px !important; }
body.wt .orders-v7-table th:nth-child(7) { width: 66px !important; }
body.wt .orders-v7-table th:nth-child(8) { width: 72px !important; }
body.wt .orders-v7-table th:nth-child(9) { width: 90px !important; }
body.wt .orders-v7-table th:nth-child(10) { width: 50px !important; }
body.wt .orders-v7-table th:nth-child(11) { width: 96px !important; }
body.wt .orders-v7-table th:nth-child(12) { width: 76px !important; }
body.wt .orders-v7-table th:nth-child(13) { width: 138px !important; }
body.wt .orders-v7-table th:nth-child(14) { width: 92px !important; }
body.wt .orders-v7-table .wt-select { min-width: 0; }
body.wt .orders-v7-table .wt-sel-btn { min-height: 34px; padding: 0 9px; font-size: 13px; }

/* ---------- Експорт: категоріальні фільтри ---------- */
.wt-cat-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px 14px; align-items: end; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--wt-line); border-radius: 11px; background: var(--wt-panel); }
.wt-cat-filters label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body.wt .column-filter { font-size: 13px; }
body.wt .export-selection-bar strong { font-size: 13.5px; }

/* ---------- Довідники ---------- */
body.wt .directory-tabs { flex-wrap: wrap; width: 100%; }
body.wt .directory-tab { min-width: 0; height: 44px; padding: 0 14px; }
body.wt .directory-tab strong { font-size: 12px; }
body.wt .dir-actions { width: 60px; text-align: right; }
.dir-edit { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-text); cursor: pointer; font-size: 15px; }
.dir-edit:hover { border-color: var(--wt-accent); }
body.wt .directory-table th, body.wt .directory-table td { font-size: var(--fs-table); padding: 10px 12px; }
body.wt .status-button { cursor: pointer; }

/* ---------- Модалка авто: єдині select ---------- */
body.wt .vehicle-modal .wt-select, body.wt .vehicle-grid .wt-select { width: 100%; }
body.wt .vehicle-modal label > span, body.wt .vehicle-grid label > span { font-size: 12.5px; }
body.wt .vehicle-modal input, body.wt .vehicle-modal textarea { font-size: 14px; }
body.wt .vehicle-modal .wt-sel-btn { min-height: 42px; }

/* ---------- адаптивність (ширина вікна включає sidebar 250px) ---------- */
@media (max-width: 1500px) {
    body.wt .routes18-toolbar, body.wt .wt-toolbar { grid-template-columns: minmax(200px, 1.3fr) 150px 165px 165px 150px auto; }
    body.wt #page-ttnreg .wt-toolbar { grid-template-columns: minmax(200px, 1.3fr) 150px 165px 165px auto; }
    body.wt #page-orders .wt-orders-filters label { width: 210px; }
}
@media (max-width: 1320px) {
    body.wt .routes18-toolbar, body.wt .wt-toolbar, body.wt #page-ttnreg .wt-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.wt .routes18-toolbar .directory-search, body.wt .wt-toolbar .directory-search { grid-column: 1 / -1; }
    body.wt .routes18-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wt-cat-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.wt #page-orders .wt-orders-bar { grid-template-columns: 1fr; }
    body.wt #page-orders .orders-to-planning { grid-column: 1; grid-row: auto; justify-self: start; }
    body.wt #page-orders .wt-orders-filters { flex-wrap: wrap; }
}
@media (max-width: 1100px) {
    body.wt .routes18-toolbar, body.wt .wt-toolbar, body.wt #page-ttnreg .wt-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wt-rf-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-tt > summary { grid-template-columns: 30px minmax(0, 1fr) auto; }
}

body.wt .route18-actions { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
body.wt .route18-actions > span { flex: 1; }
body.wt .route18-actions .secondary-button, body.wt .route18-actions .primary-button { flex: none; min-width: 120px; }
body.wt .route18-actions [hidden] { display: none !important; }

body.wt .routes18-table {  font-size: var(--fs-table); }
body.wt .routes18-table th:first-child, body.wt .routes18-table td:first-child { width: 44px; padding-right: 0; }
body.wt .ttnreg-table {  }
body.wt .ttnreg-table td.num { text-align: right; }
body.wt .ttnreg-table .ttnreg-act { min-width: 168px; max-width: 190px; justify-content: flex-start; }
body.wt .ttnreg-table td .tr-status + .dtc { margin-top: 6px; }
body.wt .ttnreg-table td:last-child { vertical-align: middle; }

/* компоненти WT не успадковують «дрібні» стилі старих span/label */
body.wt .wt-select span, body.wt .wt-date span, body.wt .wt-sel-text, body.wt .wt-pop span {
    text-transform: none; letter-spacing: normal; font-weight: inherit; color: inherit; font-size: inherit; margin: 0;
}
body.wt .wt-sel-text small, body.wt .wt-opt-text small { font-size: 12px; color: var(--wt-muted); }
body.wt .wt-sel-btn .wt-sel-text b { font-size: var(--fs-input); }

/* права частина таблиці замовлень завжди видима */
body.wt .orders-v7-table th:nth-child(13), body.wt .orders-v7-table td:nth-child(13) { position: sticky; right: 92px; z-index: 3; background: #0e161c; }
body.wt .orders-v7-table th:nth-child(14), body.wt .orders-v7-table td:nth-child(14) { position: sticky; right: 0; z-index: 3; background: #0e161c; box-shadow: -8px 0 12px rgba(0,0,0,.25); }
body.wt .orders-v7-table thead th:nth-child(13), body.wt .orders-v7-table thead th:nth-child(14) { background: #141c23; }
body.wt .orders-v7-table td.status-right, body.wt .orders-v7-table td.details-right { overflow: visible !important; }
body.wt .content-kicker, body.wt .modal-kicker, body.wt .hero-kicker { font-size: var(--fs-kicker); }
@media (max-width: 1400px) { body.wt .main { padding-left: 16px; padding-right: 16px; } }
body.wt .compact-orders-table th, body.wt .compact-orders-table .export-head-labels th { font-size: 12.5px !important; text-transform: none; letter-spacing: 0; }
body.wt .compact-orders-table td { font-size: 13px !important; }
body.wt .compact-orders-table .column-filter { font-size: 13px !important; }

/* ---------- пакетне формування ---------- */
.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 4px 0 12px; }
.pk-grid div span { display: block; color: var(--wt-muted); font-size: 12px; margin-bottom: 2px; }
.pk-grid div strong { font-size: 15px; }
.pk-grid div strong small { font-size: 12px; color: var(--wt-muted); font-weight: 500; }
.pk-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pk-list { border: 1px solid var(--wt-line); border-radius: 10px; overflow: hidden; margin-bottom: 12px; max-height: 220px; overflow-y: auto; }
.pk-list div { display: grid; grid-template-columns: 90px 100px minmax(0, 1fr) 70px 70px; gap: 10px; padding: 8px 12px; font-size: 13px; border-top: 1px solid var(--wt-line); }
.pk-list div:first-child { border-top: 0; }
.pk-list b { color: var(--wt-accent); }
.pk-fmt { display: flex; align-items: center; gap: 14px; margin: 6px 0 8px; }
.pk-lbl { color: var(--wt-muted); font-size: 13px; font-weight: 600; }
.pk-seg { display: inline-flex; gap: 6px; }
.pk-seg label { display: inline-flex; align-items: center; padding: 0 20px; height: 40px; border: 1px solid var(--wt-line); border-radius: 9px; background: #111b22; cursor: pointer; font-size: 14px; }
.pk-seg label.on { background: linear-gradient(135deg, var(--wt-red), var(--wt-red-2)); border-color: var(--wt-accent); color: #fff; }
.pk-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pk-hint { margin: 6px 0; font-size: 13px; }
body.wt .ttnreg-table .ttnreg-act { min-width: 250px; max-width: 290px; }
body.wt .ttnreg-table {  }
.ttnreg-addr { max-width: 240px; font-size: 13px; }
body.wt .export-clear-selection { min-height: 32px; padding: 0 12px; margin-left: 10px; font-size: 13px; }

.nw { white-space: nowrap; }
body.wt .ttnreg-table {  }
body.wt .ttnreg-table .ttnreg-act { display: grid; grid-template-columns: repeat(4, auto); gap: 5px; min-width: 0; max-width: none; justify-content: start; }
body.wt .ttnreg-table th:last-child, body.wt .ttnreg-table td:last-child { position: sticky; right: 0; z-index: 3; background: #0e161c; box-shadow: -10px 0 14px rgba(0,0,0,.28); }
body.wt .ttnreg-table thead th:last-child { background: #10202a; }
body.wt .ttnreg-table th, body.wt .ttnreg-table td { padding-left: 8px; padding-right: 8px; }
body.wt .ttnreg-table .ttnreg-act button { padding: 0 8px; font-size: 12px; }
body.wt .ttnreg-table {  }

/* ---------- «Замовлення»: читабельний «Факт пал.» та таблиця ---------- */
body.wt .orders-v7-table .v7-fact, body.wt .orders-v7-table .fact-pallet-input, body.wt .wt-num {
    width: 76px !important; min-width: 76px; max-width: 84px; height: 40px !important; margin: 0 !important; padding: 0 8px !important;
    font-size: 15.5px !important; font-weight: 600 !important; text-align: center !important; color: #fff !important;
    background: #0a1218 !important; border: 1px solid #3a4b57 !important; border-radius: 8px !important; box-sizing: border-box; outline: none; font-variant-numeric: tabular-nums;
}
body.wt .orders-v7-table .v7-fact:focus, body.wt .orders-v7-table .fact-pallet-input:focus, body.wt .wt-num:focus {
    border-color: var(--wt-accent) !important; box-shadow: 0 0 0 3px rgba(248,189,83,.2); background: #0c151c !important;
}
body.wt .orders-v7-table th:nth-child(8) { width: 100px !important; }
body.wt .orders-v7-table {  }
body.wt .orders-v7-table th { font-size: 13px; font-weight: 600; }
body.wt .orders-v7-table td { height: 50px; font-size: 14px; }
body.wt .orders-v7-table td:nth-child(6), body.wt .orders-v7-table td:nth-child(7), body.wt .orders-v7-table td:nth-child(9), body.wt .orders-v7-table td:nth-child(11) { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.wt .orders-v7-table .tt-store-cell strong { font-size: 14px; }
body.wt .orders-v7-table .tt-store-cell small { font-size: 12.5px; }
body.wt .orders-v7-table .tt-code { font-size: 14px; font-weight: 700; }
body.wt .orders-v7-table .docs-count-button, body.wt .orders-v7-table .order-open-button { min-height: 34px; font-size: 13px; }
body.wt .orders-v7-table .wt-sel-btn { font-size: 13px; }
body.wt .tt-status, body.wt .orders-v7-table .status-pill { font-size: 12.5px; }
body.wt input.wt-num { text-align: center; }

.wt-check-row { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.wt-check-row input { width: 18px; height: 18px; accent-color: #a3711c; }
.wt-check-row em { font-style: normal; font-size: 14px; color: var(--wt-text); }

/* ---------- Fresh: форма й список ---------- */
body.wt .vehicle-modal-backdrop { z-index: 35000 !important; }
.rt-badge.fresh { border-color: rgba(34,211,238,.45); color: #22d3ee; background: rgba(34,211,238,.07); }
.fr-dialog { height: min(900px, calc(100vh - 36px)); }
.fr-body { display: flex; flex-direction: column; gap: 14px; }
.fr-body .wt-num.wide { width: 100% !important; max-width: none; text-align: left !important; }
.fr-point { display: grid; grid-template-columns: 34px minmax(170px, 1.3fr) 130px minmax(250px, 1.7fr) 150px 96px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--wt-line); border-radius: 10px; background: var(--wt-panel-2); margin-bottom: 8px; }
.fr-point.has-mismatch { border-color: #d8324f; background: rgba(118,82,20,.14); }
.fr-letter { color: var(--wt-accent); font-size: 20px; text-align: center; }
.fr-pname strong { font-size: 14.5px; display: block; }
.fr-pname small { display: block; color: var(--wt-muted); font-size: 12.5px; margin-top: 2px; }
.fr-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fr-f > span { font-size: 12px; color: var(--wt-muted); white-space: nowrap; }
.fr-inputs { display: flex; gap: 10px; }
.fr-calc b { font-size: 15px; display: block; }
.fr-calc small { display: block; color: var(--wt-muted); font-size: 12.5px; }
.fr-calc em { display: block; font-style: normal; color: #ff8095; font-size: 12.5px; margin-top: 3px; }
.fr-ctl { display: flex; gap: 6px; justify-content: flex-end; }
.fr-ctl button { width: 30px; height: 34px; border-radius: 8px; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-text); cursor: pointer; }
.fr-ctl button:hover:not(:disabled) { border-color: var(--wt-accent); }
.fr-ctl button:disabled { opacity: .35; cursor: default; }
.fr-add { margin-top: 8px; }
.fr-empty { padding: 10px 4px; }
.fr-totals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fr-totals div { border: 1px solid var(--wt-line); border-radius: 10px; background: var(--wt-panel); padding: 10px 14px; }
.fr-totals div span { display: block; font-size: 12.5px; color: var(--wt-muted); }
.fr-totals div b { font-size: 18px; }
.fr-err { margin-right: auto; color: #ff8095; font-size: 13.5px; align-self: center; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border: 1px solid var(--wt-line); border-radius: 999px; background: #111b22; font-size: 12.5px; }
.fr-chip b { width: 20px; height: 20px; border-radius: 50%; background: var(--wt-red); display: grid; place-items: center; font-size: 11px; }
.fr-chip.more { padding: 2px 10px; color: var(--wt-muted); }
body.wt .fresh-table {  }
body.wt .base-table {  }
body.wt #page-fresh .routes18-head-actions { flex-wrap: wrap; justify-content: flex-end; }
body.wt #page-fresh .wt-toolbar { grid-template-columns: minmax(200px, 1.6fr) 170px 180px 190px auto; }
body.wt #page-routes .wt-toolbar { grid-template-columns: minmax(200px, 1.6fr) 170px 210px 200px auto; }
@media (max-width: 1320px) { body.wt #page-fresh .wt-toolbar, body.wt #page-routes .wt-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fr-point { grid-template-columns: 30px 1fr 120px; } .fr-inputs, .fr-calc, .fr-ctl { grid-column: 2 / -1; } .fr-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cd-badge { margin-left: 6px; }
body.wt .orders-v7-table td { height: 46px; padding-top: 4px; padding-bottom: 4px; }

body.wt .orders-v7-table th:nth-child(13) { width: 160px !important; }
body.wt .orders-v7-table {  }

/* ---------- широка робоча область: без штучного max-width ---------- */
:root { --content-max: none; }
body.wt .topbar, body.wt .app-page { max-width: none !important; width: 100%; margin-left: 0; margin-right: 0; }
body.wt .main { flex: 1 1 auto; width: auto; min-width: 0; padding-left: clamp(16px, 1.6vw, 40px); padding-right: clamp(16px, 1.6vw, 40px); }
body.wt .routes18-toolbar, body.wt .wt-toolbar { grid-template-columns: minmax(260px, 620px) 170px 200px 200px 180px auto; justify-content: start; }
body.wt #page-ttnreg .wt-toolbar, body.wt #page-fresh .wt-toolbar { grid-template-columns: minmax(260px, 620px) 170px 200px 200px auto; }
body.wt #page-routes .wt-toolbar { grid-template-columns: minmax(260px, 620px) 170px 220px 220px auto; }
body.wt .wt-cat-filters { grid-template-columns: repeat(4, minmax(160px, 360px)) auto; justify-content: start; }
body.wt #page-orders .wt-orders-filters label { width: 260px; }
body.wt .routes18-kpis { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 1440px) {
    body.wt .routes18-toolbar, body.wt .wt-toolbar, body.wt #page-ttnreg .wt-toolbar, body.wt #page-fresh .wt-toolbar, body.wt #page-routes .wt-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.wt .wt-cat-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) { body.wt .routes18-toolbar, body.wt .wt-toolbar, body.wt #page-ttnreg .wt-toolbar, body.wt #page-fresh .wt-toolbar, body.wt #page-routes .wt-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 2200px) { body.wt .routes18-table td, body.wt .routes18-table th { padding-left: 16px; padding-right: 16px; } }

/* ---------- Маршрут NEW: загальний вантаж, деталізація ---------- */
.fr-point.is-general { grid-template-columns: 34px minmax(170px, 1.3fr) 160px minmax(120px, .6fr) 160px 130px; }
.fr-general { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(220px, 2fr) 130px 180px minmax(160px, 1fr); gap: 10px 14px; align-items: end; padding-top: 10px; border-top: 1px dashed var(--wt-line); }
body.wt .fr-general .wt-num { width: 100% !important; max-width: none !important; min-width: 0; }
body.wt .fr-general .wt-num.money { text-align: right !important; padding-right: 12px !important; }
.wt-txt { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #3a4b57; border-radius: 8px; background: #0a1218; color: #fff; font-size: 14px; outline: none; }
.wt-txt:focus { border-color: var(--wt-accent); box-shadow: 0 0 0 3px rgba(248,189,83,.2); }
.fr-general input:disabled { opacity: .7; }
.fr-chk { display: flex; align-items: center; gap: 8px; grid-column: 1 / 3; font-size: 13.5px; cursor: pointer; }
.fr-chk input { width: 18px; height: 18px; accent-color: #a3711c; }
.fr-xl { min-height: 36px; padding: 0 14px; }
.fr-detst { align-self: center; font-size: 13px; }
.fr-vat { grid-column: 1 / -1; font-size: 13px; color: var(--wt-muted); }
.fr-vat b { color: var(--wt-text); }
.fr-ok { color: #34d399; } .fr-need { color: #f5b13d; }
.fr-legal-note { align-self: end; }
.fr-detrow { display: grid; grid-template-columns: 34px minmax(160px, 1fr) minmax(220px, 1.2fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--wt-line); }
.fr-detrow:first-child { border-top: 0; }
.fr-point, .fr-point.is-general { grid-template-columns: 34px minmax(170px, 1.3fr) 170px minmax(250px, 1.7fr) 150px 130px; }

/* ---------- Dashboard ---------- */
.dash-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 14px 0 14px; padding: 12px 14px; border: 1px solid var(--wt-line); border-radius: 11px; background: var(--wt-panel); }
.dash-period { display: flex; gap: 10px; align-items: center; }
.dash-period .wt-select { width: 190px; } .dash-period .wt-date { width: 160px; }
.dash-filters > .wt-select { width: 220px; }
.dash-filters .primary-button, .dash-filters .secondary-button { min-height: 42px; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dk { border: 1px solid var(--wt-line); border-radius: 12px; background: linear-gradient(180deg, rgba(163,113,28,.16), rgba(10,19,25,.9)); padding: 16px 20px; min-width: 0; }
.dk span { display: block; color: var(--wt-muted); font-size: 13px; font-weight: 600; }
.dk strong { display: block; font-size: 30px; margin-top: 6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dk strong small { font-size: 15px; color: var(--wt-muted); font-weight: 500; }
.dk em { display: block; font-style: normal; font-size: 12px; color: var(--wt-muted); margin-top: 6px; }
.dash-kpis2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.dk2 { border: 1px solid var(--wt-line); border-radius: 10px; background: var(--wt-panel); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dk2 span { color: var(--wt-muted); font-size: 12.5px; } .dk2 b { font-size: 17px; font-variant-numeric: tabular-nums; }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dash-card { border: 1px solid var(--wt-line); border-radius: 12px; background: var(--wt-panel); padding: 14px 16px; min-width: 0; }
.dash-card h3 { margin: 0 0 10px; font-size: 15.5px; }
.dash-grid .c8 { grid-column: span 8; } .dash-grid .c4 { grid-column: span 4; }
.ch { width: 100%; min-height: 240px; overflow: hidden; }
.ch svg { display: block; }
.ax-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; } .ax-t { fill: #8ea0ab; font-size: 12px; }
.bar { transition: opacity .12s; } .bar:hover { opacity: .78; }
.ln { fill: none; stroke: #f59e0b; stroke-width: 2.5; } .dot { fill: #0a1319; stroke: #f59e0b; stroke-width: 2.5; } .dot:hover { fill: #f59e0b; }
.dash-empty { display: grid; place-items: center; min-height: 200px; color: var(--wt-muted); font-size: 14px; text-align: center; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--wt-muted); }
.dash-legend span { display: inline-flex; align-items: center; gap: 6px; } .dash-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .dash-legend b { color: var(--wt-text); }
.dash-carr { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.ch-donut { display: grid; place-items: center; min-height: 190px; }
.donut .seg { transition: opacity .12s; } .donut .seg:hover { opacity: .8; }
.dn-big { fill: #fff; font-size: 26px; font-weight: 700; } .dn-sub { fill: #8ea0ab; font-size: 12px; }
.dash-table-wrap { overflow: auto; max-height: 360px; }
.dash-table th, .dash-table td { padding: 8px 10px; font-size: 13px; }
.dash-table td.l, .dash-table th.l { text-align: left; }
.dash-last-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .dash-last-head h3 { margin: 0; }
.dash-tip { position: fixed; z-index: 50000; pointer-events: none; background: #0c141a; border: 1px solid #2c3a45; border-radius: 9px; box-shadow: 0 14px 40px rgba(0,0,0,.6); padding: 9px 12px; font-size: 13px; line-height: 1.45; color: var(--wt-text); max-width: 320px; }
@media (max-width: 1500px) { .dash-kpis2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid .c8, .dash-grid .c4 { grid-column: span 12; } }
@media (min-width: 1700px) { .dash-kpis2 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-carr { grid-template-columns: 1fr; } }
.rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.rc-preview div { border: 1px solid var(--wt-line); border-radius: 10px; background: var(--wt-panel); padding: 10px 14px; }
.rc-preview span { display: block; font-size: 12.5px; color: var(--wt-muted); } .rc-preview b { font-size: 17px; }

/* ---------- Маршрут NEW: таблиця точок, масова панель, мультивибір WT ---------- */
.fr-table-wrap { overflow-x: auto; border: 1px solid var(--wt-line); border-radius: 10px; }
.fr-table { width: 100%; border-collapse: collapse;  }
.fr-table th { text-align: left; padding: 9px 10px; background: #0d161d; color: var(--wt-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fr-table td { padding: 7px 10px; border-top: 1px solid var(--wt-line); vertical-align: middle; font-size: 13.5px; }
.fr-table .c-chk { width: 36px; text-align: center; } .fr-table .c-chk input, .sm-row input { width: 18px; height: 18px; accent-color: #a3711c; cursor: pointer; }
.fr-table .c-name { min-width: 230px; display: flex; align-items: center; gap: 10px; border-top: 0; } .fr-table tr.fr-row > td.c-name { display: table-cell; }
.fr-table .c-name .fr-letter { display: inline-block; vertical-align: top; margin-right: 8px; } .fr-table .c-name .fr-pname { display: inline-block; max-width: 300px; vertical-align: top; }
.fr-table .c-addr { min-width: 220px; max-width: 300px; } .fr-table .c-addr small { color: var(--wt-muted); font-size: 12.5px; }
.fr-table .c-mode { width: 170px; } .fr-table .c-fresh, .fr-table .c-frozen, .fr-table .c-total { width: 96px; text-align: center; }
.fr-table .c-weight, .fr-table .c-amount { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.fr-table .dim { color: rgba(255,255,255,.28); }
body.wt .fr-table .wt-num { width: 84px !important; min-width: 84px; } body.wt .fr-table .wt-num.wide { width: 128px !important; max-width: none !important; text-align: right !important; }
.fr-table tr.fr-row:hover td { background: rgba(255,255,255,.025); } .fr-table tr.fr-extra td { border-top: 0; padding-top: 0; }
.fr-table .fr-general { grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) auto auto; padding: 4px 0 8px; border-top: 0; }
.fr-bulk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 10px; padding: 10px 14px; border: 1px solid rgba(248,189,83,.5); border-radius: 10px; background: rgba(118,82,20,.2); }
.fr-bulk > b { align-self: center; font-size: 14px; } .fr-bulk .fr-f { min-width: 120px; } .fr-bulk .fr-f .wt-select { min-width: 150px; }
.fr-bulk .primary-button, .fr-bulk .secondary-button { min-height: 40px; }
.sm-dialog { height: min(760px, calc(100vh - 36px)); } .sm-body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.sm-search { width: 100%; } .sm-list { overflow: auto; flex: 1; border: 1px solid var(--wt-line); border-radius: 10px; }
.sm-row { display: grid; grid-template-columns: 26px 78px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--wt-line); cursor: pointer; }
.sm-row:first-child { border-top: 0; } .sm-row:hover:not(.dis) { background: rgba(255,255,255,.05); } .sm-row.dis { opacity: .55; cursor: not-allowed; }
.sm-row b { color: var(--wt-accent); } .sm-row small { display: block; color: var(--wt-muted); font-size: 12.5px; } .sm-row em { font-style: normal; color: #34d399; font-size: 12.5px; white-space: nowrap; }
.sm-foot { justify-content: flex-end; align-items: center; } .sm-foot b { margin-right: auto; font-size: 15px; }

/* ---------- Нормативи вантажу ---------- */
.norms-panel { padding: 20px 22px; }
.norms-head h3 { margin: 0 0 4px; font-size: 20px; } .norms-head p { margin: 0 0 16px; color: var(--wt-muted); font-size: 13.5px; max-width: 900px; }
.norms-grid { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.norms-row { display: grid; grid-template-columns: 140px minmax(170px, 1fr) minmax(220px, 1.2fr) minmax(180px, 1fr); gap: 14px; align-items: start; }
.norms-row b { font-size: 16px; align-self: center; }
.norms-th { color: var(--wt-muted); font-size: 12.5px; font-weight: 600; }
body.wt .norms-row .wt-num.wide { width: 100% !important; max-width: none !important; text-align: right !important; }
.norms-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; max-width: 980px; }
.norms-foot .fr-err { margin-right: auto; }
.fr-norm { display: block; margin-top: 4px; font-size: 11.5px; color: var(--wt-muted); line-height: 1.35; }
.fr-norm .fr-norm-l { display: block; white-space: nowrap; }
.fr-bulk-norm { align-self: center; margin: 0; }
body.wt .fr-table .c-mode { width: 210px; }
body.wt input.wt-invalid { border-color: #d8324f !important; background: rgba(120,15,40,.18) !important; }
.dash-kpis2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }

/* ---------- Комбінований master route: ALCO, ТТН, деталі ---------- */
.fr-table .c-alco { min-width: 150px; text-align: center; } .fr-table .c-alco > b { display: block; font-size: 14px; }
.fr-chip.alco { padding: 2px 6px 2px 3px; margin-top: 4px; font-size: 11.5px; white-space: nowrap; } .fr-chip.alco b { background: #f59e0b; color: #1a1205; }
.fr-chip.alco i { font-style: normal; margin-left: 6px; color: var(--wt-muted); cursor: pointer; font-size: 14px; line-height: 1; } .fr-chip.alco i:hover { color: #f8bd53; }
.fr-table .c-ttn { min-width: 190px; } .fr-skip { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.fr-skip input { width: 16px; height: 16px; accent-color: #a3711c; } .fr-table .c-ttn .wt-select { margin-top: 6px; min-width: 180px; } .fr-table .c-ttn .wt-txt { margin-top: 6px; height: 34px; font-size: 13px; }
.fr-table tr.is-skip td { background: rgba(245,177,61,.045); }
.fr-bulk-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.14); margin: 0 4px; }
.al-filters { display: grid; grid-template-columns: minmax(200px, 1.4fr) 150px repeat(4, minmax(120px, 1fr)); gap: 10px; align-items: end; }
.al-list { min-height: 260px; } .al-row { display: grid; grid-template-columns: 26px 92px minmax(180px, 1.3fr) 130px minmax(200px, 1.6fr) 130px 90px 110px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--wt-line); font-size: 13.5px; cursor: pointer; }
.al-row.al-head { position: sticky; top: 0; background: #0d161d; color: var(--wt-muted); font-size: 12.5px; font-weight: 600; cursor: default; z-index: 2; border-top: 0; }
.al-row:hover:not(.dis):not(.al-head) { background: rgba(255,255,255,.05); } .al-row.dis { opacity: .6; cursor: not-allowed; }
.al-row input { width: 18px; height: 18px; accent-color: #a3711c; } .al-row b { color: var(--wt-accent); } .al-row small { display: block; color: var(--wt-muted); font-size: 12px; } .al-row .bad { font-style: normal; color: #f5b13d; }
.al-row .ad { color: var(--wt-muted); font-size: 12.5px; }
.rd-sec { margin: 6px 0 -4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #ff8095; }
.rd-table td small { display: block; color: var(--wt-muted); font-size: 12px; }
@media (max-width: 1440px) { .al-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .al-row { grid-template-columns: 26px 80px minmax(150px, 1fr) 100px minmax(140px, 1fr) 110px; } .al-row > span:nth-child(7), .al-row > span:nth-child(8) { display: none; } }

/* ---------- статуси NEW, «Сьогодні», завдання, витрати, попередження, шаблони, журнал ---------- */
.route18-status.confirmed { background: rgba(56,189,248,.14); color: #7dd3fc; border-color: rgba(56,189,248,.4); }
.route18-status.cancelled { background: rgba(148,163,184,.14); color: #cbd5e1; border-color: rgba(148,163,184,.4); text-decoration: line-through; }
.dash-today { margin: 12px 0 4px; }
.tt-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; } .tt-head h3 { margin: 0; font-size: 17px; } .tt-head small { color: var(--wt-muted); }
.tt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border: 1px solid var(--wt-line); border-radius: 12px; background: var(--wt-panel); color: var(--wt-text); cursor: pointer; text-align: left; transition: border-color .15s, transform .1s; }
.tt:hover { border-color: var(--wt-accent); transform: translateY(-1px); } .tt span { font-size: 14px; color: var(--wt-muted); font-weight: 600; } .tt strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.tt.t-plan strong { color: #7dd3fc; } .tt.t-run strong { color: #f59e0b; } .tt.t-done strong { color: #34d399; } .tt.t-bad strong { color: #ff5a78; } .tt.t-bad { border-color: rgba(249,196,103,.45); }
@media (max-width: 900px) { .tt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fr-task { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--wt-line); border-radius: 10px; background: var(--wt-panel-2); margin-bottom: 8px; }
.fr-task > b { color: var(--wt-accent); text-align: center; font-size: 18px; } .fr-task small { display: block; color: var(--wt-muted); font-size: 12.5px; margin-top: 2px; }
.fr-extra-row { display: grid; grid-template-columns: 200px 160px minmax(180px, 1fr) 36px; gap: 10px; align-items: center; margin-bottom: 8px; }
.fr-x { width: 34px; height: 36px; border-radius: 8px; border: 1px solid var(--wt-line); background: #111b22; color: var(--wt-text); cursor: pointer; } .fr-x:hover { border-color: var(--wt-accent); }
.fr-costline { margin-left: 14px; font-size: 13.5px; color: var(--wt-muted); } .fr-costline b { color: var(--wt-text); }
.fr-warn { display: flex; flex-direction: column; gap: 6px; } .fr-warn:empty { display: none; }
.fr-warn-item { padding: 8px 12px; border: 1px solid rgba(245,177,61,.5); border-radius: 9px; background: rgba(245,177,61,.08); color: #f8d38a; font-size: 13.5px; }
.tpl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--wt-line); } .tpl-row:first-child { border-top: 0; } .tpl-row small { display: block; color: var(--wt-muted); font-size: 12.5px; }
body.wt .audit-table {  } .audit-table td { font-size: 13px; vertical-align: top; } .audit-table td small { display: block; color: var(--wt-muted); } .nw { white-space: nowrap; }
.au-old { color: #f59aa7; } .au-new { color: #86e3b3; }
.dir-del { margin-left: 6px; } .dir-del:hover { border-color: #d8324f !important; }
body.wt #page-audit .wt-toolbar { grid-template-columns: minmax(260px, 620px) 170px 170px 220px auto; justify-content: start; }
.fr-letter { font-size: 13px !important; white-space: nowrap; min-width: 44px; text-align: left !important; }
.fr-table .c-name .fr-letter { margin-right: 10px; }

/* ---------- 118: критичні значення в таблицях не обрізаються (без ellipsis): перенос рядка, адаптивна ширина ---------- */
body.wt .orders-v7-table td, body.wt .compact-orders-table td, body.wt .log-v11-table td,
body.wt .tt-store-cell strong, body.wt .tt-store-cell small, body.wt .routes18-direction strong, body.wt .routes18-direction small,
body.wt .tt-detail-info strong, body.wt .tt-detail-info small, body.wt .tt-detail-document-meta strong, body.wt .orders-v7-kpis strong {
    overflow: visible !important; text-overflow: clip !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal;
}
body.wt .orders-v7-table td, body.wt .compact-orders-table td { vertical-align: middle; line-height: 1.3; }
/* числові та ідентифікаційні колонки — без переносу цифр, ширина під вміст */
body.wt .orders-v7-table td:nth-child(2), body.wt .orders-v7-table td:nth-child(3), body.wt .orders-v7-table td:nth-child(6), body.wt .orders-v7-table td:nth-child(7), body.wt .orders-v7-table td:nth-child(8), body.wt .orders-v7-table td:nth-child(9),
body.wt .compact-orders-table td:nth-child(2), body.wt .compact-orders-table td:nth-child(3), body.wt .compact-orders-table td:nth-child(4), body.wt .compact-orders-table td:nth-child(8), body.wt .compact-orders-table td:nth-child(9), body.wt .compact-orders-table td:nth-child(10), body.wt .compact-orders-table td:nth-child(11),
body.wt .money-one-line, body.wt td.num { white-space: nowrap !important; overflow-wrap: normal; }
body.wt .orders-v7-table td:nth-child(4) { min-width: 220px; } body.wt .orders-v7-table td:nth-child(5) { min-width: 150px; }
body.wt .compact-orders-table td:nth-child(5), body.wt .compact-orders-table td:nth-child(6), body.wt .compact-orders-table td:nth-child(7) { min-width: 170px; }
body.wt .routes18-table td, body.wt .rd-table td, body.wt .dash-table td, body.wt .audit-table td { overflow-wrap: anywhere; }
body.wt .routes18-table td.num, body.wt .rd-table td:not(.l) { overflow-wrap: normal; }
/* 123: захист від глобального горизонтального overflow */
body.wt .main, body.wt .app-page, body.wt .app-page > *, body.wt .routes18-panel, body.wt .dash-card, body.wt .dash-grid > * { min-width: 0; }
body.wt .app-page { max-width: 100%; }
body.wt .routes18-table-wrap, body.wt .dash-table-wrap, body.wt .rd-table-wrap, body.wt .fr-table-wrap, body.wt .orders-v7-table-wrap { max-width: 100%; }

/* ---------- 116: hero — колеса фури повністю видно, знак вище (зображення images/hero-truck.png не змінюється) ----------
   Налаштування без правки картинки: --hero-h (висота), --hero-size, --hero-pos (позиція фону). */
body.wt .hero {
    --hero-h: clamp(225px, 13.5vw, 360px);
    --hero-size: 100% auto;
    --hero-pos: center bottom;
    height: var(--hero-h) !important;
    background-size: var(--hero-size) !important;
    background-position: var(--hero-pos) !important;
    background-repeat: no-repeat !important;
}
body.wt .hero .hero-content { top: clamp(18px, 1.6vw, 34px); }
body.wt .hero .hero-tags { top: clamp(18px, 1.6vw, 34px); }

/* ---------- 122: нова аналітика ---------- */
.dash-kpis7 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
.dash-kpis7 .dk strong { font-size: 26px; } .dash-kpis7 .dk { padding: 14px 16px; }
.dash-grid .c6 { grid-column: span 6; }
.dash-card h3 em { font-style: normal; font-size: 12px; color: var(--wt-muted); font-weight: 500; margin-left: 8px; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .dash-card-head h3 { margin: 0; }
.seg-toggle { display: inline-flex; border: 1px solid var(--wt-line); border-radius: 9px; overflow: hidden; }
.seg-toggle button { background: #111b22; color: var(--wt-muted); border: 0; padding: 7px 14px; font-size: 13px; cursor: pointer; border-left: 1px solid var(--wt-line); }
.seg-toggle button:first-child { border-left: 0; } .seg-toggle button.on { background: linear-gradient(135deg, var(--wt-red), var(--wt-red-2)); color: #fff; }
.st-list { display: flex; flex-direction: column; gap: 4px; }
.st-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(80px, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.st-row:hover { background: rgba(255,255,255,.04); border-color: var(--wt-line); }
.st-name strong { display: block; font-size: 13.5px; overflow-wrap: anywhere; } .st-name small { display: block; color: var(--wt-muted); font-size: 12px; }
.st-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; } .st-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #a3711c, #f8bd53); }
.st-val { font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-val small { color: var(--wt-muted); font-weight: 500; font-size: 11.5px; }
.st-more { margin: 8px 0 0 10px; align-self: flex-start; }
.st-tools { display: flex; gap: 8px; align-items: center; } .st-tools input { height: 36px; padding: 0 12px; border: 1px solid #3a4b57; border-radius: 8px; background: #0a1218; color: #fff; font-size: 13px; width: 190px; }
.st-tools .wt-select { width: 190px; }
.dash-table tr.clickable { cursor: pointer; } .dash-table tr.clickable:hover td { background: rgba(255,255,255,.04); }
.drill-ch { margin: 8px 0 12px; min-height: 250px; }
@media (max-width: 1500px) { .dash-grid .c6 { grid-column: span 12; } }
.dash-kpis7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.dash-kpis7 .dk strong { font-size: clamp(20px, 1.45vw, 26px); overflow-wrap: anywhere; } .dash-kpis7 .dk span { font-size: 12.5px; }
@media (max-width: 1450px) { .dash-kpis7 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 1000px) { .dash-kpis7 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
body.wt .orders-v7-table td:nth-child(4) { min-width: 300px; } body.wt .orders-v7-table td:nth-child(5) { min-width: 170px; }
body.wt .orders-v7-table {  }
body.wt .tt-store-cell strong { font-size: 13.5px !important; } body.wt .tt-store-cell small { font-size: 12px !important; }

/* ---------- 116 (v2): hero — зображення НІКОЛИ не кропається: масштаб «contain» + висота від пропорцій картинки ----------
   --hero-ar виставляється скриптом із реальних розмірів images/hero-truck.png (запасне значення 6.2).
   Висота hero = ширина / --hero-ar, але не менше 225px (текст) і не більше 340px; якщо контейнер ширший за пропорцію
   картинки — вона вписується по висоті й центрується (запас зверху/знизу/з боків), а не збільшується з обрізанням. */
body.wt .hero {
    --hero-ar: 6.2;
    height: auto !important;
    aspect-ratio: var(--hero-ar) !important;
    min-height: 225px !important;
    max-height: 340px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #070b0f !important;
}
body.wt .hero { width: 100% !important; box-sizing: border-box; padding-block: clamp(8px, 1.1vw, 18px); background-origin: content-box !important; background-clip: padding-box; }
/* =========================================================
   THEME v3 — MASTER THEME (макет 09): premium dark navy / graphite + amber-gold
   Єдина палітра для всього застосунку. Бізнес-логіку не змінює.
   ========================================================= */
:root {
    --wt-bg: #000e17; --wt-panel: #021320; --wt-panel-2: #03182a; --wt-field: #031622; --wt-line: #0f2b3d; --wt-line-soft: rgba(120,170,200,.10);
    --wt-text: #f2f6f9; --wt-muted: #8fa7b8;
    --wt-red: #a86f1f; --wt-red-2: #c98a2b; --wt-accent: #f2b544; --wt-amber: #f2b544; --wt-amber-d: #b87a25;
    --wt-ok: #22c07a; --wt-warn: #f2b544; --wt-danger: #e5484d;
    --wt-radius: 10px; --wt-radius-s: 8px; --wt-ctl-h: 40px;
}
body, body.wt { background: radial-gradient(1200px 500px at 60% -10%, rgba(30,70,100,.28), transparent 70%), #000e17 !important; color: var(--wt-text); }
body.wt .main { background: transparent !important; }
/* поверхні */
body.wt .routes18-panel, body.wt .dash-card, body.wt .directory-panel, body.wt .wt-cat-filters, body.wt .dash-filters, body.wt .routes18-toolbar, body.wt .wt-toolbar,
body.wt .routes18-kpi, body.wt .dk, body.wt .dk2, body.wt .export-panel, body.wt .upload-card, body.wt .orders-v7-panel { background: linear-gradient(180deg, #03192a, #021320) !important; border: 1px solid var(--wt-line) !important; border-radius: 12px; box-shadow: none; }
body.wt .dk { background: linear-gradient(180deg, #04202f, #021523) !important; }
/* кнопки: primary = теплий amber-градієнт, secondary = темна з amber-контуром на hover, danger = червона */
body.wt .primary-button { background: linear-gradient(180deg, #c98a2b, #8f5f1a) !important; border: 1px solid #e0a24a !important; color: #fff !important; border-radius: var(--wt-radius-s); min-height: var(--wt-ctl-h); box-shadow: 0 0 0 0 transparent; }
body.wt .primary-button:hover:not(:disabled) { box-shadow: 0 0 18px rgba(242,181,68,.28); filter: brightness(1.06); }
body.wt .primary-button:disabled { opacity: .45; }
body.wt .secondary-button { background: #03182a !important; border: 1px solid #143548 !important; color: var(--wt-text) !important; border-radius: var(--wt-radius-s); min-height: var(--wt-ctl-h); }
body.wt .secondary-button:hover:not(:disabled) { border-color: var(--wt-amber-d) !important; color: #ffe2a8 !important; }
body.wt .secondary-button:disabled { opacity: .45; }
body.wt .danger-button, body.wt button.danger { background: #3a1116 !important; border: 1px solid #7d2229 !important; color: #ff9aa0 !important; }
/* поля */
body.wt input:not([type=checkbox]):not([type=radio]), body.wt select, body.wt textarea, body.wt .wt-select .wt-sel-btn, body.wt .wt-date .wt-date-btn { background: var(--wt-field) !important; border: 1px solid #12324a !important; color: var(--wt-text) !important; border-radius: var(--wt-radius-s); }
body.wt input:focus, body.wt textarea:focus, body.wt .wt-select.open .wt-sel-btn, body.wt .wt-sel-btn:focus { border-color: var(--wt-amber) !important; box-shadow: 0 0 0 3px rgba(242,181,68,.16) !important; outline: none; }
body.wt input[type=checkbox], body.wt input[type=radio] { accent-color: #d9982e !important; }
/* таблиці */
body.wt table thead th, body.wt .routes18-table th, body.wt .rd-table th, body.wt .orders-v7-table th, body.wt .compact-orders-table th { background: #021b2a !important; color: #9fb6c6 !important; border-bottom: 1px solid var(--wt-line) !important; }
body.wt table tbody tr td { border-color: rgba(120,170,200,.08) !important; }
body.wt table tbody tr:hover td { background: rgba(242,181,68,.045) !important; }
body.wt .rt-link, body.wt .rt-id a, body.wt .orders-v7-table .tt-code, body.wt .tt-code { color: #f6d089 !important; font-weight: 700; }
body.wt .rt-link:hover { color: #ffe2a8 !important; text-decoration: underline; }
/* статуси */
body.wt .route18-status, body.wt .tr-status, body.wt .rt-badge { border-radius: 999px; font-size: 12.5px; font-weight: 600; padding: 3px 11px; }
body.wt .route18-status.completed, body.wt .tr-status.formed, body.wt .route18-status.arrived { background: rgba(34,192,122,.12); color: #4ade9d; border: 1px solid rgba(34,192,122,.45); }
body.wt .route18-status.planned { background: rgba(242,181,68,.10); color: #f6d089; border: 1px solid rgba(242,181,68,.4); }
body.wt .route18-status.confirmed { background: rgba(80,160,230,.12); color: #8ec5ff; border: 1px solid rgba(80,160,230,.45); }
body.wt .route18-status.in_progress { background: rgba(80,160,230,.14); color: #9fd0ff; border: 1px solid rgba(80,160,230,.5); }
body.wt .route18-status.cancelled { background: rgba(148,163,184,.12); color: #b6c2d1; border: 1px solid rgba(148,163,184,.4); }
body.wt .tr-status.edited { background: rgba(242,181,68,.10); color: #f6d089; border: 1px solid rgba(242,181,68,.45); }
body.wt .tr-status.printed { background: rgba(80,160,230,.12); color: #8ec5ff; border: 1px solid rgba(80,160,230,.45); }
body.wt .rt-badge.inter, body.wt .rt-badge.direct, body.wt .rt-badge.fresh, body.wt .rt-badge.parent { background: rgba(120,170,200,.10); color: #b9cddb; border: 1px solid rgba(120,170,200,.28); }
/* sidebar: активний пункт — amber */
body.wt .menu-item { border-color: rgba(120,90,50,.28) !important; background: rgba(20,14,10,.55) !important; }
body.wt .menu-item:hover { border-color: rgba(242,181,68,.45) !important; }
body.wt .menu-item.active { background: linear-gradient(180deg, rgba(150,96,26,.55), rgba(90,58,16,.55)) !important; border: 1px solid #d9982e !important; box-shadow: 0 0 22px rgba(242,181,68,.22), inset 0 0 0 1px rgba(255,214,140,.10) !important; color: #fff !important; }
body.wt .menu-item.active .menu-icon { color: #ffd58a; }
body.wt .menu-item .menu-icon svg { stroke: currentColor; }
/* пагінація */
.wt-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--wt-line); font-size: 13px; color: var(--wt-muted); }
.wt-pager .pg { display: inline-flex; gap: 6px; align-items: center; }
.wt-pager button { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid #143548; background: #03182a; color: var(--wt-text); cursor: pointer; font-size: 13px; }
.wt-pager button:hover:not(:disabled) { border-color: var(--wt-amber-d); }
.wt-pager button.on { background: linear-gradient(180deg, #c98a2b, #8f5f1a); border-color: #e0a24a; color: #fff; }
.wt-pager button:disabled { opacity: .4; cursor: default; }
.wt-pager .ps { display: inline-flex; align-items: center; gap: 8px; } .wt-pager select { height: 34px !important; padding: 0 8px; min-width: 64px; }
/* акценти графіків і смуг */
body.wt .bar { fill: #d9982e; } body.wt .ln { stroke: #f2b544; } body.wt .dot { stroke: #f2b544; } body.wt .dot:hover { fill: #f2b544; }
body.wt .st-bar i { background: linear-gradient(90deg, #8f5f1a, #f2b544) !important; }
body.wt .seg-toggle button.on, body.wt .tt.on { background: linear-gradient(180deg, #c98a2b, #8f5f1a) !important; }
/* danger-контексти залишаються червоними */
body.wt .fr-err, body.wt .wt-err, body.wt .fr-warn-item.bad, body.wt .req, body.wt .au-old { color: #ff8a90 !important; }
body.wt .wt-invalid, body.wt input.wt-invalid { border-color: #e5484d !important; }
body.wt .dir-del:hover, body.wt .fr-x:hover, body.wt [data-t=del]:hover { border-color: #e5484d !important; color: #ff9aa0 !important; }

/* ---------- topbar (макет 09): компактний, пошук Ctrl+K, дзвіночок ---------- */
body.wt .topbar { height: 64px !important; gap: 16px; border-bottom: 1px solid var(--wt-line) !important; }
.page-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; }
.page-title-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--wt-amber); flex: none; } .page-title-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
body.wt .page-title h1 { font-size: clamp(19px, 1.5vw, 24px) !important; margin: 0; white-space: nowrap; } body.wt .page-title p { font-size: 12.5px !important; margin: 2px 0 0; color: var(--wt-muted); }
.top-search { position: relative; flex: 1 1 320px; max-width: 520px; min-width: 200px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid #12324a; border-radius: 10px; background: var(--wt-field); }
.top-search .ts-ico { color: var(--wt-muted); font-size: 18px; } .top-search input { flex: 1; min-width: 0; height: 36px !important; border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; font-size: 13.5px; }
.top-search kbd { font: 11.5px/1 inherit; color: var(--wt-muted); border: 1px solid #143548; border-radius: 6px; padding: 4px 7px; background: #03182a; white-space: nowrap; }
.top-search:focus-within { border-color: var(--wt-amber); box-shadow: 0 0 0 3px rgba(242,181,68,.14); }
.ts-results { position: absolute; top: 46px; left: 0; right: 0; max-height: min(60vh, 460px); overflow: auto; background: #021523; border: 1px solid #143548; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.6); z-index: 40000; padding: 6px; }
.ts-g { padding: 8px 10px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wt-amber); }
.ts-i { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 8px 10px; color: var(--wt-text); cursor: pointer; } .ts-i:hover { background: rgba(242,181,68,.08); }
.ts-i strong { display: block; font-size: 13.5px; overflow-wrap: anywhere; } .ts-i small { display: block; color: var(--wt-muted); font-size: 12px; overflow-wrap: anywhere; } .ts-none { padding: 12px; color: var(--wt-muted); }
body.wt .notification { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #143548; background: #03182a; color: var(--wt-text); display: grid; place-items: center; cursor: pointer; }
body.wt .notification:hover { border-color: var(--wt-amber-d); } .notification i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #e5484d; color: #fff; font: 700 11px/18px inherit; font-style: normal; text-align: center; padding: 0 4px; }
@media (max-width: 1250px) { .top-search kbd { display: none; } .top-search { flex-basis: 220px; } }

/* ---------- hero: компактний, фура повністю видима (contain) ---------- */
body.wt .hero { min-height: clamp(176px, 22vh, 236px) !important; max-height: 300px !important; margin-top: 12px !important; }
body.wt .hero .hero-content { transform: none; }
/* ---------- Експорт даних: KPI → фільтри → таблиця; без дубля фільтрів під шапкою таблиці ---------- */
body.wt #page-export .export-filter-row { display: none !important; }
body.wt #export-cat-filters { display: grid !important; grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(220px, 1.4fr) auto; gap: 10px 14px; align-items: end; padding: 12px 16px; }
body.wt #export-cat-filters .flt-title { grid-column: 1 / -1; margin: 0; font-size: 15px; }
body.wt #export-cat-filters .ex-search input { width: 100%; }
@media (max-width: 1300px) { body.wt #export-cat-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ttnreg-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.ttnreg-group .tg-sel { padding: 0 14px; height: 40px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #143548; border-radius: 8px; background: #03182a; font-size: 13.5px; }
body.wt .route18-more { min-width: 40px; height: 36px; border-radius: 8px; border: 1px solid #143548; background: #03182a; color: var(--wt-text); cursor: pointer; letter-spacing: 1px; }
body.wt .route18-more:hover { border-color: var(--wt-amber-d); }
body.wt .secondary-button.sm { min-height: 34px; padding: 0 12px; font-size: 13px; margin-right: 6px; }
body.wt .rt-act { white-space: nowrap; }
body.wt td.dirtxt, body.wt .rt-dir strong { overflow-wrap: anywhere; }
body.wt td small.typ { color: var(--wt-muted); }

/* ---------- журнал змін ---------- */
.au-act { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; } .au-act i { font-style: normal; }
.au-c { color: #4ade9d; } .au-e { color: #6fb6ff; } .au-d { color: #ff7a82; } .au-s { color: #f2b544; }
.au-desc small { display: block; color: var(--wt-muted); } .au-old { color: #f59aa7; } .au-new { color: #86e3b3; }
.flt { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--wt-muted); min-width: 0; }
.flt-range { display: inline-flex; align-items: center; gap: 8px; } .flt-range i { font-style: normal; color: var(--wt-muted); }
/* універсальні тулбари фільтрів: гнучкий flex-wrap */
body.wt .wt-toolbar, body.wt .routes18-toolbar, body.wt .dash-filters { display: flex !important; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 12px 14px; }
body.wt .wt-toolbar .directory-search, body.wt .routes18-toolbar .directory-search { flex: 1 1 260px; max-width: 560px; min-width: 200px; }
body.wt .wt-toolbar > .wt-select, body.wt .wt-toolbar > select, body.wt .wt-toolbar > input[type=date], body.wt .wt-toolbar > .wt-date, body.wt .routes18-toolbar > .wt-select, body.wt .routes18-toolbar > .wt-date, body.wt .flt .wt-select, body.wt .flt .wt-date { flex: 0 1 190px; min-width: 150px; }
/* довідники: компактні category cards */
body.wt .directory-tabs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
body.wt .directory-tab { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px; padding: 8px 6px !important; border-radius: 12px !important; text-align: center; border: 1px solid #12324a !important; background: linear-gradient(180deg, #03192a, #021320) !important; }
body.wt .directory-tab.active { border-color: #d9982e !important; background: linear-gradient(180deg, rgba(150,96,26,.5), rgba(60,40,12,.5)) !important; box-shadow: 0 0 18px rgba(242,181,68,.2); }
body.wt .directory-tab .directory-tab-icon { font-size: 20px; color: var(--wt-amber); } body.wt .directory-tab span:not(.directory-tab-icon) { font-size: 12.5px; line-height: 1.2; } body.wt .directory-tab strong { font-size: 11.5px; color: var(--wt-muted); background: rgba(255,255,255,.06); border-radius: 999px; padding: 1px 8px; }

/* ---------- Dashboard: сітка за макетом 01 (адаптивна, без фіксованих ширин) ---------- */
body.wt .dash-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
body.wt .dash-grid .c3 { grid-column: span 3; } body.wt .dash-grid .c4 { grid-column: span 4; } body.wt .dash-grid .c5 { grid-column: span 5; } body.wt .dash-grid .c6 { grid-column: span 6; }
body.wt .dash-card { container-type: inline-size; }
@container (max-width: 640px) { .dash-carr { grid-template-columns: 1fr !important; } .ch-donut { min-height: 170px; } }
@media (max-width: 1500px) { body.wt .dash-grid > .dash-card { grid-column: span 6 !important; } }
@media (max-width: 980px) { body.wt .dash-grid > .dash-card { grid-column: span 12 !important; } }
/* модалки: у межах viewport, sticky header/footer, прокрутка тіла */
body.wt .wt-dialog { max-height: calc(100vh - 24px) !important; }
body.wt .wt-dlg-head, body.wt .wt-dlg-foot { flex: none; position: sticky; z-index: 2; background: #021523; }
body.wt .wt-dlg-head { top: 0; border-bottom: 1px solid var(--wt-line); } body.wt .wt-dlg-foot { bottom: 0; border-top: 1px solid var(--wt-line); }
body.wt .wt-dlg-body { overflow: auto; min-height: 0; flex: 1 1 auto; }
body.wt .wt-dialog { border-color: #16405a !important; background: #021523 !important; }
body.wt .route-modal, body.wt .vehicle-modal, body.wt .doc-modal { max-height: calc(100vh - 24px); }

/* ---------- компактність на ноутбуці ---------- */
body.wt .top-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; height: 36px !important; padding: 0 !important; outline: none; }
body.wt .top-search input::-webkit-search-cancel-button { display: none; }
body.wt .page-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
body.wt #page-office .dash-head { display: none; }
body.wt .dash-kpis7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 10px; }
body.wt .dash-kpis7 .dk { padding: 12px 14px; } body.wt .dash-kpis7 .dk strong { font-size: clamp(18px, 1.4vw, 25px); margin-top: 4px; } body.wt .dash-kpis7 .dk em { font-size: 11.5px; margin-top: 3px; }
@media (max-width: 1500px) { body.wt .dash-kpis7 .dk em { display: none; } }
@media (max-width: 1150px) { body.wt .dash-kpis7 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
/* «Сьогодні»: компактна смуга */
.dash-today { margin: 8px 0 4px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tt-head { margin: 0; } .tt-head h3 { font-size: 15px; } .tt-head small { display: none; }
.tt-grid { display: flex; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; }
.tt { padding: 6px 14px !important; min-height: 40px; flex: 1 1 150px; border-radius: 10px !important; } .tt span { font-size: 13px !important; } .tt strong { font-size: 20px !important; }
body.wt .dash-filters { margin: 8px 0 !important; }
body.wt .top-search input:not([type=checkbox]):not([type=radio]) { border: 0 !important; background: transparent !important; box-shadow: none !important; height: 36px !important; padding: 0 !important; }

/* ---------- компактна композиція сторінок: заголовок вже в topbar; дані — вище ---------- */
body.wt #page-export .content-heading, body.wt #page-directories .content-heading { display: none !important; }
body.wt .routes18-head > div:first-child { display: none; }
body.wt .routes18-head { justify-content: flex-end; margin: 8px 0 !important; min-height: 0; }
body.wt #page-export .import-panel { padding: 0 !important; margin: 10px 0 !important; }
body.wt #page-export .import-dropzone { min-height: 64px !important; padding: 8px 16px !important; gap: 14px; }
body.wt #page-export .import-file-icon { width: 44px !important; height: 44px !important; font-size: 13px; }
body.wt #page-export .import-dropzone-text strong { font-size: 14px; } body.wt #page-export .import-dropzone-text span { font-size: 12.5px; }
body.wt #page-export .export-documents-section { display: flex; flex-direction: column; gap: 10px; }
body.wt #page-export .export-documents-head { order: 0; margin: 0; } body.wt #page-export .export-documents-head .content-kicker { display: none; } body.wt #page-export .export-documents-head h2 { font-size: 17px !important; margin: 0; }
body.wt #page-export .orders-summary { order: 1; } body.wt #export-cat-filters { order: 2; } body.wt #page-export .export-selection-bar { order: 3; } body.wt #page-export .export-orders-panel { order: 4; }
body.wt #page-orders .wt-orders-head .content-kicker { display: none; }

/* таблиці маршрутів/реєстрів: компактні відступи; колонка «Дії» завжди видима (sticky) */
body.wt .routes18-table th, body.wt .routes18-table td { padding: 8px 9px !important; }
body.wt .fresh-table, body.wt .base-table, body.wt .ttnreg-table, body.wt .audit-table, body.wt .routes18-table { min-width: 0 !important; width: 100%; }
body.wt .routes18-table td:last-child, body.wt .routes18-table th:last-child { position: sticky; right: 0; z-index: 3; background: #021523; box-shadow: -10px 0 14px rgba(0,0,0,.35); }
body.wt .routes18-table thead th:last-child { background: #021b2a !important; }
body.wt .directory-search input:not([type=checkbox]) { border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.wt .directory-search { background: var(--wt-field) !important; border: 1px solid #12324a !important; border-radius: 8px; }
body.wt .directory-search:focus-within { border-color: var(--wt-amber) !important; box-shadow: 0 0 0 3px rgba(242,181,68,.14); }
body.wt .routes18-table td, body.wt .rd-table td, body.wt .dash-table td, body.wt .audit-table td { overflow-wrap: break-word !important; word-break: normal; }
body.wt .routes18-table td small, body.wt .ttnreg-table td small { display: block; color: var(--wt-muted); font-size: 12px; overflow-wrap: break-word; }
body.wt .routes18-table-wrap { max-height: none !important; overflow-y: visible !important; }
body.wt .ttnreg-table td:nth-child(6) strong, body.wt .ttnreg-table td:nth-child(2) { white-space: nowrap; }
/* довідники: category cards без накладань */
body.wt .directory-tabs { margin: 12px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; justify-content: flex-start; }
body.wt .directory-tab { position: relative; min-height: 84px !important; padding: 10px 8px !important; }
body.wt .directory-tab strong { position: static !important; margin-top: 2px; }
body.wt .directory-tab span:not(.directory-tab-icon) { max-width: 100%; overflow-wrap: break-word; }
/* журнал змін: сітка фільтрів */
body.wt #page-audit .wt-toolbar { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
body.wt #page-audit .wt-toolbar .flt:first-child, body.wt #page-audit .wt-toolbar .flt-search { grid-column: span 2; max-width: none; }
body.wt #page-audit .flt-range { display: grid; grid-template-columns: 1fr auto 1fr; } body.wt #page-audit .flt-range .wt-date { min-width: 0; width: 100%; flex: none; }
body.wt #page-audit .wt-toolbar .wt-select, body.wt #page-audit .wt-toolbar .wt-date { min-width: 0; width: 100%; flex: none; }
body.wt .audit-table th, body.wt .audit-table td { text-align: left !important; }
body.wt .app-page { padding-top: 12px; }
/* =========================================================
   POST-AUDIT FIX: fluid tables (без жорстких min-width), page-flow замість «вікна у вікні»
   ========================================================= */
body.wt .orders-v7-table, body.wt .compact-orders-table, body.wt .routes18-table, body.wt .log-v11-table, body.wt .ttnreg-table, body.wt .fresh-table, body.wt .base-table, body.wt .audit-table,
body.wt .orders-table, body.wt .order-items-table, body.wt .tt-detail-table, body.wt .fr-table, body.wt .directory-table, body.wt .rd-table { width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
body.wt .orders-v7-table th, body.wt .compact-orders-table th, body.wt .log-v11-table th { width: auto !important; min-width: 0 !important; }
body.wt .orders-v7-table td:nth-child(4), body.wt .orders-v7-table td:nth-child(5), body.wt .compact-orders-table td:nth-child(5), body.wt .compact-orders-table td:nth-child(6), body.wt .compact-orders-table td:nth-child(7) { min-width: 0 !important; }
body.wt .routes18-table-wrap, body.wt .log-v11-table-wrap, body.wt .orders-v7-table-wrap, body.wt .orders-table-wrap, body.wt .directory-table-wrap { max-height: none !important; overflow-y: visible !important; overflow-x: auto; }
/* колонки, приховані адаптивним алгоритмом (WT.fitTables) — їх значення вертаються другим рядком у головній клітинці */
body.wt td .mg { display: block; margin-top: 3px; color: var(--wt-muted); font-size: 12px; line-height: 1.35; font-weight: 400; white-space: normal; overflow-wrap: break-word; }
/* форма маршруту NEW: ширший діалог на великих екранах (простір використовується під таблицю точок) */
body.wt .wt-dialog.fr-dialog { width: min(1560px, calc(100vw - 28px)) !important; max-width: none; }
body.wt .fr-table .c-mode { width: auto !important; min-width: 0 !important; } body.wt .fr-table .c-ttn { min-width: 0 !important; }
body.wt .fr-table td, body.wt .fr-table th { padding: 6px 7px; }
/* розподіл ширини: основні текстові колонки отримують переважну частку (fluid), числові — за вмістом */
body.wt .orders-v7-table th:nth-child(4) { width: 28% !important; } body.wt .orders-v7-table th:nth-child(5) { width: 13% !important; }
body.wt .compact-orders-table th:nth-child(5) { width: 22% !important; } body.wt .compact-orders-table th:nth-child(6) { width: 22% !important; } body.wt .compact-orders-table th:nth-child(7) { width: 14% !important; }
body.wt .routes18-table th:nth-child(3) { width: 26% !important; } body.wt .routes18-table th:nth-child(7) { width: 18% !important; }
body.wt .fresh-table th:nth-child(3), body.wt .base-table th:nth-child(3) { width: 26% !important; } body.wt .fresh-table th:nth-child(8), body.wt .base-table th:nth-child(8) { width: 18% !important; }
body.wt .ttnreg-table th:nth-child(4) { width: 28% !important; } body.wt .ttnreg-table th:nth-child(5) { width: 16% !important; }
body.wt .audit-table th:nth-child(6) { width: 30% !important; } body.wt .audit-table th:nth-child(5) { width: 16% !important; }

/* ---------- Комплектація ---------- */
.pk-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.pk-kpi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border: 1px solid var(--wt-line); border-radius: 12px; background: linear-gradient(180deg, #04202f, #021523); color: var(--wt-text); cursor: pointer; text-align: left; }
.pk-kpi span { color: var(--wt-muted); font-size: 13px; } .pk-kpi strong { font-size: 24px; font-variant-numeric: tabular-nums; } .pk-kpi.on, .pk-kpi:hover { border-color: var(--wt-amber); }
.pk-filters { display: grid !important; grid-template-columns: minmax(220px, 1.6fr) minmax(240px, 1.3fr) repeat(3, minmax(140px, 1fr)) auto; gap: 10px 12px; align-items: end; padding: 12px 14px; margin-bottom: 10px; }
.pk-filters .wt-select, .pk-filters .wt-date, .pk-filters .directory-search { width: 100%; min-width: 0; }
.pk-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; }
.pk-st { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.pk-st.new { color: #8ec5ff; border-color: rgba(80,160,230,.45); background: rgba(80,160,230,.12); } .pk-st.in_progress { color: #f6d089; border-color: rgba(242,181,68,.45); background: rgba(242,181,68,.10); }
.pk-st.done_ok { color: #4ade9d; border-color: rgba(34,192,122,.45); background: rgba(34,192,122,.12); } .pk-st.done_changed { color: #ffb37a; border-color: rgba(251,146,60,.5); background: rgba(251,146,60,.12); }
tr.pk-diff td { background: rgba(251,146,60,.14) !important; } tr.pk-diff input { border-color: #fb923c !important; }
.pk-items input.wt-num { width: 96px !important; } .pk-head .wt-field { min-width: 0; } .pk-head .pk-note { grid-column: span 2; }
td small.ap { display: block; color: #4ade9d; font-size: 11.5px; }
@media (max-width: 1300px) { .pk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* sidebar: 11 пунктів меню без накладання на підвал */
@media (max-height: 940px) { body.wt .sidebar-menu { gap: 5px !important; } body.wt .sidebar-menu .menu-item { min-height: 36px !important; height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.wt .menu-item .menu-icon { transform: scale(.92); } }
body.wt .sidebar-menu { max-height: calc(100vh - 25.5vh - 96px); overflow-y: auto; scrollbar-width: none; } body.wt .sidebar-menu::-webkit-scrollbar { display: none; }
/* Комплектація: фільтри в одну сітку (перебиває універсальні правила .wt-cat-filters) */
body.wt #pk-filters { display: grid !important; grid-template-columns: minmax(200px, 1.5fr) minmax(230px, 1.3fr) repeat(3, minmax(130px, 1fr)) auto !important; gap: 10px 12px; align-items: end; }
@media (max-width: 1500px) { body.wt #pk-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 1000px) { body.wt #pk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
body.wt #pk-filters .flt { min-width: 0; } body.wt #pk-filters .flt-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
body.wt #pk-filters .flt-range .wt-date { min-width: 0; width: 100%; flex: none; }
body.wt .flt-card { background: linear-gradient(180deg, #03192a, #021320) !important; border: 1px solid var(--wt-line) !important; border-radius: 12px; }
body.wt .flt > .wt-select, body.wt .flt > .wt-date, body.wt .flt > .directory-search, body.wt .flt .flt-range { flex: none !important; }
body.wt .pk-table th, body.wt .pk-table td { text-align: left; } body.wt .pk-table td.num, body.wt .pk-table th:nth-child(6), body.wt .pk-table th:nth-child(7), body.wt .pk-table th:nth-child(8) { text-align: right; }
body.wt .pk-table th:nth-child(5) { width: 34% !important; }
/* =========================================================
   UX v4: щільніший (кучніший) інтерфейс, аналітичний Офіс логістики, реальний hero
   ========================================================= */
:root { --wt-ctl-h: 36px; }
body.wt .primary-button, body.wt .secondary-button { min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
body.wt input:not([type=checkbox]):not([type=radio]), body.wt select, body.wt .wt-select .wt-sel-btn, body.wt .wt-date .wt-date-btn { min-height: 36px; height: 36px; font-size: 13px; }
body.wt .app-page { padding-top: 8px; }
body.wt .routes18-table th, body.wt .routes18-table td, body.wt .orders-v7-table th, body.wt .orders-v7-table td, body.wt .rd-table th, body.wt .rd-table td { padding: 6px 8px !important; }
body.wt .routes18-table, body.wt .orders-v7-table, body.wt .rd-table, body.wt .compact-orders-table { font-size: 12.8px; }
body.wt .wt-toolbar, body.wt .routes18-toolbar, body.wt .dash-filters, body.wt .flt-card { padding: 8px 12px !important; gap: 8px 10px; }
body.wt .routes18-panel-title { padding: 8px 14px !important; min-height: 0; }
body.wt .pk-kpi { padding: 8px 14px; } body.wt .pk-kpi strong { font-size: 20px; }
/* KPI-картки логістики / реєстрів — компактні */
body.wt .routes18-kpis { gap: 8px !important; margin-bottom: 8px !important; }
body.wt .routes18-kpi { padding: 8px 14px !important; min-height: 0 !important; height: auto !important; border-radius: 10px; border-left: 3px solid rgba(242,181,68,.55) !important; }
body.wt .routes18-kpi strong, body.wt .routes18-kpi b { font-size: 21px !important; margin: 2px 0 !important; line-height: 1.1; }
body.wt .routes18-kpi span { font-size: 12.5px !important; } body.wt .routes18-kpi small { font-size: 11.5px !important; }

/* ---------- Замовлення: кучніше, без «Суми» ---------- */
body.wt #page-orders .orders-v7-table th:nth-child(11), body.wt #page-orders .orders-v7-table td:nth-child(11) { display: none !important; }
body.wt #page-orders .wt-orders-bar { gap: 8px 10px; margin-bottom: 8px; }
body.wt #page-orders .orders-v7-kpis { gap: 6px !important; margin-bottom: 8px !important; } body.wt #page-orders .orders-v7-kpis > * { padding: 5px 12px !important; min-height: 0 !important; font-size: 12.5px; }
body.wt #page-orders .orders-v7-table td { font-size: 12.5px; line-height: 1.25; }
body.wt #page-orders .orders-v7-table td:nth-child(5) { font-size: 11.5px; color: var(--wt-muted); line-height: 1.2; }
body.wt #page-orders .tt-store-cell strong { font-size: 12.8px !important; } body.wt #page-orders .tt-store-cell small { font-size: 11.3px !important; margin-top: 1px; }
body.wt #page-orders .tt-status-select, body.wt #page-orders .orders-v7-table select { min-height: 32px; height: 32px; font-size: 12.5px; }
.ord-bulk { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--wt-line); border-radius: 10px; background: rgba(255,255,255,.03); font-size: 12.5px; }
.ord-bulk .wt-select { width: 190px; } .ord-bulk b { color: var(--wt-amber); }
.pk-bulk { display: inline-flex; gap: 8px; align-items: center; } .pk-bulk .wt-select { width: 170px; }
.pk-status-sel, body.wt .c-st .wt-select { min-width: 150px; }
body.wt .c-st .wt-select .wt-sel-btn { height: 32px; min-height: 32px; font-size: 12.5px; font-weight: 600; }

/* ---------- Комплектація: рядки кучніше ---------- */
body.wt .pk-table td { padding: 5px 8px !important; } body.wt .pk-table td small { font-size: 11.3px; line-height: 1.25; }

/* ---------- Офіс логістики: аналітичний дашборд ---------- */
body.wt .hero { aspect-ratio: auto !important; height: clamp(150px, 19vh, 205px) !important; min-height: 0 !important; max-height: none !important; padding-block: 0 !important; margin: 8px 0 8px !important;
    background-size: auto 100% !important; background-position: right center !important; background-color: #05080c !important; }
body.wt .hero .hero-content { top: 50% !important; transform: translateY(-50%); }
body.wt .dash-filters { margin: 0 0 8px !important; }
body.wt .dash-kpis7 { gap: 8px !important; margin-bottom: 8px !important; }
body.wt .dash-kpis7 .dk { position: relative; padding: 9px 12px 9px 52px !important; border-radius: 12px; min-height: 0; }
body.wt .dash-kpis7 .dk::before { content: "₴"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #ffdca0; background: radial-gradient(circle at 30% 30%, rgba(242,181,68,.38), rgba(242,181,68,.08)); border: 1px solid rgba(242,181,68,.4); }
body.wt .dash-kpis7 .dk:nth-child(2)::before { content: "⇄"; } body.wt .dash-kpis7 .dk:nth-child(3)::before { content: "◎"; } body.wt .dash-kpis7 .dk:nth-child(4)::before { content: "▤"; } body.wt .dash-kpis7 .dk:nth-child(5)::before { content: "⚖"; } body.wt .dash-kpis7 .dk:nth-child(6)::before { content: "₴/п"; font-size: 10.5px; } body.wt .dash-kpis7 .dk:nth-child(7)::before { content: "₴/т"; font-size: 10.5px; }
body.wt .dash-kpis7 .dk span { font-size: 11.8px; } body.wt .dash-kpis7 .dk strong { font-size: clamp(17px, 1.3vw, 23px) !important; margin-top: 2px; } body.wt .dash-kpis7 .dk em { display: none !important; }
body.wt .dash-v2 { gap: 8px; margin-bottom: 8px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
body.wt .dash-v2 .dash-card { padding: 9px 12px; border-radius: 12px; }
body.wt .dash-v2 .dash-card h3 { font-size: 13.5px; margin: 0 0 6px; } body.wt .dash-v2 .dash-card h3 em { font-size: 11px; }
body.wt .dash-v2 .g-cost { grid-column: span 5; } body.wt .dash-v2 .g-ppp { grid-column: span 4; } body.wt .dash-v2 .g-struct { grid-column: span 3; }
body.wt .dash-v2 .g-stores { grid-column: span 4; } body.wt .dash-v2 .g-dirs { grid-column: span 3; } body.wt .dash-v2 .g-carr { grid-column: span 5; }
body.wt .dash-v2 .g-status { grid-column: span 3; } body.wt .dash-v2 .g-top { grid-column: span 5; } body.wt .dash-v2 .g-last { grid-column: span 4; }
body.wt .dash-v2 .ch { min-height: 0; } body.wt .dash-v2 .ch-donut { min-height: 150px; } body.wt .dash-v2 .ch-donut svg { width: 150px; height: 150px; }
body.wt .dash-v2 .dash-legend { justify-content: center; margin-top: 2px; font-size: 11.5px; gap: 4px 10px; }
body.wt .dash-v2 .st-row { padding: 5px 8px; gap: 8px; grid-template-columns: minmax(110px, 1.2fr) minmax(50px, 1fr) auto; } body.wt .dash-v2 .st-name strong { font-size: 12.5px; } body.wt .dash-v2 .st-name small { font-size: 11px; } body.wt .dash-v2 .st-val { font-size: 13px; }
body.wt .dash-v2 .dash-table td, body.wt .dash-v2 .dash-table th { padding: 4px 6px !important; font-size: 12px; }
body.wt .dash-v2 .dash-table-wrap { max-height: 260px; overflow-y: auto !important; }
body.wt .dash-v2 .st-list { max-height: 268px; overflow-y: auto; }
body.wt .dash-v2 .st-tools input { width: 130px; height: 32px; } body.wt .dash-v2 .st-tools .wt-select { width: 150px; } body.wt .dash-v2 .st-tools .wt-sel-btn { height: 32px; min-height: 32px; }
@media (max-width: 1600px) { body.wt .dash-v2 .g-cost { grid-column: span 6; } body.wt .dash-v2 .g-ppp { grid-column: span 6; } body.wt .dash-v2 .g-struct { grid-column: span 4; } body.wt .dash-v2 .g-stores { grid-column: span 4; } body.wt .dash-v2 .g-dirs { grid-column: span 4; } body.wt .dash-v2 .g-carr { grid-column: span 12; } body.wt .dash-v2 .g-status { grid-column: span 4; } body.wt .dash-v2 .g-top { grid-column: span 8; } body.wt .dash-v2 .g-last { grid-column: span 12; } }
@media (max-width: 1150px) { body.wt .dash-v2 .dash-card { grid-column: span 12 !important; } }
@media (min-width: 2200px) { body.wt .dash-v2 .g-cost { grid-column: span 4; } body.wt .dash-v2 .g-ppp { grid-column: span 4; } body.wt .dash-v2 .g-struct { grid-column: span 2; } body.wt .dash-v2 .g-status { grid-column: span 2; } body.wt .dash-v2 .g-stores { grid-column: span 3; } body.wt .dash-v2 .g-dirs { grid-column: span 2; } body.wt .dash-v2 .g-carr { grid-column: span 3; } body.wt .dash-v2 .g-top { grid-column: span 2; } body.wt .dash-v2 .g-last { grid-column: span 2; } }
/* hero: фура справа (розмір за висотою hero), меню — ліворуч від зображення; зліва плавне затемнення */
body.wt .hero { --hh: clamp(160px, 21vh, 225px); height: var(--hh) !important; background-size: auto 100% !important; background-position: right center !important; }
body.wt .hero .hero-tags { right: calc(var(--hh) * 2.833 + 22px) !important; }
body.wt .hero .hero-overlay { background: linear-gradient(90deg, rgba(5,8,12,.97) 0%, rgba(5,8,12,.9) 36%, rgba(5,8,12,.35) 62%, rgba(5,8,12,0) 100%) !important; }
@media (max-width: 1250px) { body.wt .hero .hero-tags { display: none; } }
body.wt .dash-kpis7 .dk, body.wt .dash-kpis7 .dk * { text-align: left; }
body.wt .dash-filters > .wt-select, body.wt .dash-period .wt-select { width: 150px; flex: none; } body.wt .dash-period .wt-date { width: 128px; flex: none; } body.wt .dash-filters > .wt-select { width: 165px; }
body.wt .dash-filters .primary-button, body.wt .dash-filters .secondary-button { padding: 0 14px; }
body.wt #page-orders .orders-v7-table th:nth-child(4) { width: 26% !important; } body.wt #page-orders .orders-v7-table th:nth-child(5) { width: 22% !important; }
body.wt #pk-filters { grid-template-columns: minmax(150px, 1.2fr) minmax(220px, 1.3fr) repeat(3, minmax(120px, 1fr)) auto !important; padding: 8px 12px !important; }
body.wt #pk-filters .flt > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 1500px) { body.wt #pk-filters { grid-template-columns: minmax(150px, 1.2fr) minmax(210px, 1.3fr) repeat(3, minmax(105px, 1fr)) auto !important; } }
@media (max-width: 1000px) { body.wt #pk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
body.wt #page-logistics .routes18-table td:nth-child(8) strong, body.wt .routes18-table td strong.plate { white-space: nowrap; }
body.wt .routes18-toolbar > .wt-select, body.wt #page-logistics .routes18-toolbar .wt-select { width: 150px; flex: none; } body.wt .routes18-toolbar > .wt-date { width: 150px; flex: none; }

/* ---------- TMS: вкладки розділів, «Стан замовлень», резервна копія ---------- */
.tms-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 2px; }
.tms-tabs[hidden] { display: none; }
.tms-tabs button { height: 34px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--wt-line); background: #03182a; color: var(--wt-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.tms-tabs button:hover { color: var(--wt-text); border-color: var(--wt-amber-d); }
.tms-tabs button.on { color: #fff; border-color: #d9982e; background: linear-gradient(180deg, rgba(150,96,26,.55), rgba(70,46,14,.55)); box-shadow: 0 0 14px rgba(242,181,68,.18); }
.pl-stages { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.pl-st { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 1px solid var(--wt-line); border-radius: 12px; background: linear-gradient(180deg, #04202f, #021523); color: var(--wt-text); cursor: pointer; text-align: left; border-top: 3px solid #4b6b82; }
.pl-st span { font-size: 12px; color: var(--wt-muted); } .pl-st strong { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; } .pl-st small { font-size: 11.5px; color: var(--wt-muted); }
.pl-st.on { border-color: var(--wt-amber); box-shadow: 0 0 14px rgba(242,181,68,.2); }
.pl-st.st-uploaded, .pl-pill.st-uploaded { border-top-color: #8a9bb0; } .pl-st.st-approved { border-top-color: #38bdf8; } .pl-st.st-picking { border-top-color: #f2b544; } .pl-st.st-picked { border-top-color: #22c07a; }
.pl-st.st-ready { border-top-color: #a78bfa; } .pl-st.st-transit { border-top-color: #fb923c; } .pl-st.st-delivered { border-top-color: #34d399; }
.pl-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; margin: 1px 2px 1px 0; }
.pl-pill.st-uploaded { color: #b6c2d1; border-color: rgba(148,163,184,.45); background: rgba(148,163,184,.10); } .pl-pill.st-approved { color: #8ec5ff; border-color: rgba(56,189,248,.45); background: rgba(56,189,248,.10); }
.pl-pill.st-picking { color: #f6d089; border-color: rgba(242,181,68,.5); background: rgba(242,181,68,.10); } .pl-pill.st-picked { color: #4ade9d; border-color: rgba(34,192,122,.5); background: rgba(34,192,122,.10); }
.pl-pill.st-ready { color: #c4b5fd; border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.10); } .pl-pill.st-transit { color: #fdba74; border-color: rgba(251,146,60,.5); background: rgba(251,146,60,.10); } .pl-pill.st-delivered { color: #6ee7b7; border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.12); }
.pl-filters .directory-search { flex: 1 1 260px; max-width: 460px; } .pl-cross { margin-top: 10px; }
@media (max-width: 1450px) { .pl-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bk-panel .bk-body { padding: 12px 16px; } .bk-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; } .bk-file { display: inline-flex; align-items: center; cursor: pointer; padding: 0 16px; }
.bk-banner { margin: 8px 0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; border: 1px solid; } .bk-banner.ok { color: #4ade9d; border-color: rgba(34,192,122,.45); background: rgba(34,192,122,.08); } .bk-banner.warn { color: #f8d38a; border-color: rgba(245,177,61,.5); background: rgba(245,177,61,.08); }

/* довідники: стабільна ширина плиток (без розтягування останнього неповного рядка), запобігання накладанню бейджа на назву */
body.wt .directory-tabs { display: flex !important; flex-wrap: wrap; }
body.wt .directory-tab { flex: 0 1 148px; min-width: 132px; }
body.wt .directory-tab strong { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Реєстр замовлень: дати етапів, корекції, інлайн факт палет ---------- */
.pl-when { display: block; color: var(--wt-muted); font-size: 11px; margin-top: 2px; white-space: nowrap; }
.pl-corr { display: inline-block; margin-left: 4px; font-size: 11px; color: #fdba74; border: 1px solid rgba(251,146,60,.45); background: rgba(251,146,60,.10); border-radius: 999px; padding: 1px 7px; cursor: help; }
.pl-fact-edit { display: inline-flex; align-items: center; gap: 4px; }
.pl-fact-edit input { height: 30px; padding: 0 8px; border-radius: 7px; border: 1px solid #12324a; background: var(--wt-field); color: var(--wt-text); font-size: 12.5px; }
.pl-fact-edit input::placeholder { color: var(--wt-muted); }
.pl-fact-edit .secondary-button.sm { min-height: 30px; padding: 0 10px; }

/* ---------- довідники, фінал: бейдж лічильника по центру під назвою, не в кутку (усуває візуальне «врізання» у заокруглений бордюр) ---------- */
body.wt .directory-tabs { align-items: stretch !important; }
body.wt .directory-tab { justify-content: flex-start !important; padding: 14px 8px 12px !important; row-gap: 6px; min-height: 104px !important; height: auto !important; }
body.wt .directory-tab .directory-tab-icon { flex: 0 0 auto; margin-bottom: 0; }
body.wt .directory-tab span:not(.directory-tab-icon) { flex: 1 1 auto; display: flex; align-items: center; line-height: 1.25; min-height: 2.5em; }
body.wt .directory-tab strong { flex: 0 0 auto; margin: 0 auto !important; align-self: center !important; padding: 2px 10px !important; font-size: 11px !important; line-height: 1.4; background: rgba(242,181,68,.14) !important; color: #f6d089 !important; border: 1px solid rgba(242,181,68,.3); white-space: nowrap; }

/* ---------- вибір ролі (Керівник / Логіст) ---------- */
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.role-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--wt-line); border-radius: 12px; cursor: pointer; background: #03182a; }
.role-opt input { margin-top: 3px; accent-color: #d9982e; }
.role-opt b { display: block; margin-bottom: 3px; } .role-opt small { color: var(--wt-muted); line-height: 1.35; }
.role-opt.on { border-color: var(--wt-amber); background: linear-gradient(180deg, rgba(150,96,26,.22), rgba(70,46,14,.14)); }
.profile { cursor: pointer; }