/* ============================================================
   STYLE2 — Luxury Dark + Gold SPA theme
   Pure presentation layer. No backend/DB logic here.
   RTL (Kurdish) first.
   ============================================================ */

:root{
  --s2-bg:        #0e1116;
  --s2-bg-2:      #151a22;
  --s2-surface:   #1b212b;
  --s2-surface-2: #222a36;
  --s2-line:      #2c3543;
  --s2-text:      #eef2f7;
  --s2-text-dim:  #97a3b4;
  --s2-text-mute: #6b7686;
  --s2-gold:      #ffcc00;
  --s2-gold-soft: #ffd84d;
  --s2-gold-deep: #d9ad00;
  --s2-green:     #2ec28a;
  --s2-red:       #ff5d6c;
  --s2-blue:      #4ea3ff;
  --s2-radius:    16px;
  --s2-radius-sm: 10px;
  --s2-shadow:    0 18px 50px -20px rgba(0,0,0,.65);
  --s2-shadow-sm: 0 6px 20px -10px rgba(0,0,0,.6);
  --s2-sidebar-w: 264px;
  --s2-topbar-h:  64px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--s2-bg);
  color:var(--s2-text);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
body.s2-body{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(255,204,0,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(78,163,255,.05), transparent 55%),
    var(--s2-bg);
}

a{ color:inherit; text-decoration:none; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--s2-line); border-radius:20px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- App shell ---------- */
.s2-shell{ display:flex; min-height:100vh; }

.s2-sidebar{
  width:var(--s2-sidebar-w);
  background:linear-gradient(180deg, var(--s2-bg-2), #10141b);
  border-left:1px solid var(--s2-line);
  position:fixed; top:0; right:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:60;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.s2-brand{
  display:flex; align-items:center; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--s2-line);
}
.s2-brand-logo{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,var(--s2-gold),var(--s2-gold-deep));
  display:grid; place-items:center; color:#1a1500; font-weight:800; font-size:18px;
  box-shadow:0 8px 20px -8px rgba(255,204,0,.55);
  flex:none;
}
.s2-brand-name{ font-weight:700; font-size:15px; }
.s2-brand-sub{ font-size:11.5px; color:var(--s2-text-mute); margin-top:2px; }

.s2-nav{ flex:1; overflow-y:auto; padding:14px 12px; }
.s2-nav-label{
  font-size:11px; letter-spacing:.5px; color:var(--s2-text-mute);
  padding:14px 12px 6px; text-transform:uppercase;
}
.s2-nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:12px; color:var(--s2-text-dim);
  font-size:14px; margin:2px 0; cursor:pointer;
  transition:.18s; position:relative;
}
.s2-nav-item i{ width:20px; text-align:center; font-size:15px; }
.s2-nav-item:hover{ background:var(--s2-surface); color:var(--s2-text); }
.s2-nav-item.active{
  background:linear-gradient(90deg, rgba(255,204,0,.16), rgba(255,204,0,.02));
  color:var(--s2-gold-soft);
}
.s2-nav-item.active::before{
  content:""; position:absolute; right:0; top:18%; bottom:18%;
  width:3px; border-radius:6px; background:var(--s2-gold);
}
.s2-sidebar-foot{ padding:14px; border-top:1px solid var(--s2-line); }
.s2-logout{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:11px; border-radius:12px; width:100%;
  background:var(--s2-surface); color:var(--s2-text-dim);
  border:1px solid var(--s2-line); cursor:pointer; transition:.18s; font-size:14px;
}
.s2-logout:hover{ color:var(--s2-red); border-color:rgba(255,93,108,.4); }

/* ---------- Main column ---------- */
.s2-main{
  margin-right:var(--s2-sidebar-w);
  flex:1; min-width:0; display:flex; flex-direction:column;
}
.s2-topbar{
  height:var(--s2-topbar-h);
  display:flex; align-items:center; gap:16px;
  padding:0 24px; position:sticky; top:0; z-index:40;
  background:rgba(14,17,22,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--s2-line);
}
.s2-burger{
  display:none; background:var(--s2-surface); border:1px solid var(--s2-line);
  color:var(--s2-text); width:40px; height:40px; border-radius:11px; cursor:pointer;
}
.s2-page-title{ font-weight:700; font-size:17px; }
.s2-crumb{ font-size:12px; color:var(--s2-text-mute); margin-top:1px; }
.s2-topbar-spacer{ flex:1; }
.s2-user{
  display:flex; align-items:center; gap:10px; padding:6px 8px 6px 14px;
  background:var(--s2-surface); border:1px solid var(--s2-line); border-radius:30px;
}
.s2-user-avatar{
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--s2-gold),var(--s2-gold-deep));
  color:#1a1500; display:grid; place-items:center; font-weight:800; font-size:13px;
}
.s2-user-name{ font-size:13px; color:var(--s2-text-dim); }

