/* =============================================
   Optiserve ERP — Main Stylesheet
   کوردی / English Bilingual
   ============================================= */

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

:root {
  --sidebar-width: 210px;
  --topbar-height: 52px;
  --radius:        8px;
  --radius-lg:     12px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Dark theme (default) */
  --color-bg:        #0f1117;
  --color-surface:   #161b27;
  --color-card:      #1c2333;
  --color-border:    rgba(255,255,255,0.08);
  --color-border-md: rgba(255,255,255,0.14);
  --color-text:      #e8eaf0;
  --color-muted:     #8b92a5;
  --color-accent:    #3b82f6;
  --color-accent-bg: #1a2f4a;
  --color-accent-fg: #7bb8f0;
  --color-success:   #22c55e;
  --color-success-bg:#0d2e1c;
  --color-danger:    #f87171;
  --color-danger-bg: #3a1f1a;
  --color-warning:   #fbbf24;
  --color-warning-bg:#2d1f08;
  --color-vip:       #a78bfa;
  --color-vip-bg:    #251a3a;
}

/* ---- Light Theme ---- */
body.light {
  --color-bg:        #f0f2f7;
  --color-surface:   #ffffff;
  --color-card:      #f8f9fc;
  --color-border:    rgba(0,0,0,0.07);
  --color-border-md: rgba(0,0,0,0.13);
  --color-text:      #111827;
  --color-muted:     #6b7280;
  --color-accent:    #2563eb;
  --color-accent-bg: #eff6ff;
  --color-accent-fg: #1d4ed8;
  --color-success:   #16a34a;
  --color-success-bg:#f0fdf4;
  --color-danger:    #dc2626;
  --color-danger-bg: #fef2f2;
  --color-warning:   #d97706;
  --color-warning-bg:#fffbeb;
  --color-vip:       #7c3aed;
  --color-vip-bg:    #f5f3ff;
}

/* light mode extra overrides */
body.light tbody tr:hover td { background: rgba(0,0,0,0.025); }
body.light .sidebar { box-shadow: 2px 0 8px rgba(0,0,0,0.06); }
body.light .card    { box-shadow: 0 1px 4px rgba(0,0,0,0.07); }
body.light .topbar  { box-shadow: 0 1px 4px rgba(0,0,0,0.07); }
body.light .search-box { box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); }
body.light select,
body.light .form-group select { color: var(--color-text); }

/* ---- Theme toggle button (in topbar) ---- */
.theme-btn {
  width:34px; height:34px; border-radius:var(--radius);
  background:var(--color-surface); border:0.5px solid var(--color-border-md);
  color:var(--color-muted); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; font-size:16px;
  transition:all .15s; flex-shrink:0;
}
.theme-btn:hover { background:var(--color-card); color:var(--color-text); }

body { font-family: var(--font); background: var(--color-bg); color: var(--color-text); min-height: 100vh; font-size: 14px; line-height: 1.5; }

