/* =========================================================
   Set Me Free — Design tokens
   Palette: deep carnival night + electric violet + coral + gold
   ========================================================= */
:root{
  --bg-0:#0D0620;
  --bg-1:#150C2E;
  --bg-2:#1F1440;
  --surface:#241A4E;
  --surface-hi:#2E2260;
  --border:#38295F;
  --primary:#7C3AED;
  --primary-2:#A855F7;
  --coral:#FF6B5B;
  --gold:#FFC64B;
  --success:#34D399;
  --danger:#F87171;
  --text:#F5F2FF;
  --text-muted:#B7AEDB;
  --text-dim:#8577AD;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --font-display:'Baloo Bhaijaan 2', 'Tajawal', sans-serif;
  --font-body:'Tajawal', sans-serif;
  --shadow-glow:0 8px 30px rgba(124,58,237,.35);
  --bg-scrim:rgba(13,6,32,.78);
}

[data-theme="light"]{
  --bg-0:#F3F0FF;
  --bg-1:#FBFAFF;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-hi:#F1ECFF;
  --border:#E3DBFB;
  --text:#231843;
  --text-muted:#5C4E86;
  --text-dim:#8577AD;
  --bg-scrim:rgba(255,255,255,.72);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}

#appBgLayer{
  position:fixed; inset:0; z-index:-1;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  transition:background-image .3s;
}
#appBgLayer::after{
  content:""; position:absolute; inset:0; background:var(--bg-scrim);
}

body{
  background:radial-gradient(ellipse at top, var(--bg-1), var(--bg-0));
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .3s, color .3s;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 6px; font-weight:700;}
p{margin:0;}
.muted{color:var(--text-muted); font-size:14px;}
button{font-family:var(--font-body); cursor:pointer;}
::selection{background:var(--primary); color:#fff;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px;}

.input, select.input{
  background:var(--bg-2);
  border:1.5px solid var(--border);
  color:var(--text);
  padding:11px 14px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-family:var(--font-body);
  width:100%;
  outline:none;
  transition:border .2s, box-shadow .2s;
}
.input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,.25);}
textarea.input{resize:vertical; min-height:80px;}
label.field-label{font-size:13px; color:var(--text-muted); margin-bottom:6px; display:block; font-weight:700;}
.field{margin-bottom:14px;}

.btn{
  border:none; border-radius:999px; padding:11px 20px; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .15s, background .2s;
}
.btn:active{transform:scale(.96);}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; box-shadow:var(--shadow-glow);}
.btn.primary:hover{box-shadow:0 10px 34px rgba(124,58,237,.5);}
.btn.coral{background:linear-gradient(135deg, var(--coral), #FF8B7E); color:#2b0f0a;}
.btn.ghost{background:var(--surface); color:var(--text); border:1.5px solid var(--border);}
.btn.ghost:hover{background:var(--surface-hi);}
.btn.small{padding:8px 14px; font-size:13px;}
.btn.danger{color:var(--danger);}
.btn.icon{padding:9px; border-radius:12px;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

/* ============ LOGIN ============ */
.view-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:20px;
}
.login-orbit{position:absolute; inset:0; pointer-events:none;}
.orbit-dot{position:absolute; border-radius:50%; filter:blur(2px); opacity:.55;}
.d1{width:260px;height:260px;background:var(--primary);top:-80px;left:-60px; animation:float 9s ease-in-out infinite;}
.d2{width:180px;height:180px;background:var(--coral);bottom:-40px;right:-40px; animation:float 11s ease-in-out infinite reverse;}
.d3{width:120px;height:120px;background:var(--gold);top:20%;right:10%; animation:float 7s ease-in-out infinite;}
.d4{width:90px;height:90px;background:var(--primary-2);bottom:15%;left:8%; animation:float 8s ease-in-out infinite reverse;}
.d5{width:60px;height:60px;background:var(--success);top:60%;right:30%; animation:float 10s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-30px) translateX(20px);}}

.login-card{
  position:relative; z-index:2; background:rgba(31,20,64,.65); backdrop-filter:blur(18px);
  border:1.5px solid var(--border); border-radius:28px; padding:40px 34px; max-width:620px; width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.brand{text-align:center; margin-bottom:28px;}
.brand-mark{
  width:64px;height:64px; margin:0 auto 14px; border-radius:20px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-glow); overflow:hidden; padding:4px;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;}
