/* TopLink Pro Theme unified from dashboard-pro.html */
:root{
  --tl-bg:#020817;
  --tl-bg2:#061126;
  --tl-panel:rgba(12,25,52,.84);
  --tl-panel2:rgba(15,33,68,.72);
  --tl-line:rgba(82,145,255,.20);
  --tl-line2:rgba(0,212,255,.42);
  --tl-blue:#1478ff;
  --tl-blue2:#0ea5ff;
  --tl-cyan:#00d4ff;
  --tl-green:#35e66b;
  --tl-red:#ff4f55;
  --tl-text:#f4f8ff;
  --tl-muted:#95a9c8;
  --tl-shadow:0 24px 70px rgba(0,0,0,.32);
  --tl-r:22px;
  --tl-rs:14px;
}

html body{
  background:
    radial-gradient(circle at 15% 16%, rgba(20,120,255,.22), transparent 32%),
    radial-gradient(circle at 84% 20%, rgba(0,212,255,.13), transparent 30%),
    linear-gradient(135deg,#020817,#061126 55%,#020817) !important;
  color:var(--tl-text) !important;
}

html body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.9;
}

/* ===== Shell / Sidebar ===== */
html body .app{
  align-items:stretch !important;
  min-height:100vh !important;
}

html body .sidebar{
  background:linear-gradient(180deg,rgba(7,18,42,.96),rgba(3,9,22,.98)) !important;
  border-left:1px solid var(--tl-line) !important;
  box-shadow:-18px 0 65px rgba(0,0,0,.28) !important;
}

html body .sidebar .footer{
  margin-top:auto !important;
  padding-top:18px !important;
  border-top:1px solid rgba(90,150,255,.16) !important;
}

