/* ============================================================================
   ZF Social Support — global density / typography scale
   ----------------------------------------------------------------------------
   Loaded by _Layout and _LayoutCMS right after Bootstrap. Bootstrap sizes
   everything in rem, so lowering the root font size rescales forms, buttons,
   modals and tables together and keeps them proportional. The rules below
   then tune the pieces that need a little more than a proportional shrink.

   Change ONE number to tune the whole app:  html { font-size }  (14px ≈ 87.5%)
   ============================================================================ */

html {
    font-size: 14px;
}

body {
    font-size: 0.9286rem;          /* 13px */
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic (Cairo) renders visually larger than Latin at the same size */
body.zf-rtl {
    font-size: 0.9286rem;
    line-height: 1.6;
}

/* ── Headings ──────────────────────────────────────────────────────────── */
h1, .h1 { font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3;  }
h3, .h3 { font-size: 1.1rem;  font-weight: 700; line-height: 1.3;  }
h4, .h4 { font-size: 1rem;    font-weight: 700; }
h5, .h5 { font-size: 0.95rem; font-weight: 700; }
h6, .h6 { font-size: 0.875rem; font-weight: 700; }

.section-title  { font-size: 1rem   !important; }
.page-title,
.top-bar-title  { font-size: 0.95rem; }
.text-muted, .small, small { font-size: 0.8rem; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-label,
label.form-label,
.col-form-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #2b3d38;
}

.form-control,
.form-select {
    font-size: 0.875rem;
    padding: 0.4rem 0.65rem;
    min-height: 34px;
    line-height: 1.4;
    border-radius: 8px;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.8rem;
    padding: 0.28rem 0.5rem;
    min-height: 30px;
}

textarea.form-control { min-height: 72px; }

.form-check-input { width: 15px; height: 15px; margin-top: 0.2em; }
.form-check-label { font-size: 0.85rem; }
.form-text        { font-size: 0.78rem; }
.input-group-text { font-size: 0.85rem; padding: 0.35rem 0.6rem; }

/* validation text under fields */
.field-error,
.zf-field-error,
.field-validation-error,
.invalid-feedback,
.text-danger[data-valmsg-for] {
    font-size: 0.78rem;
    font-weight: 600;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    font-size: 0.85rem;
    padding: 0.42rem 0.9rem;
    border-radius: 8px;
    line-height: 1.35;
}

.btn-sm {
    font-size: 0.78rem;
    padding: 0.28rem 0.65rem;
    border-radius: 7px;
}

.btn-lg {
    font-size: 0.95rem;
    padding: 0.55rem 1.1rem;
}

.btn .bi { font-size: 0.95em; vertical-align: -0.05em; }

/* ── Cards / panels ────────────────────────────────────────────────────── */
.card-header      { padding: 0.7rem 1rem; font-size: 0.9rem; font-weight: 700; }
.card-body        { padding: 1rem; }
.card-title       { font-size: 0.95rem; }
.soft-card        { border-radius: 14px; }
.kv-row           { padding: 0.45rem 0; }
.label-muted      { font-size: 0.78rem; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table {
    font-size: 0.85rem;
}

.table > :not(caption) > * > * {
    padding: 0.5rem 0.65rem;
    vertical-align: middle;
}

.table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table-sm > :not(caption) > * > * { padding: 0.35rem 0.5rem; }

/* DataTables controls, if present */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.8rem;
}

/* ── Bootstrap modals (popups) ─────────────────────────────────────────── */
.modal-content {
    font-size: 0.875rem;
    border-radius: 14px;
}

.modal-header {
    padding: 0.75rem 1.1rem;
}

.modal-title {
    font-size: 1rem;
    font-weight: 700;
}

.modal-body {
    padding: 1rem 1.1rem;
}

.modal-footer {
    padding: 0.6rem 1.1rem;
    gap: 0.4rem;
}

.modal-footer > * { margin: 0; }

.modal-dialog       { max-width: 520px; }
.modal-lg           { max-width: 820px; }
.modal-xl           { max-width: 1040px; }
.modal-sm           { max-width: 380px; }

.modal .form-label  { margin-bottom: 0.2rem; }
.modal .row.g-3     { --bs-gutter-y: 0.75rem; --bs-gutter-x: 0.9rem; }
.modal .btn-close   { font-size: 0.75rem; }

/* ── SweetAlert2 popups ────────────────────────────────────────────────── */
.swal2-popup {
    font-size: 0.9rem !important;
    width: 30em !important;
    padding: 1.25em 1.25em 1.1em !important;
    border-radius: 14px !important;
}

.swal2-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    padding: 0.4em 1em 0 !important;
}