.brand-mark.small{width:38px;height:38px; border-radius:12px; padding:2px;}
.brand h1{font-size:32px; background:linear-gradient(135deg,#fff,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.brand-tag{color:var(--text-muted); font-size:14px;}

.role-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.role-card{
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:18px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  transition:.2s;
}
.role-card:hover{border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-glow);}
.role-icon{font-size:26px;}
.role-name{font-weight:700; font-size:14px; color:var(--text);}
.role-desc{font-size:11px; color:var(--text-dim);}
.login-hint{text-align:center; color:var(--text-dim); font-size:12px; margin-top:20px;}

/* ============ APP SHELL ============ */
.app-shell{display:none; min-height:100vh;}
.app-shell.active{display:flex;}
.view-login{display:none;}
.view-login.active{display:flex;}

.sidebar{
  width:260px; flex-shrink:0; background:var(--bg-1); border-left:1.5px solid var(--border);
  display:flex; flex-direction:column; padding:20px 16px; height:100vh; position:sticky; top:0;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px; padding:0 4px;}
.sidebar-title{font-family:var(--font-display); font-weight:700; font-size:16px;}
.sidebar-sub{font-size:11px; color:var(--text-dim);}
.sidebar-nav{display:flex; flex-direction:column; gap:4px; flex:1; overflow-y:auto;}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radius-sm);
  color:var(--text-muted); font-weight:700; font-size:14px; background:transparent; border:none; text-align:right;
  width:100%; transition:.15s;
}
.nav-item:hover{background:var(--surface);}
.nav-item.active{background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff;}
.nav-icon{font-size:17px;}
.sidebar-footer{display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--border);}

.mobile-nav-toggle{
  display:none; position:fixed; top:14px; right:14px; z-index:40; width:44px; height:44px; border-radius:14px;
  background:var(--surface); border:1.5px solid var(--border); color:var(--text); font-size:18px;
}

.main-content{flex:1; padding:28px 34px; max-width:1400px; margin:0 auto; width:100%;}
.view{display:none;}
.view.active{display:block; animation:fadein .3s ease;}
.view.view-login.active{display:flex;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.view-header{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; gap:12px; flex-wrap:wrap;}
.header-actions{display:flex; gap:10px;}

/* ============ STATS / CARDS ============ */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.stat-card{
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:18px;
  position:relative; overflow:hidden;
}
.stat-card::after{content:""; position:absolute; width:70px; height:70px; border-radius:50%; background:var(--primary); opacity:.15; top:-20px; left:-20px;}
.stat-value{font-family:var(--font-display); font-size:30px; font-weight:800;}
.stat-label{font-size:13px; color:var(--text-muted); font-weight:700;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.panel{background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:20px;}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px;}
.entity-card{
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:18px;
  display:flex; flex-direction:column; gap:10px; transition:.2s;
}
.entity-card:hover{border-color:var(--primary); transform:translateY(-2px);}
.entity-card .cover{
  height:110px; border-radius:var(--radius-md); background:linear-gradient(135deg, var(--primary), var(--coral));
  display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff;
}
.entity-card h4{font-size:16px;}
.badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--surface-hi); color:var(--text-muted); width:fit-content;}
.badge.gold{background:rgba(255,198,75,.18); color:var(--gold);}
.badge.success{background:rgba(52,211,153,.18); color:var(--success);}
.entity-card .row-actions{display:flex; gap:8px; margin-top:auto;}

/* ============ TABLE ============ */
.table-wrap{overflow-x:auto; border-radius:var(--radius-lg); border:1.5px solid var(--border);}
.data-table{width:100%; border-collapse:collapse; background:var(--surface); font-size:14px;}
.data-table th{background:var(--bg-2); text-align:right; padding:12px 14px; font-size:12px; color:var(--text-muted); white-space:nowrap;}
.data-table td{padding:12px 14px; border-top:1px solid var(--border); vertical-align:middle;}
.data-table tr:hover td{background:var(--surface-hi);}
.color-dot{width:20px; height:20px; border-radius:50%; display:inline-block; border:2px solid rgba(255,255,255,.3);}

/* ============ ROTATION MAP / TRAIL (signature motif) ============ */
.trail{display:flex; align-items:center; gap:0; overflow-x:auto; padding:10px 0;}
.trail-node{
  flex-shrink:0; min-width:120px; padding:10px 14px; border-radius:var(--radius-md); background:var(--surface-hi);
  border:1.5px solid var(--border); text-align:center; font-size:12px; font-weight:700; position:relative;
}
.trail-node.current{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,198,75,.25);}
.trail-node.done{opacity:.5;}
.trail-connector{width:36px; height:3px; background:repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px); flex-shrink:0;}

/* ============ FORM ROW ============ */
.form-row{display:flex; gap:10px; margin-bottom:12px;}
.form-row .input{flex:1;}
.log-list{display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto;}
.log-item{display:flex; justify-content:space-between; padding:10px 12px; background:var(--bg-2); border-radius:var(--radius-sm); font-size:13px;}
.log-points{font-weight:800;}
.log-points.pos{color:var(--success);}
.log-points.neg{color:var(--danger);}

