*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f172a; --card:#1e293b; --border:#334155; --text:#e2e8f0; --muted:#94a3b8;
  --primary:#38bdf8; --primary-dark:#0ea5e9; --success:#10b981; --danger:#ef4444;
  --warning:#f59e0b; --shadow:0 10px 25px -5px rgba(0,0,0,0.3);
}
body{
  font-family:-apple-system,'Segoe UI',Arial,sans-serif; background:var(--bg);
  color:var(--text); min-height:100vh; line-height:1.6; direction:rtl;
}
.container{max-width:1280px; margin:0 auto; padding:1.5rem}
header{display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem;
  background:var(--card); border-bottom:1px solid var(--border); margin-bottom:2rem}
header h1{color:var(--primary); font-size:1.5rem}
header .user-info{display:flex; gap:1rem; align-items:center; color:var(--muted)}

.card{background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:1.5rem; margin-bottom:1.5rem; box-shadow:var(--shadow)}
.card h2{margin-bottom:1rem; color:var(--primary); font-size:1.25rem}
.card h3{margin-bottom:0.75rem; color:var(--text); font-size:1.05rem}

label{display:block; margin-bottom:0.5rem; font-weight:500; color:var(--text)}
input,select,textarea{width:100%; padding:0.75rem; background:var(--bg);
  border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:1rem;
  font-family:inherit; direction:rtl}
input:focus,select:focus{outline:none; border-color:var(--primary)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem}
@media(max-width:640px){.row{grid-template-columns:1fr}}

button,.btn{padding:0.75rem 1.5rem; background:var(--primary); color:#0f172a;
  border:none; border-radius:8px; font-weight:600; cursor:pointer; font-size:1rem;
  transition:all 0.2s; display:inline-block; text-align:center}
button:hover,.btn:hover{background:var(--primary-dark); transform:translateY(-1px)}
button:disabled{opacity:0.5; cursor:not-allowed}
.btn-success{background:var(--success); color:#fff}
.btn-danger{background:var(--danger); color:#fff}
.btn-warning{background:var(--warning); color:#0f172a}
.btn-sm{padding:0.4rem 0.8rem; font-size:0.875rem}

.alert{padding:0.75rem 1rem; border-radius:8px; margin-bottom:1rem; font-weight:500}
.alert-error{background:rgba(239,68,68,0.15); color:#fca5a5; border:1px solid var(--danger)}
.alert-success{background:rgba(16,185,129,0.15); color:#6ee7b7; border:1px solid var(--success)}

table{width:100%; border-collapse:collapse; margin-top:1rem}
th,td{padding:0.75rem; text-align:right; border-bottom:1px solid var(--border)}
th{background:var(--bg); color:var(--primary); font-weight:600}
tr:hover{background:rgba(56,189,248,0.05)}

.badge{display:inline-block; padding:0.25rem 0.6rem; border-radius:6px; font-size:0.85rem; font-weight:500}
.badge-morning{background:rgba(245,158,11,0.2); color:#fbbf24}
.badge-afternoon{background:rgba(56,189,248,0.2); color:#7dd3fc}
.badge-night{background:rgba(139,92,246,0.2); color:#c4b5fd}
.badge-unavailable{background:rgba(239,68,68,0.2); color:#fca5a5}
.badge-preferred{background:rgba(16,185,129,0.2); color:#6ee7b7}

.calendar{display:grid; grid-template-columns:repeat(7,1fr); gap:0.5rem; margin-top:1rem}
.cal-header{padding:0.5rem; text-align:center; background:var(--bg); color:var(--primary); font-weight:600; border-radius:6px}
.cal-day{background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:0.5rem;
  min-height:90px; cursor:pointer; transition:all 0.2s; position:relative}
.cal-day:hover{border-color:var(--primary)}
.cal-day .num{font-weight:700; color:var(--muted); margin-bottom:0.25rem}
.cal-day.today{border-color:var(--primary); border-width:2px}
.cal-day .shifts{display:flex; flex-direction:column; gap:2px; font-size:0.75rem}

.login-page{display:flex; align-items:center; justify-content:center; min-height:100vh}
.login-card{max-width:420px; width:90%}
.login-card h1{text-align:center; margin-bottom:0.5rem; color:var(--primary)}
.login-card .subtitle{text-align:center; color:var(--muted); margin-bottom:1.5rem}

.tabs{display:flex; gap:0.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--border)}
.tab{padding:0.75rem 1.25rem; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent}
.tab.active{color:var(--primary); border-bottom-color:var(--primary); font-weight:600}

.flex{display:flex; gap:0.75rem; align-items:center}
.flex-between{display:flex; justify-content:space-between; align-items:center}
.text-muted{color:var(--muted)}
.mt-1{margin-top:0.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem}
.hidden{display:none !important}