:root {
  /* ===== 🎨 Color Palette (generic semantic names) ===== */
  --color-primary: #1E3A8A;           /* Brand primary (currently Deep Blue) */
  --color-primary-lighter: #6072a4;           /* Brand primary (currently Deep Blue) */
  --color-primary-light: #3B82F6;     /* Lighter shade of primary */
  --color-secondary: #0D9488;         /* Brand secondary (currently Teal) */
  --color-secondary-lighter: #3e8d86;
  --color-secondary-light: #14B8A6;   /* Lighter shade of secondary */
  --color-background: #F9FAFB;        /* Neutral background */
  --color-text: #111827;              /* Main text (dark gray) */
  --color-link: var(--color-primary-light);
  --color-link-hover: var(--color-secondary-light);
  --color-success: #16A34A;           /* Green (success state) */
  --color-success-light: #22C55E;     /* Lighter success */
  --color-success-rgb: 22 163 74;
  --color-warning: #F59E0B;           /* Amber (warning state) */
  --color-warning-light: #FBBF24;
  --color-warning-rgb: 245 158 11;

  --color-danger: #DC2626;            /* Red (error/urgent) */
  --color-danger-light: #EF4444;
  --color-danger-rgb: 220 38 38;

  /* Additional colors for a complete palette */
  --color-info: #0EA5E9;
  --color-info-light: #bae6fd;
  --color-info-rgb: 14 165 233;
  --color-dark: #1E293B;
  --color-dark-light: #334155;
  --color-dark-rgb: 30 41 59;
  --color-light: #F1F5F9;
  --color-light-border: #E2E8F0;
  --color-white: #FFFFFF;
  --color-sign: #7e22ce;
  --color-sign-light: #d8b4fe;

  /* RGB helpers (for alpha usage) */
  --color-primary-rgb: 30 58 138;
  --color-primary-light-rgb: 59 130 246;
  --color-secondary-rgb: 13 148 136;
  --color-secondary-light-rgb: 20 184 166;
  --color-background-rgb: 249 250 251;
  --color-text-rgb: 17 24 39;

  /* ===== Text Variants ===== */
  --color-text-light: #ffffff;
  --color-text-muted: #6B7280;        /* Gray-500 */
  --color-text-dark: #1E293B;        /* Gray-500 */

  /* ===== Semantic Usage ===== */
  --header-bg: var(--color-primary);
  --header-text: #ffffff;

  /* Buttons */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-hover-bg: var(--color-primary-light);
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: var(--color-secondary);
  --btn-secondary-hover-bg: var(--color-secondary-light);
  --btn-secondary-text: #ffffff;

  --color-white: #ffffff;

  /* States */
  --btn-disabled-bg: rgb(var(--color-text-rgb) / 0.10);
  --btn-disabled-text: rgb(var(--color-text-rgb) / 0.40);
  --border-subtle: rgb(var(--color-text-rgb) / 0.12);
  --surface-highlight: rgb(var(--color-primary-light-rgb) / 0.06);
  --focus-ring: 0 0 0 3px rgb(var(--color-primary-light-rgb) / 0.40);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-primary-light: linear-gradient(135deg, var(--color-primary-lighter) 0%, var(--color-secondary-lighter) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary-light) 100%);
  --gradient-hover: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary-light) 100%);
  --gradient-subtle: linear-gradient(135deg, var(--color-background) 0%, rgb(var(--color-secondary-light-rgb) / 0.12) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-light) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-light) 100%);
  --gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-light) 100%);
  --gradient-sign: linear-gradient(135deg, var(--color-sign) 0%, var(--color-sign-light) 100%);

  /* ===== Typography ===== */
  --font-base: 1rem;
  --font-xs: 0.7rem;
  --font-sm: 0.875rem;
  --font-lg: 1.25rem;
  --font-xl: 1.5rem;

  /* ===== Spacing ===== */
  --spacing: 1rem;
  --spacing-sm: 0.5rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* ===== Borders & Layout ===== */
  --border-radius: 15px;
  --border-radius-sm: 5px;

  --sidebar-width: 280px;
  --header-height: 70px;
  --subheader-height: 48px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --light-border: #e2e8f0;
}

body {
  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  background: var(--color-background);
  color: var(--color-text);
}

.bg-success-light   { background-color: rgba(25, 135, 84, 0.15) !important; }
.bg-warning-light   { background-color: rgba(255, 193, 7, 0.15) !important; }
.bg-danger-light    { background-color: rgba(220, 53, 69, 0.15) !important; }
.bg-secondary-light { background-color: rgba(108, 117, 125, 0.15) !important; }

.table {
    border-color: transparent !important;
}
.signature-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto; /* allows tooltip */
}
.table-fixed-header {
    width: 100%;
}

.table-body-scroll {
    max-height: 320px; /* ~6 rows */
    overflow-y: auto;
}

/* Keep column widths aligned */
.table-fixed-header table {
    table-layout: fixed;
    width: 100%;
}
/* Firefox */
.table-body-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-light-border) transparent;
}

/* Chrome / Edge / Safari */
.table-body-scroll::-webkit-scrollbar {
    width: 8px;
}

.table-body-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.table-body-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-light-border);
    border-radius: 12px;
}

.table-body-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--color-text-rgb) / 0.25);
}