/* ═════════════════════════════════════════════════════════════════════════════
   USER MANAGEMENT MODULE — lte_User.css
   Light-mode base + dark-mode overrides
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   MODULE COLOR TOKENS  (light mode)
───────────────────────────────────────────────────────────── */
.content-wrapper[data-module="user-mgmt"] {
  --u-primary       : #1d4ed8;
  --u-primary-rgb   : 29, 78, 216;
  --u-primary-dark  : #1e40af;
  --u-primary-lt    : rgba(29, 78, 216, .08);
  --u-primary-bd    : rgba(29, 78, 216, .30);

  --u-success       : #15803d;
  --u-success-bg    : #dcfce7;

  --u-danger        : #b91c1c;
  --u-danger-bg     : #fee2e2;

  --u-warning       : #92400e;
  --u-warning-bg    : #fef3c7;

  --u-info          : #0369a1;
  --u-info-bg       : #e0f2fe;

  --u-neutral       : #6b7280;
  --u-neutral-bg    : #f1f5f9;

  --u-text          : #0f172a;
  --u-text-soft     : #6b7280;
  --u-text-muted    : #9ca3af;

  --u-bg            : #f8faff;
  --u-surface       : #ffffff;
  --u-border        : #e5e7eb;
  --u-border-strong : #d1d5db;

  --u-shadow-sm     : 0 1px 2px rgba(0,0,0,.05);
  --u-shadow        : 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --u-shadow-lg     : 0 4px 6px rgba(0,0,0,.07), 0 10px 15px rgba(0,0,0,.10);
}

/* ─────────────────────────────────────────────────────────────
   ACTION BUTTONS
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .u-action-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 30px;
  height          : 30px;
  border-radius   : 7px;
  border          : 1px solid var(--u-border);
  background      : var(--u-surface);
  color           : var(--u-neutral);
  font-size       : 0.78rem;
  cursor          : pointer;
  transition      : all 0.15s ease;
  text-decoration : none;
}

[data-module="user-mgmt"] .u-action-btn.edit       { color: var(--u-primary); }
[data-module="user-mgmt"] .u-action-btn.edit:hover  { border-color: var(--u-primary); background: var(--u-primary-lt); }
[data-module="user-mgmt"] .u-action-btn.del         { color: #dc2626; }
[data-module="user-mgmt"] .u-action-btn.del:hover   { border-color: #dc2626; background: rgba(220,38,38,.06); }
[data-module="user-mgmt"] .u-action-btn.permit      { color: #1e6f3f; }
[data-module="user-mgmt"] .u-action-btn.hr-profile  { color: #1a6fbd; }
[data-module="user-mgmt"] .u-action-btn.warning     { color: #b7791f; }

/* ─────────────────────────────────────────────────────────────
   STATUS BADGES
───────────────────────────────────────────────────────────── */
.u-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 3px 10px;
  border-radius: 20px;
  font-size    : 0.70rem;
  font-weight  : 600;
  letter-spacing: 0.02em;
  white-space  : nowrap;
}

