/* =========================
   Swim Pioneers – Base UI (Refined)
   - Brand theming (light only)
   - Navbar & footer on brand background
   - Cards, tables (rounded TH), buttons
   - Links: no color change / no underline
   - Member photo (.member-photo) framed + shadow
   - Status badges (square, very-light tones, non-interactive)
   - Notices: header/body/footer + close (X)
   - Accordion caret: ▼ (closed) / ▲ (open), RTL-safe
   - Menu strip (sticky, centered, no wrap, horizontal scroll)
   - Vertical/Horizontal cards system (vcard/hcard)
   ========================= */

/* ---------- Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800&display=swap');

/* ---------- Theme Variables (Light) ---------- */
:root{
  --brand:#0C2340;

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

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

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

  /* Very-light tones (also for badges & soft buttons) */
  --tone-info-bg:#f7fbff;
  --tone-info-bd:#e6f0ff;

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

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

  --tone-warning-bg:#fffdf4;
  --tone-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);

  /* Navbar/Footer text on brand */
  --on-brand:#ffffff;
  --on-brand-muted:#e3e9ff;

  /* Gold separator color */
  --gold:#d4af37;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html, body{ padding:0; margin:0; height:100%; }
body{
  min-height:100vh; display:flex; flex-direction:column;
  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; }
a{ color:inherit; text-decoration:none; }
a:hover, a:focus{ color:inherit; text-decoration:none; }

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

/* ---------- Typography ---------- */
h1,h2,h3,h4{ margin:0 0 .6em; line-height:1.2; }
.muted{ color:var(--muted); }
.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.95rem;
}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  background:var(--brand); color:var(--on-brand);
  border-block-end:1px solid color-mix(in srgb, var(--on-brand) 20%, transparent);
}
.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(--on-brand);
}
.brand img{
  inline-size:40px; block-size:40px; object-fit:cover; border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.menu{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.menu a{
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--on-brand); padding:.36rem .6rem; border-radius:10px;
}
.menu a:hover,.menu a:focus{ background:rgba(255,255,255,.08); }

.burger{ display:none; inline-size:42px; block-size:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  align-items:center; justify-content:center; background:transparent; cursor:pointer; color:var(--on-brand);
}
.burger span{
  display:block; inline-size:18px; block-size:2px; background:var(--on-brand);
  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); }

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

