/* Apply the serif font globally to the body */
html,
body,
p,
span,
div,
a,
label,
input,
textarea,
select,
button {
    font-family: var(--font-family-playfair) !important;
}

/* Exclude h1, h2, and h3 by resetting them back to a sans-serif font */
h1, h2, h3 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}



:root {
  /* ===========================
     Base Colors
  ============================ */
  --color-bg-light: #f9f9f9;
  --color-off-white: #fcfcfc;
  --color-bg: #111;
  --color-card-bg: #fff;
  --color-text-primary: #1e1e1e;
  --color-text-secondary: #333;
  --color-text-muted: #6b6b6b;
  --color-heading: #2c3e50;
  --color-link-hover-bg: #f0f0f0;
  --color-border-light: #eee;
  --color-border-dark: #000;
  --transparent-color: rgba(255, 255, 255, 0.95);
  
  /* ===========================
     Status Colors
  ============================ */
  --color-status-pending: #d4a017;
  --color-status-pending-bg-transparent: rgba(255, 223, 85, 0.2);
  
  --color-status-approved: #28a745;
  --color-status-approved-bg-transparent: rgba(40, 167, 69, 0.2);
  
  --color-status-accepted: #007bff;
  --color-status-accepted-bg-transparent: rgba(0, 123, 255, 0.1);
  
  --color-status-canceled: #dc3545;
  --color-status-canceled-light: #ffccd5;
  --color-status-canceled-bg-transparent: rgba(220, 53, 69, 0.2);
  
    /* ===========================
     Brand & Accent Colors
  ============================ */
  --color-primary: #2764e7;
  --color-primary-hover: #1e55c5;
  --color-accent-purple: #8975ff;
  --color-accent-blue: #4ea3ff;
  --color-accent-gradient: linear-gradient(135deg, #7c68ff, #4ea3ff);
  

    /* Employee Palette */
    --emp-color-1: #4299e1; /* Blue */
    --emp-color-2: #48bb78; /* Green */
    --emp-color-3: #ed8936; /* Orange */
    --emp-color-4: #9f7aea; /* Purple */
    --emp-color-5: #f66d9b; /* Pink */
    --emp-color-6: #38b2ac; /* Teal */


  /* popupcontainer */
  --bg-body: linear-gradient(135deg, #f1f3f6, #e5e9ef);
  --popup-bg: rgba(255, 255, 255, 0.6);
  --popup-border: rgba(255, 255, 255, 0.4);
  --overlay-bg: rgba(255, 255, 255, 0.35);

  /* Blur and saturation */
  --popup-blur: 20px;
  --overlay-blur: 14px;
  --overlay-saturation: 160%;

  /* Colors */
  --primary-color: #2764e7;
  --primary-hover: #1e55c5;
  --cancel-bg: rgba(240, 242, 245, 0.8);
  --cancel-hover: rgba(230, 232, 236, 1);
  --text-color: #1e1e1e;
  --label-color: #444;
  --border-focus: rgba(39, 100, 231, 0.15);
  
    /* main page */
  --bg-main: #eef1ff; /* page background */
  --card-bg: rgba(255, 255, 255, 0.65); /* frosted card background */
  --card-border: rgba(255, 255, 255, 0.25); /* border of frosted cards */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
  --text-dark: #1e1e1e;
  --text-muted: #6b6b6b;
  --accent-purple: #8975ff;
  --accent-blue: #4ea3ff;
  --accent-gradient: linear-gradient(135deg, #7c68ff, #4ea3ff);
  
    /* main page search input */
  --appointly-primary-color: #5a5de8;
  --appointly-primary-light: #8b8efc;
  --appointly-text-color: #1f1f2e;
  --appointly-placeholder-color: #a0a3b1;
  --appointly-shadow: 0 6px 18px rgba(90, 93, 232, 0.15);
  --appointly-font: 'Poppins', sans-serif;
  
  /* Error message */
  --color-danger-bg: #ffe0e0;
  --color-danger-text: #dc3545;
  --color-danger-button-bg: #dc3545;
  --color-danger-button-text: #fff;
  --color-danger-hover-bg: darkred;
  --color-error: #cc0000;
    
  /* Succes message */
  --color-success-bg: #e0ffe0 ;
  --color-success-text: #28a745;
  --color-success-button-bg: #28a745;
  --color-success-button-text: white;
 
  --money-color: #27ae60;
  --money-loss: #dc3545;
  
  /* Container */
 --color-container-bg: #f8f8f8;
 --container-max-width: 1200px;
 --container-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 --container-border-radius: 8px;
 --container-padding: 15px;
 
 
  /* Typography */
  --font-family-playfair: 'Playfair Display', serif;
  --font-size-base: 1rem;
  --font-size-small: 0.9rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-extra-small: 5px;
  --spacing-small: 10px;
  --spacing-medium: 15px;
  --spacing-large: 20px;
  --spacing-extra-large: 30px;
  --spacing-extra-Xlarge: 50px;


  /* Sizes */
  --size-sidebar-width: 250px;
  --size-user-bar-height: 50px;
  --size-hamburger: 30px;

  /* Borders & Radius */
  --border-thin: 1px solid var(--color-border-light);
  --border-medium: 2px solid var(--color-text-secondary);
  --border-thick: 5px solid var(--color-border-light);
  --border-radius-small: 5px;
  --border-radius-medium: 8px;
  --border-radius-large: 25px;
  --border-input-color: #007BFF;
  
  /* Button */
  --button-background-color: #007bff;
  --button-color: #fff;
  --button-border-radius: 8px;
  --button-font-weight: 500;
  --button-hover: #0056b3;

  /* Transitions */
  --transition-ease-in-out: transform 0.3s ease-in-out;
  --transition-quick: 0.2s;
  --transition-standard: 0.3s;
  --transition-color: 0.3s ease, color 0.3s ease;
  
  /* Form group */
  --form-group-margin-bottom: var(--spacing-medium);
  --form-label-margin-bottom: var(--spacing-extra-small);
  --input-padding-vertical: var(--spacing-small);
  --input-padding-horizontal: var(--spacing-medium);
  --input-border-color: #ccc;
  --input-border-color-focus: #007bff;
  --input-border-radius: var(--border-radius-small);
  --input-font-size: var(--font-size-base);
  --input-text-color: var(--color-text-secondary);
  --input-background-color: var(--color-primary-bg);
  --input-placeholder-color: #999;
  
      /* Tables 
  --table-font-size: 0.95rem;
  --table-row-margin: 20px;
  --table-border: 1px solid #ddd;
  --table-radius: 6px;
  --table-padding: 10px 15px;
  --table-border-bottom: 1px solid #eee;
  --table-label-color: #555;
  --table-label-weight: bold;
  --table-label-flex: 50%;
  

    --table-background-color: #ffffff;
  --table-header-bg: #f8f9fa;
  --table-text-color: #333333;
  --table-header-text-color: #555555;
  --table-cell-border-color: #e0e0e0;
  --table-row-hover-bg: #f1f1f1;
  --table-odd-row-bg: #fdfdfd;
  --table-even-row-bg: #ffffff;
  --status-text-on-dark-bg: #ffffff;
  --status-text-on-light-bg: #333333;
  
  */
  
     /* icon-text navigation */
  --color-icon-background: black;
  --color-icon-text: white;
  --border-medium: 2px solid #000;


/* ===========================
   AI  VARIABLES
=========================== */
  /* General colors */
  --bg: #f6f7fb;
  --card: #fff;
  --text: #0f172a;
  --muted: #6b7280;
  --brand: #2e7cf6;
  --border: #e5e7eb;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

  /* Floating Assistant Button (FAB) */
  --assistant-fab-width: 100px;
  --assistant-fab-height: 50px;
  --assistant-fab-radius: 4px;
  --assistant-fab-bg: var(--brand);
  --assistant-fab-color: #fff;
  --assistant-fab-hover-bg: #1f5acb;
  --assistant-fab-font-size: 1.2rem;
  --assistant-fab-z: 9999;
  --assistant-fab-spacing: 20px;
  --assistant-fab-mobile-spacing: 16px;

  /* Sidebar / Assistant */
  --assistant-width: 360px;
  --assistant-max-width: 92vw;
  --assistant-bg: var(--card);
  --assistant-border-left: 1px solid var(--border);
  --assistant-shadow: var(--shadow);
  --assistant-z: 50;

  --assistant-header-padding: 14px 16px;
  --assistant-header-border-bottom: 1px solid var(--border);
  --assistant-header-color: var(--text);

  --assistant-content-padding: 16px;
  --assistant-content-gap: 10px;

  /* Textarea inside assistant */
  --assistant-textarea-min-height: 110px;
  --assistant-textarea-padding: 10px;
  --assistant-textarea-radius: 12px;
  --assistant-textarea-border: 1px solid var(--border);
  --assistant-textarea-bg: var(--card);
  --assistant-textarea-color: var(--text);

  /* Suggestions buttons */
  --AI-chat-send: #fff;
  --ai-suggestion-bg: #fff;
  --ai-suggestion-color: #b88a4a;
  --ai-suggestion-border: 1px solid #eee;
  --ai-suggestion-radius: 5px;
  --ai-suggestion-padding-vertical: 0.5rem;
  --ai-suggestion-padding-horizontal: 1rem;
  --ai-suggestion-font-weight: 500;
  --ai-suggestion-hover-bg: #b88a4a;
  --ai-suggestion-hover-color: #fff;
  --ai-suggestion-active-bg: var(--brand);
  --ai-suggestion-active-color: #fff;

  
  
}





body.dark-mode {
  --bg-main: #110E00;
  --card-bg: #1a1a1a;
  --color-background: #111;
  --color-text-primary: #fff;
  --color-text-second: #fff;
  --text-dark: #2a2a2a;
  --color-off-white: #121212;
  --AI-chat-send: #232323;
  
  --color-bg: #fff;
/*   --color-card-bg: #1e1e1e; */
  --transparent-color: #111;
  
  --color-text-secondary: #ccc;
  --color-border-light: #555;
  --color-border-dark: #eee;
  --color-heading: #f0f0f0;
  --color-link-hover-bg: #444;
  --color-user-bar-heading: #f9f9f9;
  --border-medium: 2px solid #fff;
  --border-thick: 5px solid var(--color-border-light);
  --color-container-bg: #1a1a1a;
  
  
  /* --- NEW MODERN BRAND ACCENTS --- */
  --color-brand-accent-blue: #4f46e5;
  --color-brand-accent-purple: #7c3aed;
  --gradient-modern: linear-gradient(90deg, var(--color-brand-accent-blue), var(--color-brand-accent-purple));
  
  /* Table Variables (Dark Mode versions) */
   --table-border: 1px solid #444;
   --table-border-bottom: 1px solid #333;
   --table-label-color: #eee;
   
   /* table colors darkmode*/
      --table-background-color: #2b2b2b;
  --table-header-bg: #3a3a3a;
  --table-text-color: #e0e0e0; 
  --table-header-text-color: #f1f1f1;
  --table-cell-border-color: #444444;
  --table-row-hover-bg: #3c3c3c;
  --table-odd-row-bg: #2f2f2f;
  --table-even-row-bg: #2b2b2b;
  --table-label-color: #bbbbbb; 
  --status-text-on-light-bg: #333333; 
    
  /* Input darkmode */
  --input-border-color: #555;
  --input-border-color-focus: #00aaff;
  --input-text-color: #eee;
  --input-background-color: #333;
  --input-placeholder-color: #777;
  
  /* Transition */
    --transition-color: 0.3s ease, color 0.3s ease;
    
    /* icon-text navigation */
  --color-icon-background: white;
  --color-icon-text: #000;
  --border-medium: 2px solid #000;
}