/* ==========================================================================
   Tennis Ranya — Dashboard theme (dark, RTL, Kurdish Sorani)
   ========================================================================== */

:root{
  --bg:            #0b1220;
  --bg-soft:       #0f1830;
  --panel:         #12203c;
  --panel-2:       #16294a;
  --panel-border:  #1f3157;
  --text:          #e7ecf7;
  --text-dim:      #93a1c2;
  --text-faint:    #5b6b8e;
  --accent:        #16a34a;     /* overridden dynamically by settings.theme_color */
  --accent-dark:   #0f8a3c;
  --blue:          #2f6fed;
  --orange:        #d97706;
  --red:           #e0413f;
  --radius:        14px;
  --radius-sm:     8px;
  --shadow:        0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
}

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, #12213f 0%, transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, #0f2038 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Segoe UI','Vazirmatn','Noto Sans Arabic', Tahoma, sans-serif;
  direction:rtl;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }

/* ---------------------------------------------------------------------- */
/* App shell                                                              */
/* ---------------------------------------------------------------------- */
.app{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}

.sidebar{
  background:linear-gradient(180deg, #0d1730 0%, #0a1226 100%);
  border-left:1px solid var(--panel-border);
  padding:26px 18px;
  display:flex;
  flex-direction:column;
}

.brand{
  text-align:center;
  margin-bottom:28px;
}
.brand .logo{
  width:54px;height:54px;border-radius:50%;
  background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
  font-size:26px;
  border:1px solid var(--panel-border);
}
.brand h1{ font-size:19px; margin:0; font-weight:700; }

.nav{ display:flex; flex-direction:column; gap:6px; flex:1; }
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:10px;
  color:var(--text-dim);
  font-size:14.5px;
  transition:.15s;
}
.nav a:hover{ background:var(--panel); color:var(--text); }
.nav a.active{
  background:var(--accent);
  color:#fff;
  font-weight:600;
}
.nav .divider{ height:1px; background:var(--panel-border); margin:12px 4px; }
.nav .user-chip{
  margin-top:auto;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  color:var(--text-dim);
}
.nav .user-chip b{ color:var(--text); display:block; font-size:14px; }

/* ---------------------------------------------------------------------- */
/* Main area                                                              */
/* ---------------------------------------------------------------------- */
.main{ padding:26px 30px 90px; position:relative; }

.topbar{
  display:flex; justify-content:flex-end; align-items:center; gap:14px;
  margin-bottom:22px;
}
.topbar .clock{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:10px;
  padding:9px 16px;
  display:flex; gap:16px; align-items:center;
  font-size:14px; color:var(--text-dim);
}
.topbar .clock b{ color:var(--text); }