.u-badge--status-active    { background: var(--u-success-bg, #dcfce7); color: var(--u-success, #15803d); }
.u-badge--status-inactive  { background: var(--u-danger-bg,  #fee2e2); color: var(--u-danger,  #b91c1c); }
.u-badge--status-locked    { background: var(--u-warning-bg, #fef3c7); color: var(--u-warning, #92400e); }
.u-badge--status-suspended { background: var(--u-info-bg,    #e0f2fe); color: var(--u-info,    #0369a1); }

[data-module="user-mgmt"] .u-empty-value {
  color: var(--u-text-muted);
}

/* ═════════════════════════════════════════════════════════════════════════════
   DARK MODE  —  overrides design tokens and component colors
   ═════════════════════════════════════════════════════════════════════════════ */

body.dark-mode .content-wrapper[data-module="user-mgmt"] {

  /* ── Core palette ─────────────────────────────────────────────────────── */
  --u-primary       : #60a5fa;          /* blue-400  — brighter on dark bg   */
  --u-primary-dark  : #93c5fd;          /* blue-300  — hover state           */
  --u-primary-lt    : rgba(96, 165, 250, .12);   /* tinted highlight          */
  --u-primary-bd    : rgba(96, 165, 250, .30);   /* border tint               */

  /* ── Semantic colours ─────────────────────────────────────────────────── */
  --u-success       : #4ade80;
  --u-success-bg    : rgba(74, 222, 128, .15);
  --u-success-fg    : #86efac;

  --u-danger        : #f87171;
  --u-danger-bg     : rgba(248, 113, 113, .15);
  --u-danger-fg     : #fca5a5;

  --u-warning       : #fbbf24;
  --u-warning-bg    : rgba(251, 191, 36, .15);
  --u-warning-fg    : #fde68a;

  --u-info          : #22d3ee;
  --u-info-bg       : rgba(34, 211, 238, .15);
  --u-info-fg       : #67e8f9;

  --u-neutral       : #94a3b8;
  --u-neutral-bg    : rgba(148, 163, 184, .15);
  --u-neutral-fg    : #cbd5e1;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --u-text          : #f1f5f9;          /* slate-100                         */
  --u-text-soft     : #94a3b8;          /* slate-400                         */
  --u-text-muted    : #475569;          /* slate-600                         */

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --u-bg            : #1e2330;          /* page background                   */
  --u-surface       : #252d3d;          /* card / modal body                 */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --u-border        : #2e3a50;
  --u-border-strong : #3b4a63;

  /* ── Shadows (lighter alpha — dark surfaces need less contrast) ───────── */
  --u-shadow-sm     : 0 1px 2px rgba(0, 0, 0, .30);
  --u-shadow        : 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  --u-shadow-lg     : 0 4px 6px rgba(0, 0, 0, .30), 0 10px 15px rgba(0, 0, 0, .40);
}


/* ── Extra overrides that can't be handled by tokens alone ─────────────────── */

/* ─────────────────────────────────────────────────────────────
   TABLE CARD
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .u-table-card {
  background    : var(--u-surface);
  border        : 1px solid var(--u-border);
  border-radius : 10px;
  overflow      : hidden;
  margin-bottom : 1.5rem;
}

[data-module="user-mgmt"] .u-table-card .card-header {
  background      : transparent;
  border-bottom   : 1px solid var(--u-border);
  padding         : 14px 18px;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  font-weight     : 600;
  font-size       : 0.875rem;
  color           : var(--u-text);
}

[data-module="user-mgmt"] .u-table-card .dataTables_wrapper {
  padding: 1rem;
}

/* Table row hover — use token so it's already covered, but Bootstrap's own
   .table-striped / .table-hover background-color needs a nudge              */
body.dark-mode [data-module="user-mgmt"] #userTable.table-hover > tbody > tr:hover > * {
  background-color: var(--u-primary-lt);
  color: var(--u-text);
}

/* Password field — Bootstrap forces a light background on .form-control     */
body.dark-mode .u-pwd-field,
body.dark-mode .passwordField {
  background-color : var(--u-bg);
  border-color     : var(--u-border);
  color            : var(--u-text);
}
body.dark-mode .u-pwd-field:focus,
body.dark-mode .passwordField:focus {
  background-color : var(--u-surface);
  border-color     : var(--u-primary);
  box-shadow       : 0 0 0 .15rem rgba(96, 165, 250, .25);
}

/* Editable fields inside the modal */
body.dark-mode .editable-field {
  background-color : var(--u-surface);
  border-color     : var(--u-border);
  color            : var(--u-text);
}
body.dark-mode .editable-field:focus {
  border-color : var(--u-primary);
  box-shadow   : 0 0 0 .15rem rgba(96, 165, 250, .25);
}

/* Password toggle button */
body.dark-mode .u-pwd-toggle-btn {
  background-color : var(--u-bg);
  border-color     : var(--u-border);
  color            : var(--u-text-soft);
}
body.dark-mode .u-pwd-toggle-btn:hover {
  background-color : var(--u-primary-lt);
  color            : var(--u-primary);
}

/* Toggle wrap (input-group-append) */
body.dark-mode .u-pwd-toggle-wrap {
  background-color : var(--u-bg);
  border-color     : var(--u-border);
}

body.dark-mode [data-module="user-mgmt"] .form-select {
  background-color : var(--u-bg);
  border-color     : var(--u-border);
  color            : var(--u-text);
}

body.dark-mode [data-module="user-mgmt"] .form-select:focus {
  background-color : var(--u-surface);
  border-color     : var(--u-primary);
  color            : var(--u-text);
  box-shadow       : 0 0 0 .15rem rgba(96, 165, 250, .25);
}

body.dark-mode [data-module="user-mgmt"] .form-select option {
  background-color : var(--u-surface);
  color            : var(--u-text);
}

body.dark-mode [data-module="user-mgmt"] .u-pwd-group .input-group-text {
  background-color : var(--u-bg);
  border-color     : var(--u-border);
  color            : var(--u-text-soft);
}

body.dark-mode [data-module="user-mgmt"] .u-pwd-group .input-group-text a {
  color: var(--u-text-soft);
}

body.dark-mode [data-module="user-mgmt"] .u-pwd-group .input-group-text a:hover {
  color: var(--u-primary);
}

body.dark-mode .input-icon-wrapper .calendar-icon {
  color: #8fa2bb;
}

/* Action buttons */
body.dark-mode [data-module="user-mgmt"] .u-action-btn            { background: #1c1f33; border-color: #252840; color: #9ca3af; }
body.dark-mode [data-module="user-mgmt"] .u-action-btn.edit       { color: #93c5fd; }
body.dark-mode [data-module="user-mgmt"] .u-action-btn.edit:hover { border-color: #1d4ed8; background: rgba(29,78,216,.15); color: #93c5fd; }
body.dark-mode [data-module="user-mgmt"] .u-action-btn.del        { color: #f87171; }
body.dark-mode [data-module="user-mgmt"] .u-action-btn.del:hover  { background: rgba(220,38,38,.15); border-color: #dc2626; color: #f87171; }
body.dark-mode [data-module="user-mgmt"] .u-action-btn.permit     { color: #86efac; }
body.dark-mode [data-module="user-mgmt"] .u-action-btn.hr-profile { color: #93c5fd; }
body.dark-mode [data-module="user-mgmt"] .u-action-btn.warning    { color: #fde68a; }
body.dark-mode [data-module="user-mgmt"] .u-action-btn.permit:hover {
  border-color: rgba(74, 222, 128, .55);
  background: rgba(74, 222, 128, .14);
}
body.dark-mode [data-module="user-mgmt"] .u-action-btn.hr-profile:hover {
  border-color: rgba(96, 165, 250, .55);
  background: rgba(96, 165, 250, .14);
}
body.dark-mode [data-module="user-mgmt"] .u-action-btn.warning:hover {
  border-color: rgba(251, 191, 36, .55);
  background: rgba(251, 191, 36, .14);
}

/* Legacy class aliases (keep for backwards compat) */
body.dark-mode .u-action--del,
body.dark-mode .user-action-btn.del {
  border-color : rgba(248, 113, 113, .35);
}

/* Status badges — dark */
body.dark-mode .u-badge--status-active    { background: rgba(22,163,74,.18);   color: #4ade80; }
body.dark-mode .u-badge--status-inactive  { background: rgba(220,38,38,.18);   color: #f87171; }
body.dark-mode .u-badge--status-locked    { background: rgba(251,191,36,.18);  color: #fde68a; }
body.dark-mode .u-badge--status-suspended { background: rgba(34,211,238,.15);  color: #67e8f9; }

body.dark-mode [data-module="user-mgmt"] .u-empty-value {
  color: var(--u-text-soft);
}

/* Modal content background (Bootstrap sets it directly) */
body.dark-mode .u-modal .modal-content {
  background-color : var(--u-surface);
}

/* Select / option elements inside the form */
body.dark-mode select.editable-field option {
  background-color : var(--u-surface);
  color            : var(--u-text);
}

/* User detail modal: keep long edit forms scrollable within the viewport */
#User_Detail_Modal .modal-content,
#User_Detail_Modal #userDetailForm {
  min-height: 0;
}

#User_Detail_Modal #userDetailForm {
  max-height: 100%;
}

#User_Detail_Modal .modal-body {
  min-height: 0;
  overflow-y: auto;
}

/* Table card — dark mode */
body.dark-mode [data-module="user-mgmt"] .u-table-card {
  background  : var(--u-surface);
  border-color: var(--u-border);
}

body.dark-mode [data-module="user-mgmt"] .u-table-card .card-header {
  border-bottom-color: var(--u-border);
  color              : var(--u-text);
}

body.dark-mode [data-module="user-mgmt"] .u-table-card .card-body,
body.dark-mode [data-module="user-mgmt"] .u-table-card .table-responsive,
body.dark-mode [data-module="user-mgmt"] #userTable {
  background-color: var(--u-surface) !important;
}

body.dark-mode [data-module="user-mgmt"] #userTable {
  --bs-table-bg          : var(--u-surface);
  --bs-table-color       : var(--u-text-soft);
  --bs-table-border-color: var(--u-border);
  --bs-table-hover-bg    : var(--u-primary-lt);
  --bs-table-hover-color : var(--u-text);
  --bs-table-striped-bg  : var(--u-bg);
  --bs-table-striped-color: var(--u-text-soft);
}

body.dark-mode [data-module="user-mgmt"] #userTable > thead > tr > th {
  background-color: var(--u-bg) !important;
  border-color    : var(--u-border) !important;
  color           : var(--u-text) !important;
}

body.dark-mode [data-module="user-mgmt"] #userTable > tbody > tr,
body.dark-mode [data-module="user-mgmt"] #userTable > tbody > tr > td {
  background-color: var(--u-surface) !important;
  border-color    : var(--u-border) !important;
  color           : var(--u-text-soft) !important;
}

body.dark-mode [data-module="user-mgmt"] #userTable > tbody > tr:nth-child(even) > td {
  background-color: var(--u-bg) !important;
}