/* ================================================================
   hrms-theme.css — Bigscal HRMS Shared Design Tokens
   Loaded globally via head.ejs (after portal.css / style.css).
   All modules should reference --hrms-* for colors / spacing.
   ================================================================ */

/* ── Light mode ─────────────────────────────────────────────── */
:root,
html:not(.hrms-dark) {
  /* Surfaces */
  --hrms-bg:             #F7F7F8;
  --hrms-card:           #FFFFFF;
  --hrms-card-alt:       #F0F0F2;
  --hrms-border:         #EBEBEB;
  --hrms-table-bg:       #14171f;
  --hrms-table-bg-hover: color-mix(in srgb, #14171f 88%, #22c55e 12%);
  --hrms-table-border:   #252b36;
  --hrms-table-text:     #d7e2ee;
  --hrms-table-muted:    #8b98a8;

  /* Text */
  --hrms-text:           #111111;
  --hrms-muted:          #6B7280;
  --hrms-subtle:         #BBBBBB;

  /* Interaction */
  --hrms-hover:          #F0F0F2;
  --hrms-active:         #FFFFFF;

  /* Brand */
  --hrms-primary:        #22c55e;
  --hrms-primary-strong: #16a34a;
  --hrms-primary-muted:  color-mix(in srgb, #22c55e 12%, transparent);
  --hrms-primary-soft:   color-mix(in srgb, #22c55e 16%, transparent);
  --hrms-primary-fg:     #ffffff;

  /* Icons */
  --hrms-icon:           #999999;

  /* Shadows */
  --hrms-shadow:         0 2px 8px rgba(0,0,0,.04);
  --hrms-shadow-hover:   0 4px 14px rgba(0,0,0,.08);
  --hrms-shadow-lg:      0 4px 16px rgba(0,0,0,.07);
  --hrms-shadow-modal:   0 8px 36px rgba(0,0,0,.12);

  /* Radii */
  --hrms-radius:         14px;
  --hrms-radius-lg:      18px;
  --hrms-radius-sm:      10px;
}

/* ── Dark mode ──────────────────────────────────────────────── */
html.hrms-dark {
  /* Surfaces */
  --hrms-bg:             #0d1117;
  --hrms-card:           #0b0e165e;
  --hrms-card-alt:       #161b26;
  --hrms-border:         #2a2a2a;
  --hrms-table-bg:       #14171f;
  --hrms-table-bg-hover: color-mix(in srgb, #14171f 88%, #22c55e 12%);
  --hrms-table-border:   #252b36;
  --hrms-table-text:     #d7e2ee;
  --hrms-table-muted:    #8b98a8;

  /* Text */
  --hrms-text:           #DDDDDD;
  --hrms-muted:          #888888;
  --hrms-subtle:         #444444;

  /* Interaction */
  --hrms-hover:          #262629;
  --hrms-active:         #3a3a3a;

  /* Brand */
  --hrms-primary:        #22c55e;
  --hrms-primary-strong: #16a34a;
  --hrms-primary-muted:  color-mix(in srgb, #22c55e 12%, transparent);
  --hrms-primary-soft:   color-mix(in srgb, #22c55e 18%, transparent);
  --hrms-primary-fg:     #ffffff;

  /* Icons */
  --hrms-icon:           #555555;

  /* Shadows */
  --hrms-shadow:         0 18px 46px rgba(0,0,0,.24);
  --hrms-shadow-hover:   0 22px 56px rgba(0,0,0,.32);
  --hrms-shadow-lg:      0 8px 32px rgba(0,0,0,.30);
  --hrms-shadow-modal:   0 8px 48px rgba(0,0,0,.36);
}

/* ── Global input, dropdown, and search interaction states ───────────────── */
:root,
html:not(.hrms-dark) {
  --hrms-focus-border: var(--hrms-primary, #22c55e);
  --hrms-focus-ring:   color-mix(in srgb, var(--hrms-primary, #22c55e) 18%, transparent);
}
html.hrms-dark {
  --hrms-focus-border: var(--hrms-primary, #22c55e);
  --hrms-focus-ring:   color-mix(in srgb, var(--hrms-primary, #22c55e) 22%, transparent);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-file-input:focus,
.common-dropdown-trigger:focus,
.common-dropdown-trigger:focus-visible,
.common-dropdown.is-open .common-dropdown-trigger,
.common-search:focus-within,
.common-dropdown-search:focus-within,
.mc-search-input:focus {
  border-color: var(--hrms-focus-border) !important;
  box-shadow: 0 0 0 3px var(--hrms-focus-ring) !important;
  outline: none !important;
}

.common-dropdown.is-open .common-dropdown-trigger {
  border-color: var(--hrms-focus-border) !important;
}

.common-dropdown-option:hover:not(.is-selected) {
  background: color-mix(in srgb, var(--hrms-primary, #22c55e) 10%, transparent) !important;
  color: var(--hrms-text, inherit) !important;
}

.common-dropdown-option.is-selected {
  color: var(--hrms-primary, #22c55e) !important;
}

.common-search:focus-within i,
.common-dropdown-search:focus-within i {
  color: var(--hrms-primary, #22c55e) !important;
}

.app-search-form .search-input:focus,
.app-search-box .app-search-form .search-input:focus {
  border-color: var(--hrms-focus-border) !important;
  box-shadow: 0 0 0 3px var(--hrms-focus-ring) !important;
}

/* ── Global Dark Mode Fallbacks for legacy UI components ── */
html.hrms-dark .app-card,
html.hrms-dark .card-neumorphic {
  background: var(--hrms-card) !important;
  border: 1px solid var(--hrms-border) !important;
  color: var(--hrms-text) !important;
  box-shadow: var(--hrms-shadow) !important;
}

html.hrms-dark .app-card .app-card-header {
  background: var(--hrms-card-alt) !important;
  border-bottom: 1px solid var(--hrms-border) !important;
}

html.hrms-dark .app-card .app-card-title,
html.hrms-dark .app-page-title {
  color: var(--hrms-text) !important;
}

html.hrms-dark .table,
html.hrms-dark table.dataTable {
  color: var(--hrms-text) !important;
  border-color: var(--hrms-table-border) !important;
  background: transparent !important;
}

html.hrms-dark .table th,
html.hrms-dark .table td,
html.hrms-dark table.dataTable th,
html.hrms-dark table.dataTable td {
  color: var(--hrms-text) !important;
  border-color: var(--hrms-table-border) !important;
}

html.hrms-dark .table thead th,
html.hrms-dark table.dataTable thead th {
  background: var(--hrms-card-alt) !important;
  color: var(--hrms-text) !important;
}

html.hrms-dark .dataTables_wrapper label,
html.hrms-dark .dataTables_info,
html.hrms-dark .dataTables_paginate .paginate_button {
  color: var(--hrms-text) !important;
}

html.hrms-dark .dataTables_wrapper .form-control,
html.hrms-dark .dataTables_wrapper .form-select,
html.hrms-dark .dataTables_wrapper select,
html.hrms-dark .dataTables_wrapper input {
  background: var(--hrms-card-alt) !important;
  border: 1px solid var(--hrms-border) !important;
  color: var(--hrms-text) !important;
}

html.hrms-dark .item-label,
html.hrms-dark .item-label strong {
  color: var(--hrms-muted) !important;
}

html.hrms-dark .item-data {
  color: var(--hrms-text) !important;
}

html.hrms-dark .form-control,
html.hrms-dark .form-select,
html.hrms-dark textarea.form-control,
html.hrms-dark select.form-control {
  background: var(--hrms-card-alt) !important;
  border: 1px solid var(--hrms-border) !important;
  color: var(--hrms-text) !important;
}

html.hrms-dark .form-control:focus,
html.hrms-dark .form-select:focus,
html.hrms-dark textarea.form-control:focus {
  border-color: var(--hrms-focus-border) !important;
  box-shadow: 0 0 0 3px var(--hrms-focus-ring) !important;
  background: var(--hrms-card-alt) !important;
  color: var(--hrms-text) !important;
}

html.hrms-dark .form-control::placeholder,
html.hrms-dark textarea.form-control::placeholder {
  color: var(--hrms-muted) !important;
}

/* Keyboard navigation cursor */
.common-dropdown-option:focus,
.common-dropdown-option:focus-visible {
  outline: none !important;
}

.common-dropdown-option.is-hovered {
  background: var(--cd-option-hover-bg) !important;
  color: var(--cd-option-hover-color) !important;
}