:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#dbe2ea;
  --primary:#0b5ed7;
  --primary-2:#0a4fb6;
  --danger:#c0392b;
  --ok:#1b8f52;
  --radius:10px;
  --shadow:0 8px 24px rgba(16,24,40,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f7f9fc 0%, #f2f5fa 100%);
}
.container{width:min(1040px,94%);margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(0,0,0,.04)
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0
}
.logo{font-weight:700;color:#0f3d91;white-space:nowrap}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{
  text-decoration:none;color:#334155;padding:8px 10px;border-radius:8px;
  border:1px solid transparent;transition:.18s;
}
nav a:hover{background:#eef4ff;border-color:#d7e6ff;color:#0b5ed7}

.auth{display:flex;gap:8px;align-items:center}
.btn,button{
  appearance:none;border:1px solid transparent;background:var(--primary);color:#fff;
  border-radius:8px;padding:9px 14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block
}
.btn:hover,button:hover{background:var(--primary-2)}
.btn.secondary{background:#eef2f7;color:#1f2937;border-color:#d4dbe6}
.btn.secondary:hover{background:#e7edf7}
button[disabled]{opacity:.6;cursor:not-allowed}

main.container{padding:18px 0 28px}

/* cards / sections */
h1{font-size:30px;line-height:1.15;margin:4px 0 14px}
h2{font-size:22px;margin:0 0 12px}
h3{font-size:18px;margin:0 0 10px}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}

.card,.panel,.ts-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
  margin-bottom:14px;
}

/* form layout */
form{display:block}
.form-grid,.grid,.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

label{display:block;font-weight:600;margin:0 0 4px}
input,select,textarea{
  width:100%;
  border:1px solid #cfd8e3;
  border-radius:8px;
  padding:8px 10px;
  background:#fff;color:#0f172a;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:#86b7fe;box-shadow:0 0 0 3px rgba(11,94,215,.16)
}
textarea{min-height:80px;resize:vertical}

/* compact controls */
input[type="date"]{max-width:180px}
input[type="time"]{max-width:110px;min-width:96px;padding:7px 8px}
input[type="number"]{max-width:220px}
select{max-width:100%}

/* table */
.table-wrap{overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
th,td{border-bottom:1px solid #e8edf3;padding:8px 10px;text-align:left;vertical-align:middle}
th{background:#f3f6fb;color:#334155;font-weight:700}
tr:hover td{background:#fafcff}

/* footer */
.site-footer{
  margin-top:22px;padding:16px 0;background:#fff;border-top:1px solid var(--line)
}
copyright,.copyright{color:var(--muted);margin-top:8px}

/* helpers */
.small{font-size:13px;color:var(--muted)}
.danger{color:var(--danger);font-weight:700}
.ok{color:var(--ok);font-weight:700}
.nowrap{white-space:nowrap}

/* mobile */
@media (max-width:1024px){
  .form-grid,.grid,.grid2,.grid3,.grid4{grid-template-columns:1fr}
  input[type="date"],input[type="time"],input[type="number"]{max-width:100%}
  h1{font-size:26px}
}

/* Compact UI tuning */
main.container > h1,
main.container > h2,
main.container > form,
main.container > .card,
main.container > .panel,
main.container > table,
main.container > .wrap {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

table { max-width: 980px; margin-left: auto; margin-right: auto; }
input[type="time"] { max-width: 96px !important; min-width: 88px !important; }
input[type="date"] { max-width: 170px !important; }
input[type="number"] { max-width: 180px; }

.ts-actions { display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }

/* Page narrow wrappers */
.page-narrow{
  max-width: 920px;
  margin: 0 auto;
}
.page-narrow h1,
.page-narrow h2,
.page-narrow h3{
  max-width: 920px;
}
.page-narrow form,
.page-narrow .card,
.page-narrow .panel,
.page-narrow table{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.page-narrow .table-wrap{
  max-width: 920px;
  margin: 0 auto;
}
.page-narrow input[type="time"]{
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
}
.page-narrow input[type="date"]{
  width: 170px !important;
  max-width: 170px !important;
}
.page-narrow input[type="number"]{
  max-width: 190px;
}

/* ===== FORCE COMPACT LAYOUT (override) ===== */
main.container{
  max-width: 980px !important;
  width: 94% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
main.container > *{
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
main.container form,
main.container .card,
main.container .panel,
main.container table,
main.container .table-wrap,
main.container .wrap,
main.container .ts-wrap{
  width: 100% !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
main.container .grid,
main.container .grid2,
main.container .grid3,
main.container .grid4,
main.container .form-grid{
  gap: 10px !important;
}
main.container input,
main.container select,
main.container textarea{
  width: 100% !important;
  max-width: 100% !important;
}
main.container input[type="time"]{
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
}
main.container input[type="date"]{
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
}
main.container input[type="number"]{
  max-width: 190px !important;
}
main.container table{
  display: block !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  font-size: 14px !important;
}
main.container th, main.container td{
  padding: 6px 8px !important;
}

/* ===== Admin restored wide ===== */
body.admin-ui .container{width:min(1280px,95%)!important;max-width:none!important}
body.admin-ui main.container{max-width:none!important}
body.admin-ui main.container > *{max-width:none!important}

/* ===== User compact ===== */
body.user-ui .container{width:min(1060px,94%)!important}
body.user-ui main.container{max-width:1000px!important}
body.user-ui main.container > *{max-width:980px!important}

/* compact forms for these pages */
body.page-vehicles input,
body.page-vehicles select,
body.page-employees input,
body.page-employees select,
body.page-routes input,
body.page-routes select{
  max-width:340px!important;
}
body.page-vehicles .grid, body.page-employees .grid, body.page-routes .grid,
body.page-vehicles .grid2, body.page-employees .grid2, body.page-routes .grid2{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* subscriptions cards 10cm x 5cm horizontal */
.subscriptions-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-start;
}
.subscription-card{
  width:10cm;
  min-height:5cm;
  max-width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  box-shadow:var(--shadow);
}
.subscription-card h3{margin:0 0 8px}
.subscription-card .price{font-size:26px;font-weight:700;margin:6px 0}
.subscription-card ul{padding-left:18px;margin:8px 0 12px}
.subscription-card li{margin:4px 0;font-size:14px}

/* trip sheets list: restore readable rows */
body.page-trip-sheets table{
  white-space:normal!important;
  font-size:15px!important;
}
body.page-trip-sheets th, body.page-trip-sheets td{
  padding:8px 10px!important;
}
body.page-trip-sheets input[type="time"]{
  width:98px!important;
  min-width:98px!important;
  max-width:98px!important;
}

/* ===== UI4 fixes ===== */

/* 1) Admin: по-компактни полета, редове и таблици */
body.admin-ui .container{
  width:min(1220px,95%)!important;
}
body.admin-ui main.container{
  max-width:none!important;
}
body.admin-ui input,
body.admin-ui select,
body.admin-ui textarea{
  width:calc(100% - 1cm)!important;   /* разлика ~1 см */
  max-width:calc(100% - 1cm)!important;
}
body.admin-ui table{
  font-size:14px!important;
}
body.admin-ui th,
body.admin-ui td{
  padding:6px 8px!important;
  line-height:1.25!important;
}

/* 2) Subscriptions: 5см ширина / 10см височина, хоризонтално */
.subscriptions-wrap{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  align-items:stretch!important;
}
.subscription-card{
  width:5cm!important;
  min-height:10cm!important;
  max-width:5cm!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
}

/* 3) Vehicles / Employees / Routes: по-равномерно хоризонтално+вертикално */
body.page-vehicles .table-wrap,
body.page-employees .table-wrap,
body.page-routes .table-wrap{
  overflow:visible!important;
}

body.page-vehicles table,
body.page-employees table,
body.page-routes table{
  width:100%!important;
  table-layout:fixed!important;
}

body.page-vehicles th, body.page-vehicles td,
body.page-employees th, body.page-employees td,
body.page-routes th, body.page-routes td{
  white-space:normal!important;
  word-break:break-word!important;
}

/* форми в 2 колони, за да няма дълги вертикални блокове */
body.page-vehicles .grid, body.page-vehicles .grid2, body.page-vehicles .form-grid,
body.page-employees .grid, body.page-employees .grid2, body.page-employees .form-grid,
body.page-routes .grid, body.page-routes .grid2, body.page-routes .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

@media (max-width:900px){
  body.page-vehicles .grid, body.page-vehicles .grid2, body.page-vehicles .form-grid,
  body.page-employees .grid, body.page-employees .grid2, body.page-employees .form-grid,
  body.page-routes .grid, body.page-routes .grid2, body.page-routes .form-grid{
    grid-template-columns:1fr!important;
  }
}

/* ===== UI5 strict sizing ===== */

/* Subscriptions: 5 cards per row, each 5cm wide x 8cm high */
.subscriptions-wrap{
  display:grid !important;
  grid-template-columns:repeat(5, 5cm) !important;
  gap:.35cm !important;
  justify-content:center !important;
  align-items:stretch !important;
}
.subscription-card{
  width:5cm !important;
  min-width:5cm !important;
  max-width:5cm !important;
  height:8cm !important;
  min-height:8cm !important;
  max-height:8cm !important;
  overflow:auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

/* Pages that must be card-like 20x20 */
body.page-vehicles main.container,
body.page-employees main.container,
body.page-routes main.container,
body.page-admin-plans-php main.container{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, 20cm) !important;
  gap:.8cm !important;
  justify-content:center !important;
  align-items:start !important;
}
body.page-vehicles main.container > h1,
body.page-employees main.container > h1,
body.page-routes main.container > h1,
body.page-admin-plans-php main.container > h1{
  grid-column:1 / -1 !important;
}
body.page-vehicles main.container > form,
body.page-employees main.container > form,
body.page-routes main.container > form,
body.page-admin-plans-php main.container > form,
body.page-vehicles main.container > .card,
body.page-employees main.container > .card,
body.page-routes main.container > .card,
body.page-admin-plans-php main.container > .card,
body.page-vehicles main.container > .panel,
body.page-employees main.container > .panel,
body.page-routes main.container > .panel,
body.page-admin-plans-php main.container > .panel,
body.page-vehicles main.container > table,
body.page-employees main.container > table,
body.page-routes main.container > table,
body.page-admin-plans-php main.container > table,
body.page-vehicles main.container > .table-wrap,
body.page-employees main.container > .table-wrap,
body.page-routes main.container > .table-wrap,
body.page-admin-plans-php main.container > .table-wrap{
  width:20cm !important;
  min-width:20cm !important;
  max-width:20cm !important;
  min-height:20cm !important;
  max-height:20cm !important;
  overflow:auto !important;
  background:#fff !important;
  border:1px solid #dbe2ea !important;
  border-radius:10px !important;
  padding:12px !important;
}

/* tighter controls in these pages */
body.page-vehicles input, body.page-vehicles select,
body.page-employees input, body.page-employees select,
body.page-routes input, body.page-routes select,
body.page-admin-plans-php input, body.page-admin-plans-php select{
  max-width:100% !important;
}
body.page-vehicles input[type="time"],
body.page-employees input[type="time"],
body.page-routes input[type="time"],
body.page-admin-plans-php input[type="time"]{
  width:96px !important; min-width:96px !important; max-width:96px !important;
}

@media (max-width:1200px){
  .subscriptions-wrap{ grid-template-columns:repeat(2, minmax(220px,1fr)) !important; }
  .subscription-card{ width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:none !important; }
  body.page-vehicles main.container,
  body.page-employees main.container,
  body.page-routes main.container,
  body.page-admin-plans-php main.container{
    grid-template-columns:1fr !important;
  }
  body.page-vehicles main.container > form,
  body.page-employees main.container > form,
  body.page-routes main.container > form,
  body.page-admin-plans-php main.container > form,
  body.page-vehicles main.container > .card,
  body.page-employees main.container > .card,
  body.page-routes main.container > .card,
  body.page-admin-plans-php main.container > .card,
  body.page-vehicles main.container > .panel,
  body.page-employees main.container > .panel,
  body.page-routes main.container > .panel,
  body.page-admin-plans-php main.container > .panel,
  body.page-vehicles main.container > table,
  body.page-employees main.container > table,
  body.page-routes main.container > table,
  body.page-admin-plans-php main.container > table,
  body.page-vehicles main.container > .table-wrap,
  body.page-employees main.container > .table-wrap,
  body.page-routes main.container > .table-wrap,
  body.page-admin-plans-php main.container > .table-wrap{
    width:100% !important; min-width:0 !important; max-width:100% !important; min-height:auto !important; max-height:none !important;
  }
}

/* ===== strict 20x20 cards with internal 2D layout ===== */
.workbench-20{
  display:grid;
  grid-template-columns:repeat(auto-fit, 20cm);
  gap:.8cm;
  justify-content:center;
  align-items:start;
}
.card-20{
  width:20cm;
  min-height:20cm;
  max-height:20cm;
  overflow:auto;
  background:#fff;
  border:1px solid #dbe2ea;
  border-radius:10px;
  padding:12px;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
}
.form-2d{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 12px;
}
.form-2d .full{
  grid-column:1 / -1;
}
.form-2d label{
  display:block;
  font-weight:600;
  margin-bottom:4px;
}
.form-2d input,
.form-2d select,
.form-2d textarea{
  width:100%;
  max-width:100%;
}
.form-2d input[type="time"]{max-width:96px}
.form-2d input[type="date"]{max-width:170px}
.form-2d input[type="number"]{max-width:220px}
.table-compact{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.table-compact th,.table-compact td{
  border:1px solid #dbe2ea;
  padding:6px 8px;
  vertical-align:top;
}
.table-compact th{background:#f3f6fb}
@media (max-width:1200px){
  .workbench-20{grid-template-columns:1fr}
  .card-20{width:100%;min-height:auto;max-height:none}
  .form-2d{grid-template-columns:1fr}
}

/* ===== Fixed card sizes per page ===== */

/* ROUTES: form 20x10, list 20x5, fields 19cm width */
body.page-routes .workbench-20 .card-20:first-of-type{
  width:20cm!important; min-height:10cm!important; max-height:10cm!important;
}
body.page-routes .workbench-20 .card-20:nth-of-type(2){
  width:20cm!important; min-height:5cm!important; max-height:5cm!important;
}
body.page-routes .form-2d input,
body.page-routes .form-2d select,
body.page-routes .form-2d textarea{
  width:19cm!important; max-width:19cm!important;
}

/* EMPLOYEES: form 20x8, list 20x5 */
body.page-employees .workbench-20 .card-20:first-of-type{
  width:20cm!important; min-height:8cm!important; max-height:8cm!important;
}
body.page-employees .workbench-20 .card-20:nth-of-type(2){
  width:20cm!important; min-height:5cm!important; max-height:5cm!important;
}

/* VEHICLES: form 20x17, list 20x5 */
body.page-vehicles .workbench-20 .card-20:first-of-type{
  width:20cm!important; min-height:17cm!important; max-height:17cm!important;
}
body.page-vehicles .workbench-20 .card-20:nth-of-type(2){
  width:20cm!important; min-height:5cm!important; max-height:5cm!important;
}

/* FUEL INVOICES: list 20x5 */
body.page-fuel-invoices .card.list-card{
  width:20cm!important; min-height:5cm!important; max-height:5cm!important;
}

/* keep scroll inside fixed cards */
body.page-routes .card-20,
body.page-employees .card-20,
body.page-vehicles .card-20,
body.page-fuel-invoices .card.list-card{
  overflow:auto!important;
}

/* fixed 19cm list cards */
.list-19{
  width:19cm !important;
  max-width:19cm !important;
  min-height:5cm !important;
  max-height:5cm !important;
  overflow:auto !important;
}
.list-19 .table-wrap{
  width:100%;
}

/* ===== Fix list tables to fill card width ===== */
.list-19 table{
  display:table !important;
  width:100% !important;
  table-layout:auto !important;
  white-space:normal !important;
}
.list-19 .table-wrap{
  overflow:visible !important;
}
.list-19 th, .list-19 td{
  white-space:normal !important;
  word-break:break-word !important;
}

/* ===== Hard fill list cards ===== */
.list-19{
  padding:8px !important;
}
.list-19 .table-wrap{
  width:100% !important;
}
.list-19 table{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  table-layout:fixed !important;
  display:table !important;
}
.list-19 th, .list-19 td{
  width:auto !important;
  white-space:normal !important;
  word-break:break-word !important;
}

/* ===== FINAL OVERRIDE (wins last) ===== */

/* Cards 20cm for vehicles/employees/routes forms */
body.page-vehicles .card-20,
body.page-employees .card-20,
body.page-routes .card-20{
  width:20cm !important;
  min-width:20cm !important;
  max-width:20cm !important;
  overflow:auto !important;
}

/* Lists 19cm exact + full width table fill */
.list-19{
  width:19cm !important;
  min-width:19cm !important;
  max-width:19cm !important;
  overflow:auto !important;
}
.list-19 .table-wrap{
  width:100% !important;
}
.list-19 table{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  table-layout:auto !important;
  display:table !important;
}
.list-19 th, .list-19 td{
  width:auto !important;
  white-space:normal !important;
}

/* Remove previous table block behavior in user pages */
body.user-ui main.container table{
  display:table !important;
  white-space:normal !important;
}

/* Subscriptions 8x5 cm (8 height, 5 width) */
.subscriptions-wrap{
  display:grid !important;
  grid-template-columns:repeat(5, 5cm) !important;
  gap:.35cm !important;
}
.subscription-card{
  width:5cm !important;
  height:8cm !important;
  min-height:8cm !important;
  max-height:8cm !important;
  overflow:auto !important;
}

/* ===== FINAL OVERRIDE 2 ===== */
.list-19{
  width:19cm !important;
  min-width:19cm !important;
  max-width:19cm !important;
  overflow:auto !important;
}
.list-19 table,
.list-19 .table-compact{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  table-layout:fixed !important;
  display:table !important;
}
.list-19 th, .list-19 td{
  white-space:normal !important;
  word-break:break-word !important;
}

/* ===== Match width to Trip Sheets / Fuel Invoices ===== */
body.page-vehicles .workbench-20,
body.page-employees .workbench-20,
body.page-routes .workbench-20{
  grid-template-columns:1fr !important;
}

body.page-vehicles .card-20,
body.page-employees .card-20,
body.page-routes .card-20{
  width:100% !important;
  min-width:0 !important;
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body.page-vehicles .list-19,
body.page-employees .list-19,
body.page-routes .list-19{
  width:100% !important;
  min-width:0 !important;
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Trip Sheets - align Basic data block to bottom-left */
.ts-basic .ts-row,
.ts-basic .ts-row-4,
.ts-basic .ts-row-5,
.ts-basic .ts-inline{
  padding-left:6px;
}

/* Trip Sheets - adjust driver select width */
.ts-basic select[name="driver_id"],
.ts-basic select[name="driver2_id"]{
  width: 200px; /* ~2cm по-малко */
  margin-left: 0;
}

/* Trip Sheets - driver selects width */
.ts-basic select[name="driver_id"],
.ts-basic select[name="driver2_id"]{
  width: 200px !important;
  min-width: 200px !important;
  margin-left: 0 !important;
}

/* Trip Sheets - align driver selects with vehicle select */
.ts-basic .ts-inline label{
  min-width: 170px !important; /* същото като при реда с Автомобил */
}
.ts-basic .ts-inline select{
  margin-left: 0 !important;
}

/* Trip Sheets - nudge driver selects 4mm right */
.ts-basic select[name="driver_id"],
.ts-basic select[name="driver2_id"]{
  margin-left:4mm !important;
}

/* Trip Sheets - nudge driver selects back 1mm */
.ts-basic select[name="driver_id"],
.ts-basic select[name="driver2_id"]{
  margin-left:3mm !important;
}

/* Trip Sheets - issuer select width -5mm */
.ts-basic select[name="issuer_id"]{
  width: 195px !important;
  min-width: 195px !important;
}

/* Trip Sheets - issuer select width -2.5mm */
.ts-basic select[name="issuer_id"]{
  width: 205px !important;
  min-width: 205px !important;
}

/* Trip Sheets - align issuer select to vehicle left edge */
.ts-basic select[name="issuer_id"]{
  margin-left:0 !important;
}

/* Trip Sheets - маршрути: един ред */
.ts-route-bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.ts-route-bar select{
  width:300px;
  min-width:300px;
  max-width:300px;
  flex:0 0 300px;
}
.ts-route-bar .btn{white-space:nowrap;}

/* Trip Sheets - маршрути: по-широко падащо меню */
.ts-route-bar select{
  width:678px !important;
  min-width:678px !important;
  max-width:678px !important;
  flex:0 0 678px !important;
}

/* Trip Sheets - маршрути: лека корекция ширина */
.ts-route-bar select{
  width:655px !important;
  min-width:655px !important;
  max-width:655px !important;
  flex:0 0 655px !important;
}

/* Trip Sheets - align Add button to the right */
#btn-add-route{
  margin-left:auto !important;
}

/* Trip Sheets - align issuer row to notes input left edge */
.ts-issuer-row{
  display:grid;
  grid-template-columns:170px 1fr 170px 1fr;
  column-gap:10px;
  align-items:center;
}

/* Trip Sheets - issuer row force alignment */
.ts-issuer-row{
  display:grid !important;
  grid-template-columns:170px 1fr 170px 1fr !important;
  column-gap:10px !important;
  align-items:center !important;
}
.ts-issuer-row select{
  margin-left:0 !important;
}



.lang-form{display:flex;gap:6px;align-items:center}
.lang-btn{padding:4px 8px;font-size:12px;line-height:1;border:1px solid #1a73e8;background:#1a73e8;color:#fff;border-radius:6px;cursor:pointer}
.lang-btn.active{background:#1a73e8;color:#fff;border-color:#1a73e8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.user-label{margin:0 8px;font-size:12px;color:#333;opacity:.8}


/* Header/Footer single-line layout (desktop) */
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}
.site-header nav{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  white-space:nowrap;
}
.site-header nav a{font-size:13px}
.site-header .auth{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
}




/* Allow wrap on smaller screens */
@media (max-width:1100px){
  .site-header .container,
  
  .site-header nav,
  
}


.btn-sm{
  padding:3px 8px;
  font-size:12px;
  line-height:1;
}
.btn.danger{
  background:#d93025;
  color:#fff;
  border:1px solid #d93025;
}


/* Smaller logout button in header */
.site-header .auth .btn{
  padding:4px 10px;
  font-size:12px;
  line-height:1;
}








/* Make Messages button match Logout size */
.site-header nav .nav-btn{
  padding:4px 10px;
  font-size:12px;
  line-height:1;
  border-radius:8px;
}

.nav-btn{
  padding:4px 10px;
  font-size:12px;
  line-height:1;
  border-radius:999px;
  background:#1a73e8;
  color:#fff !important;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav-btn:hover{
  background:#1669d2;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(26,115,232,.22);
}


.user-dropdown{position:relative;display:inline-block;}
.user-dropdown-menu{
  display:none;
  position:absolute;
  right:0;
  top:100%;
  background:#fff;
  border:1px solid #ddd;
  min-width:140px;
  z-index:20;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.user-dropdown-menu a{
  display:block;
  padding:8px 12px;
  color:#333;
  text-decoration:none;
  font-size:13px;
}
.user-dropdown-menu a:hover{background:#f5f7fb;}
.user-dropdown:hover .user-dropdown-menu{display:block;}
.user-label{cursor:pointer;}










/* Footer single line */
.site-footer .container{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.site-footer .footer-links{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.site-footer .footer-links a{color:#334155;text-decoration:none;line-height:1.2;}
.site-footer .footer-links a:hover{text-decoration:underline;}
.site-footer .copyright{position:relative;top:-5px;white-space:nowrap;}


/* Compact list cards */
.list-19{
  padding:10px !important;
  margin-bottom:12px !important;
}
.list-19 .table-wrap{
  margin-top:6px !important;
}
.table-compact th, .table-compact td{
  padding:6px 8px !important;
}


.list-controls{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  margin-bottom:6px;
}
.list-controls select{
  padding:2px 6px;
  font-size:12px;
}


/* Dynamic list heights */
.list-19{
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
}
.list-19 .table-wrap{
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:auto !important;
}


/* FINAL: dynamic list height override */
.user-ui .list-19{
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
}
.user-ui .list-19 .table-wrap{
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:auto !important;
}


/* Admin action buttons */
.admin-ui .btn.btn-sm{
  padding:4px 8px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:6px !important;
  margin-right:4px;
}
.admin-ui .btn.btn-sm.secondary{
  background:#e7eef9;
  color:#1a4fb6;
  border:1px solid #c6d6f3;
}


/* Admin users plan select width */
.admin-ui .plan-select{
  max-width:160px !important;
  width:160px !important;
}


/* Admin users tighter controls */
.admin-ui .users-actions .btn{
  padding:3px 6px !important;
  font-size:11px !important;
  line-height:1 !important;
}
.admin-ui .plan-select{
  max-width:151px !important;
  width:151px !important;
}
/* Admin users: make block/plan buttons extra small */
.admin-ui .users-actions form .btn{
  padding:2px 4px !important;
  font-size:10px !important;
  line-height:1 !important;
}



/* Extra small buttons */
.btn-xs{
  padding:2px 4px !important;
  font-size:10px !important;
  line-height:1 !important;
  border-radius:5px !important;
}
/* Admin users: compact expiry column */
.admin-ui .users-expire{
  font-size:11px !important;
  white-space:nowrap;
}\n\n
/* Admin users: force compact expiry column */
.admin-ui table td.users-expire{
  font-size:10px !important;
  line-height:1 !important;
  padding:4px 6px !important;
  white-space:nowrap !important;
}
\n\n\n
/* Admin payments search input wider */
.admin-ui body.page-admin-payments-php .panel input[type="text"]{
  width:480px !important;
  max-width:480px !important;
}
\n\n\n
/* Admin payments: wider table area */
.admin-ui body.page-admin-payments-php main.container{
  max-width:1180px !important;
}
.admin-ui body.page-admin-payments-php .table-wrap{
  max-width:1180px !important;
}
\n\n\n
/* Admin payments: wider table area (fixed selector) */
.admin-ui.page-admin-payments-php main.container{
  max-width:1180px !important;
}
.admin-ui.page-admin-payments-php .table-wrap{
  max-width:1180px !important;
}
\n\n\n
/* Admin payments: wider table so actions fit */
body.admin-ui.page-admin-payments-php main.container{
  max-width:1200px !important;
}
body.admin-ui.page-admin-payments-php .table-wrap{
  overflow-x:auto !important;
}
body.admin-ui.page-admin-payments-php table{
  min-width:1150px !important;
}
body.admin-ui.page-admin-payments-php td:last-child{
  white-space:nowrap;
}
\n
/* Limit banner */
.limit-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  background:linear-gradient(135deg,#fff1f1 0%, #ffe4e6 100%);
  border:1px solid #f3b4b8;
  border-left:6px solid #c0392b;
  color:#7a1f1f;
  padding:12px 14px;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(192,57,43,.08);
  margin:12px 0;
}
.limit-banner strong{font-weight:700}
.limit-banner .limit-cta{
  background:#c0392b;
  color:#fff !important;
  padding:6px 10px;
  font-size:12px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}
.limit-banner .limit-cta:hover{
  background:#a92f24;
}

.limit-banner .limit-text{display:flex;flex-direction:column;gap:4px}

/* Force limit banner layout */
.limit-banner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
}
.limit-banner .limit-text{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  flex:1 1 auto !important;
}
.limit-banner .limit-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:auto !important;
  flex:0 0 auto !important;
}

/* Shift upgrade button left by 200px */
.limit-banner .limit-cta{
  margin-right:0 !important;
}

/* smaller, red banner text */
.limit-banner{padding:8px 10px !important}
.limit-banner .limit-text strong{color:#c0392b !important;font-size:16px !important;font-weight:700}

/* force single-line banner */
.limit-banner{flex-wrap:nowrap !important}
.limit-banner .limit-text{white-space:normal !important; overflow:visible;}

/* shift upgrade button right */
.limit-banner .limit-cta{margin-left:12px !important;}

/* Fix limit banner layout */
.limit-banner{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;flex-wrap:nowrap !important}
.limit-banner .limit-text{flex:1 1 auto !important}
.limit-banner .limit-cta{margin-left:12px !important;flex:0 0 auto !important}

/* shift upgrade button left by 200px */
.limit-banner .limit-cta{margin-left:-200px !important;}

/* Force Messages button size to match Logout */
.site-header nav .nav-btn{
  padding:4px 10px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:8px !important;
  height:auto !important;
}
.nav-btn{
  padding:4px 10px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:8px !important;
}

/* Messages button forced small */
.nav-btn.nav-btn-small{
  padding:4px 10px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transform:none !important;
}

/* FINAL OVERRIDE: messages button size */
body.user-ui header.site-header nav a.nav-btn.nav-btn-small{
  padding:4px 10px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transform:none !important;
}

/* FINAL SIZE FIX for Messages button */
body.user-ui header.site-header nav a.nav-btn.nav-btn-small{
  padding:4px 10px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:8px !important;
  height:22px !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Limit banner layout - clean */
.limit-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(135deg,#fff1f1 0%, #ffe4e6 100%);
  border:1px solid #f3b4b8;
  border-left:6px solid #c0392b;
  color:#7a1f1f;
  padding:10px 12px;
  border-radius:10px;
  margin:12px 0;
}
.limit-text{flex:1;display:flex;flex-direction:column;gap:4px}
.limit-text strong{color:#c0392b;font-size:16px;font-weight:700}
.limit-sub{color:#7a1f1f;opacity:.85;font-size:13px}
.limit-actions{flex:0 0 auto}
.limit-cta{
  background:#c0392b;
  color:#fff !important;
  padding:6px 10px;
  font-size:12px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}
.limit-cta:hover{background:#a92f24}

/* ---- LIMIT BANNER FINAL ---- */
.limit-banner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  background:linear-gradient(135deg,#fff1f1 0%, #ffe4e6 100%) !important;
  border:1px solid #f3b4b8 !important;
  border-left:6px solid #c0392b !important;
  color:#c0392b !important;
  padding:8px 12px !important;
  border-radius:10px !important;
  margin:12px 0 !important;
}
.limit-text{flex:1 1 auto !important; min-width:0 !important;}
.limit-text strong{font-size:16px !important; color:#c0392b !important; font-weight:700 !important;}
.limit-actions{flex:0 0 auto !important;}
.limit-cta{
  background:#c0392b !important;
  color:#fff !important;
  padding:6px 10px !important;
  font-size:12px !important;
  border-radius:8px !important;
  text-decoration:none !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

/* ---- MESSAGES BUTTON SIZE (FINAL) ---- */
body.user-ui header.site-header nav a.nav-btn.nav-btn-small{
  padding:4px 10px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:8px !important;
  height:22px !important;
  box-shadow:none !important;
  transform:none !important;
}

/* ---- WIDER INPUTS for vehicles/employees/routes ---- */
body.page-vehicles input,
body.page-vehicles select,
body.page-employees input,
body.page-employees select,
body.page-routes input,
body.page-routes select{
  width:100% !important;
  max-width:100% !important;
}

/* ===== FINAL OVERRIDES (2026-03-25) ===== */
.site-header nav a.nav-btn.nav-btn-small{
  padding:4px 10px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  top:10px !important; /* move Messages down 10px */
}

/* Limit banner: keep text + button aligned and not overlapping */
.limit-banner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}
.limit-text{flex:1 1 auto !important; min-width:0 !important;}
.limit-cta{white-space:nowrap !important; margin-left:12px !important;}

/* Make narrow fields full width on these pages */
body.page-vehicles input,
body.page-vehicles select,
body.page-employees input,
body.page-employees select,
body.page-routes input,
body.page-routes select{
  max-width:100% !important;
}

/* ===== FINAL OVERRIDES (2026-03-25-B) ===== */
.site-header nav a.nav-btn.nav-btn-small{
  position:relative !important;
  top:8px !important; /* down 8px total => 2px up from previous 10px */
}

/* Make form controls full width on vehicles/employees/routes */
body.page-vehicles input,
body.page-vehicles select,
body.page-vehicles textarea,
body.page-employees input,
body.page-employees select,
body.page-employees textarea,
body.page-routes input,
body.page-routes select,
body.page-routes textarea{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

body.page-vehicles input[type="number"],
body.page-vehicles input[type="date"],
body.page-employees input[type="number"],
body.page-employees input[type="date"],
body.page-routes input[type="number"],
body.page-routes input[type="date"]{
  max-width:100% !important;
}

/* make grid columns not look narrow */
body.page-vehicles .grid2,
body.page-employees .grid2,
body.page-routes .grid2{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
/* ===== END FINAL OVERRIDES (2026-03-25-B) ===== */

/* ===== FINAL OVERRIDES (2026-03-25-D) ===== */
.site-header nav a.nav-btn.nav-btn-small{
  position:relative !important;
  top:8px !important; /* move Messages down 8px total (2px up) */
}

/* Match Vehicles/Employees/Routes menu width to Invoices/Trip Sheets */
body.page-vehicles .container,
body.page-employees .container,
body.page-routes .container{
  width:min(1100px,94%) !important;
}
body.page-vehicles main.container,
body.page-employees main.container,
body.page-routes main.container{
  max-width:1100px !important;
}
body.page-vehicles main.container > *,
body.page-employees main.container > *,
body.page-routes main.container > *{
  max-width:1100px !important;
}
body.page-vehicles .card,
body.page-employees .card,
body.page-routes .card,
body.page-vehicles .list-19,
body.page-employees .list-19,
body.page-routes .list-19{
  width:100% !important;
  max-width:1100px !important;
}
/* ===== END FINAL OVERRIDES (2026-03-25-D) ===== */

/* ===== FINAL OVERRIDES (2026-03-25-E) ===== */
.site-header nav a.nav-btn.nav-btn-small{
  position:relative !important;
  top:6px !important; /* 2px up from 8px */
}

/* Make ALL user pages same width as invoices/trip-sheets */
body.user-ui .container{
  width:min(1100px,94%) !important;
}
body.user-ui main.container{
  max-width:1100px !important;
}
body.user-ui main.container > *{
  max-width:1100px !important;
}
/* ===== END FINAL OVERRIDES (2026-03-25-E) ===== */

/* ===== PAGE WIDTH OVERRIDE (2026-03-25-F) ===== */
body.page-vehicles .container,
body.page-employees .container,
body.page-routes .container{
  width:min(1100px,94%) !important;
}
body.page-vehicles main.container,
body.page-employees main.container,
body.page-routes main.container{
  max-width:1100px !important;
}
body.page-vehicles main.container > *,
body.page-employees main.container > *,
body.page-routes main.container > *{
  max-width:1100px !important;
}
/* ===== END PAGE WIDTH OVERRIDE (2026-03-25-F) ===== */

/* ===== GLOBAL USER WIDTH (2026-03-25-G) ===== */
body.user-ui .container{
  width:min(1100px,94%) !important;
}
body.user-ui main.container{
  max-width:1100px !important;
}
body.user-ui main.container > *{
  max-width:1100px !important;
}
/* force any page-narrow overrides to align */
body.user-ui .page-narrow,
body.user-ui .page-narrow h1,
body.user-ui .page-narrow h2,
body.user-ui .page-narrow h3,
body.user-ui .page-narrow form,
body.user-ui .page-narrow .card,
body.user-ui .page-narrow .panel,
body.user-ui .page-narrow table,
body.user-ui .page-narrow .table-wrap{
  max-width:1100px !important;
}
/* ===== END GLOBAL USER WIDTH (2026-03-25-G) ===== */


/* ===== WIDTH FIX (2026-03-26) ===== */
body.page-vehicles main.container,
body.page-employees main.container,
body.page-routes main.container{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  justify-content:initial !important;
  align-items:initial !important;
}
body.page-vehicles main.container > *,
body.page-employees main.container > *,
body.page-routes main.container > *{
  width:100% !important;
  min-width:0 !important;
  max-width:1100px !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
/* ===== END WIDTH FIX (2026-03-26) ===== */