:root {
    --primary:#1487ad; --primary-dark:#0b5b78; --primary-light:#e3f2f7;
    --accent:#d99a3d; --danger:#c94f4f;
    --ink:#16211d; --muted:#67757c; --surface:#fff; --bg:#f4f7f8; --line:#e3eaec;
    --radius-sm:10px; --radius:16px; --radius-lg:22px;
    --shadow-sm:0 2px 10px rgba(15,45,60,.05);
    --shadow-md:0 10px 28px rgba(15,45,60,.08);
    --shadow-lg:0 20px 55px rgba(15,45,60,.14);
}
html { font-size:15px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Cairo",Tahoma,Arial,sans-serif; }
a { color:var(--primary); text-decoration:none; transition:color .15s ease; }
a:hover { color:var(--primary-dark); }
h1,h2,h3,h4,h5,h6 { font-family:inherit; }
::selection { background:var(--primary); color:#fff; }

/* Header / navbar */
.app-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
.navbar { min-height:68px; }
.navbar-brand { display:flex; align-items:center; gap:11px; font-weight:800; font-size:17px; color:var(--ink); }
.brand-mini,.brand-mark { display:inline-grid; place-items:center; background:linear-gradient(150deg,var(--primary),var(--primary-dark)); color:#fff; border-radius:13px; font-weight:800; box-shadow:0 6px 16px rgba(11,91,120,.28); }
.brand-mini { width:38px; height:38px; font-size:16px; }
.brand-mark { width:58px; height:58px; margin:auto; font-size:26px; border-radius:18px; }
.nav-link { position:relative; display:inline-flex; align-items:center; gap:7px; color:#4d5b61; font-weight:600; margin:0 4px; padding:8px 12px!important; border-radius:9px; transition:.15s ease; }
.nav-link:hover { color:var(--primary-dark); background:var(--primary-light); }
.nav-link.active,.nav-link[aria-current="page"] { color:var(--primary-dark); background:var(--primary-light); }
.nav-ico { font-size:15px; line-height:1; }
.navbar .dropdown-toggle::after { margin-inline-start:4px; font-size:11px; opacity:.7; }
.navbar .dropdown-menu { border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:8px; min-width:200px; }
.navbar .dropdown-item { display:flex; align-items:center; gap:9px; border-radius:8px; padding:9px 12px; font-weight:600; color:#4d5b61; font-size:14px; transition:.15s ease; }
.navbar .dropdown-item:hover { background:var(--primary-light); color:var(--primary-dark); }
.navbar .dropdown-item.active { background:var(--primary-light); color:var(--primary-dark); }
.navbar .dropdown-divider { border-color:var(--line); margin:6px 4px; }
.app-main { min-height:calc(100vh - 130px); padding-top:34px; padding-bottom:56px; }
.app-footer { background:#fff; border-top:1px solid var(--line); padding:20px 0; color:var(--muted); font-size:13px; }

/* Alerts */
.alert { border:0; border-radius:var(--radius-sm); padding:14px 18px; font-weight:600; box-shadow:var(--shadow-sm); }
.alert-success { background:#e5f5ec; color:#1c6b45; }
.alert-danger { background:#fbeaea; color:#9b3939; }

/* Page heading */
.page-heading,.section-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.page-heading h1 { font-size:26px; font-weight:800; margin:0 0 6px; letter-spacing:-.2px; }
.page-heading p { color:var(--muted); margin:0; font-size:14px; }
.section-title { font-size:18px; font-weight:800; margin:0 0 16px; }
.section-header .section-title { margin:0; }

/* Buttons */
.btn { border-radius:var(--radius-sm); font-weight:700; padding:.55rem 1.15rem; font-size:14px; transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease; }
.btn-sm { padding:.4rem .85rem; font-size:13px; border-radius:9px; }
.btn-primary { background:linear-gradient(150deg,var(--primary),var(--primary-dark)); border-color:var(--primary-dark); box-shadow:0 8px 18px rgba(11,91,120,.24); }
.btn-primary:hover { transform:translateY(-1px); background:linear-gradient(150deg,var(--primary-dark),var(--primary-dark)); border-color:var(--primary-dark); box-shadow:0 10px 22px rgba(11,91,120,.32); }
.btn-outline-secondary,.btn-outline-primary,.btn-outline-dark,.btn-outline-danger { background:#fff; }
.btn-outline-secondary:hover,.btn-outline-primary:hover,.btn-outline-dark:hover,.btn-outline-danger:hover { transform:translateY(-1px); }
.btn:focus-visible { outline:3px solid rgba(20,135,173,.25); outline-offset:1px; }

/* Grids / cards */
.stats-grid,.details-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:36px; }
.stat-card,.info-card,.form-card,.table-card,.receipt { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.stat-card { position:relative; overflow:hidden; padding:22px; border:1px solid var(--line); border-top:none; display:flex; flex-direction:column; gap:8px; transition:transform .18s ease,box-shadow .18s ease; }
.stat-card::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:#a1b2b8; }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-card.accent::before { background:linear-gradient(90deg,#2f8a70,#57b391); }
.stat-card.warning::before { background:linear-gradient(90deg,var(--accent),#eec27a); }
.stat-card.dark::before { background:linear-gradient(90deg,#1c3644,#3d5c6c); }
.stat-card span,.info-card span { color:var(--muted); font-size:12.5px; font-weight:600; }
.stat-card strong { font-size:29px; font-weight:800; }
.stat-card small { color:var(--muted); }
.details-grid { grid-template-columns:repeat(4,1fr); }
.info-card { padding:20px; display:flex; flex-direction:column; gap:8px; }
.info-card strong { font-size:16px; }

/* Tables */
.table-card { overflow:hidden; }
.table { margin:0; }
.table th { background:#eef4f6; color:#57676d; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; border:0; padding:14px 18px; }
.table td { padding:15px 18px; border-color:var(--line); vertical-align:middle; }
.table tbody tr { transition:background-color .12s ease; }
.table tbody tr:hover { background:#fafcfb; }
.empty-state { position:relative; text-align:center; color:var(--muted); padding:48px 20px 40px!important; }
.empty-state::before { content:"—"; display:block; margin:0 auto 10px; width:44px; height:44px; line-height:44px; border-radius:50%; background:var(--primary-light); color:var(--primary); font-weight:800; font-size:18px; }

/* Search / forms */
.search-bar { display:flex; gap:10px; max-width:650px; margin-bottom:20px; }
.form-card { padding:28px; max-width:900px; }
.form-actions { margin-top:28px; display:flex; gap:10px; }
.form-control,.form-select { padding:10px 13px; border-color:#d5ded9; border-radius:10px; transition:border-color .15s ease,box-shadow .15s ease; }
.form-control:focus,.form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(20,135,173,.14); }
.form-label { font-weight:700; font-size:13.5px; color:#33434a; margin-bottom:6px; }
.form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.form-switch .form-check-input:focus { border-color:var(--primary); }

.gender-options { display:flex; gap:12px; }
.gender-option { flex:1; cursor:pointer; }
.gender-option input { position:absolute; opacity:0; }
.gender-option span { display:block; padding:10px 16px; border:1px solid #d5ded9; border-radius:var(--radius-sm); text-align:center; font-weight:600; background:#fff; transition:.15s ease; }
.gender-option input:checked + span { color:#fff; background:var(--primary); border-color:var(--primary); box-shadow:0 6px 14px rgba(11,91,120,.22); }
.gender-option input:focus-visible + span { outline:3px solid rgba(20,135,173,.2); }
.activity-options { display:flex; flex-wrap:wrap; gap:10px; }
.activity-option { cursor:pointer; }
.activity-option input { position:absolute; opacity:0; }
.activity-option span { display:block; padding:9px 16px; border:1px solid #d5ded9; border-radius:20px; font-weight:600; background:#fff; transition:.15s ease; }
.activity-option input:checked + span { color:#fff; background:var(--primary); border-color:var(--primary); box-shadow:0 6px 14px rgba(11,91,120,.22); }
.activity-option input:focus-visible + span { outline:3px solid rgba(20,135,173,.2); }

.group-schedule-table th { padding:8px 12px; font-size:12px; }
.group-schedule-table td { padding:7px 12px; }
.group-schedule-table .form-check { display:flex; align-items:center; gap:8px; font-weight:600; }
.group-schedule-table .form-check-input { width:16px; height:16px; margin:0; }
.group-schedule-table .form-control { width:150px; max-width:100%; padding:6px 9px; font-size:13px; }

/* Modals */
.modal-content { border:0; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.modal-header,.modal-footer { border-color:var(--line); padding:18px 22px; }
.modal-header { background:#fbfdfc; border-radius:var(--radius) var(--radius) 0 0; }
.modal-title { font-weight:800; }
.modal-body { padding:24px 22px; }
.subscription-member-banner { margin-bottom:20px; padding:12px 16px; border-radius:11px; background:var(--primary-light); color:var(--primary-dark); font-weight:600; }
.subscription-modal-dialog { max-width:960px; }
.subscription-compact-form .modal-header,
.subscription-compact-form .modal-footer { padding:12px 18px; }
.subscription-compact-form .modal-body { max-height:calc(100vh - 170px); overflow-y:auto; padding:14px 18px; }
.subscription-compact-form .subscription-member-banner { margin-bottom:10px; padding:9px 12px; font-size:13px; }
.subscription-compact-form .form-label { margin-bottom:4px; font-size:13px; }
.subscription-compact-form .form-control,
.subscription-compact-form .form-select { min-height:38px; padding:7px 10px; font-size:14px; }
.subscription-compact-form textarea.form-control { min-height:62px; }
.subscription-compact-form [data-valmsg-for],
.subscription-compact-form #subscriptionValidationSummary { font-size:12px; }

/* Today groups */
.today-groups-filters { max-width:none; margin-bottom:20px; padding:18px; }
.today-groups-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.today-group-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:box-shadow .18s ease,transform .18s ease; }
.today-group-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.today-group-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px; background:var(--primary-light); }
.today-group-header h2 { margin:0 0 4px; font-size:18px; font-weight:800; }
.today-group-header div > span { color:var(--primary-dark); font-size:12px; font-weight:700; }
.today-group-details { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:15px 18px; }
.today-group-details div { display:flex; flex-direction:column; gap:4px; }
.today-group-details span { color:var(--muted); font-size:11px; }
.today-group-details strong { font-size:13px; }
.today-group-schedules { display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }
.today-group-schedules span { display:flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid var(--line); border-radius:20px; background:#fbfcfc; font-size:11px; }
.today-group-schedules strong { color:var(--primary-dark); }
.today-group-schedules em { color:var(--muted); font-style:normal; }
.today-group-members { border-top:1px solid var(--line); padding:12px 18px; }
.today-group-members summary { color:var(--primary); cursor:pointer; font-weight:700; font-size:12px; }
.today-group-members p { padding-top:10px; font-size:12px; }
.today-group-members a { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:12px; }
.today-group-members a:last-child { border-bottom:0; }
.today-group-members a span { color:var(--muted); }
.today-groups-empty { grid-column:1/-1; max-width:none; }

.attendance-count { margin-bottom:5px; font-size:12px; color:var(--muted); }
.attendance-count strong { color:var(--ink); }
.attendance-progress { width:100px; height:6px; border-radius:6px; background:#e5ebe8; }
.attendance-progress .progress-bar { border-radius:6px; }
.attendance-employee { display:block; margin-top:3px; color:var(--muted); font-size:10px; }

/* Badges */
.badge { font-weight:700; padding:.42em .75em; border-radius:20px; }

/* Login / signup */
.login-page { position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; background:linear-gradient(160deg,#eaf4f7,#f7fafb); }
.login-page::before,.login-page::after { content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; z-index:0; }
.login-page::before { width:420px; height:420px; background:var(--primary); top:-140px; right:-120px; }
.login-page::after { width:360px; height:360px; background:var(--accent); bottom:-140px; left:-100px; }
.login-card,.signup-card { position:relative; z-index:1; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.login-card { width:min(420px,calc(100% - 30px)); padding:40px; }
.login-card h1 { font-size:23px; font-weight:800; text-align:center; margin:20px 0 8px; }
.login-card p { text-align:center; margin-bottom:28px; color:var(--muted); }
.signup-card { width:min(720px,calc(100% - 30px)); padding:40px; margin:30px 0; }
.signup-card h1 { font-size:23px; font-weight:800; text-align:center; margin:20px 0 8px; }
.signup-card p.text-muted { text-align:center; margin-bottom:28px; }

.plan-card { border:1px solid #d8e2de; border-radius:var(--radius); padding:22px; height:100%; display:flex; flex-direction:column; background:#fff; transition:box-shadow .18s ease,transform .18s ease; }
.plan-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.plan-card h3 { font-size:19px; font-weight:800; margin-bottom:4px; }
.plan-card .plan-price { font-size:27px; font-weight:800; color:var(--primary-dark); margin:10px 0; }
.plan-card ul { list-style:none; padding:0; margin:0 0 18px; flex:1; }
.plan-card li { padding:6px 0; border-bottom:1px dashed var(--line); font-size:13px; color:var(--muted); }
.bank-details { background:var(--primary-light); border-radius:var(--radius-sm); padding:18px 20px; margin-bottom:24px; }
.bank-details dt { color:var(--muted); font-size:12px; }
.bank-details dd { font-weight:700; margin-bottom:12px; }

/* Receipt / invoice card */
.receipt-card { width:min(100%,420px); margin:15px auto 0; overflow:hidden; background:#fff; border:1px solid #d8e2de; border-top:7px solid var(--primary); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.receipt-card-header { display:flex; align-items:center; gap:12px; padding:20px 20px 14px; }
.receipt-logo { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:12px; background:linear-gradient(150deg,var(--primary),var(--primary-dark)); color:#fff; font-size:20px; font-weight:800; }
.receipt-card-header h1 { margin:0 0 3px; font-size:19px; font-weight:800; }
.receipt-card-header p { margin:0; color:var(--muted); font-size:11px; }
.receipt-code { margin-right:auto; text-align:left; }
.receipt-code span { display:block; color:var(--muted); font-size:10px; }
.receipt-code strong { font-size:15px; color:var(--primary-dark); }
.receipt-date { margin:0 20px; padding:8px 12px; border-radius:8px; background:var(--primary-light); color:var(--primary-dark); text-align:center; font-size:11px; font-weight:600; }
.receipt-card-body { padding:12px 20px 4px; }
.receipt-card-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:8px 0; border-bottom:1px dashed #dfe7e4; font-size:12px; }
.receipt-card-row span { color:var(--muted); }
.receipt-card-row strong { text-align:left; }
.receipt-period strong { font-size:11px; }
.receipt-card-total { display:flex; align-items:center; justify-content:space-between; margin:14px 20px; padding:13px 15px; border-radius:12px; background:linear-gradient(150deg,var(--primary),var(--primary-dark)); color:#fff; }
.receipt-card-total span { font-size:12px; }
.receipt-card-total strong { font-size:20px; }
.receipt-card-total small { font-size:10px; font-weight:400; }
.receipt-card-footer { padding:4px 20px 16px; }
.receipt-signature { display:flex; align-items:end; gap:10px; color:var(--muted); font-size:10px; }
.receipt-card-footer i { flex:1; height:16px; border-bottom:1px solid #a3b4ba; }
.receipt-card-footer p { margin:10px 0 0; color:var(--primary); text-align:center; font-size:11px; font-weight:700; }
.receipt-qr { display:flex; flex-direction:column; align-items:center; gap:3px; width:max-content; margin:12px auto 0; color:var(--muted); font-size:9px; }
.receipt-qr img { width:70px; height:70px; image-rendering:pixelated; }
.receipt-terms { padding:10px 20px 0; }
.receipt-terms h2 { margin:0 0 6px; color:var(--primary); font-size:11px; font-weight:700; }
.receipt-terms ul { margin:0; padding-inline-start:16px; color:var(--muted); font-size:10px; line-height:1.6; }
.receipt-terms li { margin-bottom:2px; }
.print-actions { display:flex; justify-content:center; gap:10px; margin-top:20px; }

@media(max-width:900px){.stats-grid,.details-grid{grid-template-columns:repeat(2,1fr)}.table-card{overflow-x:auto}.today-groups-grid{grid-template-columns:1fr}}
@media(max-width:600px){.stats-grid,.details-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-direction:column}.search-bar{flex-wrap:wrap}}

@page { size:auto; margin:8mm; }
@media print {
    .app-header,.app-footer,.print-actions { display:none!important; }
    html,body { width:100%; min-height:0; background:#fff; }
    .app-main { min-height:0; padding:0; margin:0; max-width:none; }
    .receipt-card { width:88mm; margin:0 auto; border:1px solid #777; border-top:5px solid #1487ad; border-radius:10px; box-shadow:none; break-inside:avoid; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}