/* =========================================================
   NOVA CORE UI — RTL Glass (Indigo/Cyan) — CLEAN RESPONSIVE
   File: public/assets/css/nova-core.css
   Target: PHP 8.2 app (from scratch)
========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Background */
  --bg-0:#070a1b;
  --bg-1:#0b1231;
  --bg-2:#151a46;

  /* Primary Accent */
  --p:#6d5efc;     /* indigo */
  --p2:#55d7ff;    /* cyan */
  --p3:#ff63d8;    /* magenta highlight */

  /* Text */
  --text:#eef3ff;
  --muted:rgba(238,243,255,.72);
  --muted2:rgba(238,243,255,.56);

  /* Surface / Glass */
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.12);
  --line2:rgba(109,94,252,.22);

  /* Effects */
  --shadow: 0 18px 55px rgba(0,0,0,.46);
  --shadow2: 0 10px 30px rgba(0,0,0,.30);

  /* Radius */
  --r-xl:22px;
  --r-lg:18px;
  --r-md:14px;
  --r-sm:12px;

  /* Motion */
  --t:.24s;

  /* Status */
  --ok:#44ffa6;
  --warn:#ffd56a;
  --bad:#ff5b7b;
  --info:#5fd0ff;

  /* Responsive sizing */
  --container: min(1200px, calc(100vw - 28px));
  --sidebar-w: 290px;

  --fz-0: clamp(12px, 1.1vw, 13px);
  --fz-1: clamp(13px, 1.25vw, 14px);
  --fz-2: clamp(14px, 1.35vw, 16px);
  --fz-3: clamp(16px, 1.5vw, 18px);
  --fz-4: clamp(18px, 2vw, 22px);

  --sp-1: clamp(8px, 1.2vw, 12px);
  --sp-2: clamp(10px, 1.4vw, 14px);
  --sp-3: clamp(12px, 1.8vw, 18px);
  --sp-4: clamp(14px, 2.2vw, 22px);

  /* Safe-area for iOS */
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Focus ring */
  --focus: 0 0 0 4px rgba(93,195,255,.18);
}

/* ---------- Reset / Base ---------- */
*{ box-sizing:border-box; }
html{ scrollbar-width: thin; scrollbar-color: rgba(93,195,255,.85) rgba(11,18,49,.85); }
html::-webkit-scrollbar{ width:10px; }
html::-webkit-scrollbar-track{ background: rgba(11,18,49,.85); }
html::-webkit-scrollbar-thumb{ background: rgba(93,195,255,.85); border-radius: 10px; border:2px solid rgba(11,18,49,.85); }
html::-webkit-scrollbar-thumb:hover{ background: rgba(109,94,252,.95); }

body{
  margin:0;
  font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--text);
  direction:rtl;
  line-height:1.65;
  min-height:100vh;
  font-size: var(--fz-2);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 820px at 12% 10%, rgba(109,94,252,.18), transparent 60%),
    radial-gradient(1000px 760px at 92% 16%, rgba(85,215,255,.14), transparent 60%),
    radial-gradient(900px 650px at 64% 90%, rgba(255,99,216,.10), transparent 62%),
    linear-gradient(135deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
}

/* Usability */
*{ -webkit-tap-highlight-color: transparent; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
img, svg{ vertical-align:middle; max-width:100%; }
button, input, select, textarea{ font-family:inherit; }

/* Selection behavior (do NOT disable globally) */
.nv-btn, .nv-nav-item, .nv-pill, .nv-chip{ user-select:none; }
input, textarea, select{ user-select:auto; }

/* ---------- Container ---------- */
.nv-container{
  max-width: var(--container);
  margin: 0 auto;
}

/* =========================================================
   Layout Skeleton (Desktop: fixed sidebar)
   Mobile/Tablet: drawer sidebar + overlay
========================================================= */
.nv-app{
  min-height:100vh;
  display:flex;
  position:relative;
}

/* Overlay for drawer (add element in HTML) */
.nv-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:none;
  z-index: 75;
}
.nv-overlay.is-open{ display:block; }

.nv-sidebar{
  width: var(--sidebar-w);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  padding: 16px 14px calc(16px + var(--safe-b));
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-left: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow2);
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  z-index: 80;
}

.nv-main{
  width:100%;
  margin-right: var(--sidebar-w);
  padding: var(--sp-3) var(--sp-2) calc(88px + var(--safe-b));
  transition: margin-right var(--t) ease;
}

/* Tablet/Mobile */
@media (max-width: 992px){
  :root{ --sidebar-w: min(320px, 86vw); }

  .nv-sidebar{
    transform: translateX(110%);
    transition: transform var(--t) ease;
  }
  .nv-sidebar.is-open{ transform: translateX(0); }

  .nv-main{
    margin-right: 0;
    padding: var(--sp-2) var(--sp-2) calc(88px + var(--safe-b));
  }
}