.swal2-html-container {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0.75em 1.2em 0.3em !important;
}

/* Do NOT resize the icon box: SweetAlert2 draws the tick / cross / "!" / "i"
   with absolutely-positioned pieces measured in em inside a fixed 5em box, so
   forcing width/height breaks the drawing (tick disappears, cross shifts).
   Leave the box untouched and scale the finished icon as a whole instead —
   every icon type then renders exactly as SweetAlert2 intends, just smaller. */
.swal2-icon {
    transform: scale(0.8);
    transform-origin: center bottom;
    margin: 0.4em auto 0 !important;
}

.swal2-actions { margin-top: 1em !important; gap: 0.5em; }

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    font-size: 0.85rem !important;
    padding: 0.5em 1.2em !important;
    border-radius: 8px !important;
}

.swal2-input,
.swal2-select,
.swal2-textarea {
    font-size: 0.875rem !important;
    min-height: 34px !important;
}

/* ── Badges / alerts / misc ────────────────────────────────────────────── */
.badge   { font-size: 0.72rem; font-weight: 600; padding: 0.3em 0.55em; }
.alert   { font-size: 0.85rem; padding: 0.65rem 0.9rem; border-radius: 10px; }
.nav-tabs .nav-link { font-size: 0.85rem; padding: 0.5rem 0.9rem; }
.breadcrumb { font-size: 0.8rem; }
.pagination { font-size: 0.85rem; }
.dropdown-menu { font-size: 0.85rem; }
.tooltip { font-size: 0.78rem; }
.list-group-item { font-size: 0.875rem; padding: 0.55rem 0.9rem; }

/* ── Layout rhythm ─────────────────────────────────────────────────────── */
.row.g-3 { --bs-gutter-y: 0.85rem; }
.mb-3    { margin-bottom: 0.85rem !important; }
.mt-4    { margin-top: 1.25rem !important; }

/* ============================================================================
   COMPACT MODE — laptops on 125–150 % Windows scaling
   ----------------------------------------------------------------------------
   A 1920×1080 screen at 150 % scaling gives the browser only 1280×~665 CSS px,
   so desktop-sized components (260px sidebar, 880px modals) look enormous.
   Below 1440px wide the whole app is scaled to 90 % and the largest
   px-based components are tightened further.
   ============================================================================ */
