/* ============================================================
   GestionHR — Dark Theme
   Primary: #0da8b1 (teal)  |  Background: #0d1117 (dark navy)
   ============================================================ */

@import url('https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700,800|dm-sans:300,400,500,600');

/* ── Variables ── */
:root {
  --hr-primary:        #0da8b1;
  --hr-primary-dark:   #0b8f97;
  --hr-primary-glow:   rgba(13,168,177,0.2);
  --hr-secondary:      #fda31a;
  --hr-bg:             #0d1117;
  --hr-bg-card:        #161d2d;
  --hr-bg-elevated:    #1e2638;
  --hr-bg-input:       #1a2235;
  --hr-border:         rgba(255,255,255,0.07);
  --hr-border-hover:   rgba(13,168,177,0.35);
  --hr-text:           #e2e8f0;
  --hr-text-muted:     rgba(148,163,184,0.7);
  --hr-sidebar:        #111827;
  --hr-radius:         10px;
}

/* ════════════════════════════════
   FORCE DARK — GLOBAL BACKGROUNDS
   ════════════════════════════════ */
html, body, .fi-body {
  background-color: var(--hr-bg) !important;
  color: var(--hr-text) !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Main content area */
.fi-main,
.fi-main-ctn,
.fi-page {
  background-color: var(--hr-bg) !important;
}

/* ════════════════════════════════
   TOPBAR
   ════════════════════════════════ */
.fi-topbar,
.fi-topbar-nav {
  background-color: var(--hr-sidebar) !important;
  border-bottom: 1px solid var(--hr-border) !important;
}

/* ════════════════════════════════
   SIDEBAR
   ════════════════════════════════ */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-footer,
.fi-sidebar-nav {
  background-color: var(--hr-sidebar) !important;
  border-right: 1px solid var(--hr-border) !important;
}

.fi-sidebar-header {
  border-bottom: 1px solid var(--hr-border) !important;
  padding: 18px 16px !important;
}

.fi-sidebar-footer {
  border-top: 1px solid var(--hr-border) !important;
}

/* Logo / Brand */
.fi-logo,
.fi-brand-name {
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: -0.3px !important;
}

/* Group labels */
.fi-sidebar-group-label {
  color: var(--hr-text-muted) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding-inline: 14px !important;
  margin-top: 6px !important;
}

/* Nav items */
.fi-sidebar-item-button {
  color: rgba(203,213,225,0.8) !important;
  border-radius: 8px !important;
  margin-inline: 8px !important;
  padding-block: 7px !important;
  padding-inline: 10px !important;
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  transition: background 0.15s, color 0.15s !important;
  gap: 10px !important;
}

.fi-sidebar-item-button:hover {
  background-color: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

/* Active nav item */
.fi-sidebar-item-button[aria-current="page"],
.fi-sidebar-item-button.fi-active {
  background: linear-gradient(90deg, rgba(13,168,177,0.25), rgba(13,168,177,0.1)) !important;
  color: var(--hr-primary) !important;
  border-left: 3px solid var(--hr-primary) !important;
  padding-left: 7px !important;
}

/* Nav icons */
.fi-sidebar-item-icon {
  color: inherit !important;
  width: 16px !important;
  height: 16px !important;
}

/* ════════════════════════════════
   PAGE HEADER
   ════════════════════════════════ */
.fi-page-header {
  background-color: var(--hr-bg) !important;
  border-bottom: 1px solid var(--hr-border) !important;
  padding-block: 16px !important;
}

.fi-page-header-heading,
.fi-page-header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  color: #f1f5f9 !important;
}

/* Breadcrumbs */
.fi-breadcrumbs {
  color: var(--hr-text-muted) !important;
  font-size: 0.78rem !important;
}

.fi-breadcrumbs a {
  color: var(--hr-text-muted) !important;
}

.fi-breadcrumbs li:last-child a,
.fi-breadcrumbs li:last-child span {
  color: var(--hr-primary) !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════
   SECTIONS / CARDS
   ════════════════════════════════ */
.fi-section {
  background-color: var(--hr-bg-card) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: var(--hr-radius) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.25) !important;
}

.fi-section-header {
  border-bottom: 1px solid var(--hr-border) !important;
  padding: 14px 20px !important;
}

.fi-section-header-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: #f1f5f9 !important;
}

.fi-section-content {
  padding: 20px !important;
}

/* ════════════════════════════════
   FORM FIELDS
   ════════════════════════════════ */
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp-label .fi-fo-field-wrp-label-text {
  color: rgba(203,213,225,0.85) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* Input, select, textarea */
.fi-input,
.fi-select-input,
.fi-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  background-color: var(--hr-bg-input) !important;
  border-color: rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: #e2e8f0 !important;
  font-size: 0.85rem !important;
}

.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus {
  border-color: var(--hr-primary) !important;
  box-shadow: 0 0 0 3px var(--hr-primary-glow) !important;
  outline: none !important;
}

.fi-input-wrp {
  background-color: var(--hr-bg-input) !important;
  border-color: rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}

