/* =========================
   Swim Pioneers – Base UI (v3.4)
   - Brand color, RTL/LTR aware
   - Navbar, cards, tables (no rounded header corners)
   - Buttons (solid / ghost / soft) + static indicators
   - Forms, notices
   - Accordion (↑/↓ caret) with RTL/LTR support
   - Member dashboard (hero/photo, kv grid)
   - Admin attachments helpers (grid-2, mono, nowrap)
   - Sticky footer layout
   Font: Tajawal
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800&display=swap');

/* ---------- Variables ---------- */
:root{
  --brand:#0C2340;  /* primary brand */

  --bg:#f7f8ff;
  --text:#0f1636;
  --muted:#62709b;

  --surface:#fff;
  --surface-2:#f1f3ff;
  --surface-3:#e9edff;
  --border:#e3e8ff;

  /* Solid buttons palette */
  --btn-primary:#2563EB;
  --btn-info:#0EA5E9;
  --btn-success:#22C55E;
  --btn-warning:#FACC15;
  --btn-danger:#EF4444;

  /* Very-light notice (also used by soft buttons) */
  --notice-info-bg:#f7fbff;
  --notice-info-bd:#e6f0ff;

  --notice-danger-bg:#fff7f7;
  --notice-danger-bd:#ffe3e3;

  --notice-success-bg:#f6fff8;
  --notice-success-bd:#dff7e7;

  --notice-warning-bg:#fffdf4;
  --notice-warning-bd:#fff0bf;

  /* Effects */
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow-md:0 10px 25px rgba(0,0,0,.10);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html, body{ padding:0; margin:0; }
body{
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-inline-size:100%; display:block; }

/* ---------- Container ---------- */
.container{ inline-size:min(1100px,94%); margin-inline:auto; align-items:center;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ margin:0 0 .6em; line-height:1.2; }
.muted{ color:var(--muted); }

/* ---------- Header / Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(0deg, rgba(255,255,255,.9), rgba(255,255,255,.9));
  backdrop-filter:saturate(1.2) blur(6px);
  -webkit-backdrop-filter:saturate(1.2) blur(6px);
  border-block-end:1px solid var(--border);
}
.navbar .inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; color:var(--brand); text-decoration:none;
}
.brand:hover,.brand:focus{ text-decoration:none; }
.brand img{ inline-size:40px; block-size:40px; object-fit:cover; border-radius:12px; }
.menu{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.menu a{
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--text); text-decoration:none; padding:.36rem .6rem; border-radius:10px;
}
.menu a:hover,.menu a:focus{ background:var(--surface-2); text-decoration:none; }

.burger{ display:none; inline-size:42px; block-size:36px; border-radius:10px; border:1px solid var(--border);
  align-items:center; justify-content:center; background:var(--surface); cursor:pointer; }
.burger:focus-visible{ outline:2px solid #ffd84a; outline-offset:2px; }
.burger span{
  display:block; inline-size:18px; block-size:2px; background:var(--text);
  position:relative;
}
.burger span + span{ margin-top:4px; }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Mobile menu */
@media (max-width:860px){
  .menu{
    position:absolute; inset-inline:0; top:100%;
    background:#fff; border-block-end:1px solid var(--border);
    display:none; padding:10px; gap:10px; flex-direction:column;
  }
  .menu.open{ display:flex; }
  .burger{ display:flex; }
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-l); box-shadow:var(--shadow-sm);
  overflow:hidden; ; align-items:center;
}
.card-header{
  padding:12px 16px; font-weight:800; border-block-end:1px solid var(--border);
  background:linear-gradient(180deg,#fff,#fafbff);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-title{ margin:0; font-size:1.05rem; }
.card-actions{ display:flex; gap:8px; }
.card-content{ padding:16px; align-items:center; justify-content:space-between;}
.card-footer{ padding:10px 16px; display:flex; gap:10px; border-block-start:1px solid var(--border); }

/* يوسّط كل العناصر الداخلية أفقياً */
.card-content.center-x{
  display:flex;
  flex-direction:column;   /* يحافظ على الترتيب تحت بعض */
  align-items:center;      /* <-- التوسيط الأفقي */
  gap:10px;                /* مسافة اختيارية بين العناصر */
}

/* عناصر شائعة قد تحتاج تضبيط عرضها لتتمركز */
.card-content.center-x > .table-wrap,
.card-content.center-x > table,
.card-content.center-x > form,
.card-content.center-x > .kv,
.card-content.center-x > .btn-row{
  margin-inline:auto;      /* يضمن التوسيط حتى لو لها عرض محدد */
  max-width:100%;
}

.card-content.text-center{
  text-align:center;
}


/* ---------- Profile card ---------- */
.profile-card{
  display:grid; grid-template-columns:68px 1fr; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:12px; 
}
.profile-card .avatar{
  inline-size:140px; block-size:180px; border-radius:14px; object-fit:cover; box-shadow:var(--shadow-sm); width:140px; height:160px;
}
.profile-card .meta .role{ font-size:.85rem; color:var(--muted); }
.profile-card .meta .name{ font-weight:800; font-size:1.15rem; margin-bottom:.25rem; }
.row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tag{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.28rem .6rem; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
}

/* Optional table-like profile layout */
.profile-grid{
  display:grid; grid-template-columns:140px 1fr; gap:14px; align-items:start;
}
.profile-grid .profile-photo-col{ display:flex; justify-content:center; align-items:flex-start; }
.profile-grid .profile-photo{
  inline-size:120px; block-size:120px; object-fit:cover; border-radius:16px; box-shadow:var(--shadow-sm);
}
.profile-grid .profile-data-col{ align-self:start; }
html[dir="rtl"] .profile-grid{ grid-template-columns:1fr 140px; }

/* ---------- Member dashboard: hero (no card) ---------- */

.hero{ text-align:center; padding-block:12px 6px; }

.hero .passport-photo{
  display:block;
  margin-inline:auto;        /* center horizontally */
  width:140px; height:180px; /* passport size */
  inline-size:140px; block-size:180px;
  aspect-ratio:35/45;
  object-fit:cover;
  border-radius:8px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  margin-inline:auto;
}

.member-hero{
  text-align:center;
  margin-block:8px 12px;
}
.member-hero .name{
  font-weight:800;
  margin:.5rem 0 .25rem;
  font-size:1.1rem;
}

/* نص أحادي العرض للـ CPR */
.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.95rem;
}

@media (max-width:480px){
  .hero .passport-photo{
    width:120px; height:154px;
    inline-size:120px; block-size:154px;
  }
}

.hero .name{ font-weight:800; margin:.5rem 0 .4rem; font-size:1.1rem; }
.hero .chip-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ---------- Tables ---------- */
//.table-wrap{ overflow:auto; }
table{ width:100%; border-collapse:separate; border-spacing:0; }
thead th{
  text-align:center; padding:.7rem .8rem; font-weight:800; color:var(--muted);
  background:var(--surface-3);
  vertical-align:middle;
  border-radius:0; /* no rounded corners */
}
tbody td{
  padding:.7rem .8rem; border-block-start:1px solid var(--border);
  vertical-align:middle; text-align:center;
}
tbody td:first-child{ text-align:center; }

/* سكرول أفقي للجداول */
.table-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* سفاري/موبايل */
}