@media (max-width: 1440px) {

    /* uniform scale for everything except the full-screen login landing page */
    body:not(.no-sidebar) {
        zoom: 0.9;
    }

    /* `zoom` shrinks rendered boxes but viewport units are NOT rescaled, so a
       100vh sidebar ends up 90 % tall with a gap at the bottom. Compensate by
       dividing the viewport-based sizes by the zoom factor (100 / 0.9). */
    body:not(.no-sidebar) #app-sidebar,
    body:not(.no-sidebar) #cms-sidebar {
        height: calc(100vh / 0.9);
        min-height: calc(100vh / 0.9);
    }
    body:not(.no-sidebar) { min-height: calc(100vh / 0.9); }
    body:not(.no-sidebar) #page-wrap { min-height: calc(100vh / 0.9); }
    .modal-body                       { max-height: calc((100vh / 0.9) - 150px); }
    .service-intro-body               { max-height: calc((100vh / 0.9) - 210px); }

    /* sidebar + top bar */
    :root { --sb-w: 228px; }
    #app-sidebar .sb-item        { padding: 9px 12px; font-size: 12.5px; }
    #app-sidebar .sb-item .bi    { font-size: 15px; }
    #app-sidebar .sb-head        { font-size: 10px; letter-spacing: .08em; }
    #top-bar                     { min-height: 52px; }
    .top-bar-title               { font-size: 13.5px; }
    .top-user-name               { font-size: 12.5px; }
    .top-user-role               { font-size: 10.5px; }

    /* page rhythm */
    #main-content                { padding: 16px 18px; }
    .prof-card, .soft-card, .card { border-radius: 12px; }
    .prof-hero                   { padding: 16px 20px; }
    .prof-hero-title             { font-size: 1.25rem; }

    /* generic Bootstrap modals */
    .modal-dialog                { max-width: 500px; }
    .modal-lg                    { max-width: 760px; }
    .modal-xl                    { max-width: 960px; }
    .modal-body                  { max-height: calc(100vh - 150px); overflow-y: auto; }

    /* service intro popup (Health / Education / Rental …) */
    .service-intro-modal .modal-dialog  { max-width: 720px; margin: 1rem auto; }
    .service-intro-content              { border-radius: 16px; }
    .service-intro-header               { padding: 18px 22px 16px; }
    .service-intro-icon                 { width: 52px; height: 52px; font-size: 22px; border-radius: 12px; }
    .service-intro-eyebrow              { font-size: 9px; }
    .service-intro-title                { font-size: 20px; }
    .service-intro-subtitle             { font-size: 12px; }
    .service-intro-body                 { padding: 16px 22px 8px; max-height: calc(100vh - 210px); overflow-y: auto; }
    .service-apply-banner               { padding: 12px 14px; border-radius: 12px; }
    .service-apply-banner-icon          { width: 34px; height: 34px; font-size: 15px; }
    .service-apply-banner-title         { font-size: 13px; }
    .service-apply-banner-text          { font-size: 11.5px; }
    .service-meta-grid                  { gap: 10px; }
    .service-meta-card                  { padding: 10px 12px; border-radius: 12px; }
    .service-meta-icon                  { width: 34px; height: 34px; font-size: 15px; }
    .service-meta-label                 { font-size: 9px; }
    .service-meta-card strong           { font-size: 13px; }
    .service-process                    { padding: 12px 14px; border-radius: 12px; }
    .service-process-number             { width: 26px; height: 26px; font-size: 11px; }
    .service-process-step strong        { font-size: 12px; }
    .service-process-step span          { font-size: 10px; }
    .service-requirement-card           { padding: 14px 16px; border-radius: 12px; }
    .requirement-heading-icon           { width: 36px; height: 36px; font-size: 16px; }
    .service-requirement-heading h3     { font-size: 13px; }
    .service-requirement-heading p      { font-size: 10.5px; }
    .service-requirement-item           { font-size: 12.5px; padding: 7px 0; }
    .service-requirement-check          { width: 20px; height: 20px; font-size: 10px; }
    .service-conditional-note,
    .service-file-note                  { padding: 10px 12px; font-size: 11.5px; border-radius: 10px; }
    .service-intro-footer               { padding: 10px 22px; }
    .service-intro-cancel,
    .service-intro-continue             { font-size: 13px; padding: 9px 16px; border-radius: 10px; }
}

/* Very small laptops / tablets */
@media (max-width: 1100px) {
    body:not(.no-sidebar) { zoom: 0.85; }
    body:not(.no-sidebar) #app-sidebar,
    body:not(.no-sidebar) #cms-sidebar { height: calc(100vh / 0.85); min-height: calc(100vh / 0.85); }
    body:not(.no-sidebar),
    body:not(.no-sidebar) #page-wrap  { min-height: calc(100vh / 0.85); }
    .modal-body                        { max-height: calc((100vh / 0.85) - 150px); }
    .service-intro-body                { max-height: calc((100vh / 0.85) - 210px); }
}

/* ============================================================================
   MOBILE (phones ≤ 767px) — app-wide alignment rules
   ----------------------------------------------------------------------------
   Loaded on every page. Fixes the things that break on a narrow screen:
   horizontal overflow, multi-column grids, wide hero rows, the top bar,
   tab strips, tables and modals. Page-specific CSS still applies; this block
   only steps in where the desktop rules don't scale down.
   ============================================================================ */
