@charset "UTF-8";

/* ========================================
   CSS CUSTOM PROPERTIES / DESIGN TOKENS
   Booster2 Application Design System
   Created: November 26, 2025
   ======================================== */

:root {
   /* ========================================
     COLOR SYSTEM
     ======================================== */

   /* Brand Colors */
   --color-primary: #6b5dfa;
   --color-primary-hover: #5a4ce9;
   --color-primary-light: #7e85c1;
   --color-primary-lighter: #e2e9ff;
   --color-primary-lightest: #d9d7f9;
   --color-primary-dark: #0056b3;

   --color-secondary: #515353;
   --color-secondary-hover: #5a6368;
   --color-secondary-light: #5a6368;

   /* Neutral Colors */
   --color-text: #43454f;
   --color-text-dark: #2b2d35;
   --color-text-light: #5c5c5c;
   --color-text-lighter: #787878;
   --color-text-lightest: #cecece;

   --color-background: #f4f7f9;
   --color-background-alt: #f9f9f9;
   --color-background-dark: #e4e4e4;
   --color-background-disabled: #f2f7ff;
   --color-background-hover: #d8ecff;
   --color-background-hover-light: #ececff;
   --color-background-light-purple: #dce6f8;

   /* Background aliases for convenience */
   --color-bg: #fbfbfb;
   --color-bg-light: #e9eff3;
   --color-bg-lighter: #f2f7ff;
   --color-bg-lightest: #f8f8fb;

   --color-white: #ffffff;
   --color-black: #000000;

   --color-border: #dedede;
   --color-border-dark: #c8c8c8;
   --color-border-darker: #6c757d;
   --color-border-light: #e1e1e1;
   --color-border-lighter: #e5edf2;

   --color-disabled: #bec7d7;
   --color-disabled-light: #d9d9d9;

   /* State Colors */
   --color-success: #4d988e;
   --color-success-dark: #4d988e;
   --color-error: #dc3545;
   --color-error-light: #ff0000;
   --color-danger: #dc3545; /* Alias for error */
   --color-danger-dark: #a03131;
   --color-danger-light: #fec6d0;
   --color-danger-lighter: #f57d7d;
   --color-warning: #f6bb68;
   --color-warning-dark: #92621b;
   --color-warning-light: #ffcd83;
   --color-warning-lighter: #effd5f;
   --color-info: #03abf2;
   --color-info-dark: #03313c;
   --color-info-light: #6eb8c8;
   --color-info-lighter: #acd7e1;

   /* UI Colors */
   --color-sidebar: #43454f;
   --color-sidebar-dark: #2b2d35;
   --color-sidebar-border: #6c757d;
   --color-header: #43454f;
   --color-modal-overlay: rgba(0, 0, 0, 0.5);
   --color-tooltip: #5c5c5c;
   --color-hover: #f6f6fe;

   /* Accent Colors */
   --color-memo: #fff7d1;
   --color-fusen: rgba(255, 222, 128, 0.65);
   --color-highlight: #4c4f4f;
   --color-placeholder: #e4e4e4;

   /* Graph/Chart Colors */
   --color-purple: #6b5dfa;
   --color-purple-light: #8692ff;
   --color-purple-lighter: #b8bef5;
   --color-purple-lightest: #c3c7ed;
   --color-purple-dark: #4c3aff;
   --color-purple-darker: #666EB7;
   --color-purple-darkest: #6E77AB;

   --color-pink: #ec4c86;
   --color-pink-light: #fa5a95;
   --color-pink-lighter: #f9c2e6;
   --color-pink-dark: #9f1949;
   --color-pink-darker: #7d1337;

   --color-emerald: #6eb8c8;
   --color-emerald-light: #83cad9;
   --color-emerald-lighter: #f3f9fb;
   --color-emerald-dark: #195a67;
   --color-emerald-darker: #0f3d46;

   --color-yellow: #f6bb68;
   --color-yellow-light: #fcead1;
   --color-yellow-lighter: #fef7eb;
   --color-yellow-dark: #6e4711;
   --color-yellow-darker: #4d3208;

   --color-green: #8fc17f;
   --color-green-light: #d8e6d4;
   --color-green-lighter: #edf4eb;
   --color-green-dark: #3b5332;
   --color-green-darker: #263a22;

   --color-blue: #7ba8d0;
   --color-blue-light: #dfeaf4;
   --color-blue-lighter: #f0f6fa;
   --color-blue-dark: #38668f;
   --color-blue-darker: #254a68;
   --color-blue-purple:  #739ee9;

   --color-red: #d24c3d;
   --color-gray: #BEBEBE;

   /* Graph color aliases */
   --color-graph-pink: #cf7697;
   --color-graph-purple: #8287bb;
   --color-graph-blue: #7ba8d0;
   --color-graph-emerald: #6eb8c8;
   --color-graph-yellow: #f6bb68;
   --color-graph-green: #8fc17f;

   /* Graph description */
   --color-graph-description-background-purple: #d5d7ed;
   --color-graph-description-text-purple: #343962;
   --color-graph-description-background-pink: #f3dbe4;
   --color-graph-description-text-pink: #823854;
   --color-graph-description-background-emerald: #e7f3f6;
   --color-graph-description-text-emerald: #195a67;
   --color-graph-description-background-yellow: #fcead1;
   --color-graph-description-text-yellow: #6e4711;
   --color-graph-description-background-green: #d8e6d4;
   --color-graph-description-text-green: #3b5332;
   --color-graph-description-background-blue: #dfeaf4;
   --color-graph-description-text-blue: #38668f;

   /* Approval Status */
   --color-approval-unprocessed-background: #F9C2E6;
   --color-approval-unprocessed-text: #9f1949;

    --color-approval-approving-background: #FED9A2;
    --color-approval-approving-text: #92621B;

    --color-approval-approved-background: #acd7e1;
    --color-approval-approved-text: #03313c;

    --color-approval-denied-background: #E0E0EA;
    --color-approval-denied-text: #e90061;

    --color-approval-withdrawal-background: #E0E0EA;
    --color-approval-withdrawal-text: #8A8A8A;

    --color-approval-noapprovalrequired-background: #AAAAAA;
    --color-approval-noapprovalrequired-text: #43454F;

    --color-eval-end-background: #61688c;
    --color-eval-end-text: #fff;


   /* Gradients */
   --gradient-struct: linear-gradient(
      90deg,
      #ec4c86 0%,
      #e352b3 25%,
      #965af9 76.04%,
      #6b5dfa 100%
   );
   --gradient-struct-48: linear-gradient(
      48deg,
      #ec4c86 1.54%,
      #e352b3 25.87%,
      #965af9 70.48%,
      #6b5dfa 90.76%
   );
   --gradient-header: linear-gradient(
      to right,
      #ec4c86,
      #e352b3,
      #965af9,
      #6b5dfa
   );
   --gradient-pink: linear-gradient(to top, #a03131 0%, #ff0000 90%);

   /* Toggle Switch */
    --color-switch-background: #d8dee9;

   /* ========================================
     TYPOGRAPHY SCALE (fluid responsive)
     Base: 16px = 1rem, Design base: 13px
     Uses clamp() for automatic responsive scaling
     ======================================== */

   --font-3xs: 0.4375rem; /* 7px */
   --font-2xs: 0.46875rem; /* 7.5px */
   --font-xs: 0.5rem; /* 8px */
   --font-sm: 0.62rem; /* 9px */
   --font-base: 0.65625rem; /* 10.5px - body default */
   --font-md: 0.65625rem; /* 10.5px */
   --font-lg: 0.75rem; /* 12px */
   --font-xl: 0.875rem; /* 14px */
   --font-2xl: 1rem; /* 16px */
   --font-3xl: 1.125rem; /* 18px */
   --font-4xl: 1.25rem; /* 20px */
   --font-5xl: 1.375rem; /* 22px */
   --font-6xl: 1.5rem; /* 24px */
   --font-7xl: 1.875rem; /* 30px */

   /* Font Weights */
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   --font-weight-black: 900;

   /* ========================================
     SPACING SCALE (fluid responsive)
     Uses clamp() for automatic responsive scaling
     ======================================== */

   --space-0: 0; /* 0px */
   --space-px: 0.0625rem; /* 1px */
   --space-2xs: 0.0625rem; /* 1px (alias for space-px) */
   --space-2px: 0.125rem; /* 2px */
   --space-3px: 0.1875rem; /* 3px */
   --space-xs: 0.25rem; /* 4px */
   --space-sm: 0.375rem; /* 6px */
   --space-md: 0.5rem; /* 8px */
   --space-base: 0.5rem; /* 8px (same as md) */
   --space-lg: 0.75rem; /* 12px */
   --space-xl: 0.8125rem; /* 13px */
   --space-2xl: 0.875rem; /* 14px */
   --space-xxl: 0.9375rem; /* 15px */
   --space-3xl: 1rem; /* 16px */
   --space-4xl: 1.125rem; /* 18px */
   --space-5xl: 1.25rem; /* 20px */
   --space-6xl: 1.375rem; /* 22px */
   --space-7xl: 1.5rem; /* 24px */
   --space-8xl: 2rem; /* 32px */
   --space-9xl: 2.5rem; /* 40px */

   /* ========================================
     BORDER RADIUS
     ======================================== */

   --radius-none: 0;
   --radius-2xs: 0.125rem; /* 2px */
   --radius-xs: 0.1875rem; /* 3px */
   --radius-sm: 0.3125rem; /* 5px */
   --radius-md: 0.5rem; /* 8px */
   --radius-lg: 0.625rem; /* 10px */
   --radius-xl: 0.9375rem; /* 15px */
   --radius-2xl: 1.5rem; /* 24px */
   --radius-full: 9999px; /* Circular */
   --radius-50: 50%; /* 50% circle */

   /* ========================================
     SHADOWS
     ======================================== */

   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
   --shadow-md: 0px 0px 10px #e5edf2, 0px 0px 5px #c4cdd2;
   --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
   --shadow-xl: 3px 7px 5px rgba(0, 0, 0, 0.3);

   /* Component Specific Shadows */
   --shadow-card: 0px 0px 10px #e5edf2, 0px 0px 10px #e6ecf0,
      0px 0px 5px #c4cdd2, 0px 0px 3px #ffffff, 0px 0px 0px #ffffff,
      0px 0px 0px #ffffff;
   --shadow-card-lg: 0px 2px 18px rgba(81, 112, 133, 0.1);
   --shadow-card-hover: 0px 0px 10px 0px #e5edf2, 0px 0px 10px 0px #e6ecf0,
      1px 2px 10px 0px #c4cdd2, 0px 0px 3px 0px #fff, 0px 0px 0px 0px #fff,
      0px 0px 0px 0px #fff;
   --shadow-button: 0 1px 1px rgba(0, 0, 0, 0.075);
   --shadow-card-inside: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06);
   --shadow-upgrade: 0px 7px 20px -1px rgba(141, 153, 255, 0.46);
   --shadow-focus: 0 0 0.2rem #03a9f4;

    /* ========================================
     Z-INDEX SCALE
     Organized by layer
     ======================================== */

   --z-base: 1;
   --z-dropdown: 1000;
   --z-sticky: 1020;
   --z-fixed: 1030;
   --z-modal-backdrop: 1040;
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
   --z-overlay: 6000;
   --z-menu-overlay: 1000;

   /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */

   --transition-fast: 150ms ease-in-out;
   --transition-base: 300ms ease-in-out;
   --transition-slow: 500ms ease-in-out;
   --transition-slower: 600ms ease-in-out;

   /* Component Specific Transitions */
   --transition-sidebar: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
   --transition-card-flip: transform 0.6s;
   --transition-button: all 0.3s ease;
   --transition-highlight: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.2);
   --transition-fade: all 0.3s ease-out;
   
   /* ========================================
     COMPONENT SIZES
     ======================================== */

   /* Sidebar */
   --sidebar-width: 61.25rem; /* 980px */
   --sidebar-mini-width: 12.5rem; /* 200px */
   --sidebar-collapsed: 3.25rem; /* ~74px */
   --sidebar-nav-item-width: 10.625rem; /* 170px */
   --sidebar-transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
   --sidebar-nav-icon-space: 1.1rem; /* 18px */

   /* Header */
   --header-height: 2.25rem; /* 36px */
   --header-logo-height: 1rem; /* 16px */
   --header-icon-height: 1.5rem; /* 24px */

   /* Buttons */
   --button-height: 1.6875rem; /* 27px */
   --button-height-sm: 1.375rem; /* 22px */

   --button-min-width-2xs: 1.5rem; /* 24px */
   --button-min-width-xs: 2.5rem; /* 40px */
   --button-min-width-sm: 3rem; /* 48px */
   --button-min-width-md: 5rem; /* 80px */
   --button-sub-min-width: 5.625rem; /* 90px */
   --button-min-width: 6.875rem; /* 110px */
   --button-min-width-xlg: 8.4375rem; /* 135px */

    /* Icons */
    --icon-size-dot: 0.4375rem; /* 7px */
    --icon-size-xs: 0.625rem; /* 10px */
    --icon-size-sm: 0.75rem; /* 12px */
    --icon-size-md: 0.8125rem; /* 13px */
    --icon-size: 0.9375rem; /* 15px */
    --icon-size-lg: 1.125rem; /* 18px */
    
    --icon-font-size-lg: var(--font-3xl); /* 13px */
    --icon-font-size: 0.8125rem; /* 13px */

    /* Inputs & Forms */
   --input-height: var(--button-height); /* 27px */
   --input-padding: 0.25rem; /* 4px */

   /* Checkboxes & Radio */
   --checkbox-size: 1rem  ; /* 16px */
   --toggle-width: 2.25rem; /* 36px */
   --toggle-height: 1.125rem; /* 18px */
   --toggle-handle-size: 0.78125rem; /* 12.5px */

   /* User Profile Images */
   --profile-image-sm: 1.25rem; /* 20px */
   --profile-image-md: 1.875rem; /* 30px */
   --profile-image-lg: 8.125rem; /* 130px */
   --profile-image-xl: 9.375rem; /* 150px */

   /* Cards */
   --space-card-padding: 1rem; /* 16px */

   /* Form */
   --space-form-group: var(--space-sm); /* 8px */
   --space-form-header-margin-top: 3.4375rem; /* 55px */

    /* Approval Icon */
    --approval-icon-height: 1.1875rem; /* 19px */
    --approval-flow-width: 10.625rem; /* 170px */

    /* Login/Register */
    --onboarding-card-width: 30rem; /* 480px */
    --onboarding-card-width-lg: 34.375rem; /* 550px */
    --onboarding-card-padding: 3.25rem; /* 52px */
    --onboarding-card-logo-width: 10.625rem; /* 170px */
    --onboarding-text-color: #8A8A8A;
    --onboarding-button-width: 13.125rem; /* 210px */
    --onboarding-button-height: 2.375rem; /* 38px */
    --onboarding-button-gradient: radial-gradient(109.84% 218% at 109.84% 0%, #8692FF 0%, #FF92B9 100%);
    --onboarding-input-height: 2.375rem; /* 38px */
    --onboarding-row-gap: 1.75rem; /* 28px */

    /* Personal Dashboard */
    --latest-member-card-min-width: 11.25rem; /* 180px */
    --latest-member-card-height: 14.375rem; /* 230px */
    --latest-member-card-background-color: #FDFDFD;
    --latest-member-profile-image-size: 6.25rem; /* 100px */

    /* Management Dashboard */
    --dashboard-loading-icon-height: 5rem; /* 80px */
    --dashboard-card-height: 23.125rem; /* 370px */
    --dashboard-graph-height: 14.375rem; /* 230px */

    
    --staff-profile-image-size: 7.5rem; /* 120px */

   /* Scrollbar */
   --scrollbar-width: 6px;
   --scrollbar-track: #4c4f4f;
   --scrollbar-thumb: #D1D6E7;
   --scrollbar-thumb-hover: #9B9BAB;
   --scrollbar-track-memo: #fff7d1;
   --scrollbar-thumb-memo: #4c4f4f;

   /* Tabulator */
   --tabu-row-height: 1.6875rem; /* 27px */

   --tabu-button-height: 1.25rem; /* 20px */
   --tabu-button-icon-size: 0.875rem; /* 14px */
   --tabu-button-icon-font-size: 0.75rem; /* 12px */

   --tabu-button-height-sm: 1rem; /* 16px */
   --tabu-button-icon-size-sm: 0.625rem; /* 10px */
   --tabu-button-icon-font-size-sm: 0.5625rem; /* 9px */

   --tabu-status-button-jp-width: 3.4375rem; /* 55px */
   --tabu-status-button-en-width: 5rem; /* 80px */

   --tabu-icon-height: 1.375rem; /* 22px */
   
   --tabu-row-outline-color: #DEDEDE;
   --tabu-cell-uneditable-color: #F2F7FF;
   --tabu-cell-unselectable-color: #e7ebf2;
   --tabu-cell-highlight-orange-color: #ffebea;

   --tabu-row-selected-color: #97A0F0;
   --tabu-row-hover-color: #B4CEF3;

   --tabu-custom-filter-height: 1.6875rem; /* 27px */

   /* Evaluation */
   --eval-table-row-height: 2.1875rem; /* 35px */
   --eval-table-checkbox-col-width: 1.5rem; /* 24px */
   --eval-table-desc-col-width: 31.25rem; /* 500px */
   --eval-table-desc-col-min-width: 15.625rem; /* 250px */
   --eval-table-main-col-width: 15rem; /* 240px */
   --eval-button-width: 4.6875rem; /* 75px */

   /* Date Picker */
    --datepicker-height: 2.1875rem; /* 35px */
    --datepicker-container-width: 10rem; /* 160px */

  /* Star-rating */
   --star-rating-size: 9px; /* 9px */
   --star-rating-size-lg: 12px; /* 12px */
   --star-rating-size-xl: 14px; /* 14px */
}

@media print {
   :root {
      --color-text: #000000;
      --color-background: #ffffff;
   }
}