/* ---- Layout ---- */
.layout { display: flex; min-height: 100vh; }
.main   { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.content{ flex: 1; padding: 20px; overflow-y: auto; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 0.5px solid var(--color-border);
  display: flex; flex-direction: column;
  flex-shrink: 0; padding: 12px 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
[dir="rtl"] .sidebar { border-right: none; border-left: 0.5px solid var(--color-border); }

.logo { padding: 8px 14px 16px; border-bottom: 0.5px solid var(--color-border); margin-bottom: 8px; }
.logo-mark { width: 34px; height: 34px; background: var(--color-accent-bg); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.logo-mark i { color: var(--color-accent-fg); font-size: 18px; }
.logo-title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.logo-sub   { font-size: 10px; color: var(--color-muted); margin-top: 2px; }

.nav-group  { padding: 0 8px; margin-bottom: 6px; }
.nav-label  { font-size: 10px; color: var(--color-muted); padding: 8px 8px 3px; text-transform: uppercase; letter-spacing: .06em; }
.nav-item   { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius); cursor: pointer; font-size: 12.5px; color: var(--color-muted); text-decoration: none; transition: background .15s, color .15s; }
.nav-item:hover { background: var(--color-card); color: var(--color-text); }
.nav-item.active { background: var(--color-accent-bg); color: var(--color-accent-fg); font-weight: 500; }
.nav-item i { font-size: 15px; flex-shrink: 0; }

/* ---- Topbar ---- */
.topbar { height: var(--topbar-height); background: var(--color-surface); border-bottom: 0.5px solid var(--color-border); display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-shrink: 0; }
.topbar-title { font-size: 11px; font-weight: 600; color: var(--color-muted); letter-spacing: .08em; flex: 1; }

.lang-toggle { display: flex; border: 0.5px solid var(--color-border-md); border-radius: var(--radius); overflow: hidden; }
.lang-btn { padding: 5px 13px; font-size: 12px; background: none; border: none; cursor: pointer; color: var(--color-muted); text-decoration: none; transition: all .15s; display: inline-block; }
.lang-btn.active { background: var(--color-accent-bg); color: var(--color-accent-fg); font-weight: 500; }
.lang-btn:hover:not(.active) { background: var(--color-card); color: var(--color-text); }

.avatar-wrap { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-bg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--color-accent-fg); flex-shrink: 0; }
.avatar-name { font-size: 12px; color: var(--color-muted); }

/* ---- Cards ---- */
.card { background: var(--color-card); border: 0.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; }
.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-title  { font-size: 15px; font-weight: 500; color: var(--color-text); flex: 1; }

/* ---- Stats Row ---- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card  { background: var(--color-card); border: 0.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat-num   { font-size: 22px; font-weight: 600; color: var(--color-text); }
.stat-lbl   { font-size: 11px; color: var(--color-muted); margin-top: 3px; }
.stat-card.accent { border-color: var(--color-accent); }
.stat-card.success{ border-color: var(--color-success); }
.stat-card.warning{ border-color: var(--color-warning); }
.stat-card.danger { border-color: var(--color-danger); }

/* ---- Toolbar ---- */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.search-box { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 7px; border: 0.5px solid var(--color-border-md); border-radius: var(--radius); padding: 7px 11px; background: var(--color-surface); }
.search-box i { font-size: 14px; color: var(--color-muted); }
.search-box input { border: none; background: none; font-size: 12.5px; color: var(--color-text); outline: none; width: 100%; font-family: var(--font); }
.search-box input::placeholder { color: var(--color-muted); }

select.filter-btn, select.per-page {
  border: 0.5px solid var(--color-border-md); border-radius: var(--radius);
  padding: 7px 10px; font-size: 12px; color: var(--color-muted);
  background: var(--color-surface); cursor: pointer; font-family: var(--font);
  outline: none;
}
.count { font-size: 12px; color: var(--color-muted); white-space: nowrap; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius); padding: 7px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer; border: none; font-family: var(--font); text-decoration: none; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn-primary { background: var(--color-accent-bg); color: var(--color-accent-fg); border: 0.5px solid var(--color-accent); }
.btn-refresh  { background: var(--color-surface); color: var(--color-muted); border: 0.5px solid var(--color-border-md); padding: 7px 9px; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; }
.btn-success  { background: var(--color-success-bg); color: var(--color-success); border: 0.5px solid var(--color-success); }
.btn-danger   { background: var(--color-danger-bg);  color: var(--color-danger);  border: 0.5px solid var(--color-danger); }
.btn i { font-size: 14px; }

/* ---- Table ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { padding: 9px 12px; color: var(--color-muted); font-weight: 500; border-bottom: 0.5px solid var(--color-border); white-space: nowrap; text-align: left; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
td { padding: 11px 12px; color: var(--color-text); border-bottom: 0.5px solid var(--color-border); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255,255,255,0.03); }

.link-cell { color: var(--color-accent); font-weight: 500; cursor: pointer; text-decoration: none; }
.link-cell:hover { text-decoration: underline; }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge-active   { background: var(--color-success-bg); color: var(--color-success); }
.badge-inactive { background: rgba(255,255,255,0.06); color: var(--color-muted); }
.badge-vip      { background: var(--color-vip-bg); color: var(--color-vip); }
.badge-issued   { background: var(--color-accent-bg); color: var(--color-accent-fg); }
.badge-paid     { background: var(--color-success-bg); color: var(--color-success); }
.badge-draft    { background: rgba(255,255,255,0.06); color: var(--color-muted); }
.badge-overdue  { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-cancelled{ background: rgba(255,255,255,0.06); color: var(--color-muted); }
.badge-cash     { background: var(--color-success-bg); color: var(--color-success); }
.badge-due-warn { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-bal-warn { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-bal-ok   { background: var(--color-success-bg); color: var(--color-success); }
.badge-pending  { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-approved { background: var(--color-success-bg); color: var(--color-success); }
.badge-rejected { background: var(--color-danger-bg); color: var(--color-danger); }

/* ---- Avatar Small ---- */
.cust-cell { display: flex; align-items: center; gap: 9px; }
.av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.av-blue  { background: #1a2f4a; color: #60a5fa; }
.av-teal  { background: #0d2e22; color: #34d399; }
.av-amber { background: #2d1f08; color: #fbbf24; }
.av-pink  { background: #2e0e1e; color: #f472b6; }
.av-gray  { background: #1e1e1e; color: #9ca3af; }

/* ---- Action Buttons ---- */
.action-wrap { display: flex; gap: 4px; }
.action-btn { border: none; background: none; cursor: pointer; padding: 5px 7px; border-radius: 6px; color: var(--color-muted); transition: all .15s; display: inline-flex; align-items: center; text-decoration: none; }
.action-btn i { font-size: 14px; }
.action-btn.view:hover  { background: var(--color-success-bg); color: var(--color-success); }
.action-btn.edit:hover  { background: var(--color-accent-bg);  color: var(--color-accent-fg); }
.action-btn.del:hover   { background: var(--color-danger-bg);  color: var(--color-danger); }

/* ---- Pagination ---- */
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.page-btn { border: 0.5px solid var(--color-border-md); background: var(--color-surface); border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--color-muted); font-family: var(--font); display: inline-flex; align-items: center; }
.page-btn.active { background: var(--color-accent-bg); color: var(--color-accent-fg); border-color: var(--color-accent); }
.page-btn:hover:not(.active) { background: var(--color-card); color: var(--color-text); }

/* ---- Alerts ---- */
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.alert-success { background: var(--color-success-bg); color: var(--color-success); border: 0.5px solid var(--color-success); }
.alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  border: 0.5px solid var(--color-danger); }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 12px; color: var(--color-muted); font-weight: 500; }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--color-surface); border: 0.5px solid var(--color-border-md);
  border-radius: var(--radius); padding: 8px 11px; font-size: 13px;
  color: var(--color-text); font-family: var(--font); outline: none;
  transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--color-accent); }
.form-group textarea { resize: vertical; min-height: 80px; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .sidebar { width: 52px; }
  .sidebar .logo-title, .sidebar .logo-sub, .sidebar .nav-label, .nav-item span { display: none; }
  .nav-item { justify-content: center; }
  .avatar-name { display: none; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}