@media (max-width: 767px) {

    /* no scaling tricks on phones — text must stay readable */
    body:not(.no-sidebar) { zoom: 1 !important; min-height: 100vh; }
    body:not(.no-sidebar) #app-sidebar,
    body:not(.no-sidebar) #cms-sidebar { height: 100vh; min-height: 100vh; }
    body:not(.no-sidebar) #page-wrap   { min-height: 100vh; }
    .modal-body                         { max-height: none; }
    .service-intro-body                 { max-height: none; }

    /* never allow sideways scrolling */
    html, body   { overflow-x: hidden; max-width: 100vw; }
    #page-wrap,
    #main-content { max-width: 100vw; overflow-x: hidden; }
    #main-content { padding: 12px 12px 24px; }
    img, svg, video { max-width: 100%; }

    /* ── Top bar ──────────────────────────────────────────────────────── */
    #top-bar { padding: 0 10px; gap: 8px; min-height: 52px; }
    .top-bar-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
    .top-bar-user  { gap: 8px; }
    .top-user-name, .top-user-role { display: none; }         /* avatar only */
    .lang-btns .lang-btn { height: 30px; min-width: 38px; padding: 0 8px; font-size: 11px; }

    /* ── Hero / header bands (Dashboard, Profile, My Application, Journey) ── */
    .hero, .det-hero, .prof-hero, .journey-hero {
        padding: 16px 16px !important;
        border-radius: 14px !important;
    }
    .hero-content > .d-flex,
    .det-hero,
    .prof-hero { flex-wrap: wrap; }
    .det-hero-badge { width: 100%; justify-content: center; margin-top: 10px; }
    .hero-name, .det-hero-title, .prof-hero-title, .journey-title { font-size: 1.15rem !important; }
    .hero-actions .hero-btn { flex: 1 1 calc(50% - 8px); justify-content: center; }

    /* ── Tab strips / quick-nav (My Application) ─────────────────────── */
    .det-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .det-nav::-webkit-scrollbar { display: none; }
    .det-nav-btn { flex: 0 0 auto; }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; }

    /* ── Section heads with a right-side action / status ─────────────── */
    .det-section-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .det-section-head > :last-child:not(.det-section-title) { margin-left: auto; }
    .section-header { flex-wrap: wrap; gap: 8px; }
    .section-actions { width: 100%; display: flex; justify-content: flex-end; }
    .pi-toolbar { flex-wrap: wrap; gap: 8px; }

    /* ── Multi-column key/value grids → 1–2 columns ──────────────────── */
    .pi-grid,
    #journeyFormHost .pi-grid            { grid-template-columns: 1fr 1fr !important; gap: 6px 10px; }
    .journey-verified-groups,
    .journey-verified-list,
    .journey-verified-group-other .journey-verified-list { grid-template-columns: 1fr !important; }
    .kpi-strip, .svc-grid                { grid-template-columns: 1fr 1fr !important; }
    .fv-member-grid                      { grid-template-columns: 1fr !important; }
    .relatives-grid                      { grid-template-columns: 1fr !important; }

    /* ── Journey ─────────────────────────────────────────────────────── */
    .journey-shell   { padding: 0 !important; }
    .journey-steps   { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .journey-step    { padding: 10px !important; }
    .journey-form-card { border-radius: 14px !important; }
    .journey-form-head { flex-wrap: wrap; gap: 10px; padding: 12px 14px !important; }
    .journey-form-body { padding: 12px 14px !important; }
    .journey-required-badge { width: 100%; justify-content: center; }
    .journey-document-focus { flex-wrap: wrap; }

    /* ── Forms: every column becomes full width ──────────────────────── */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] { flex: 0 0 100%; max-width: 100%; }
    .form-control, .form-select { font-size: 16px; }   /* stops iOS auto-zoom on focus */
    .d-flex.justify-content-end > .btn { width: 100%; }
    .btn + .btn { margin-top: 6px; }

    /* Other Services row: checkbox | name  /  amount full width below */
    .os-service-row { grid-template-columns: 28px 1fr !important; }
    .os-service-row .os-amount { grid-column: 1 / -1; width: 100%; }
    .os-service-grid { grid-template-columns: 1fr !important; }

    /* ── Tables scroll instead of squashing ──────────────────────────── */
    .table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.table { min-width: 560px; }
    .table > :not(caption) > * > * { white-space: nowrap; }

    /* ── Modals / popups edge-to-edge ────────────────────────────────── */
    .modal-dialog, .modal-lg, .modal-xl, .modal-sm { max-width: none !important; margin: 8px; }
    .modal-content { border-radius: 12px; }
    .modal-body { padding: 12px; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 auto; }
    .service-intro-modal .modal-dialog { margin: 8px !important; max-width: none !important; }
    .service-intro-header { padding: 16px 16px 14px !important; }
    .service-intro-body { padding: 14px 14px 6px !important; }
    .service-meta-grid { grid-template-columns: 1fr !important; }
    .service-process { flex-direction: column; align-items: flex-start; gap: 8px; }
    .service-process-line { display: none; }
    .service-intro-footer { flex-direction: column; gap: 8px; padding: 10px 14px !important; }
    .service-intro-footer .btn,
    .service-intro-cancel, .service-intro-continue { width: 100%; justify-content: center; }
    .swal2-popup { width: calc(100vw - 24px) !important; }

    /* ── Verified card / read-only panels ────────────────────────────── */
    .journey-verified-summary { padding: 8px 10px 6px; }
    .journey-verified-value { white-space: normal; }

    /* ── Cards & spacing ─────────────────────────────────────────────── */
    .prof-card, .soft-card, .det-section, .card { border-radius: 12px; }
    .prof-card-body, .det-section-body, .card-body { padding: 12px !important; }
    .sheet { padding: 0 !important; }
}

