/* ============ STAFF SUB-PAGES (HR, IT, CURRICULUM) ============== */
.staff-page-content { padding-top: 3rem; }
.staff-info-list { display: flex; flex-direction: column; gap: 1.5rem; }
.staff-info-card { background-color: var(--c-white); border: 1px solid var(--c-gray-100); border-radius: 1rem; padding: 2rem; }
.staff-info-heading { font-size: 1.25rem; font-weight: 800; color: var(--c-gray-900); margin: 0 0 0.75rem 0; }
.staff-info-body { color: var(--c-gray-600); font-size: 0.9375rem; line-height: 1.7; }
.staff-info-body p { margin: 0 0 0.75rem 0; }
.staff-info-body p:last-child { margin-bottom: 0; }
.staff-info-body ul { margin: 0 0 0.75rem 0; padding-left: 1.25rem; }
.staff-info-body li { margin-bottom: 0.375rem; }
.staff-subject-heading { font-size: var(--font-size-xs); font-weight: 700; color: var(--c-gray-400); text-transform: uppercase; letter-spacing: 0.1em; margin: 2rem 0 1rem 0; }
.staff-subject-heading:first-child { margin-top: 0; }

.staff-two-col { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.staff-ticket-form { background-color: var(--c-white); border: 1px solid var(--c-gray-200); border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 25px -5px rgba(var(--c-black-rgb), 0.1), 0 20px 25px -5px rgba(var(--c-gray-100-rgb), 0.5); display: flex; flex-direction: column; gap: 1.5rem; }
.staff-form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.staff-form-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 3rem 1.5rem; color: var(--c-gray-600); }
.staff-form-success-icon { width: 3rem; height: 3rem; color: var(--c-green-600); }

.staff-cta-card { display: flex; flex-direction: column; justify-content: space-between; background-color: var(--c-gray-900); color: var(--c-white); padding: 2rem; border-radius: 1rem; box-shadow: 0 8px 30px rgba(var(--c-black-rgb), 0.08); margin-bottom: 2.5rem; }
.staff-cta-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.5rem 0; }
.staff-cta-desc { color: var(--c-gray-400); font-size: 0.9375rem; margin-bottom: 1rem; max-width: 42rem; }
.staff-cta-btn { background-color: var(--c-blue-600); color: var(--c-white); font-weight: 600; padding: 0.65rem 1.25rem; border-radius: 0.75rem; text-decoration: none; display: inline-block; }
.staff-cta-btn:hover { background-color: var(--c-blue-700); transform: translateY(-1px); }

.staff-quick-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }
.staff-quick-nav-link { font-size: var(--font-size-xs); font-weight: 700; color: var(--c-blue-600); background-color: var(--c-blue-50); padding: 0.5rem 1rem; border-radius: 9999px; text-decoration: none; }
.staff-quick-nav-link:hover { background-color: var(--c-blue-100); }

.staff-callout { display: flex; align-items: flex-start; gap: 1.25rem; background-color: var(--c-amber-50); border: 1px solid #fcd34d; border-radius: 1.5rem; padding: 1.5rem; margin-bottom: 2.5rem; }
.staff-callout-icon { flex-shrink: 0; color: var(--c-amber-600); font-size: 1.5rem; line-height: 1; }
.staff-callout-title { font-size: 0.875rem; font-weight: 900; color: var(--c-amber-900); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.375rem; }
.staff-callout-text { font-size: 0.875rem; color: var(--c-amber-900); line-height: 1.625; }

.staff-section { margin-bottom: 3rem; scroll-margin-top: 2rem; }
.staff-section-heading { display: flex; align-items: center; gap: 0.75rem; font-size: 1.5rem; font-weight: 900; color: var(--c-gray-900); margin: 0 0 0.5rem 0; }
.staff-section-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }
.staff-section-desc { color: var(--c-gray-500); margin: 0 0 1.5rem 0; }

