/* ============================================================
   Residents' services — pages/services.php
   Built on the theme tokens of style.css (dark indigo / light).
   ============================================================ */
.svc-section { padding-top: 60px; }
/* Components below set display:flex/block, which would otherwise override the hidden attribute. */
#svcApp [hidden] { display: none !important; }
.svc-card { scroll-margin-top: calc(var(--nav-h) + 24px); }
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }

/* ── Tabs ─ */
.svc-tabs { display: inline-flex; gap: 6px; padding: 5px; margin-bottom: 18px; border-radius: var(--radius-pill); background: var(--navy-card); border: 1px solid var(--gold-border); box-shadow: var(--shadow-card); }
.svc-tabs button { border: 0; background: none; cursor: pointer; padding: 10px 20px; border-radius: var(--radius-pill); font-family: var(--font-ar); font-weight: 800; font-size: 0.9rem; color: var(--text-light); display: inline-flex; gap: 8px; align-items: center; transition: all var(--transition); }
.svc-tabs button.is-active { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--on-gold); box-shadow: var(--shadow-gold); }

/* ── Card & steps ─ */
.svc-card { background: var(--navy-card); border: 1px solid var(--gold-border); border-radius: var(--radius-xl); padding: 30px; box-shadow: var(--shadow-deep); }
.svc-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 26px; padding: 0; counter-reset: s; }
.svc-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.svc-steps li::before { content: ''; position: absolute; top: 17px; right: calc(50% + 22px); left: calc(-50% + 22px); height: 2px; background: var(--hairline); }
.svc-steps li:first-child::before { display: none; }
.svc-steps span { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; background: var(--navy-light); border: 2px solid var(--hairline); color: var(--text-muted); position: relative; z-index: 1; transition: all var(--transition); }
.svc-steps li.is-active { color: var(--white); }
.svc-steps li.is-active span { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 5px var(--gold-soft); }
.svc-steps li.is-done span { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.svc-steps li.is-done::before, .svc-steps li.is-active::before { background: var(--gold); }

.svc-step-head { margin-bottom: 22px; }
.svc-step-head h2 { font-size: 1.3rem; font-weight: 900; color: var(--white); margin-bottom: 6px; }
.svc-step-head p { color: var(--text-light); font-size: 0.9rem; line-height: 1.8; }
.svc-step[hidden] { display: none; }
.svc-step:not([hidden]) { animation: svcIn 0.4s ease both; }
@keyframes svcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ltr-input { text-align: right; }
.ltr-input:placeholder-shown { text-align: right; }
.key-input { font-family: 'Consolas', 'Courier New', monospace; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.form-group small.opt { font-weight: 500; color: var(--text-muted); }
.form-group select.is-urgent { border-color: #E0566A; box-shadow: 0 0 0 3px rgba(224,86,106,0.12); }

/* ── Alerts & verified bar ─ */
.svc-alert { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.88rem; line-height: 1.8; border: 1px solid; animation: svcIn 0.3s ease both; }
.svc-alert i { margin-top: 5px; }
.svc-alert-error { background: rgba(224,86,106,0.10); border-color: rgba(224,86,106,0.4); color: #E0566A; }
.svc-alert-info { background: var(--gold-soft); border-color: var(--gold-border); color: var(--gold); }
.svc-verified { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; margin-bottom: 22px; border-radius: var(--radius); background: rgba(39,201,63,0.08); border: 1px solid rgba(39,201,63,0.35); color: var(--text-light); font-size: 0.86rem; }
.svc-verified > i { color: #2BB84A; }
.svc-verified b { color: var(--white); }
.svc-link { margin-inline-start: auto; border: 0; background: none; cursor: pointer; color: var(--gold); font-family: var(--font-ar); font-weight: 800; font-size: 0.84rem; display: inline-flex; gap: 6px; align-items: center; padding: 4px 0; }
.svc-link:hover { text-decoration: underline; }

/* ── Catalogue (step 2) ─ */
.svc-catalog { display: grid; gap: 22px; }
.svc-cat h3 { font-size: 0.98rem; font-weight: 900; color: var(--white); margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.svc-cat h3 i { color: var(--gold); }
.svc-cat h3 small { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.svc-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.svc-type { display: flex; align-items: center; gap: 14px; width: 100%; text-align:start; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--navy); cursor: pointer; font-family: var(--font-ar); color: var(--white); transition: all var(--transition); }
.svc-type:hover, .svc-type:focus-visible { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-gold); outline: none; }
.svc-type-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-border); }
.svc-type-text { flex: 1; min-width: 0; }
.svc-type-text strong { display: block; font-size: 0.95rem; font-weight: 800; }
.svc-type-text small { display: block; font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; margin-top: 2px; }
.svc-type-go { color: var(--text-muted); transition: transform var(--transition); }
.svc-type:hover .svc-type-go { transform: translateX(-4px); color: var(--gold); }

/* ── Details (step 3) ─ */
.svc-type-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); }
.svc-type-head > div { flex: 1; min-width: 180px; }
.svc-type-head h2 { margin-bottom: 2px; }
.svc-type-head p { font-size: 0.82rem; }
.svc-safety { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 20px; border-radius: var(--radius); background: rgba(224,86,106,0.08); border: 1px solid rgba(224,86,106,0.35); }
.svc-safety i { color: #E0566A; margin-top: 4px; }
.svc-safety p { font-size: 0.86rem; line-height: 1.85; color: var(--text-light); }
.svc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.svc-fields .span-2, .svc-fields .svc-items { grid-column: 1 / -1; }
.svc-fields input[type=date], .svc-fields input[type=datetime-local] { color-scheme: inherit; }

.svc-file { position: relative; display: block; cursor: pointer; border: 2px dashed var(--gold-border); border-radius: var(--radius-lg); background: var(--gold-soft); transition: border-color var(--transition); overflow: hidden; }
.svc-file:hover { border-color: var(--gold); }
.svc-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.svc-file-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; color: var(--gold); font-weight: 700; font-size: 0.9rem; }
.svc-file-empty small { color: var(--text-muted); font-weight: 500; font-size: 0.74rem; }
.svc-file-preview { display: block; position: relative; }
.svc-file-preview img { width: 100%; max-height: 240px; object-fit: contain; background: var(--navy); }
.svc-file-clear { position: absolute; top: 10px; left: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(9,7,43,0.75); color: #fff; cursor: pointer; }

.svc-items-rows { display: grid; gap: 8px; margin-bottom: 8px; }
.svc-item-row { display: grid; grid-template-columns: 1.6fr 1fr auto 40px; gap: 8px; align-items: center; }
.svc-item-row select, .svc-item-row input { width: 100%; padding: 11px 12px; border-radius: var(--radius); border: 1px solid var(--gold-border); background: transparent; color: var(--white); font-family: var(--font-ar); font-size: 0.9rem; }
.svc-item-row select option { background: var(--navy-mid); }
.svc-unit { font-size: 0.78rem; color: var(--text-muted); min-width: 64px; }
.svc-item-remove { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--hairline); background: none; color: var(--text-muted); cursor: pointer; }
.svc-item-remove:hover { color: #E0566A; border-color: rgba(224,86,106,0.5); }
.svc-items .svc-add-item { margin: 0; }

.form-submit.is-busy { cursor: wait; }
.form-submit.is-busy i { animation: svcSpin 0.9s linear infinite; }
.form-submit.is-busy i::before { content: '\f110'; }
@keyframes svcSpin { to { transform: rotate(360deg); } }

/* ── Confirmation (step 4) ─ */
.svc-done { text-align: center; }
.svc-done-icon { width: 78px; height: 78px; margin: 4px auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 0 0 10px rgba(34,197,94,0.15); animation: svcPop 0.55s var(--spring) both; }
@keyframes svcPop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.svc-done h2 { font-size: 1.4rem; font-weight: 900; color: var(--white); }
.svc-done .muted { color: var(--text-muted); font-size: 0.88rem; margin-top: 4px; }
.svc-ticket { display: inline-flex; align-items: center; gap: 12px; margin: 18px auto 22px; padding: 12px 14px 12px 22px; border-radius: var(--radius-lg); border: 2px dashed var(--gold); background: var(--gold-soft); }
.svc-ticket span { font-family: 'Consolas', 'Courier New', monospace; font-size: 1.45rem; font-weight: 800; letter-spacing: 0.08em; color: var(--gold); }
.svc-copy { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--gold-border); background: var(--navy-card); color: var(--gold); cursor: pointer; }
.svc-summary { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; text-align:start; max-width: 560px; margin: 0 auto 24px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--navy); border: 1px solid var(--hairline); font-size: 0.88rem; }
.svc-summary dt { color: var(--text-muted); white-space: nowrap; }
.svc-summary dd { color: var(--white); font-weight: 600; word-break: break-word; }
.svc-urgent { display: inline-block; padding: 2px 10px; margin-inline-start: 6px; border-radius: var(--radius-pill); background: rgba(224,86,106,0.15); color: #E0566A; font-size: 0.74rem; font-weight: 800; }
.svc-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.svc-done-actions .btn-primary, .svc-done-actions .btn-outline { padding: 12px 20px; font-size: 0.88rem; }

/* ── Tracking ─ */
.svc-track-result { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--hairline); animation: svcIn 0.4s ease both; }
.svc-track-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; }
.svc-track-head > div { flex: 1; min-width: 200px; }
.svc-track-head small { color: var(--text-muted); font-size: 0.76rem; font-weight: 700; }
.svc-track-head h3 { color: var(--white); font-size: 1.1rem; font-weight: 900; }
.svc-track-head p { color: var(--text-light); font-size: 0.84rem; }
.svc-timeline { list-style: none; margin: 0 0 22px; padding: 0 6px 0 0; display: grid; gap: 0; }
.svc-timeline li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.svc-timeline li::before { content: ''; position: absolute; top: 14px; bottom: -4px; right: 6px; width: 2px; background: var(--hairline); }
.svc-timeline li:last-child::before { display: none; }
.svc-timeline .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 5px; box-shadow: 0 0 0 4px var(--gold-soft); position: relative; z-index: 1; }
.svc-timeline strong { color: var(--white); font-size: 0.92rem; display: block; }
.svc-timeline p { color: var(--text-light); font-size: 0.86rem; line-height: 1.8; }
.svc-timeline time { color: var(--text-muted); font-size: 0.74rem; }
.svc-track-result .svc-summary { margin: 0; max-width: none; }

