/* ============================================================
   JAPANESE AUTO TRADING SYSTEM — design tokens
   Palette:  ink #14202B · paper #F7F5F0 · vermilion #C74C2D
             jade #2F7A5E (profit) · rust-red #B23A3A (loss)
             gold #C99A3C (in-stock accent)
   Type: Noto Sans JP (display/body) + IBM Plex Mono (data/numbers)
   Signature: registration-plate chip used for brand mark & badges
   ============================================================ */

:root{
  --ink:        #14202B;
  --ink-2:      #1D2E3D;
  --paper:      #F7F5F0;
  --paper-2:    #FFFFFF;
  --line:       #E4E0D6;
  --text:       #23292E;
  --muted:      #6B7280;
  --vermilion:  #C74C2D;
  --vermilion-d:#A93D22;
  --jade:       #2F7A5E;
  --jade-bg:    #E7F3EE;
  --rust:       #B23A3A;
  --rust-bg:    #FBEAEA;
  --gold:       #C99A3C;
  --gold-bg:    #FBF3DF;
  --radius:     10px;
  --shadow:     0 1px 2px rgba(20,32,43,.06), 0 6px 20px rgba(20,32,43,.06);
  --font-display: 'Noto Sans JP', 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-display);
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; margin:0 0 4px; }
table{ border-collapse:collapse; width:100%; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px; flex:0 0 250px;
  background:linear-gradient(180deg,var(--ink),var(--ink-2));
  color:#DCE3E9;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:12px; padding:22px 20px 16px; }
.brand-mark{
  font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--ink);
  background:#fff; border:3px solid var(--vermilion);
  border-radius:6px; padding:4px 8px; letter-spacing:1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.brand-text strong{ display:block; font-size:15px; color:#fff; }
.brand-text small{ display:block; font-size:11px; color:#9AA7B2; letter-spacing:.5px; }

.sidenav{ display:flex; flex-direction:column; padding:8px 12px 24px; gap:2px; }
.sidenav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; font-size:14px; color:#C4CCD4;
  transition:background .15s, color .15s;
}
.sidenav a .ic{ font-size:15px; width:18px; text-align:center; }
.sidenav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidenav a.active{ background:var(--vermilion); color:#fff; font-weight:500; }
.nav-divider{
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:#6B7A87;
  padding:16px 12px 4px;
}

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:16px 28px; background:var(--paper-2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.page-title{ font-size:19px; flex:1; }
.topbar-right{ display:flex; align-items:center; gap:12px; }
.user-chip{ font-size:13px; color:var(--muted); }
.menu-toggle{ display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink); }

.content{ padding:24px 28px 40px; flex:1; }
.app-footer{ padding:16px 28px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); }

/* ---------- Cards / KPIs ---------- */
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.card + .card{ margin-top:20px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.card-head h2{ font-size:15px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink); }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
.kpi{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--vermilion);
}
.kpi.jade::before{ background:var(--jade); }
.kpi.rust::before{ background:var(--rust); }
.kpi.gold::before{ background:var(--gold); }
.kpi-label{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.kpi-value{ font-family:var(--font-mono); font-size:26px; font-weight:600; margin-top:6px; color:var(--ink); }
.kpi-value.jade{ color:var(--jade); }
.kpi-value.rust{ color:var(--rust); }

/* ---------- Plate badge (signature element) ---------- */
.plate{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:5px; border:2px solid currentColor; letter-spacing:.5px;
}
.plate.st-instock{ color:var(--gold); background:var(--gold-bg); }
.plate.st-sold{ color:var(--jade); background:var(--jade-bg); }
.plate.st-reserved{ color:#5568C9; background:#EAEBFB; }
.plate.st-repair{ color:var(--rust); background:var(--rust-bg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-display); font-size:13.5px; font-weight:500; cursor:pointer;
  border-radius:8px; padding:10px 16px; border:1px solid transparent; transition:filter .15s, background .15s;
}
.btn:hover{ filter:brightness(0.95); }
.btn-primary{ background:var(--vermilion); color:#fff; }
.btn-primary:hover{ background:var(--vermilion-d); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--text); }
.btn-ghost{ background:transparent; color:var(--muted); }
.btn-ghost:hover{ background:var(--paper); }
.btn-danger{ background:var(--rust-bg); color:var(--rust); }
.btn-sm{ padding:6px 11px; font-size:12.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Forms ---------- */
label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:4px; font-weight:500; }
input,select,textarea{
  width:100%; font-family:var(--font-display); font-size:14px; color:var(--text);
  padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff;
  transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--vermilion); box-shadow:0 0 0 3px rgba(199,76,45,.12); }
input.mono, .form-grid input[type=number]{ font-family:var(--font-mono); }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px 16px; }
.form-grid .full{ grid-column:1 / -1; }
.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
fieldset{ border:1px solid var(--line); border-radius:10px; padding:16px; margin:0 0 18px; }
legend{ font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--vermilion); font-weight:700; padding:0 6px; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table.data{ font-size:13px; min-width:720px; }
table.data thead th{
  background:var(--ink); color:#E8ECEF; text-align:left; padding:10px 12px;
  font-weight:500; white-space:nowrap; position:sticky; top:0;
}
table.data tbody td{ padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.data tbody tr:hover{ background:#FBFAF7; }
table.data tbody tr:last-child td{ border-bottom:none; }
table.data td.num, table.data th.num{ text-align:right; font-family:var(--font-mono); }
.text-jade{ color:var(--jade); font-weight:600; }
.text-rust{ color:var(--rust); font-weight:600; }
.row-actions{ display:flex; gap:6px; }
.icon-btn{
  border:1px solid var(--line); background:#fff; border-radius:6px; padding:5px 8px; cursor:pointer; font-size:13px;
  display:inline-block; text-decoration:none; color:inherit; line-height:1;
}
.icon-btn:hover{ background:var(--paper); }
.empty-row td{ text-align:center; color:var(--muted); padding:30px !important; }

/* ---------- Toolbar ---------- */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.toolbar .search-box{ flex:1; min-width:200px; max-width:320px; }
.toolbar select{ width:auto; min-width:150px; }
.spacer{ flex:1; }

/* ---------- Alerts / toasts ---------- */
.alert{ padding:11px 14px; border-radius:8px; font-size:13.5px; margin-bottom:14px; }
.alert-error{ background:var(--rust-bg); color:var(--rust); }
.alert-success{ background:var(--jade-bg); color:var(--jade); }
.toast{
  position:fixed; bottom:24px; right:24px; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:8px; font-size:13.5px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(10px); transition:all .25s; pointer-events:none; z-index:999;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.err{ background:var(--rust); }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,32,43,.5); display:none;
  align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:100;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:#fff; border-radius:14px; width:100%; max-width:760px; box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:pop .18s ease-out;
}
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:16px; }
.modal-close{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); }
.modal-body{ padding:20px 22px; max-height:70vh; overflow-y:auto; }