.staff-accordion-item { background-color: var(--c-white); border: 1px solid var(--c-gray-100); border-radius: 0.75rem; overflow: hidden; }
.staff-accordion-item + .staff-accordion-item { margin-top: 0.75rem; }
.staff-accordion-summary { list-style: none; cursor: pointer; padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--c-gray-900); }
.staff-accordion-summary::-webkit-details-marker { display: none; }
.staff-accordion-summary-meta { color: var(--c-gray-400); font-size: var(--font-size-xs); font-weight: 500; margin-top: 0.25rem; }
.staff-accordion-arrow { transition: transform 200ms; color: var(--c-gray-300); flex-shrink: 0; margin-left: 1rem; }
.staff-accordion-item[open] .staff-accordion-arrow { transform: rotate(90deg); }
.staff-accordion-body { padding: 0 1.25rem 1.25rem 1.25rem; border-top: 1px solid var(--c-gray-100); padding-top: 1.25rem; }
.staff-accordion-download { display: inline-block; margin-top: 1rem; padding: 0.6rem 1.25rem; background-color: var(--c-blue-600); color: var(--c-white); border-radius: 0.5rem; font-weight: 700; font-size: var(--font-size-xs); text-decoration: none; }
.staff-accordion-download:hover { background-color: var(--c-blue-700); }

.staff-contact-card { background-color: var(--c-gray-50); border-radius: 1rem; padding: 2rem; text-align: center; }

.staff-search-wrap { position: relative; margin-bottom: 2rem; }
.staff-search-input { width: 100%; padding: 0.875rem 1rem 0.875rem 2.75rem; border: 1px solid var(--c-gray-200); border-radius: 0.75rem; font-size: 0.9375rem; color: var(--c-gray-900); background-color: var(--c-white); }
.staff-search-input:focus { outline: none; border-color: var(--c-blue-600); }
.staff-search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--c-gray-300); pointer-events: none; }
.staff-no-results { display: none; text-align: center; color: var(--c-gray-400); padding: 2rem; }
.staff-no-results.is-visible { display: block; }

.staff-timeline { display: flex; flex-direction: column; }
.staff-timeline-item { display: flex; gap: 1.25rem; padding-bottom: 1.75rem; position: relative; }
.staff-timeline-item:last-child { padding-bottom: 0; }
.staff-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 0.6875rem; top: 1.75rem; bottom: 0; width: 2px; background-color: var(--c-gray-100); }
.staff-timeline-marker { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background-color: var(--c-blue-600); color: var(--c-white); font-size: 0.625rem; font-weight: 900; display: flex; align-items: center; justify-content: center; z-index: 1; }
.staff-timeline-label { font-size: var(--font-size-xs); font-weight: 700; color: var(--c-blue-600); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.staff-timeline-title { font-weight: 700; color: var(--c-gray-900); margin-bottom: 0.25rem; }
.staff-timeline-desc { color: var(--c-gray-500); font-size: 0.875rem; line-height: 1.6; }

.staff-inquiry-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.staff-inquiry-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; background-color: var(--c-white); border: 1px solid var(--c-gray-100); border-radius: 0.75rem; padding: 1rem 1.25rem; }
.staff-inquiry-subject { font-weight: 700; color: var(--c-gray-900); font-size: 0.9375rem; }
.staff-inquiry-message { color: var(--c-gray-500); font-size: var(--font-size-xs); margin-top: 0.25rem; }
.staff-inquiry-date { color: var(--c-gray-400); font-size: var(--font-size-xs); margin-top: 0.375rem; }
.staff-status-pill { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.625rem; border-radius: 9999px; white-space: nowrap; }
.staff-status-open { background-color: var(--c-amber-50); color: #92400e; }
.staff-status-in_progress { background-color: var(--c-blue-50); color: var(--c-blue-600); }
.staff-status-resolved { background-color: #ecfdf5; color: #065f46; }

/* ============ AUTH PAGES (login) ============== */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: linear-gradient(to bottom, var(--c-gray-50) 0%, var(--c-gray-50) 60%, transparent 100%); }
.auth-card { width: 100%; max-width: 26rem; background-color: var(--c-white); border: 1px solid var(--c-gray-200); border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 20px 25px -5px rgba(var(--c-black-rgb), 0.1), 0 20px 25px -5px rgba(var(--c-gray-100-rgb), 0.5); }
.auth-title { font-size: 1.875rem; font-weight: 900; color: var(--c-gray-900); letter-spacing: -0.025em; line-height: 1.25; margin: 0 0 0.5rem 0; }
.auth-subtitle { color: var(--c-gray-500); font-size: 0.9375rem; margin: 0 0 2rem 0; }
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-signed-in-email { color: var(--c-gray-700); font-weight: 600; margin-bottom: 1.5rem; }
.auth-switcher-label { font-size: var(--font-size-xs); color: var(--c-gray-400); margin: 1.5rem 0 0.75rem 0; }
.auth-switcher-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.auth-switcher-btn { font-size: var(--font-size-xs); font-weight: 700; color: var(--c-gray-700); background-color: var(--c-gray-50); border: 1px solid var(--c-gray-200); padding: 0.5rem 1rem; border-radius: 9999px; text-decoration: none; transition: all 150ms; }
.auth-switcher-btn:hover { border-color: var(--c-blue-600); color: var(--c-blue-600); }
.auth-logout-link { display: inline-block; margin-top: 1.5rem; font-size: var(--font-size-xs); color: var(--c-gray-400); text-decoration: none; }
.auth-logout-link:hover { color: var(--c-gray-600); text-decoration: underline; }
.auth-footer { margin-top: 2rem; text-align: center; font-size: var(--font-size-xs); color: var(--c-gray-300); }

/* ============ ADMIN TABLES ============== */
.admin-table-wrap { background-color: var(--c-white); border: 1px solid var(--c-gray-100); border-radius: 1rem; overflow: hidden; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-table th { text-align: left; font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-gray-400); background-color: var(--c-gray-50); padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--c-gray-100); white-space: nowrap; }
.admin-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--c-gray-100); vertical-align: middle; color: var(--c-gray-700); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.is-deleted { opacity: 0.5; background-color: var(--c-gray-50); }
.admin-role-pill { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 9999px; background-color: var(--c-gray-100); color: var(--c-gray-700); }
.admin-service-roles-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.admin-service-roles-form select { font-size: var(--font-size-xs); padding: 0.35rem 0.5rem; border: 1px solid var(--c-gray-200); border-radius: 0.5rem; background-color: var(--c-white); color: var(--c-gray-700); }
.admin-inline-btn { font-size: var(--font-size-xs); font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--c-gray-200); background-color: var(--c-white); color: var(--c-gray-700); cursor: pointer; }
.admin-inline-btn:hover { border-color: var(--c-blue-600); color: var(--c-blue-600); }
.admin-inline-btn-danger:hover { border-color: var(--c-red-500); color: var(--c-red-700); }