/* ============ SERVER / TEAM PANELS ============ */
.server-panel, .team-panel{display:flex; flex-direction:column; gap:16px;}
.big-timer{
  font-family:var(--font-display); font-size:56px; text-align:center; padding:20px; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--surface), var(--surface-hi)); border:1.5px solid var(--border);
}
.current-team-banner{
  display:flex; align-items:center; gap:16px; padding:18px; border-radius:var(--radius-lg);
  background:var(--surface); border:1.5px solid var(--border);
}
.current-team-banner .swatch{width:52px; height:52px; border-radius:16px; flex-shrink:0;}
.server-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* ============ LIVE DISPLAY ============ */
.display-screen{
  min-height:100vh; margin:-28px -34px; padding:40px; background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,.35), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,107,91,.3), transparent 40%), var(--bg-0);
  display:flex; flex-direction:column; gap:26px;
}
.display-header{display:flex; justify-content:space-between; align-items:center;}
.display-header h1{font-size:40px; background:linear-gradient(135deg,#fff,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.display-clock{font-family:var(--font-display); font-size:34px; color:var(--gold);}
.leaderboard-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.lb-row{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.06); border:1.5px solid var(--border); backdrop-filter:blur(6px);
}
.lb-rank{font-family:var(--font-display); font-size:26px; width:40px; color:var(--gold);}
.lb-swatch{width:34px; height:34px; border-radius:10px; flex-shrink:0;}
.lb-name{font-weight:800; flex:1;}
.lb-score{font-family:var(--font-display); font-size:22px; color:var(--success);}

/* ============ MODAL ============ */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(4,2,12,.7); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-backdrop.active{display:flex;}
.modal{
  background:var(--bg-1); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:26px;
  max-width:520px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.modal-close{background:var(--surface); border:none; color:var(--text); width:32px; height:32px; border-radius:10px; font-size:16px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px;}

/* ============ TOAST ============ */
.toast-stack{position:fixed; bottom:20px; left:20px; z-index:200; display:flex; flex-direction:column; gap:10px;}
.toast{
  background:var(--surface); border:1.5px solid var(--primary); color:var(--text); padding:12px 18px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation:toastin .25s ease;
}
@keyframes toastin{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .role-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 720px){
  .mobile-nav-toggle{display:flex; align-items:center; justify-content:center;}
  .sidebar{position:fixed; right:0; top:0; z-index:35; transform:translateX(100%); transition:transform .25s; box-shadow:0 0 40px rgba(0,0,0,.5);}
  .sidebar.open{transform:translateX(0);}
  .main-content{padding:70px 16px 30px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .display-screen{margin:-70px -16px 0;}

  /* رأس الصفحة: العنوان فوق، والزرار تحته وباخد العرض كله عشان يبقى سهل الضغط عليه بالإبهام */
  .view-header{flex-direction:column; align-items:stretch;}
  .view-header .btn{width:100%; padding:13px 16px; font-size:15px;}
  .header-actions{flex-direction:column;}
  .header-actions .btn{width:100%;}

  /* جدول الفرق: بيتحول لكروت بدل جدول أفقي مزعج على الموبايل */
  #teamsTable thead{display:none;}
  #teamsTable, #teamsTable tbody, #teamsTable tr, #teamsTable td{display:block; width:100%;}
  #teamsTable tr{
    background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md);
    margin-bottom:12px; padding:4px 0; overflow:hidden;
  }
  #teamsTable td{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 14px; border-top:1px solid var(--border); text-align:left;
  }
  #teamsTable td:first-child{border-top:none;}
  #teamsTable td::before{content:attr(data-label); font-size:12px; font-weight:700; color:var(--text-muted); flex-shrink:0;}
  .table-wrap:has(#teamsTable){border:none; overflow:visible;}

  /* الجدول الزمني: بيفضل قابل للتمرير أفقيًا، بس عمود اسم الفريق بيفضل ثابت عشان تعرف أي صف بتتفرج عليه */
  #scheduleTable td:first-child, #scheduleTable th:first-child{
    position:sticky; right:0; background:var(--surface); z-index:2; box-shadow:-6px 0 8px -6px rgba(0,0,0,.4);
  }
  #scheduleTable thead th:first-child{background:var(--bg-2);}
}

/* موبايل صغير جدًا (الآيفون SE وما شابه) */
@media (max-width: 380px){
  .stat-value{font-size:24px;}
  .login-card{padding:20px;}
}