/* Small phones */
@media (max-width: 576px){
  .nv-main{ padding: 12px 10px calc(88px + var(--safe-b)); }
}

/* =========================================================
   Topbar
========================================================= */
.nv-top{
  position: sticky;
  top:0;
  z-index: 70;
  padding: 12px 0 10px;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0));
}

.nv-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}

.nv-topbar::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 230px at 15% 0%, rgba(109,94,252,.28), transparent 62%),
    radial-gradient(420px 210px at 90% 12%, rgba(85,215,255,.20), transparent 60%);
  opacity:.62;
  pointer-events:none;
}

.nv-topbar > *{ position:relative; }

.nv-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.nv-logo{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(109,94,252,.26), rgba(255,255,255,.06));
  border: 1px solid rgba(109,94,252,.40);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.nv-brand h1{
  margin:0;
  font-size: 1.05rem;
  font-weight: 1000;
  letter-spacing:.2px;
}

.nv-brand p{
  margin:2px 0 0;
  font-size:.92rem;
  color: var(--muted);
}

@media (max-width: 992px){
  .nv-topbar{ flex-wrap: wrap; padding: 12px; gap:10px; }
  .nv-brand h1{ font-size: var(--fz-3); }
  .nv-brand p{ font-size: var(--fz-1); }
  .nv-logo{ width:40px; height:40px; border-radius: 13px; }
}

/* =========================================================
   Buttons
========================================================= */
.nv-btn{
  border:none;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  touch-action: manipulation;
  transition: transform var(--t) ease, box-shadow var(--t) ease, background var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}
.nv-btn:focus{ outline:none; box-shadow: var(--focus); }

.nv-btn-ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
}
.nv-btn-ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  background: rgba(255,255,255,.085);
}

.nv-btn-primary{
  background: linear-gradient(135deg, rgba(109,94,252,.95), rgba(85,215,255,.72));
  color: #071022;
  border: 1px solid rgba(85,215,255,.55);
}
.nv-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(93,195,255,.18);
}

.nv-btn-danger{
  background: linear-gradient(135deg, rgba(255,91,123,.90), rgba(255,99,216,.55));
  color:#14060d;
  border: 1px solid rgba(255,91,123,.55);
}

@media (max-width: 576px){
  .nv-btn{ width: 100%; }
}

/* =========================================================
   Cards + Grid
========================================================= */
.nv-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.nv-card{
  grid-column: span 12;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.nv-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(720px 280px at 18% 0%, rgba(109,94,252,.18), transparent 62%),
    radial-gradient(620px 250px at 92% 0%, rgba(85,215,255,.12), transparent 62%);
  opacity:.60;
  pointer-events:none;
}
.nv-card > *{ position:relative; }

.nv-card-head{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nv-card-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 1000;
  letter-spacing:.2px;
}
.nv-card-title i{ color: var(--p2); font-size: 1.1rem; }
.nv-card-body{ padding: 16px; }

@media (max-width: 576px){
  .nv-card-head{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   Stats
========================================================= */
.nv-stat{
  grid-column: span 3;
  min-height: 120px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(0,0,0,.24), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
  transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}
.nv-stat:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.44);
  border-color: rgba(85,215,255,.24);
}

@media (max-width: 1200px){ .nv-stat{ grid-column: span 6; } }
@media (max-width: 576px){ .nv-stat{ grid-column: span 12; } }

.nv-stat::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(520px 200px at 14% 0%, rgba(109,94,252,.20), transparent 66%),
    radial-gradient(430px 180px at 86% 10%, rgba(255,255,255,.10), transparent 66%);
  opacity:.72;
  pointer-events:none;
}
.nv-stat-inner{
  position:relative;
  padding: var(--sp-2);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.nv-stat-kicker{
  font-size: var(--fz-1);
  color: var(--muted);
  font-weight: 900;
}
.nv-stat-value{
  font-size: clamp(22px, 2.6vw, 33px);
  font-weight: 1000;
  letter-spacing:.5px;
  line-height:1.1;
}
.nv-stat-icon{
  width: 48px; height: 48px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 24px rgba(0,0,0,.24);
}
.nv-stat-icon i{ font-size: 1.25rem; color: var(--p2); }

/* =========================================================
   Pills / Chips
========================================================= */
.nv-pill, .nv-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: .85rem;
  border: 1px solid rgba(255,255,255,.12);
}
.nv-pill{
  background: rgba(0,0,0,.20);
  color: var(--muted);
}
.nv-pill b{ color: var(--text); }
.nv-chip{
  background: rgba(255,255,255,.06);
}
.nv-chip-ok{ color: var(--ok); border-color: rgba(68,255,166,.30); }
.nv-chip-warn{ color: var(--warn); border-color: rgba(255,213,106,.30); }
.nv-chip-bad{ color: var(--bad); border-color: rgba(255,91,123,.30); }
.nv-chip-info{ color: var(--info); border-color: rgba(95,208,255,.30); }