/* ---------- Chips / nav pills on subpages ---------- */
.pill-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.pill-tabs a{
  padding:8px 14px; border-radius:20px; font-size:13px; border:1px solid var(--line); color:var(--text);
}
.pill-tabs a.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Home hero ---------- */
.hero{
  background:linear-gradient(120deg,var(--ink),var(--ink-2));
  border-radius:16px; padding:36px 32px; color:#fff; margin-bottom:24px; position:relative; overflow:hidden;
}
.hero::after{
  content:"車"; position:absolute; right:24px; top:50%; transform:translateY(-50%);
  font-size:130px; opacity:.06; font-weight:900;
}
.hero h1{ font-size:26px; color:#fff; }
.hero p{ color:#B9C2CA; margin:6px 0 0; font-size:14px; }

.quick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.quick-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s;
}
.quick-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,32,43,.12); }
.quick-card .ic{ font-size:22px; }
.quick-card h3{ font-size:15px; margin:10px 0 4px; }
.quick-card p{ font-size:12.5px; color:var(--muted); margin:0; }

.tips-list{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.9; color:var(--text); }

/* ---------- Login ---------- */
.login-body{ background:radial-gradient(circle at 20% 20%,#1D2E3D,#0D151D 70%); display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-wrap{ text-align:center; }
.login-plate{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  background:#fff; border:5px solid var(--vermilion); border-radius:10px; padding:10px 26px; margin-bottom:22px;
}
.plate-top{ font-family:var(--font-mono); font-weight:700; font-size:20px; letter-spacing:3px; color:var(--ink); }
.plate-num{ font-family:var(--font-mono); font-size:11px; color:var(--vermilion); letter-spacing:1px; }
.login-card{
  background:#fff; border-radius:16px; padding:34px 36px; width:380px; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-card h1{ font-size:18px; }
.login-sub{ font-size:12.5px; color:var(--muted); margin:4px 0 20px; }
.login-form label{ text-align:left; margin-top:14px; }
.login-hint{ font-size:11.5px; color:var(--muted); margin-top:16px; }

/* ---------- Print (Invoice) ---------- */
@media print{
  .sidebar,.topbar,.app-footer,.no-print{ display:none !important; }
  .content{ padding:0; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:none; }
}

/* ---------- Export Invoice: bilingual label toggling ---------- */
.lbl-en, .lbl-jp{ display:inline; }
.lang-en .lbl-jp{ display:none; }
.lang-jp .lbl-en{ display:none; }
.lang-both .lbl-en::after{ content:" ／ "; color:var(--muted); font-weight:400; }
.btn-sm{ padding:5px 10px; font-size:12px; }

/* ============================================================
   COMPACT INVOICE LAYOUT — matches the original POLA commercial
   invoice format: thick outer border, boxed grid sections,
   dense label/value rows, dark header row on the vehicle table.
   Used by #printArea (Invoice/PO) and #eiPrintArea (Export Invoice).
   ============================================================ */
.inv-doc{
  border:3px solid var(--vermilion); border-radius:4px; padding:14px 16px;
  font-size:11.5px; line-height:1.35; color:var(--ink); background:#fff;
  max-width:1000px; margin:0 auto;
}
.inv-doc h2, .inv-doc h3{ margin:0; }
.inv-top{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start; padding-bottom:8px; border-bottom:2px solid var(--vermilion); margin-bottom:10px; }
.inv-brand{ font-size:19px; font-weight:800; color:var(--vermilion); letter-spacing:.3px; }
.inv-brand-sub{ font-size:10.5px; color:var(--muted); margin-top:2px; }
.inv-doctitle{ font-size:18px; font-weight:800; letter-spacing:1px; text-align:right; }

.inv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.inv-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:8px; }
.inv-box{ border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.inv-box-head{
  background:var(--ink); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.4px;
  padding:4px 8px; text-transform:uppercase;
}
.inv-box-head.gold{ background:var(--gold); color:var(--ink); }
.inv-box-body{ padding:6px 8px; }
.inv-row{ display:flex; justify-content:space-between; gap:8px; padding:2.5px 0; border-bottom:1px dashed var(--line); }
.inv-row:last-child{ border-bottom:none; }
.inv-row .k{ color:var(--muted); font-size:10.8px; white-space:nowrap; }
.inv-row .v{ font-weight:600; text-align:right; font-size:11px; word-break:break-word; }

.inv-grand{
  background:var(--vermilion); color:#fff; border-radius:3px; padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center;
}
.inv-grand .lbl{ font-size:12px; font-weight:700; letter-spacing:.5px; }
.inv-grand .amt{ font-size:20px; font-weight:800; font-family:var(--font-mono); }

.inv-table{ width:100%; border-collapse:collapse; font-size:10.8px; margin-bottom:8px; }
.inv-table caption{ text-align:left; font-size:11.5px; font-weight:700; color:var(--vermilion); padding:4px 0; caption-side:top; }
.inv-table th{
  background:var(--ink); color:#fff; font-size:9.8px; font-weight:700; text-transform:uppercase;
  padding:5px 6px; text-align:left; border:1px solid var(--ink);
}
.inv-table th.num, .inv-table td.num{ text-align:right; }
.inv-table td{ padding:4px 6px; border:1px solid var(--line); }
.inv-table tbody tr:nth-child(even){ background:var(--paper); }

.inv-sign{ display:flex; justify-content:space-between; margin-top:22px; }
.inv-sign div{ border-top:1px solid var(--ink); width:200px; padding-top:4px; font-size:10.5px; color:var(--muted); }

@media print{
  .inv-doc{ border-width:2.5px; font-size:10.5px; }
  .inv-grand .amt{ font-size:17px; }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .sidebar{ position:fixed; left:-260px; z-index:50; transition:left .2s; box-shadow:0 0 40px rgba(0,0,0,.3); }
  .sidebar.open{ left:0; }
  .menu-toggle{ display:block; }
  .content{ padding:18px; }
  .topbar{ padding:14px 16px; }
}

/* ============================================================
   EXPORT INVOICE CUSTOM LAYOUT
   Shipment Details LEFT
   Grand Total + Totals RIGHT
   ============================================================ */

.invoice-summary-bottom{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    margin-top:8px;
    margin-bottom:8px;
    width:100%;
}


/* Shipment Details Box */
.invoice-summary-bottom .inv-box{
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    height:100%;
}


.invoice-summary-bottom .inv-box-head{
    background:var(--ink);
    color:#fff;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.4px;
    padding:4px 8px;
    text-transform:uppercase;
}


/* Gold Shipment Header */
.invoice-summary-bottom .inv-box-head.gold{
    background:var(--gold);
    color:var(--ink);
}


.invoice-summary-bottom .inv-box-body{
    padding:6px 8px;
}


/* Right Side Grand Total */
.invoice-summary-bottom .inv-grand{

    background:var(--vermilion);
    color:#fff;

    border-radius:3px;

    padding:10px 12px;

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

    margin-bottom:8px;
}


.invoice-summary-bottom .inv-grand .lbl{

    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;

}


.invoice-summary-bottom .inv-grand .amt{

    font-size:20px;
    font-weight:800;
    font-family:var(--font-mono);

}


/* Totals box spacing */
.invoice-summary-bottom .inv-row{

    padding:2.5px 0;

}


/* Keep layout together when printing */
@media print{

    .invoice-summary-bottom{

        page-break-inside:avoid;

    }


    .invoice-summary-bottom .inv-grand .amt{

        font-size:18px;

    }

}
/* =========================================
   Invoice Logo Final Adjustment
   ========================================= */

.invoice-logo{
    width:220px;
    height:auto;
    display:block;
    margin-top:-15px;
    margin-bottom:5px;
}


/* Logo wrapper alignment */
.inv-brand-wrap{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
}

/* =====================================
   Reports Page Layout Fix
   ===================================== */

.report-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:24px;
    width:100%;
    overflow:hidden;
}


.report-grid > div{
    min-width:0;
    width:100%;
}


/* Fix tables overflowing */
.report-grid .table-wrap{
    width:100%;
    overflow:hidden;
}


.report-grid table.data{
    width:100% !important;
    table-layout:fixed;
}


/* Make columns fit */
table.data th,
table.data td{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}


/* Number columns */
.report-grid table.data .num{
    text-align:right;
}


/* Responsive */
@media(max-width:900px){

    .report-grid{
        grid-template-columns:1fr !important;
    }

}

.report-grid{
    background:red !important;
}
/* Reports Table Final Width Fix */

.report-grid .data{
    width:100%;
    table-layout:fixed;
}


.report-grid .data th,
.report-grid .data td{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* First column text space */
.report-grid .data th:first-child,
.report-grid .data td:first-child{
    width:35%;
}


/* Number columns */
.report-grid .data th:not(:first-child),
.report-grid .data td:not(:first-child){
    width:16%;
    text-align:right;
}


/* Keep card clean */
.report-grid{
    overflow:hidden;
}

.report-grid{
    background:red !important;
}
/* REPORTS EMERGENCY FIX */

.card{
    max-width:100% !important;
    box-sizing:border-box;
}

.card > div{
    min-width:0 !important;
}

.table-wrap{
    max-width:100% !important;
    overflow-x:hidden !important;
}

table.data{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
}

table.data th,
table.data td{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}