/* School 360 portal bridge split: Staff HR portal experience, responsive, accessibility, and interaction polish.
   Source: assets/css/portal.css before UI/IX Tier 3 Phase 12.3. */

/* ============================================================================
 * HR portal module-owned card rules
 * Migrated from assets/css/card-system.css.
 *
 * Scope: staff portal HR card modifiers remain valid, but their HR-specific
 * styling now belongs to the portal HR CSS bundle instead of the core card
 * system contract. PHP/markup class names are intentionally unchanged.
 * ============================================================================ */

.s360-hr-portal-experience .s360-ui-card--hr-portal,
.s360-hr-portal-experience .s360-ui-card[data-s360-hr-card="portal"],
.s360-hr-portal-experience .s360-ui-stat-card--hr-portal,
.s360-hr-portal-experience .s360-ui-stat-card--hr-portals{
  box-sizing:border-box;
  min-width:0;
}

.s360-hr-portal-experience .s360-ui-card--hr-portal,
.s360-hr-portal-experience .s360-ui-card[data-s360-hr-card="portal"]{
  padding:var(--s360-card-core-padding,var(--s360-component-card-padding));
}

/* HR UI/UX Phase 8: Staff HR Portal Experience */
.s360-hr-portal-experience{max-width:1180px;margin:0 auto;display:grid;gap:20px;color:var(--s360-color-text,var(--s360-color-primary-exact-1f2937))}
.s360-hr-portal-notice{border-radius:12px;padding:12px 14px}.s360-hr-portal-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:24px;border:1px solid var(--s360-color-border,var(--s360-color-border-exact-d8dee9));border-radius:22px;background:linear-gradient(135deg,var(--s360-color-surface,var(--s360-color-white)),var(--s360-color-surface-alt,var(--s360-color-bg-subtle)));box-shadow:0 14px 32px rgba(15,23,42,.08)}
.s360-hr-portal-avatar{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;font-size:22px;font-weight:800;letter-spacing:.04em;color:var(--s360-color-primary,var(--s360-color-primary-exact-2563eb));background:color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 12%,var(--s360-color-white));border:1px solid color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 24%,var(--s360-color-white))}
.s360-hr-portal-eyebrow{margin:0 0 4px;font-size:12px;line-height:1.3;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--s360-color-muted,var(--s360-color-text-tertiary))}.s360-hr-portal-hero h2,.s360-hr-portal-section h3{margin:0;color:var(--s360-color-heading,var(--s360-color-text-strong))}.s360-hr-portal-hero-copy>p:not(.s360-hr-portal-eyebrow){margin:6px 0 0;color:var(--s360-color-muted,var(--s360-color-text-tertiary))}
.s360-hr-portal-meta,.s360-hr-portal-quick-actions,.s360-hr-portal-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.s360-hr-portal-meta{margin-top:12px}.s360-hr-portal-meta>span:not(.s360-hr-portal-badge){display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:999px;background:var(--s360-color-surface-alt,var(--s360-color-bg-subtle));color:var(--s360-color-muted,var(--s360-color-text-tertiary));border:1px solid var(--s360-color-border,var(--s360-color-border-subtle));font-size:12px;font-weight:700}.s360-hr-portal-quick-actions{justify-content:flex-end}
.s360-hr-portal-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-radius:18px;border:1px solid var(--s360-color-border,var(--s360-color-border-subtle));background:var(--s360-color-surface,var(--s360-color-white));box-shadow:0 8px 22px rgba(15,23,42,.05)}.s360-hr-portal-tabs a{display:inline-flex;align-items:center;min-height:34px;padding:7px 13px;border-radius:999px;text-decoration:none;color:var(--s360-color-muted,var(--s360-color-text-tertiary));font-weight:800;font-size:13px}.s360-hr-portal-tabs a:hover,.s360-hr-portal-tabs a:focus{color:var(--s360-color-primary,var(--s360-color-primary-exact-2563eb));background:color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 10%,var(--s360-color-white));outline:none}
.s360-ui-stat-card--hr-portals{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.s360-ui-stat-card--hr-portal,:where(.s360-ui-card--hr-portal,[data-s360-hr-card="portal"]),.s360-hr-portal-mini-grid>div{border:1px solid var(--s360-color-border,var(--s360-color-border-subtle));border-radius:18px;background:var(--s360-color-surface,var(--s360-color-white));box-shadow:0 8px 22px rgba(15,23,42,.05)}.s360-ui-stat-card--hr-portal{padding:16px}.s360-ui-stat-card--hr-portal span,.s360-hr-portal-mini-grid span{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--s360-color-muted,var(--s360-color-text-tertiary))}.s360-ui-stat-card--hr-portal strong,.s360-hr-portal-mini-grid strong{display:block;margin-top:6px;font-size:28px;line-height:1;color:var(--s360-color-heading,var(--s360-color-text-strong))}.s360-ui-stat-card--hr-portal small{display:block;margin-top:var(--s360-space-xs, 8px);color:var(--s360-color-muted,var(--s360-color-text-tertiary))}
.s360-hr-portal-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);gap:20px;align-items:start}.s360-hr-portal-main,.s360-hr-portal-side{display:grid;gap:18px}:where(.s360-ui-card--hr-portal,[data-s360-hr-card="portal"]){padding:20px}.s360-hr-portal-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.s360-hr-portal-section-note{color:var(--s360-color-muted,var(--s360-color-text-tertiary));font-size:13px;font-weight:700}
.s360-hr-portal-form{display:grid;gap:14px}.s360-hr-portal-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.s360-hr-portal-form label{display:grid;gap:6px;font-weight:800;color:var(--s360-color-heading,var(--s360-color-text-strong))}.s360-hr-portal-form label span{font-size:12px;color:var(--s360-color-muted,var(--s360-color-text-tertiary));text-transform:uppercase;letter-spacing:.05em}.s360-hr-portal-form input,.s360-hr-portal-form select,.s360-hr-portal-form textarea{width:100%;max-width:100%;border-radius:12px;border:1px solid var(--s360-color-border,var(--s360-color-border-exact-d8dee9));min-height:40px}.s360-hr-portal-form textarea{min-height:92px}.s360-hr-portal-form-wide{grid-column:1/-1}
.s360-hr-portal-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--s360-color-border,var(--s360-color-border-subtle))}.s360-hr-portal-table{border:0;margin:0}.s360-hr-portal-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--s360-color-muted,var(--s360-color-text-tertiary))}.s360-hr-portal-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.s360-hr-portal-mini-grid>div{padding:14px}
.s360-hr-portal-list{display:grid;gap:10px}.s360-hr-portal-list-spaced{margin-top:12px;padding-top:12px;border-top:1px solid var(--s360-color-border,var(--s360-color-border-subtle))}.s360-hr-portal-list-item{display:grid;gap:6px;padding:12px;border-radius:14px;background:var(--s360-color-surface-alt,var(--s360-color-bg-subtle));border:1px solid var(--s360-color-border,var(--s360-color-border-subtle))}.s360-hr-portal-list-item strong{color:var(--s360-color-heading,var(--s360-color-text-strong))}.s360-hr-portal-list-item span,.s360-hr-portal-list-item p,.s360-hr-portal-empty{margin:0;color:var(--s360-color-muted,var(--s360-color-text-tertiary))}
.s360-hr-portal-badge{display:inline-flex;align-items:center;width:fit-content;min-height:24px;padding:3px 9px;border-radius:999px;background:var(--s360-color-surface-alt,var(--s360-color-bg-subtle));border:1px solid var(--s360-color-border,var(--s360-color-border-subtle));color:var(--s360-color-muted,var(--s360-color-text-tertiary));font-size:12px;font-weight:800;line-height:1.2}.s360-hr-portal-badge-active,.s360-hr-portal-badge-approved,.s360-hr-portal-badge-ready,.s360-hr-portal-badge-signed,.s360-hr-portal-badge-completed,.s360-hr-portal-badge-closed,.s360-hr-portal-badge-employee-acknowledged{background:var(--s360-color-success-surface);border-color:var(--s360-color-border-success);color:var(--s360-color-success-chip)}.s360-hr-portal-badge-pending,.s360-hr-portal-badge-draft,.s360-hr-portal-badge-pending-signature,.s360-hr-portal-badge-manager-submitted,.s360-hr-portal-badge-not-ready{background:var(--s360-color-warning-bg);border-color:var(--s360-color-border-warning);color:var(--s360-color-warning-strong)}.s360-hr-portal-badge-rejected,.s360-hr-portal-badge-expired,.s360-hr-portal-badge-cancelled,.s360-hr-portal-badge-terminated{background:var(--s360-color-danger-bg);border-color:var(--s360-color-border-danger);color:var(--s360-color-danger-strong)}
@media (max-width:1080px){.s360-ui-stat-card--hr-portals{grid-template-columns:repeat(3,minmax(0,1fr))}.s360-hr-portal-layout{grid-template-columns:1fr}}@media (max-width:720px){.s360-hr-portal-hero{grid-template-columns:1fr}.s360-hr-portal-quick-actions{justify-content:flex-start}.s360-ui-stat-card--hr-portals,.s360-hr-portal-form-grid,.s360-hr-portal-mini-grid{grid-template-columns:1fr}.s360-hr-portal-section-head{flex-direction:column}}