/* ── Aside ─ */
.svc-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--nav-h) + 20px); }
.svc-info { background: var(--navy-card); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow-card); }
.svc-info h3 { font-size: 0.98rem; font-weight: 900; color: var(--white); margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.svc-info h3 i { color: var(--gold); }
.svc-info p { font-size: 0.84rem; color: var(--text-light); line-height: 1.85; margin-bottom: 8px; }
.svc-info-warn { border-color: rgba(224,86,106,0.35); }
.svc-info-warn h3 i { color: #E0566A; }
.svc-call { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--gold-border); color: var(--gold); font-weight: 800; font-size: 0.86rem; }
.svc-call:hover { background: var(--gold-soft); }
.svc-flow { list-style: none; counter-reset: f; padding: 0; margin: 0; display: grid; gap: 10px; }
.svc-flow li { counter-increment: f; display: flex; gap: 10px; align-items: center; font-size: 0.84rem; color: var(--text-light); }
.svc-flow li::before { content: counter(f); width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); font-weight: 900; font-size: 0.76rem; }

/* ── Responsive ─ */
@media (max-width: 1000px) {
    .svc-layout { grid-template-columns: 1fr; }
    .svc-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
    .svc-section { padding-top: 34px; }
    .svc-card { padding: 20px 16px; border-radius: var(--radius-lg); }
    .svc-tabs { display: flex; width: 100%; }
    .svc-tabs button { flex: 1; justify-content: center; padding: 10px 8px; font-size: 0.82rem; }
    .svc-steps li { font-size: 0; gap: 0; }
    .svc-steps li.is-active { font-size: 0.72rem; gap: 6px; }
    .svc-fields { grid-template-columns: 1fr; }
    .svc-types { grid-template-columns: 1fr; }
    .svc-item-row { grid-template-columns: 1fr 90px 40px; }
    .svc-item-row .svc-unit { grid-column: 1 / -1; order: 4; margin-top: -4px; }
    .svc-ticket span { font-size: 1.15rem; }
    .svc-summary { grid-template-columns: 1fr; gap: 2px; }
    .svc-summary dd { margin-bottom: 8px; }
    .svc-done-actions > * { flex: 1 1 100%; justify-content: center; }
}

