/* ===================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =================================== */

:root {
  /* ===============================
     PRIMARY BRAND COLORS
     =============================== */
  --primary: var(--main-primary);
  --secondary: var(--main-secondary);
  --accent: var(--main-accent);
  --accent-dark: color-mix(in srgb, var(--accent) 70%, #000);
  --link-color: var(--primary);
  --second-text: #9ca4f5;

  /* ===============================
     BOOTSTRAP COLOR VARIABLES
     =============================== */
  --bs-blue: var(--primary);
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #e91e63;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #FFF;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  /* ===============================
     GRAYSCALE COLORS
     =============================== */
  --white: #FFF;
  --white-alt: #FFF;
  --black: #000000;
  --black-alt: #000;
  --gray-50: #fafafa;
  --gray-100: #f8f8f8;
  --gray-150: #f7f7f9;
  --gray-170: #f7f7f7;
  --gray-200: #f2f2f2;
  --gray-250: #f0f0f0;
  --gray-300: #ebebeb;
  --gray-350: #e4e3e3;
  --gray-400: #ddd;
  --gray-450: #cccccc;
  --gray-500: #CCC;
  --gray-550: #aaa;
  --gray-600: #999;
  --gray-650: #928f8f;
  --gray-680: #b5b5b5;
  --gray-700: #888383;
  --gray-750: #898686;
  --form-border: #ced4da;
  --form-border-focus: #dee1e4;
  --gray-800: #666666;
  --gray-850: #595959;
  --gray-870: #5b5b5c;
  --gray-900: #535353;
  --gray-950: #444;
  --gray-light: #a6a6a6;
  --gray-medium: #707070;
  --purple-text: #616488;
  --text-gray: #404040;
  --off-white: #fcfcfc;
  --light-gray-alt: #efefef;
  --border-gray-1: #f2f2f2;
  --text-gray: #404040;
  --off-white: #fcfcfc;
  --light-gray-alt: #efefef;
  --border-gray-1: #f2f2f2;

  /* ===============================
     DARK COLORS
     =============================== */
  --dark-100: #393f46;
  --dark-200: #333333;
  --dark-250: #333;
  --dark-300: #303030;
  --dark-400: #22262a;
  --dark-500: #1A1A1A;
  --dark-600: #19191c;
  --dark-700: var(--primary);
  --dark-800: #0f0e0e;
  --dark-landing: #27293a;
  --navy-blue: var(--primary);

  /* ===============================
     BLUE VARIATIONS
     =============================== */
  --blue-primary: var(--primary);
  --blue-secondary: var(--link-color);
  --blue-light: var(--second-text);
  --blue-dark: #27293a;
  --blue-darker: #1e299c;
  --blue-bootstrap: var(--primary);
  --blue-hover: #0b5ed7;
  --blue-active: #0a58ca;
  --blue-accent: #4550b1;
  --blue-bg: #d9e6f8;
  --blue-nav: #ecf4ff;
  --blue-badge: #EBF1FA;
  --blue-badge-text: #095DDA;
  --blue-border: #0a53be;

  /* ===============================
     YELLOW/GOLD VARIATIONS
     =============================== */
  --yellow-primary: var(--accent);
  --yellow-dark: var(--accent-dark);
  --yellow-badge: #fbf5e4;
  --yellow-badge-text: #a47c00;

  /* ===============================
     GREEN VARIATIONS
     =============================== */
  --green-primary: #29c05c;
  --green-success: #169441;
  --green-bg: #ebfaf0;
  --green-light: #EEFFF4;
  --green-text: green;

  /* ===============================
     RED/ERROR VARIATIONS
     =============================== */
  --red-primary: #dc3545;
  --red-danger: #e90000;
  --red-error: red;
  --red-delete: #E12222;
  --red-bg: #fff0f0;
  --red-light: #FFF0F0;
  --red-lighter: #FFECEC;
  --red-reject: #ca2828;
  --red-reject-bg: #fff2f2;

  /* ===============================
     ORANGE VARIATIONS
     =============================== */
  --orange-primary: #d16400;
  --orange-bg: #fff6ed;

  /* ===============================
     MUTED/NEUTRAL COLORS
     =============================== */ 
  --muted-blue: #8d9ba9;
  --muted-text: #8e8f8f;
  --muted-nav: #a6a6a6;
  --disabled: #808080;
  --progress-text: #707070;
  --category-text: #616488;
  --form-text: #404040;
  --tag-text: #4d4d4d;

  /* ===============================
     BACKGROUND COLORS
     =============================== */
  --bg-main: #27293a;
  --bg-light: #f7f7f9;
  --bg-lighter: #FCFCFC;
  --bg-gray: #f5f5f5;
  --bg-form: #f0f2f5;
  --bg-summary: #EFEFEF;
  --bg-order: #FFF;
  --bg-delete: #ECEEFF;

  /* ===============================
     BORDER COLORS
     =============================== */
  --border-light: #EFEFEF;
  --border-main: #f1f1f1;
  --border-form: #F2F2F2;
  --border-gray: #eee;

  /* ===============================
     STATUS COLORS
     =============================== */
  --status-online: #29c05c;
  --status-offline: #666666;
  --status-warning: var(--accent);
  --status-error: #dc3545;

  /* ===============================
     VARIANT COLORS
     =============================== */
  --variant-selected: #D27B7B;
  --variant-hover: #000;
  --variant-bg: #e4e3e3;

  /* ===============================
     SPECIAL COLORS
     =============================== */
  --transparent: transparent;
  --overlay: rgba(0, 0, 0, 0.4);
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2); 
  --shadow-tooltip: rgba(0, 0, 0, 0.36);
  
  /* Mobile navbar specific colors */
  --navbar-link-mobile: #EECECE;
}

/* ===================================
   EXISTING STYLES (UPDATED)
   =================================== */

.maintop {
    border-bottom: 1px solid var(--border-light);
}

.nav-item-label-selected {
    color: var(--gray-500) !important;
}