/**
* ═══════════════════════════════════════════════════════════════════════════
* iCOMFORT DESIGN SYSTEM
* ═══════════════════════════════════════════════════════════════════════════
* Version: 1.0.0
* Compatible with Bootstrap 5.x
*
* This stylesheet contains all design tokens, component styles, and utilities
* for the iComfort brand. Do not use colors or values outside of this system.
* ═══════════════════════════════════════════════════════════════════════════
*/
/* ═══════════════════════════════════════════════════════════════════════════
1. GOOGLE FONTS IMPORT
═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
/* ═══════════════════════════════════════════════════════════════════════════
2. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ─────────────────────────────────────────────────────────────────────────
BRAND COLORS
───────────────────────────────────────────────────────────────────────── */
/* Primary Scale (Teal) */
--ic-primary-50: #E6F7F5;
--ic-primary-100: #C3E6D0;
--ic-primary-200: #9DD9C9;
--ic-primary-300: #77CCC2;
--ic-primary-400: #5BC0B5;
--ic-primary-500: #3FB4A9;
--ic-primary-600: #35998F;
--ic-primary-700: #2E8A82;
--ic-primary-800: #256D68;
--ic-primary-900: #1C534F;
/* Secondary Scale (Navy) */
--ic-secondary-50: #E8ECFB;
--ic-secondary-100: #C2CEF5;
--ic-secondary-200: #A5B5EF;
--ic-secondary-300: #8A9EFF;
--ic-secondary-400: #5A78D8;
--ic-secondary-500: #2E469E;
--ic-secondary-600: #263A88;
--ic-secondary-700: #1F2F6B;
--ic-secondary-800: #182555;
--ic-secondary-900: #111B3F;
/* Tertiary Scale (Soft Violet) */
--ic-tertiary-50: #F5F1FD;
--ic-tertiary-100: #E8DFFB;
--ic-tertiary-200: #D4C5F5;
--ic-tertiary-300: #C0ABEF;
--ic-tertiary-400: #B19BE8;
--ic-tertiary-500: #A28CE2;
--ic-tertiary-600: #8A70CC;
--ic-tertiary-700: #7258B0;
--ic-tertiary-800: #5B4390;
--ic-tertiary-900: #443370;
/* ─────────────────────────────────────────────────────────────────────────
FUNCTIONAL COLORS
───────────────────────────────────────────────────────────────────────── */
--ic-success: #7BF1A8;
--ic-success-700: #3BB86F;
--ic-success-hover: #4DE890;
--ic-success-active: #2DDB7A;
--ic-success-bg: rgba(123, 241, 168, 0.06);
--ic-success-ring: rgba(123, 241, 168, 0.18);
--ic-success-text: #273240;
--ic-warning: #FEA445;
--ic-warning-700: #E6701A;
--ic-warning-hover: #E8923A;
--ic-warning-bg: rgba(254, 164, 69, 0.04);
--ic-warning-ring: rgba(254, 164, 69, 0.15);
--ic-error: #FC5180;
--ic-error-700: #D02E5E;
--ic-error-hover: #E24470;
--ic-error-bg: rgba(252, 81, 128, 0.04);
--ic-error-ring: rgba(252, 81, 128, 0.15);
--ic-info: #8A9EFF;
--ic-info-700: #3D51B8;
--ic-info-hover: #7588E6;
--ic-info-ring: rgba(138, 158, 255, 0.30);
/* ─────────────────────────────────────────────────────────────────────────
NEUTRAL SCALE
───────────────────────────────────────────────────────────────────────── */
--ic-white: #FFFFFF;
--ic-neutral-50: #FCFCFD;
--ic-neutral-100: #F6F8F9;
--ic-neutral-200: #F0F4F7;
--ic-neutral-300: #E7EDF3;
--ic-neutral-400: #DEE6ED;
--ic-neutral-500: #D5DEE6;
--ic-neutral-600: #8A939C;
--ic-neutral-700: #646F79;
--ic-neutral-800: #3A4452;
--ic-neutral-900: #273240;
/* ─────────────────────────────────────────────────────────────────────────
TYPOGRAPHY
───────────────────────────────────────────────────────────────────────── */
--ic-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Font Weights */
--ic-font-light: 300;
--ic-font-regular: 400;
--ic-font-medium: 500;
--ic-font-semibold: 600;
--ic-font-bold: 700;
/* Font Sizes */
--ic-text-display-xl: 4rem; /* 64px */
--ic-text-display-lg: 3rem; /* 48px */
--ic-text-h1: 2.25rem; /* 36px */
--ic-text-h2: 1.875rem; /* 30px */
--ic-text-h3: 1.5rem; /* 24px */
--ic-text-h4: 1.25rem; /* 20px */
--ic-text-body-lg: 1.125rem; /* 18px */
--ic-text-body: 1rem; /* 16px */
--ic-text-body-sm: 0.875rem; /* 14px */
--ic-text-caption: 0.75rem; /* 12px */
/* Line Heights */
--ic-leading-tight: 1.2;
--ic-leading-normal: 1.4;
--ic-leading-snug: 1.5;
--ic-leading-relaxed: 1.6;
/* Letter Spacing */
--ic-tracking-tight: -0.02em;
--ic-tracking-normal: 0em;
--ic-tracking-wide: 0.05em;
--ic-tracking-wider: 0.1em;
/* ─────────────────────────────────────────────────────────────────────────
SPACING
───────────────────────────────────────────────────────────────────────── */
--ic-space-1: 4px;
--ic-space-2: 8px;
--ic-space-3: 12px;
--ic-space-4: 16px;
--ic-space-5: 20px;
--ic-space-6: 24px;
--ic-space-8: 32px;
--ic-space-10: 40px;
--ic-space-12: 48px;
--ic-space-16: 64px;
--ic-space-20: 80px;
--ic-space-24: 96px;
/* ─────────────────────────────────────────────────────────────────────────
BORDER RADIUS
───────────────────────────────────────────────────────────────────────── */
--ic-radius-xs: 2px;
--ic-radius-sm: 4px;
--ic-radius-md: 8px;
--ic-radius-nav: 6px;
--ic-icon-sm: 16px;
--ic-radius-lg: 12px;
--ic-radius-xl: 16px;
--ic-radius-2xl: 24px;
--ic-radius-full: 9999px;
/* ─────────────────────────────────────────────────────────────────────────
SHADOWS
───────────────────────────────────────────────────────────────────────── */
--ic-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
--ic-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08);
--ic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--ic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--ic-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
--ic-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
/* Card Hover Shadow */
--ic-shadow-card-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
/* Focus Ring */
--ic-focus-ring: 0 0 0 3px rgba(213, 222, 230, 0.35);
--ic-focus-ring-primary: 0 0 0 3px rgba(63, 180, 169, 0.30);
--ic-focus-ring-secondary: 0 0 0 3px rgba(46, 70, 158, 0.30);
--ic-focus-ring-tertiary: 0 0 0 3px rgba(162, 140, 226, 0.30);
--ic-focus-ring-success: 0 0 0 3px rgba(123, 241, 168, 0.40);
--ic-focus-ring-warning: 0 0 0 3px rgba(254, 164, 69, 0.30);
--ic-focus-ring-error: 0 0 0 3px rgba(252, 81, 128, 0.30);
--ic-focus-ring-info: 0 0 0 3px rgba(138, 158, 255, 0.30);
/* ─────────────────────────────────────────────────────────────────────────
Z-INDEX SCALE
───────────────────────────────────────────────────────────────────────── */
--ic-z-dropdown: 1000;
--ic-z-sticky: 1020;
--ic-z-fixed: 1030;
--ic-z-modal-backdrop: 1040;
--ic-z-modal: 1050;
--ic-z-popover: 1060;
--ic-z-tooltip: 1070;
/* ─────────────────────────────────────────────────────────────────────────
ANIMATIONS
───────────────────────────────────────────────────────────────────────── */
--ic-transition-instant: 100ms ease;
--ic-transition-fast: 200ms ease-in-out;
--ic-transition-normal: 300ms ease-in-out;
--ic-transition-slow: 400ms ease-out;
/* ─────────────────────────────────────────────────────────────────────────
CHART COLORS - QUALITATIVE (8 colors)
───────────────────────────────────────────────────────────────────────── */
--ic-chart-1: #3FB4A9;
--ic-chart-2: #2E469E;
--ic-chart-3: #A28CE2;
--ic-chart-4: #F2994A;
--ic-chart-5: #E0637A;
--ic-chart-6: #5CBBF6;
--ic-chart-7: #6AAF78;
--ic-chart-8: #8C7A6B;
/* ─────────────────────────────────────────────────────────────────────────
CHART COLORS - SEQUENTIAL (heatmap)
───────────────────────────────────────────────────────────────────────── */
--ic-seq-1: #FAFEE3;
--ic-seq-2: #D5E8A3;
--ic-seq-3: #9FD47C;
--ic-seq-4: #5FBAA0;
--ic-seq-5: #3E9FB4;
--ic-seq-6: #2D7FB8;
--ic-seq-7: #28599C;
--ic-seq-8: #1E3466;
/* ─────────────────────────────────────────────────────────────────────────
CHART COLORS - DIVERGENT (positive/negative)
───────────────────────────────────────────────────────────────────────── */
--ic-div-neg-4: #B2182B;
--ic-div-neg-3: #D6604D;
--ic-div-neg-2: #F4A582;
--ic-div-neg-1: #FDDBC7;
--ic-div-pos-1: #D1E5F0;
--ic-div-pos-2: #92C5DE;
--ic-div-pos-3: #4393C3;
--ic-div-pos-4: #2166AC;
}
/* ═══════════════════════════════════════════════════════════════════════════
3. BASE / RESET
═══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--ic-font-family);
font-size: var(--ic-text-body);
font-weight: var(--ic-font-regular);
line-height: var(--ic-leading-relaxed);
color: var(--ic-neutral-900);
background-color: var(--ic-neutral-50);
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════════════════════
4. TYPOGRAPHY
═══════════════════════════════════════════════════════════════════════════ */
/* Display Headings */
.ic-display-xl {
font-size: var(--ic-text-display-xl);
font-weight: var(--ic-font-bold);
line-height: var(--ic-leading-tight);
letter-spacing: var(--ic-tracking-tight);
color: var(--ic-neutral-900);
}
.ic-display-lg {
font-size: var(--ic-text-display-lg);
font-weight: var(--ic-font-bold);
line-height: var(--ic-leading-tight);
letter-spacing: var(--ic-tracking-tight);
color: var(--ic-neutral-900);
}
/* ── Inherit Poppins on all text-bearing elements ── */
h1, h2, h3, h4, h5, h6,
p, span, label, legend,
input, select, textarea, button,
.form-control, .form-select {
font-family: var(--ic-font-family);
}
/* Standard Headings */
h1, .ic-h1 {
font-size: var(--ic-text-h1);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-bold);
line-height: var(--ic-leading-normal);
color: var(--ic-neutral-900);
margin-bottom: var(--ic-space-4);
}
h2, .ic-h2 {
font-size: var(--ic-text-h2);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-bold);
line-height: var(--ic-leading-normal);
color: var(--ic-neutral-900);
margin-bottom: var(--ic-space-4);
}
h3, .ic-h3 {
font-size: var(--ic-text-h3);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-semibold);
line-height: var(--ic-leading-normal);
color: var(--ic-neutral-900);
margin-bottom: var(--ic-space-3);
}
h4, .ic-h4 {
font-size: var(--ic-text-h4);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-medium);
line-height: var(--ic-leading-snug);
color: var(--ic-neutral-900);
margin-bottom: var(--ic-space-3);
}
h5, .ic-h5 {
font-size: var(--ic-text-body-lg);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-medium);
line-height: var(--ic-leading-snug);
color: var(--ic-neutral-900);
margin-bottom: var(--ic-space-2);
}
h6, .ic-h6 {
font-size: var(--ic-text-body);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-medium);
line-height: var(--ic-leading-snug);
color: var(--ic-neutral-900);
margin-bottom: var(--ic-space-2);
}
/* Body Text */
.ic-body-lg {
font-size: var(--ic-text-body-lg);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-regular);
line-height: var(--ic-leading-relaxed);
}
.ic-body, p {
font-size: var(--ic-text-body);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-regular);
line-height: var(--ic-leading-relaxed);
margin-bottom: var(--ic-space-4);
}
.ic-body-sm, .ic-text-sm {
font-size: var(--ic-text-body-sm);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-regular);
line-height: var(--ic-leading-snug);
}
.ic-caption {
font-size: var(--ic-text-caption);
font-family: var(--ic-font-family);
font-weight: var(--ic-font-regular);
line-height: var(--ic-leading-normal);
}
/* Text Colors */
.ic-text-primary {
color: var(--ic-neutral-900);
}
.ic-text-secondary {
color: var(--ic-neutral-700);
}
.ic-text-tertiary, .ic-text-placeholder {
color: var(--ic-neutral-600);
}
.ic-text-disabled {
opacity: 0.5;
}
/* Font Weights */
.ic-font-light {
font-weight: var(--ic-font-light);
}
.ic-font-regular {
font-weight: var(--ic-font-regular);
}
.ic-font-medium {
font-weight: var(--ic-font-medium);
}
.ic-font-semibold {
font-weight: var(--ic-font-semibold);
}
.ic-font-bold {
font-weight: var(--ic-font-bold);
}
/* Links */
a, .ic-link {
color: var(--ic-primary-500);
text-decoration: none;
transition: color var(--ic-transition-instant);
}
a:hover, .ic-link:hover {
color: var(--ic-primary-600);
text-decoration: underline;
}
a:focus-visible, .ic-link:focus-visible {
outline: none;
box-shadow: var(--ic-focus-ring);
border-radius: var(--ic-radius-sm);
}
/* ═══════════════════════════════════════════════════════════════════════════
5. BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
/* Global Bootstrap .btn anchor text-decoration override */
a.btn,
a.btn:hover,
a.btn:focus,
.btn,
.btn:hover,
.btn:focus {
text-decoration: none !important;
}
/* Base Button */
.ic-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ic-space-2);
padding: var(--ic-space-2) var(--ic-space-4);
font-family: var(--ic-font-family);
font-size: var(--ic-text-body);
font-weight: var(--ic-font-medium);
line-height: var(--ic-leading-snug);
text-align: center;
text-decoration: none;
border: none;
border-radius: var(--ic-radius-md);
cursor: pointer;
transition: all var(--ic-transition-fast);
white-space: nowrap;
}
.ic-btn:focus-visible {
outline: none;
}
/* Button Sizes */
.ic-btn-sm {
padding: var(--ic-space-1) var(--ic-space-3);
font-size: var(--ic-text-body-sm);
}
.ic-btn-lg {
padding: var(--ic-space-3) var(--ic-space-6);
font-size: var(--ic-text-body-lg);
}
/* ─────────────────────────────────────────────────────────────────────────
FILLED BUTTONS
───────────────────────────────────────────────────────────────────────── */
/* Primary Filled */
.ic-btn-primary {
background-color: var(--ic-primary-500);
color: var(--ic-white);
}
.ic-btn-primary:hover {
background-color: var(--ic-primary-600);
color: var(--ic-white);
}
.ic-btn-primary:active {
filter: brightness(0.8);
}
.ic-btn-primary:focus-visible {
box-shadow: var(--ic-focus-ring-primary);
}
/* Secondary Filled */
.ic-btn-secondary {
background-color: var(--ic-secondary-500);
color: var(--ic-white);
}
.ic-btn-secondary:hover {
background-color: var(--ic-secondary-600);
color: var(--ic-white);
}
.ic-btn-secondary:active {
filter: brightness(0.8);
}
.ic-btn-secondary:focus-visible {
box-shadow: var(--ic-focus-ring-secondary);
}
/* Tertiary Filled */
.ic-btn-tertiary {
background-color: var(--ic-tertiary-500);
color: var(--ic-white);
}
.ic-btn-tertiary:hover {
background-color: var(--ic-tertiary-600);
color: var(--ic-white);
}
.ic-btn-tertiary:active {
filter: brightness(0.8);
}
.ic-btn-tertiary:focus-visible {
box-shadow: var(--ic-focus-ring-tertiary);
}
/* Success Filled */
.ic-btn-success {
background-color: var(--ic-success);
color: var(--ic-success-text);
}
.ic-btn-success:hover {
background-color: var(--ic-success-hover);
color: var(--ic-success-text);
}
.ic-btn-success:active {
background-color: var(--ic-success-active);
}
.ic-btn-success:focus-visible {
box-shadow: var(--ic-focus-ring-success);
}
/* Warning Filled */
.ic-btn-warning {
background-color: var(--ic-warning);
color: var(--ic-white);
}
.ic-btn-warning:hover {
background-color: var(--ic-warning-hover);
color: var(--ic-white);
}
.ic-btn-warning:active {
filter: brightness(0.8);
}
.ic-btn-warning:focus-visible {
box-shadow: var(--ic-focus-ring-warning);
}
/* Error Filled */
.ic-btn-error {
background-color: var(--ic-error);
color: var(--ic-white);
}
.ic-btn-error:hover {
background-color: var(--ic-error-hover);
color: var(--ic-white);
}
.ic-btn-error:active {
filter: brightness(0.8);
}
.ic-btn-error:focus-visible {
box-shadow: var(--ic-focus-ring-error);
}
/* Info Filled */
.ic-btn-info {
background-color: var(--ic-info);
color: var(--ic-white);
}
.ic-btn-info:hover {
background-color: var(--ic-info-hover);
color: var(--ic-white);
}
.ic-btn-info:active {
filter: brightness(0.8);
}
.ic-btn-info:focus-visible {
box-shadow: var(--ic-focus-ring-info);
}
/* ─────────────────────────────────────────────────────────────────────────
OUTLINE BUTTONS
───────────────────────────────────────────────────────────────────────── */
.ic-btn-outline-primary {
background-color: var(--ic-white);
color: var(--ic-primary-500);
border: 2px solid var(--ic-primary-500);
}
.ic-btn-outline-primary:hover {
background-color: rgba(63, 180, 169, 0.08);
color: var(--ic-primary-500);
}
.ic-btn-outline-primary:active {
background-color: rgba(63, 180, 169, 0.15);
}
.ic-btn-outline-primary:focus-visible {
box-shadow: 0 0 0 3px rgba(63, 180, 169, 0.20);
}
.ic-btn-outline-secondary {
background-color: var(--ic-white);
color: var(--ic-secondary-500);
border: 2px solid var(--ic-secondary-500);
}
.ic-btn-outline-secondary:hover {
background-color: rgba(46, 70, 158, 0.08);
color: var(--ic-secondary-500);
}
.ic-btn-outline-secondary:active {
background-color: rgba(46, 70, 158, 0.15);
}
.ic-btn-outline-secondary:focus-visible {
box-shadow: 0 0 0 3px rgba(46, 70, 158, 0.20);
}
.ic-btn-outline-tertiary {
background-color: var(--ic-white);
color: var(--ic-tertiary-500);
border: 2px solid var(--ic-tertiary-500);
}
.ic-btn-outline-tertiary:hover {
background-color: rgba(162, 140, 226, 0.08);
color: var(--ic-tertiary-500);
}
.ic-btn-outline-tertiary:active {
background-color: rgba(162, 140, 226, 0.15);
}
.ic-btn-outline-tertiary:focus-visible {
box-shadow: 0 0 0 3px rgba(162, 140, 226, 0.20);
}
.ic-btn-outline-error {
background-color: var(--ic-white);
color: var(--ic-error);
border: 2px solid var(--ic-error);
}
.ic-btn-outline-error:hover {
background-color: rgba(252, 81, 128, 0.08);
color: var(--ic-error);
}
.ic-btn-outline-error:active {
background-color: rgba(252, 81, 128, 0.15);
}
.ic-btn-outline-error:focus-visible {
box-shadow: 0 0 0 3px rgba(252, 81, 128, 0.20);
}
/* ─────────────────────────────────────────────────────────────────────────
GHOST BUTTONS
───────────────────────────────────────────────────────────────────────── */
.ic-btn-ghost-primary {
background-color: transparent;
color: var(--ic-primary-500);
border: none;
}
.ic-btn-ghost-primary:hover {
background-color: rgba(63, 180, 169, 0.08);
}
.ic-btn-ghost-primary:active {
background-color: rgba(63, 180, 169, 0.15);
}
.ic-btn-ghost-secondary {
background-color: transparent;
color: var(--ic-secondary-500);
border: none;
}
.ic-btn-ghost-secondary:hover {
background-color: rgba(46, 70, 158, 0.08);
}
.ic-btn-ghost-secondary:active {
background-color: rgba(46, 70, 158, 0.15);
}
.ic-btn-ghost-tertiary {
background-color: transparent;
color: var(--ic-tertiary-500);
border: none;
}
.ic-btn-ghost-tertiary:hover {
background-color: rgba(162, 140, 226, 0.08);
}
.ic-btn-ghost-tertiary:active {
background-color: rgba(162, 140, 226, 0.15);
}
.ic-btn-ghost-error {
background-color: transparent;
color: var(--ic-error);
border: none;
}
.ic-btn-ghost-error:hover {
background-color: rgba(252, 81, 128, 0.08);
}
.ic-btn-ghost-error:active {
background-color: rgba(252, 81, 128, 0.15);
}
/* ─────────────────────────────────────────────────────────────────────────
DISABLED & LOADING STATES
───────────────────────────────────────────────────────────────────────── */
.ic-btn:disabled,
.ic-btn.ic-btn-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.ic-btn-loading {
position: relative;
cursor: not-allowed;
pointer-events: none;
}
.ic-btn-loading .ic-btn-spinner {
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: ic-spin 0.75s linear infinite;
}
@keyframes ic-spin {
to {
transform: rotate(360deg);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
6. FORM INPUTS
═══════════════════════════════════════════════════════════════════════════ */
/* Base Input */
.ic-input {
width: 100%;
padding: var(--ic-space-3) var(--ic-space-4);
font-family: var(--ic-font-family);
font-size: var(--ic-text-body);
font-weight: var(--ic-font-regular);
line-height: var(--ic-leading-snug);
color: var(--ic-neutral-900);
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
transition: all var(--ic-transition-instant);
}
.ic-input::placeholder {
color: var(--ic-neutral-600);
}
.ic-input:hover {
border-color: var(--ic-neutral-500);
}
.ic-input:focus {
outline: none;
border-color: var(--ic-neutral-500);
border-width: 2px;
padding: calc(var(--ic-space-3) - 1px) calc(var(--ic-space-4) - 1px);
box-shadow: var(--ic-focus-ring);
}
.ic-input:disabled {
background-color: var(--ic-neutral-100);
border-color: var(--ic-neutral-300);
opacity: 0.5;
cursor: not-allowed;
}
/* Input Validation States */
.ic-input-success {
border: 1.5px solid var(--ic-success);
background-color: var(--ic-success-bg);
}
.ic-input-success:focus {
border-width: 2px;
box-shadow: 0 0 0 3px var(--ic-success-ring);
}
.ic-input-error {
border: 1.5px solid var(--ic-error);
background-color: var(--ic-error-bg);
}
.ic-input-error:focus {
border-width: 2px;
box-shadow: 0 0 0 3px var(--ic-error-ring);
}
.ic-input-warning {
border: 1.5px solid var(--ic-warning);
background-color: var(--ic-warning-bg);
}
.ic-input-warning:focus {
border-width: 2px;
box-shadow: 0 0 0 3px var(--ic-warning-ring);
}
/* Input Sizes */
.ic-input-sm {
padding: var(--ic-space-2) var(--ic-space-3);
font-size: var(--ic-text-body-sm);
}
.ic-input-lg {
padding: var(--ic-space-4) var(--ic-space-5);
font-size: var(--ic-text-body-lg);
}
/* Textarea */
.ic-textarea {
min-height: 120px;
resize: vertical;
}
/* Select */
.ic-select {
height: 38px;
appearance: none;
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
box-shadow: var(--ic-shadow-sm);
padding: 0 var(--ic-space-10) 0 var(--ic-space-3);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
font-family: var(--ic-font-family);
color: var(--ic-neutral-900);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A939C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--ic-space-3) center;
transition: border-color var(--ic-transition-instant), box-shadow var(--ic-transition-instant);
width: 100%;
}
.ic-select:hover {
border-color: var(--ic-neutral-500);
}
.ic-select:focus {
border-color: var(--ic-neutral-500);
box-shadow: var(--ic-focus-ring);
outline: none;
}
/* Form Label */
.ic-label {
display: block;
margin-bottom: var(--ic-space-2);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-900);
}
.ic-label-required::after {
content: " *";
color: var(--ic-error);
}
/* Helper Text */
.ic-helper-text {
margin-top: var(--ic-space-1);
font-size: var(--ic-text-caption);
color: var(--ic-neutral-700);
}
.ic-helper-text-error {
color: var(--ic-error-700);
}
.ic-helper-text-success {
color: var(--ic-success-700);
}
/* ─────────────────────────────────────────────────────────────────────────
CHECKBOX
───────────────────────────────────────────────────────────────────────── */
.ic-checkbox {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--ic-space-2);
cursor: pointer;
user-select: none;
}
.ic-checkbox input {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
.ic-checkbox-box {
width: 20px;
height: 20px;
border: 2px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-sm);
background-color: var(--ic-white);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--ic-transition-instant);
}
.ic-checkbox:hover .ic-checkbox-box {
border-color: var(--ic-neutral-500);
}
.ic-checkbox input:checked + .ic-checkbox-box {
border-color: var(--ic-primary-500);
background-color: var(--ic-primary-500);
}
.ic-checkbox input:checked + .ic-checkbox-box::after {
content: "";
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.ic-checkbox input:focus-visible + .ic-checkbox-box {
box-shadow: var(--ic-focus-ring);
}
.ic-checkbox input:disabled + .ic-checkbox-box {
opacity: 0.5;
cursor: not-allowed;
}
/* ─────────────────────────────────────────────────────────────────────────
RADIO BUTTON
───────────────────────────────────────────────────────────────────────── */
.ic-radio {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--ic-space-2);
cursor: pointer;
user-select: none;
}
.ic-radio input {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
.ic-radio-circle {
width: 20px;
height: 20px;
border: 2px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-full);
background-color: var(--ic-white);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--ic-transition-instant);
}
.ic-radio:hover .ic-radio-circle {
border-color: var(--ic-neutral-500);
}
.ic-radio input:checked + .ic-radio-circle {
border-color: var(--ic-primary-500);
}
.ic-radio input:checked + .ic-radio-circle::after {
content: "";
width: 10px;
height: 10px;
border-radius: var(--ic-radius-full);
background-color: var(--ic-primary-500);
}
.ic-radio input:focus-visible + .ic-radio-circle {
box-shadow: var(--ic-focus-ring);
}
.ic-radio input:disabled + .ic-radio-circle {
opacity: 0.5;
cursor: not-allowed;
}
/* ─────────────────────────────────────────────────────────────────────────
TOGGLE SWITCH
───────────────────────────────────────────────────────────────────────── */
.ic-toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--ic-space-2);
cursor: pointer;
user-select: none;
}
.ic-toggle input {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
.ic-toggle-track {
width: 48px;
height: 24px;
background-color: #D4DBE5;
border-radius: var(--ic-radius-full);
position: relative;
transition: background-color var(--ic-transition-fast);
}
.ic-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: var(--ic-white);
border-radius: var(--ic-radius-full);
box-shadow: var(--ic-shadow-sm);
transition: transform var(--ic-transition-fast);
}
.ic-toggle input:checked + .ic-toggle-track {
background-color: var(--ic-primary-500);
}
.ic-toggle input:checked + .ic-toggle-track .ic-toggle-thumb {
transform: translateX(24px);
}
.ic-toggle input:focus-visible + .ic-toggle-track {
box-shadow: var(--ic-focus-ring);
}
.ic-toggle input:disabled + .ic-toggle-track {
opacity: 0.5;
cursor: not-allowed;
}
/* ═══════════════════════════════════════════════════════════════════════════
7. CARDS
═══════════════════════════════════════════════════════════════════════════ */
/* Base Card */
.ic-card {
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-xl);
padding: var(--ic-space-8);
transition: all var(--ic-transition-instant);
}
/* Card Section (main page cards) */
.ic-card-section {
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-xl);
padding: var(--ic-space-8);
box-shadow: var(--ic-shadow-sm);
}
/* Card States */
.ic-card-hover:hover {
border-color: var(--ic-neutral-500);
box-shadow: var(--ic-shadow-card-hover);
}
.ic-card-selected {
border-color: var(--ic-primary-500);
box-shadow: 0 0 0 3px rgba(63, 180, 169, 0.12);
}
.ic-card-selected-secondary {
border-color: var(--ic-secondary-500);
box-shadow: 0 0 0 3px rgba(46, 70, 158, 0.12);
}
.ic-card-selected-tertiary {
border-color: var(--ic-tertiary-500);
box-shadow: 0 0 0 3px rgba(162, 140, 226, 0.12);
}
.ic-card:focus-visible {
outline: none;
border-color: var(--ic-neutral-500);
box-shadow: var(--ic-focus-ring);
}
.ic-card:active {
border-color: var(--ic-neutral-500);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: var(--ic-neutral-50);
}
.ic-card-disabled {
background-color: var(--ic-neutral-100);
border-color: var(--ic-neutral-300);
opacity: 0.5;
pointer-events: none;
}
/* Card Title */
.ic-card-title {
font-size: var(--ic-text-h4);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-900);
margin-bottom: var(--ic-space-2);
}
.ic-card-subtitle {
font-size: var(--ic-text-body-sm);
color: var(--ic-neutral-700);
}
/* Inner Card (nested inside sections) */
.ic-card-inner {
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-lg);
padding: var(--ic-space-6);
}
/* ═══════════════════════════════════════════════════════════════════════════
8. ALERTS & TOASTS
═══════════════════════════════════════════════════════════════════════════ */
/* Base Alert */
.ic-alert {
display: flex;
align-items: flex-start;
gap: var(--ic-space-3);
padding: var(--ic-space-4) var(--ic-space-6);
border-radius: var(--ic-radius-lg);
font-size: var(--ic-text-body-sm);
}
.ic-alert-success {
background-color: var(--ic-success-bg);
border: 1px solid var(--ic-success);
color: var(--ic-success-text);
}
.ic-alert-warning {
background-color: var(--ic-warning-bg);
border: 1px solid var(--ic-warning);
color: var(--ic-neutral-900);
}
.ic-alert-error {
background-color: var(--ic-error-bg);
border: 1px solid var(--ic-error);
color: var(--ic-neutral-900);
}
.ic-alert-info {
background-color: rgba(138, 158, 255, 0.06);
border: 1px solid var(--ic-info);
color: var(--ic-neutral-900);
}
/* Toast */
.ic-toast {
display: flex;
align-items: center;
gap: var(--ic-space-3);
padding: var(--ic-space-4) var(--ic-space-6);
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-lg);
box-shadow: var(--ic-shadow-lg);
max-width: 400px;
}
.ic-toast-close {
margin-left: auto;
padding: var(--ic-space-1);
background: none;
border: none;
cursor: pointer;
color: var(--ic-neutral-600);
transition: color var(--ic-transition-instant);
}
.ic-toast-close:hover {
color: var(--ic-neutral-900);
}
/* ═══════════════════════════════════════════════════════════════════════════
9. BADGES
═══════════════════════════════════════════════════════════════════════════ */
.ic-badge {
display: inline-flex;
align-items: center;
gap: var(--ic-space-1);
padding: 6px var(--ic-space-3);
font-size: var(--ic-text-caption);
font-weight: var(--ic-font-medium);
border-radius: var(--ic-radius-full);
white-space: nowrap;
}
.ic-badge-primary {
background-color: var(--ic-primary-50);
color: var(--ic-primary-700);
}
.ic-badge-secondary {
background-color: var(--ic-secondary-50);
color: var(--ic-secondary-700);
}
.ic-badge-tertiary {
background-color: var(--ic-tertiary-50);
color: var(--ic-tertiary-700);
}
.ic-badge-success {
background-color: var(--ic-success-bg);
color: var(--ic-success-700);
}
.ic-badge-warning {
background-color: var(--ic-warning-bg);
color: var(--ic-warning-700);
}
.ic-badge-error {
background-color: var(--ic-error-bg);
color: var(--ic-error-700);
}
.ic-badge-info {
background-color: rgba(138, 158, 255, 0.1);
color: var(--ic-info-700);
}
.ic-badge-neutral {
background-color: var(--ic-neutral-100);
color: var(--ic-neutral-700);
}
/* ═══════════════════════════════════════════════════════════════════════════
10. MODAL / DIALOG
═══════════════════════════════════════════════════════════════════════════ */
/* Modal Backdrop */
.ic-modal-backdrop {
position: fixed;
inset: 0;
background-color: rgba(39, 50, 64, 0.5);
backdrop-filter: blur(2px);
z-index: var(--ic-z-modal-backdrop);
opacity: 0;
transition: opacity var(--ic-transition-fast);
}
.ic-modal-backdrop.ic-show {
opacity: 1;
}
/* Modal Dialog */
.ic-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background-color: var(--ic-white);
border-radius: var(--ic-radius-xl);
box-shadow: var(--ic-shadow-xl);
z-index: var(--ic-z-modal);
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
opacity: 0;
transition: all var(--ic-transition-normal);
}
.ic-modal.ic-show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.ic-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ic-space-5) var(--ic-space-6);
border-bottom: 1px solid var(--ic-neutral-300);
}
.ic-modal-title {
font-size: var(--ic-text-h4);
font-weight: var(--ic-font-semibold);
color: var(--ic-neutral-900);
margin: 0;
}
.ic-modal-close {
padding: var(--ic-space-2);
background: none;
border: none;
cursor: pointer;
color: var(--ic-neutral-600);
border-radius: var(--ic-radius-sm);
transition: all var(--ic-transition-instant);
}
.ic-modal-close:hover {
background-color: var(--ic-neutral-100);
color: var(--ic-neutral-900);
}
.ic-modal-body {
padding: var(--ic-space-6);
overflow-y: auto;
}
.ic-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--ic-space-3);
padding: var(--ic-space-5) var(--ic-space-6);
border-top: 1px solid var(--ic-neutral-300);
}
/* Modal Sizes */
.ic-modal-sm {
width: 400px;
}
.ic-modal-md {
width: 560px;
}
.ic-modal-lg {
width: 800px;
}
.ic-modal-xl {
width: 1140px;
}
/* ═══════════════════════════════════════════════════════════════════════════
11. DROPDOWN & POPOVER
═══════════════════════════════════════════════════════════════════════════ */
.ic-dropdown {
position: relative;
display: inline-block;
}
.ic-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
box-shadow: var(--ic-shadow-lg);
z-index: var(--ic-z-dropdown);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all var(--ic-transition-normal);
}
.ic-dropdown-menu.ic-show {
opacity: 1;
visibility: visible;
transform: translateY(var(--ic-space-1));
}
.ic-dropdown-item {
display: block;
width: 100%;
padding: var(--ic-space-2) var(--ic-space-4);
font-size: var(--ic-text-body-sm);
color: var(--ic-neutral-900);
background: none;
border: none;
text-align: left;
cursor: pointer;
transition: background-color var(--ic-transition-instant);
}
.ic-dropdown-item:hover {
background-color: var(--ic-neutral-100);
}
.ic-dropdown-item:focus-visible {
outline: none;
background-color: var(--ic-neutral-100);
}
.ic-dropdown-divider {
height: 1px;
background-color: var(--ic-neutral-300);
margin: var(--ic-space-1) 0;
}
/* Popover */
.ic-popover {
position: absolute;
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-lg);
box-shadow: var(--ic-shadow-lg);
z-index: var(--ic-z-popover);
padding: var(--ic-space-4);
}
/* Tooltip */
.ic-tooltip {
position: absolute;
padding: var(--ic-space-2) var(--ic-space-3);
background-color: var(--ic-neutral-900);
color: var(--ic-white);
font-size: var(--ic-text-caption);
border-radius: var(--ic-radius-sm);
z-index: var(--ic-z-tooltip);
max-width: 250px;
white-space: normal;
}
/* ═══════════════════════════════════════════════════════════════════════════
12. TABLES
═══════════════════════════════════════════════════════════════════════════ */
.ic-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ic-text-body-sm);
}
.ic-table th {
padding: var(--ic-space-3) var(--ic-space-4);
text-align: left;
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
background-color: var(--ic-neutral-50);
border-bottom: 1px solid var(--ic-neutral-300);
}
.ic-table td {
padding: var(--ic-space-3) var(--ic-space-4);
border-bottom: 1px solid var(--ic-neutral-300);
color: var(--ic-neutral-900);
}
.ic-table tbody tr:hover {
background-color: var(--ic-neutral-100);
}
.ic-table-striped tbody tr:nth-child(even) {
background-color: var(--ic-neutral-50);
}
/* ═══════════════════════════════════════════════════════════════════════════
13. NAVIGATION
═══════════════════════════════════════════════════════════════════════════ */
/* Navbar */
.ic-navbar {
display: flex;
align-items: center;
padding: var(--ic-space-4) var(--ic-space-6);
background-color: var(--ic-white);
border-bottom: 1px solid var(--ic-neutral-300);
}
.ic-navbar-brand {
font-size: var(--ic-text-h4);
font-weight: var(--ic-font-semibold);
color: var(--ic-primary-500);
text-decoration: none;
}
.ic-navbar-nav {
display: flex;
align-items: center;
gap: var(--ic-space-1);
list-style: none;
margin: 0;
padding: 0;
}
.ic-nav-link {
display: flex;
align-items: center;
gap: var(--ic-space-2);
padding: var(--ic-space-2) var(--ic-space-4);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
text-decoration: none;
border-radius: var(--ic-radius-md);
transition: all var(--ic-transition-instant);
}
.ic-nav-link:hover {
color: var(--ic-primary-500);
background-color: var(--ic-primary-50);
}
.ic-nav-link.ic-active {
color: var(--ic-primary-500);
background-color: var(--ic-primary-50);
}
.nav-link.nav-toggle > svg {
width: 18px;
height: 18px;
}
.nav-item> a > svg {
width: 18px;
height: 18px;
}
.nav-item> svg {
width: 18px;
height: 18px;
}
/* Sidebar */
.ic-sidebar {
width: 260px;
background-color: var(--ic-white);
border-right: 1px solid var(--ic-neutral-300);
padding: var(--ic-space-4);
height: 100vh;
overflow-y: auto;
}
.ic-sidebar-nav {
display: flex;
flex-direction: column;
gap: var(--ic-space-1);
}
.ic-sidebar-link {
display: flex;
align-items: center;
gap: var(--ic-space-3);
padding: var(--ic-space-3) var(--ic-space-4);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
text-decoration: none;
border-radius: var(--ic-radius-md);
transition: all var(--ic-transition-instant);
}
.ic-sidebar-link:hover {
color: var(--ic-primary-500);
background-color: var(--ic-primary-50);
}
.ic-sidebar-link.ic-active {
color: var(--ic-primary-500);
background-color: var(--ic-primary-50);
}
/* Tabs */
.ic-tabs {
display: flex;
gap: var(--ic-space-1);
border-bottom: 1px solid var(--ic-neutral-300);
}
.ic-tab {
padding: var(--ic-space-3) var(--ic-space-4);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all var(--ic-transition-instant);
margin-bottom: -1px;
}
.ic-tab:hover {
color: var(--ic-primary-500);
}
.ic-tab.ic-active {
color: var(--ic-primary-500);
border-bottom-color: var(--ic-primary-500);
}
/* ═══════════════════════════════════════════════════════════════════════════
14. PAGINATION
═══════════════════════════════════════════════════════════════════════════ */
.ic-pagination {
display: flex;
align-items: center;
gap: var(--ic-space-1);
list-style: none;
margin: 0;
padding: 0;
}
.ic-pagination-item {
min-width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
cursor: pointer;
transition: all var(--ic-transition-instant);
}
.ic-pagination-item:hover {
border-color: var(--ic-neutral-500);
background-color: var(--ic-neutral-100);
}
.ic-pagination-item.ic-active {
background-color: var(--ic-primary-500);
border-color: var(--ic-primary-500);
color: var(--ic-white);
}
.ic-pagination-item:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ═══════════════════════════════════════════════════════════════════════════
15. PROGRESS & SPINNER
═══════════════════════════════════════════════════════════════════════════ */
/* Progress Bar */
.ic-progress {
width: 100%;
height: 8px;
background-color: var(--ic-neutral-200);
border-radius: var(--ic-radius-full);
overflow: hidden;
}
.ic-progress-bar {
height: 100%;
background-color: var(--ic-primary-500);
border-radius: var(--ic-radius-full);
transition: width var(--ic-transition-normal);
}
.ic-progress-bar-success {
background-color: var(--ic-success);
}
.ic-progress-bar-warning {
background-color: var(--ic-warning);
}
.ic-progress-bar-error {
background-color: var(--ic-error);
}
/* Spinner */
.ic-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--ic-primary-100);
border-top-color: var(--ic-primary-500);
border-radius: 50%;
animation: ic-spin 0.75s linear infinite;
}
.ic-spinner-sm {
width: 16px;
height: 16px;
}
.ic-spinner-lg {
width: 32px;
height: 32px;
border-width: 3px;
}
.ic-spinner-xl {
width: 48px;
height: 48px;
border-width: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════════
16. AVATAR
═══════════════════════════════════════════════════════════════════════════ */
.ic-avatar {
width: 40px;
height: 40px;
border-radius: var(--ic-radius-full);
background-color: var(--ic-primary-100);
color: var(--ic-primary-700);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--ic-font-medium);
font-size: var(--ic-text-body-sm);
overflow: hidden;
}
.ic-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ic-avatar-sm {
width: 32px;
height: 32px;
font-size: var(--ic-text-caption);
}
.ic-avatar-lg {
width: 56px;
height: 56px;
font-size: var(--ic-text-body-lg);
}
.ic-avatar-xl {
width: 80px;
height: 80px;
font-size: var(--ic-text-h3);
}
/* ═══════════════════════════════════════════════════════════════════════════
17. EMPTY STATE
═══════════════════════════════════════════════════════════════════════════ */
.ic-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--ic-space-16) var(--ic-space-8);
text-align: center;
}
.ic-empty-state-icon {
width: 48px;
height: 48px;
color: var(--ic-neutral-400);
margin-bottom: var(--ic-space-4);
}
.ic-empty-state-title {
font-size: var(--ic-text-h4);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-900);
margin-bottom: var(--ic-space-2);
}
.ic-empty-state-description {
font-size: var(--ic-text-body-sm);
color: var(--ic-neutral-700);
max-width: 400px;
margin-bottom: var(--ic-space-6);
}
/* ═══════════════════════════════════════════════════════════════════════════
18. LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════════════════ */
/* Container */
.ic-container {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: var(--ic-space-4);
padding-right: var(--ic-space-4);
}
@media (min-width: 768px) {
.ic-container {
padding-left: var(--ic-space-6);
padding-right: var(--ic-space-6);
}
}
@media (min-width: 1024px) {
.ic-container {
padding-left: var(--ic-space-8);
padding-right: var(--ic-space-8);
}
}
/* Flex Utilities */
.ic-flex {
display: flex;
}
.ic-inline-flex {
display: inline-flex;
}
.ic-flex-col {
flex-direction: column;
}
.ic-flex-wrap {
flex-wrap: wrap;
}
.ic-items-start {
align-items: flex-start;
}
.ic-items-center {
align-items: center;
}
.ic-items-end {
align-items: flex-end;
}
.ic-justify-start {
justify-content: flex-start;
}
.ic-justify-center {
justify-content: center;
}
.ic-justify-end {
justify-content: flex-end;
}
.ic-justify-between {
justify-content: space-between;
}
.ic-flex-1 {
flex: 1;
}
/* Grid */
.ic-grid {
display: grid;
}
.ic-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.ic-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ic-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ic-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ic-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* Gap */
.ic-gap-1 { gap: var(--ic-space-1); }
.ic-gap-2 { gap: var(--ic-space-2); }
.ic-gap-3 { gap: var(--ic-space-3); }
.ic-gap-4 { gap: var(--ic-space-4); }
.ic-gap-5 { gap: var(--ic-space-5); }
.ic-gap-6 { gap: var(--ic-space-6); }
.ic-gap-8 { gap: var(--ic-space-8); }
/* Spacing (margin/padding) */
.ic-m-0 { margin: 0; }
.ic-m-1 { margin: var(--ic-space-1); }
.ic-m-2 { margin: var(--ic-space-2); }
.ic-m-3 { margin: var(--ic-space-3); }
.ic-m-4 { margin: var(--ic-space-4); }
.ic-m-6 { margin: var(--ic-space-6); }
.ic-m-8 { margin: var(--ic-space-8); }
.ic-mt-0 { margin-top: 0; }
.ic-mt-1 { margin-top: var(--ic-space-1); }
.ic-mt-2 { margin-top: var(--ic-space-2); }
.ic-mt-3 { margin-top: var(--ic-space-3); }
.ic-mt-4 { margin-top: var(--ic-space-4); }
.ic-mt-6 { margin-top: var(--ic-space-6); }
.ic-mt-8 { margin-top: var(--ic-space-8); }
.ic-mb-0 { margin-bottom: 0; }
.ic-mb-1 { margin-bottom: var(--ic-space-1); }
.ic-mb-2 { margin-bottom: var(--ic-space-2); }
.ic-mb-3 { margin-bottom: var(--ic-space-3); }
.ic-mb-4 { margin-bottom: var(--ic-space-4); }
.ic-mb-6 { margin-bottom: var(--ic-space-6); }
.ic-mb-8 { margin-bottom: var(--ic-space-8); }
.ic-ml-auto { margin-left: auto; }
.ic-mr-auto { margin-right: auto; }
.ic-mx-auto { margin-left: auto; margin-right: auto; }
.ic-p-0 { padding: 0; }
.ic-p-1 { padding: var(--ic-space-1); }
.ic-p-2 { padding: var(--ic-space-2); }
.ic-p-3 { padding: var(--ic-space-3); }
.ic-p-4 { padding: var(--ic-space-4); }
.ic-p-6 { padding: var(--ic-space-6); }
.ic-p-8 { padding: var(--ic-space-8); }
.ic-px-4 { padding-left: var(--ic-space-4); padding-right: var(--ic-space-4); }
.ic-px-6 { padding-left: var(--ic-space-6); padding-right: var(--ic-space-6); }
.ic-py-2 { padding-top: var(--ic-space-2); padding-bottom: var(--ic-space-2); }
.ic-py-3 { padding-top: var(--ic-space-3); padding-bottom: var(--ic-space-3); }
.ic-py-4 { padding-top: var(--ic-space-4); padding-bottom: var(--ic-space-4); }
/* Stack (vertical spacing) */
.ic-stack > * + * {
margin-top: var(--ic-space-4);
}
.ic-stack-sm > * + * {
margin-top: var(--ic-space-2);
}
.ic-stack-lg > * + * {
margin-top: var(--ic-space-8);
}
/* Width/Height */
.ic-w-full { width: 100%; }
.ic-h-full { height: 100%; }
.ic-min-h-screen { min-height: 100vh; }
/* ═══════════════════════════════════════════════════════════════════════════
19. TEXT UTILITIES
═══════════════════════════════════════════════════════════════════════════ */
.ic-text-left { text-align: left; }
.ic-text-center { text-align: center; }
.ic-text-right { text-align: right; }
.ic-uppercase { text-transform: uppercase; }
.ic-lowercase { text-transform: lowercase; }
.ic-capitalize { text-transform: capitalize; }
.ic-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ic-line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ic-line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════════════════════
20. VISIBILITY & DISPLAY
═══════════════════════════════════════════════════════════════════════════ */
.ic-hidden { display: none; }
.ic-block { display: block; }
.ic-inline { display: inline; }
.ic-inline-block { display: inline-block; }
.ic-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
21. BORDERS & DIVIDERS
═══════════════════════════════════════════════════════════════════════════ */
.ic-border { border: 1px solid var(--ic-neutral-300); }
.ic-border-t { border-top: 1px solid var(--ic-neutral-300); }
.ic-border-b { border-bottom: 1px solid var(--ic-neutral-300); }
.ic-border-l { border-left: 1px solid var(--ic-neutral-300); }
.ic-border-r { border-right: 1px solid var(--ic-neutral-300); }
.ic-border-0 { border: none; }
.ic-rounded-none { border-radius: 0; }
.ic-rounded-sm { border-radius: var(--ic-radius-sm); }
.ic-rounded { border-radius: var(--ic-radius-md); }
.ic-rounded-lg { border-radius: var(--ic-radius-lg); }
.ic-rounded-xl { border-radius: var(--ic-radius-xl); }
.ic-rounded-2xl { border-radius: var(--ic-radius-2xl); }
.ic-rounded-full { border-radius: var(--ic-radius-full); }
.ic-divider {
height: 1px;
background-color: var(--ic-neutral-300);
border: none;
margin: var(--ic-space-4) 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
22. SHADOWS
═══════════════════════════════════════════════════════════════════════════ */
.ic-shadow-none { box-shadow: none; }
.ic-shadow-xs { box-shadow: var(--ic-shadow-xs); }
.ic-shadow-sm { box-shadow: var(--ic-shadow-sm); }
.ic-shadow-md { box-shadow: var(--ic-shadow-md); }
.ic-shadow-lg { box-shadow: var(--ic-shadow-lg); }
.ic-shadow-xl { box-shadow: var(--ic-shadow-xl); }
/* ═══════════════════════════════════════════════════════════════════════════
23. BACKGROUNDS
═══════════════════════════════════════════════════════════════════════════ */
.ic-bg-white { background-color: var(--ic-white); }
.ic-bg-page { background-color: var(--ic-neutral-50); }
.ic-bg-muted { background-color: var(--ic-neutral-100); }
.ic-bg-primary { background-color: var(--ic-primary-500); }
.ic-bg-primary-light { background-color: var(--ic-primary-50); }
.ic-bg-secondary { background-color: var(--ic-secondary-500); }
.ic-bg-secondary-light { background-color: var(--ic-secondary-50); }
.ic-bg-tertiary { background-color: var(--ic-tertiary-500); }
.ic-bg-tertiary-light { background-color: var(--ic-tertiary-50); }
/* ═══════════════════════════════════════════════════════════════════════════
24. BOOTSTRAP 5 OVERRIDES
═══════════════════════════════════════════════════════════════════════════ */
/* Override Bootstrap primary colors */
.btn-primary {
--bs-btn-bg: var(--ic-primary-500);
--bs-btn-border-color: var(--ic-primary-500);
--bs-btn-hover-bg: var(--ic-primary-600);
--bs-btn-hover-border-color: var(--ic-primary-600);
--bs-btn-active-bg: var(--ic-primary-700);
--bs-btn-active-border-color: var(--ic-primary-700);
--bs-btn-focus-shadow-rgb: 63, 180, 169;
}
.btn-secondary {
--bs-btn-bg: var(--ic-secondary-500);
--bs-btn-border-color: var(--ic-secondary-500);
--bs-btn-hover-bg: var(--ic-secondary-600);
--bs-btn-hover-border-color: var(--ic-secondary-600);
--bs-btn-active-bg: var(--ic-secondary-700);
--bs-btn-active-border-color: var(--ic-secondary-700);
--bs-btn-focus-shadow-rgb: 46, 70, 158;
}
.btn-success {
--bs-btn-bg: var(--ic-success);
--bs-btn-border-color: var(--ic-success);
--bs-btn-color: var(--ic-success-text);
--bs-btn-hover-bg: var(--ic-success-hover);
--bs-btn-hover-border-color: var(--ic-success-hover);
--bs-btn-hover-color: var(--ic-success-text);
--bs-btn-active-bg: var(--ic-success-active);
--bs-btn-active-border-color: var(--ic-success-active);
--bs-btn-focus-shadow-rgb: 123, 241, 168;
}
.btn-danger {
--bs-btn-bg: var(--ic-error);
--bs-btn-border-color: var(--ic-error);
--bs-btn-hover-bg: var(--ic-error-hover);
--bs-btn-hover-border-color: var(--ic-error-hover);
--bs-btn-active-bg: var(--ic-error-700);
--bs-btn-active-border-color: var(--ic-error-700);
--bs-btn-focus-shadow-rgb: 252, 81, 128;
}
.btn-warning {
--bs-btn-bg: var(--ic-warning);
--bs-btn-border-color: var(--ic-warning);
--bs-btn-hover-bg: var(--ic-warning-hover);
--bs-btn-hover-border-color: var(--ic-warning-hover);
--bs-btn-focus-shadow-rgb: 254, 164, 69;
}
.btn-info {
--bs-btn-bg: var(--ic-info);
--bs-btn-border-color: var(--ic-info);
--bs-btn-hover-bg: var(--ic-info-hover);
--bs-btn-hover-border-color: var(--ic-info-hover);
--bs-btn-focus-shadow-rgb: 138, 158, 255;
}
/* Outline button overrides */
.btn-outline-primary {
--bs-btn-color: var(--ic-primary-500);
--bs-btn-border-color: var(--ic-primary-500);
--bs-btn-hover-bg: var(--ic-primary-500);
--bs-btn-hover-border-color: var(--ic-primary-500);
--bs-btn-active-bg: var(--ic-primary-600);
--bs-btn-active-border-color: var(--ic-primary-600);
--bs-btn-focus-shadow-rgb: 63, 180, 169;
}
.btn-outline-secondary {
--bs-btn-color: var(--ic-secondary-500);
--bs-btn-border-color: var(--ic-secondary-500);
--bs-btn-hover-bg: var(--ic-secondary-500);
--bs-btn-hover-border-color: var(--ic-secondary-500);
--bs-btn-active-bg: var(--ic-secondary-600);
--bs-btn-active-border-color: var(--ic-secondary-600);
--bs-btn-focus-shadow-rgb: 46, 70, 158;
}
.btn-outline-danger {
--bs-btn-color: var(--ic-error);
--bs-btn-border-color: var(--ic-error);
--bs-btn-hover-bg: var(--ic-error);
--bs-btn-hover-border-color: var(--ic-error);
--bs-btn-active-bg: var(--ic-error-hover);
--bs-btn-active-border-color: var(--ic-error-hover);
--bs-btn-focus-shadow-rgb: 252, 81, 128;
}
/* Bootstrap font family override */
.btn,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.nav-link,
.navbar,
.card,
.modal,
.alert,
.badge,
.breadcrumb,
.pagination,
.list-group,
.toast,
.popover,
.tooltip {
font-family: var(--ic-font-family);
}
/* Bootstrap form control override */
.form-control,
.form-select {
border-color: var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
height: 38px;
padding: 0 var(--ic-space-3);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-900);
box-shadow: var(--ic-shadow-sm);
}
.form-control {
height: auto;
padding: var(--ic-space-2) var(--ic-space-3);
}
.form-control::placeholder {
color: var(--ic-neutral-600);
}
/* .form-control:hover,
.form-select:hover {
border-color: var(--ic-neutral-500) !important;
} */
.form-control:focus,
.form-select:focus {
border-color: var(--ic-neutral-500);
box-shadow: var(--ic-focus-ring) !important;
}
/* ─── Select2 bootstrap-5 focus/open ───────── */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
border-color: var(--ic-neutral-500) !important;
box-shadow: var(--ic-focus-ring);
outline: none !important;
}
.select2-container--bootstrap-5:not(.select2-container--open) .select2-selection:hover {
border-color: var(--ic-neutral-400) !important;
}
.select2-container--bootstrap-5 .select2-selection {
border-color: var(--ic-neutral-300) !important;
border-radius: var(--ic-radius-md) !important;
padding: var(--ic-space-2) var(--ic-space-3) !important;
font-size: var(--ic-text-body-sm) !important;
font-weight: var(--ic-font-medium) !important;
color: var(--ic-neutral-700) !important;
box-shadow: var(--ic-shadow-sm) !important;
height: 38px;
}
/* Bootstrap card override */
.card {
border-color: var(--ic-neutral-300);
border-radius: var(--ic-radius-xl);
}
.card-header {
background-color: var(--ic-neutral-50);
border-color: var(--ic-neutral-300);
}
/* Bootstrap modal override */
.modal-content {
border-radius: var(--ic-radius-xl);
border: none;
box-shadow: var(--ic-shadow-xl);
}
.modal-header {
border-color: var(--ic-neutral-300);
padding: var(--ic-space-5) var(--ic-space-6);
}
.modal-body {
padding: var(--ic-space-6);
}
.modal-footer {
border-color: var(--ic-neutral-300);
padding: var(--ic-space-5) var(--ic-space-6);
}
.modal-backdrop,
.modal-backdrop.show {
background-color: transparent;
backdrop-filter: none;
background: rgba(34, 43, 55, 0.4);
/* --ic-neutral-900 base with opacity */
}
/* Bootstrap alert override */
.alert {
border-radius: var(--ic-radius-lg);
}
.alert-success {
background-color: var(--ic-success-bg);
border-color: var(--ic-success);
color: var(--ic-success-text);
}
.alert-danger {
background-color: var(--ic-error-bg);
border-color: var(--ic-error);
color: var(--ic-neutral-900);
}
.alert-warning {
background-color: var(--ic-warning-bg);
border-color: var(--ic-warning);
color: var(--ic-neutral-900);
}
.alert-info {
background-color: rgba(138, 158, 255, 0.06);
border-color: var(--ic-info);
color: var(--ic-neutral-900);
}
/* Bootstrap badge override */
.badge {
font-weight: var(--ic-font-medium);
border-radius: var(--ic-radius-full);
padding: 6px var(--ic-space-3);
}
.bg-primary {
background-color: var(--ic-primary-500) !important;
}
.bg-secondary {
background-color: var(--ic-secondary-500) !important;
}
.bg-success {
background-color: var(--ic-success) !important;
color: var(--ic-success-text) !important;
}
.bg-danger {
background-color: var(--ic-error) !important;
}
.bg-warning {
background-color: var(--ic-warning) !important;
}
.bg-info {
background-color: var(--ic-info) !important;
}
/* Bootstrap dropdown override */
.dropdown-menu {
border-color: var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
box-shadow: var(--ic-shadow-lg);
padding: var(--ic-space-1) 0;
}
.dropdown-item {
padding: var(--ic-space-2) var(--ic-space-4);
font-size: var(--ic-text-body-sm);
color: var(--ic-neutral-900);
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--ic-neutral-100);
color: var(--ic-neutral-900);
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--ic-primary-50);
color: var(--ic-primary-500);
}
/* Bootstrap nav override */
.nav-tabs {
border-color: var(--ic-neutral-300);
}
.nav-tabs .nav-link {
color: var(--ic-neutral-700);
border-radius: var(--ic-radius-md) var(--ic-radius-md) 0 0;
}
.nav-tabs .nav-link:hover {
border-color: var(--ic-neutral-300);
color: var(--ic-primary-500);
}
.nav-tabs .nav-link.active {
border-color: var(--ic-neutral-300) var(--ic-neutral-300) var(--ic-white);
color: var(--ic-primary-500);
}
/* Bootstrap pagination override */
.page-link {
color: var(--ic-neutral-700);
border-color: var(--ic-neutral-300);
}
.page-link:hover {
color: var(--ic-primary-500);
background-color: var(--ic-primary-50);
border-color: var(--ic-neutral-300);
}
.page-item.active .page-link {
background-color: var(--ic-primary-500);
border-color: var(--ic-primary-500);
}
/* Bootstrap progress override */
.progress {
height: 8px;
background-color: var(--ic-neutral-200);
border-radius: var(--ic-radius-full);
}
.progress-bar {
background-color: var(--ic-primary-500);
}
/* Bootstrap table override */
.table {
--bs-table-hover-bg: var(--ic-neutral-100);
--bs-table-striped-bg: var(--ic-neutral-50);
}
.table > thead {
background-color: var(--ic-neutral-50);
}
.table > thead > tr > th {
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
border-color: var(--ic-neutral-300);
}
.table > tbody > tr > td {
border-color: var(--ic-neutral-300);
color: var(--ic-neutral-900);
}
/* Bootstrap tooltip override */
.tooltip-inner {
background-color: var(--ic-neutral-900);
border-radius: var(--ic-radius-sm);
font-size: var(--ic-text-caption);
padding: var(--ic-space-2) var(--ic-space-3);
}
/* Bootstrap breadcrumb override */
.breadcrumb {
--bs-breadcrumb-divider-color: var(--ic-neutral-600);
}
.breadcrumb-item a {
color: var(--ic-primary-500);
}
.breadcrumb-item.active {
color: var(--ic-neutral-700);
}
/* ═══════════════════════════════════════════════════════════════════════════
25. RESPONSIVE UTILITIES
═══════════════════════════════════════════════════════════════════════════ */
/* Hide on different breakpoints */
@media (max-width: 575.98px) {
.ic-hide-xs { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
.ic-hide-sm { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.ic-hide-md { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.ic-hide-lg { display: none !important; }
}
@media (min-width: 1200px) {
.ic-hide-xl { display: none !important; }
}
/* Show only on specific breakpoints */
@media (min-width: 576px) {
.ic-show-xs-only { display: none !important; }
}
@media (max-width: 575.98px), (min-width: 768px) {
.ic-show-sm-only { display: none !important; }
}
@media (max-width: 767.98px), (min-width: 992px) {
.ic-show-md-only { display: none !important; }
}
@media (max-width: 991.98px), (min-width: 1200px) {
.ic-show-lg-only { display: none !important; }
}
/* Responsive grid columns */
@media (min-width: 576px) {
.ic-sm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ic-sm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.ic-md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ic-md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ic-md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ic-lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ic-lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ic-lg-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ═══════════════════════════════════════════════════════════════════════════
26. ANIMATION UTILITIES
═══════════════════════════════════════════════════════════════════════════ */
.ic-animate-fade-in {
animation: ic-fade-in var(--ic-transition-fast) ease-out;
}
.ic-animate-slide-up {
animation: ic-slide-up var(--ic-transition-normal) ease-out;
}
.ic-animate-slide-down {
animation: ic-slide-down var(--ic-transition-normal) ease-out;
}
.ic-animate-scale-in {
animation: ic-scale-in var(--ic-transition-normal) ease-out;
}
@keyframes ic-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ic-slide-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ic-slide-down {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ic-scale-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Transition utilities */
.ic-transition-all {
transition: all var(--ic-transition-fast);
}
.ic-transition-colors {
transition: color var(--ic-transition-fast), background-color var(--ic-transition-fast), border-color var(--ic-transition-fast);
}
.ic-transition-opacity {
transition: opacity var(--ic-transition-fast);
}
.ic-transition-transform {
transition: transform var(--ic-transition-fast);
}
/* ═══════════════════════════════════════════════════════════════════════════
27. PRINT STYLES
═══════════════════════════════════════════════════════════════════════════ */
@media print {
.ic-no-print {
display: none !important;
}
body {
background-color: white;
color: black;
overflow: auto;
height: auto;
}
.ic-card,
.ic-card-section {
box-shadow: none;
border: 1px solid #ccc;
}
a {
color: black;
text-decoration: underline;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
28. iCOMOON ICONS (from Site_v2)
═══════════════════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'icomoon';
src: url('/Content/icoMoon_font/icomoon.eot?hchbi7');
src: url('/Content/icoMoon_font/icomoon.eot?hchbi7#iefix') format('embedded-opentype'),
url('/Content/icoMoon_font/icomoon.ttf?hchbi7') format('truetype'),
url('/Content/icoMoon_font/icomoon.woff?hchbi7') format('woff'),
url('/Content/icoMoon_font/icomoon.svg?hchbi7#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="iconmoon-"],
[class*=" iconmoon-"] {
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 20px;
color: var(--ic-neutral-700);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Icon codes */
.iconmoon-chevron_down:before { content: "\e924"; }
.iconmoon-close:before { content: "\e925"; }
.iconmoon-history:before { content: "\e926"; }
.iconmoon-more-vertical-single:before { content: "\e927"; }
.iconmoon-search-outline:before { content: "\e928"; }
.iconmoon-sun-outline:before { content: "\e929"; }
.iconmoon-arrow-back:before { content: "\e910"; }
.iconmoon-box:before { content: "\e911"; }
.iconmoon-brush:before { content: "\e912"; }
.iconmoon-chair:before { content: "\e913"; }
.iconmoon-clip:before { content: "\e914"; }
.iconmoon-compass:before { content: "\e915"; }
.iconmoon-desk:before { content: "\e916"; }
.iconmoon-display:before { content: "\e917"; }
.iconmoon-eye-off:before { content: "\e918"; }
.iconmoon-eye:before { content: "\e919"; }
.iconmoon-firmware:before { content: "\e91a"; }
.iconmoon-flash:before { content: "\e91b"; }
.iconmoon-more-vertical:before { content: "\e91c"; }
.iconmoon-notification-bell:before { content: "\e91d"; }
.iconmoon-occupancy:before { content: "\e91e"; }
.iconmoon-person-done:before { content: "\e91f"; }
.iconmoon-routine:before { content: "\e920"; }
.iconmoon-sync:before { content: "\e921"; }
.iconmoon-tags:before { content: "\e922"; }
.iconmoon-target:before { content: "\e923"; }
.iconmoon-trash-2:before { content: "\e90d"; }
.iconmoon-arrow-right-outline:before { content: "\e900"; }
.iconmoon-award-outline:before { content: "\e901"; }
.iconmoon-briefcase-outline:before { content: "\e902"; }
.iconmoon-building:before { content: "\e903"; }
.iconmoon-checkmark-circle-2-outline:before { content: "\e904"; }
.iconmoon-close-circle-outline:before { content: "\e905"; }
.iconmoon-edit:before { content: "\e906"; }
.iconmoon-email-outline:before { content: "\e907"; }
.iconmoon-layer:before { content: "\e908"; }
.iconmoon-log-in-outline:before { content: "\e909"; }
.iconmoon-map-outline:before { content: "\e90a"; }
.iconmoon-pie-chart-outline:before { content: "\e90b"; }
.iconmoon-swap-outline:before { content: "\e90c"; }
.iconmoon-upload-outline:before { content: "\e90e"; }
.iconmoon-users:before { content: "\e90f"; }
/* ═══════════════════════════════════════════════════════════════════════════
29. PAGE LAYOUT STRUCTURE
═══════════════════════════════════════════════════════════════════════════ */
/* Main Page Container */
.ic-page-container {
display: flex;
min-height: 100vh;
background-color: var(--ic-neutral-50);
font-family: var(--ic-font-family);
}
/* Content Wrapper */
.ic-page-content-wrapper {
flex: 1 1 auto;
padding: 0;
margin-left: 0;
}
.ic-page-content {
padding: var(--ic-space-6);
max-width: 100%;
}
/* Portlet / Main Card Container */
.ic-portlet {
background: var(--ic-white);
box-shadow: var(--ic-shadow-sm);
border-radius: var(--ic-radius-xl);
padding: var(--ic-space-2);
margin-left: var(--ic-space-12);
min-height: 90vh;
}
.ic-portlet-body {
padding-top: var(--ic-space-2);
}
.ic-portlet-title {
border-bottom: none;
padding: var(--ic-space-4) var(--ic-space-6);
}
.ic-portlet-caption {
font-size: var(--ic-text-h4);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-900);
line-height: 1.4;
}
/* ═══════════════════════════════════════════════════════════════════════════
30. TOP NAVBAR / HEADER
═══════════════════════════════════════════════════════════════════════════ */
.ic-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 75px;
min-height: 75px;
padding: 0 var(--ic-space-6);
background: var(--ic-white);
box-shadow: 0px 0px 10px rgba(34, 43, 55, 0.15);
border-bottom: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--ic-z-sticky);
}
.ic-header-brand {
display: flex;
align-items: center;
gap: var(--ic-space-3);
}
.ic-header-brand-logo {
height: 40px;
width: auto;
}
.ic-header-brand-text {
font-size: var(--ic-text-h4);
font-weight: var(--ic-font-semibold);
color: var(--ic-primary-500);
}
.ic-header-nav {
display: flex;
align-items: center;
gap: var(--ic-space-4);
}
.ic-header-nav-item {
position: relative;
}
.ic-header-nav-link {
display: flex;
align-items: center;
gap: var(--ic-space-2);
padding: var(--ic-space-2) var(--ic-space-3);
color: var(--ic-neutral-900);
font-weight: var(--ic-font-medium);
text-decoration: none;
border-radius: var(--ic-radius-md);
transition: all var(--ic-transition-instant);
}
.ic-header-nav-link:hover {
background-color: var(--ic-neutral-100);
color: var(--ic-neutral-900);
text-decoration: none;
}
/* User Avatar in Header */
.ic-header-avatar {
width: 40px;
height: 40px;
border-radius: var(--ic-radius-full);
border: 3px solid var(--ic-primary-500);
object-fit: cover;
}
/* Notification Badge */
.ic-header-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
font-size: 10px;
font-weight: var(--ic-font-bold);
color: var(--ic-error);
background-color: transparent;
border: 2px solid var(--ic-error);
border-radius: var(--ic-radius-full);
display: flex;
align-items: center;
justify-content: center;
}
/* Header fixed offset */
.ic-page-header-fixed .ic-page-container {
margin-top: 75px;
}
/* ═══════════════════════════════════════════════════════════════════════════
31. SIDEBAR NAVIGATION
═══════════════════════════════════════════════════════════════════════════ */
.ic-sidebar-wrapper {
width: 260px;
min-width: 260px;
background-color: var(--ic-white);
border-right: 1px solid var(--ic-neutral-300);
height: calc(100vh - 75px);
position: sticky;
top: 75px;
overflow-y: auto;
padding: var(--ic-space-4);
}
.ic-sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--ic-space-1);
}
.ic-sidebar-menu-item {
margin: 0;
}
.ic-sidebar-menu-link {
display: flex;
align-items: center;
gap: var(--ic-space-3);
padding: var(--ic-space-3) var(--ic-space-4);
color: var(--ic-neutral-700);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
text-decoration: none;
border-radius: var(--ic-radius-xl);
transition: all var(--ic-transition-instant);
}
.ic-sidebar-menu-link:hover {
background-color: rgba(63, 180, 169, 0.08);
color: var(--ic-primary-500);
text-decoration: none;
}
.ic-sidebar-menu-link.active,
.ic-sidebar-menu-item.active > .ic-sidebar-menu-link {
background-color: rgba(63, 180, 169, 0.08);
color: var(--ic-primary-500);
}
.ic-sidebar-menu-link.active i,
.ic-sidebar-menu-item.active > .ic-sidebar-menu-link i {
color: var(--ic-primary-500);
}
.ic-sidebar-menu-link i {
font-size: 20px;
color: var(--ic-neutral-700);
transition: color var(--ic-transition-instant);
}
/* Submenu */
.ic-sidebar-submenu {
list-style: none;
padding: 0 0 0 var(--ic-space-8);
margin: var(--ic-space-1) 0;
display: flex;
flex-direction: column;
gap: var(--ic-space-1);
}
.ic-sidebar-submenu-link {
display: flex;
align-items: center;
gap: var(--ic-space-2);
padding: var(--ic-space-2) var(--ic-space-4);
color: var(--ic-neutral-700);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-regular);
text-decoration: none;
border-radius: var(--ic-radius-xl);
transition: all var(--ic-transition-instant);
}
.ic-sidebar-submenu-link:hover,
.ic-sidebar-submenu-link.active {
background-color: rgba(63, 180, 169, 0.08);
color: var(--ic-primary-500);
text-decoration: none;
}
/* Section divider in sidebar */
.ic-sidebar-section {
padding: var(--ic-space-4) var(--ic-space-4) var(--ic-space-2);
font-size: var(--ic-text-caption);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-600);
text-transform: uppercase;
letter-spacing: var(--ic-tracking-wide);
}
/* ═══════════════════════════════════════════════════════════════════════════
32. DASHBOARD PAGE HEADER
═══════════════════════════════════════════════════════════════════════════ */
.ic-page-header-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ic-space-6);
}
.ic-page-title-wrapper {
display: flex;
flex-direction: column;
gap: var(--ic-space-1);
}
.ic-page-title {
font-size: var(--ic-text-h3);
font-weight: var(--ic-font-bold);
color: var(--ic-neutral-900);
line-height: 1.3;
margin: 0;
}
.ic-page-subtitle {
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-700);
line-height: 1.4;
margin: 0;
}
.ic-page-actions {
display: flex;
align-items: center;
gap: var(--ic-space-2);
}
/* ═══════════════════════════════════════════════════════════════════════════
33. TOGGLE GROUP (View Switcher)
═══════════════════════════════════════════════════════════════════════════ */
.ic-toggle-group {
display: flex;
align-items: center;
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
padding: 1px 5px;
background-color: var(--ic-white);
height: 42px;
}
.ic-toggle-group-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 var(--ic-space-2);
background-color: transparent;
border: none;
border-radius: var(--ic-radius-sm);
cursor: pointer;
transition: all var(--ic-transition-instant);
color: var(--ic-neutral-600);
}
.ic-toggle-group-item:hover {
background-color: var(--ic-neutral-100);
color: var(--ic-neutral-900);
}
.ic-toggle-group-item.active {
background-color: var(--ic-neutral-200);
color: var(--ic-neutral-900);
}
.ic-toggle-group-item i,
.ic-toggle-group-item svg {
width: 16px;
height: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════
34. FILTER DROPDOWNS
═══════════════════════════════════════════════════════════════════════════ */
.ic-filter-row {
display: flex;
flex-wrap: wrap;
gap: var(--ic-space-3);
margin-bottom: var(--ic-space-6);
}
.ic-filter-dropdown {
display: flex;
align-items: center;
gap: var(--ic-space-2);
padding: var(--ic-space-2) var(--ic-space-4);
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
font-size: var(--ic-text-body-sm);
color: var(--ic-neutral-900);
cursor: pointer;
transition: all var(--ic-transition-instant);
height: 40px;
}
.ic-filter-dropdown:hover {
border-color: var(--ic-neutral-500);
}
.ic-filter-dropdown:focus {
outline: none;
border-color: var(--ic-neutral-500);
box-shadow: var(--ic-focus-ring);
}
.ic-filter-dropdown-icon {
width: 16px;
height: 16px;
color: var(--ic-neutral-600);
}
.ic-filter-dropdown-label {
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
}
.ic-filter-dropdown-value {
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-900);
}
.ic-filter-dropdown-chevron {
width: 12px;
height: 12px;
color: var(--ic-neutral-600);
margin-left: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════
35. STAT CARDS / KPI CARDS
═══════════════════════════════════════════════════════════════════════════ */
.ic-stat-cards-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--ic-space-6);
margin-bottom: var(--ic-space-6);
}
@media (max-width: 1200px) {
.ic-stat-cards-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.ic-stat-cards-row {
grid-template-columns: 1fr;
}
}
.ic-stat-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ic-space-4) var(--ic-space-5);
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-lg);
min-height: 84px;
transition: all var(--ic-transition-instant);
}
.ic-stat-card:hover {
border-color: var(--ic-neutral-500);
box-shadow: var(--ic-shadow-card-hover);
}
.ic-stat-card-active {
background-color: var(--ic-neutral-200);
border-color: var(--ic-neutral-500);
}
.ic-stat-card-content {
display: flex;
align-items: center;
gap: var(--ic-space-4);
}
.ic-stat-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--ic-radius-md);
flex-shrink: 0;
}
.ic-stat-card-icon svg,
.ic-stat-card-icon i {
width: 20px;
height: 20px;
}
/* Icon backgrounds per stato */
.ic-stat-card-icon-default {
background-color: var(--ic-neutral-200);
color: var(--ic-neutral-700);
}
.ic-stat-card-icon-success {
background-color: #E8FCF0;
color: var(--ic-success-700);
}
.ic-stat-card-icon-warning {
background-color: #FFF5E8;
color: var(--ic-warning-700);
}
.ic-stat-card-icon-error {
background-color: #FFF0F4;
color: var(--ic-error-700);
}
.ic-stat-card-text {
display: flex;
flex-direction: column;
}
.ic-stat-card-label {
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
line-height: 1.4;
}
.ic-stat-card-value {
font-size: var(--ic-text-h3);
font-weight: var(--ic-font-bold);
color: var(--ic-neutral-900);
line-height: 1.25;
}
.ic-stat-card-indicator {
width: 8px;
height: 8px;
border-radius: var(--ic-radius-full);
background-color: var(--ic-neutral-500);
}
/* ═══════════════════════════════════════════════════════════════════════════
36. DATA TABLE (Dashboard Style)
═══════════════════════════════════════════════════════════════════════════ */
.ic-data-card {
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-lg);
box-shadow: var(--ic-shadow-sm);
overflow: hidden;
}
.ic-data-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ic-space-5) var(--ic-space-6);
border-bottom: 1px solid var(--ic-neutral-200);
}
.ic-data-card-title {
font-size: var(--ic-text-body);
font-weight: var(--ic-font-semibold);
color: var(--ic-neutral-800);
margin: 0;
}
.ic-data-card-search {
position: relative;
width: 256px;
}
.ic-data-card-search-input {
width: 100%;
height: 36px;
padding: var(--ic-space-1) var(--ic-space-3) var(--ic-space-1) 40px;
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-sm);
font-size: var(--ic-text-body-sm);
color: var(--ic-neutral-900);
transition: all var(--ic-transition-instant);
}
.ic-data-card-search-input::placeholder {
color: var(--ic-neutral-600);
}
.ic-data-card-search-input:focus {
outline: none;
border-color: var(--ic-neutral-500);
box-shadow: var(--ic-focus-ring);
}
.ic-data-card-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--ic-neutral-600);
}
/* Table Styles */
.ic-data-table {
width: 100%;
border-collapse: collapse;
}
.ic-data-table thead {
background-color: #f6f8f9;
}
.ic-data-table thead th {
height: 40px;
padding: 0 var(--ic-space-4);
text-align: left;
font-size: var(--ic-text-caption);
font-weight: var(--ic-font-bold);
color: var(--ic-neutral-600);
border-bottom: 1px solid var(--ic-neutral-300);
white-space: nowrap;
vertical-align: middle;
}
.ic-data-table thead th:first-child {
padding-left: var(--ic-space-6);
}
.ic-data-table thead th:last-child {
padding-right: var(--ic-space-6);
}
.ic-data-table tbody tr {
background-color: var(--ic-white);
border-bottom: 1px solid #f0f4f7;
transition: background-color var(--ic-transition-instant);
}
.ic-data-table tbody tr:hover {
background-color: #f6f8f9;
}
.ic-data-table tbody tr:last-child {
border-bottom: none;
}
.ic-data-table tbody td {
height: 65px;
padding: 0 var(--ic-space-4);
color: var(--ic-neutral-600);
font-size: var(--ic-text-caption);
vertical-align: middle;
}
.ic-data-table tbody td:first-child {
padding-left: var(--ic-space-6);
}
.ic-data-table tbody td:last-child {
padding-right: var(--ic-space-6);
}
/* Table Cell Types */
.ic-data-table-cell-primary {
font-weight: var(--ic-font-medium);
font-size: var(--ic-text-body-sm);
color: #273240;
line-height: 1.4;
}
.ic-data-table-cell-secondary {
font-size: var(--ic-text-caption);
color: var(--ic-neutral-600);
margin-top: 2px;
line-height: 1.3;
}
.ic-data-table-cell-group {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Table footer — e.g. "Showing 18 of 18 devices" */
.ic-data-table-footer {
display: flex;
align-items: center;
padding: var(--ic-space-3) var(--ic-space-6);
border-top: 1px solid var(--ic-neutral-200);
font-size: var(--ic-text-caption);
color: var(--ic-neutral-600);
background-color: var(--ic-white);
}
/* Reading Value */
.ic-reading-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.ic-reading-label {
font-size: var(--ic-text-caption);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-800);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.ic-reading-value {
display: flex;
align-items: baseline;
gap: var(--ic-space-2);
}
.ic-reading-number {
font-size: var(--ic-text-body-lg);
font-weight: var(--ic-font-bold);
line-height: 1.5;
}
.ic-reading-number-success {
color: var(--ic-success-700);
}
.ic-reading-number-warning {
color: var(--ic-warning-700);
}
.ic-reading-number-error {
color: var(--ic-error-700);
}
.ic-reading-unit {
font-size: var(--ic-text-caption);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-700);
}
/* Device Badge (small tag) */
.ic-device-badge {
display: inline-flex;
align-items: center;
padding: 3px 7px;
background-color: rgba(246, 248, 249, 0.5);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-sm);
font-size: 10px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-700);
}
/* Status Badge */
.ic-status-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--ic-radius-sm);
font-size: var(--ic-text-caption);
font-weight: var(--ic-font-medium);
}
.ic-status-badge-ok {
background-color: #E8FCF0;
color: var(--ic-success-700);
}
.ic-status-badge-warning {
background-color: #FFF5E8;
color: var(--ic-warning-700);
}
.ic-status-badge-error {
background-color: #FFF0F4;
color: var(--ic-error-700);
}
/* Timestamp */
.ic-timestamp {
font-size: var(--ic-text-caption);
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-700);
text-align: right;
}
/* ═══════════════════════════════════════════════════════════════════════════
37. SELECT2 OVERRIDES
═══════════════════════════════════════════════════════════════════════════ */
/* ── Container ─────────────────────────────────────────────────────────── */
.select2-container--default {
width: 100% !important;
font-family: var(--ic-font-family);
font-size: var(--ic-text-body-sm);
}
/* ── Selection box (shared single + multiple) ──────────────────────────── */
.select2-container--default .select2-selection {
display: flex;
align-items: center;
min-height: 40px;
padding: var(--ic-space-2) var(--ic-space-3);
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300) !important;
border-radius: var(--ic-radius-md) !important;
box-shadow: none;
outline: 0;
color: var(--ic-neutral-700);
transition: border-color var(--ic-transition-instant), box-shadow var(--ic-transition-instant);
}
.select2-container--default:not(.select2-container--open):not(.select2-container--focus) .select2-selection:hover {
border-color: var(--ic-neutral-500) !important;
}
/* ── Single selection ──────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
height: 40px;
padding: var(--ic-space-2) var(--ic-space-3);
justify-content: space-between;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
flex: 1 1 auto;
padding: 0;
line-height: 1.5;
color: var(--ic-neutral-900);
font-size: var(--ic-text-body-sm);
font-family: var(--ic-font-family);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--ic-neutral-600);
}
/* Arrow (chevron) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
position: static;
width: 20px;
height: 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
position: static;
border-color: var(--ic-neutral-600) transparent transparent transparent;
border-width: 5px 4px 0 4px;
margin: 0;
transition: transform var(--ic-transition-instant);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent var(--ic-neutral-600) transparent;
border-width: 0 4px 5px 4px;
}
/* ── Multiple selection ────────────────────────────────────────────────── */
.select2-container--default .select2-selection--multiple {
min-height: 40px;
padding: calc(var(--ic-space-2) - 2px) var(--ic-space-3);
flex-wrap: wrap;
gap: var(--ic-space-1);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: flex;
flex-wrap: wrap;
gap: var(--ic-space-1);
padding: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
display: inline-flex;
align-items: center;
gap: var(--ic-space-1);
padding: 2px 8px;
background-color: var(--ic-neutral-200);
border: none;
border-radius: var(--ic-radius-sm);
font-size: var(--ic-text-caption);
color: var(--ic-neutral-800);
margin: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: var(--ic-neutral-600);
font-size: 14px;
margin-right: 2px;
border: none;
background: none;
cursor: pointer;
order: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: var(--ic-neutral-900);
}
/* ── Focus / Open ──────────────────────────────────────────────────────── */
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
border-color: var(--ic-primary-500, #3FB4A9) !important;
box-shadow: 0 0 0 3px rgba(63, 180, 169, 0.15) !important;
outline: 0 !important;
}
/* ── Icon / label prefix variant (.ic-select-prefix) ───────────────────── */
/*
HTML usage — with icon+label:
Organization
Without icon (label only):
Region
*/
.ic-select-prefix {
display: flex;
align-items: center;
height: 38px;
background: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
box-shadow: var(--ic-shadow-sm);
overflow: hidden;
transition: border-color var(--ic-transition-instant), box-shadow var(--ic-transition-instant);
}
.ic-select-prefix:hover {
border-color: var(--ic-neutral-500);
}
.ic-select-prefix:focus-within {
border-color: var(--ic-neutral-500);
box-shadow: 0 0 0 4px rgba(213, 222, 230, 0.55);
}
/* Left label + optional icon */
.ic-select-prefix__start {
display: flex;
align-items: center;
gap: var(--ic-space-2);
padding: 0 var(--ic-space-3);
flex-shrink: 0;
height: 100%;
color: var(--ic-neutral-700);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
font-family: var(--ic-font-family);
white-space: nowrap;
}
.ic-select-prefix__icon {
width: var(--ic-icon-sm);
height: var(--ic-icon-sm);
font-size: 15px;
line-height: var(--ic-icon-sm);
flex-shrink: 0;
color: var(--ic-neutral-700);
}
/* Vertical separator */
.ic-select-prefix__divider {
width: 1px;
height: 16px;
background: var(--ic-neutral-300);
flex-shrink: 0;
}
/* Select2 container inside prefix — strip its own chrome */
.ic-select-prefix .select2-container--default {
flex: 1 1 auto;
min-width: 0;
}
.ic-select-prefix .select2-container--default .select2-selection {
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
background: transparent;
height: 36px;
padding: 0 var(--ic-space-3);
}
.ic-select-prefix .select2-container--default.select2-container--focus .select2-selection,
.ic-select-prefix .select2-container--default.select2-container--open .select2-selection {
border: none !important;
box-shadow: none !important;
}
/* Native select inside prefix */
.ic-select-prefix select,
.ic-select-prefix .form-select {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: none;
box-shadow: none;
border-radius: 0;
background-color: transparent;
padding: 0 var(--ic-space-10) 0 var(--ic-space-3);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
font-family: var(--ic-font-family);
color: var(--ic-neutral-900);
outline: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A939C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--ic-space-3) center;
}
/* ── Dropdown panel ────────────────────────────────────────────────────── */
.select2-dropdown {
z-index: 10050 !important;
background: var(--ic-white);
border: 1px solid var(--ic-neutral-300) !important;
border-radius: var(--ic-radius-md) !important;
box-shadow: var(--ic-shadow-lg);
overflow: hidden;
margin-top: var(--ic-space-1);
}
.select2-container--default .select2-search--dropdown {
padding: var(--ic-space-2) var(--ic-space-3);
border-bottom: 1px solid var(--ic-neutral-200);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--ic-neutral-300) !important;
border-radius: var(--ic-radius-sm) !important;
padding: var(--ic-space-1) var(--ic-space-2) !important;
font-size: var(--ic-text-body-sm) !important;
font-family: var(--ic-font-family) !important;
color: var(--ic-neutral-900) !important;
width: 100% !important;
outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--ic-primary-500, #3FB4A9) !important;
box-shadow: 0 0 0 3px rgba(63, 180, 169, 0.15) !important;
}
.select2-container--default .select2-results__options {
max-height: 220px;
overflow-y: auto;
padding: var(--ic-space-1) 0;
}
.select2-container--default .select2-results__option {
padding: var(--ic-space-2) var(--ic-space-4);
font-size: var(--ic-text-body-sm);
font-family: var(--ic-font-family);
color: var(--ic-neutral-700);
cursor: pointer;
transition: background-color var(--ic-transition-instant), color var(--ic-transition-instant);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--ic-neutral-100);
color: var(--ic-neutral-900);
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: rgba(63, 180, 169, 0.08);
color: var(--ic-primary-500);
font-weight: var(--ic-font-medium);
}
.select2-container--default .select2-results__option--disabled {
color: var(--ic-neutral-500);
cursor: not-allowed;
}
.select2-container--default .select2-results__group {
padding: var(--ic-space-2) var(--ic-space-4);
font-size: var(--ic-text-caption);
font-weight: var(--ic-font-semibold);
color: var(--ic-neutral-600);
text-transform: uppercase;
letter-spacing: var(--ic-tracking-wide);
}
/* ── Small variant (.select2-sm) ───────────────────────────────────────── */
/* Usage: add class "select2-sm" to the container or to a wrapper div */
.select2-sm .select2-container--default .select2-selection,
.select2-container--default.select2-sm .select2-selection {
height: 32px;
padding: var(--ic-space-1) var(--ic-space-2);
}
.select2-sm .select2-container--default .select2-selection--single,
.select2-container--default.select2-sm .select2-selection--single {
height: 32px;
padding: var(--ic-space-1) var(--ic-space-2);
}
.select2-sm .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default.select2-sm .select2-selection--single .select2-selection__rendered {
font-size: var(--ic-text-caption);
}
.select2-sm .select2-dropdown,
.select2-container--default.select2-sm ~ .select2-dropdown {
font-size: var(--ic-text-caption);
}
.select2-sm .select2-container--default .select2-results__option,
.select2-container--default.select2-sm ~ .select2-dropdown .select2-results__option {
padding: var(--ic-space-1) var(--ic-space-3);
font-size: var(--ic-text-caption);
}
/* ── Misc ───────────────────────────────────────────────────────────────── */
.select2-search input {
max-width: unset;
}
/* ═══════════════════════════════════════════════════════════════════════════
38. DATATABLES OVERRIDES
═══════════════════════════════════════════════════════════════════════════ */
table.dataTable {
font-family: var(--ic-font-family);
}
table.dataTable thead th,
table.dataTable thead td {
padding: 10px 25px !important;
font-weight: var(--ic-font-semibold);
background: var(--ic-neutral-100) !important;
border-bottom: none !important;
}
table.dataTable thead > tr > th:first-child {
border-radius: var(--ic-radius-xl) 0 0 var(--ic-radius-xl);
}
table.dataTable thead > tr > th:last-child {
border-radius: 0 var(--ic-radius-xl) var(--ic-radius-xl) 0;
}
table.dataTable tbody td {
padding: 10px 25px !important;
color: var(--ic-neutral-700);
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
background-color: var(--ic-white) !important;
}
table.dataTable.display tbody td {
border-top: none !important;
}
table.dataTable.display tbody tr:hover {
background-color: rgba(232, 242, 250, 0.85) !important;
}
table.dataTable.display tbody tr:hover td:first-child {
border-radius: var(--ic-radius-xl) 0 0 var(--ic-radius-xl);
}
table.dataTable.display tbody tr:hover td:last-child {
border-radius: 0 var(--ic-radius-xl) var(--ic-radius-xl) 0;
}
table.dataTable.no-footer {
border-bottom: none !important;
padding: 20px 0 40px 0;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
content: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: none !important;
color: var(--ic-white) !important;
border: 1px solid transparent !important;
}
.dataTables_info {
padding-top: 8px;
white-space: nowrap;
font-family: var(--ic-font-family);
color: var(--ic-neutral-700);
font-weight: 200;
}
/* ═══════════════════════════════════════════════════════════════════════════
39. GRID STACK (Widget Layout)
═══════════════════════════════════════════════════════════════════════════ */
.grid-stack {
background: var(--ic-white);
box-shadow: var(--ic-shadow-sm);
border-radius: var(--ic-radius-xl);
padding: var(--ic-space-8);
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
overflow-y: hidden;
}
/* ═══════════════════════════════════════════════════════════════════════════
40. MODAL OVERRIDES (from Site_v2 adapted)
═══════════════════════════════════════════════════════════════════════════ */
.modal-content {
border: 0 !important;
border-radius: var(--ic-radius-xl) !important;
}
.modal .modal-header {
border-bottom: none !important;
font-family: var(--ic-font-family) !important;
padding: var(--ic-space-10) var(--ic-space-10) 0 var(--ic-space-10);
}
.modal .modal-header .modal-title {
font-family: var(--ic-font-family) !important;
color: var(--ic-neutral-900) !important;
font-size: 22px;
font-weight: var(--ic-font-medium);
}
.modal-body {
padding: var(--ic-space-10) !important;
}
.modal-footer {
padding: var(--ic-space-10) !important;
text-align: right;
border-top: none !important;
}
.modal-dialog {
color: var(--ic-neutral-900) !important;
}
/* Close button */
.close {
display: initial !important;
margin-top: 0;
margin-right: 0;
width: initial !important;
height: initial !important;
background-repeat: no-repeat !important;
text-indent: initial !important;
outline: 0;
background-image: none !important;
opacity: 1;
}
.close > .iconmoon-close:before {
color: var(--ic-neutral-900);
}
/* Back button */
button.back {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.back {
display: inline-block;
margin-top: 0;
margin-right: 0;
padding-right: 30px !important;
}
.back > .iconmoon-arrow-back:before {
color: var(--ic-neutral-900);
}
/* ═══════════════════════════════════════════════════════════════════════════
41. FORM ELEMENTS (from Site_v2 adapted)
═══════════════════════════════════════════════════════════════════════════ */
.form-control {
padding: var(--ic-space-2) var(--ic-space-3);
border: 1px solid var(--ic-neutral-300) !important;
border-radius: var(--ic-radius-md) !important;
height: inherit !important;
color: var(--ic-neutral-700) !important;
font-family: var(--ic-font-family);
font-size: var(--ic-text-body-sm);
transition: border-color var(--ic-transition-instant), box-shadow var(--ic-transition-instant);
}
.form-control:hover {
border-color: var(--ic-neutral-500) !important;
}
.form-control-lg {
padding: var(--ic-space-3) var(--ic-space-4) !important;
font-size: var(--ic-text-body) !important;
border-radius: var(--ic-radius-md) !important;
}
/* Mandatory asterisk */
.mandatory {
color: var(--ic-error);
}
/* ═══════════════════════════════════════════════════════════════════════════
42. TABLE COLUMN VISIBILITY MODAL
═══════════════════════════════════════════════════════════════════════════ */
.col-table > table > tbody {
display: flex;
flex-direction: column;
gap: 10px;
}
.col-table > table > tbody > tr {
display: flex;
align-items: center;
gap: 10px;
}
.col-table > table > tbody > tr > td:nth-child(2) {
flex: 1;
}
.form-horizontal > table > tbody {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-horizontal > table > tbody > tr {
display: flex;
align-items: center;
gap: 10px;
}
.form-horizontal > table > tbody > tr > td:nth-child(2) {
flex: 1;
}
.form-horizontal > table > tbody > tr > td {
color: var(--ic-neutral-700);
}
.toggle-colvis td {
font-size: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════
43. LEGACY PAGINATION STYLES
═══════════════════════════════════════════════════════════════════════════ */
.pagination > li:first-child > a,
.pagination > li:first-child > span {
border-bottom-left-radius: var(--ic-radius-md) !important;
border-top-left-radius: var(--ic-radius-md) !important;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-bottom-right-radius: var(--ic-radius-md) !important;
border-top-right-radius: var(--ic-radius-md) !important;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
z-index: 3;
color: var(--ic-white);
background-color: var(--ic-primary-500);
border-color: var(--ic-primary-500);
cursor: default;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857;
text-decoration: none;
color: var(--ic-neutral-700);
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-500);
margin-left: -1px;
}
.pagination > li > a:hover {
z-index: 2;
color: var(--ic-primary-500);
background-color: var(--ic-neutral-100);
border-color: var(--ic-neutral-500);
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: var(--ic-neutral-500);
background-color: transparent;
border-color: var(--ic-neutral-500);
cursor: not-allowed;
}
/* ═══════════════════════════════════════════════════════════════════════════
44. DASHBOARD STAT2 / WIDGETS
═══════════════════════════════════════════════════════════════════════════ */
.dashboard-stat2 {
padding: 0 !important;
}
.nogrid-widget {
height: auto;
display: block;
margin-left: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
45. HELPER / MISC STYLES
═══════════════════════════════════════════════════════════════════════════ */
.x-hide {
display: none;
}
hr {
border: 0;
border-top: none !important;
border-bottom: 0;
}
footer {
display: none !important;
}
/* Question mark icon — Lucide circle-help, stroke-only gray circle */
.question-mark-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
cursor: pointer;
color: var(--ic-neutral-800);
opacity: 0.7;
transition: opacity .15s;
background-color: transparent;
border-radius: var(--ic-radius-lg);
}
.question-mark-icon svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
}
.question-mark-icon:hover { opacity: 1; }
.ic-doc-link {
display: inline-flex;
align-items: center;
line-height: 1;
text-decoration: none !important;
margin-left: 6px;
vertical-align: middle;
}
/* Status labels in tables */
tr .label-danger {
display: block;
white-space: nowrap;
}
tr .label-success {
display: block;
white-space: nowrap;
}
/* Text danger */
.text-danger {
color: var(--ic-error) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
46. RESPONSIVE MOBILE ADJUSTMENTS
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.ic-header {
background: var(--ic-white);
border-bottom: 1px solid var(--ic-neutral-400);
}
.ic-sidebar-wrapper {
position: absolute;
z-index: 999;
background-color: var(--ic-white);
box-shadow: -3px 15px 10px rgba(49, 49, 49, 0.5);
height: 100%;
}
.ic-page-header-container {
flex-direction: column;
align-items: flex-start;
gap: var(--ic-space-4);
}
.ic-page-actions {
width: 100%;
flex-wrap: wrap;
}
.ic-filter-row {
flex-direction: column;
}
.ic-filter-dropdown {
width: 100%;
}
.ic-stat-cards-row {
grid-template-columns: 1fr;
}
.ic-data-card-header {
flex-direction: column;
align-items: flex-start;
gap: var(--ic-space-3);
}
.ic-data-card-search {
width: 100%;
}
/* Ensure page content scrolls on small mobile */
.page-content-wrapper {
height: calc(100vh - 75px);
overflow-y: auto;
}
.page-container {
min-height: unset;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
47. EXPORT BUTTON
═══════════════════════════════════════════════════════════════════════════ */
.ic-export-btn {
display: flex;
align-items: center;
gap: var(--ic-space-2);
padding: var(--ic-space-2) var(--ic-space-4);
background-color: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-md);
font-size: var(--ic-text-body-sm);
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-900);
cursor: pointer;
transition: all var(--ic-transition-instant);
height: 40px;
}
.ic-export-btn:hover {
border-color: var(--ic-neutral-500);
background-color: var(--ic-neutral-100);
}
.ic-export-btn:focus {
outline: none;
border-color: var(--ic-neutral-500);
box-shadow: var(--ic-focus-ring);
}
.ic-export-btn svg,
.ic-export-btn i {
width: 16px;
height: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════
48. LEGACY METRONIC COMPATIBILITY
═══════════════════════════════════════════════════════════════════════════ */
/* Portlet light (Metronic) */
.portlet.light {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
background: none;
padding: 0;
margin: 0;
min-height: auto;
box-shadow: none;
border-radius: 0px;
}
.portlet.light .portlet-body {
padding-top: 8px;
}
.portlet > .portlet-title {
border-bottom: none !important;
}
.portlet.light > .portlet-title > .caption > i {
display: none;
}
.portlet.light > .portlet-title > .caption {
color: var(--ic-neutral-900);
}
.portlet > .portlet-title > .caption {
font-size: 20px;
line-height: 18px;
font-weight: var(--ic-font-medium);
}
/* ── Page sidebar — Metronic + Figma design ─────────────────────────────── */
.page-sidebar,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
background-color: transparent;
display: flex !important;
flex-direction: column !important;
gap: var(--ic-space-1) !important;
}
/* ── Menu list container ── */
.page-sidebar .page-sidebar-menu {
display: flex !important;
flex-direction: column !important;
gap: var(--ic-space-3) !important;
padding: var(--ic-space-4) !important;
list-style: none !important;
margin: 0 !important;
width: 100% !important;
}
/* ── Shared: both top-level and sub-menu anchors ── */
.page-sidebar .page-sidebar-menu li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a {
display: flex !important;
align-items: center !important;
width: 100% !important;
height: 36px !important;
padding: 0 var(--ic-space-3) !important;
gap: var(--ic-space-2) !important;
border-radius: var(--ic-radius-nav) !important;
color: var(--ic-neutral-700) !important;
font-size: var(--ic-text-body-sm) !important;
font-weight: var(--ic-font-semibold) !important;
font-family: var(--ic-font-family) !important;
background: transparent !important;
border: 0 !important;
margin: 0 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
filter: none !important;
box-sizing: border-box !important;
transition: background-color var(--ic-transition-instant), color var(--ic-transition-instant);
}
/* ── Icon (all levels) ── */
.page-sidebar .page-sidebar-menu li > a > i,
.page-sidebar .page-sidebar-menu li > a > i[class*=icon-],
.page-sidebar .page-sidebar-menu li > a > i[class^=icon-],
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > i {
width: var(--ic-icon-sm) !important;
min-width: var(--ic-icon-sm) !important;
height: var(--ic-icon-sm) !important;
font-size: 15px !important;
line-height: var(--ic-icon-sm) !important;
color: var(--ic-neutral-700) !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── Title label ── */
.page-sidebar .page-sidebar-menu li > a > .title {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
font-family: var(--ic-font-family) !important;
line-height: 1 !important;
}
/* ── Chevron (.arrow) — always pushed to the right ── */
.page-sidebar .page-sidebar-menu li > a > .arrow,
.page-sidebar .page-sidebar-menu li > a > .arrow.open {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: var(--ic-icon-sm) !important;
height: var(--ic-icon-sm) !important;
flex-shrink: 0 !important;
margin-left: auto !important;
float: none !important;
padding: 0 !important;
}
.page-sidebar .page-sidebar-menu li > a > .arrow::before {
content: '' !important;
display: block !important;
width: 7px !important;
height: 7px !important;
border-right: 1.5px solid var(--ic-neutral-600) !important;
border-bottom: 1.5px solid var(--ic-neutral-600) !important;
border-top: none !important;
border-left: none !important;
color: transparent !important; /* neutralise Metronic color on ::before */
background: transparent !important;
transform: rotate(-45deg) !important;
transition: transform 0.18s ease, border-color 0.18s ease !important;
position: static !important;
}
.page-sidebar .page-sidebar-menu li > a > .arrow::after {
content: none !important;
display: none !important;
}
/* Chevron rotates down at ALL nesting levels when parent li is open */
.page-sidebar .page-sidebar-menu li.open > a > .arrow::before {
transform: rotate(45deg) !important;
}
/* Chevron hover — one step darker */
.page-sidebar .page-sidebar-menu li:hover > a > .arrow::before,
.page-sidebar .page-sidebar-menu li.open:hover > a > .arrow::before {
border-right-color: var(--ic-neutral-700) !important;
border-bottom-color: var(--ic-neutral-700) !important;
color: transparent !important;
}
/* Chevron active leaf — follow primary */
.page-sidebar .page-sidebar-menu li.active:not(.open) > a > .arrow::before {
border-right-color: var(--ic-primary-500) !important;
border-bottom-color: var(--ic-primary-500) !important;
color: transparent !important;
}
/* ── HOVER — all levels ── */
.page-sidebar .page-sidebar-menu li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover > a {
background: var(--ic-neutral-100) !important;
color: var(--ic-neutral-900) !important;
}
.page-sidebar .page-sidebar-menu li:hover > a > i,
.page-sidebar .page-sidebar-menu li:hover > a > i[class*=icon-],
.page-sidebar .page-sidebar-menu li:hover > a > i[class^=icon-] {
color: var(--ic-neutral-900) !important;
}
/* ── OPEN (section parent with submenu visible) ── */
.page-sidebar .page-sidebar-menu > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a {
background: transparent !important;
color: var(--ic-neutral-700) !important;
}
.page-sidebar .page-sidebar-menu > li.open > a > i {
color: var(--ic-neutral-700) !important;
}
/* ── ACTIVE — reset Metronic border + color on ALL active anchors first ── */
.page-sidebar .page-sidebar-menu li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li.active > a {
border: none !important;
border-left: none !important;
outline: none !important;
}
/* Metronic sets color on ::before — kill it for all states */
.page-sidebar .page-sidebar-menu li.active > a > .arrow::before,
.page-sidebar .page-sidebar-menu li:hover > a > .arrow::before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li.active > a > .arrow::before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover > a > .arrow::before {
color: transparent !important;
}
/* ── ACTIVE (selected leaf — no sub-menu) ── */
.page-sidebar .page-sidebar-menu > li.active:not(.open) > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active:not(.open) > a {
background: var(--ic-primary-50) !important;
color: var(--ic-primary-500) !important;
}
.page-sidebar .page-sidebar-menu > li.active:not(.open) > a > i {
color: var(--ic-primary-500) !important;
}
/* Active + open (section parent that is also marked active) — NO teal bg */
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a {
background: transparent !important;
color: var(--ic-neutral-700) !important;
}
/* ── SUB-MENU container ── */
.page-sidebar .page-sidebar-menu .sub-menu {
padding: var(--ic-space-1) 0 0 var(--ic-space-3) !important;
margin: 0 0 0 var(--ic-space-2) !important;
border-left: 1px solid var(--ic-neutral-300) !important;
list-style: none !important;
box-sizing: border-box !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li + li {
margin-top: 4px !important;
}
/* Sub-menu anchors — Regular weight, 12px h-padding */
.page-sidebar .page-sidebar-menu .sub-menu > li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a {
font-weight: var(--ic-font-regular) !important;
padding: 0 var(--ic-space-3) !important;
}
/* Sub-menu icon color */
.page-sidebar .page-sidebar-menu .sub-menu > li > a > i {
color: var(--ic-neutral-600) !important;
}
/* Sub-menu chevron — lighter to match regular-weight text */
.page-sidebar .page-sidebar-menu .sub-menu > li > a > .arrow::before {
border-right-color: var(--ic-neutral-600) !important;
border-bottom-color: var(--ic-neutral-600) !important;
color: transparent !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > .arrow::before {
border-right-color: var(--ic-neutral-700) !important;
border-bottom-color: var(--ic-neutral-700) !important;
color: transparent !important;
}
/* Sub-menu hover: same as top-level hover */
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a {
background: var(--ic-neutral-100) !important;
color: var(--ic-neutral-900) !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > i {
color: var(--ic-neutral-900) !important;
}
/* Sub-menu active (selected leaf) */
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a {
background: var(--ic-primary-50) !important;
color: var(--ic-primary-500) !important;
font-weight: var(--ic-font-medium) !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a > i {
color: var(--ic-primary-500) !important;
}
/* Page header (Metronic) */
.page-header.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ic-white);
box-shadow: none;
border: 0;
border-bottom: 1px solid var(--ic-neutral-300);
width: 100%;
margin: 0;
padding: 0 var(--ic-space-6);
height: 75px;
min-height: 75px;
filter: none;
background-image: none;
position: sticky;
top: 0;
z-index: var(--ic-z-sticky);
}
.page-header.navbar .page-logo,
.page-header.navbar .page-logo a {
display: flex;
align-items: center;
height: 100%;
padding: 0;
margin: 0;
text-decoration: none;
}
.page-header.navbar .page-logo img,
.page-header.navbar .page-logo .logo-default {
height: 28px;
width: auto;
display: block;
margin: 0 !important;
padding: 0;
max-width: none;
}
.page-header.navbar .top-menu {
display: flex;
align-items: center;
height: 100%;
margin-left: auto;
}
/* Legacy Metronic navbar-nav — no longer used, but kept for compat */
.page-header.navbar .top-menu .navbar-nav {
display: flex;
align-items: center;
gap: var(--ic-space-2);
margin: 0;
padding: 0;
list-style: none;
}
/* Avatar — .img-circle kept as compat hook for ProfileController.js */
.img-circle {
border: 3px solid var(--ic-primary-500);
border-radius: var(--ic-radius-full);
height: 36px !important;
width: 36px !important;
object-fit: cover;
}
/* Page container offset */
.page-header-fixed .page-container {
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
FLEXBOX PAGE LAYOUT STRUCTURE
═══════════════════════════════════════════════════════════════════════════ */
/* Page container - main flex wrapper, NO padding/gap (handled by children) */
.page-container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: flex-start;
position: sticky;
top: 0;
min-height: calc(100vh - 75px);
margin-top: 0;
padding: 0;
}
/* ── Sidebar wrapper ──────────────────────────────────────────────────────── */
/* Full viewport height, independent scroll, shown only on hover */
.page-sidebar-wrapper {
display: flex;
flex-direction: column;
flex: 0 0 260px;
width: 260px;
min-width: 260px;
max-width: 260px;
/* Stick below the fixed header */
position: sticky;
top: 0;
height: calc(100vh - 75px);
/* Visual style from Figma */
background-color: #ffffff;
border-right: 1px solid var(--ic-neutral-300);
/* Independent scroll — gutter always reserved to avoid layout shift */
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
/* Scrollbar hidden by default, appears only on hover */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.2s ease;
}
.page-sidebar-wrapper:hover {
scrollbar-color: var(--ic-neutral-400) transparent;
}
.page-sidebar-wrapper::-webkit-scrollbar {
width: 4px;
}
.page-sidebar-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.page-sidebar-wrapper::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.page-sidebar-wrapper:hover::-webkit-scrollbar-thumb {
background-color: var(--ic-neutral-400);
}
/* Sidebar inner */
.page-sidebar,
.page-sidebar.navbar-collapse {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
/*padding: var(--ic-space-4) var(--ic-space-4);*/
}
/* Sidebar menu list */
.page-sidebar .page-sidebar-menu {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
/* ── Content wrapper ──────────────────────────────────────────────────────── */
.page-content-wrapper {
display: flex;
flex: 1 1 auto;
min-width: 0;
padding: var(--ic-space-10);
/* Independent scroll, full remaining height */
height: calc(100vh - 75px);
overflow-y: auto;
/* Scrollbar hidden by default, thin on hover */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.2s ease;
}
.page-content-wrapper:hover {
scrollbar-color: var(--ic-neutral-400) transparent;
}
.page-content-wrapper::-webkit-scrollbar {
width: 4px;
}
.page-content-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.page-content-wrapper::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: var(--ic-radius-full);
transition: background-color 0.2s ease;
}
.page-content-wrapper:hover::-webkit-scrollbar-thumb {
background-color: var(--ic-neutral-400);
}
/* Page content */
.page-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
margin-left: 0 !important;
padding: 0 !important;
width: 100%;
}
/* Flex propagation from .page-content down to .panel-container */
.page-content > div,
.page-content .portlet,
.page-content .portlet-body,
.page-content .panel-container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100% !important;
}
.page-content .row {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
/* overflow: auto; LIGIOS.. questo sbomballa il menù datatables!*/
}
/* ── Mobile: hide sidebar, full width content ─────────────────────────────── */
@media (max-width: 991px) {
.page-sidebar-wrapper {
display: none !important;
}
/* On mobile, let the browser/body scroll naturally — no fixed height trap */
.page-container {
position: static !important;
min-height: unset !important;
height: auto !important;
overflow: visible !important;
flex-direction: column;
justify-content: flex-start !important;
align-items: flex-start !important;
}
.page-content-wrapper {
width: 100%;
height: auto !important;
min-height: unset !important;
overflow-y: visible !important;
overflow-x: hidden;
padding: var(--ic-space-4);
flex: 1 1 auto;
}
/* Ensure body / html can scroll on mobile */
body, html {
overflow-x: hidden;
height: auto !important;
}
/* When mobile nav is present, reserve its 44px from document top */
.ic-mobile-nav ~ .page-container {
min-height: unset;
}
.page-header-inner {
justify-content: space-between;
width: 100%;
}
}
/* Legacy Metronic dropdown alignment — no longer targets new markup */
.page-header.navbar .top-menu .navbar-nav > li.dropdown {
position: relative;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-menu {
left: auto !important;
right: 0 !important;
}
/* ── Legacy Metronic dropdown-dark — DISABLED (replaced by ic-* classes) ── */
/*
.page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu { ... }
*/
/* ── Legacy notification list first-child highlight — DISABLED ── */
/*
.dropdown-menu-list li:first-child {
background: rgba(62, 180, 168, 0.05) !important;
}
*/
/* ── Legacy Metronic dropdown overrides (kept for global compat) ─────────── */
.news-lnk {
background: var(--ic-white);
}
/* Suppress Metronic dropdown arrows everywhere */
.btn-group > .dropdown-menu:after,
.dropdown-toggle > .dropdown-menu:after,
.dropdown > .dropdown-menu:after,
.btn-group > .dropdown-menu:before,
.dropdown-toggle > .dropdown-menu:before,
.dropdown > .dropdown-menu:before,
.page-header.navbar .top-menu .dropdown-menu:after {
content: none !important;
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
GLOBAL: CHECKBOX PILL (.ic-checkbox-pill)
- utilizzabile ovunque nel progetto
═══════════════════════════════════════════════════════════════════════════ */
/* Wrapper pill */
.ic-checkbox-pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
background: #f6f8f9;
border: 1px solid #e7edf3;
border-radius: 8px;
cursor: pointer;
user-select: none;
transition: border-color .15s, background .15s;
}
.ic-checkbox-pill:hover {
border-color: #C6D1DC;
}
/* hide the real input */
.ic-checkbox-pill input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* custom box */
.ic-checkbox-pill__box {
flex-shrink: 0;
width: 16px;
height: 16px;
border: 1.5px solid #C6D1DC;
border-radius: 4px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, border-color .15s;
}
.ic-checkbox-pill input:checked ~ .ic-checkbox-pill__box {
background: #3FB4A9;
border-color: #3FB4A9;
}
/* checkmark via clip-path */
.ic-checkbox-pill__box::after {
content: "";
display: block;
width: 9px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translateY(-1px);
opacity: 0;
transition: opacity .1s;
}
.ic-checkbox-pill input:checked ~ .ic-checkbox-pill__box::after {
opacity: 1;
}
/* disabled state */
.ic-checkbox-pill input:disabled ~ .ic-checkbox-pill__box {
background: #E7EDF3;
border-color: #E7EDF3;
}
.ic-checkbox-pill input:disabled ~ .ic-checkbox-pill__text {
color: #C6D1DC;
}
.ic-checkbox-pill__text {
font-size: 14px;
font-weight: 500;
color: #646F79;
line-height: 20px;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════
EXPORT MEASURE PAGE (em-*)
═══════════════════════════════════════════════════════════════════════════ */
.em-page {
/*padding: 24px;*/
padding-bottom: 40px;
}
/* Header */
.em-header { margin-bottom: 24px; }
.em-title {
font-size: 24px;
font-weight: 700;
color: #273240;
margin: 0 0 4px;
line-height: 32px;
}
.em-subtitle {
font-size: 14px;
color: #646F79;
margin: 0;
line-height: 20px;
}
/* Grid */
.em-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 1024px) {
.em-grid { grid-template-columns: 1fr; }
}
.em-col-left,
.em-col-right {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Cards */
.em-card {
background: #fff;
border: 1px solid #E7EDF3;
border-radius: 12px;
overflow: hidden;
}
.em-card-header {
display: flex;
align-items: center;
gap: 8px;
padding: 20px 24px;
}
.em-card-body { padding: 0 24px 24px; }
/* Icon badges — 32×32, 8px radius, exact Figma colors */
.em-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.em-icon--location { background: #e8ecfb; color: #2E469E; }
.em-icon--time { background: #e8fcf0; color: #22C55E; }
.em-icon--measures { background: #f5f1fd; color: #7C3AED; }
.em-icon--aggreg { background: #fff5e8; color: #F59E0B; }
.em-icon--format { background: #e6f7f5; color: #3FB4A9; }
.em-card-info { flex: 1; min-width: 0; }
.em-card-title {
display: block;
font-size: 16px;
font-weight: 400;
color: #273240;
line-height: 24px;
}
.em-card-desc {
display: block;
font-size: 12px;
color: #8A939C;
line-height: 16px;
}
/* Form rows */
.em-row { display: flex; gap: 16px; margin-bottom: 16px; }
.em-row:last-child { margin-bottom: 0; }
.em-field { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.em-field--full { flex: 1 1 100%; }
.em-field--half { flex: 0 0 50%; max-width: 50%; }
.em-field--align-end { display: flex; align-items: flex-end; flex-shrink: 0; }
.em-label {
display: block;
font-size: 14px;
font-weight: 500;
color: #646F79;
margin-bottom: 8px;
line-height: 20px;
}
/* Select & Input */
.em-select,
.em-input {
width: 100%;
height: 40px;
padding: 8px 13px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
line-height: 22px;
border: 1px solid #E7EDF3;
border-radius: 6px;
background: #fff;
color: #273240;
transition: border-color .15s, box-shadow .15s;
}
.em-select:hover, .em-input:hover { border-color: #C6D1DC; }
.em-select:focus, .em-input:focus {
outline: none;
border-color: #3FB4A9;
box-shadow: 0 0 0 3px rgba(63,180,169,.15);
}
/* Input with icon prefix */
.em-input-icon { position: relative; display: block; width: 100%; }
.em-input-icon > svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #8A939C;
pointer-events: none;
z-index: 1;
}
.em-input-icon .em-input,
.em-input-icon .em-select { padding-left: 38px; width: 100%; }
/* Aggregation */
.em-aggregation-msg {
padding: 12px 16px;
background: #f6f8f9;
border: 1px solid #E7EDF3;
border-radius: 8px;
font-size: 14px;
color: #8A939C;
}
.em-aggregation-msg p { margin: 0; }
.em-aggregation-opts { display: flex; flex-direction: column; gap: 16px; }
/* Radio cards - Figma: 62px height */
.em-radio-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid #E7EDF3;
border-radius: 8px;
cursor: pointer;
transition: border-color .15s;
margin-bottom: 8px;
min-height: 62px;
}
.em-radio-card:last-child { margin-bottom: 0; }
.em-radio-card:hover { border-color: #C6D1DC; }
.em-radio-card input { display: none; }
/* Radio dot - Figma: 20px, 2px border */
.em-radio-dot {
flex-shrink: 0;
width: 20px;
height: 20px;
border: 2px solid #E7EDF3;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: border-color .15s;
}
.em-radio-card input:checked ~ .em-radio-dot { border-color: #3FB4A9; }
.em-radio-card input:checked ~ .em-radio-dot::after {
content: "";
width: 12px;
height: 12px;
background: #3FB4A9;
border-radius: 50%;
}
.em-radio-info { display: flex; flex-direction: column; gap: 2px; }
.em-radio-title { font-size: 14px; font-weight: 500; color: #273240; line-height: 20px; }
.em-radio-desc { font-size: 12px; color: #646F79; line-height: 16px; }
/* Summary card - Figma gradient + border */
.em-summary {
background: linear-gradient(156.9deg, #e6f7f5 0%, rgba(195,230,208,.3) 100%);
border: 1px solid #9DD9C9;
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.em-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
line-height: 20px;
}
.em-summary-row span { color: #646F79; }
.em-summary-row strong { color: #273240; font-weight: 600; }
/* Export button */
.em-btn-primary {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 48px;
font-size: 16px;
font-weight: 600;
color: #fff;
background: #3FB4A9;
border: none;
border-radius: 6px;
cursor: pointer;
box-shadow: 0 10px 15px rgba(63,180,169,.3), 0 4px 6px rgba(63,180,169,.3);
transition: background .15s, transform .1s;
font-family: inherit;
}
.em-btn-primary:hover { background: #36a198; }
.em-btn-primary:active { transform: scale(.98); }
/* Modal */
.em-modal {
border: none;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
.em-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px;
}
.em-spinner {
width: 40px;
height: 40px;
border: 3px solid #E7EDF3;
border-top-color: #3FB4A9;
border-radius: 50%;
animation: ic-spin .8s linear infinite;
}
/* Select2 inside em-card — all rules consolidated below */
/* Responsive */
@media (max-width: 768px) {
.em-row { flex-direction: column; }
.em-field--align-end { align-items: stretch; }
}
/* ═══════════════════════════════════════════════════════════════════════════
NATIVE SELECT — em-select (building, floor, hours)
═══════════════════════════════════════════════════════════════════════════ */
.em-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A939C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 36px !important;
cursor: pointer;
}
.em-select:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233FB4A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Disabled native select */
.em-select:disabled {
background-color: #F5F8FA;
color: #C6D1DC;
cursor: not-allowed;
border-color: #E7EDF3;
}
/* Override browser default option styles */
.em-select option {
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #273240;
padding: 8px 12px;
}
/* ═══════════════════════════════════════════════════════════════════════════
SELECT2 — em-card context (full dropdown override)
═══════════════════════════════════════════════════════════════════════════ */
/* Container: block, 100% width of parent .em-field, never grows */
.em-card .select2-container {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Selection wrapper: fixed 40px, CANNOT grow */
.em-card .select2-container--bootstrap-5 .select2-selection--single,
.em-card .select2-container--bootstrap-5 .select2-selection--multiple {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
position: relative;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 40px !important;
max-height: 40px !important;
min-height: 40px !important;
padding: 0 40px 0 13px !important;
border: 1px solid #E7EDF3 !important;
border-radius: 6px !important;
box-shadow: none !important;
font-size: 14px;
color: #273240;
background-color: #fff;
transition: border-color .15s, box-shadow .15s;
cursor: pointer !important;
user-select: none;
overflow: hidden !important;
box-sizing: border-box !important;
font-family: 'Poppins', sans-serif;
}
.em-card .select2-container--bootstrap-5:not(.select2-container--open) .select2-selection:hover {
border-color: #C6D1DC !important;
}
.em-card .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.em-card .select2-container--bootstrap-5.select2-container--open .select2-selection {
border-color: #3FB4A9 !important;
box-shadow: 0 0 0 3px rgba(63,180,169,.15) !important;
outline: none !important;
}
/* ── Chevron ─────────────────────────────────────── */
.em-card .select2-container--bootstrap-5 .select2-selection--single::after,
.em-card .select2-container--bootstrap-5 .select2-selection--multiple::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A939C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
pointer-events: none;
}
.em-card .select2-container--bootstrap-5.select2-container--open .select2-selection--single::after,
.em-card .select2-container--bootstrap-5.select2-container--open .select2-selection--multiple::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233FB4A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E");
}
/* ── Single select: rendered text ────────────────── */
.em-card .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
padding: 0 !important;
font-size: 14px;
color: #273240;
line-height: 40px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.em-card .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
color: #8A939C;
}
.em-card .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
display: none !important;
}
/* ── Multiple: rendered list (the ) ──────────── */
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 4px;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
height: 38px !important;
max-height: 38px !important;
overflow: hidden !important;
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: 100% !important;
width: 0 !important;
}
/* Placeholder text — centered vertically */
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__placeholder {
color: #8A939C;
font-size: 14px;
line-height: 38px !important;
padding: 0 !important;
margin: 0 !important;
white-space: nowrap;
}
/* Kill the inline search input entirely */
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline,
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__search {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
left: -9999px !important;
}
/* Hide chip when overflowing — must use !important to beat the chip's display: inline-flex !important */
.em-s2-chip-hidden { display: none !important; }
/* +N overflow badge */
.em-s2-overflow {
display: inline-flex !important;
align-items: center;
flex-shrink: 0;
height: 22px;
padding: 0 6px;
background: #E6F7F5;
border: 1px solid #B2E5DF;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
color: #1D7A72;
white-space: nowrap;
line-height: 22px;
}
/* ── Chips (selected values) — green palette ─────── */
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
display: inline-flex !important;
align-items: center !important;
flex-shrink: 0 !important;
gap: 2px;
padding: 0 3px 0 8px !important;
height: 24px !important;
max-height: 24px !important;
background: #E6F7F5 !important;
border: 1px solid #B2E5DF !important;
border-radius: 4px !important;
font-size: 12px !important;
font-weight: 500;
color: #1D7A72 !important;
margin: 0 !important;
white-space: nowrap;
overflow: hidden;
cursor: default;
line-height: 24px;
}
/* Chip text */
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__display {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 110px;
padding: 0 !important;
}
/* Chip × button — small Lucide X */
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 14px !important;
height: 14px !important;
min-width: 14px;
flex-shrink: 0;
border: none !important;
background: none !important;
cursor: pointer;
padding: 0 !important;
margin: 0 !important;
order: 2;
color: transparent !important;
font-size: 0 !important;
border-radius: 3px;
transition: background .1s;
opacity: 0.7;
}
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove::before {
content: "" !important;
display: block;
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231D7A72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
}
.em-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
background: rgba(29,122,114,.12) !important;
opacity: 1;
}
/* ── Global clear (×) on trigger ─────────────────── */
.em-card .select2-container--bootstrap-5 .select2-selection__clear {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: #E7EDF3;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
color: transparent;
cursor: pointer;
z-index: 1;
transition: background .12s;
}
.em-card .select2-container--bootstrap-5 .select2-selection__clear::before {
content: "";
display: block;
width: 8px;
height: 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23646F79' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 8px;
}
.em-card .select2-container--bootstrap-5 .select2-selection__clear:hover {
background: #C6D1DC;
}
/* ── Disabled state for Select2 ──────────────────── */
.em-card .select2-container--disabled .select2-selection--single,
.em-card .select2-container--disabled .select2-selection--multiple {
background-color: #F5F8FA !important;
border-color: #E7EDF3 !important;
cursor: not-allowed !important;
opacity: 0.6;
pointer-events: none;
}
.em-card .select2-container--disabled .select2-selection__rendered,
.em-card .select2-container--disabled .select2-selection__placeholder {
color: #C6D1DC !important;
}
.em-card .select2-container--disabled .select2-selection--single::after,
.em-card .select2-container--disabled .select2-selection--multiple::after {
opacity: 0.4;
}
/* ── Select All / Clear All action bar — bottom text links ────────────────── */
.em-select2-actions {
display: flex;
align-items: center;
padding: 8px 12px;
border-top: 1px solid #E7EDF3;
background: #fff;
border-radius: 0 0 8px 8px;
gap: 0;
}
.em-select2-actions__sep {
display: block;
width: 1px;
height: 14px;
background: #D9E2EA;
margin: 0 12px;
flex-shrink: 0;
}
.em-select2-action {
display: inline-flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0;
border: none;
background: none;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: color .12s;
white-space: nowrap;
line-height: 1;
outline: none;
}
.em-select2-action--all {
color: #3FB4A9;
}
.em-select2-action--all:hover {
color: #2E8A82;
}
.em-select2-action--deselect {
color: #E57373;
}
.em-select2-action--deselect:hover {
color: #C62828;
}
.em-select2-action--clear {
color: #646F79;
}
.em-select2-action--clear:hover {
color: #273240;
}
/* ═══════════════════════════════════════════════════════════════════════════
NATIVE CUSTOM SELECT — .em-cs-* (replaces .em-select dropdown UI)
═══════════════════════════════════════════════════════════════════════════ */
/* Hide native select when custom is built */
.em-cs-hidden { display: none !important; }
/* Trigger button — visually replaces the native select */
.em-cs-trigger {
display: flex;
align-items: center;
width: 100%;
height: 40px;
padding: 0 36px 0 13px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
line-height: 22px;
border: 1px solid #E7EDF3;
border-radius: 6px;
background: #fff;
color: #273240;
text-align: left;
cursor: pointer;
position: relative;
transition: border-color .15s, box-shadow .15s;
appearance: none;
outline: none;
user-select: none;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
/* Inside .em-input-icon — leave space for the SVG prefix */
.em-input-icon .em-cs-trigger,
.em-cs-trigger--icon { padding-left: 38px; }
.em-cs-trigger:hover { border-color: #C6D1DC; }
.em-cs-trigger:focus { border-color: #3FB4A9; box-shadow: 0 0 0 3px rgba(63,180,169,.15); outline: none; }
.em-cs-trigger--open { border-color: #3FB4A9 !important; box-shadow: 0 0 0 3px rgba(63,180,169,.15) !important; }
.em-cs-trigger--disabled,
.em-cs-trigger:disabled {
background: #F5F8FA;
color: #C6D1DC;
border-color: #E7EDF3;
cursor: not-allowed;
pointer-events: none;
}
/* Value text */
.em-cs-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
pointer-events: none;
}
/* Chevron icon */
.em-cs-chevron {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #8A939C;
pointer-events: none;
flex-shrink: 0;
transition: color .15s, transform .15s;
}
.em-cs-trigger--open .em-cs-chevron {
color: #3FB4A9;
transform: translateY(-50%) rotate(180deg);
}
/* Dropdown panel — appended to body, positioned via JS with position:fixed */
.em-cs-dropdown {
display: none;
position: fixed;
z-index: 99999;
background: #fff;
border: 1px solid #E7EDF3;
border-radius: 8px;
box-shadow: 0px 10px 15px 0px rgba(0,0,0,.10), 0px 4px 6px 0px rgba(0,0,0,.10);
min-width: 160px;
max-height: 240px;
overflow-y: auto;
padding: 4px;
scrollbar-width: thin;
scrollbar-color: #E7EDF3 transparent;
}
.em-cs-dropdown.em-cs-open { display: block; }
.em-cs-dropdown::-webkit-scrollbar { width: 4px; }
.em-cs-dropdown::-webkit-scrollbar-track { background: transparent; }
.em-cs-dropdown::-webkit-scrollbar-thumb { background: #E7EDF3; border-radius: 2px; }
/* Option rows */
.em-cs-option {
display: flex;
align-items: center;
justify-content: space-between;
height: 38px;
padding: 0 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
color: #273240;
cursor: pointer;
transition: background .1s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.em-cs-option:hover { background: #F6F8F9; }
.em-cs-option--selected {
background: #F6F8F9;
font-weight: 500;
}
.em-cs-option--selected::after {
content: "";
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233FB4A9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
margin-left: 8px;
}
.em-cs-option--selected:hover { background: #EEF3F7; }
/* ── Dropdown panel ──────────────────────────────────────────────────────── */
.select2-dropdown {
border: 1px solid #E7EDF3;
border-radius: 8px !important;
box-shadow: 0px 10px 15px 0px rgba(0,0,0,.10), 0px 4px 6px 0px rgba(0,0,0,.10);
background: #fff;
overflow: hidden;
z-index: 10000;
}
.select2-container--bootstrap-5 .select2-dropdown {
border-color: #E7EDF3;
border-radius: 8px;
}
.select2-dropdown.select2-dropdown--below {
border-top: none;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
margin-top: -1px;
z-index: 10052 !important;
}
.select2-dropdown.select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-bottom: -1px;
}
/* ── Search field: magnifier icon on the left (Figma spec) ───────────────── */
.select2-container--bootstrap-5 .select2-search--dropdown,
.select2-search--dropdown {
padding: 10px 10px 8px;
border-bottom: none;
position: relative;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
.select2-search--dropdown .select2-search__field {
height: 32px !important;
padding: 0 12px 0 32px !important;
border: 1px solid #E4EAF1 !important;
border-radius: 8px !important;
font-size: 14px !important;
font-family: 'Poppins', sans-serif !important;
color: #273240 !important;
background: #fff !important;
outline: none !important;
width: 100% !important;
transition: border-color .15s !important;
box-shadow: 0 0 0 0.538px rgba(213,222,230,.06) !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field::placeholder,
.select2-search--dropdown .select2-search__field::placeholder {
color: #8A939C;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus,
.select2-search--dropdown .select2-search__field:focus {
border-color: #3FB4A9 !important;
box-shadow: 0 0 0 3px rgba(63,180,169,.12) !important;
}
/* Magnifier icon via ::before on the search wrapper */
.select2-container--bootstrap-5 .select2-search--dropdown::before,
.select2-search--dropdown::before {
content: "";
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A939C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
pointer-events: none;
z-index: 1;
}
/* Results list wrapper */
.select2-results {
padding: 4px;
}
.select2-container--bootstrap-5 .select2-results__options,
.select2-results__options {
max-height: 240px;
overflow-y: auto;
padding: 4px;
scrollbar-width: thin;
scrollbar-color: #E7EDF3 transparent;
}
.select2-results__options::-webkit-scrollbar { width: 4px; }
.select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-results__options::-webkit-scrollbar-thumb { background: #E7EDF3; border-radius: 2px; }
/* ── Option rows — 38px, Poppins Medium, checkmark on right ──────────────── */
.select2-container--bootstrap-5 .select2-results__option,
.select2-results__option {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
height: auto;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
color: #273240;
cursor: pointer;
background: none;
transition: background .1s;
white-space: nowrap;
}
/* Left checkbox — flex item (empty square, unselected) */
.select2-container--bootstrap-5 .select2-results__option::before,
.select2-results__option::before {
content: "";
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
min-width: 16px;
border: 1.5px solid #D9E2EA;
border-radius: 4px;
background: #fff;
transition: background .1s, border-color .1s;
}
/* Left checkbox — teal filled with white check (selected) */
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"]::before,
.select2-results__option[aria-selected="true"]::before {
background: #3FB4A9;
border-color: #3FB4A9;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
}
/* Hover — !important to beat bootstrap-5 theme's .select2-results__option--highlighted */
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted {
background: #F6F8F9 !important;
color: #273240 !important;
}
/* Selected — grey bg */
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.select2-results__option[aria-selected="true"] {
background: #F6F8F9 !important;
color: #273240 !important;
font-weight: 500;
}
/* Remove the right-side ::after checkmark — checkbox is now on the left */
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"]::after,
.select2-results__option[aria-selected="true"]::after {
display: none;
content: none;
}
/* Selected + hover */
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected="true"],
.select2-results__option--highlighted[aria-selected="true"] {
background: #EEF3F7 !important;
color: #273240 !important;
}
/* No results message: no checkbox, no hover bg */
.select2-container--bootstrap-5 .select2-results__message,
.select2-results__message {
color: #8A939C;
font-size: 13px;
font-style: italic;
cursor: default;
justify-content: center;
gap: 0;
padding: 0 12px;
}
.select2-container--bootstrap-5 .select2-results__message::before,
.select2-results__message::before {
display: none !important;
content: none !important;
}
.select2-container--bootstrap-5 .select2-results__message:hover,
.select2-results__message:hover {
background: none !important;
}
/* Disabled */
.select2-results__option[aria-disabled="true"] {
color: #C6D1DC;
cursor: not-allowed;
}
/* Optgroup label */
.select2-results__group {
padding: 6px 12px 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: #8A939C;
cursor: default;
}
/* ═══════════════════════════════════════════════════════════════════════════
JQUERY UI DATEPICKER — iComfort redesign
═══════════════════════════════════════════════════════════════════════════ */
/*#ui-datepicker-div,
.ui-datepicker {
width: 280px;
padding: 12px;
background: #fff;
border: 1px solid #E7EDF3;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(39,50,64,.14);
font-family: 'Poppins', sans-serif;
z-index: 10010!important;
}*/
/* Header row (nav + month/year title) */
/*.ui-datepicker .ui-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 10px;
border: none;
background: none;
border-radius: 0;
margin-bottom: 4px;
}
.ui-datepicker .ui-datepicker-title {
font-size: 14px;
font-weight: 600;
color: #273240;
text-align: center;
flex: 1;
order: 2;
line-height: 28px;
}*/
/* Prev / Next arrow buttons */
/*.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
position: static;
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 6px;
background: #F5F8FA;
border: 1px solid #E7EDF3;
display: flex;
align-items: center;
justify-content: center;
top: auto;
transition: background .15s, border-color .15s;
flex-shrink: 0;
}
.ui-datepicker .ui-datepicker-prev { order: 1; }
.ui-datepicker .ui-datepicker-next { order: 3; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
background: #E6F7F5;
border-color: #9DD9C9;
}*/
/* Hide the default text, replace with SVG arrows */
/*.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
display: none;
}
.ui-datepicker .ui-datepicker-prev::after {
content: "";
display: block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A939C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
}
.ui-datepicker .ui-datepicker-next::after {
content: "";
display: block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A939C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
}
.ui-datepicker .ui-datepicker-prev:hover::after,
.ui-datepicker .ui-datepicker-next:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233FB4A9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.ui-datepicker .ui-datepicker-next:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233FB4A9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}*/
/* Calendar table */
/*.ui-datepicker table.ui-datepicker-calendar {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin: 0;
}*/
/* Day-of-week header */
/*.ui-datepicker table.ui-datepicker-calendar thead th {
padding: 4px 0;
font-size: 11px;
font-weight: 600;
text-align: center;
color: #8A939C;
text-transform: uppercase;
letter-spacing: .04em;
border: none;
}*/
/* Day cells */
/*.ui-datepicker table.ui-datepicker-calendar td {
padding: 2px;
border: none;
text-align: center;
}
.ui-datepicker table.ui-datepicker-calendar td a,
.ui-datepicker table.ui-datepicker-calendar td span {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0 auto;
border-radius: 6px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #273240;
text-decoration: none;
border: none;
background: none;
padding: 0;
transition: background .12s, color .12s;
cursor: pointer;
box-sizing: border-box;
}*/
/* Hover */
/*.ui-datepicker table.ui-datepicker-calendar td a:hover,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a:hover {
background: #F0F9F8;
color: #2E8A82;
text-decoration: none;
}*/
/* Today (not selected) */
/*.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today span {
background: #E6F7F5;
color: #2E8A82;
font-weight: 600;
}*/
/* Selected day */
/*.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-current-day a,
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker table.ui-datepicker-calendar td.ui-state-active a,
.ui-datepicker table.ui-datepicker-calendar .ui-state-highlight a {
background: #3FB4A9!important;
color: #fff!important;
font-weight: 600;
}*/
/* Other month days */
/*.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-other-month span,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-other-month a {
color: #C6D1DC;
}*/
/* Disabled days */
/*.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-unselectable span {
color: #D9E2EA;
cursor: not-allowed;
background: none;
}*/
/* Weekend days – no special color, keep neutral */
/*.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a {
color: #273240;
}*/
/* Remove jQuery UI default gradients/backgrounds pollution */
/*.ui-datepicker .ui-widget-header { background: none; border: none; }
.ui-datepicker .ui-corner-all,
.ui-datepicker .ui-corner-right,
.ui-datepicker .ui-corner-left { border-radius: 0; }
.ui-datepicker a.ui-state-default,
.ui-datepicker .ui-state-default { background: none; border: none; font-weight: normal; }*/
/* Footer buttons (Today / Close) if enabled */
/*.ui-datepicker .ui-datepicker-buttonpane {
display: flex;
justify-content: flex-end;
gap: 6px;
padding: 8px 0 0;
border-top: 1px solid #E7EDF3;
margin-top: 8px;
background: none;
border-left: none;
border-right: none;
border-bottom: none;
}
.ui-datepicker .ui-datepicker-buttonpane button {
height: 30px;
padding: 0 12px;
font-size: 12px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
border-radius: 6px;
border: 1px solid #E7EDF3;
background: #F5F8FA;
color: #646F79;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
background: #3FB4A9;
border-color: #3FB4A9;
color: #fff;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
background: #E6F7F5;
border-color: #9DD9C9;
color: #2E8A82;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
background: #36a198;
border-color: #36a198;
color: #fff;
}*/
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE NAVIGATION BAR
═══════════════════════════════════════════════════════════════════════════
Replaces the sidebar on screens ≤ 991 px.
Inspired by the Figma "MobileNav" component (node 255:305).
- Left: category dropdown (drill‑up / switch categories)
- Right: horizontal scrollable pills for child items
═══════════════════════════════════════════════════════════════════════════ */
/* Hidden on desktop */
.ic-mobile-nav {
display: none;
}
@media (max-width: 991px) {
/* ── Bar container ──────────────────────────────────────────────────── */
.ic-mobile-nav {
display: flex;
align-items: center;
position: sticky;
top: 75px; /* below the 75 px header */
z-index: calc(var(--ic-z-sticky) - 1);
background: var(--ic-white);
border-bottom: 1px solid var(--ic-neutral-300);
height: 44px;
min-height: 44px;
width: 100%;
padding: 0;
}
/* ── Category dropdown (left) ───────────────────────────────────────── */
.ic-mobile-nav-category {
position: relative;
flex-shrink: 0;
height: 100%;
border-right: 1px solid var(--ic-neutral-300);
}
.ic-mobile-nav-category-btn {
display: flex;
align-items: center;
gap: 6px;
height: 100%;
padding: 0 16px;
background: none;
border: none;
cursor: pointer;
font-family: var(--ic-font-family);
font-size: 12px;
font-weight: var(--ic-font-semibold);
color: var(--ic-neutral-700);
white-space: nowrap;
}
.ic-mobile-nav-category-btn:active {
background: var(--ic-neutral-50);
}
.ic-mobile-nav-category-icon,
.ic-mobile-nav-category-btn > i:first-child {
width: 14px;
height: 14px;
color: var(--ic-neutral-600);
}
.ic-mobile-nav-chevron {
width: 12px;
height: 12px;
color: var(--ic-neutral-500);
transition: transform var(--ic-transition-instant);
}
.ic-mobile-nav-category.open .ic-mobile-nav-chevron {
transform: rotate(180deg);
}
/* ── Dropdown panel ─────────────────────────────────────────────────── */
.ic-mobile-nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
max-height: 60vh;
overflow-y: auto;
background: var(--ic-white);
border: 1px solid var(--ic-neutral-300);
border-top: none;
border-radius: 0 0 var(--ic-radius-lg) var(--ic-radius-lg);
box-shadow: var(--ic-shadow-lg);
z-index: var(--ic-z-dropdown);
padding: var(--ic-space-2) 0;
/* Prevent page-specific CSS from breaking layout */
text-align: left !important;
font-family: var(--ic-font-family) !important;
/* Thin, light scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--ic-neutral-200) transparent;
}
.ic-mobile-nav-dropdown::-webkit-scrollbar {
width: 2px;
}
.ic-mobile-nav-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.ic-mobile-nav-dropdown::-webkit-scrollbar-thumb {
background-color: var(--ic-neutral-200);
border-radius: var(--ic-radius-full);
}
.ic-mobile-nav-category.open .ic-mobile-nav-dropdown {
display: block;
}
/* Shared reset for dropdown buttons — prevents page-specific CSS leaking */
.ic-mobile-nav-dropdown-back,
.ic-mobile-nav-dropdown-item {
box-sizing: border-box !important;
display: flex !important;
align-items: center;
width: 100%;
padding: 8px 16px;
border: none;
border-radius: 0;
outline: none;
cursor: pointer;
font-family: var(--ic-font-family);
text-align: left;
line-height: 1.4;
margin: 0;
-webkit-appearance: none;
appearance: none;
}
/* Back button */
.ic-mobile-nav-dropdown-back {
gap: 6px;
background: var(--ic-neutral-50);
border-bottom: 1px solid var(--ic-neutral-200) !important;
font-size: 12px;
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-600);
margin-bottom: 4px;
}
.ic-mobile-nav-dropdown-back:hover {
background: var(--ic-neutral-100);
}
.ic-mobile-nav-dropdown-back i,
.ic-mobile-nav-dropdown-back svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* Dropdown items */
.ic-mobile-nav-dropdown-item {
gap: 8px;
background: none;
font-size: 13px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-700);
white-space: nowrap;
}
.ic-mobile-nav-dropdown-item:hover {
background: var(--ic-neutral-50);
}
.ic-mobile-nav-dropdown-item.active {
background: var(--ic-primary-50);
color: var(--ic-primary-500);
font-weight: var(--ic-font-medium);
}
.ic-mobile-nav-dropdown-item i,
.ic-mobile-nav-dropdown-item svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ── Scrollable pill links (right) ──────────────────────────────────── */
.ic-mobile-nav-links {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
overflow-x: auto;
overflow-y: hidden;
padding: 0 12px;
height: 100%;
-webkit-overflow-scrolling: touch; /* smooth momentum on iOS */
scrollbar-width: none;
}
.ic-mobile-nav-links::-webkit-scrollbar {
display: none;
}
.ic-mobile-nav-link {
display: flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 10px;
border-radius: var(--ic-radius-full);
background: none;
border: none;
cursor: pointer;
font-family: var(--ic-font-family);
font-size: 12px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-700);
white-space: nowrap;
text-decoration: none;
flex-shrink: 0;
box-sizing: border-box !important;
-webkit-appearance: none;
appearance: none;
margin: 0;
line-height: 1.4;
transition: background var(--ic-transition-instant),
color var(--ic-transition-instant);
}
.ic-mobile-nav-link:hover {
background: var(--ic-neutral-100);
color: var(--ic-neutral-900);
text-decoration: none;
}
.ic-mobile-nav-link.active {
background: var(--ic-primary-500);
color: var(--ic-white);
font-weight: var(--ic-font-medium);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1),
0 1px 2px rgba(0, 0, 0, .1);
}
.ic-mobile-nav-link.active:hover {
background: var(--ic-primary-600);
color: var(--ic-white);
}
.ic-mobile-nav-link i,
.ic-mobile-nav-link svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
TOP MENU — Bell, Avatar, Dropdowns (Figma design)
═══════════════════════════════════════════════════════════════════════════ */
/* Container — always flex, pushed right */
.ic-top-menu {
display: flex !important;
align-items: center;
margin-left: auto;
flex-shrink: 0;
}
.ic-top-menu-inner {
display: flex;
align-items: center;
gap: 16px;
}
/* Each item is a dropdown wrapper */
.ic-top-menu-item {
position: relative;
}
/* Trigger buttons — invisible circle, centers the icon/avatar */
.ic-top-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
background: none;
border-radius: var(--ic-radius-full);
cursor: pointer;
position: relative;
transition: background var(--ic-transition-instant);
}
.ic-top-menu-btn:hover {
background: var(--ic-neutral-100);
}
.ic-top-menu-btn:focus {
outline: none;
}
/* ── Bell icon ──────────────────────────────────────────────────────────── */
.ic-bell-btn i,
.ic-bell-btn svg {
width: 20px;
height: 20px;
color: var(--ic-neutral-700);
stroke-width: 1.8;
}
/* Notification dot */
.ic-bell-dot {
position: absolute;
top: 3px;
right: 3px;
width: 10px;
height: 10px;
background-color: var(--ic-error);
border: 2px solid var(--ic-white);
border-radius: var(--ic-radius-full);
font-size: 0;
line-height: 0;
padding: 0;
display: block;
z-index: 2;
pointer-events: none;
}
/* ── Avatar button ──────────────────────────────────────────────────────── */
.ic-avatar-btn {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
border-radius: var(--ic-radius-full);
overflow: hidden;
border: 3px solid var(--ic-primary-500);
flex-shrink: 0;
box-sizing: border-box;
/* Hover handled by ic-top-menu-btn — clip to circle */
background-clip: padding-box;
}
.ic-avatar-img {
width: 100%;
height: 100%;
border-radius: 0;
border: none;
object-fit: cover;
object-position: center;
display: block;
min-width: 0;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════════════
NOTIFICATION DROPDOWN (Figma node 463:1181)
══════════════════════════════════════════════════════════════════════════ */
.ic-notifications-dropdown {
width: 360px;
max-width: 92vw;
padding: 0;
border: 1px solid var(--ic-neutral-200);
border-radius: var(--ic-radius-lg) !important;
box-shadow: var(--ic-shadow-lg);
background: var(--ic-white);
overflow: hidden;
}
.ic-notifications-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--ic-neutral-200);
}
.ic-notifications-title {
font-size: 16px;
font-weight: var(--ic-font-semibold);
color: var(--ic-neutral-900);
font-family: var(--ic-font-family);
}
.ic-notifications-badge {
font-size: 12px;
font-weight: var(--ic-font-semibold);
color: var(--ic-white);
background: var(--ic-error);
border-radius: var(--ic-radius-full);
padding: 2px 8px;
min-width: 22px;
text-align: center;
line-height: 16px;
font-family: var(--ic-font-family);
}
.ic-notifications-list {
max-height: 380px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--ic-neutral-300) transparent;
}
/* Notification items list */
.ic-notifications-list .dropdown-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
/* ── Single notification item ─────────────────────────────────────────── */
.ic-notif-item {
background: transparent !important;
}
.ic-notif-item > a {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px !important;
color: var(--ic-neutral-700);
text-decoration: none;
border-bottom: 1px solid var(--ic-neutral-100);
font-family: var(--ic-font-family);
transition: background var(--ic-transition-instant);
position: relative;
}
.ic-notif-item > a:hover {
background: var(--ic-neutral-50) !important;
text-decoration: none;
color: var(--ic-neutral-700);
}
/* Coloured circle icon */
.ic-notif-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: var(--ic-radius-full);
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.ic-notif-icon i,
.ic-notif-icon svg {
width: 16px;
height: 16px;
}
/* Text content */
.ic-notif-content {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 2px;
}
.ic-notif-title {
font-size: 14px;
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.35;
}
.ic-notif-desc {
font-size: 12px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-600);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ic-notif-time {
font-size: 12px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-600);
line-height: 1.35;
margin-top: 2px;
}
/* Unread dot indicator */
.ic-notif-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: var(--ic-radius-full);
background: var(--ic-primary-500);
margin-top: 6px;
}
/* Unread item — slightly emphasised */
.ic-notif-unread > a {
background: var(--ic-neutral-50) !important;
}
.ic-notif-unread .ic-notif-title {
font-weight: var(--ic-font-semibold);
}
/* ── Empty state ──────────────────────────────────────────────────────── */
.ic-notifications-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
gap: 8px;
}
.ic-notifications-empty i,
.ic-notifications-empty svg {
width: 40px;
height: 40px;
color: var(--ic-neutral-300);
stroke-width: 1.5;
margin-bottom: 4px;
}
.ic-notifications-empty-title {
font-size: 14px;
font-weight: var(--ic-font-semibold);
color: var(--ic-neutral-700);
font-family: var(--ic-font-family);
}
.ic-notifications-empty-desc {
font-size: 12px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-500);
font-family: var(--ic-font-family);
}
/* ── Notification Detail Modal ────────────────────────────────────────── */
.ic-notif-modal {
border: none;
border-radius: var(--ic-radius-lg);
box-shadow: var(--ic-shadow-lg);
overflow: hidden;
font-family: var(--ic-font-family);
}
.ic-notif-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--ic-neutral-200);
}
.ic-notif-modal-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: var(--ic-font-semibold);
color: var(--ic-neutral-900);
margin: 0;
}
.ic-notif-modal-icon {
width: 20px;
height: 20px;
color: var(--ic-primary-500);
}
.ic-notif-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: var(--ic-radius-sm);
color: var(--ic-neutral-600);
cursor: pointer;
transition: background var(--ic-transition-instant), color var(--ic-transition-instant);
}
.ic-notif-modal-close:hover {
background: var(--ic-neutral-100);
color: var(--ic-neutral-900);
}
.ic-notif-modal-close i,
.ic-notif-modal-close svg {
width: 18px;
height: 18px;
}
.ic-notif-modal-body {
padding: 20px 24px;
}
.ic-notif-modal-meta {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--ic-neutral-100);
}
.ic-notif-modal-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.ic-notif-modal-label {
font-size: 11px;
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-600);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ic-notif-modal-value {
font-size: 14px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-900);
}
.ic-notif-modal-value img {
vertical-align: middle;
width: 18px;
height: 18px;
border-radius: var(--ic-radius-full);
}
.ic-notif-modal-section {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
}
.ic-notif-modal-message {
margin-bottom: 0;
}
.ic-notif-modal-body-content {
font-size: 14px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-800);
line-height: 1.6;
background: var(--ic-neutral-50);
border: 1px solid var(--ic-neutral-100);
border-radius: var(--ic-radius-sm);
padding: 12px 16px;
max-height: 200px;
overflow-y: auto;
}
.ic-notif-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px 20px;
border-top: 1px solid var(--ic-neutral-200);
gap: 12px;
}
.ic-notif-modal-footer-right {
display: flex;
align-items: center;
gap: 8px;
}
/* Button variants for the modal */
.ic-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: var(--ic-font-medium);
font-family: var(--ic-font-family);
color: var(--ic-white);
background: var(--ic-primary-500);
border: 1px solid var(--ic-primary-500);
border-radius: var(--ic-radius-sm);
cursor: pointer;
transition: background var(--ic-transition-instant);
}
.ic-btn-primary:hover {
background: var(--ic-primary-600);
border-color: var(--ic-primary-600);
color: var(--ic-white);
}
.ic-btn-secondary-outline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: var(--ic-font-medium);
font-family: var(--ic-font-family);
color: var(--ic-neutral-700);
background: transparent;
border: 1px solid var(--ic-neutral-300);
border-radius: var(--ic-radius-sm);
cursor: pointer;
transition: all var(--ic-transition-instant);
}
.ic-btn-secondary-outline:hover {
background: var(--ic-neutral-100);
border-color: var(--ic-neutral-400);
color: var(--ic-neutral-900);
}
.ic-btn-secondary-outline i,
.ic-btn-secondary-outline svg {
width: 14px;
height: 14px;
}
.ic-btn-danger-outline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: var(--ic-font-medium);
font-family: var(--ic-font-family);
color: var(--ic-error);
background: transparent;
border: 1px solid var(--ic-error-ring);
border-radius: var(--ic-radius-sm);
cursor: pointer;
transition: all var(--ic-transition-instant);
}
.ic-btn-danger-outline:hover {
background: var(--ic-error-bg);
border-color: var(--ic-error);
color: var(--ic-error-700);
}
.ic-btn-danger-outline i,
.ic-btn-danger-outline svg {
width: 14px;
height: 14px;
}
/* ══════════════════════════════════════════════════════════════════════════
PROFILE DROPDOWN (Figma design — node 463:527)
══════════════════════════════════════════════════════════════════════════ */
.ic-profile-dropdown {
width: 280px;
max-width: 92vw;
padding: 4px;
border: 1px solid var(--ic-neutral-200);
border-radius: var(--ic-radius-md) !important;
box-shadow: var(--ic-shadow-lg);
background: var(--ic-white);
overflow: hidden;
}
/* User info header */
.ic-profile-header {
display: flex;
flex-direction: column;
padding: 12px 16px;
}
.ic-profile-name {
font-size: 14px;
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-900);
font-family: var(--ic-font-family);
line-height: 1.2;
}
.ic-profile-email {
font-size: 12px;
font-weight: var(--ic-font-regular);
color: var(--ic-neutral-600);
font-family: var(--ic-font-family);
line-height: 1.2;
margin-top: 2px;
}
/* Divider */
.ic-profile-divider {
height: 1px;
background: var(--ic-neutral-200);
margin: 4px 0;
}
/* Section label (e.g. "Developer") */
.ic-profile-section-label {
padding: 4px 8px;
font-size: 10px;
font-weight: var(--ic-font-medium);
color: var(--ic-neutral-600);
font-family: var(--ic-font-family);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 15px;
}
/* Menu items */
.ic-profile-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: var(--ic-radius-xs);
color: var(--ic-neutral-900);
font-size: 14px;
font-weight: var(--ic-font-regular);
font-family: var(--ic-font-family);
text-decoration: none;
transition: background var(--ic-transition-instant);
cursor: pointer;
}
.ic-profile-item:hover {
background: var(--ic-neutral-50);
text-decoration: none;
color: var(--ic-neutral-900);
}
.ic-profile-item i,
.ic-profile-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--ic-neutral-600);
stroke-width: 1.8;
}
/* Logout — red text */
.ic-profile-logout,
.ic-profile-logout:hover {
color: var(--ic-error);
}
.ic-profile-logout i,
.ic-profile-logout svg {
color: var(--ic-error);
}
/* ══════════════════════════════════════════════════════════════════════════
MOBILE ADJUSTMENTS for top menu
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
.ic-avatar-btn {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
border-width: 2px;
}
.ic-avatar-img {
width: 100%;
height: 100%;
}
.ic-top-menu-btn {
width: 32px;
height: 32px;
}
.ic-bell-btn i,
.ic-bell-btn svg {
width: 18px;
height: 18px;
}
.ic-bell-dot {
top: 2px;
right: 2px;
width: 9px;
height: 9px;
}
/* Dropdowns can go edge-to-edge on very small screens */
.ic-notifications-dropdown {
right: -60px !important;
}
}
@media (max-width: 480px) {
.ic-notifications-dropdown,
.ic-profile-dropdown {
position: fixed !important;
left: 8px !important;
right: 8px !important;
top: 75px !important;
width: auto !important;
max-width: none;
transform: none !important;
}
}
/* ─── FIX: Override unscoped radio:checked + label from custom.min.css ──── */
/* The original rule applies background-color: #ABEADE to ALL checked radio labels.
This scopes it back to only where it was intended (label.shape-label for report templates). */
input[type="radio"]:checked + label {
filter: unset;
background-color: transparent;
}
input[type="radio"]:checked + label.shape-label {
filter: grayscale(0);
background-color: #ABEADE;
}
/* ─── FIX: Override Bootstrap blue focus ring with iComfort teal ────────── */
.form-check-input:focus {
border-color: var(--ic-primary-500, #3FB4A9) !important;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(63, 180, 169, 0.25) !important;
}
.graph-loading-image{
width: 80px !important;
margin-left: 0px !important;
margin-top: 15% !important;
}
/* Fix definitivo per dropdown menu in DataTable */
.dataTables_scrollBody {
overflow: visible !important;
}
#DeviceListTable tbody .dropdown-menu {
position: fixed !important;
z-index: 9999 !important;
}
#api-loading-overlay {
pointer-events: auto !important;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 2147483647 !important;
}
#api-loading-overlay.show {
display: flex !important;
}