/*
  HELEN & SONS CORPORATE COLORS
  Primary: #000040  |  White: #FFFFFF
  Dark = navy canvas + white text.  Light = white canvas + navy text.
  Intermediate tints and translucent borders are derived from these colors.
  This file is last so it covers legacy CSS from earlier demos.
*/
:root {
  --brand-navy:#000040;
  --brand-white:#FFFFFF;
  --brand-line-dark:rgba(255,255,255,.16);
  --brand-line-light:rgba(0,0,64,.16);
}
html[data-theme="dark"] {
  color-scheme:dark;
  --navy:#FFFFFF;
  --dark:#000040;
  --mid:#191958;
  --ink:#FFFFFF;
  --muted:#C4C4D5;
  --bg:#000040;
  --line:rgba(255,255,255,.18);
  --gold:#FFFFFF;
  --green:#FFFFFF;
  --white:#101050;
  --accent:#FFFFFF;
  --lavender:#FFFFFF;
  --border:rgba(255,255,255,.18);
  --sub:#C4C4D5;
}
html[data-theme="light"] {
  color-scheme:light;
  --navy:#000040;
  --dark:#000040;
  --mid:#35356A;
  --ink:#000040;
  --muted:#55557A;
  --bg:#FFFFFF;
  --line:rgba(0,0,64,.18);
  --gold:#000040;
  --green:#000040;
  --white:#FFFFFF;
  --accent:#000040;
  --lavender:#000040;
  --border:rgba(0,0,64,.16);
  --sub:#55557A;
}
html[data-theme="dark"],html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell {background:#000040;color:#FFFFFF}
html[data-theme="light"],html[data-theme="light"] body,
html[data-theme="light"] .app-shell {background:#FFFFFF;color:#000040}
:where(button,input,select,textarea,a):focus-visible {outline:2px solid currentColor;outline-offset:3px}

/* Login splash: no longer lavender. Logo remains original and undistorted. */
html[data-theme="dark"] .auth-brand,html[data-theme="light"] .auth-brand {background:#000040;border-right:1px solid rgba(255,255,255,.15)}
html .auth-brand .brand-wordmark,html .auth-brand .brand-message h1 {color:#FFFFFF}
html .auth-brand .brand-wordmark span,html .auth-brand .brand-message h1 em {color:#FFFFFF}
html .auth-brand :is(.eyebrow,.brand-bullet,.brand-message p,.brand-bullet span,.brand-wordmark small) {color:#D8D8E4}
html .auth-brand .brand-shape{border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .auth-form-panel {background:#090947;color:#FFFFFF}
html[data-theme="light"] .auth-form-panel {background:#FFFFFF;color:#000040}
html[data-theme="dark"] .auth-content :is(h2,label){color:#FFFFFF}
html[data-theme="light"] .auth-content :is(h2,label){color:#000040}
html[data-theme="dark"] .auth-content :is(.subheading,.auth-footer,.demo-entry small){color:#C4C4D5}
html[data-theme="light"] .auth-content :is(.subheading,.auth-footer,.demo-entry small){color:#55557A}
html .eyebrow,html .panel-kicker,html .panel-eyebrow {color:var(--accent)}
html[data-theme="dark"] .auth-brand .eyebrow {color:#FFFFFF}

/* Brand-first buttons — navy on white, white on navy. */
html[data-theme="dark"] :is(.btn-primary,.btn-success,.btn-approve),
html[data-theme="dark"] :is(.btn-primary,.btn-success,.btn-approve):hover:not(:disabled) {
  background:#FFFFFF;color:#000040;border:1px solid #FFFFFF;box-shadow:none;
}
html[data-theme="light"] :is(.btn-primary,.btn-success,.btn-approve),
html[data-theme="light"] :is(.btn-primary,.btn-success,.btn-approve):hover:not(:disabled) {
  background:#000040;color:#FFFFFF;border:1px solid #000040;box-shadow:none;
}
html[data-theme="dark"] :is(.btn-outline,.btn-demo,.btn-dark,.btn-danger,.btn-danger-outline),
html[data-theme="dark"] :is(.btn-outline,.btn-demo,.btn-dark,.btn-danger,.btn-danger-outline):hover:not(:disabled) {
  background:#171755;color:#FFFFFF;border:1px solid rgba(255,255,255,.30);
}
html[data-theme="light"] :is(.btn-outline,.btn-demo,.btn-dark,.btn-danger,.btn-danger-outline),
html[data-theme="light"] :is(.btn-outline,.btn-demo,.btn-dark,.btn-danger,.btn-danger-outline):hover:not(:disabled) {
  background:#FFFFFF;color:#000040;border:1px solid rgba(0,0,64,.34);
}
html[data-theme="light"] :is(.btn-outline,.btn-demo,.btn-dark,.btn-danger-outline):hover:not(:disabled){background:#F0F0F5}
html[data-theme="dark"] :is(.text-link,.back-link,.password-toggle,.table-action){color:#FFFFFF}
html[data-theme="light"] :is(.text-link,.back-link,.password-toggle,.table-action){color:#000040}

/* Theme selector visibly reflects corporate navy/white contrast. */
html[data-theme="dark"] .theme-switch{background:#1C1C5A;border-color:rgba(255,255,255,.23);box-shadow:none}
html[data-theme="dark"] .theme-option{color:#DEDEEC}
html[data-theme="dark"] .theme-option:hover{background:#292967;color:#FFFFFF}
html[data-theme="dark"] .theme-option[aria-pressed="true"]{background:#FFFFFF;color:#000040;box-shadow:none}
html[data-theme="light"] .theme-switch{background:#F0F0F5;border-color:rgba(0,0,64,.20);box-shadow:none}
html[data-theme="light"] .theme-option{color:#000040}
html[data-theme="light"] .theme-option:hover{background:#E1E1EC;color:#000040}
html[data-theme="light"] .theme-option[aria-pressed="true"]{background:#000040;color:#FFFFFF;box-shadow:none}

/* Navigation and top toolbar. */
html[data-theme="dark"] :is(.sidebar,.topbar,.workspace-footer){background:#000040;border-color:rgba(255,255,255,.18);color:#FFFFFF}
html[data-theme="light"] :is(.sidebar,.topbar,.workspace-footer){background:#FFFFFF;border-color:rgba(0,0,64,.17);color:#000040}
html[data-theme="dark"] .sidebar .brand-wordmark{color:#FFFFFF}
html[data-theme="light"] .sidebar .brand-wordmark{color:#000040}
html[data-theme="dark"] .sidebar .brand-wordmark span{color:#FFFFFF}
html[data-theme="light"] .sidebar .brand-wordmark span{color:#000040}
html[data-theme="dark"] .nav-item{color:#D6D6E3}
html[data-theme="light"] .nav-item{color:#000040}
html[data-theme="dark"] .nav-item:hover,html[data-theme="dark"] .nav-item.active{background:#20205D;border-color:rgba(255,255,255,.28);color:#FFFFFF}
html[data-theme="light"] .nav-item:hover,html[data-theme="light"] .nav-item.active{background:#000040;border-color:#000040;color:#FFFFFF}
html[data-theme="dark"] .nav-item.active{box-shadow:inset 3px 0 #FFFFFF}
html[data-theme="light"] .nav-item.active{box-shadow:inset 3px 0 #FFFFFF}
html[data-theme="dark"] .nav-item .nav-icon{color:#FFFFFF}
html[data-theme="light"] .nav-item .nav-icon{color:#000040}
html[data-theme="light"] .nav-item.active .nav-icon,html[data-theme="light"] .nav-item:hover .nav-icon{color:#FFFFFF}
html[data-theme="dark"] .side-hint{background:#101051;border-color:rgba(255,255,255,.20)}
html[data-theme="light"] .side-hint{background:#F4F4F8;border-color:rgba(0,0,64,.16)}
html[data-theme="dark"] :is(.side-hint strong,.hint-icon){color:#FFFFFF}
html[data-theme="light"] :is(.side-hint strong,.hint-icon){color:#000040}
html[data-theme="dark"] .top-user strong{color:#FFFFFF}
html[data-theme="light"] .top-user strong{color:#000040}
html[data-theme="dark"] :is(.breadcrumb,.top-user small,.demo-switch-wrap label){color:#C4C4D5}
html[data-theme="light"] :is(.breadcrumb,.top-user small,.demo-switch-wrap label){color:#545477}
html[data-theme="dark"] :is(.server-state,.notification-bell,.demo-switch-wrap select,.nav-count){background:#191958;color:#FFFFFF;border-color:rgba(255,255,255,.27)}
html[data-theme="light"] :is(.server-state,.notification-bell,.demo-switch-wrap select,.nav-count){background:#F5F5F9;color:#000040;border-color:rgba(0,0,64,.22)}
html[data-theme="dark"] .account-circle{background:#FFFFFF;color:#000040}
html[data-theme="light"] .account-circle{background:#000040;color:#FFFFFF}
html[data-theme="dark"] .mode-warning{background:#151552;border-color:rgba(255,255,255,.18);color:#D8D8E4}
html[data-theme="light"] .mode-warning{background:#F0F0F6;border-color:rgba(0,0,64,.18);color:#000040}
html[data-theme="dark"] :is(.mode-warning strong,.mode-warning button){color:#FFFFFF}
html[data-theme="light"] :is(.mode-warning strong,.mode-warning button){color:#000040}

/* Panels and metrics: neutral navy/white monochrome with delicate rules. */
html[data-theme="dark"] :is(.panel,.metric-card){background:#101050;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 28px rgba(0,0,64,.12)}
html[data-theme="light"] :is(.panel,.metric-card){background:#FFFFFF;border:1px solid rgba(0,0,64,.20);box-shadow:0 8px 26px rgba(0,0,64,.06)}
html[data-theme="dark"] :is(.metric-warm,.metric-teal,.metric-violet,.metric-deep,.terminal-panel,.policy-strip,.shift-card){background:#101050;border-color:rgba(255,255,255,.18)}
html[data-theme="light"] :is(.metric-warm,.metric-teal,.metric-violet,.metric-deep,.terminal-panel,.policy-strip,.shift-card){background:#FFFFFF;border-color:rgba(0,0,64,.20)}
html[data-theme="dark"] :is(.panel h2,.metric-card>strong,.page-heading h1,.clock-line strong,.punch-grid strong,.strip-times strong,.approval-copy strong,.account-data strong){color:#FFFFFF}
html[data-theme="light"] :is(.panel h2,.metric-card>strong,.page-heading h1,.clock-line strong,.punch-grid strong,.strip-times strong,.approval-copy strong,.account-data strong){color:#000040}
html[data-theme="dark"] :is(.panel p,.metric-title,.metric-card>small,.page-heading p,.small-info,.account-data span){color:#C5C5D6}
html[data-theme="light"] :is(.panel p,.metric-title,.metric-card>small,.page-heading p,.small-info,.account-data span){color:#56567D}
html[data-theme="dark"] :is(.metric-card .card-symbol,.terminal-icon,.shortcut-icon,.export-icon){background:#FFFFFF;color:#000040;border-color:#FFFFFF}
html[data-theme="light"] :is(.metric-card .card-symbol,.terminal-icon,.shortcut-icon,.export-icon){background:#000040;color:#FFFFFF;border-color:#000040}
html[data-theme="dark"] :is(.terminal-live,.subtle-badge,.emp-code,.role-pill,.status-pill,.leave-tag,.data-pill){background:#20205E;color:#FFFFFF;border:1px solid rgba(255,255,255,.25)}
html[data-theme="light"] :is(.terminal-live,.subtle-badge,.emp-code,.role-pill,.status-pill,.leave-tag,.data-pill){background:#F0F0F5;color:#000040;border:1px solid rgba(0,0,64,.2)}
html[data-theme="dark"] :is(.terminal-entry,.overview-shortcut,.workflow-counts>div,.correction-totals>div,.leave-summary-grid>div,.leave-balance-grid>div){background:#1A1A57;color:#FFFFFF;border-color:rgba(255,255,255,.20)}
html[data-theme="light"] :is(.terminal-entry,.overview-shortcut,.workflow-counts>div,.correction-totals>div,.leave-summary-grid>div,.leave-balance-grid>div){background:#F8F8FA;color:#000040;border-color:rgba(0,0,64,.17)}
html[data-theme="dark"] :is(.terminal-entry,.overview-shortcut):hover{background:#252563;border-color:rgba(255,255,255,.4)}
html[data-theme="light"] :is(.terminal-entry,.overview-shortcut):hover{background:#EAEAF1;border-color:rgba(0,0,64,.4)}
html[data-theme="dark"] :is(.overview-shortcut strong,.terminal-entry strong,.correction-totals strong,.leave-balance-grid strong,.leave-summary-grid strong){color:#FFFFFF}
html[data-theme="light"] :is(.overview-shortcut strong,.terminal-entry strong,.correction-totals strong,.leave-balance-grid strong,.leave-summary-grid strong){color:#000040}
html[data-theme="dark"] :is(.terminal-subtitle,.terminal-entry small,.overview-shortcut small,.shortcut-arrow,.punch-grid span,.strip-times span){color:#C7C7D7}
html[data-theme="light"] :is(.terminal-subtitle,.terminal-entry small,.overview-shortcut small,.shortcut-arrow,.punch-grid span,.strip-times span){color:#525277}
html[data-theme="dark"] :is(.entry-avatar,.person-initials,.big-avatar){background:#FFFFFF;color:#000040}
html[data-theme="light"] :is(.entry-avatar,.person-initials,.big-avatar){background:#000040;color:#FFFFFF}
html[data-theme="dark"] :is(.entry-avatar.late,.entry-avatar.correction,.glance-mark,.alert-round){background:#262663;color:#FFFFFF}
html[data-theme="light"] :is(.entry-avatar.late,.entry-avatar.correction,.glance-mark,.alert-round){background:#E7E7EF;color:#000040}

/* Attendance, leave, reports, tables and corrections. */
html[data-theme="dark"] :is(.punch-grid,.info-panel,.info-card,.form-hint,.feature-note,.leave-help,.setup-alert){background:#1C1C5A;border-color:rgba(255,255,255,.2);color:#FFFFFF}
html[data-theme="light"] :is(.punch-grid,.info-panel,.info-card,.form-hint,.feature-note,.leave-help,.setup-alert){background:#F4F4F8;border-color:rgba(0,0,64,.2);color:#000040}
html[data-theme="dark"] :is(.punch-grid>div+div,.account-data,.account-data>div,.terminal-footer,.terminal-divider){border-color:rgba(255,255,255,.17)}
html[data-theme="light"] :is(.punch-grid>div+div,.account-data,.account-data>div,.terminal-footer,.terminal-divider){border-color:rgba(0,0,64,.17)}
html[data-theme="dark"] :is(.status-in,.status-out,.status-not-in,.leave-tag.pending,.leave-tag.approved,.leave-tag.rejected,.leave-tag.cancelled){background:#232360;color:#FFFFFF;border-color:rgba(255,255,255,.25)}
html[data-theme="light"] :is(.status-in,.status-out,.status-not-in,.leave-tag.pending,.leave-tag.approved,.leave-tag.rejected,.leave-tag.cancelled){background:#ECECF3;color:#000040;border-color:rgba(0,0,64,.2)}
html[data-theme="dark"] :is(.data-pill.active,.data-pill.inactive,.late-chip,.reviewed-pill){background:#232360;color:#FFFFFF;border-color:rgba(255,255,255,.24)}
html[data-theme="light"] :is(.data-pill.active,.data-pill.inactive,.late-chip,.reviewed-pill){background:#ECECF3;color:#000040;border-color:rgba(0,0,64,.2)}
html[data-theme="dark"] :is(th,td){border-bottom-color:rgba(255,255,255,.17)}
html[data-theme="light"] :is(th,td){border-bottom-color:rgba(0,0,64,.14)}
html[data-theme="dark"] :is(th,td,td strong){color:#FFFFFF}
html[data-theme="light"] :is(th,td,td strong){color:#000040}
html[data-theme="dark"] :is(.table-action,.table-action:hover){color:#FFFFFF;border-color:rgba(255,255,255,.36);background:#20205D}
html[data-theme="light"] :is(.table-action,.table-action:hover){color:#000040;border-color:rgba(0,0,64,.36);background:#FFFFFF}
html[data-theme="dark"] :is(.toast,.toast.error){background:#FFFFFF;color:#000040;border-color:#FFFFFF}
html[data-theme="light"] :is(.toast,.toast.error){background:#000040;color:#FFFFFF;border-color:#000040}
html .modal-backdrop{background:rgba(0,0,64,.72)}
html[data-theme="dark"] .modal{background:#111151;color:#FFFFFF;border-color:rgba(255,255,255,.23)}
html[data-theme="light"] .modal{background:#FFFFFF;color:#000040;border-color:rgba(0,0,64,.23)}
html[data-theme="dark"] :is(.modal h2,.modal .eyebrow){color:#FFFFFF}
html[data-theme="light"] :is(.modal h2,.modal .eyebrow){color:#000040}
html[data-theme="dark"] :is(.modal-close,.modal>p){color:#D1D1DD}
html[data-theme="light"] :is(.modal-close,.modal>p){color:#515179}

/* Consistent form contrast incl. profile-photo upload and upload helper. */
html[data-theme="dark"] :is(input,select,textarea,.search-input){accent-color:#FFFFFF}
html[data-theme="light"] :is(input,select,textarea,.search-input){accent-color:#000040}
html[data-theme="dark"] :is(.stack-form input,.stack-form textarea,.stack-form select,.filters input,.search-input){background:#171755!important;border-color:rgba(255,255,255,.31)!important;color:#FFFFFF!important}
html[data-theme="light"] :is(.stack-form input,.stack-form textarea,.stack-form select,.filters input,.search-input){background:#FFFFFF!important;border-color:rgba(0,0,64,.30)!important;color:#000040!important}
html[data-theme="dark"] :is(.stack-form input,.stack-form textarea,.stack-form select,.filters input,.search-input):focus{border-color:#FFFFFF!important;box-shadow:0 0 0 3px rgba(255,255,255,.14)!important}
html[data-theme="light"] :is(.stack-form input,.stack-form textarea,.stack-form select,.filters input,.search-input):focus{border-color:#000040!important;box-shadow:0 0 0 3px rgba(0,0,64,.10)!important}
html[data-theme="dark"] :is(input,textarea)::placeholder{color:#B8B8CC!important}
html[data-theme="light"] :is(input,textarea)::placeholder{color:#6B6B89!important}
html[data-theme="dark"] :is(.stack-form label,.filters label){color:#FFFFFF}
html[data-theme="light"] :is(.stack-form label,.filters label){color:#000040}

/* Preserve original logo. Theme & component layout remain responsive. */
html .brand-image,html .person-photo{object-fit:cover}
html .brand-image{object-fit:contain}


/* Employee permissions & HR Manager leave notification inbox */
.role-locked-help {display:block;margin:5px 0 14px;font-size:11px;line-height:1.55;color:var(--muted,#9090b0)}
.hr-inbox-note {border:1px solid currentColor; border-radius:12px; padding:12px 15px;margin:16px 0;line-height:1.6;font-size:12px}
html[data-theme="dark"] .hr-inbox-note {background:#171757;color:#FFFFFF;border-color:rgba(255,255,255,.28)}
html[data-theme="light"] .hr-inbox-note {background:#F3F3F8;color:#000040;border-color:rgba(0,0,64,.25)}
#top-leave-btn {flex-shrink:0;}
#top-leave-btn:not(.hidden){display:grid;place-items:center;}
@media(max-width:560px){#top-leave-btn{height:32px;width:32px}}