.fi-input-wrp:focus-within {
  border-color: var(--hr-primary) !important;
  box-shadow: 0 0 0 3px var(--hr-primary-glow) !important;
}

/* Input suffix/prefix */
.fi-input-wrp-suffix,
.fi-input-wrp-prefix {
  color: var(--hr-text-muted) !important;
  background-color: var(--hr-bg-elevated) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Placeholder */
.fi-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(148,163,184,0.4) !important;
}

/* Helper text */
.fi-fo-field-wrp-helper-text {
  color: var(--hr-text-muted) !important;
  font-size: 0.75rem !important;
}

/* Select dropdown */
.fi-select-option {
  background-color: var(--hr-bg-elevated) !important;
  color: var(--hr-text) !important;
}

/* ════════════════════════════════
   BUTTONS
   ════════════════════════════════ */
.fi-btn {
  font-size: 0.8rem !important;
  padding-inline: 14px !important;
  padding-block: 7px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.15s !important;
}

.fi-btn-color-primary {
  background: linear-gradient(135deg, var(--hr-primary), var(--hr-primary-dark)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(13,168,177,0.3) !important;
}

.fi-btn-color-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(13,168,177,0.45) !important;
}

.fi-btn-color-gray {
  background-color: var(--hr-bg-elevated) !important;
  border-color: var(--hr-border) !important;
  color: var(--hr-text) !important;
}

.fi-btn-color-gray:hover {
  background-color: rgba(255,255,255,0.08) !important;
}