/* ============================================================================
   TABLET (768 – 1024px)
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .pi-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
    .svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .journey-steps { grid-template-columns: 1fr 1fr !important; }
    .det-nav { overflow-x: auto; flex-wrap: nowrap; }
    .det-nav-btn { flex: 0 0 auto; }
}

/* ── Status badges: readable text on the pale "subtle" backgrounds ────────────
   Bootstrap's text-warning (#ffc107) on bg-warning-subtle is almost invisible
   ("Expiring soon" on Documents / Family / Dashboard). Use dark tints instead. */
.badge.bg-warning-subtle.text-warning,
.badge.bg-warning-subtle { color: #8a5a00 !important; background: #fff1c2 !important; border: 1px solid #f1d27a; }
.badge.bg-danger-subtle.text-danger,
.badge.bg-danger-subtle  { color: #a12622 !important; background: #fde4e2 !important; border: 1px solid #f3b8b4; }
.badge.bg-success-subtle.text-success,
.badge.bg-success-subtle { color: #1f5a4e !important; background: #dff0e6 !important; border: 1px solid #b9dcc8; }
.badge.bg-secondary-subtle { color: #4b5b57 !important; background: #eef1ef !important; border: 1px solid #d5dcd8; }
.badge.bg-info-subtle      { color: #7a5040 !important; background: #f6ede9 !important; border: 1px solid #e3cdc4; }
.badge.bg-primary-subtle   { color: #203832 !important; background: #e8efeb !important; border: 1px solid #c9d8d0; }
.badge.bg-warning-subtle, .badge.bg-danger-subtle, .badge.bg-success-subtle, .badge.bg-secondary-subtle,
.badge.bg-info-subtle, .badge.bg-primary-subtle, .badge.bg-light, .student-card .badge, .patient-card .badge, .other-card .badge {
    /* compact pill — site.css turns .badge into a 110×20 grid box and the table
       row stretches it; override with an inline pill sized to its text */
    display: inline-flex !important; align-items: center; justify-content: center;
    width: auto !important; height: auto !important; min-width: 84px;
    padding: 3px 10px !important; line-height: 1.2 !important;
    font-size: 11px !important; font-weight: 600; border-radius: 999px; white-space: nowrap;
}

/* ── Mandatory field marker (red asterisk after the label) ── */
label.zf-required-label::after { content: " *"; color: #b3261e; font-weight: 700; }

/* ── File inputs: "Choose File" button fills the left edge of the box and the
   control keeps exactly the same height as a normal text input ────────────── */
input[type="file"].form-control { padding: 0; overflow: hidden; }
input[type="file"].form-control::file-selector-button,
input[type="file"].form-control::-webkit-file-upload-button {
    margin: 0; margin-inline-end: 10px;
    padding: .375rem .75rem;          /* = Bootstrap .form-control padding → same height */
    border: 0; border-inline-end: 1px solid rgba(32,56,50,.18); border-radius: 0;
    background: #f1f4f2; color: #203832; font-weight: 600; font: inherit; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
input[type="file"].form-control:hover::file-selector-button { background: #e6ece8; }
input[type="file"].form-control.form-control-sm::file-selector-button { padding: .25rem .5rem; }
/* Health form uses 6px/10px paddings — keep file buttons the same height as its inputs */
.hd-form-wrap input[type="file"].form-control::file-selector-button,
.hd-form-wrap input[type="file"].form-control::-webkit-file-upload-button { padding: 6px 12px; }

/* ── Section divider inside forms (e.g. Education → Employment Details) ── */
.zf-section-divider {
    display: flex; align-items: center;
    margin: 22px 0 12px;
    padding: 8px 12px;
    background: rgba(32,56,50,.06);
    border-left: 4px solid #203832;
    border-radius: 0 8px 8px 0;
}
.zf-rtl .zf-section-divider { border-left: 0; border-right: 4px solid #203832; border-radius: 8px 0 0 8px; }
.zf-section-divider-title {
    font-size: 13px; font-weight: 800; color: #203832;
    letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px;
}
.zf-section-divider-title i { color: #AA7D6D; }

/* ── Service pages: request cards + member rows (Health / Education / Rental / Other) ── */
.sr-btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 1px solid rgba(32,56,50,.25); background: #fff; color: #203832; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; }
.sr-btn-outline:hover { background: #203832; color: #fff; border-color: #203832; }
.sr-btn-outline.danger { color: #c0392b; border-color: rgba(192,57,43,.35); } .sr-btn-outline.danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.sr-req { background: #fff; border: 1px solid rgba(32,56,50,.09); border-left: 4px solid #1d9e75; border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.sr-req.draft { border-left-color: #2563eb; }
.zf-rtl .sr-req { border-left: 1px solid rgba(32,56,50,.09); border-right: 4px solid #1d9e75; } .zf-rtl .sr-req.draft { border-right-color: #2563eb; }
.sr-req-hd { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.sr-req-icon { width: 36px; height: 36px; border-radius: 9px; background: #e3f3ea; color: #1d6b45; display: grid; place-items: center; font-size: 16px; }
.sr-req.draft .sr-req-icon { background: #dbeafe; color: #1e40af; }
.sr-req-title { font-size: 15px; font-weight: 700; color: #1e3a34; }
.sr-status { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.sr-status.sent, .sr-status.ok { background: #dcfce7; color: #166534; } .sr-status.draft { background: #dbeafe; color: #1e40af; }
.sr-status.bad { background: #fee2e2; color: #991b1b; } .sr-status.review { background: #fef3c7; color: #92400e; }
.sr-req-hd .grow, .sr-members-hd .grow, .sr-cta .grow { flex: 1; }
.sr-req-meta { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; padding: 0 16px 12px; }
.sr-meta { display: flex; align-items: flex-start; gap: 10px; }
.sr-meta i { width: 30px; height: 30px; border-radius: 8px; background: #f4f8f6; color: #203832; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.sr-meta-lbl { font-size: 11px; color: rgba(32,56,50,.6); }
.sr-meta-val { font-size: 13px; font-weight: 600; color: #1e3a34; }
.sr-members { margin: 0 16px 14px; border: 1px solid rgba(32,56,50,.09); border-radius: 10px; overflow: hidden; }
.sr-members-hd { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #f4f8f6; border-bottom: 1px solid rgba(32,56,50,.07); }
.sr-members-title { font-size: 13px; font-weight: 700; color: #1e3a34; display: inline-flex; align-items: center; gap: 8px; }
.sr-members-title i { color: #1d6b45; }
/* minmax(0, …) keeps every row's columns identical regardless of text length */
.sr-member { display: grid; grid-template-columns: 56px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.4fr) 150px; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(32,56,50,.06); }
.sr-member.cols-4 { grid-template-columns: 56px minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr) 150px; }
.sr-member > * { min-width: 0; overflow-wrap: anywhere; }
/* legacy .other-card / .student-card / .patient-card styles set display:flex — the grid must win */
.sr-member.other-card, .sr-member.student-card, .sr-member.patient-card, .hs-member.patient-card {
    display: grid !important; flex-wrap: nowrap !important; justify-content: initial !important;
    padding: 12px 14px !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important;
    border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; margin: 0 !important; transform: none !important;
}
.sr-member.other-card:hover, .sr-member.student-card:hover, .sr-member.patient-card:hover, .hs-member.patient-card:hover { transform: none !important; box-shadow: none !important; }
.sr-member.other-card > *, .sr-member.student-card > *, .sr-member.patient-card > *, .hs-member.patient-card > * { flex: none !important; width: auto !important; }
.sr-member .sr-m-actions { justify-self: end; width: 150px; }
.sr-member:last-child { border-bottom: 0; }
.sr-avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(32,56,50,.10); color: #203832; display: grid; place-items: center; font-weight: 700; font-size: 16px; overflow: hidden; position: relative; }
.sr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-m-name { font-size: 14px; font-weight: 700; color: #1e3a34; }
.sr-m-sub { font-size: 12px; color: rgba(32,56,50,.6); line-height: 1.5; }
.sr-kv-lbl { font-size: 11px; color: rgba(32,56,50,.6); }
.sr-kv-val { font-size: 13px; font-weight: 600; color: #1e3a34; }
.sr-kv-val small { font-weight: 400; color: rgba(32,56,50,.6); }
.sr-docs { border-left: 1px solid rgba(32,56,50,.08); padding-left: 14px; }
.zf-rtl .sr-docs { border-left: 0; border-right: 1px solid rgba(32,56,50,.08); padding-left: 0; padding-right: 14px; }
.sr-docs-title { font-size: 13px; font-weight: 700; color: #1e3a34; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sr-doc-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #1e40af; text-decoration: none; line-height: 1.7; }
.sr-doc-link:hover { text-decoration: underline; }
.sr-doc-none { font-size: 12px; color: rgba(32,56,50,.5); }
.sr-m-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sr-lock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #203832; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sr-cta { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid rgba(32,56,50,.09); margin-top: 4px; }
.sr-cta-icon { width: 48px; height: 48px; border-radius: 12px; background: #e3f3ea; color: #1d6b45; display: grid; place-items: center; font-size: 22px; }
.sr-cta b { display: block; font-size: 13px; color: #1e3a34; }
.sr-cta .grow > span { font-size: 12px; color: rgba(32,56,50,.65); }
.sr-btn-outline span, .sr-btn-outline i, .sp-btn-dark span { color: inherit !important; font-size: inherit !important; }
.sr-req-body.collapsed { display: none; }
.sr-form-card { background: #fff; border: 1px solid rgba(32,56,50,.12); border-radius: 12px; padding: 16px; margin: 14px 0; }
@media (max-width: 1200px) { .sr-member, .sr-member.cols-4 { grid-template-columns: 56px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); } .sr-docs, .sr-m-actions { grid-column: 2 / -1; } .sr-docs { border-left: 0; padding-left: 0; } .sr-m-actions { flex-direction: row; justify-self: start; width: auto; } }
@media (max-width: 900px) { .sr-req-meta { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .sr-member, .sr-member.cols-4 { grid-template-columns: 56px 1fr; } .sr-member > * { grid-column: auto; } .sr-docs, .sr-m-actions { grid-column: 1 / -1; } }