/* ── Print: only the confirmation ─ */
@media print {
    body:not(.admin-body):has(.svc-done:not([hidden])) * { visibility: hidden; }
    .svc-done, .svc-done * { visibility: visible; }
    .svc-done { position: absolute; inset: 0 0 auto 0; color: #000; }
    .svc-done-actions, .svc-copy { display: none !important; }
    .svc-summary { background: #fff; border-color: #999; }
    .svc-summary dt, .svc-summary dd, .svc-done h2 { color: #000; }
}

/* ════════════ Admin: service requests ════════════ */
.admin-dept { margin: -6px 8px 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid var(--gold-border); color: var(--gold); font-weight: 800; font-size: 0.82rem; display: flex; gap: 8px; align-items: center; }
.admin-nav .badge-urgent, .dept-tabs .badge-urgent { background: #E0566A; animation: urgentPulse 1.6s ease-in-out infinite; }
.admin-nav .badge:not(.badge-urgent) { background: var(--gold); color: var(--on-gold); }
@keyframes urgentPulse { 50% { box-shadow: 0 0 0 5px rgba(224,86,106,0.25); } }
.stat-card.stat-urgent strong { color: #E0566A; }
.dept-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dept-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--navy-card); color: var(--text-light); font-weight: 700; font-size: 0.82rem; }
.dept-tabs a i { color: var(--gold); }
.dept-tabs a.active { border-color: var(--gold); background: var(--gold-soft); color: var(--white); }
.dept-tabs .badge { margin-inline-start: 2px; background: var(--gold); color: var(--on-gold); font-size: 0.7rem; padding: 1px 8px; border-radius: var(--radius-pill); }
.req-table tr.row-new td:first-child { box-shadow: inset -3px 0 0 var(--gold); }
.req-table tr.row-urgent td { background: rgba(224,86,106,0.06); }
.req-table tr.row-urgent td:first-child { box-shadow: inset -3px 0 0 #E0566A; }
.ticket-link { font-family: 'Consolas', 'Courier New', monospace; font-weight: 800; color: var(--gold); }
.svc-back { display: inline-flex; gap: 6px; align-items: center; color: var(--gold); font-weight: 700; font-size: 0.84rem; margin-bottom: 4px; }
.req-photo { position: relative; display: block; margin-top: 18px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); }
.req-photo img { width: 100%; max-height: 360px; object-fit: contain; background: var(--navy); }
.req-photo span { position: absolute; bottom: 10px; right: 10px; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(9,7,43,0.8); color: #fff; font-size: 0.78rem; }
.status-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.status-pick label { cursor: pointer; }
.status-pick input { position: absolute; opacity: 0; }
.status-pick .status-badge { opacity: 0.45; border: 2px solid transparent; transition: all var(--transition); }
.status-pick input:checked + .status-badge { opacity: 1; border-color: currentColor; }
.status-pick input:focus-visible + .status-badge { outline: 2px solid var(--gold); outline-offset: 2px; }
.inline-note { display: flex; gap: 8px; }
.inline-note .inline-select { flex: 1; min-width: 0; }
.svc-timeline li.is-internal .dot { background: var(--text-muted); box-shadow: none; }
.svc-timeline li.is-internal p { font-style: italic; }

.key-card { max-width: 560px; margin: 0 auto 24px; padding: 24px; border-radius: var(--radius-xl); border: 2px dashed var(--gold); background: var(--navy-card); box-shadow: var(--shadow-deep); animation: svcIn 0.4s ease both; }
.key-card-head { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.key-card-head img { border-radius: 12px; }
.key-card-head strong { display: block; color: var(--white); }
.key-card-head small { color: var(--text-muted); font-size: 0.78rem; }
.key-card-body { display: grid; gap: 12px; padding: 18px 0; }
.key-card-body small { display: block; color: var(--text-muted); font-size: 0.76rem; }
.key-card-body b { font-size: 1.15rem; color: var(--white); }
.key-card-body .key-code { font-family: 'Consolas', 'Courier New', monospace; font-size: 1.9rem; letter-spacing: 0.14em; color: var(--gold); }
.key-card-note { font-size: 0.8rem; color: var(--text-light); line-height: 1.8; }
.key-card-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
@media print {
    .admin-body:has(.key-card) * { visibility: hidden; }
    .admin-body .key-card, .admin-body .key-card * { visibility: visible; }
    .admin-body .key-card { position: absolute; inset: 0 0 auto 0; border-color: #000; background: #fff; box-shadow: none; }
    .admin-body .key-card b, .admin-body .key-card strong, .admin-body .key-card-note { color: #000 !important; }
    .admin-body .key-card-actions { display: none; }
}

/* ── Admin: bilingual news editor ─────────────────────────────── */
.lang-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 6px 0 10px; }
.lang-col { margin: 0; padding: 18px 18px 6px; border: 1px solid var(--gold-border); border-radius: var(--radius-lg); background: var(--navy-mid); min-width: 0; }
.lang-col[lang="en"] { font-family: 'Cairo', system-ui, sans-serif; text-align: left; }
.lang-col legend { padding: 0 10px; font-weight: 800; color: var(--white); display: inline-flex; align-items: center; gap: 8px; }
.lang-col legend small { color: var(--text-muted); font-weight: 600; }
.lang-flag, .lang-pill { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: .7rem; font-weight: 900; color: var(--on-gold); background: var(--gold); }
.lang-pill { margin-inline-end: 4px; }
.lang-pill.is-missing { background: transparent; color: var(--text-muted); border: 1px dashed var(--text-muted); text-decoration: line-through; }
.lang-col textarea { min-height: 0; }
@media (max-width: 1000px) { .lang-columns { grid-template-columns: 1fr; } }