/* page-schoolreception.css  -  externalized from Schools\SchoolReception.aspx <style>. Page-scoped: linked only on this page. */

        .school-reception-fluent {
            color: var(--nf1);
            font-family: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--nb1);
            padding: 20px 18px 24px;
            margin: 8px 12px 16px;
            border-radius: var(--r-xl);
            box-shadow:
                0 1px 2px color-mix(in srgb, var(--scrim-light) 80%, transparent),
                0 8px 24px color-mix(in srgb, var(--scrim-light) 60%, transparent),
                0 16px 48px color-mix(in srgb, var(--scrim-light) 40%, transparent);
        }

        .school-reception-shell {
            width: 100%;
            max-width: none;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .school-reception-fluent .cp-card,
        .school-reception-fluent .content-section {
            background: var(--nb1);
            border: 1px solid var(--ns2);
            border-radius: var(--r-xl);
            box-shadow: 0 1px 2px var(--scrim-faint);
            overflow: hidden;
        }

        .school-reception-fluent .formHeader {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 18px 24px 14px;
            background: var(--nb1);
            border-bottom: 1px solid var(--ns2);
            color: var(--nf1);
        }

        .school-reception-fluent .formHeader .form-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--brand-bg-tint);
            color: var(--brand-fg);
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .school-reception-fluent .formHeader .title,
        .school-reception-fluent .formHeader .title label,
        .school-reception-fluent .formHeader .title span {
            margin: 0;
            color: var(--nf1) !important;
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
        }

        .school-reception-fluent .ContentContainer-section,
        .school-reception-fluent .tabs-container {
            padding: 18px 24px;
            background: var(--nb1);
        }

        .school-reception-fluent .cp-msg-banner + .row {
            margin-top: 0;
            margin-bottom: 0;
        }

        .school-reception-fluent label,
        .school-reception-fluent .control-label {
            display: block;
            margin-bottom: 4px;
            color: var(--nf2) !important;
            font-size: 12px !important;
            font-weight: 400 !important;
            line-height: 16px !important;
            text-transform: none !important;
        }

        .school-reception-fluent input[type="text"],
        .school-reception-fluent input[type="password"],
        .school-reception-fluent input[type="email"],
        .school-reception-fluent input[type="number"],
        .school-reception-fluent input[type="search"],
        .school-reception-fluent input[type="tel"],
        .school-reception-fluent select,
        .school-reception-fluent textarea,
        .school-reception-fluent .form-control {
            width: 100%;
            min-height: 32px;
            height: 32px;
            padding: 0 8px;
            border: 1px solid var(--ns1);
            border-radius: var(--r-sm);
            background: var(--nb1);
            color: var(--nf1);
            font-family: inherit;
            font-size: 14px;
            line-height: 20px;
            box-shadow: none;
        }

        .school-reception-fluent .sr-filter-panel {
            background: transparent;
            /* 14px panel + 10px column padding = 24px field inset, matching the
               header title and the table content so everything lines up. */
            padding: 16px 14px;
        }

        .school-reception-fluent .sr-filter-row,
        .school-reception-fluent .sr-inline-card-row {
            display: flex;
            flex-wrap: wrap;
            gap: 14px 0;
            margin-bottom: 14px;
        }

        .school-reception-fluent .sr-field,
        .school-reception-fluent .sr-action {
            margin-bottom: 0;
        }

        .school-reception-fluent .sr-field-card,
        .school-reception-fluent .sr-action-card {
            height: 100%;
            padding: 0;
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        .school-reception-fluent .sr-hidden-system-row {
            display: none !important;
        }

        .school-reception-fluent .sr-login-field-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .school-reception-fluent .sr-login-field-wrap::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--brand-80);
            border-radius: 0 0 2px 2px;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.15s ease;
            pointer-events: none;
        }

        .school-reception-fluent .sr-login-field-wrap:focus-within::after {
            transform: scaleX(1);
        }

        .school-reception-fluent .sr-login-field-wrap input,
        .school-reception-fluent .sr-login-field-wrap select,
        .school-reception-fluent .sr-login-field-wrap .form-control {
            height: 32px !important;
            min-height: 32px !important;
            padding: 0 8px !important;
            border-radius: var(--r-sm) !important;
            font-size: 14px;
            line-height: 20px;
            transition: border-color var(--durationFast) var(--curveEasyEase), background var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase);
            appearance: none;
            -webkit-appearance: none;
        }

        .school-reception-fluent .sr-login-field-wrap input::placeholder {
            color: var(--nf3) !important;
        }

        .school-reception-fluent .sr-login-field-wrap select {
            padding-right: 36px !important;
            background-image:
                linear-gradient(45deg, transparent 50%, var(--nf3) 50%),
                linear-gradient(135deg, var(--nf3) 50%, transparent 50%);
            background-position:
                calc(100% - 18px) 50%,
                calc(100% - 12px) 50%;
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
        }

        .school-reception-fluent .sr-login-field-wrap input:focus,
        .school-reception-fluent .sr-login-field-wrap select:focus,
        .school-reception-fluent .sr-login-field-wrap .form-control:focus {
            outline: none;
        }

        .school-reception-fluent input:focus,
        .school-reception-fluent select:focus,
        .school-reception-fluent textarea:focus,
        .school-reception-fluent .form-control:focus {
            border-color: var(--brand-fg);
            box-shadow: none;
            outline: none;
        }

        .school-reception-fluent input[type="submit"],
        .school-reception-fluent input[type="button"],
        .school-reception-fluent button,
        .school-reception-fluent .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 32px;
            height: 32px;
            padding: 0 12px;
            border-radius: var(--r-sm);
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            text-transform: none;
            box-shadow: none;
        }

        .school-reception-fluent .sr-filter-row:last-child,
        .school-reception-fluent .sr-inline-card-row:last-child {
            margin-bottom: 0;
        }

        .school-reception-fluent .sr-row-action {
            display: none !important;
        }

        .school-reception-fluent .sr-field-label,
        .school-reception-fluent .sr-action-label {
            display: block;
            min-height: 16px;
            margin-bottom: 4px;
            color: var(--nf2);
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
        }

        .school-reception-fluent .sr-action .btn,
        .school-reception-fluent .sr-action input[type="submit"],
        .school-reception-fluent .sr-action input[type="button"],
        .school-reception-fluent .sr-action button,
        .school-reception-fluent .sr-field .btn,
        .school-reception-fluent .sr-field input[type="submit"],
        .school-reception-fluent .sr-field input[type="button"],
        .school-reception-fluent .sr-field button {
            width: 100%;
        }

        .school-reception-fluent .row-striped {
            margin-left: 0;
            margin-right: 0;
            background: transparent !important;
        }

        .school-reception-fluent .row-striped > [class*="col-"] {
            padding-left: 10px;
            padding-right: 10px;
            background: transparent !important;
        }

        .school-reception-fluent .sr-filter-row,
        .school-reception-fluent .sr-filter-row > [class*="col-"],
        .school-reception-fluent .sr-filter-row .sr-field-card,
        .school-reception-fluent .sr-filter-row .sr-action-card {
            background: transparent !important;
        }

        .school-reception-fluent .sr-search-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-top: 16px;
            margin-left: 0;
            margin-right: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 14px 10px;
            border: 1px solid var(--ns2);
            border-radius: var(--r-lg);
            flex-wrap: wrap;
        }

        .school-reception-fluent .sr-search-toolbar-copy {
            display: flex;
            align-items: center;
            min-height: 32px;
            padding: 0 12px;
            border-radius: 999px;
            background: var(--sel-bg);
        }

        .school-reception-fluent .sr-search-toolbar-title {
            font-size: 13px;
            font-weight: 600;
            line-height: 18px;
            color: var(--brand-90);
        }

        .school-reception-fluent .sr-search-toolbar-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .school-reception-fluent .sr-btn-primary,
        .school-reception-fluent .sr-btn-secondary,
        .school-reception-fluent .sr-btn-subtle,
        .school-reception-fluent .sr-btn-danger {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 32px !important;
            height: 32px !important;
            padding: 0 12px !important;
            border-radius: var(--r-sm);
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            text-decoration: none !important;
            cursor: pointer;
        }

        /* ── PRIMARY (Search) — solid accent fill, white text ── */
        .school-reception-fluent button.sr-btn-primary,
        .school-reception-fluent .sr-btn-primary {
            background: var(--brand-80) !important;
            border: 1px solid var(--brand-80) !important;
            color: var(--nf-on-brand) !important;
            box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-fg) 30%, transparent) !important;
        }
        .school-reception-fluent .sr-btn-primary:hover {
            background: var(--brand-90) !important;
            border-color: var(--brand-90) !important;
        }
        .school-reception-fluent .sr-btn-primary:active {
            background: var(--brand-100) !important;
            border-color: var(--brand-100) !important;
        }

        /* ── SECONDARY (New Patient) — outline + accent border/text ── */
        .school-reception-fluent button.sr-btn-secondary,
        .school-reception-fluent .sr-btn-secondary {
            background: var(--nb1) !important;
            border: 1px solid var(--brand-80) !important;
            color: var(--brand-fg) !important;
        }
        .school-reception-fluent .sr-btn-secondary:hover {
            background: color-mix(in srgb, var(--nb1) 82%, var(--brand-80) 18%) !important;
            border-color: var(--brand-fg) !important;
        }

        /* ── SUBTLE / NORMAL (Refresh, Clear Filters) — neutral, no accent ── */
        .school-reception-fluent button.sr-btn-subtle,
        .school-reception-fluent .sr-btn-subtle {
            background: var(--nb1) !important;
            border: 1px solid var(--ns1) !important;
            color: var(--nf1) !important;
        }
        .school-reception-fluent .sr-btn-subtle:hover {
            background: var(--nb1-hover) !important;
            border-color: var(--ns1) !important;
            color: var(--nf1) !important;
        }

        /* ── DANGER (Delete, Cancel) — solid red ── */
        .school-reception-fluent button.sr-btn-danger,
        .school-reception-fluent .sr-btn-danger {
            background: var(--danger) !important;
            border: 1px solid var(--danger) !important;
            color: var(--nf-on-brand) !important;
        }
        .school-reception-fluent .sr-btn-danger:hover {
            background: var(--danger-hover) !important;
            border-color: var(--danger-hover) !important;
            color: var(--nf-on-brand) !important;
        }

        .school-reception-fluent #srWaitingPatientsPanel .ContentContainer-section,
        .school-reception-fluent #srWaitingPatientsPanel .formHeader,
        .school-reception-fluent #srWaitingPatientsPanel .content-section {
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        .school-reception-fluent #srWaitingPatientsPanel .row.formHeader {
            display: none !important;
        }

        .school-reception-fluent .tabs-container {
            padding-top: 0;
        }

        .school-reception-fluent .backGroundN,
        .school-reception-fluent .backGroundN .ajax__tab_body,
        .school-reception-fluent .backGroundN .ajax__tab_outer,
        .school-reception-fluent .backGroundN .ajax__tab_inner,
        .school-reception-fluent .backGroundN .ajax__tab_tab,
        .school-reception-fluent .backGroundN .ajax__tab_panel {
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        .school-reception-fluent .backGroundN .ajax__tab_header,
        .school-reception-fluent .backGroundN .ajax__tab_tab,
        .school-reception-fluent .backGroundN .ajax__tab_outer,
        .school-reception-fluent .backGroundN .ajax__tab_inner {
            display: none !important;
        }

        .school-reception-fluent .backGroundN .ajax__tab_body {
            margin: 0 !important;
            padding: 0 !important;
        }

        .school-reception-fluent .backGroundN .ajax__tab_panel {
            padding: 0 !important;
        }

        .school-reception-fluent .cp-table-scroll {
            overflow-x: auto;
        }

        .school-reception-fluent .sr-empty-state {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 220px;
            padding: 32px 20px;
            text-align: center;
            border: 1px dashed var(--ns2);
            border-radius: var(--r-xl);
            background: var(--nb1);
        }

        .school-reception-fluent .sr-waiting-panel {
            display: block;
        }

        .school-reception-fluent .sr-empty-state-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--brand-bg-tint);
            color: var(--brand-fg);
            font-size: 20px;
        }

        .school-reception-fluent .sr-empty-state-title {
            font-size: 18px;
            font-weight: 600;
            line-height: 24px;
            color: var(--nf1);
        }

        .school-reception-fluent .sr-empty-state-text {
            max-width: 320px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: var(--nf3);
        }

        .school-reception-fluent .Grid th,
        .school-reception-fluent .table thead th,
        .school-reception-fluent table.dataTable thead th {
            background: var(--nb2);
            color: var(--nf2);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            height: 44px;
            padding: 0 12px;
            text-align: left;
            white-space: nowrap;
            border-bottom: 1px solid var(--ns1);
        }

        .school-reception-fluent .Grid td,
        .school-reception-fluent .table td,
        .school-reception-fluent table.dataTable tbody td {
            font-size: 14px;
            color: var(--nf1);
            height: 44px;
            padding: 0 12px;
            vertical-align: middle;
            border-bottom: 1px solid var(--ns2);
        }

        .school-reception-fluent .Grid tr:hover td,
        .school-reception-fluent .table tbody tr:hover td,
        .school-reception-fluent table.dataTable tbody tr:hover td {
            background: var(--nb1-hover);
        }

        .school-reception-fluent .arrow {
            display: none !important;
        }

        /* ── Image button replacements ── */
        .school-reception-fluent .sr-img-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 4px !important;
            height: 32px !important;
            padding: 0 10px !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            border-radius: var(--r-sm) !important;
            cursor: pointer !important;
            white-space: nowrap !important;
        }

        /* Hide residual dot/indicator images */
        .school-reception-fluent img[src*="dot.gif"],
        .school-reception-fluent img[src*="dot.GIF"] {
            display: none !important;
        }

        /* Hide original inputs once replaced */
        .school-reception-fluent input[type="image"].sr-replaced,
        .school-reception-fluent input[type="submit"].sr-replaced {
            display: none !important;
        }

        /* Group the 3-row repeater entries: rows 2 & 3 share background, separator after row 3 */
        #dtPAtientSearchLst tbody tr:nth-child(3n+2) > td,
        #dtPAtientSearchLst tbody tr:nth-child(3n+0) > td {
            background: color-mix(in srgb, var(--nb2) 60%, transparent) !important;
            border-bottom: none !important;
        }
        #dtPAtientSearchLst tbody tr:nth-child(3n+1) > td {
            border-bottom: none !important;
            padding-top: 10px !important;
        }
        #dtPAtientSearchLst tbody tr:nth-child(3n+0) > td {
            border-bottom: 2px solid var(--ns1) !important;
            padding-bottom: 8px !important;
        }
        #dtPAtientSearchLst tbody tr:nth-child(3n+0) > td:first-child {
            padding-left: 8px !important;
        }

        @media (max-width: 768px) {
            .school-reception-fluent .formHeader {
                padding: 18px 24px 14px;
            }

            .school-reception-fluent .ContentContainer-section,
            .school-reception-fluent .tabs-container {
                padding: 14px 16px;
            }

            .school-reception-fluent .row-striped > [class*="col-"] {
                padding-left: 8px;
                padding-right: 8px;
            }

            .school-reception-fluent .sr-search-toolbar {
                align-items: stretch;
                margin-left: 0;
                margin-right: 0;
                padding-left: 8px;
                padding-right: 8px;
            }

            .school-reception-fluent .sr-search-toolbar-copy {
                justify-content: center;
            }

            .school-reception-fluent .sr-search-toolbar-actions {
                width: 100%;
                margin-left: 0;
            }
            /* Scrollable grids */
            .school-reception-fluent .Grid,
            .school-reception-fluent .responsive-grid,
            .school-reception-fluent table.Grid {
                display: block !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
            }
            /* Touch-friendly inputs */
            .school-reception-fluent input[type="text"],
            .school-reception-fluent select,
            .school-reception-fluent .form-control {
                height: 44px !important;
                min-height: 44px !important;
                font-size: 16px !important;
            }
        }
    
/* ---------------------------------------------------------------
   Hide everything UNDER the Waiting Patients card.
   #srNewPatientCard is the leftover tab container below #srWaitingCard;
   the waiting grid is relocated up into #srWaitingCard at runtime, so this
   card is redundant on the School Reception screen. (Search results card
   #srSearchCard is kept - it is the alternate view shown when searching.)
   --------------------------------------------------------------- */
#srNewPatientCard { display: none !important; }

/* ---------------------------------------------------------------
   ESIS ID search field (txtFileCode) - give it a distinct highlight
   so it stands out from the other search inputs.
   --------------------------------------------------------------- */
.page-content [id$="txtFileCode"] {
    background: var(--brand-bg-tint, #eff6fc) !important;
    border: 1.5px solid var(--brand-80) !important;
    color: var(--nf1) !important;
    font-weight: 600 !important;
}
.page-content [id$="txtFileCode"]:focus {
    border-color: var(--brand-90, var(--brand-80)) !important;
    box-shadow: 0 0 0 2px rgba(0,120,212,.20) !important;
}