/* خلّي الجدول يتمدّد بحسب محتواه ليظهر السكرول */
.table-wrap > table{
  width: auto;          /* ينسخّط width:100% القديم داخل .table-wrap فقط */
  min-width: 720px;     /* عدّل الرقم حسب عدد الأعمدة */
}

/* اختياري: منع لفّ النص لزيادة العرض (وبالتالي السكرول) */
.table-wrap.nowrap th,
.table-wrap.nowrap td{
  white-space: nowrap;
}


/* ---------- Buttons (base) ---------- */
.btn{
  --bgc:#f3f5ff; --fgc:#0f1636; --bdc:var(--border);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.46em;
  padding:.46rem .78rem; min-block-size:2rem;
  border-radius:12px; border:1px solid var(--bdc);
  font-weight:600; font-size:.84rem; letter-spacing:.2px; line-height:1; text-align:center;
  cursor:pointer; user-select:none;
  background:var(--bgc); color:var(--fgc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 4px 10px rgba(0,0,0,.05);
  transition:transform .06s ease, box-shadow .25s ease, filter .25s ease, background .25s ease, color .2s ease, border-color .25s ease;
  text-decoration:none;
}
.btn a{ text-decoration:none; color:inherit; }
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 45%);
  mix-blend-mode:soft-light; opacity:.75; pointer-events:none;
}
.btn:hover,.btn:active,.btn:focus{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.10);
  filter:none; text-decoration:none;
}
.btn:focus-visible{ outline:2px solid #ffd84a; outline-offset:2px; }
.btn-pill{ border-radius:999px; }
.btn-sm{ padding:.36rem .56rem; min-block-size:1.8rem; font-size:.8rem; }
.btn-lg{ padding:.68rem .96rem; min-block-size:2.4rem; font-size:.94rem; }
.btn[disabled], .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* Solid variants */
.btn-primary,.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background:var(--btn-primary)!important; color:#fff!important; border-color:rgba(0,0,0,.18)!important;
}
.btn-info,.btn-info:hover,.btn-info:focus,.btn-info:active{
  background:var(--btn-info)!important; color:#fff!important; border-color:rgba(0,0,0,.18)!important;
}
.btn-success,.btn-success:hover,.btn-success:focus,.btn-success:active{
  background:var(--btn-success)!important; color:#fff!important; border-color:rgba(0,0,0,.18)!important;
}
.btn-warning,.btn-warning:hover,.btn-warning:focus,.btn-warning:active{
  background:var(--btn-warning)!important; color:#fff!important; border-color:rgba(0,0,0,.10)!important;
}
.btn-danger,.btn-danger:hover,.btn-danger:focus,.btn-danger:active{
  background:var(--btn-danger)!important; color:#fff!important; border-color:rgba(0,0,0,.18)!important;
}

