/* order-tracker - shared stylesheet. Neutral slate/blue palette suited to an
   internal ops dashboard (not a customer-facing brand surface). */
:root{
  --bg:#F3F5F9;
  --bg-soft:#FAFBFD;
  --ink:#1C2333;
  --ink-soft:#3E4763;
  --accent:#2F5FD1;
  --accent-dark:#24479E;
  --gold:#2F5FD1; /* alias kept so shared classes ported from patterns still read sensibly */
  --gold-soft:#6C8EE8;
  --muted:#6B7280;
  --card:#FFFFFF;
  --line:#E2E6EF;
  --danger:#C0392B;
  --success:#1F8A4C;
  --radius:14px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Vazirmatn', sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}

/* ===== Buttons / form fields ===== */
.btn-solid, .btn-ghost, .btn-danger{
  padding:10px 16px; border-radius:10px; border:none; font-family:inherit;
  font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn-solid{background:var(--accent); color:#fff;}
.btn-solid:hover{background:var(--accent-dark);}
.btn-solid:disabled{opacity:.6; cursor:default;}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent);}
.btn-ghost.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-danger{background:transparent; color:var(--danger); border:1px solid rgba(192,57,43,.35);}
.btn-xs{padding:6px 10px; font-size:11px;}

.field{margin-bottom:14px; text-align:right;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px;}
.field input[type="text"], .field input[type="password"], .field textarea, .field select{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; font-family:inherit; font-size:14px; outline:none;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--accent);}

/* ===== Auth page ===== */
.page-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-box{
  width:100%; max-width:400px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:28px 24px; box-shadow:0 20px 40px rgba(28,35,51,.08);
}
.auth-box h1{font-size:20px; margin:0 0 4px; text-align:center;}
.auth-box .sub{font-size:12.5px; color:var(--muted); text-align:center; margin:0 0 22px;}