/* =========================================================
   Tables (mobile safe)
========================================================= */
.nv-table-wrap{
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.nv-table{
  width:100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}
@media (max-width: 992px){ .nv-table{ min-width: 760px; } }
@media (max-width: 576px){ .nv-table{ min-width: 680px; } }

.nv-table thead th{
  text-align:right;
  font-weight: 1000;
  color: var(--p2);
  padding: 14px 14px;
  background: linear-gradient(135deg, rgba(0,0,0,.28), rgba(255,255,255,.04));
  border-bottom: 1px solid rgba(255,255,255,.10);
  white-space:nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.nv-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--text);
  vertical-align: middle;
}
.nv-table tbody tr{ transition: background var(--t) ease; }
.nv-table tbody tr:hover{ background: rgba(85,215,255,.06); }
.nv-td-muted{ color: var(--muted) !important; }
.nv-td-strong{ font-weight: 900; }

/* =========================================================
   Forms
========================================================= */
.nv-field{ display:flex; flex-direction:column; gap:8px; }
.nv-label{ font-weight: 900; color: var(--muted); font-size: .92rem; }

.nv-input, .nv-select, .nv-textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(109,94,252,.22);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 11px 12px;
  outline:none;
  transition: transform var(--t) ease, border-color var(--t) ease, background var(--t) ease, box-shadow var(--t) ease;
}
.nv-textarea{ min-height: 110px; resize: vertical; }
.nv-input:focus, .nv-select:focus, .nv-textarea:focus{
  border-color: rgba(85,215,255,.60);
  background: rgba(255,255,255,.085);
  box-shadow: var(--focus);
  transform: translateY(-1px);
}
.nv-help{ color: var(--muted2); font-size:.90rem; font-weight: 700; }
.nv-error{ color: var(--bad); font-weight: 900; }

/* Prevent iOS zoom on inputs */
@media (max-width: 576px){
  .nv-input, .nv-select, .nv-textarea{ font-size: 16px; }
}

/* =========================================================
   Alerts
========================================================= */
.nv-alert{
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 12px 14px;
  box-shadow: var(--shadow2);
}
.nv-alert-ok{ border-color: rgba(68,255,166,.30); }
.nv-alert-warn{ border-color: rgba(255,213,106,.30); }
.nv-alert-bad{ border-color: rgba(255,91,123,.30); }
.nv-alert-info{ border-color: rgba(95,208,255,.30); }

/* =========================================================
   Modal Backdrop
========================================================= */
.nv-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:none;
  z-index: 120;
}
.nv-backdrop.is-open{ display:block; }

/* =========================================================
   SweetAlert2 Theme
========================================================= */
.swal2-popup{
  background: rgba(6,10,28,.62) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(85,215,255,.30) !important;
  border-radius: 18px !important;
  color: var(--text) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.60) !important;
}
.swal2-title{ color: var(--p2) !important; font-weight: 1000 !important; }
.swal2-html-container{ color: var(--text) !important; }
.swal2-confirm{
  background: linear-gradient(135deg, rgba(109,94,252,.95), rgba(85,215,255,.72)) !important;
  color: #071022 !important;
  border-radius: 14px !important;
  font-weight: 1000 !important;
}
.swal2-cancel{
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-weight: 1000 !important;
}

/* =========================================================
   Sidebar content
========================================================= */
.nv-side-head{ display:flex; gap:12px; align-items:center; padding:16px; }
.nv-side-logo{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  font-weight:1000;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.nv-side-name{ font-weight:1000; }
.nv-side-sub{ opacity:.7; font-weight:800; font-size:.9rem; }

.nv-nav{ padding: 8px 12px 14px; display:flex; flex-direction:column; gap:8px; }
.nv-nav-item{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.25;
  word-break: break-word;
}
.nv-nav-item.active{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.nv-nav-sep{ height:1px; background: rgba(255,255,255,.08); margin: 10px 2px; }
.nv-side-foot{ padding: 12px 16px; opacity:.75; }

/* =========================================================
   Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* =========================================================
   LTR Support (optional, future)
========================================================= */
html[dir="ltr"] body{ direction:ltr; }
html[dir="ltr"] .nv-sidebar{
  right:auto; left:0;
  border-left:none;
  border-right: 1px solid rgba(255,255,255,.10);
}
html[dir="ltr"] .nv-main{
  margin-right: 0;
  margin-left: var(--sidebar-w);
}
@media (max-width: 992px){
  html[dir="ltr"] .nv-sidebar{ left:0; right:auto; transform: translateX(-110%); }
  html[dir="ltr"] .nv-sidebar.is-open{ transform: translateX(0); }
  html[dir="ltr"] .nv-main{ margin-left:0; }
}