/* Ghost/Link */
.btn-ghost{
  --bgc:transparent; --fgc:var(--text); --bdc:transparent;
  box-shadow:none; border-color:transparent;
}
.btn-ghost:hover,.btn-ghost:focus{ background:var(--surface-2); color:var(--text); }

/* Soft buttons (match notice tones) */
.btn-soft{
  --fgc:var(--brand);
  background:var(--notice-info-bg);
  border-color:var(--notice-info-bd);
  color:var(--fgc);
}
.btn-soft:hover{ border-color:#d7e6ff; }
.btn-soft-info{ background:var(--notice-info-bg);  border-color:var(--notice-info-bd);  color:var(--brand); }
.btn-soft-success{ background:var(--notice-success-bg); border-color:var(--notice-success-bd); color:var(--brand); }
.btn-soft-warning{ background:var(--notice-warning-bg); border-color:var(--notice-warning-bd); color:var(--brand); }
.btn-soft-danger{  background:var(--notice-danger-bg);  border-color:var(--notice-danger-bd);  color:var(--brand); }

/* === Static indicator buttons (non-interactive, no dim) === */
.btn-static,
.btn[aria-disabled="true"]{
  pointer-events:none;
  cursor:default;
  opacity:1; /* لا بهتان */
}
.btn-static:hover, .btn-static:focus,
.btn[aria-disabled="true"]:hover, .btn[aria-disabled="true"]:focus{
  transform:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 4px 10px rgba(0,0,0,.05) !important;
  filter:none !important;
}

/* ---------- Forms ---------- */
.input, select, textarea{
  display:block; inline-size:100%; padding:.56rem .7rem;
  border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.input:focus, select:focus, textarea:focus{ outline:2px solid #ffd84a; outline-offset:2px; }

/* ---------- Notices ---------- */
.notice{
  display:flex; align-items:flex-start; gap:10px; padding:.7rem .9rem;
  background:var(--surface); border-radius:14px; border:1px solid var(--border);
}
.notice .title{ font-weight:800; margin:0; }
.notice .desc{ margin:.2rem 0 0; color:var(--muted); font-size:.94rem; }
.notice-info{ background:var(--notice-info-bg); border-color:var(--notice-info-bd); }
.notice-success{ background:var(--notice-success-bg); border-color:var(--notice-success-bd); }
.notice-danger{ background:var(--notice-danger-bg); border-color:var(--notice-danger-bd); }
.notice-warning{ background:var(--notice-warning-bg); border-color:var(--notice-warning-bd); }

/* ---------- Utility ---------- */
.center{ display:grid; place-items:center; }
.divider{ height:1px; background:var(--border); margin:12px 0; }

/* =========================================================
   Accordion (card-style) — <details class="accordion">
   ========================================================= */
.accordion-group{
  display:grid; gap:10px; margin-top:14px;
}
.accordion{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-m); overflow:hidden;
}
.accordion > summary.accordion-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; cursor:pointer; user-select:none; list-style:none; position:relative;
}
.accordion > summary::-webkit-details-marker{ display:none; }
.accordion > summary::marker{ content:""; }
/* Caret ↓ (closed) / ↑ (open) — force vertical in both LTR/RTL */
.accordion > summary.accordion-header::after{
  content:"";
  inline-size:8px; block-size:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform: rotate(225deg);
  transition:transform .2s ease, opacity .2s ease; opacity:.9;
}
.accordion[open] > summary.accordion-header::after{ transform:rotate(45deg); }
.accordion .accordion-content{ padding:16px; animation:acc-fade .18s ease; }
.accordion > summary.accordion-header:focus-visible{ outline:2px solid #ffd84a; outline-offset:2px; }
.accordion.accordion-sm > summary.accordion-header{ padding:10px 14px; }
.accordion.accordion-sm .accordion-content{ padding:12px 14px; }
@keyframes acc-fade{ from{opacity:0} to{opacity:1} }

/* =========================================================
   Enhancements — Accessibility, RTL/LTR polish
   - Table first/last column alignment & header paddings
   - Radio buttons (if needed in future)
   - Print styles & Backdrop-filter fallback
   ========================================================= */

/* Tables: first/last column care */
thead th:first-child{ padding-inline-start:1rem; }
thead th:last-child{ text-align:center; padding-inline-end:1rem; }
tbody td:first-child{ text-align:center; }
tbody td:last-child{ text-align:center; }

/* (Optional) Radio buttons baseline if used later */
input[type="radio"]{
  -webkit-appearance:none; appearance:none;
  inline-size:1.05rem; block-size:1.05rem;
  border:2px solid var(--border); border-radius:50%;
  background:#fff; display:inline-grid; place-content:center;
  vertical-align:middle;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  accent-color: var(--brand);
}
input[type="radio"]::before{
  content:""; inline-size:.55rem; block-size:.55rem; border-radius:50%;
  transform:scale(0); transition:transform .12s ease; background:var(--brand);
}
input[type="radio"]:checked{ border-color:color-mix(in srgb, var(--brand) 60%, #fff); }
input[type="radio"]:checked::before{ transform:scale(1); }
input[type="radio"]:focus-visible{ outline:2px solid #ffd84a; outline-offset:2px; }
input[type="radio"][disabled]{ opacity:.6; cursor:not-allowed; }

/* ---------- Print styles ---------- */
@media print{
  *{ box-shadow:none !important; text-shadow:none !important; }
  body{ background:#fff !important; color:#000 !important; }
  .navbar, .burger{ display:none !important; }
  .card, .table-wrap, table{ background:#fff !important; border-color:#ccc !important; }
  a::after{ content:" (" attr(href) ")"; font-weight:normal; }
}

/* ---------- Backdrop-filter fallback ---------- */
@supports not ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))){
  .navbar{ background:rgba(255,255,255,.98); }
}

/* ---------- Extra breakpoints ---------- */
@media (max-width:600px){
  .card-header{ flex-direction:column; align-items:flex-start; gap:6px; }
  .profile-grid{ grid-template-columns:1fr; }
  thead th, tbody td{ padding:.6rem .7rem; }
  .btn{ min-block-size:2.2rem; font-size:.82rem; }
}
@media (max-width:480px){
  .container{ inline-size:94%; }
  table{ font-size:.94rem; }
  .btn{ padding:.44rem .7rem; }
}
@media (min-width:1200px){
  .container{ inline-size:min(1200px,92%); }
  .card{ border-radius:20px; }
}

/* ---------- Safari table header/text alignment fallback ---------- */
@supports (-webkit-touch-callout: none){
  thead th{ text-align:left; }
  html[dir="rtl"] thead th{ text-align:right; }

  thead th:first-child{ padding-left:1rem; }
  thead th:last-child{ text-align:right; padding-right:1rem; }

  html[dir="rtl"] thead th:first-child{ padding-right:1rem; }
  html[dir="rtl"] thead th:last-child{ text-align:left; padding-left:1rem; }

  tbody td:first-child{ text-align:left; }
  tbody td:last-child{ text-align:right; }
  html[dir="rtl"] tbody td:first-child{ text-align:right; }
  html[dir="rtl"] tbody td:last-child{ text-align:left; }
}

/* ===== Layout: sticky footer via flex body ===== */
html, body{ height:100%; }
body{ min-height:100vh; display:flex; flex-direction:column; }
.page-main{ flex:1 0 auto; display:block; }
.site-footer{ margin-top:auto; }

/* ===== Auth card: narrower & centered ===== */
.auth-card{ max-width:520px; margin-inline:auto; }

/* ===== Helpers (member + admin pages) ===== */
.pre-wrap{ white-space:pre-wrap; word-break:break-word; }
.table-wrap td, .table-wrap th{ word-break:break-word; }

/* Key/Value grid for member data */
.kv{ display:grid; grid-template-columns:170px 1fr; gap:8px 14px; font-size:.95rem; }
.kv .k{ font-weight:800; text-align:left; }
.kv .v{ text-align:left; }
html[dir="rtl"] .kv{ grid-template-columns:170px 1fr; }
html[dir="rtl"] .kv .k, html[dir="rtl"] .kv .v{ text-align:right; }
@media (max-width:640px){
  .kv{ grid-template-columns:1fr; }
  html[dir="rtl"] .kv{ grid-template-columns:1fr; }
}

/* Quick links card spacing */
.quick-card .card-content{ padding:12px; }
.quick-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* Admin attachments helpers */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:720px){ .grid-2{ grid-template-columns:1fr; } }
.hint{ color:var(--muted); font-size:.9rem; }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.nowrap{ white-space:nowrap; }