/* Official Google Fonts, self-hosted under the SIL Open Font License in /fonts. */
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/noto-sans-arabic-arabic-variable.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/noto-sans-arabic-latin-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/rubik-latin-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --navy: #1a2422;
    --navy-soft: #2a3936;
    --green: #b8e647;
    --green-dark: #55740d;
    --green-soft: #f0f8dc;
    --gold: #d59d22;
    --red: #b83b37;
    --orange: #b96918;
    --blue: #246b68;
    --ink: #1a2422;
    --muted: #64716d;
    --line: #dce2dc;
    --surface: #fff;
    --canvas: #f6f7f3;
    --radius: 18px;
    --shadow-sm: 0 2px 5px rgba(26,36,34,.04), 0 12px 30px rgba(26,36,34,.06);
    --shadow-md: 0 22px 58px rgba(26,36,34,.16);
    color: var(--ink);
    background: var(--canvas);
    font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; scroll-behavior: smooth; }
html[dir="ltr"] { font-family: Rubik, "Noto Sans Arabic", Arial, sans-serif; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
img, svg { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { color: var(--ink); background: rgba(184,230,71,.5); }
:focus-visible { outline: 3px solid rgba(184,230,71,.75); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 1000; padding: 10px 14px; border-radius: 10px; color: var(--navy); background: var(--green); font-weight: 800; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Logo source includes a large transparent canvas; these wrappers crop it without altering the asset. */
.gymdar-logo { position: relative; display: inline-block; width: 170px; aspect-ratio: 4.52; overflow: hidden; flex: 0 0 auto; }
.gymdar-logo img { position: absolute; top: -92%; left: -25%; width: 150%; max-width: none; height: auto; }
.gymdar-logo-compact { width: 48px; height: 48px; aspect-ratio: 1; border-radius: 14px; background: #f6f7f3; }
.gymdar-logo-compact img { top: -98%; left: -119%; width: 711%; }

/* Shared components */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 18px; }
.card h3 { margin: 0 0 16px; font-size: 18px; }
.cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.grid-2 > *,.grid-3 > * { min-width: 0; }
.compact-report-table { min-width: 0; }
.metric { position: relative; min-height: 128px; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-top: 4px solid currentColor; border-radius: var(--radius); color: var(--green-dark); background: #fff; box-shadow: var(--shadow-sm); }
.metric::before { content: ""; position: absolute; top: -35px; left: -28px; width: 115px; height: 115px; border-radius: 50%; background: currentColor; opacity: .07; }
.metric span, .metric strong, .metric small { position: relative; z-index: 1; display: block; }
.metric span { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.metric strong { color: var(--ink); font-size: 28px; }
.metric small { margin-top: 7px; color: var(--muted); font-size: 11px; }
.metric.blue { color: var(--blue); }.metric.gold { color: var(--gold); }.metric.red { color: var(--red); }.metric.green { color: var(--green-dark); }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 800; line-height: 1.2; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { color: var(--navy); background: var(--green); box-shadow: 0 9px 22px rgba(115,153,20,.2); }
.btn-secondary { color: var(--navy); border-color: #cdd7d1; background: #eef1ec; }
.btn-danger { color: #fff; background: var(--red); }
.btn-ghost { color: var(--navy); border-color: var(--line); background: #fff; }
.btn-sm { min-height: 40px; padding: 8px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.link-button { min-height: 44px; border: 0; padding: 8px 0; color: var(--blue); background: none; cursor: pointer; font-weight: 800; }
.danger-link { color: var(--red); }
.alert { padding: 13px 16px; margin-bottom: 18px; border-radius: 12px; line-height: 1.7; }
.alert-success { color: #344c09; border: 1px solid #cce69a; background: var(--green-soft); }
.alert-error { color: #8d2c29; border: 1px solid #edc4c1; background: #fff0ef; }
.alert ul { margin: 6px 0 0; padding-inline-start: 20px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.money { direction: ltr; display: inline-block; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
/* Keep monetary cells in the table grid; .money also styles inline amounts. */
td.money { display: table-cell; }
bdi.reference-code { white-space: nowrap; }
.portal-history { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 14px; align-self: start; }
.portal-history > summary { cursor: pointer; font-weight: 800; min-height: 32px; }
.portal-history > summary span { color: var(--muted); font-variant-numeric: tabular-nums; }
.portal-next { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.portal-next h2 { margin: 6px 0; font-size: 18px; }
.portal-hero .eyebrow { color: var(--green); }
.hint { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: #fafbf8; line-height: 1.65; }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; color: #42514d; background: #edf1ee; font-size: 12px; font-weight: 800; }
.badge.active,.badge.registered,.badge.paid,.badge.confirmed,.badge.open,.badge.done { color: #385505; border-color: #d0e8a0; background: #edf8d6; }
.badge.scheduled,.badge.partial,.badge.new,.badge.in_progress { color: #185c58; background: #e0f1ef; }
.badge.frozen,.badge.pending,.badge.postponed { color: #8a4b0d; background: #fff0d9; }
.badge.expired,.badge.cancelled,.badge.archived,.badge.suspended,.badge.unpaid,.badge.exhausted,.badge.closed { color: #96312d; background: #fbe7e5; }
.empty { min-height: 104px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 28px; color: var(--muted); text-align: center; }
.empty::before { content: ""; width: 30px; height: 4px; border-radius: 99px; background: #d7ded8; }
.compact-empty { min-height: 0; padding: 14px; }
.compact-empty::before { display: none; }
.eyebrow { display: inline-block; margin-bottom: 8px; color: var(--green-dark); font-size: 11px; font-weight: 900; letter-spacing: .6px; }
.eyebrow.light { color: var(--green); }

/* Forms and tables */
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 17px 19px; }
.filters .field { flex: 1 1 180px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.field { min-width: 0; display: grid; gap: 7px; }
.field.full,.span-2,.form-actions { grid-column: 1/-1; }
.field label { color: #2c3936; font-size: 13px; font-weight: 800; }
.field small,.field-error { color: var(--muted); font-size: 12px; line-height: 1.55; }
.field-error { color: var(--red); }
input,select,textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cbd4cf; border-radius: 11px; outline: none; color: var(--ink); background: #fff; }
input:focus,select:focus,textarea:focus { border-color: #88ae2c; box-shadow: 0 0 0 4px rgba(184,230,71,.28); }
textarea { min-height: 105px; resize: vertical; }
.checkbox { min-height: 44px; display: flex; align-items: center; gap: 9px; font-weight: 700; }
.checkbox input { width: 20px; height: 20px; min-height: 0; accent-color: var(--navy); }
.form-actions { display: flex; gap: 10px; padding-top: 4px; }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; min-width: 700px; border-collapse: collapse; background: #fff; }
th,td { padding: 14px 15px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
th { color: #52615d; background: #f4f6f2; font-size: 12px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.action-details > summary { cursor: pointer; }
.action-details[open] > summary { margin-bottom: 18px; }

/* Admin shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 276px minmax(0,1fr); }
.workspace,.main { min-width: 0; }
.sidebar { position: sticky; top: 0; z-index: 40; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; padding: 22px 16px 18px; color: #fff; border-inline-end: 1px solid rgba(255,255,255,.06); background: radial-gradient(circle at 20% 0%,rgba(184,230,71,.13),transparent 32%),linear-gradient(180deg,#21302d,#121a18); }
.sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.brand { min-width: 0; display: grid; gap: 5px; margin-bottom: 22px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand .gymdar-logo { border-radius: 8px; background: var(--canvas); }
.brand small { color: #aebcb8; font-size: 11px; }
.nav { display: grid; gap: 5px; }
.nav a { min-height: 46px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: #d5dfdc; font-size: 14px; font-weight: 700; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.nav a.active { color: var(--navy); background: var(--green); }
.nav-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 9px; color: #aebfba; background: rgba(255,255,255,.07); }
.nav a.active .nav-icon { color: var(--navy); background: rgba(26,36,34,.1); }
.sidebar-user { display: grid; gap: 4px; margin-top: auto; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.04); }
.sidebar-user strong,.sidebar-user small { display: block; }
.sidebar-user small { color: #aebcb8; }
.sidebar-logout { color: #e5ecea; }
.sidebar-close,.mobile-bar,.sidebar-backdrop { display: none; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px clamp(22px,3.2vw,48px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.topbar-title { display: grid; gap: 2px; }
.topbar-title > span { color: var(--green-dark); font-size: 11px; font-weight: 900; }
.topbar h1 { margin: 0; font-size: clamp(22px,2.4vw,29px); }
.topbar-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.system-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #d7e7b7; border-radius: 999px; color: #425d0c; background: #f3f9e6; font-weight: 800; font-size: 12px; }
.system-status i { width: 7px; height: 7px; border-radius: 50%; background: #6d9018; box-shadow: 0 0 0 4px rgba(184,230,71,.3); }
.content { width: 100%; max-width: 1530px; margin: 0 auto; padding: 30px clamp(22px,3.2vw,48px) 64px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-head h2 { margin: 0 0 6px; font-size: clamp(22px,2.2vw,28px); }
.page-head p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.7; }
.page-head.compact { margin-bottom: 14px; }
.locale-switcher { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.locale-switcher button { min-width: 38px; min-height: 38px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; }
.locale-switcher button.active { color: var(--navy); background: var(--green); }

/* Member and operational details */
.member-hero { display: flex; align-items: center; gap: 15px; }
.avatar { width: 62px; height: 62px; display: grid; place-items: center; flex: 0 0 62px; border-radius: 18px; color: var(--navy); background: var(--green); font-size: 22px; font-weight: 900; }
.detail-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 22px; }
.detail-list div { padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
.detail-list span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.tabs-section,.care-section { margin-top: 22px; }
.stack,.assignment-list,.timeline,.notification-list,.care-plan-list { display: grid; gap: 12px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.inline-form .field { flex: 1 1 130px; }
.eligibility { padding: 14px; border-radius: 12px; font-weight: 800; }
.eligibility.allowed { color: #405b0b; background: var(--green-soft); }
.eligibility.denied { color: #8f2d28; background: #fff0ef; }
.pagination { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pagination-links,.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-field { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.choice-field legend { padding: 0 7px; font-weight: 800; }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.choice-grid .checkbox { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.permission-module { display: grid; gap: 9px; margin-top: 16px; }
.info-tag { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; color: #425d0c; background: var(--green-soft); font-weight: 800; }
.role-list { display: grid; gap: 12px; margin-top: 22px; }
.role-panel { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.role-panel > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; cursor: pointer; }
.role-form { padding: 0 16px 18px; margin-top: 16px; }
.compact-form { margin-top: 14px; }
.assignment-list,.timeline,.notification-list,.care-plan-list { margin-top: 16px; }
.payment-row { display: grid; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.payment-row:last-child { border-bottom: 0; }
.payment-resolution { align-items: end; margin-top: 2px; }
.assignment-item,.timeline > div,.notification-list > div { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fafbf8; }
.assignment-item > div:first-child,.appointment-item > div:first-child { min-width: 0; display: grid; gap: 3px; }
.assignment-item > .badge,.appointment-item > .badge { width: fit-content; }
.care-plan { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fafbf8; }
.care-plan > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.care-plan h4,.care-plan h5 { margin: 0; }
.care-plan header span,.assignment-item span,.assignment-item small,.timeline span,.timeline small,.notification-list small { color: var(--muted); }
.plan-actions,.record-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 12px; }
.record-actions details { min-width: min(100%,260px); flex: 1 1 220px; }
.record-actions .mini-form { min-width: 0; }
.care-day { margin-top: 14px; padding: 14px; border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); }
.exercise-grid,.meal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 12px 0; }
.exercise-item,.meal-item { min-width: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.mini-form { margin-top: 12px; padding: 14px; border: 1px dashed #bfc9c2; border-radius: 12px; background: #fff; }

/* Login */
.login-page { background: var(--navy); }
.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(360px,.9fr) minmax(440px,1.1fr); direction: ltr; }
.login-intro { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(42px,7vw,100px); direction: rtl; color: #fff; background: radial-gradient(circle at 18% 14%,rgba(184,230,71,.18),transparent 34%),linear-gradient(145deg,#263632,var(--navy) 74%); }
.login-logo .gymdar-logo { width: 220px; border-radius: 10px; background: var(--canvas); }
.login-intro h2 { margin: 0 0 18px; font-size: clamp(38px,5vw,68px); line-height: 1.18; }
.login-intro p { max-width: 590px; margin: 0; color: #cbd7d3; font-size: 17px; line-height: 1.9; }
.login-features { display: flex; flex-wrap: wrap; gap: 9px; }
.login-features span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #e3ebe8; background: rgba(255,255,255,.06); font-size: 12px; }
.login-card { width: min(480px,calc(100% - 40px)); align-self: center; justify-self: center; padding: 40px; direction: rtl; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-md); }
[dir="ltr"] .login-intro,[dir="ltr"] .login-card { direction: ltr; }
.login-card-logo { display: none; margin-bottom: 20px; }
.login-card h1 { margin: 0 0 7px; font-size: 31px; }
.login-card > p { margin: 0 0 28px; color: var(--muted); }
.login-card .field { margin-bottom: 17px; }
.login-help { display: block; margin-top: 18px; color: var(--muted); text-align: center; }
.guest-locale-switcher { position: fixed; inset-block-start: calc(16px + env(safe-area-inset-top)); inset-inline-end: 16px; z-index: 60; box-shadow: var(--shadow-sm); }
.error-shell { width: min(520px,calc(100% - 28px)); min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; margin: 0 auto; padding: 32px; color: #fff; text-align: center; }
.error-shell .gymdar-logo { width: 210px; margin-bottom: 16px; }
.error-shell .error-code { color: var(--green); font: 800 clamp(42px,10vw,76px)/1 Rubik,sans-serif; letter-spacing: 4px; }
.error-shell h1,.error-shell p { margin: 0; }
.error-shell h1 { color: #fff; }
.error-shell p { max-width: 440px; color: #cbd7d3; line-height: 1.8; }
.error-shell .btn { margin-top: 10px; }

/* Digital membership card */
.digital-card-section { overflow: hidden; }
.digital-card-layout { display: grid; grid-template-columns: minmax(420px,640px) minmax(260px,1fr); gap: 26px; align-items: center; }
.digital-member-card,.portal-membership-card { position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(22px,3vw,34px); border-radius: 27px; color: #fff; background: radial-gradient(circle at 82% 18%,rgba(184,230,71,.2),transparent 31%),linear-gradient(145deg,#2a3936,#111917 76%); box-shadow: 0 24px 60px rgba(17,25,23,.24); isolation: isolate; }
.digital-member-card { aspect-ratio: 1.586/1; width: 100%; max-width: 640px; }
.digital-member-card::before,.portal-membership-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(115deg,transparent 33%,rgba(255,255,255,.055) 33.2%,transparent 33.6%),repeating-radial-gradient(circle at 100% 0%,transparent 0 18px,rgba(255,255,255,.03) 19px 20px); }
.digital-card-glow { position: absolute; left: -100px; bottom: -125px; z-index: -1; width: 240px; height: 240px; border-radius: 50%; background: rgba(184,230,71,.15); }
.digital-member-card header,.digital-member-card footer,.digital-card-body,.portal-membership-card header,.portal-membership-card footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.digital-card-brand { display: flex; align-items: center; gap: 11px; }
.digital-card-brand .gymdar-logo-compact { border: 1px solid rgba(255,255,255,.16); }
.digital-card-brand > div { display: grid; }
.digital-card-brand small,.digital-card-member small,.digital-member-card footer small,.portal-membership-card footer small,.digital-card-qr small { color: #b9c7c3; font-size: 11px; }
.digital-card-status { padding: 7px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #e5ece9; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; }
.digital-card-status.active { color: var(--green); border-color: rgba(184,230,71,.4); background: rgba(184,230,71,.09); }
.digital-card-body { margin: 18px 0; }
.digital-card-member { min-width: 0; }
.digital-card-member h2,.digital-card-member h4 { max-width: 360px; overflow: hidden; margin: 4px 0 7px; color: #fff; font-size: clamp(22px,3vw,34px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.digital-card-member > span { color: #d1dbd7; font-weight: 700; letter-spacing: 2px; }
.digital-card-qr { flex: 0 0 116px; display: grid; justify-items: center; gap: 5px; padding: 8px 8px 6px; border-radius: 15px; background: #fff; }
.digital-card-qr img { width: 100px; height: 100px; display: block; }
.digital-card-qr small { color: #52605d; font-weight: 800; }
.digital-member-card footer,.portal-membership-card footer { padding-top: 17px; border-top: 1px solid rgba(255,255,255,.12); }
.digital-member-card footer > div,.portal-membership-card footer > div { display: grid; gap: 3px; }
.digital-member-card footer > div:last-child,.portal-membership-card footer > div:last-child { text-align: end; }
.digital-card-tools { display: grid; gap: 18px; }
.nfc-readiness { display: flex; align-items: flex-start; gap: 14px; }
.nfc-symbol { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; border-radius: 15px; color: var(--navy); background: var(--green); font-weight: 900; }
.nfc-link-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; }

/* Member portal */
.portal-body { color: var(--ink); background: var(--canvas); }
.portal-header { position: sticky; top: 0; z-index: 30; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: calc(10px + env(safe-area-inset-top)) max(18px,calc((100vw - 1180px)/2)) 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.portal-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.portal-brand:hover { text-decoration: none; }
.portal-brand small { color: var(--muted); font-weight: 700; }
.portal-main { width: min(1180px,calc(100% - 32px)); margin: 0 auto; padding: 28px 0 calc(70px + env(safe-area-inset-bottom)); }
.portal-login { width: min(460px,100%); margin: 7vh auto 0; padding: 32px; }
.portal-login h1 { margin: 0 0 8px; }
.portal-login > p { color: var(--muted); }
.portal-login form { display: grid; gap: 16px; margin: 26px 0 15px; }
.portal-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding: 28px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 10% 0%,rgba(184,230,71,.16),transparent 36%),var(--navy); box-shadow: var(--shadow-md); }
.portal-hero h1 { margin: 4px 0 8px; color: #fff; }
.portal-hero p { margin: 0; color: #cbd7d3; }
.portal-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr); gap: 20px; align-items: stretch; }
.portal-membership-card { min-height: 340px; padding: 26px; }
.portal-stats { display: grid; gap: 12px; }
.portal-stats > div { min-width: 0; display: grid; align-content: center; gap: 7px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.portal-stats span { color: var(--muted); font-size: 13px; }
.portal-stats strong { overflow-wrap: anywhere; font-size: 24px; }
.portal-jump { display: flex; gap: 10px; overflow-x: auto; margin: 22px 0; padding: 3px; scrollbar-width: none; }
.portal-jump a { min-height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); font-weight: 800; }
.portal-jump a:hover { text-decoration: none; }
.portal-section { scroll-margin-top: 94px; margin-top: 24px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-title h2,.section-title p { margin: 0; }
.section-title p { color: var(--muted); }
.portal-section-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 14px; color: var(--navy); background: var(--green); }
.portal-card-list,.portal-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.portal-detail-grid > div { min-width: 0; }
.portal-detail-grid h3 { margin: 0 0 10px; }
.portal-detail-grid article,.portal-card-list article { min-width: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafbf8; overflow-wrap: anywhere; }
.portal-detail-grid article { margin-bottom: 8px; }
.portal-detail-grid span,.portal-detail-grid small,.portal-card-list p,.portal-card-list small { color: var(--muted); }
.portal-card-list time { color: var(--green-dark); font-weight: 800; }
.portal-card-list h3 { margin: 8px 0 4px; }
.portal-plan { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.portal-plan + .portal-plan { margin-top: 14px; }
.portal-plan > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px; background: #f8faF4; }
.portal-plan > header h3,.portal-plan > header p { margin: 0; }
.portal-plan > header p,.portal-plan > header span { color: var(--muted); }
.portal-note { margin: 0; padding: 13px 18px; color: #425d0c; background: var(--green-soft); }
.portal-days details { border-top: 1px solid var(--line); }
.portal-days summary { min-height: 50px; display: flex; justify-content: space-between; gap: 12px; padding: 15px 18px; cursor: pointer; }
.portal-days summary span { color: var(--muted); }
.portal-exercises { display: grid; gap: 10px; padding: 0 18px 18px; }
.portal-exercises > div { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: #f8faf7; }
.exercise-number { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 10px; color: var(--navy); background: var(--green); font-weight: 900; }
.portal-meals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 18px; }
.portal-meals > div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }
.portal-meals header { display: flex; justify-content: space-between; gap: 10px; }
.portal-meals p { white-space: pre-line; overflow-wrap: anywhere; }
.portal-notifications article { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; }
.portal-notifications h3,.portal-notifications p { margin: 0 0 4px; }
.portal-security { margin-top: 24px; }
.portal-security > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 800; }
.portal-security > summary span { display: inline-flex; align-items: center; gap: 8px; }
.portal-security > summary small { color: var(--muted); font-weight: 600; }
.portal-security[open] > summary { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.portal-security .form-grid { margin-top: 16px; }

@media (max-width:1050px) {
    .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .grid-3,.portal-detail-grid,.portal-card-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .digital-card-layout { grid-template-columns: 1fr; }
    .portal-grid { grid-template-columns: 1fr; }
    .portal-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width:860px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(88vw,360px); height: 100dvh; padding-top: calc(18px + env(safe-area-inset-top)); transform: translateX(110%); transition: transform .22s ease; box-shadow: var(--shadow-md); }
    [dir="ltr"] .sidebar { transform: translateX(-110%); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-close { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #fff; background: rgba(255,255,255,.07); font-size: 24px; cursor: pointer; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; display: block; visibility: hidden; border: 0; opacity: 0; background: rgba(9,14,13,.55); transition: opacity .2s ease,visibility .2s; }
    body.menu-open { overflow: hidden; }
    body.menu-open .sidebar-backdrop { visibility: visible; opacity: 1; }
    .mobile-bar { position: sticky; top: 0; z-index: 25; min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: calc(9px + env(safe-area-inset-top)) 16px 9px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
    .mobile-bar .gymdar-logo { width: 145px; }
    .menu-toggle { width: 44px; height: 44px; border: 0; border-radius: 12px; color: var(--navy); background: var(--green); cursor: pointer; font-size: 20px; }
    .topbar { position: static; min-height: 0; padding: 17px 18px; }
    .system-status,.topbar-meta > .muted { display: none; }
    .content { padding: 20px 14px 48px; }
    .page-head { display: grid; align-items: start; }
    .form-grid,.grid-2,.grid-3,.detail-list { grid-template-columns: 1fr; }
    .field.full,.span-2,.form-actions { grid-column: auto; }
    .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width:680px) {
    .login-shell { min-height: 100dvh; display: grid; grid-template-columns: 1fr; padding: calc(78px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 15% 5%,rgba(184,230,71,.15),transparent 35%),var(--navy); }
    .login-intro { display: none; }
    .login-card { width: 100%; max-width: 460px; padding: 26px 20px; }
    .login-card-logo { display: inline-block; width: 180px; }
    .guest-locale-switcher { inset-block-start: calc(14px + env(safe-area-inset-top)); }
    .portal-header { min-height: 66px; padding-inline: 12px; }
    .portal-header .gymdar-logo { width: 126px; }
    .portal-brand small { display: none; }
    .portal-logout span { display: none; }
    .portal-main { width: min(100% - 24px,1180px); padding-top: 18px; padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
    .portal-login { margin-top: 3vh; padding: 24px 20px; }
    .portal-hero { align-items: flex-start; padding: 20px; }
    .portal-hero h1 { font-size: 24px; }
    .portal-hero .badge { flex: 0 0 auto; }
    .portal-membership-card { min-height: 330px; padding: 20px; border-radius: 22px; }
    .portal-stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .portal-stats > div { min-height: 96px; padding: 12px 8px; border-radius: 14px; text-align: center; }
    .portal-stats strong { font-size: clamp(15px,5vw,21px); }
    .portal-jump { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; margin: 0; padding: 7px max(6px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right)); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -10px 32px rgba(26,36,34,.1); backdrop-filter: blur(14px); }
    .portal-jump a { min-width: 0; min-height: 54px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 4px 2px; border: 0; border-radius: 10px; box-shadow: none; font-size: 10px; }
    [dir="ltr"] .portal-jump a { font-size: 11px; letter-spacing: -.1px; }
    .portal-jump a:active { background: var(--green-soft); }
    .portal-section { scroll-margin-top: 84px; padding: 17px 14px; border-radius: 17px; }
    .section-title { align-items: flex-start; }
    .section-title h2 { font-size: 19px; }
    .section-title p { font-size: 12px; }
    .portal-detail-grid,.portal-card-list,.portal-meals { grid-template-columns: 1fr; }
    .portal-meals { padding: 14px; }
    .digital-card-body { gap: 10px; }
    .digital-card-qr { flex-basis: 102px; }
    .digital-card-qr img { width: 86px; height: 86px; }
    .digital-card-member h2,.digital-card-member h4 { font-size: 21px; white-space: normal; }
    .digital-member-card { min-height: 320px; aspect-ratio: auto; }
    .digital-card-layout { display: block; }
    .digital-card-tools { margin-top: 22px; }
    .nfc-link-form { grid-template-columns: 1fr; }
    .exercise-grid,.meal-grid { grid-template-columns: 1fr; }
    .responsive-table { min-width: 0; }
    .responsive-table thead { display: none; }
    .responsive-table tbody,.responsive-table tr,.responsive-table td { display: block; width: 100%; }
    .responsive-table tr { padding: 8px 0; border-bottom: 8px solid var(--canvas); }
    .responsive-table td { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; border: 0; }
    .responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 800; }
    .choice-grid { grid-template-columns: 1fr; }
}

@media (max-width:380px) {
    .cards { grid-template-columns: 1fr; }
    .portal-hero { display: grid; }
    .portal-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .portal-stats > div:last-child { grid-column: 1 / -1; }
    .portal-stats > div { min-height: 72px; text-align: start; }
    .portal-membership-card header,.portal-membership-card footer { align-items: flex-start; }
    .portal-membership-card .digital-card-body { align-items: flex-end; }
    .locale-switcher button { min-width: 34px; }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
    body.print-member-card * { visibility: hidden !important; }
    body.print-member-card #digital-member-card,body.print-member-card #digital-member-card * { visibility: visible !important; }
    body.print-member-card #digital-member-card { position: fixed; inset: 20mm auto auto 20mm; width: 150mm; color-adjust: exact; print-color-adjust: exact; }
    .no-print { display: none !important; }
}

/* Membership registration, member filters and operational reports */
.members-list-card { padding: 12px; }
.members-list-wrap { position: relative; }
.members-list { min-width: 850px; font-size: 13px; }
.members-list th { padding: 13px 16px; background: #f3f6ef; }
.members-list td { padding: 19px 16px; }
.members-list tbody tr:hover { background: #fafcf6; }
.members-list .members-person { width: 30%; min-width: 220px; }
.members-list .members-subscription { width: 23%; min-width: 190px; }
.members-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.members-name,.members-plan { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.members-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.members-number { padding: 3px 7px; border: 1px solid #e1e6df; border-radius: 6px; color: #47554f; background: #f5f7f3; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.members-phone,.members-secondary { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.members-list .badge { padding: 3px 8px; font-size: 11px; }
.members-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.members-list .members-attendance { text-align: center; }
.members-attendance .members-cell-stack { align-items: center; }
.members-list .members-balance { text-align: end; }
.members-amount { color: var(--muted); font-weight: 700; }
.members-amount-due { color: var(--red); }
.members-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.members-actions .btn { min-height: 42px; white-space: nowrap; }
.members-list-card > .pagination { padding: 0 6px 6px; }
@media (max-width:680px) {
    .members-list-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
    .members-list-wrap { overflow: visible; border: 0; border-radius: 0; }
    .members-list { min-width: 0; background: transparent; }
    .members-list tbody { display: grid; gap: 14px; }
    .members-list tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 3px 10px rgba(26,36,34,.04); }
    .members-list tbody tr:hover { background: #fff; }
    .members-list td { min-width: 0; width: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 12px 16px; text-align: start; }
    .members-list td::before { font-size: 11px; }
    .members-list .members-person { grid-column: 1/-1; min-width: 0; width: auto; padding: 17px 16px; border-bottom: 1px solid var(--line); background: #fafcf6; }
    .members-list .members-person::before,.members-list .members-actions-cell::before { display: none; }
    .members-list .members-subscription { grid-column: 1/-1; min-width: 0; width: auto; }
    .members-name { font-size: 15px; }
    .members-list .members-date { white-space: normal; }
    .members-attendance .members-cell-stack { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px; }
    .members-list .members-attendance,.members-list .members-balance { text-align: start; }
    .members-list .members-actions-cell { grid-column: 1/-1; padding-top: 14px; border-top: 1px solid var(--line); }
    .members-actions { width: 100%; }
    .members-actions > a,.members-actions > form { flex: 1 1 0; }
    .members-actions .btn { width: 100%; min-height: 44px; }
}
.filter-shortcuts,.quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 18px; }
.quick-actions { margin-top: 18px; }
.advanced-filters { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.advanced-filters > summary,.filter-help > summary,section.card > details > summary,details.card > summary { min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); font-weight: 800; }
.advanced-filters > summary::before,.filter-help > summary::before,section.card > details:not(.action-details) > summary::before,details.card > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; color: var(--green-dark); background: var(--green-soft); }
.advanced-filters[open] > summary::before,.filter-help[open] > summary::before,section.card > details[open]:not(.action-details) > summary::before,details.card[open] > summary::before { content: "−"; }
.advanced-filters[open] > summary { margin-bottom: 16px; }
.filter-help { margin-top: 14px; }
.filter-help > summary { color: var(--muted); font-size: 12px; font-weight: 600; }
.filter-help .hint { margin-top: 0; }
#sale-form > .card + .card { margin-top: 18px; }
#sale-form > .form-actions { margin: 18px 0; }
.sale-service-assignment { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--green-soft); }
.sale-service-assignment select { background: #fff; }
.digital-card-number { margin-top: 6px; }
.digital-card-number b { display: inline-block; margin-inline-start: 4px; font-weight: 700; letter-spacing: .6px; }
.digital-card-section > .digital-member-card { margin-inline: auto; }
.choice-field .table-wrap { margin-top: 12px; }
[data-commission-for] { max-width: 140px; min-width: 96px; }
.table-wrap .action-details .role-panel { min-width: 210px; margin-top: 10px; padding: 12px; }
.table-wrap .action-details .role-panel p { margin: 6px 0; }
section[id$="-report"],#collection-ledger { scroll-margin-top: 90px; }
.badge.open { color: var(--green-dark); background: var(--green-soft); }
.badge.closed { color: var(--red); background: #fff1ef; }
@media (max-width: 700px) {
    .filter-shortcuts { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 7px; scrollbar-width: thin; }
    .filter-shortcuts > a { flex: 0 0 auto; min-height: 44px; }
    .advanced-filters > summary { font-size: 13px; line-height: 1.65; }
    #sale-form > .form-actions > .btn { flex: 1 1 100%; min-height: 48px; }
    .digital-card-section .page-head { align-items: stretch; }
    .digital-card-section .actions > .btn { min-height: 44px; }
    .digital-card-member > span { font-size: 12px; letter-spacing: 1px; }
    .digital-card-number small { font-size: 10px; }
    .digital-card-number b { letter-spacing: 0; }
    .table-wrap .action-details .role-panel { min-width: 0; }
    .quick-actions { gap: 6px; }
    .quick-actions > a { font-size: 12px; min-height: 44px; }
}