/* ============================================================
   MANASSA PLATFORM — LIGHT THEME
   Palette: Gold, Blue, White, Black, Red, Gunmetal Gray
   ============================================================ */

:root{
  --color-gold: #C8992A;
  --color-gold-dark: #A87B1E;
  --color-blue: #1D4E89;
  --color-blue-light: #2E6DB4;
  --color-white: #FFFFFF;
  --color-black: #14161A;
  --color-red: #C0392B;
  --color-gray: #6B7280;
  --color-gray-light: #E5E7EB;
  --color-bg: #F7F7F5;
  --color-card: #FFFFFF;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(20,22,26,0.06);
  --font-ar: 'Tajawal', 'Segoe UI', sans-serif;
  --font-en: 'Inter', 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  background: var(--color-bg);
  color: var(--color-black);
  font-family: var(--font-en);
  min-height:100%;
}

html[lang="ar"] body{ font-family: var(--font-ar); }

a{ color: var(--color-blue); text-decoration:none; }
a:hover{ color: var(--color-blue-light); text-decoration:underline; }

.topbar{
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
  padding: 14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar .brand{
  font-weight:800;
  font-size:20px;
  color: var(--color-black);
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar .brand .dot{
  width:10px;height:10px;border-radius:50%;
  background: var(--color-gold);
  display:inline-block;
}
.topbar nav a{
  margin-inline-start: 18px;
  color: var(--color-gray);
  font-weight:600;
  font-size:14px;
}
.topbar nav a.active, .topbar nav a:hover{ color: var(--color-blue); text-decoration:none; }

.lang-switch{
  border:1px solid var(--color-gray-light);
  border-radius:20px;
  padding:5px 14px;
  font-size:13px;
  color: var(--color-gray);
  background: var(--color-white);
}
.lang-switch:hover{ border-color: var(--color-gold); color: var(--color-gold-dark); text-decoration:none; }

.auth-wrapper{
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 16px;
}

.card{
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  width:100%;
  max-width: 420px;
  border-top: 4px solid var(--color-gold);
}

.card h1{
  font-size:22px;
  margin:0 0 6px;
  color: var(--color-black);
}
.card p.subtitle{
  color: var(--color-gray);
  font-size:14px;
  margin:0 0 24px;
}

.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
  color: var(--color-black);
}
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=tel],
.field input[type=number]{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--color-gray-light);
  border-radius:8px;
  font-size:14px;
  background:#FCFCFB;
  transition:border-color .15s;
}
.field input:focus{
  outline:none;
  border-color: var(--color-blue);
  background: var(--color-white);
}
.field .hint{ font-size:12px; color:var(--color-gray); margin-top:4px; }
.field .error{ font-size:12px; color:var(--color-red); margin-top:4px; font-weight:600; }

.checkbox-row{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--color-gray);
  margin-bottom:16px;
}
.checkbox-row input{ margin-top:3px; }

.method-toggle{
  display:flex;
  border:1px solid var(--color-gray-light);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:20px;
}
.method-toggle a{
  flex:1;
  text-align:center;
  padding:9px 0;
  font-size:13px;
  font-weight:700;
  color: var(--color-gray);
  background: var(--color-white);
}
.method-toggle a.active{
  background: var(--color-blue);
  color: var(--color-white);
  text-decoration:none;
}

.btn{
  display:inline-block;
  width:100%;
  text-align:center;
  padding:12px 16px;
  border-radius:8px;
  border:none;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition: transform .05s, opacity .15s;
}
.btn:active{ transform: scale(0.99); }
.btn-primary{ background: var(--color-gold); color: var(--color-black); }
.btn-primary:hover{ background: var(--color-gold-dark); }
.btn-secondary{ background: var(--color-blue); color:var(--color-white); }
.btn-secondary:hover{ background: var(--color-blue-light); }
.btn-outline{ background:transparent; border:1px solid var(--color-gray-light); color:var(--color-black); }
.btn-outline:hover{ border-color: var(--color-blue); color:var(--color-blue); }
.btn-danger{ background: var(--color-red); color:var(--color-white); }

.divider{
  display:flex; align-items:center; gap:10px;
  color:var(--color-gray); font-size:12px;
  margin: 18px 0;
}
.divider::before, .divider::after{
  content:''; flex:1; height:1px; background:var(--color-gray-light);
}

.oauth-row{ display:flex; gap:10px; margin-bottom:6px; }
.oauth-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px; border:1px solid var(--color-gray-light); border-radius:8px;
  font-size:13px; font-weight:600; color:var(--color-black); background:var(--color-white);
}
.oauth-btn:hover{ border-color: var(--color-gold); text-decoration:none; }

.footer-link{
  text-align:center; font-size:13px; color:var(--color-gray); margin-top:20px;
}

.alert{
  padding:12px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; font-weight:600;
}
.alert-success{ background:#EAF5EC; color:#1E7A34; border:1px solid #BEE3C4; }
.alert-error{ background:#FBEAE8; color: var(--color-red); border:1px solid #F1C3BE; }
.alert-info{ background:#EAF1FB; color: var(--color-blue); border:1px solid #C6D9F1; }

/* Dashboard shell */
.dash-wrapper{ max-width:1100px; margin:0 auto; padding:32px 16px; }
.dash-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.dash-header h1{ font-size:24px; margin:0; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card{
  background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding:20px; border-inline-start: 4px solid var(--color-blue);
}
.stat-card .num{ font-size:28px; font-weight:800; color:var(--color-black); }
.stat-card .label{ font-size:13px; color:var(--color-gray); margin-top:4px; }
.stat-card.gold{ border-inline-start-color: var(--color-gold); }
.stat-card.red{ border-inline-start-color: var(--color-red); }

.panel{
  background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding:20px; margin-bottom:20px;
}
.panel h2{ font-size:16px; margin:0 0 14px; }

table.sessions{ width:100%; border-collapse:collapse; font-size:13px; }
table.sessions th, table.sessions td{
  text-align: start; padding:10px 8px; border-bottom:1px solid var(--color-gray-light);
}
table.sessions th{ color:var(--color-gray); font-weight:700; }
.badge{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-current{ background:#EAF5EC; color:#1E7A34; }
.badge-other{ background:var(--color-gray-light); color:var(--color-gray); }

@media (max-width: 480px){
  .card{ padding:22px; }
  .oauth-row{ flex-direction:column; }
}