/* ---------- Sticky Menu Strip (under navbar) ---------- */
.menu-strip{
  position:sticky; top:0;            /* يلتصق بأعلى الشاشة تحت النافبار (النافبار z-index أعلى) */
  z-index:45; background:var(--surface);
  border-block-end:1px solid var(--border);
}
.menu-strip .inner{
  display:flex; align-items:center; justify-content:center; /* توسيط العناصر */
  gap:10px; padding-block:4px; /* مسافة بسيطة أعلى/أسفل */
  overflow:auto hidden;        /* سكرول أفقي عند الازدحام */
  white-space:nowrap;          /* منع الالتفاف */
}
.menu-strip a,
.menu-strip .btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.42rem .7rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:inherit; text-decoration:none;
}
.menu-strip a:hover,
.menu-strip .btn:hover{
  background:var(--surface-3);
}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:auto; background:var(--brand); color:var(--on-brand);
  border-top:1px solid color-mix(in srgb, var(--on-brand) 20%, transparent);
}
.site-footer .container{ padding:14px 0; text-align:center; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-l); box-shadow:var(--shadow-sm); overflow:hidden;
}
.card-header{
  padding:12px 16px; font-weight:800; border-block-end:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 70%, #fff));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-title{ margin:0; font-size:1.06rem; }
.card-actions{ display:flex; gap:8px; }
.card-content{ padding:16px; }
.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.text-center{ text-align:center; }


/* === Card / Accordion header background override === */
.card-header,
.card .card-header,
.accordion .acc-header,
.accordion .accordion-header,
.acc-head,
.accordion-header {
  background-color: #E9F2FF !important;
  border-bottom-color: #cce0ff;   /* اختياري: لون حد خفيف متناسق */
}

/* في حال وجود حالة "مطوي/مفتوح"؛ حافظ على نفس اللون */
.accordion .acc-header[aria-expanded="true"],
.accordion .acc-header[aria-expanded="false"],
.accordion .accordion-header.is-open,
.accordion .accordion-header.is-collapsed {
  background-color: #E9F2FF !important;
}

/* اختياري: لون النص داخل الهيدر لضمان وضوح */
.card-header .card-title,
.accordion .acc-header .title,
.accordion .accordion-header .title {
  color: #0f2b5a; /* غامق هادئ */
}
ملاحظات سريعة:




/* ---------- Member Photo ---------- */
.member-photo,
.passport-photo{ /* توافق خلفي */
  display:block; margin-inline:auto;
  width:140px; height:180px; inline-size:140px; block-size:180px; aspect-ratio:35/45;
  object-fit:cover; background:#fff; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--border) 70%, #0000);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
@media (max-width:480px){
  .member-photo, .passport-photo{ width:120px; height:154px; inline-size:120px; block-size:154px; }
}

/* ---------- Status Badges (very light, square, non-interactive) ---------- */
.status-badges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.status-badge{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.32rem .62rem; border:1px solid var(--border);
  border-radius:4px; font-weight:700; font-size:.82rem; pointer-events:none;
}
.status-ok{ background:var(--tone-success-bg); border-color:var(--tone-success-bd); }
.status-warn{ background:var(--tone-warning-bg); border-color:var(--tone-warning-bd); }
.status-info{ background:var(--tone-info-bg); border-color:var(--tone-info-bd); }
.status-no{ background:var(--tone-danger-bg); border-color:var(--tone-danger-bd); }

/* ---------- Tables ---------- */
.table-wrap{ overflow:auto hidden; -webkit-overflow-scrolling:touch; }
.table-wrap > table{ width:auto; min-width:720px; }

table{ border-collapse:separate; border-spacing:0 .5rem; width:100%; }
thead th{
  text-align:center; padding:.7rem .8rem; font-weight:800; color:var(--muted);
  background:var(--surface-3);
  vertical-align:middle;
  border-radius:12px; /* رأس الجدول مستدير لكل عمود */
}
tbody tr{ background:var(--surface); }
tbody td{
  padding:.7rem .8rem; border-block-start:1px solid var(--border);
  vertical-align:middle; text-align:center;
}

/* ---------- Buttons ---------- */
.btn{
  --bgc:#f3f5ff; --fgc:var(--text); --bdc:var(--border);
  position:relative; 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:700; 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, background .25s ease, color .2s ease, border-color .25s ease;
}
.btn:focus-visible{ outline:2px solid #ffd84a; outline-offset:2px; }
.btn-sm{ padding:.36rem .56rem; min-blocksize:1.8rem; font-size:.8rem; }
.btn-lg{ padding:.68rem .96rem; min-blocksize:2.4rem; font-size:.94rem; }
.btn[disabled], .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-primary{ background:var(--btn-primary); color:#fff; border-color:rgba(0,0,0,.18); }
.btn-info   { background:var(--btn-info);    color:#fff; border-color:rgba(0,0,0,.18); }
.btn-success{ background:var(--btn-success); color:#fff; border-color:rgba(0,0,0,.18); }
.btn-warning{ background:var(--btn-warning); color:#fff; border-color:rgba(0,0,0,.10); }
.btn-danger { background:var(--btn-danger);  color:#fff; border-color:rgba(0,0,0,.18); }

.btn-ghost{ background:transparent; color:inherit; border-color:transparent; box-shadow:none; }
.btn-ghost:hover,.btn-ghost:focus{ background:var(--surface-2); }

.btn-soft{ background:var(--tone-info-bg); border-color:var(--tone-info-bd); color:var(--brand); }
.btn-soft-info{ background:var(--tone-info-bg); border-color:var(--tone-info-bd); color:var(--brand); }
.btn-soft-success{ background:var(--tone-success-bg); border-color:var(--tone-success-bd); color:var(--brand); }
.btn-soft-warning{ background:var(--tone-warning-bg); border-color:var(--tone-warning-bd); color:var(--brand); }
.btn-soft-danger{ background:var(--tone-danger-bg); border-color:var(--tone-danger-bd); color:var(--brand); }

.btn-static, .btn[aria-disabled="true"]{ pointer-events:none; cursor:default; opacity:1; }

/* ---------- Forms ---------- */
.input, select, textarea{
  display:block; inline-size:100%; padding:.56rem .7rem;
  border-radius:12px; border:1px solid var(--border); background:var(--surface); 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 (3 sections + close) ---------- */
.notice{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:.7rem .9rem; background:var(--surface); border-radius:14px; border:1px solid var(--border);
}
.notice .notice-header{ font-weight:800; display:flex; align-items:center; justify-content:space-between; }
.notice .notice-body{ color:var(--muted); font-size:.95rem; }
.notice .notice-footer{ display:flex; gap:8px; margin-top:4px; }
.notice .close{
  background:transparent; border:0; color:inherit; cursor:pointer; font-weight:800;
  padding:.2rem .4rem; border-radius:8px;
}
.notice .close:hover{ background:var(--surface-2); }

.notice-info{ background:var(--tone-info-bg); border-color:var(--tone-info-bd); }
.notice-success{ background:var(--tone-success-bg); border-color:var(--tone-success-bd); }
.notice-danger{ background:var(--tone-danger-bg); border-color:var(--tone-danger-bd); }
.notice-warning{ background:var(--tone-warning-bg); border-color:var(--tone-warning-bd); }

/* ---------- Utility ---------- */
.center{ display:grid; place-items:center; }
.divider{ height:1px; background:var(--gold); margin:12px 0; } /* ← خط فاصل باللون الذهبي */
.page-main{ flex:1 0 auto; display:block; }

/* ---------- 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) — ثابت عمودي في RTL/LTR */
.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; }
@keyframes acc-fade{ from{opacity:0} to{opacity:1} }

/* ---------- Cards system (vertical / horizontal) ---------- */
.vcards{ display:grid; gap:12px; }
.vcard{
  display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px;
  box-shadow:var(--shadow-sm);
}
.vcard .v-head{ font-weight:800; }
.vcard .v-meta{ color:var(--muted); font-size:.9rem; }
.vcard .v-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.hcards{ display:grid; gap:12px; }
.hcard{
  display:grid; grid-template-columns:100px 1fr auto; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px;
  box-shadow:var(--shadow-sm);
}
.hcard .h-thumb{ inline-size:100px; block-size:70px; object-fit:cover; border-radius:10px; }
.hcard .h-title{ font-weight:800; }
.hcard .h-meta{ color:var(--muted); font-size:.9rem; }
.hcard .h-actions{ display:flex; gap:8px; }

/* ---------- Layout tweaks ---------- */
@media (max-width:600px){
  .card-header{ flex-direction:column; align-items:flex-start; gap:6px; }
  thead th, tbody td{ padding:.6rem .7rem; }
  .hcard{ grid-template-columns:1fr; }
}
@media (min-width:1200px){
  .container{ inline-size:min(1200px,92%); }
  .card{ border-radius:20px; }
}

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