.s2-content{ padding:24px; flex:1; }

/* ---------- Cards ---------- */
.s2-grid{ display:grid; gap:18px; }
.s2-stats{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.s2-card{
  background:linear-gradient(180deg,var(--s2-surface),var(--s2-bg-2));
  border:1px solid var(--s2-line); border-radius:var(--s2-radius);
  box-shadow:var(--s2-shadow-sm);
}
.s2-card-pad{ padding:22px; }
.s2-stat{
  position:relative; overflow:hidden; padding:22px;
}
.s2-stat::after{
  content:""; position:absolute; left:-30px; bottom:-30px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,204,0,.10), transparent 70%);
}
.s2-stat-ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-size:19px; margin-bottom:16px;
  background:rgba(255,204,0,.12); color:var(--s2-gold);
}
.s2-stat-ico.green{ background:rgba(46,194,138,.12); color:var(--s2-green); }
.s2-stat-ico.blue{ background:rgba(78,163,255,.12); color:var(--s2-blue); }
.s2-stat-ico.red{ background:rgba(255,93,108,.12); color:var(--s2-red); }
.s2-stat-val{ font-size:26px; font-weight:800; letter-spacing:.3px; }
.s2-stat-label{ color:var(--s2-text-dim); font-size:13px; margin-top:4px; }

.s2-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 2px 16px; gap:12px; flex-wrap:wrap;
}
.s2-section-title{ font-weight:700; font-size:16px; }
.s2-section-title small{ color:var(--s2-text-mute); font-weight:500; font-size:12px; }

/* ---------- Tabs ---------- */
.s2-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.s2-tab{
  padding:10px 18px; border-radius:11px; cursor:pointer; font-size:13.5px;
  color:var(--s2-text-dim); background:var(--s2-surface);
  border:1px solid var(--s2-line); transition:.18s;
}
.s2-tab:hover{ color:var(--s2-text); }
.s2-tab.active{
  background:linear-gradient(135deg,var(--s2-gold),var(--s2-gold-deep));
  color:#1a1500; font-weight:700; border-color:transparent;
}
.s2-panel{ display:none; }
.s2-panel.active{ display:block; animation:s2fade .25s ease; }
@keyframes s2fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ---------- Forms ---------- */
.s2-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.s2-field{ display:flex; flex-direction:column; gap:7px; }
.s2-field label{ font-size:12.5px; color:var(--s2-text-dim); }
.s2-input, .s2-select, .s2-textarea{
  width:100%; padding:11px 14px; border-radius:11px;
  background:var(--s2-bg); border:1px solid var(--s2-line);
  color:var(--s2-text); font-size:14px; outline:none; transition:.18s;
  font-family:inherit;
}
.s2-textarea{ resize:vertical; min-height:84px; }
.s2-input:focus, .s2-select:focus, .s2-textarea:focus{
  border-color:var(--s2-gold); box-shadow:0 0 0 3px rgba(255,204,0,.12);
}
.s2-select{ appearance:none; cursor:pointer; }
.s2-file{
  padding:10px 14px; border-radius:11px; background:var(--s2-bg);
  border:1px dashed var(--s2-line); color:var(--s2-text-dim); font-size:13px;
}

/* ---------- Buttons ---------- */
.s2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:11px; border:1px solid transparent;
  font-size:14px; font-weight:600; cursor:pointer; transition:.18s; font-family:inherit;
}
.s2-btn-gold{
  background:linear-gradient(135deg,var(--s2-gold),var(--s2-gold-deep));
  color:#1a1500; box-shadow:0 10px 24px -12px rgba(255,204,0,.7);
}
.s2-btn-gold:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.s2-btn-ghost{ background:var(--s2-surface); border-color:var(--s2-line); color:var(--s2-text-dim); }
.s2-btn-ghost:hover{ color:var(--s2-text); }
.s2-btn:disabled{ opacity:.6; cursor:not-allowed; }
.s2-icon-btn{
  width:38px; height:38px; border-radius:10px; display:inline-grid; place-items:center;
  border:1px solid var(--s2-line); background:var(--s2-surface); color:var(--s2-text-dim);
  cursor:pointer; transition:.18s;
}
.s2-icon-btn:hover{ color:var(--s2-gold); border-color:rgba(255,204,0,.4); }
.s2-icon-btn.danger:hover{ color:var(--s2-red); border-color:rgba(255,93,108,.4); }
.s2-icon-btn.ok:hover{ color:var(--s2-green); border-color:rgba(46,194,138,.4); }