.fi-btn-color-warning {
  background: linear-gradient(135deg, var(--hr-secondary), #e08d0c) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.fi-btn-color-danger {
  background-color: rgba(239,68,68,0.15) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #fca5a5 !important;
}

.fi-btn-color-danger:hover {
  background-color: rgba(239,68,68,0.25) !important;
}

/* ════════════════════════════════
   TABLE
   ════════════════════════════════ */
.fi-ta-ctn,
.fi-ta {
  background-color: var(--hr-bg-card) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: var(--hr-radius) !important;
}

.fi-ta-header-cell {
  background-color: var(--hr-bg-elevated) !important;
  color: var(--hr-text-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid var(--hr-border) !important;
  padding-block: 12px !important;
}

.fi-ta-cell {
  background-color: var(--hr-bg-card) !important;
  color: var(--hr-text) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  font-size: 0.83rem !important;
  padding-block: 11px !important;
}

.fi-ta-row:hover .fi-ta-cell {
  background-color: rgba(13,168,177,0.06) !important;
}

/* Table empty state */
.fi-ta-empty-state {
  background-color: var(--hr-bg-card) !important;
  color: var(--hr-text-muted) !important;
}

/* Table toolbar */
.fi-ta-header,
.fi-ta-footer {
  background-color: var(--hr-bg-card) !important;
  border-color: var(--hr-border) !important;
  padding: 12px 16px !important;
}

/* Search input in table */
.fi-ta-search-field .fi-input-wrp {
  background-color: var(--hr-bg-input) !important;
}

/* ════════════════════════════════
   BADGES
   ════════════════════════════════ */
.fi-badge {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2px !important;
  padding-block: 2px !important;
  padding-inline: 8px !important;
}

/* ════════════════════════════════
   MODAL
   ════════════════════════════════ */
.fi-modal-window {
  background-color: var(--hr-bg-card) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.fi-modal-header {
  background-color: var(--hr-bg-elevated) !important;
  border-bottom: 1px solid var(--hr-border) !important;
  padding: 16px 20px !important;
}

.fi-modal-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
}

.fi-modal-content {
  background-color: var(--hr-bg-card) !important;
  padding: 20px !important;
}

.fi-modal-footer {
  background-color: var(--hr-bg-elevated) !important;
  border-top: 1px solid var(--hr-border) !important;
}

/* Backdrop */
.fi-modal-close-overlay {
  background-color: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(4px) !important;
}

/* ════════════════════════════════
   DROPDOWN MENUS
   ════════════════════════════════ */
.fi-dropdown-panel {
  background-color: var(--hr-bg-elevated) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

.fi-dropdown-list-item-button {
  color: var(--hr-text) !important;
  font-size: 0.82rem !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
}

.fi-dropdown-list-item-button:hover {
  background-color: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}

/* ════════════════════════════════
   FILTERS
   ════════════════════════════════ */
.fi-filters-form {
  background-color: var(--hr-bg-elevated) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
}

/* ════════════════════════════════
   STATS WIDGET
   ════════════════════════════════ */
.fi-wi-stats-overview-stat {
  background-color: var(--hr-bg-card) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: var(--hr-radius) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.fi-wi-stats-overview-stat:hover {
  transform: translateY(-2px) !important;
  border-color: var(--hr-border-hover) !important;
  box-shadow: 0 4px 20px rgba(13,168,177,0.15) !important;
}

.fi-wi-stats-overview-stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.65rem !important;
  color: #f1f5f9 !important;
}

.fi-wi-stats-overview-stat-label {
  color: var(--hr-text-muted) !important;
  font-size: 0.78rem !important;
}

/* ════════════════════════════════
   TABS
   ════════════════════════════════ */
.fi-tabs {
  border-bottom: 1px solid var(--hr-border) !important;
}

.fi-tabs-tab {
  color: var(--hr-text-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding-block: 10px !important;
  border-bottom: 2px solid transparent !important;
}

.fi-tabs-tab:hover {
  color: var(--hr-text) !important;
}

.fi-tabs-tab[aria-selected="true"] {
  color: var(--hr-primary) !important;
  border-bottom-color: var(--hr-primary) !important;
}

/* ════════════════════════════════
   REPEATER
   ════════════════════════════════ */
.fi-fo-repeater-item {
  background-color: var(--hr-bg-elevated) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: 8px !important;
}

/* ════════════════════════════════
   TOGGLE / CHECKBOX / RADIO
   ════════════════════════════════ */
.fi-fo-toggle-icon-on {
  color: var(--hr-primary) !important;
}

/* ════════════════════════════════
   NOTIFICATIONS
   ════════════════════════════════ */
.fi-no-notification {
  background-color: var(--hr-bg-card) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: 10px !important;
  color: var(--hr-text) !important;
}

/* ════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════ */
.fi-simple-layout {
  background: linear-gradient(135deg, #070d18 0%, #0d1a2e 60%, #060e1a 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

.fi-simple-main {
  background: transparent !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.fi-simple-page {
  background-color: var(--hr-bg-card) !important;
  border: 1px solid var(--hr-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(13,168,177,0.08) !important;
  padding: 36px 32px !important;
  width: 100% !important;
}

/* Brand/logo area at top of login card */
.fi-simple-header {
  text-align: center !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
}

.fi-simple-header .fi-logo,
.fi-simple-header .fi-brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* Subtle tagline under the brand */
.fi-simple-header::after {
  content: 'Gestion RH · Maroc' !important;
  display: block !important;
  font-size: 0.72rem !important;
  color: var(--hr-text-muted) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
}

/* Login form submit button — full width */
.fi-simple-page .fi-btn-color-primary {
  width: 100% !important;
  justify-content: center !important;
  padding-block: 10px !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.2px !important;
}

/* ════════════════════════════════
   USER MENU / AVATAR
   ════════════════════════════════ */
.fi-avatar {
  box-shadow: 0 0 0 2px var(--hr-primary) !important;
}

.fi-user-menu-button {
  border-radius: 8px !important;
  padding: 4px 8px !important;
}

.fi-user-menu-button:hover {
  background-color: rgba(255,255,255,0.07) !important;
}

/* ════════════════════════════════
   ACTION GROUP ICON BUTTON
   ════════════════════════════════ */
.fi-ta-col-action .fi-icon-btn,
.fi-btn-icon-only {
  background-color: transparent !important;
  border-color: var(--hr-border) !important;
  color: var(--hr-text-muted) !important;
  border-radius: 6px !important;
  padding: 5px !important;
  width: 28px !important;
  height: 28px !important;
}

.fi-ta-col-action .fi-icon-btn:hover,
.fi-btn-icon-only:hover {
  background-color: rgba(255,255,255,0.08) !important;
  color: var(--hr-text) !important;
}

/* ════════════════════════════════
   PAGINATION
   ════════════════════════════════ */
.fi-pagination {
  background-color: var(--hr-bg-card) !important;
  border-top: 1px solid var(--hr-border) !important;
}

.fi-pagination-item-btn {
  background-color: var(--hr-bg-elevated) !important;
  border-color: var(--hr-border) !important;
  color: var(--hr-text-muted) !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
}

.fi-pagination-item-btn:hover {
  background-color: rgba(255,255,255,0.07) !important;
  color: var(--hr-text) !important;
}

.fi-pagination-item-btn[aria-current="page"] {
  background-color: var(--hr-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ════════════════════════════════
   SCROLLBAR
   ════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(13,168,177,0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hr-primary);
}

/* ════════════════════════════════
   FULL WIDTH
   ════════════════════════════════ */
html body .fi-main,
html body.fi-body .fi-main,
.fi-main.fi-width-7xl,
.fi-main.fi-width-full,
.fi-main {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 20px !important;
}

.fi-main-ctn {
  max-width: 100% !important;
  width: 100% !important;
}

/* Tabs full width */
.fi-tabs,
.fi-sc.fi-tabs {
  width: 100% !important;
}

/* Form full width */
.fi-fo,
.fi-sc {
  width: 100% !important;
}

/* ════════════════════════════════
   MISC OVERRIDES
   ════════════════════════════════ */
/* Dividers */
hr, .fi-hr {
  border-color: var(--hr-border) !important;
}

/* Text colors */
.fi-page-heading,
h1, h2, h3, h4 {
  color: #f1f5f9 !important;
}

p, span, label {
  color: inherit;
}

/* Remove white backgrounds from wrappers */
.fi-layout,
.fi-layout-sidebar-layout,
.fi-layout-simple {
  background-color: var(--hr-bg) !important;
}

/* Fix select options background */
option {
  background-color: var(--hr-bg-elevated) !important;
  color: var(--hr-text) !important;
}