/**
 * IBFS / HR Connect — Institutional palette (refined)
 * ---------------------------------------------------
 * Primary  : Deeper slate blue (stronger CTAs)
 * Accent   : Warm institutional gold (brand only)
 * Warning  : Separate amber (alerts ≠ brand)
 * Sidebar  : Deep slate
 * Neutrals : Soft warm-cool slate
 */


/* =========================================================
   Brand Tokens
   ========================================================= */

   :root {

    /* Primary Brand — slightly deeper for clearer CTAs */
  
    --ibfs-primary: #3F5F7C;
    --ibfs-primary-hover: #334E66;
    --ibfs-primary-rgb: 63, 95, 124;
  
  
    /* Brand Accent (identity) — NOT used as semantic warning */
  
    --ibfs-gold: #B18A45;
    --ibfs-gold-rgb: 177, 138, 69;
  
  
    /* Sidebar */
  
    --ibfs-sidebar: #202D3D;
    --ibfs-sidebar-text: #CBD5E1;
  
  
    /* Surfaces — faint warm cast for softer reading */
  
    --ibfs-body-bg: #F6F5F3;
    --ibfs-heading: #263442;
    --ibfs-body-text: #536170;
    --ibfs-muted: #8A96A3;
    --ibfs-border: #E3E5E8;
  
  
    /* Semantic */
  
    --ibfs-success: #3F7A62;
    --ibfs-success-rgb: 63, 122, 98;
  
    --ibfs-info: #5D7F9B;
    --ibfs-info-rgb: 93, 127, 155;
  
    --ibfs-warning: #B7791F;
    --ibfs-warning-rgb: 183, 121, 31;
  
    --ibfs-danger: #A94B4B;
    --ibfs-danger-rgb: 169, 75, 75;

    /* Modern UI surface tokens (from login aesthetic) */
    --ibfs-radius-sm: 10px;
    --ibfs-radius: 14px;
    --ibfs-radius-lg: 20px;
    --ibfs-shadow-sm: 0 4px 14px -8px rgba(38, 52, 66, 0.12);
    --ibfs-shadow: 0 16px 40px -20px rgba(38, 52, 66, 0.14);
    --ibfs-shadow-hover: 0 18px 36px -16px rgba(38, 52, 66, 0.18);
    --ibfs-input-bg: #f8fafc;
    --ibfs-transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  
  /* =========================================================
     Bootstrap / Vuexy — Light Theme
     ========================================================= */
  
  :root,
  [data-bs-theme="light"] {
  
    /* Primary */
  
    --bs-purple:
      var(--ibfs-primary);
  
    --bs-primary:
      var(--ibfs-primary);
  
    --bs-primary-rgb:
      var(--ibfs-primary-rgb);
  
    --bs-primary-text-emphasis:
      #2A4054;
  
    --bs-primary-bg-subtle:
      #E9EEF3;
  
    --bs-primary-border-subtle:
      #C2CEDA;
  
  
    /* Secondary */
  
    --bs-secondary:
      #687686;
  
    --bs-secondary-rgb:
      104, 118, 134;
  
  
    /* Success */
  
    --bs-success:
      var(--ibfs-success);
  
    --bs-success-rgb:
      var(--ibfs-success-rgb);
  
  
    /* Info */
  
    --bs-info:
      var(--ibfs-info);
  
    --bs-info-rgb:
      var(--ibfs-info-rgb);
  
  
    /* Warning — semantic alert (separate from brand gold) */
  
    --bs-warning:
      var(--ibfs-warning);
  
    --bs-warning-rgb:
      var(--ibfs-warning-rgb);
  
  
    /* Danger */
  
    --bs-danger:
      var(--ibfs-danger);
  
    --bs-danger-rgb:
      var(--ibfs-danger-rgb);
  
  
    /* Body */
  
    --bs-body-bg:
      var(--ibfs-body-bg);
  
    --bs-body-color:
      var(--ibfs-body-text);
  
  
    /* Typography */
  
    --bs-heading-color:
      var(--ibfs-heading);
  
    --bs-secondary-color:
      var(--ibfs-muted);
  
    --bs-tertiary-color:
      var(--ibfs-muted);
  
  
    /* Borders */
  
    --bs-border-color:
      var(--ibfs-border);
  
  
    /* Links */
  
    --bs-link-color:
      var(--ibfs-primary);
  
    --bs-link-hover-color:
      var(--ibfs-primary-hover);
  
  
    /* Vuexy */
  
    --bs-menu-bg:
      var(--ibfs-sidebar);
  
    --bs-paper-bg:
      #FFFFFF;
  }
  
  
  /* =========================================================
     Bootstrap / Vuexy — Dark Theme
     ========================================================= */
  
  [data-bs-theme="dark"] {
  
    /* Primary */
  
    --bs-primary: #7898B8;
  
    --bs-primary-rgb:
      120, 152, 184;
  
    --bs-primary-text-emphasis:
      #D1DFEC;
  
    --bs-primary-bg-subtle:
      #293B4E;
  
    --bs-primary-border-subtle:
      #435A72;
  
  
    /* Secondary */
  
    --bs-secondary: #8795A4;
  
    --bs-secondary-rgb:
      135, 149, 164;
  
  
    /* Success */
  
    --bs-success: #6AA487;
  
    --bs-success-rgb:
      106, 164, 135;
  
  
    /* Info */
  
    --bs-info: #7C9DB7;
  
    --bs-info-rgb:
      124, 157, 183;
  
  
    /* Warning */
  
    --bs-warning: #D4A017;
  
    --bs-warning-rgb:
      212, 160, 23;
  
  
    /* Danger */
  
    --bs-danger: #C96B6B;
  
    --bs-danger-rgb:
      201, 107, 107;
  
  
    /* Sidebar */
  
    --bs-menu-bg:
      #141E2A;
  
  
    /* Body */
  
    --bs-body-bg:
      #141E2A;
  
    --bs-body-color:
      #CBD5E1;
  
  
    /* Headings */
  
    --bs-heading-color:
      #E2E8F0;
  
  
    /* Borders */
  
    --bs-border-color:
      #334155;
  
  
    /* Links */
  
    --bs-link-color:
      #7898B8;
  
    --bs-link-hover-color:
      #9BB5CF;
  
  
    /* Paper */
  
    --bs-paper-bg:
      #1D2937;
  }
  
  
  /* =========================================================
     Soft Label Backgrounds
     ========================================================= */
  
  .bg-label-primary {
  
    background-color:
      rgba(var(--bs-primary-rgb), 0.11) !important;
  
    color:
      var(--bs-primary) !important;
  }
  
  
  .bg-label-warning {
  
    background-color:
      rgba(var(--bs-warning-rgb), 0.14) !important;
  
    color:
      var(--bs-warning) !important;
  }

  /* Brand gold — identity accents (badges, highlights), not alerts */
  .bg-label-gold,
  .bg-label-brand {
    background-color: rgba(var(--ibfs-gold-rgb), 0.14) !important;
    color: var(--ibfs-gold) !important;
  }

  .text-gold,
  .text-brand {
    color: var(--ibfs-gold) !important;
  }

  .border-gold {
    border-color: var(--ibfs-gold) !important;
  }
  
  
  .bg-label-success {
  
    background-color:
      rgba(var(--bs-success-rgb), 0.12) !important;
  
    color:
      var(--bs-success) !important;
  }
  
  
  .bg-label-info {
  
    background-color:
      rgba(var(--bs-info-rgb), 0.12) !important;
  
    color:
      var(--bs-info) !important;
  }
  
  
  .bg-label-danger {
  
    background-color:
      rgba(var(--bs-danger-rgb), 0.12) !important;
  
    color:
      var(--bs-danger) !important;
  }
  
  
  /* =========================================================
     Sidebar
     ========================================================= */
  
  .layout-menu,
  .menu-vertical,
  .bg-menu-theme {
  
    background-color:
      var(--ibfs-sidebar) !important;
  
    color:
      var(--ibfs-sidebar-text);
  }
  
  
  .menu-vertical .menu-link {
  
    color:
      rgba(255, 255, 255, 0.78) !important;
  }
  
  
  .menu-vertical .menu-link:hover {
  
    color:
      #FFFFFF !important;
  }
  
  
  .menu-vertical .menu-icon {
  
    color:
      rgba(255, 255, 255, 0.64) !important;
  }
  
  
  .menu-vertical .menu-header {
  
    color:
      rgba(255, 255, 255, 0.45) !important;
  }
  
  
  /* Active Menu */
  
  .bg-menu-theme.menu-vertical
  .menu-item.active > .menu-link:not(.menu-toggle),
  
  .menu-vertical
  .menu-item.active > .menu-link:not(.menu-toggle) {
  
    background:
      linear-gradient(
        270deg,
        rgba(var(--ibfs-primary-rgb), 0.42) 0%,
        var(--ibfs-primary) 100%
      ) !important;
  
    box-shadow:
      0 2px 8px
      rgba(var(--ibfs-primary-rgb), 0.25);
  
    color:
      #FFFFFF !important;
  }
  
  
  /* Menu Hover */
  
  .menu-vertical
  .menu-item .menu-link:hover:not(.active) {
  
    background-color:
      rgba(var(--ibfs-primary-rgb), 0.12) !important;
  }
  
  
  /* =========================================================
     Primary Button — modern soft gradient
     ========================================================= */
  
  .btn {
    border-radius: var(--ibfs-radius-sm);
    font-weight: 600;
    transition: transform var(--ibfs-transition), box-shadow var(--ibfs-transition), background var(--ibfs-transition), border-color var(--ibfs-transition), color var(--ibfs-transition);
  }

  .btn-primary {
  
    --bs-btn-color:
      #FFFFFF;
  
    --bs-btn-bg:
      var(--bs-primary);
  
    --bs-btn-border-color:
      var(--bs-primary);
  
    --bs-btn-hover-color:
      #FFFFFF;
  
    --bs-btn-hover-bg:
      var(--ibfs-primary-hover);
  
    --bs-btn-hover-border-color:
      var(--ibfs-primary-hover);
  
    --bs-btn-focus-shadow-rgb:
      var(--bs-primary-rgb);
  
    --bs-btn-active-color:
      #FFFFFF;
  
    --bs-btn-active-bg:
      var(--ibfs-primary-hover);
  
    --bs-btn-active-border-color:
      #2A4054;
  
    --bs-btn-disabled-color:
      #FFFFFF;
  
    --bs-btn-disabled-bg:
      var(--bs-primary);
  
    --bs-btn-disabled-border-color:
      var(--bs-primary);
  
    background-image: linear-gradient(135deg, var(--bs-primary) 0%, var(--ibfs-primary-hover) 100%);
    border: none;
    box-shadow: 0 8px 22px -10px rgba(var(--ibfs-primary-rgb), 0.45);
  }

  .btn-primary:hover,
  .btn-primary:focus {
    background-image: linear-gradient(135deg, var(--ibfs-primary-hover) 0%, #2A4054 100%);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(var(--ibfs-primary-rgb), 0.5);
  }

  .btn-outline-primary:hover {
    transform: translateY(-1px);
  }

  .btn-label-primary,
  .btn-label-secondary,
  .btn-label-success,
  .btn-label-info,
  .btn-label-warning,
  .btn-label-danger {
    border-radius: var(--ibfs-radius-sm);
  }
  
  
  /* =========================================================
     Outline Primary
     ========================================================= */
  
  .btn-outline-primary {
  
    --bs-btn-color:
      var(--bs-primary);
  
    --bs-btn-border-color:
      var(--bs-primary);
  
    --bs-btn-hover-color:
      #FFFFFF;
  
    --bs-btn-hover-bg:
      var(--bs-primary);
  
    --bs-btn-hover-border-color:
      var(--bs-primary);
  
    --bs-btn-focus-shadow-rgb:
      var(--bs-primary-rgb);
  
    --bs-btn-active-color:
      #FFFFFF;
  
    --bs-btn-active-bg:
      var(--bs-primary);
  
    --bs-btn-active-border-color:
      var(--bs-primary);
  
    --bs-btn-disabled-color:
      var(--bs-primary);
  
    --bs-btn-disabled-bg:
      transparent;
  }
  
  
  /* =========================================================
     Primary Utilities
     ========================================================= */
  
  .text-primary {
  
    color:
      var(--bs-primary) !important;
  }
  
  
  .bg-primary {
  
    background-color:
      var(--bs-primary) !important;
  }
  
  
  .border-primary {
  
    border-color:
      var(--bs-primary) !important;
  }
  
  
  .link-primary {
  
    color:
      var(--bs-primary) !important;
  }
  
  
  .link-primary:hover,
  .link-primary:focus {
  
    color:
      var(--ibfs-primary-hover) !important;
  }
  
  
  .badge.bg-primary {
  
    background-color:
      var(--bs-primary) !important;
  }
  
  
  /* =========================================================
     Alerts
     ========================================================= */
  
  .alert-primary {
  
    --bs-alert-color:
      #2A4054;
  
    --bs-alert-bg:
      #E9EEF3;
  
    --bs-alert-border-color:
      #C2CEDA;
  }

  .alert-warning {
    --bs-alert-color: #7A5214;
    --bs-alert-bg: #FBF3E4;
    --bs-alert-border-color: #EBD5A6;
  }

  .alert-danger {
    --bs-alert-color: #6E2F2F;
    --bs-alert-bg: #F8EAEA;
    --bs-alert-border-color: #E5BCBC;
  }

  .alert-success {
    --bs-alert-color: #2A5242;
    --bs-alert-bg: #E8F2ED;
    --bs-alert-border-color: #B7D4C6;
  }
  
  
  /* =========================================================
     Forms — soft modern inputs (login style)
     ========================================================= */
  
  .form-control,
  .form-select,
  .input-group-text {
    border-radius: var(--ibfs-radius-sm);
    border-color: rgba(38, 52, 66, 0.12);
    background-color: var(--ibfs-input-bg);
    color: var(--ibfs-heading);
    transition: border-color var(--ibfs-transition), box-shadow var(--ibfs-transition), background-color var(--ibfs-transition);
  }

  .form-control::placeholder {
    color: var(--ibfs-muted);
  }

  .form-control:focus,
  .form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.14);
  }

  .input-group.input-group-merge {
    border-radius: var(--ibfs-radius-sm);
    overflow: hidden;
    border: 1px solid rgba(38, 52, 66, 0.12);
    background: var(--ibfs-input-bg);
    transition: border-color var(--ibfs-transition), box-shadow var(--ibfs-transition), background-color var(--ibfs-transition);
  }

  .input-group.input-group-merge:focus-within {
    border-color: var(--bs-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.14);
  }

  .input-group.input-group-merge .form-control,
  .input-group.input-group-merge .input-group-text {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .input-group.input-group-merge:focus-within .input-group-text {
    color: var(--bs-primary);
  }

  .form-label {
    color: var(--ibfs-muted);
    font-weight: 600;
    font-size: 0.8125rem;
  }

  .form-check-input:checked,
  .form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }
  
  
  /* =========================================================
     Progress
     ========================================================= */
  
  .progress-bar {
  
    background-color:
      var(--bs-primary);
  }
  
  
  /* =========================================================
     Pagination
     ========================================================= */
  
  .page-link {
  
    color:
      var(--bs-primary);
  }
  
  
  .page-item.active .page-link {
  
    background-color:
      var(--bs-primary);
  
    border-color:
      var(--bs-primary);
  }
  
  
  /* =========================================================
     Dropdown
     ========================================================= */
  
  .dropdown-item.active,
  .dropdown-item:active {
  
    background-color:
      var(--bs-primary);
  }
  
  
  /* =========================================================
     Navigation Pills
     ========================================================= */
  
  .nav-pills .nav-link.active {
  
    background-color:
      var(--bs-primary);
  }
  
  
  /* =========================================================
     List Groups
     ========================================================= */
  
  .list-group-item.active {
  
    background-color:
      var(--bs-primary);
  
    border-color:
      var(--bs-primary);
  }
  
  
  /* =========================================================
     Spinner
     ========================================================= */
  
  .spinner-border.text-primary,
  .spinner-grow.text-primary {
  
    color:
      var(--bs-primary) !important;
  }
  
  
  /* =========================================================
     Tables
     ========================================================= */
  
  .table-primary {
  
    --bs-table-color:
      #263442;
  
    --bs-table-bg:
      #E9EEF3;
  
    --bs-table-border-color:
      #C2CEDA;
  }
  
  
  .table > :not(caption) > * > * {
  
    border-bottom-color:
      var(--ibfs-border);
  }
  
  
  /* =========================================================
     Accordion
     ========================================================= */
  
  .accordion-button:not(.collapsed) {
  
    color:
      #2A4054;
  
    background-color:
      #E9EEF3;
  }
  
  
  /* =========================================================
     Range
     ========================================================= */
  
  .form-range::-webkit-slider-thumb {
  
    background-color:
      var(--bs-primary);
  }
  
  
  .form-range::-moz-range-thumb {
  
    background-color:
      var(--bs-primary);
  }
  
  
  /* =========================================================
     Cards / Modals / Alerts — soft modern surfaces
     ========================================================= */
  
  .card {
    border: 1px solid var(--ibfs-border);
    border-radius: var(--ibfs-radius);
    box-shadow: var(--ibfs-shadow-sm);
    background-color: var(--bs-paper-bg, #fff);
  }

  .card-header {
    background: transparent;
    border-bottom-color: var(--ibfs-border);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }

  .card-header .card-title,
  .card-title {
    color: var(--ibfs-heading);
    font-weight: 700;
  }

  .modal-content {
    border: 1px solid var(--ibfs-border);
    border-radius: var(--ibfs-radius-lg);
    box-shadow: var(--ibfs-shadow);
  }

  .modal-header,
  .modal-footer {
    border-color: var(--ibfs-border);
  }

  .alert {
    border-radius: var(--ibfs-radius-sm);
    border-width: 1px;
  }

  .dropdown-menu {
    border: 1px solid var(--ibfs-border);
    border-radius: var(--ibfs-radius-sm);
    box-shadow: var(--ibfs-shadow);
  }

  .badge {
    font-weight: 600;
  }

  .badge.rounded-pill {
    padding-inline: 0.7rem;
  }

  /* Tables */
  .table thead th {
    color: var(--ibfs-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom-color: var(--ibfs-border) !important;
    background: rgba(245, 246, 248, 0.85);
  }

  .card-datatable,
  .card .table {
    border-radius: var(--ibfs-radius-sm);
  }

  /* Navbar */
  .layout-navbar {
    border-bottom: 1px solid var(--ibfs-border) !important;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: none !important;
  }

  .navbar-detached {
    border-radius: var(--ibfs-radius) !important;
    margin-block-start: 0.75rem !important;
    border: 1px solid var(--ibfs-border);
    box-shadow: var(--ibfs-shadow-sm) !important;
  }

  /* Page chrome */
  .content-wrapper {
    background: transparent;
  }

  .container-p-y {
    padding-block: 1.25rem !important;
  }

  /* Soft pagination */
  .page-link {
    border-radius: 8px !important;
    margin-inline: 2px;
    border-color: var(--ibfs-border);
  }

  .pagination {
    gap: 0.15rem;
  }
  
  
  /* =========================================================
     Typography
     ========================================================= */
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  
    color:
      var(--ibfs-heading);
  }
  
  
  /* =========================================================
     Body
     ========================================================= */
  
  body {
  
    background-color:
      var(--bs-body-bg);
  
    color:
      var(--bs-body-color);
  }