.stat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:22px;
}
.stat-card{
  border-radius:var(--radius);
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:20px;
  box-shadow:var(--shadow);
}
.stat-card .icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.15);
  font-size:18px;
}
.stat-card small{ display:block; font-size:12.5px; font-weight:500; opacity:.85; margin-top:2px;}
.stat-cash{ background:linear-gradient(135deg,#1c7a3f,#125a2c); }
.stat-done{ background:linear-gradient(135deg,#1a8f4c,#0f6634); }
.stat-paused{ background:linear-gradient(135deg,#a5620b,#7a4406); }
.stat-active{ background:linear-gradient(135deg,#1f4fc2,#173b93); }

/* ---------------------------------------------------------------------- */
/* Tables grid                                                            */
/* ---------------------------------------------------------------------- */
.tables-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
@media (max-width:1200px){ .tables-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .tables-grid{ grid-template-columns:repeat(2,1fr);} }

.table-card{
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:16px;
  min-height:150px;
  display:flex; flex-direction:column; justify-content:space-between;
  cursor:pointer;
  transition:.15s;
  position:relative;
}
.table-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.table-card.busy{
  background:linear-gradient(180deg,#12335e 0%, #0f2a4d 100%);
  border-color:var(--blue);
}
.table-card .row1{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:600;}
.table-card .badge{
  font-size:11.5px; padding:3px 9px; border-radius:20px; font-weight:700;
}
.badge.free{ background:rgba(22,163,74,.18); color:#33d675; }
.badge.busy{ background:rgba(47,111,237,.2); color:#6fa0ff; }
.table-card .icon-mid{ text-align:center; font-size:30px; color:var(--text-faint); margin:6px 0; }
.table-card .label{ text-align:center; font-size:14px; color:var(--text-dim); }
.table-card .timer{ text-align:center; font-size:22px; font-weight:800; color:#6fc7ff; letter-spacing:1px; }
.table-card .price{ text-align:center; font-size:14px; color:#ffd166; font-weight:700; }
.table-card .customer{ text-align:center; font-size:12.5px; color:var(--text-dim); }
.table-card .foot{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-dim); margin-top:8px;}

/* ---------------------------------------------------------------------- */
/* Panels / list pages                                                    */
/* ---------------------------------------------------------------------- */
.panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:20px;
}
.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--panel-border);
  background:var(--panel-2);
}
.panel-head h2{ margin:0; font-size:16px; }
.panel-head p{ margin:2px 0 0; font-size:12.5px; color:var(--text-dim); }

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px;}

table.data{ width:100%; border-collapse:collapse; }
table.data th{
  background:#0d1730; color:var(--text-dim); font-size:13px; font-weight:600;
  padding:12px 16px; text-align:right; border-bottom:1px solid var(--panel-border);
}
table.data td{
  padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--panel-border);
}
table.data tr:hover td{ background:rgba(255,255,255,.02); }

.pill{ padding:4px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.pill.green{ background:rgba(22,163,74,.18); color:#33d675; }
.pill.red{ background:rgba(224,65,63,.18); color:#ff7876; }
.pill.purple{ background:rgba(147,51,234,.2); color:#c084fc; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */
.btn{
  border:none; border-radius:10px; padding:11px 20px; font-size:14px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px; transition:.15s;
}
.btn-green{ background:var(--accent); color:#fff; }
.btn-green:hover{ background:var(--accent-dark); }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:#c53331; }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-orange{ background:var(--orange); color:#fff; }
.btn-outline{ background:transparent; border:1px solid var(--panel-border); color:var(--text); }
.btn-outline.active, .btn-outline:hover{ background:var(--panel-2); border-color:var(--accent); }
.btn-icon{ padding:8px 10px; border-radius:8px; border:none; background:var(--panel-2); color:var(--text-dim); }
.btn-icon.del{ background:rgba(224,65,63,.15); color:#ff7876; }
.btn-icon.edit{ background:rgba(47,111,237,.15); color:#6fa0ff; }
.btn-sm{ padding:6px 10px; font-size:12.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; color:var(--text-dim); margin-bottom:8px; }
.field input[type=text],
.field input[type=number],
.field input[type=password],
.field input[type=date],
.field select,
.field textarea{
  width:100%; background:var(--bg-soft); border:1px solid var(--panel-border);
  border-radius:10px; padding:12px 14px; color:var(--text); font-size:14px;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-dim); }

.quick-timers{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px;}
.quick-timers .qt{
  background:var(--panel-2); border:1px solid var(--panel-border); border-radius:10px;
  padding:14px 6px; text-align:center; cursor:pointer;
}
.quick-timers .qt b{ display:block; font-size:20px; color:#6fc7ff; }
.quick-timers .qt span{ font-size:11.5px; color:var(--text-dim); }
.quick-timers .qt.selected{ border-color:var(--accent); background:rgba(22,163,74,.12); }

/* ---------------------------------------------------------------------- */
/* Modal                                                                  */
/* ---------------------------------------------------------------------- */
.overlay{
  position:fixed; inset:0; background:rgba(2,6,16,.65);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:20px;
}
.overlay.hidden{ display:none; }
.modal{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:16px;
  width:100%; max-width:480px; box-shadow:var(--shadow); overflow:hidden;
  max-height:90vh; overflow-y:auto;
}
.modal-head{
  background:linear-gradient(90deg,#1c3a6e,#152c56);
  padding:18px 22px;
}
.modal-head h3{ margin:0; font-size:17px; }
.modal-head p{ margin:4px 0 0; font-size:12.5px; color:#a9bce0; }
.modal-body{ padding:20px 22px; }
.modal-actions{ display:flex; gap:12px; }
.modal-actions .btn{ flex:1; justify-content:center; }
.modal-close{ position:absolute; left:18px; top:16px; background:none; border:none; color:#a9bce0; font-size:18px;}

/* ---------------------------------------------------------------------- */
/* Reports / stat summaries                                               */
/* ---------------------------------------------------------------------- */
.summary-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.summary-card{
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.summary-card .icon{ width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.15); display:flex;align-items:center;justify-content:center; }
.summary-card .val{ font-size:22px; font-weight:800; }
.summary-card .lbl{ font-size:13px; opacity:.85; }
.summary-expense{ background:linear-gradient(135deg,#7a2321,#4d1615); }
.summary-minutes{ background:linear-gradient(135deg,#a5620b,#7a4406); }
.summary-income{ background:linear-gradient(135deg,#1f4fc2,#173b93); }
.summary-revenue{ background:linear-gradient(135deg,#1a8f4c,#0f6634); }

.date-filter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.date-filter input[type=date]{
  background:var(--bg-soft); border:1px solid var(--panel-border); color:var(--text);
  border-radius:10px; padding:9px 12px; font-size:13.5px;
}

/* ---------------------------------------------------------------------- */
/* Empty state / footer                                                  */
/* ---------------------------------------------------------------------- */
.empty{ padding:40px; text-align:center; color:var(--text-faint); }

.site-footer{
  position:fixed; bottom:0; left:260px; right:0;
  text-align:center; padding:12px; font-size:12.5px; color:var(--text-faint);
  background:linear-gradient(0deg, var(--bg) 60%, transparent);
}

/* toast */
#toast{
  position:fixed; bottom:70px; left:50%; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--accent); color:#fff;
  padding:12px 22px; border-radius:10px; font-size:13.5px; z-index:2000;
  display:none; box-shadow:var(--shadow);
}

/* switch */
.switch{ position:relative; display:inline-block; width:46px; height:26px; }
.switch input{ display:none; }
.switch .track{ position:absolute; inset:0; background:var(--panel-border); border-radius:20px; transition:.2s; }
.switch .track::before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .track{ background:var(--accent); }
.switch input:checked + .track::before{ transform:translateX(-20px); }

.color-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:32px;height:32px;border-radius:8px; cursor:pointer; border:2px solid transparent; }
.swatch.selected{ border-color:#fff; }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.login-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:18px;
  padding:36px 32px; width:100%; max-width:380px; box-shadow:var(--shadow); text-align:center;
}
.login-card .logo{ width:64px;height:64px;border-radius:50%; background:var(--panel-2); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:30px; }
.login-card h1{ margin:0 0 4px; font-size:20px; }
.login-card p{ color:var(--text-dim); font-size:13px; margin:0 0 22px; }
.login-card .field{ text-align:right; }
.error-msg{ background:rgba(224,65,63,.15); color:#ff7876; padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:16px; }