/* DisplayBoard v10 – UI Refresh (Light + Responsive, RTL)
   - Cleaner spacing + modern cards
   - Better typography + variable scale
   - Mobile-first layout tuning
   - Accessible focus, states, subtle motion
*/

/* ----------------------------------
   Font (placeholder)
----------------------------------- */
@font-face {
  font-family: "IRANSans";
  src: url("../assets/IRANSansWeb.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------
   Theme tokens
----------------------------------- */
:root{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #0ea5e9;
  --primary-600: #0284c7;
  --primary-50: #e0f2fe;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --border: #e5e7eb;
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --ring: 0 0 0 3px rgba(14, 165, 233, .25);
}

/* ----------------------------------
   Base
----------------------------------- */
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: IRANSans, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction:rtl;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
hr{border:none; border-top:1px solid var(--border); margin:16px 0}

.muted{ color:var(--muted); }
.kpi{ font-weight:900; font-size:clamp(18px, 2.2vw, 28px); letter-spacing:-.2px }

.mt{ margin-top:12px }
.mt-lg{ margin-top:20px }

/* ----------------------------------
   Navbar
----------------------------------- */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.navbar .wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.brand{
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: clamp(16px, 2vw, 20px);
}

.nav{
  display: inline-flex;
  gap: 8px;
  overflow:auto;
  max-width: 100%;
  padding-bottom: 4px;
}

.nav a{
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
  transition: all .18s ease;
  font-weight: 600;
  font-size: 13px;
}
.nav a:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.nav a.active{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(14,165,233,.25);
}

#btn-logout{
  justify-self: start;
}

/* ----------------------------------
   Layout
----------------------------------- */
.container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
}

.grid{ display:grid; gap:16px }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

/* ----------------------------------
   Card
----------------------------------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 18px);
  box-shadow: var(--shadow);
}
.card:hover{ box-shadow: 0 8px 30px rgba(15,23,42,.08) }
.card h1,.card h2,.card h3,.card h4{ margin: 0 0 10px 0 }
.card h3{ font-size: clamp(16px, 1.6vw, 18px); }

/* ----------------------------------
   Controls
----------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  border:1px solid var(--border);
  background:#fff;
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  font-weight:700;
  cursor:pointer;
  transition: all .16s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0); }
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary) }
.btn.primary:hover{ background:var(--primary-600) }
.btn.small{ padding:6px 10px; font-weight:600; font-size:12px }
.btn.ghost{ background:transparent }
.btn[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none }

.input, .select, .textarea, .file{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  outline:none;
  transition: box-shadow .16s ease, border-color .16s ease;
  font-size: 14px;
}
.textarea{ min-height: 120px }
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.file{ display:block }

.toolbar{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}

/* ----------------------------------
   Pills / badges / chips
----------------------------------- */
.pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:#f1f5f9; border-radius:999px; font-size:12px }
.badge{ display:inline-block; padding:2px 10px; border-radius:999px; background:#eaf5ff; color:#0369a1; font-size:12px }

/* ----------------------------------
   Media
----------------------------------- */
.thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(2,6,23,.05);
  transition: transform .2s ease;
}
.thumb:hover{ transform: scale(1.01) }

/* ----------------------------------
   Tables (responsive)
----------------------------------- */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid var(--border); padding: 10px 8px; text-align:right; }
.table th{ color:var(--muted); font-weight:800 }
@media (max-width:680px){
  .table thead{ display:none; }
  .table tr{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; padding:10px 0; }
  .table td{ border:none; padding:0 }
  .table td::before{ content: attr(data-label); color:var(--muted); font-weight:700; margin-left:8px }
}

/* ----------------------------------
   References (mint rows with handle + pencil)
----------------------------------- */
.ref-row{
  display:flex; align-items:center;
  background: linear-gradient(90deg, #bbf7d0, #a7f3d0);
  border-radius: var(--radius-sm);
  margin:10px 0; overflow:hidden;
  border:1px solid rgba(0,0,0,.05);
  box-shadow: 0 4px 16px rgba(2,6,23,.06);
}
.ref-row .handle{
  width:56px; min-width:56px; background:#059669; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; user-select:none;
}
.ref-row .handle::before{ content:'⇵'; font-size:20px }
.ref-row .label{ flex:1; padding:12px 14px; font-weight:700 }
.ref-row .actions{ width:84px; min-width:84px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px }
.btn-icon{ width:32px; height:32px; border-radius:10px; border:1px solid rgba(0,0,0,.1); background:#fff; cursor:pointer }
.btn-pen::before{ content:'✎' }
.btn-del::before{ content:'✕' }

/* ----------------------------------
   Footer
----------------------------------- */
.footer{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  padding:24px 16px 40px;
}

/* ----------------------------------
   Motion pref (reduced)
----------------------------------- */
@media (prefers-reduced-motion: reduce){
  .btn, .thumb, .nav a{ transition:none }
}

/* ----------------------------------
   Utilities
----------------------------------- */
.shadow-sm{ box-shadow: var(--shadow) }
.rounded{ border-radius: var(--radius) }
.hidden{ display:none !important }
.center{ text-align:center }
.w-100{ width:100% }

/* ----------------------------------
   Dashboard: KPI cards alignment tweaks
----------------------------------- */
.kpi-card{ display:flex; flex-direction:column; gap:2px }
.kpi-card .muted{ font-size:12px }

/* ----------------------------------
   Mobile adjustments
----------------------------------- */
@media (max-width:480px){
  .navbar .wrap{ grid-template-columns: 1fr auto auto }
  #btn-logout{ order:-1; }
  .toolbar{ gap:8px }
  .btn{ padding:9px 12px }
  .input,.select,.textarea{ padding:9px 10px }
}