/* ===== Pro Overhaul Theme (RTL Friendly) ===== */
:root{
  --bg:#0c0f14; --bg-2:#121722; --panel:#161c2a; --panel-2:#1b2232;
  --border:#262e42; --text:#e8eefc; --muted:#a8b3cf; --brand:#4f8cff;
  --brand-2:#2dd4bf; --warn:#ffcd4a; --danger:#ff5d87; --ok:#16db93;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{height:100%;}
body{
  margin:0; min-height:100%;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color:var(--text); background: radial-gradient(1000px 600px at 10% -10%, #162033, transparent),
                       radial-gradient(1000px 700px at 110% 10%, #0e182d, transparent), var(--bg);
  direction: rtl;
}
a{color:inherit; text-decoration:none}
.container{max-width:1400px; margin:auto; padding:0 22px}
.hidden{display:none !important}
hr{border:0; height:1px; background:var(--border); margin:16px 0}

/* Layout */
.app{
  display:grid; grid-template-columns: 260px 1fr; min-height:100vh;
}
.sidebar{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-inline-end:1px solid var(--border);
  position:sticky; top:0; height:100vh; padding:18px; overflow:auto;
}
.brand{
  display:flex; align-items:center; gap:12px; margin:6px 0 16px 0;
}
.brand .logo{height:38px; width:auto; border-radius:10px; box-shadow: var(--shadow)}
.brand .title{font-weight:800; letter-spacing: .5px; font-size:18px}
.search{
  display:flex; gap:8px; margin:8px 0 16px;
}
.search input{
  flex:1; background:var(--bg-2); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; color:var(--text)
}
.nav{
  display:flex; flex-direction:column; gap:6px; margin-top:8px;
}
.nav a{
  padding:10px 12px; border-radius:10px;
  display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:1px solid transparent; color:var(--muted)
}
.nav a.active, .nav a:hover{
  color:#fff; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color:var(--border)
}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg, rgba(12,15,20,.9), rgba(12,15,20,.65));
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; padding:10px 16px;
}
.topbar .page-title{font-weight:800; font-size:20px}
.topbar .clock{margin-inline-start:auto; font-variant-numeric:tabular-nums; color:var(--brand)}

/* Content */
.content{padding:18px}
.grid{display:grid; gap:16px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));}
.card{
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: var(--shadow);
}
.card h2{margin:0 0 8px 0; font-size:16px; color:#fff}
.card .value{font-size:34px; font-weight:800}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  padding:10px 14px; border-radius:12px; font-weight:700; transition:.2s transform,.2s box-shadow;
  background:linear-gradient(180deg, var(--brand), #3c6fe6); color:#0b0f16; box-shadow:0 6px 18px rgba(79,140,255,.3);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(79,140,255,.4)}
.btn.alt{background:linear-gradient(180deg, var(--brand-2), #17b8a3); color:#041316}
.btn.warn{background:linear-gradient(180deg, var(--warn), #d6aa2c); color:#261b00}
.btn.danger{background:linear-gradient(180deg, var(--danger), #d4446c); color:#2b0014}

/* Tables – Flight board style */
.table{width:100%; border-collapse:separate; border-spacing:0 10px; margin-top:14px}
.table thead th{
  font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; padding:0 10px; text-align:start
}
.table tbody tr{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);
}
.table tbody td{padding:14px 10px}
.table tbody tr td:first-child{border-top-right-radius:12px; border-bottom-right-radius:12px}
.table tbody tr td:last-child{border-top-left-radius:12px; border-bottom-left-radius:12px}

/* Ticker */
.ticker{margin:12px 0; background:linear-gradient(180deg, #0f1522,#0e1420); border:1px solid var(--border); border-radius:14px; overflow:hidden}
.ticker-line{display:flex; gap:10px; align-items:center; padding:10px 14px; font-size:20px; font-weight:800; letter-spacing:.3px}
.ticker-label{color:var(--muted); font-weight:700; font-size:12px; margin-inline-end:8px}
.flaps{display:flex; flex-wrap:wrap; gap:8px}
.flap{background:linear-gradient(180deg, #101a1f,#0c121d); border:1px solid var(--border); border-radius:10px; padding:8px 10px}

/* Counter */
.counter{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; margin:18px 0}
.count-box{min-width:120px; text-align:center; padding:14px 16px; background:linear-gradient(180deg,#0f1626,#0d1320); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.count-box .num{font-size:42px; font-weight:800}
.count-box .label{font-size:12px; color:var(--muted); text-transform:uppercase; margin-top:4px}

/* Footer */
.footer{opacity:.6; font-size:12px; padding:10px 16px}
/* Responsive */
@media (max-width: 920px){
  .app{grid-template-columns: 1fr}
  .sidebar{position:relative; height:auto}
}