/* «آخر قيم» — components.css · يعتمد على tokens.css */

/* ---------- الأزرار ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-family:var(--font-display);font-size:18px;font-weight:900;cursor:pointer;user-select:none;white-space:nowrap;
  transition:transform var(--t-lamsa) var(--e-jamr),background var(--t-lamsa) var(--e-jamr),color var(--t-lamsa) var(--e-jamr),border-color var(--t-lamsa) var(--e-jamr),box-shadow var(--t-lamsa) var(--e-jamr)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn .chev{transition:transform var(--t-lamsa) var(--e-jamr)}
.btn:hover .chev{transform:translateX(-5px)}
.btn-primary{background:var(--primary);color:var(--layl);box-shadow:var(--glow);font-palette:--akhir-layl}
.btn-primary:hover{filter:brightness(.92)}
.btn-secondary{background:transparent;color:var(--secondary);border-color:var(--secondary);font-weight:700}
.btn-secondary:hover{background:rgba(191,233,255,.08)}
.btn-ghost{background:transparent;color:var(--text);font-weight:700}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.btn-danger{background:transparent;color:var(--jamr);border-color:var(--jamr);font-weight:700}
.btn-danger:hover{background:rgba(255,90,54,.1)}
.btn-lg{height:56px;font-size:20px;padding:0 28px}
.btn-sm{height:38px;font-size:15px;padding:0 16px}
.btn-icon{width:48px;padding:0}

/* ---------- الحقول ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:700;color:var(--text)}
.field .hint{font-size:12px;color:var(--text-3)}
.field .error{font-size:13px;font-weight:700;color:var(--jamr);font-family:var(--font-display)}
.input{width:100%;box-sizing:border-box;height:48px;padding:0 16px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--field);color:var(--text);
  font-family:var(--font-body);font-size:15px;outline:none;transition:border-color var(--t-lamsa) var(--e-jamr),box-shadow var(--t-lamsa) var(--e-jamr)}
.input::placeholder{color:var(--text-3)}
.input:focus{border-color:var(--jamr);box-shadow:var(--ring)}
.input[aria-invalid="true"]{border-color:var(--jamr)}
textarea.input{height:auto;min-height:110px;padding:12px 16px;resize:vertical;line-height:1.7}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .cursor{position:absolute;left:14px;pointer-events:none}
.select{appearance:none;padding-left:40px;background-image:none}
.select-wrap{position:relative}
.select-wrap .chev{position:absolute;left:14px;top:50%;transform:translateY(-50%) rotate(-90deg);pointer-events:none;transition:transform var(--t-intiqal) var(--e-jamr)}
.select-wrap:focus-within .chev{transform:translateY(-50%) rotate(90deg)}

/* ---------- الاختيار ---------- */
.check{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:15px;font-weight:700}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--border);background:var(--field);display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--t-lamsa) var(--e-jamr),background var(--t-lamsa) var(--e-jamr)}
.check input:checked+.box{border-color:var(--jamr)}
.check input:focus-visible+.box{box-shadow:var(--ring)}
.toggle{position:relative;width:56px;height:30px;border-radius:var(--r-pill);background:var(--border);cursor:pointer;direction:ltr;transition:background var(--t-intiqal) var(--e-jamr);border:none;padding:0}
.toggle .knob{position:absolute;right:3px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--qashda);display:flex;align-items:center;justify-content:center;transition:transform var(--t-intiqal) var(--e-jamr)}
.toggle .knob .chev{opacity:0;transition:opacity var(--t-lamsa) var(--e-jamr)}
.toggle[aria-checked="true"]{background:var(--primary)}
.toggle[aria-checked="true"] .knob{transform:translateX(-26px)}
.toggle[aria-checked="true"] .knob .chev{opacity:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);border:1.5px solid var(--border);font-size:13px;font-weight:700;color:var(--text-2);background:transparent;cursor:pointer;transition:all var(--t-lamsa) var(--e-jamr)}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--layl);border-color:var(--primary)}
.segmented{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--field);border:1.5px solid var(--border);gap:4px}
.segmented button{height:36px;padding:0 16px;border-radius:var(--r-pill);border:none;background:transparent;color:var(--text-2);font-family:var(--font-display);font-weight:900;font-size:15px;cursor:pointer;transition:all var(--t-intiqal) var(--e-jamr)}
.segmented button[aria-selected="true"]{background:var(--primary);color:var(--layl);font-palette:--akhir-layl}

/* ---------- الحالات ---------- */
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;background:var(--card);border:1.5px solid var(--border);color:var(--text-2)}
.status-approved{background:var(--thalj);color:var(--layl);border-color:var(--thalj)}
.status-review{background:rgba(255,90,54,.12);color:var(--jamr);border-color:rgba(255,90,54,.3)}
.status-late{background:var(--jamr);color:var(--layl);border-color:var(--jamr)}
.toast{display:flex;align-items:center;gap:12px;width:min(320px,calc(100vw - 32px));padding:14px 16px;border-radius:var(--r-lg);background:var(--card);border:1.5px solid var(--border);box-shadow:0 16px 40px rgba(0,0,0,.4);animation:akhir-enter var(--t-dukhul) var(--e-jamr) both}
.toast.leaving{animation:akhir-exit var(--t-intiqal) var(--e-rahil) both}
.toast .title{font-family:var(--font-display);font-size:16px;font-weight:900}
.toast .body{font-size:12px;color:var(--text-3)}
.toast-alert{border-color:var(--jamr)}
.loader{display:inline-flex;direction:ltr}
.loader svg{margin-left:-14px;animation:akhir-pulse 1s var(--e-nafas) infinite}
.loader svg:first-child{margin-left:0}
.loader svg:nth-child(2){animation-delay:.12s}.loader svg:nth-child(3){animation-delay:.24s}
.progress{display:inline-flex;direction:ltr}
.progress svg{margin-left:-12px;color:var(--border);transition:color var(--t-lamsa) var(--e-jamr)}
.progress svg:first-child{margin-left:0}
.progress svg.on{color:var(--jamr)}
.plus-one{position:absolute;font-family:var(--font-display);font-weight:900;color:var(--thalj);animation:akhir-plus var(--t-ihtifal) var(--e-nabda) forwards;pointer-events:none}

/* ---------- البطاقات والنوافذ ---------- */
.card{padding:22px;border-radius:var(--r-card);background:var(--card);border:1.5px solid var(--border)}
.card-sm{padding:16px;border-radius:var(--r-xl)}
.modal-backdrop{position:fixed;inset:0;background:rgba(16,20,31,.7);animation:akhir-face var(--t-dukhul) both;display:flex;align-items:center;justify-content:center}
.modal{width:min(440px,calc(100vw - 32px));padding:24px;border-radius:var(--r-xl);background:var(--card);border:1.5px solid var(--border);animation:akhir-modal var(--t-dukhul) var(--e-jamr) both}
@keyframes akhir-modal{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal .title{font-family:var(--font-display);font-size:22px;font-weight:900;margin:0 0 8px}
.divider{display:flex;align-items:center;gap:12px;color:var(--border)}
.divider::before,.divider::after{content:"";flex:1;height:1.5px;background:var(--border)}
.kbd{display:inline-flex;align-items:center;height:22px;padding:0 6px;border-radius:6px;border:1.5px solid var(--border);background:var(--field);font-size:11px;font-weight:700;color:var(--text-2);font-family:var(--font-body)}
.link{color:var(--secondary);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.link:hover{color:var(--text)}
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px;text-align:center}
.empty .title{font-family:var(--font-display);font-size:22px;font-weight:900}