/* ============ HANDBOOK / DOCUMENT LISTS ============== */
.handbook-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.handbook-card{display:flex;align-items:center;gap:1rem;background:var(--c-white);border:1px solid var(--c-gray-100);border-radius:.75rem;padding:.875rem 1rem;text-decoration:none;color:inherit;transition:box-shadow .16s,transform .16s,border-color .16s;overflow:hidden;min-height:64px}
.handbook-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(var(--c-black-rgb),.04);border-color:var(--c-blue-200)}
.handbook-icon{width:2.5rem;height:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;background:var(--c-gray-50);border-radius:.5rem;color:var(--c-blue-600);flex-shrink:0;font-size:1.125rem}
.handbook-card-main{min-width:0;overflow:hidden}
.handbook-title{font-weight:700;color:var(--c-gray-900);line-height:1.1;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.handbook-desc{color:var(--c-gray-500);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.handbook-download-label{margin-left:.5rem;flex-shrink:0;font-size:.8125rem;font-weight:700;color:var(--c-gray-600)}
@media(max-width:420px){.handbook-card{align-items:flex-start;gap:.5rem;padding:.75rem}.handbook-icon{width:2rem;height:2rem;font-size:1rem}.handbook-title,.handbook-desc{white-space:normal}}



/* missing utilities & small components referenced by InternalServices pages (flattened) */
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-05{gap:.5rem}
.gap-1{gap:1rem}

/* CTA used in forms/noscript fallbacks */
.staff-cta-btn{display:inline-block;padding:.45rem .75rem;border-radius:.6rem;background:var(--c-blue-600);color:#fff;font-weight:700;border:none;cursor:pointer;text-decoration:none}
.staff-cta-btn:hover{background:var(--c-blue-700)}

/* HR search / details helpers */
.hr-searchable-item{display:block}
.hr-searchable-item.is-hidden{display:none!important}
.hr-searchable-section.is-hidden{display:none!important}

/* Small helpers for accordion/search UI */
.staff-accordion-item{transition:box-shadow .12s,transform .12s}
.staff-accordion-item.is-hidden{display:none!important}

/* Helpers for aligning controls in list items (used by HR admin list) */
.align-center{align-items:center;display:flex}
.flex-column{display:flex;flex-direction:column}

/* Minor responsive tweaks used by handbook/cta lists */
@media(max-width:520px){.parents-grid,.staff-grid,.handbook-list{grid-template-columns:1fr!important}.portal-button-card{padding:1rem}.portal-button-description{font-size:.9rem}}

.nav-grid{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));  gap: 1rem; margin-bottom: 1rem;
}

/* Fallbacks / small utilities */
.is-hidden{display:none!important}
.is-visible{display:block!important}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small-label{font-size:.8125rem;color:var(--c-gray-500);font-weight:700}

/* ensure search icon + input align nicely if referenced together */
.staff-search-wrap{position:relative}
.staff-search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--c-gray-300)}
.staff-search-input{padding-left:2.5rem}

