/* ============================================================
   Car Show & Sell — Design System
   RTL Kurdish (Sorani) · responsive · premium automotive admin
   ============================================================ */

:root{
  --bg:        #f3f4f6;
  --surface:   #ffffff;
  --sidebar:   #14161b;
  --sidebar-2: #1c1f27;
  --accent:    #e0a82e;   /* warm gold — premium showroom */
  --accent-d:  #c8902020;
  --accent-ink:#7a5a00;
  --text:      #181b21;
  --muted:     #6b7280;
  --border:    #e5e7eb;
  --in:        #1f9d55;   /* money in  */
  --out:       #d64545;   /* money out */
  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(16,19,28,.04), 0 8px 24px rgba(16,19,28,.06);
  --shadow-sm: 0 1px 3px rgba(16,19,28,.08);
  --sidebar-w: 260px;
  --head-h:    68px;
  --ff-head: "Noto Kufi Arabic", system-ui, sans-serif;
  --ff-body: "Noto Sans Arabic", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ font-size:16px; }
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.brand-text,.page-title,.stat-num{ font-family:var(--ff-head); }

a{ color:inherit; text-decoration:none; }

/* numbers / latin values sit left-to-right and align cleanly */
.ltr{ direction:ltr; unicode-bidi:isolate; }
.num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ---------------- Sidebar (right side, RTL) ---------------- */
.sidebar{
  position:fixed; top:0; bottom:0; right:0;
  width:var(--sidebar-w);
  background:linear-gradient(180deg, var(--sidebar-2), var(--sidebar));
  color:#cdd2da;
  display:flex; flex-direction:column;
  padding:22px 16px;
  z-index:50;
  overflow-y:auto;                     /* scroll when nav is taller than the screen */
  -webkit-overflow-scrolling:touch;    /* smooth scrolling on mobile */
}
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-thumb{ background:#ffffff22; border-radius:8px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }
.brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 22px; }
.brand-mark{
  width:46px; height:46px; border-radius:12px; overflow:hidden;
  display:grid; place-items:center;
  background:#0c0d10;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-text{ color:#fff; font-weight:700; font-size:1.15rem; }

.nav{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:var(--radius-sm);
  color:#aab1bd; font-weight:500; font-size:.97rem;
  transition:.18s; position:relative;
}
.nav a:hover{ background:#ffffff0d; color:#fff; }
.nav a.active{ background:#ffffff14; color:#fff; }
.nav a.active::before{
  content:""; position:absolute; right:0; top:9px; bottom:9px;
  width:3px; border-radius:3px; background:var(--accent);
}

.sidebar-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.sidebar-rate{
  padding:14px 16px; border-radius:var(--radius-sm);
  background:#ffffff0a; border:1px solid #ffffff12;
}
.rate-label{ font-size:.78rem; color:#8b919c; margin-bottom:3px; }
.rate-value{ color:#fff; font-weight:600; }
.rate-value .ltr{ color:var(--accent); }

/* ---------------- Main content ---------------- */
.content{ margin-right:var(--sidebar-w); min-height:100vh; }
.topbar{
  height:var(--head-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 28px;
  position:sticky; top:0; z-index:30;
}
.page-title{ font-size:1.3rem; font-weight:700; }
.page{ padding:28px; max-width:1200px; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-body); font-weight:600; font-size:.95rem;
  padding:10px 18px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; transition:.16s;
  background:#eef0f3; color:var(--text);
}
.btn:hover{ filter:brightness(.97); }
.btn-primary{ background:var(--accent); color:#231a00; box-shadow:0 4px 14px rgba(224,168,46,.35); }
.btn-primary:hover{ background:#d39f29; filter:none; }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--muted); }
.btn-wa{ background:#25d366; color:#04340f; }
.btn-sm{ padding:7px 13px; font-size:.86rem; }

/* ---------------- Cards ---------------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.card-head h2{ font-size:1.08rem; font-weight:700; }
.card-body{ padding:22px; }

/* ---------------- Stat cards (dashboard) ---------------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:24px; }
.stat{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; inset-block:0; inset-inline-start:0;
  width:4px; background:var(--accent);
}
.stat-label{ color:var(--muted); font-size:.9rem; margin-bottom:8px; }
.stat-num{ font-size:1.8rem; font-weight:800; }
.stat-sub{ color:var(--muted); font-size:.85rem; margin-top:4px; }
.stat.green::after{ background:var(--in); }
.stat.red::after{   background:var(--out); }
.stat.gold::after{  background:var(--accent); }

/* ---------------- Forms ---------------- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-weight:600; font-size:.92rem; }
.field .hint{ color:var(--muted); font-size:.82rem; font-weight:400; }
.field input, .field select, .field textarea{
  font-family:var(--ff-body); font-size:.98rem;
  padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:#fff; color:var(--text); transition:.15s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-d);
}
/* English / numeric fields read left-to-right */
.field input.ltr-input{ direction:ltr; text-align:left; }
.field textarea{ resize:vertical; min-height:90px; }

.iqd-preview{
  background:#faf6ea; border:1px dashed var(--accent);
  border-radius:var(--radius-sm); padding:11px 14px; color:var(--accent-ink);
  font-weight:600;
}
.iqd-preview .num{ color:var(--accent-ink); }

.form-actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }

/* ---------------- Tables ---------------- */
.table-wrap{ overflow-x:auto; }
table.table{ width:100%; border-collapse:collapse; }
table.table thead th{
  text-align:right; font-size:.82rem; font-weight:700; color:var(--muted);
  text-transform:none; letter-spacing:0; padding:13px 16px;
  border-bottom:1px solid var(--border); white-space:nowrap; background:#fafafa;
}
table.table tbody td{ padding:14px 16px; border-bottom:1px solid var(--border); font-size:.95rem; }
table.table tbody tr:last-child td{ border-bottom:none; }
table.table tbody tr:hover{ background:#fcfbf7; }
.money-usd{ font-weight:700; }
.money-iqd{ color:var(--muted); font-size:.85rem; }

/* status badges */
.badge{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:.8rem; font-weight:700; }
.badge-available{ background:#e7f6ee; color:#1f7a43; }
.badge-sold{ background:#fdeaea; color:#b23232; }

/* ---------------- Empty / placeholder states ---------------- */
.empty{ text-align:center; padding:54px 20px; color:var(--muted); }
.empty .em-icon{ font-size:46px; opacity:.5; margin-bottom:10px; }
.soon{ text-align:center; padding:70px 24px; color:var(--muted); }
.soon .s-icon{ font-size:54px; opacity:.4; }
.soon h2{ color:var(--text); margin:14px 0 6px; }

/* ---------------- Flash ---------------- */
.flash{ padding:13px 18px; border-radius:var(--radius-sm); margin-bottom:20px; font-weight:600; }
.flash.success{ background:#e7f6ee; color:#1f7a43; border:1px solid #bfe6cf; }
.flash.error{ background:#fdeaea; color:#b23232; border:1px solid #f3c8c8; }

/* ---------------- Search ---------------- */
.searchbar{ display:flex; gap:10px; }
.searchbar input{ min-width:200px; }

/* ---------------- Mobile toggle / overlay ---------------- */
.menu-toggle{
  display:none; position:fixed; top:14px; right:14px; z-index:60;
  width:44px; height:44px; border-radius:12px; border:none; cursor:pointer;
  background:var(--sidebar); color:#fff; font-size:20px;
  box-shadow:var(--shadow);
}
.overlay{
  display:none; position:fixed; inset:0; background:rgba(10,12,16,.5); z-index:45;
}
.overlay.show{ display:block; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px){
  .content{ margin-right:0; }
  .menu-toggle{ display:grid; place-items:center; }
  .sidebar{ transform:translateX(100%); transition:transform .25s ease; }
  .sidebar.open{ transform:translateX(0); box-shadow:-8px 0 30px rgba(0,0,0,.3); }
  .topbar{ padding-right:70px; }
  .form-grid{ grid-template-columns:1fr; }
}

/* tables become stacked cards on phones */
@media (max-width: 680px){
  .page{ padding:16px; }
  table.table thead{ display:none; }
  table.table, table.table tbody, table.table tr, table.table td{ display:block; width:100%; }
  table.table tr{
    border:1px solid var(--border); border-radius:var(--radius-sm);
    margin-bottom:12px; padding:6px 4px; background:#fff;
  }
  table.table tbody td{
    border:none; display:flex; justify-content:space-between; align-items:center;
    gap:14px; padding:9px 14px; text-align:left;
  }
  table.table tbody td::before{
    content:attr(data-label); font-weight:700; color:var(--muted);
    font-size:.85rem; font-family:var(--ff-body);
  }
  .searchbar{ width:100%; }
  .searchbar input{ flex:1; min-width:0; }
}

/* ---------------- User box (sidebar) ---------------- */
.user-box{ padding:12px 14px; border-radius:var(--radius-sm); background:#ffffff0a; border:1px solid #ffffff12; }
.user-name{ color:#fff; font-weight:600; font-size:.92rem; }
.user-role{ color:#8b919c; font-size:.78rem; margin-top:2px; }
.user-links{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.user-links a{ color:#aab1bd; font-size:.84rem; transition:.15s; }
.user-links a:hover{ color:#fff; }
.user-links a.logout{ color:#e98a8a; }
.user-links a.logout:hover{ color:#ff9d9d; }

/* ---------------- Login page ---------------- */
.login-wrap{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(1200px 500px at 80% -10%, #1c1f2722, transparent),
    radial-gradient(900px 500px at 10% 110%, #e0a82e18, transparent),
    var(--bg);
}
.login-card{
  width:100%; max-width:400px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:34px 30px;
}
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:8px; }
.login-brand .brand-mark{ width:74px; height:74px; border-radius:16px; }
.login-brand-text{ font-family:var(--ff-head); font-weight:700; font-size:1.15rem; }
.login-title{ text-align:center; font-size:1.3rem; margin:6px 0 20px; }
.login-foot{ color:var(--muted); font-size:.85rem; margin-top:18px; }

/* ---------------- Car photos ---------------- */
/* list thumbnail */
.thumb{
  width:60px; height:44px; border-radius:8px; object-fit:cover;
  display:inline-block; vertical-align:middle; border:1px solid var(--border); background:#f3f4f6;
}
.thumb-empty{ display:inline-grid; place-items:center; color:#c2c7d0; font-size:20px; }

/* file input */
.file-input{
  font-family:var(--ff-body); font-size:.92rem;
  padding:9px 12px; border:1px dashed var(--accent); border-radius:var(--radius-sm);
  background:#faf6ea; color:var(--accent-ink); cursor:pointer; max-width:100%;
}
.file-input::file-selector-button{
  font-family:var(--ff-body); font-weight:600; cursor:pointer; margin-inline-end:10px;
  padding:7px 14px; border:none; border-radius:8px; background:var(--accent); color:#231a00;
}

/* detail rows on car page */
.detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.detail{ display:flex; flex-direction:column; gap:4px; text-align:right; }
.detail-k{ color:var(--muted); font-size:.82rem; text-align:right; }
.detail-v{ font-weight:600; font-size:1.02rem; text-align:right; }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; }
.gallery-item{ position:relative; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); background:#f3f4f6; aspect-ratio:4/3; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.gallery-item:hover img{ transform:scale(1.04); }
.gallery-item form{ margin:0; }
.gallery-del{
  position:absolute; top:8px; inset-inline-start:8px;
  width:30px; height:30px; border-radius:8px; border:none; cursor:pointer;
  background:rgba(20,22,27,.72); color:#fff; font-size:20px; line-height:1;
  display:grid; place-items:center;
}
.gallery-del:hover{ background:var(--out); }

@media (max-width: 680px){
  .detail-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
}