/* زر الخروج */
html body .logout,
html body .sidebar .footer .btn,
html body .sidebar button[id="logoutBtn"],
html body .sidebar .btn[id="logoutBtn"]{
  min-height:52px !important;
  border-radius:16px !important;
  border:1px solid rgba(120,160,220,.26) !important;
  background:rgba(255,255,255,.035) !important;
  color:white !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

html body .logout:hover,
html body .sidebar .footer .btn:hover,
html body .sidebar button[id="logoutBtn"]:hover,
html body .sidebar .btn[id="logoutBtn"]:hover{
  border-color:rgba(0,212,255,.45) !important;
  background:rgba(20,120,255,.13) !important;
}

/* كارت الحساب / مرحبا */
html body .profile,
html body .userCard,
html body .account,
html body .accountBox,
html body .account-card,
html body .chip,
html body .topbar .chip,
html body .headerLeft .hello,
html body .hello{
  border:1px solid rgba(90,150,255,.18) !important;
  background:linear-gradient(180deg,rgba(18,34,70,.72),rgba(9,18,38,.88)) !important;
  color:#d7e6ff !important;
  border-radius:20px !important;
  box-shadow:none !important;
}

html body .chip{
  min-height:38px !important;
  padding:9px 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}

html body .chip b,
html body .hello b{
  color:#fff !important;
}

/* القائمة */
html body .nav a,
html body .nav button,
html body .nav .nav-btn,
html body .sidebar a{
  min-height:52px !important;
  border:1px solid rgba(90,150,255,.13) !important;
  background:rgba(255,255,255,.035) !important;
  border-radius:16px !important;
  color:#c6d4ec !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

html body .nav a:hover,
html body .nav button:hover,
html body .nav .nav-btn:hover,
html body .sidebar a:hover{
  background:rgba(20,120,255,.14) !important;
  border-color:rgba(0,212,255,.28) !important;
  color:white !important;
}

html body .nav a.active,
html body .nav button.active,
html body .nav .nav-btn.active,
html body .sidebar a.active{
  background:linear-gradient(135deg,rgba(20,120,255,.58),rgba(0,212,255,.16)) !important;
  border-color:rgba(0,212,255,.50) !important;
  color:white !important;
  box-shadow:0 0 34px rgba(20,120,255,.20) !important;
}

/* ===== Panels / Cards ===== */
html body .topbar,
html body .top,
html body .panel,
html body .card,
html body .box,
html body .pricing-card,
html body .stat-card,
html body .stats .panel,
html body .modal,
html body .dialog{
  border:1px solid var(--tl-line) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 18% 0%,rgba(20,120,255,.16),transparent 45%),
    linear-gradient(180deg,rgba(14,31,64,.82),rgba(8,18,40,.90)) !important;
  box-shadow:var(--tl-shadow) !important;
  color:var(--tl-text) !important;
}

html body .panel h1,
html body .panel h2,
html body .panel h3,
html body .topbar h1,
html body .top h1,
html body h1,
html body h2,
html body h3{
  color:#fff !important;
  text-shadow:0 0 28px rgba(20,120,255,.18) !important;
}

html body .muted,
html body small,
html body .hint,
html body .sub,
html body .panel p{
  color:var(--tl-muted) !important;
}

/* ===== Buttons / Inputs ===== */
html body .btn,
html body button:not(.toggle),
html body input[type="submit"],
html body a.btn{
  border:1px solid rgba(90,150,255,.22) !important;
  background:rgba(255,255,255,.04) !important;
  color:white !important;
  border-radius:14px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

html body .btn:hover,
html body button:not(.toggle):hover,
html body input[type="submit"]:hover,
html body a.btn:hover{
  border-color:rgba(0,212,255,.48) !important;
  background:rgba(20,120,255,.14) !important;
}

html body .btn.primary,
html body button.primary,
html body button[type="submit"],
html body input[type="submit"]{
  background:linear-gradient(135deg,#1268ff,#00b8ff) !important;
  border-color:rgba(0,212,255,.58) !important;
  box-shadow:0 16px 34px rgba(20,120,255,.24) !important;
  color:white !important;
}

/* أزرار الخطر تفضل واضحة */
html body .btn.danger,
html body button.danger{
  background:rgba(255,79,85,.14) !important;
  border-color:rgba(255,79,85,.30) !important;
  color:#ffb5b8 !important;
}

html body .btn.ok,
html body button.ok{
  background:rgba(0,212,255,.12) !important;
  border-color:rgba(0,212,255,.32) !important;
  color:#dff9ff !important;
}

html body input,
html body select,
html body textarea{
  background:rgba(4,12,28,.42) !important;
  border:1px solid rgba(90,150,255,.20) !important;
  color:#fff !important;
  border-radius:14px !important;
  box-shadow:none !important;
}

html body input:focus,
html body select:focus,
html body textarea:focus{
  outline:none !important;
  border-color:rgba(0,212,255,.58) !important;
  box-shadow:0 0 0 3px rgba(0,212,255,.12) !important;
}

html body .passRow .toggle,
html body button.toggle{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(90,150,255,.24) !important;
  color:#fff !important;
}

/* Login tabs */
html body .tabs button,
html body .tab,
html body [role="tab"]{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(90,150,255,.22) !important;
  color:#fff !important;
  border-radius:14px !important;
  font-weight:900 !important;
}

html body .tabs button.active,
html body .tab.active,
html body [role="tab"][aria-selected="true"],
html body button.active{
  background:linear-gradient(135deg,#1268ff,#00b8ff) !important;
  border-color:rgba(0,212,255,.58) !important;
  color:#fff !important;
}

/* ===== Dashboard tables ===== */
html body .cafesTableWrap,
html body .table,
html body table,
html body .list,
html body .rowsBox{
  border:1px solid rgba(90,150,255,.16) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:rgba(4,12,28,.28) !important;
  box-shadow:none !important;
}

html body .cafesTableHead,
html body .thead{
  background:rgba(20,120,255,.10) !important;
  color:#cfe2ff !important;
  font-weight:950 !important;
  border-bottom:1px solid rgba(90,150,255,.16) !important;
}

html body .dashCafeRow,
html body .row,
html body table tr{
  background:rgba(7,27,62,.62) !important;
  border-bottom:1px solid rgba(90,150,255,.11) !important;
}

html body .dashCafeRow:nth-child(even),
html body .row:nth-child(even),
html body table tr:nth-child(even){
  background:rgba(10,36,78,.58) !important;
}

html body .dashCafeRow:hover,
html body .row:hover,
html body table tr:hover{
  background:rgba(20,120,255,.08) !important;
}

html body .dashCafeRow > div,
html body .cafesTableHead > div,
html body .row > div,
html body table th,
html body table td{
  border-color:rgba(90,150,255,.11) !important;
  color:#f4f8ff !important;
  box-shadow:none !important;
}

/* منع الخلفيات الصغيرة حوالين النصوص */
html body .dashCafeRow b,
html body .dashCafeRow span:not(.dot),
html body .cafesTableHead b,
html body .cafesTableHead span,
html body table b,
html body table span:not(.dot),
html body .panel b,
html body .panel span:not(.dot):not(.tlStatusPill){
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}

/* عنوان عمود الكافيه في النص */
html body .cafesTableHead > div:first-child{
  justify-content:center !important;
  text-align:center !important;
}

/* ===== Status ===== */
html body .tlStatusPill,
html body .status,
html body .badge.ok,
html body .badge.bad,
html body .pill.ok,
html body .pill.bad{
  width:max-content !important;
  min-width:92px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:950 !important;
  box-shadow:none !important;
}

html body .tlStatusBlue,
html body .status.ok,
html body .badge.ok,
html body .pill.ok{
  color:#dff9ff !important;
  background:rgba(0,184,255,.18) !important;
  border:1px solid rgba(0,212,255,.38) !important;
}

html body .tlStatusRed,
html body .status.bad,
html body .badge.bad,
html body .pill.bad{
  color:#ffd1d4 !important;
  background:rgba(255,79,85,.16) !important;
  border:1px solid rgba(255,79,85,.34) !important;
}

html body .tlStatusPill .dot,
html body .status .dot,
html body .pill .dot{
  width:9px !important;
  height:9px !important;
  border-radius:50% !important;
  background:currentColor !important;
  box-shadow:0 0 12px currentColor !important;
}

/* Hide old month label on dashboard only */
html body.dashboard-page .monthLabel,
html body.dashboard-page #monthLabel,
html body.dashboard-page .month-chip{
  display:none !important;
}

/* Selection هادي */
html body ::selection{
  background:rgba(0,212,255,.24) !important;
  color:#fff !important;
}