/* ---------- Filters bar ---------- */
.s2-filterbar{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px;
}
.s2-filterbar .s2-field{ min-width:160px; }

/* ---------- Tables ---------- */
.s2-table-wrap{ overflow-x:auto; border-radius:var(--s2-radius); border:1px solid var(--s2-line); }
table.s2-table{ width:100%; border-collapse:collapse; min-width:640px; background:var(--s2-surface); }
table.s2-table thead th{
  text-align:right; font-size:12px; letter-spacing:.3px; color:var(--s2-text-mute);
  padding:14px 16px; border-bottom:1px solid var(--s2-line);
  background:var(--s2-bg-2); white-space:nowrap; text-transform:uppercase;
  position:sticky; top:0;
}
table.s2-table tbody td{
  padding:13px 16px; border-bottom:1px solid var(--s2-line); font-size:13.5px;
  color:var(--s2-text); white-space:nowrap;
}
table.s2-table tbody tr:hover{ background:var(--s2-surface-2); }
table.s2-table tbody tr:last-child td{ border-bottom:none; }
table.s2-table img{ border-radius:8px; }

/* keep original action buttons readable */
.s2-table .btn{ border-radius:9px !important; padding:7px 11px !important; font-size:13px !important; }
.s2-table a.btn-modal,.s2-table a.btn{ display:inline-flex; align-items:center; gap:6px; }

.s2-badge{
  display:inline-block; padding:4px 12px; border-radius:30px; font-size:12px; font-weight:600;
}
.s2-badge.usd{ background:rgba(46,194,138,.14); color:var(--s2-green); }
.s2-badge.iqd{ background:rgba(78,163,255,.14); color:var(--s2-blue); }

.s2-totals{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.s2-total-chip{
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  background:var(--s2-surface); border:1px solid var(--s2-line); border-radius:12px;
}
.s2-total-chip b{ font-size:18px; color:var(--s2-gold); }
.s2-total-chip span{ font-size:12px; color:var(--s2-text-dim); }

/* ---------- Modal ---------- */
.s2-modal-content{
  background:var(--s2-bg-2) !important; color:var(--s2-text) !important;
  border:1px solid var(--s2-line) !important; border-radius:var(--s2-radius) !important;
}
.s2-modal-content .form-control{
  background:var(--s2-bg); border:1px solid var(--s2-line); color:var(--s2-text);
}
.s2-modal-content label{ color:var(--s2-text-dim); }
.s2-modal-content .close{ color:var(--s2-text); opacity:.7; text-shadow:none; }

/* ---------- Loader & overlay ---------- */
.s2-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; }
.s2-overlay.show{ display:block; }
.s2-loader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:var(--s2-bg);
}
.s2-spinner{
  width:46px; height:46px; border-radius:50%;
  border:3px solid var(--s2-line); border-top-color:var(--s2-gold);
  animation:s2spin .8s linear infinite;
}
@keyframes s2spin{ to{ transform:rotate(360deg); } }

.s2-empty{ text-align:center; padding:50px 20px; color:var(--s2-text-mute); }
.s2-empty i{ font-size:34px; margin-bottom:12px; display:block; color:var(--s2-line); }

/* DataTables theming overrides */
.dataTables_wrapper{ color:var(--s2-text-dim); padding:6px 2px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background:var(--s2-bg); border:1px solid var(--s2-line); color:var(--s2-text);
  border-radius:9px; padding:6px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:var(--s2-text-dim) !important; border-radius:8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--s2-gold) !important; color:#1a1500 !important; border:none !important;
}
.dt-button{
  background:linear-gradient(135deg,var(--s2-gold),var(--s2-gold-deep)) !important;
  border:none !important; color:#1a1500 !important; border-radius:9px !important;
  padding:7px 16px !important; margin-bottom:12px !important; font-weight:600;
}

/* ---------- Responsive ---------- */
@media (max-width:992px){
  .s2-sidebar{ transform:translateX(100%); box-shadow:var(--s2-shadow); }
  .s2-sidebar.open{ transform:translateX(0); }
  .s2-main{ margin-right:0; }
  .s2-burger{ display:grid; place-items:center; }
}
@media (max-width:560px){
  .s2-content{ padding:16px; }
  .s2-topbar{ padding:0 14px; }
  .s2-user-name{ display:none; }
  .s2-stat-val{ font-size:22px; }
}