/* HR UI/UX Phase 9: Staff Portal responsive, accessibility & polish QA */
.s360-hr-portal-experience * { box-sizing: border-box; }
.s360-hr-portal-experience :where(a,button,input,select,textarea,summary,.s360-ui-button):focus-visible,
.s360-hr-portal-experience :where(a,button,input,select,textarea,summary,.s360-ui-button):focus {
  outline: 3px solid color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 32%,transparent);
  outline-offset: 2px;
  box-shadow: none;
}
.s360-hr-portal-tabs { overflow-x: auto; scrollbar-width: thin; }
.s360-hr-portal-tabs a { flex: 0 0 auto; }
.s360-hr-portal-tabs a[aria-current="page"] {
  color: var(--s360-color-primary,var(--s360-color-primary-exact-2563eb));
  background: color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 10%,var(--s360-color-white));
}
.s360-hr-portal-form input,
.s360-hr-portal-form select,
.s360-hr-portal-form textarea,
.s360-hr-portal-experience .s360-ui-button,
.s360-hr-portal-experience button {
  font-size: 16px;
}
.s360-hr-portal-empty,
.s360-hr-portal-table td[colspan] {
  color: var(--s360-color-muted,var(--s360-color-text-tertiary));
  font-weight: 600;
}
@media (max-width: 860px) {
  .s360-hr-portal-tabs {
    flex-wrap: nowrap;
    padding-bottom: 12px;
  }
  .s360-hr-portal-table { min-width: 680px; }
}
@media (max-width: 600px) {
  .s360-hr-portal-experience { gap: 14px; }
  .s360-hr-portal-hero,
  :where(.s360-ui-card--hr-portal,[data-s360-hr-card="portal"]),
  .s360-ui-stat-card--hr-portal,
  .s360-hr-portal-mini-grid > div {
    border-radius: 16px;
    padding: 14px;
  }
  .s360-hr-portal-avatar { width: 58px; height: 58px; border-radius: 18px; }
  .s360-hr-portal-hero h2 { font-size: 24px; line-height: 1.18; }
  .s360-hr-portal-quick-actions .s360-ui-button,
  .s360-hr-portal-form-actions .s360-ui-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
@media print {
  .s360-hr-portal-tabs,
  .s360-hr-portal-quick-actions,
  .s360-hr-portal-form-actions {
    display: none ;
  }
  .s360-hr-portal-experience,
  .s360-hr-portal-hero,
  :where(.s360-ui-card--hr-portal,[data-s360-hr-card="portal"]),
  .s360-ui-stat-card--hr-portal {
    box-shadow: none ;
    border-color: var(--s360-color-border-exact-ddd) ;
  }
}

/* HR UI/UX Phase 10A: Staff Portal interaction polish */
:where(.s360-ui-card--hr-portal,[data-s360-hr-card="portal"]),
.s360-ui-stat-card--hr-portal,
.s360-hr-portal-list-item {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:where(.s360-ui-card--hr-portal,[data-s360-hr-card="portal"]):hover,
.s360-ui-stat-card--hr-portal:hover,
.s360-hr-portal-list-item:hover {
  border-color: color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 24%,var(--s360-color-border,var(--s360-color-border-subtle)));
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}
.s360-hr-portal-empty,
.s360-hr-portal-table td[colspan] {
  background: linear-gradient(135deg,var(--s360-color-surface-alt,var(--s360-color-bg-subtle)),var(--s360-color-white));
  border: 1px dashed var(--s360-color-border,var(--s360-color-border-subtle));
  border-radius: 14px;
  display: block;
  margin: 6px 0;
  padding: 14px;
  text-align: center;
}
.s360-hr-portal-table th {
  background: var(--s360-color-surface-alt,var(--s360-color-bg-subtle));
  position: sticky;
  top: 0;
  z-index: 2;
}
.s360-hr-portal-experience .s360-ui-button {
  border-radius: 999px;
  font-weight: 800;
}

/* HR UI/UX Phase 10C: Staff Portal consistency & QA hardening */
.s360-hr-portal-experience {
  scroll-behavior: smooth;
}
.s360-hr-portal-experience :target {
  scroll-margin-top: 22px;
}
.s360-hr-portal-table-wrap {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.s360-hr-portal-table td,
.s360-hr-portal-table th {
  vertical-align: middle;
}
.s360-hr-portal-tabs a:focus-visible,
:where(.s360-ui-card--hr-portal,[data-s360-hr-card="portal"]):focus-within,
.s360-hr-portal-list-item:focus-within {
  outline: 3px solid color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 28%,transparent);
  outline-offset: 3px;
}
:where(.s360-ui-card--hr-portal,[data-s360-hr-card="portal"]):focus-within,
.s360-hr-portal-list-item:focus-within {
  border-color: color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 28%,var(--s360-color-border,var(--s360-color-border-subtle)));
}
.s360-hr-portal-form input:invalid,
.s360-hr-portal-form select:invalid,
.s360-hr-portal-form textarea:invalid {
  box-shadow: none;
}
.s360-hr-portal-badge {
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .s360-hr-portal-experience,
  .s360-hr-portal-experience *,
  .s360-hr-portal-experience *::before,
  .s360-hr-portal-experience *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width: 480px) {
  .s360-hr-portal-tabs {
    margin-left: -4px;
    margin-right: -4px;
  }
  .s360-hr-portal-tabs a {
    min-height: 38px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .s360-hr-portal-table { min-width: 620px; }
}


/* UI Phase 2A — HR staff portal navigation bridge to shared School 360 tabs.
   Scope: class/token alignment only. No workflow, permission, routing or JS behavior changes. */
.s360-hr-portal-tabs.s360-ui-tabs {
  margin: 0;
}

.s360-hr-portal-tabs .s360-ui-tabs__tab {
  border: 0;
  box-shadow: none;
  flex: 0 0 auto;
  text-decoration: none;
}

.s360-hr-portal-tabs .s360-ui-tabs__tab.is-active,
.s360-hr-portal-tabs .s360-ui-tabs__tab[aria-current="page"] {
  color: var(--s360-color-primary,var(--s360-color-primary-exact-2563eb));
  background: color-mix(in srgb,var(--s360-color-primary,var(--s360-color-primary-exact-2563eb)) 10%,var(--s360-color-white));
}

/* UI Phase 2C — HR staff portal navigation visual alignment with shared School 360 tabs.
   Scope: HR portal tab visual parity only. No workflow, permission, routing, JS or DB behavior changes. */
.s360-hr-portal-tabs.s360-ui-tabs__nav {
  align-items: center;
  background: linear-gradient(180deg, var(--s360-color-bg-subtle, #f8fafc) 0%, var(--s360-color-surface-raised, #fff) 100%);
  border: 1px solid var(--s360-color-border-muted, var(--s360-color-border, #dcdcde));
  border-radius: var(--s360-radius-2xl, 16px);
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--s360-layout-grid-gap, 16px);
  padding: 4px;
}

.s360-hr-portal-tabs.s360-ui-tabs__nav .s360-ui-tabs__tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--s360-radius-lg, 10px);
  box-shadow: none;
  color: var(--s360-color-text-secondary, #4b5563);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: auto;
  padding: 10px 14px;
  text-decoration: none;
  transition: all .15s ease;
}

.s360-hr-portal-tabs.s360-ui-tabs__nav .s360-ui-tabs__tab:hover,
.s360-hr-portal-tabs.s360-ui-tabs__nav .s360-ui-tabs__tab:focus {
  background: var(--s360-color-primary-soft, #eff6ff);
  color: var(--s360-color-primary-hover-strong, #1d4ed8);
  outline: none;
}

.s360-hr-portal-tabs.s360-ui-tabs__nav .s360-ui-tabs__tab.is-active,
.s360-hr-portal-tabs.s360-ui-tabs__nav .s360-ui-tabs__tab[aria-current="page"] {
  background: var(--s360-color-surface-raised, #fff);
  box-shadow: var(--s360-shadow-floating, 0 10px 30px rgba(15, 23, 42, .08));
  color: var(--s360-color-text-heading, #111827);
}

.s360-hr-portal-tabs.s360-ui-tabs__nav .s360-ui-tabs__tab:focus-visible {
  box-shadow: 0 0 0 2px var(--s360-color-white, #fff), 0 0 0 4px var(--s360-color-primary, #2563eb);
  outline: none;
}

@media (max-width: 782px) {
  .s360-hr-portal-tabs.s360-ui-tabs__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}