/* Small card/action refinements */
.portal-button-card.small{padding:.875rem}
.handbook-card.small{padding:.625rem}

/* status pills small variant */
.staff-status-pill.small{font-size:.625rem;padding:.2rem .5rem}

/* ensure callouts can be compacted when needed */
.staff-callout.compact{padding:.75rem;gap:.5rem;border-radius:.75rem}



/* Semantic classes replacing utility-class combos */

/* HR inquiry list row (replaces .staff-inquiry-item.align-center) */
.inquiry-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* Controls on each inquiry (select + buttons) */
.inquiry-controls{display:inline-flex;align-items:center;gap:.5rem}

/* Page hero row for header + action button (replaces flex-between) */
.staff-hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}

/* Form input prefix group (email prefix + suffix) */
.input-prefix-group{display:flex;align-items:stretch}
.input-prefix{border-top-right-radius:0;border-bottom-right-radius:0;flex:1}
.email-suffix{display:flex;align-items:center;background-color:var(--c-gray-50);padding:0 .875rem;border:1px solid var(--c-gray-200);border-left:none;border-radius:0 .75rem .75rem 0;white-space:nowrap;font-size:var(--font-size-xs);color:var(--c-gray-500)}

/* Compact variants and small helpers */
.compact-callout{padding:.75rem;gap:.5rem;border-radius:.75rem}
.inline-actions{display:inline-flex;align-items:center;gap:.5rem}
.form-inline{display:flex;align-items:center;gap:.5rem}

/* Ensure search input spacing is consistent with semantic wrapper */
.staff-search-wrap{position:relative}
.staff-search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--c-gray-300)}
.staff-search-input{padding-left:2.5rem}

/* small status pill size */
.staff-status-pill--sm{font-size:.625rem;padding:.2rem .5rem}
/* ============ EMPLOYEE SELF-SERVICE (ESS) ============== */
.ess-paystub-list{display:flex;flex-direction:column;gap:.75rem}
.ess-paystub-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background-color:var(--c-white);border:1px solid var(--c-gray-100);border-radius:.75rem;padding:1rem 1.25rem;text-decoration:none}
.ess-paystub-row:hover{border-color:var(--c-gray-200)}
.ess-paystub-period{display:flex;flex-direction:column}
.ess-paystub-date{font-weight:700;color:var(--c-gray-900);font-size:.9375rem}
.ess-paystub-range{color:var(--c-gray-400);font-size:var(--font-size-xs);margin-top:.125rem}
.ess-paystub-amounts{display:flex;flex-direction:column;align-items:flex-end}
.ess-paystub-net{font-weight:700;color:var(--c-gray-900);font-size:.9375rem}
.ess-paystub-gross{color:var(--c-gray-400);font-size:var(--font-size-xs);margin-top:.125rem}
.ess-paystub-download{flex-shrink:0;font-weight:700;color:var(--c-blue-600);font-size:var(--font-size-xs);margin-left:1rem}
.ess-year-filter{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.ess-year-filter .field-label{margin:0}


.ess-modal { padding: 2rem; width: 100%; border-bottom: 0; border-right: 1px solid var(--c-gray-100); 
            display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; background-color: rgba(var(--c-gray-50-rgb), 0.5); }