.flash-error{ background:#FBEAEA; color:var(--danger); border:1px solid rgba(192,57,43,.25); padding:10px 12px; border-radius:10px; font-size:12.5px; margin-bottom:16px; }
.flash-success{ background:#EAF6EC; color:var(--success); border:1px solid rgba(31,138,76,.25); padding:10px 12px; border-radius:10px; font-size:12.5px; margin-bottom:16px; }

/* ===== Panel chrome ===== */
.panel-shell{ max-width:1100px; margin:0 auto; padding:20px 16px 80px; }
.panel-topbar{
  position:sticky; top:0; z-index:60; background:var(--ink); color:#fff;
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.panel-topbar .title{font-size:15px; font-weight:700;}
.panel-topbar .title small{display:block; font-size:11px; font-weight:400; color:#AEB6CC; margin-top:2px;}
.panel-topbar-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.panel-topbar .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.25); }
.panel-topbar .btn-ghost.active{ background:var(--accent); border-color:var(--accent); }

.admin-section{margin-bottom:24px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px;}
.cat-empty{ text-align:center; color:var(--muted); font-size:13px; padding:40px 20px; }

/* ===== Search + filters ===== */
.search-box{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.search-box input[type="text"]{
  flex:1 1 260px; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  font-family:inherit; font-size:14px; outline:none;
}
.search-box input:focus{border-color:var(--accent);}

.filter-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.filter-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:7px 12px; font-size:12px; font-weight:600; color:var(--ink-soft);
}
.filter-chip span{
  background:var(--bg); color:var(--muted); border-radius:999px; padding:1px 7px; font-size:11px;
}
.filter-chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.filter-chip.active span{ background:rgba(255,255,255,.22); color:#fff; }

/* ===== Bulk entry / order list table ===== */
.order-form-table-wrap{ overflow-x:auto; margin-bottom:14px; }
.order-form-table{ width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; }
.order-form-table th, .order-form-table td{
  padding:9px 10px; border-bottom:1px solid var(--line); font-size:12.5px; text-align:right; white-space:nowrap;
}
.order-form-table th{ background:var(--bg); color:var(--muted); font-weight:700; font-size:11.5px; }
.order-form-table td input, .order-form-table td select{
  width:100%; min-width:120px; padding:7px 8px; border-radius:8px; border:1px solid var(--line);
  font-family:inherit; font-size:12.5px; outline:none;
}
.order-form-table td input:focus, .order-form-table td select:focus{border-color:var(--accent);}
.order-list-table td, .order-list-table th{ white-space:normal; }
.order-code{ font-weight:700; letter-spacing:.3px; }

.add-row-btn{
  padding:10px 16px; border-radius:8px; border:1px dashed var(--accent);
  background:transparent; color:var(--accent-dark); font-family:inherit;
  font-size:12.5px; font-weight:600; cursor:pointer;
}

.icon-btn-sm{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
  background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:16px;
}
.icon-btn-sm:hover{color:var(--danger); border-color:rgba(192,57,43,.4);}

/* ===== Status badge + change popover ===== */
.status-badge{
  display:inline-block; font-size:11px; font-weight:700; padding:5px 12px; border-radius:20px;
  border:none; cursor:pointer; font-family:inherit;
}
.status-badge.status-new{ background:#EDEFF4; color:#4B5468; }
.status-badge.status-designing{ background:#E4ECFC; color:#2F5FD1; }
.status-badge.status-designed{ background:#E7E1FA; color:#5B3FC0; }
.status-badge.status-in_progress{ background:#FDECD8; color:#B4650F; }
.status-badge.status-done{ background:#DCF3EE; color:#0F7D67; }
.status-badge.status-packaged{ background:#F6E1F2; color:#9A2E85; }
.status-badge.status-shipped{ background:#E1F5E4; color:#1F8A4C; }

.status-control{ position:relative; display:inline-block; }
/* position:fixed (not absolute) so this escapes the horizontally-scrolling table wrapper's
   overflow clipping -- orders-list.js sets top/right inline from the trigger's viewport rect
   every time it opens, since fixed positioning has no normal-flow anchor to inherit from. */
.status-popover{
  position:fixed; z-index:200;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px;
  box-shadow:0 12px 28px rgba(28,35,51,.18);
  display:flex; flex-direction:column; gap:2px; min-width:150px;
}
.status-popover[hidden]{ display:none; }
.status-popover button{
  background:none; border:none; text-align:right; padding:7px 9px; border-radius:7px;
  font-family:inherit; font-size:12px; cursor:pointer; color:var(--ink-soft);
}
.status-popover button:hover{ background:var(--bg); color:var(--ink); }

/* ===== Pagination ===== */
.pagination{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.page-link{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px;
  border-radius:8px; border:1px solid var(--line); background:var(--card); font-size:12.5px; color:var(--ink-soft);
}
.page-link.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:12.5px;
  padding:9px 16px; border-radius:20px; z-index:300; opacity:0;
  transition:opacity .25s ease; pointer-events:none; white-space:nowrap;
}
.toast.show{opacity:1;}
.toast.error{background:var(--danger);}

/* ===== Custom-order text field (shown under the product select when "سفارش دلخواه" is picked) ===== */
.custom-text-input{ margin-top:6px; }

/* ===== Paste-to-fill import box (bulk entry page) ===== */
.paste-import-box textarea{
  width:100%; margin-top:8px; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  font-family:inherit; font-size:12.5px; outline:none; resize:vertical;
}
.paste-import-box textarea:focus{ border-color:var(--accent); }

/* ===== Bulk action bar (order list) ===== */
.bulk-action-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--accent); border-radius:12px;
  padding:10px 14px; margin-bottom:12px; font-size:12.5px;
}
.bulk-action-bar select{
  padding:7px 8px; border-radius:8px; border:1px solid var(--line); font-family:inherit; font-size:12.5px;
}

/* ===== Row highlight tints (order list) ===== */
.row-highlight-red td{ background:#FBEAEA; }
.row-highlight-yellow td{ background:#FBF3D9; }
.row-highlight-green td{ background:#E1F5E4; }
.row-highlight-blue td{ background:#E4ECFC; }

/* ===== Highlight color picker (order detail page) ===== */
.highlight-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.highlight-swatch{
  padding:8px 14px; border-radius:999px; border:2px solid transparent; font-family:inherit;
  font-size:12px; font-weight:700; cursor:pointer;
}
.highlight-swatch.highlight-none{ background:var(--bg); color:var(--ink-soft); }
.highlight-swatch.highlight-red{ background:#FBEAEA; color:var(--danger); }
.highlight-swatch.highlight-yellow{ background:#FBF3D9; color:#8A6D0F; }
.highlight-swatch.highlight-green{ background:#E1F5E4; color:var(--success); }
.highlight-swatch.highlight-blue{ background:#E4ECFC; color:var(--accent-dark); }
.highlight-swatch.active{ border-color:currentColor; }

/* ===== Order detail page ===== */
.order-view-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:16px; margin:0 0 14px; }
.note-item{ border-bottom:1px solid var(--line); padding:10px 0; }
.note-item:last-child{ border-bottom:none; }
.note-meta{ font-size:11px; color:var(--muted); margin-bottom:4px; }
.note-text{ font-size:13px; white-space:pre-wrap; }
#newNoteText{
  width:100%; margin-top:10px; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  font-family:inherit; font-size:13px; outline:none; resize:vertical;
}
#newNoteText:focus{ border-color:var(--accent); }

/* ===== Print-select page: already-printed date indicator ===== */
.filter-chip.printed-chip{ background:#E1F5E4; border-color:var(--success); color:var(--success); }

/* ===== Jalali calendar / date-range picker ===== */
.cal-widget{
  max-width:340px; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:12px;
}
.cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cal-title{ font-size:13.5px; font-weight:700; }
.cal-today-row{ text-align:center; margin-bottom:8px; }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.cal-weekdays span{ text-align:center; font-size:10.5px; color:var(--muted); font-weight:700; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-empty{ aspect-ratio:1/1; }
.cal-day{
  aspect-ratio:1/1; border:none; border-radius:8px; background:var(--bg); color:var(--ink);
  font-family:inherit; font-size:12.5px; cursor:pointer;
}
.cal-day:hover{ background:var(--gold-soft); color:#fff; }
.cal-day.in-range{ background:#E4ECFC; border-radius:0; }
.cal-day.selected{ background:var(--accent); color:#fff; font-weight:700; }
.cal-selection{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:4px; }
.cal-selection span{ font-size:12.5px; color:var(--ink-soft); }
.date-range-form{ max-width:340px; }

/* ===== Finance report presets + cards ===== */
.finance-presets{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.finance-summary-strip{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.finance-summary-card{
  flex:1 1 150px; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; text-align:center;
}
.finance-summary-card .num{ display:block; font-size:20px; font-weight:800; color:var(--ink); direction:ltr; }
.finance-summary-card span:last-child{ font-size:11.5px; color:var(--muted); }
.finance-table td, .finance-table th{ white-space:nowrap; }
.finance-table td.num-cell{ direction:ltr; text-align:left; font-weight:600; }

/* ===== Mobile pass ===== */
@media (max-width:640px){
  .panel-topbar{ padding:12px 14px; }
  .panel-topbar-actions{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    width:100%; padding-bottom:2px; scrollbar-width:none;
  }
  .panel-topbar-actions::-webkit-scrollbar{ display:none; }
  .panel-topbar-actions .btn-ghost{ flex:0 0 auto; }

  .filter-strip{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; }
  .filter-strip::-webkit-scrollbar{ display:none; }
  .filter-chip{ flex:0 0 auto; }

  .search-box{ flex-direction:column; align-items:stretch; }
  .search-box input[type="text"]{ flex:1 1 auto; }

  .btn-solid, .btn-ghost, .btn-danger{ min-height:40px; }
  .field input[type="text"], .field input[type="password"], .field textarea, .field select{
    min-height:42px; font-size:15px;
  }

  .panel-shell{ padding:14px 10px 60px; }
  .admin-section{ padding:12px; }

  .cal-widget, .date-range-form{ max-width:100%; }
  .finance-summary-card{ flex:1 1 100%; }
}