/* BEGIN STYLESHEET */
/* ==========================================================
   1. THE CONTAINER (Optimized for Grid Rendering)
   ID: elegant-root
   ========================================================== */
#elegant-root {
    /* 1. LAYOUT */
    display: flex;
    flex-direction: row;
    /* Use standard box-sizing to avoid complex calc() if possible */
    box-sizing: border-box; 
    margin: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);

    /* 2. PERFORMANCE RENDERING */
    /* 'contain: strict' tells the browser this box is isolated. 
       It won't trigger re-layouts of the whole page when it updates. HUGE SPEEDUP. */
    contain: strict; 
    
    /* 3. FLAT DESIGN (Faster than complex shadows) */
    border: 1px solid #cbd5e1; /* Crisp border replaces fuzzy shadow */
    border-radius: 4px; /* Smaller radius = less anti-aliasing work */
    background-color: #ffffff;

    /* 4. OPTIMIZED INTERACTION */
    /* We animate Color, not Geometry. This skips the 'Layout' phase. */
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* HOVER STATE: High Performance */
#elegant-root:hover {
    /* distinct visual feedback without moving pixels */
    border-color: #64748b; 
    z-index: 1; /* Slight stacking bump */
}


/* ==========================================================
   2. THE LEFT BOX (Context)
   ID: elegant-target
   ========================================================== */
#elegant-target {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* FAST BACKGROUND */
    background-color: #f8fafc; 
    border-right: 1px solid #e2e8f0;

    /* SYSTEM FONTS (Zero download time, instant render) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 600;
}


/* ==========================================================
   3. THE RIGHT BOX (Live Value)
   ID: elegant-actual
   ========================================================== */
#elegant-actual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* PERFORMANCE FIX: 
       Replaced the expensive alpha-blending gradient with an INSET SHADOW.
       Inset shadows are often cached better than gradients on dynamic backgrounds.
       This gives you the "Gloss" look without the render cost. */
    box-shadow: inset 0 0 20px rgba(255,255,255,0.3);

    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    
    /* Smooth color transition for value changes */
    transition: background-color 0.2s ease;
}


/* ==========================================================
   1. THE ROOT (Structure)
   ID: header-root
   ========================================================== */
#header-root {
    /* LAYOUT: Matches the data cells exactly */
    display: flex;
    flex-direction: column; /* Stacks Time on top, Labels below */
    margin: 1px;
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    
    /* SHAPE */
    border-radius: 5px;
    overflow: hidden;
    
    /* DEPTH */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #fff;
}


/* ==========================================================
   2. TOP SECTION (The Time / "07:00")
   ID: header-top-box
   ========================================================== */
#header-top-box {
    /* 1. LAYOUT & SIZE */
    flex: 1.5; 
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 2. THE "GLASS" OVERLAY (The Elegance) */
    /* This sits ON TOP of whatever color you script. */
    background-image: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.15) 0%,   /* Subtle Top Highlight */
        rgba(255, 255, 255, 0.0) 50%,   /* Clean Middle */
        rgba(0, 0, 0, 0.25) 100%        /* Deep Bottom Shadow */
    );
    
    /* Default Base Color (If your script is empty) */
    background-color: #1e293b; 

    /* 3. BORDERS & DEPTH */
    /* A dark, semi-transparent border blends with any color */
    border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
    
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15), /* The "Machined Lip" at the top */
        0 4px 6px -2px rgba(0, 0, 0, 0.3);       /* Drop shadow onto the labels below */

    /* 4. TEXT (Monospace Only) */
    color: #ffffff;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    
    /* Text readability against any color */
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    
    /* 5. INTERACTION */
    transition: background-color 0.3s ease;
}


/* ==========================================================
   3. BOTTOM CONTAINER (Wrapper for Labels)
   ID: header-bottom-box
   ========================================================== */
#header-bottom-box {
    /* LAYOUT */
    flex: 1; 
    display: flex;
    flex-direction: row;
    width: 100%;
    
    /* SEPARATION: Adds a crisp line between the Time (top) and these labels */
    border-top: 1px solid rgba(0,0,0,0.2);
}


/* ==========================================================
   4. LEFT LABEL (Target Header)
   ID: header-label-target
   ========================================================== */
#header-label-target {
    /* LAYOUT */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* STYLE: "Technical Grey" Gradient (Slightly darker/recessed) */
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
    
    /* BORDER: A distinct divider line on the right */
    border-right: 1px solid rgba(148, 163, 184, 0.5); /* Slate-400 equivalent */
    
    /* DEPTH: Subtle top highlight ("Machined Lip") */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    
    /* TYPOGRAPHY */
    color: #475569; /* Slate-600 */
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 800; /* Extra bold for "Header" feel */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* ETCHED TEXT EFFECT */
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}


/* ==========================================================
   5. RIGHT LABEL (Actual Header)
   ID: header-label-actual
   ========================================================== */
#header-label-actual {
    /* LAYOUT */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* STYLE: "Bright Platinum" Gradient (Highlights the active column) */
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    
    /* DEPTH: Brighter top highlight */
    box-shadow: inset 0 1px 0 #ffffff;
    
    /* TYPOGRAPHY */
    color: #334155; /* Slate-700 (Darker/Crisper than target) */
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* ETCHED TEXT EFFECT */
    text-shadow: 0 1px 0 #ffffff;
}
/* ==========================================================
   SINGLE DOM ID: GENERIC HEADER LABEL
   Combines container geometry + text styling for max speed.
   ========================================================== */
#generic-header-label {
    /* 1. FLEX LAYOUT (Centers the text) */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Ensures border doesn't break dimensions */

    /* 2. GEOMETRY & SPACING */
    margin: 1px;
    width: calc(100% - 2px);  /* Tighter calc */
    height: calc(100% - 2px);
    border-radius: 5px;

    /* 3. PERFORMANCE RENDERING */
    contain: layout paint style; /* Isolates this element for speed */
    container-type: inline-size; /* Enables responsive text scaling */

    /* 4. VISUALS (Platinum Gradient) */
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    
    /* 5. TYPOGRAPHY (Responsive) */
    color: #475569;
    /* Uses System Fonts for speed, falls back to Monospace if needed */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "JetBrains Mono";
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #ffffff;
    
    /* INTELLIGENT SIZING: 
       Clamps font size between 10px and 14px based on box width.
       Requires 'container-type' above. */
    font-size: clamp(0.6rem, 10cqw, 0.9rem); 
    white-space: nowrap; /* Prevents ugly wrapping */

    /* 6. DEPTH & INTERACTION */
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,0.05);
    cursor: pointer;
    user-select: none; /* Prevents text highlighting on clicks */
    
    /* Animate only cheap properties (color/border), NOT geometry */
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* HOVER STATE */
#generic-header-label:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border-color: #94a3b8; /* Subtle darken on border */
    color: #334155; /* Slightly darker text */
    /* Removed 'transform' to prevent pixel jitter on text */
}

/* ACTIVE (CLICK) STATE - Optional tactile feel */
#generic-header-label:active {
    background: #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Presses in */
}

/* ==========================================================
   MERGED SHIFT OPTION (Container + Text)
   ID: generic_check_box
   ========================================================== */
#generic_check_box {
    /* 1. LAYOUT & GEOMETRY */
    display: flex;
    align-items: center;
    justify-content: center; /* Centered text for a button */
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    /* 2. PERFORMANCE & RESPONSIVENESS */
    contain: layout paint style; /* Isolates rendering cost */
    container-type: inline-size; /* Enables responsive font scaling */

    /* 3. VISUAL TEXTURE (The "Tray" Look) */
    /* The gradient sits ON TOP of your dynamic background color */
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.8) 0%,   /* High Gloss Top */
        rgba(255, 255, 255, 0.0) 100%  /* Transparent Bottom */
    );
    background-color: #e2e8f0; /* Default base color */

    /* 4. BORDERS & DEPTH */
    border: 1px solid rgba(0,0,0,0.1); 
    border-bottom: 2px solid rgba(0,0,0,0.15); /* Thicker bottom for tactile feel */
    border-radius: 5px;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.9), /* Sharp top highlight */
        0 1px 2px rgba(0,0,0,0.05);          /* Soft shadow */

    /* 5. TYPOGRAPHY (The "Text" Look) */
    color: #334155;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap; /* Prevent wrapping */
    
    /* SMART SIZING: Text scales between 10px and 16px based on width */
    font-size: clamp(0.6rem, 12cqw, 1rem); 
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);

    /* 6. INTERACTION */
    cursor: pointer;
    user-select: none;
    transition: filter 0.15s ease, transform 0.1s ease;
}

/* HOVER: Brightens the whole button efficiently */
#generic_check_box:hover {
    filter: brightness(1.05); 
}

/* ACTIVE (CLICK): Physically presses down */
#generic_check_box:active {
    transform: translateY(1px);     /* Moves down 1px */
    border-bottom-width: 1px;       /* Shrinks the "3D" edge */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inner shadow for depth */
}

/* ==========================================================
   STATUS LENS (The Acrylic Light Cover)
   ID: status-lens-container
   ========================================================== */
#status-lens-container {
    /* LAYOUT */
    display: flex;
    align-items: center; /* Vertically centers Icon + Text */
    justify-content: flex-start; /* Keeps content to the left/center as needed */
    padding: 0 16px; /* Internal spacing so text hits the edge */
    gap: 12px; /* Space between the Icon and the Label */
    
    /* SIZE */
    width: 100%;
    height: 100%;
    
    /* 1. THE LENS TEXTURE (The "Mesmerizing" Part) */
    /* This sits ON TOP of your background color.
       It creates a "Gel" look: Bright top, clear middle, dark bottom. */
    background-image: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.45) 0%,   /* High-Gloss Top */
        rgba(255, 255, 255, 0.1) 40%,   /* Clear Middle */
        rgba(0, 0, 0, 0.05) 50%,        /* Horizon Line */
        rgba(0, 0, 0, 0.15) 100%        /* Shadowed Bottom */
    );
    
    /* 2. DEFAULT COLOR (Fallback) */
    background-color: #fbbf24; /* Default Amber/Yellow */
    
    /* DEPTH & SHAPE */
    /* This border logic makes it look embedded in the screen */
    border-top: 1px solid rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.4), /* Inner Highlight */
        inset 0 0 15px rgba(0,0,0,0.05);     /* Inner Depth */
        
    /* INTERACTION */
    transition: background-color 0.4s ease; /* Smooth color switching */
    overflow: hidden; /* Keeps corners clean */
}


/* ==========================================================
   STATUS TEXT (The "Etched" Label)
   ID: status-lens-text
   ========================================================== */
#status-lens-text {
    /* TYPOGRAPHY */
    /* We use a dark charcoal because status lights (Yellow, Green, Red) 
       are usually bright. Dark text is most legible. */
    color: #1e293b; 
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 1.1rem; /* Big and readable */
    font-weight: 800;  /* Extra Bold */
    
    /* STYLING */
    text-transform: uppercase;
    letter-spacing: 2px; /* Wide industrial spacing */
    
    /* THE ETCHED EFFECT */
    /* A white shadow below the text makes it look engraved into the plastic */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    
    /* LAYOUT */
    margin-right: auto; /* Pushes any right-aligned icons to the far edge */
}


/* ==========================================================
   CELL NAME TAG (Hyper-Luminescent Glass)
   ID: cell-name-tag
   ========================================================== */
#cell-name-tag {
    /* 1. LAYOUT & DYNAMIC TEXT */
    display: flex;
    align-items: left;
    justify-content: left;
    width: 100%;
    height: 100%;
    
    /* Dynamic sizing: scales smoothly between 1rem and 1.8rem based on container width */
    font-size: clamp(1rem, 2.5vw, 1.8rem); 
    
    /* 2. TYPOGRAPHY (The "Suspended" Look) */
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-weight: 800;
    color: #1e293b; /* Deep Slate (Best contrast for "lit" surfaces) */
    letter-spacing: 1px;
    
    /* This double-shadow makes the text look like it's floating inside the glass */
    text-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.8),  /* Bottom highlight */
        0 0 10px rgba(255, 255, 255, 0.3); /* Subtle glow */

    /* 3. THE "LIQUID" SURFACE */
    /* Transparent layers that sit ON TOP of your background color */
    background-image: 
        /* Top Gloss (The Wet Look) */
        linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.0) 55%),
        /* Bottom Depth (The thickness) */
        linear-gradient(0deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
    
    /* 4. DEFAULT COLOR (Fallback) */
    background-color: #cbd5e1;

    /* 5. THE "WOW" STRUCTURE */
    border-radius: 6px;
    border: none; /* We use shadows for borders now—it's smoother */
    
    /* DEEP GLASS BOX SHADOWS */
    box-shadow: 
        /* The "Rim Light" - A razor sharp white line on top */
        inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
        /* The "Inner Glow" - Soft light trapped inside */
        inset 0 0 10px rgba(255, 255, 255, 0.3),
        /* The "Drop Shadow" - Soft and distant */
        0 4px 6px -1px rgba(0, 0, 0, 0.2);

    /* 6. INTERACTION PHYSICS */
    cursor: pointer;
    user-select: none;
    /* Custom Bezier for a "Springy" feel */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================
   THE HOVER STATE (The "Activation")
   ========================================================== */
#cell-name-tag:hover {
    /* 1. PHYSICAL LIFT */
    transform: translateY(-3px) scale(1.02);
    
    /* 2. "CHARGED" COLOR */
    /* instantly makes your Red/Green/Blue deeper and richer */
    filter: saturate(1.5) brightness(1.1);
    
    /* 3. THE "BREATHING" TEXT */
    /* Text expands slightly, feeling alive */
    letter-spacing: 3px;
    
    /* 4. THE "HALO" EXPLOSION */
    box-shadow: 
        /* The Rim Light becomes a glowing border */
        inset 0 0 0 2px rgba(255, 255, 255, 0.6),
        /* The Inner Glow fills the container */
        inset 0 0 40px rgba(255, 255, 255, 0.5),
        /* The External Glow (Bloom) */
        0 15px 30px -5px rgba(0, 0, 0, 0.3);
}

/* CLICK STATE */
#cell-name-tag:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 0 3px 10px rgba(0,0,0,0.2);
    filter: brightness(0.9);
    letter-spacing: 1px; /* Snaps back */
}

/* ==========================================================
   GENERIC DATA CHIP (Swiss Horology Style)
   ID: generic-data-chip
   ========================================================== */
#generic-data-chip {
    /* 1. LAYOUT & FIT CONTROL */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 0px; /* Breathing room */
    
    /* THE "NO OVERFLOW" LOGIC */
    white-space: nowrap;      /* Force one line */
    overflow: hidden;         /* Hide anything that sticks out */
    text-overflow: ellipsis;  /* Add "..." if text is too long */
    
    /* 2. TYPOGRAPHY (The "Stamped" Look) */
    /* Dynamic sizing that respects the container limits */
    font-size: clamp(0.5rem, 1.0vw, 0.75rem);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #334155; /* Dark Slate (high readability) */
    font-weight: 700;
    /*letter-spacing: 0.5px;*/ /* Clean separation */
    
    /* 3. THE PLATINUM SURFACE */
    /* A very subtle metallic brushed effect */
    background-image: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(241, 245, 249, 0.8) 100%
    );
    
    /* Fallback background color */
    background-color: #f8fafc; 

    /* 4. THE MACHINED EDGES */
    border-radius: 5px; /* Strict 5px as requested */
    
    /* Complex Border: 
       - 1px Solid border for definition
       - Inner White shadow acts as a "chamfered" (beveled) edge */
    border: 1px solid rgba(148, 163, 184, 0.4); 
    
    /* DEPTH: "Recessed Window" */
    box-shadow: 
        /* The "Chamfer" (Inner Light Rim) */
        inset 0 1px 0 rgba(255, 255, 255, 1),
        /* The "Recess" (Inner Shadow) */
        inset 0 2px 5px rgba(0, 0, 0, 0.03),
        /* The "Drop" (Subtle Lift) */
        0 1px 2px rgba(0, 0, 0, 0.05);

    /* INTERACTION */
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* HOVER: The "Sapphire" Glint */
#generic-data-chip:hover {
    /* On hover, the surface becomes "Glassier" */
    background-color: #ffffff;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 2px 4px rgba(0, 0, 0, 0.08); /* Lifts slightly */
        
    border-color: rgba(148, 163, 184, 0.6); /* Border darkens for contrast */
    color: #0f172a; /* Text gets sharper */
}


/* ==========================================================
   PAGE HEADER CONTAINER
   Elegant gradient foundation with sophisticated depth
   ========================================================== */
#page-header-container {
    /* COLOR & GRADIENT ONLY */
    background: linear-gradient(
        135deg,
        #f8fafc 0%,
        #f1f5f9 50%,
        #e2e8f0 100%
    );
    
    /* SEPARATOR LINE (Visual Only) */
    border-bottom: 1px solid rgba(203, 213, 225, 0.4);
}

/* ==========================================================
   PAGE HEADER TITLE
   Dynamic, centered elegance
   ========================================================== */
#page-header-title {
    /* TYPOGRAPHY */
    font-family: monospace;
    font-size: clamp(2.0rem, 4vw, 3.0rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    
    /* ALIGNMENT */
    text-align: center;
    
    /* COLOR */
    color: #1e293b;
}

/* ==========================================================
   PAGE HEADER SUBTITLE
   Refined secondary text with breathing room
   ========================================================== */
#page-header-subtitle {
    /* TYPOGRAPHY */
    font-family: monospace;
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.5;
    
    /* ALIGNMENT */
    text-align: center;
    
    /* COLOR */
    color: #64748b;
}

/* ==========================================================
   HEADER ICON
   - Color, Pointer, Subtle Zoom
   - Solid Border on Hover (No layout jump)
   ========================================================== */
#page-header-icon {
    /* BASE COLOR */
    color: #475569; 
    fill: #475569; 
    
    /* LAYOUT STABILITY (Prevents jumping) */
    border: 1px solid transparent;
    
    /* INTERACTION */
    cursor: pointer;
    transition: all 0.3s ease;
}

#page-header-icon:hover {
    /* HOVER COLOR */
    color: #0f172a; 
    fill: #0f172a;
    
    /* SOLID BORDER */
    border: 1px solid #0f172a;
    border-radius: 10px;
    
    /* VERY SUBTLE ZOOM */
    transform: scale(1.02); 
}


/* ==========================================================
   ELEGANT ICON FRAME
   Refined optical lens with perfect centering
   ========================================================== */
#elegant-icon-frame {
    /* LAYOUT: Perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    
    /* MINIMAL PADDING */
    padding: 0px;
    
    /* LUMINOUS GRADIENT SURFACE */
    background: radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 250, 252, 0.8) 60%,
        rgba(241, 245, 249, 0.6) 100%
    );
    
    /* SHAPE */
    border-radius: 6px;
    
    /* REFINED BORDER */
    border: 1px solid rgba(226, 232, 240, 0.7);
    
    /* SOPHISTICATED DEPTH */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.02);
    
    /* INTERACTION */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* ==========================================================
   ICON CONTENT SCALING
   ========================================================== */
#elegant-icon-frame img,
#elegant-icon-frame svg {
    /* CENTERED FILL */
    width: 125% !important;
    height: 126% !important;
    object-fit: contain;
    
    /* SUBTLE ENHANCEMENT */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* HOVER: Elegant lift and glow */
#elegant-icon-frame:hover {
    background: radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 1) 0%,
        rgba(248, 250, 252, 0.95) 60%,
        rgba(241, 245, 249, 0.8) 100%
    );
    
    border-color: rgba(203, 213, 225, 0.8);
    
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.04);
}

#elegant-icon-frame:hover img,
#elegant-icon-frame:hover svg {
    transform: scale(1.03);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
/* ==========================================================
   ANDON CONTAINER - LUMINOUS STYLE (MAXIMUM SPACE)
   ========================================================== */
#andon_container {
    /* LAYOUT: Zero waste */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    
    /* REMOVED PADDING & GAP to prevent clipping */
    padding: 0;
    gap: 0; 

    /* SHAPE */
    border-radius: 6px;
    overflow: hidden;

    /* LUMINOUS GRADIENT OVERLAY (Transparent) */
    background-image: radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(0, 0, 0, 0.05) 100%
    );

    /* REFINED BORDER */
    border: 1px solid rgba(255, 255, 255, 0.4);

    /* DEPTH */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.1);

    /* TRANSITION */
    transform: translateZ(0); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================
   ANDON LABEL
   ========================================================== */
#andon_label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: clamp(6px, 0.65vw, 18px); 
    font-weight: 700;
    letter-spacing: 0.0px;
    text-align: center;
    
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   ANDON ICON
   ========================================================== */
#andon_icon {
    flex-shrink: 0;
    height: 85%;
    width: auto;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    margin-right: 2px; 
}

/* ============================================================
   Generic BUTTONS
   ============================================================ */
.psc-elegant-btn {
    /* --- 1. SIZING & FONT --- */
    font-size: 1rem !important;      /* Large but not cartoonish */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFFFFF !important;

    /* --- 2. LIGHTER, MODERN GRADIENT --- */
    /* Blue that feels "tech" not "industrial" */
    background: linear-gradient(180deg, #60A5FA 0%, #2563EB 100%) !important;
    border: 1px solid #1D4ED8 !important; /* Crisp border */
    border-radius: 4px;
    
    /* --- 3. SPACING & SHADOW --- */
    padding: 0px ;
    margin: 1px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Softer shadow */
    
    cursor: pointer;
    transition: all 0.2s ease;
}

/* HOVER: Brighter & Lifted */
.psc-elegant-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #93C5FD 0%, #3B82F6 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3); /* Blue glow shadow */
}

/* ACTIVE: Deep Blue Press */
.psc-elegant-btn:active:not(:disabled) {
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%) !important;
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   ELEGANT INFO CARD (Clickable For Instructions/Alerts)
   ============================================================ */
/* Target the specific DOM ID */
#elegant-card {
    /* 1. LAYOUT CONTROL */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box; /* Includes border in height calculation */

    /* 2. REMOVE ALL HEIGHT CONSTRAINTS */
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    overflow: visible !important;

    /* 3. REMOVE ALL PADDING */
    padding: 0 !important;
    margin: 1px;

    /* 4. APPEARANCE */
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%);
    border-left: 6px solid #2563EB; 
    border-top: 1px solid #BFDBFE;
    border-right: 1px solid #BFDBFE;
    border-bottom: 1px solid #BFDBFE;
    border-radius: 4px;
    
    /* 5. TYPOGRAPHY */
    color: #1E40AF;
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: normal;

    /* 6. INTERACTION */
    cursor: pointer;
    transition: transform 0.2s ease;
}

#elegant-card:hover {
    transform: translateY(-2px);
}

#elegant-card:hover {
    background: #EFF6FF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.15);
    border-color: #60A5FA !important;
}

#elegant-card:active {
    background: #DBEAFE !important;
    transform: translateY(0);
}

/* ============================================================
   ELEGANT display CARD (Non Clickable For Instructions/Alerts)
   ============================================================ */
#elegant-display {
    display: flex;
    align-items: center;
    
    /* Let the content define the size */
    height: auto;
    min-height: fit-content;
    margin: 5px;
    /* Zero padding as requested */
    padding: 0px;

    background: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);

    color: #374151;
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    
    cursor: default;
    pointer-events: none;
}


/* ==========================================================
   1. THE CONTAINER (High Performance Grid Display)
   ID: elegant-container
   ========================================================== */
#elegant-container {
    display: flex;
    flex-direction: row;
    height: auto;
    min-height: fit-content;
    
    /* Requested 0.25px margin and 0 padding */
    margin: 0.25px;
    padding: 0;

    /* Performance optimization: Prevents layout thrashing */
    contain: content;
    box-sizing: border-box;
    
    border: 1px solid #cbd5e1;
    border-radius: 2px;
    background-color: #ffffff;
    
    /* Clean transition for background color changes */
    transition: background-color 0.1s linear;
}

/* ==========================================================
   2. THE LABEL (Monospaced Content)
   ID: elegant-label
   ========================================================== */
#elegant-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Mandatory monospace font */
    font-family: "JetBrains Mono", "Roboto Mono", "Courier New", monospace;
    font-size: 1rem;
    font-weight: 500;
    
    /* We do NOT set color here so your Ignition bindings work */
    
    /* Stop text from squishing or wrapping */
    white-space: nowrap;
    overflow: visible;
}


/* ==========================================================
   43. STATUS INDICATOR (The "Live" Dot)
   Class: .psc-elegant-dot-blink
   ========================================================== */

/* 1. DEFINE ANIMATION (The "Heartbeat" Ripple) */
@keyframes elegant-pulse-red {
    0% {
        /* Start: Tight, semi-transparent red glow close to the dot */
        box-shadow: 0 0 0 0px rgba(239, 68, 68, 0.7);
    }
    70% {
        /* Middle: Glow expands outward and fades to transparent */
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);
    }
    100% {
        /* End: Reset */
        box-shadow: 0 0 0 0px rgba(239, 68, 68, 0);
    }
}

/* 2. THE DOT STYLE */
.psc-elegant-dot-blink {
    /* --- A. GEOMETRY --- */
    /* Use standard size, but can be overridden by style props */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    
    /* Ensure it respects layout flow if placed inside flex containers */
    display: inline-block;
    flex-shrink: 0; 

    /* --- B. THE "LED" AESTHETIC --- */
    /* 1. Gradient: Simulates a physical bulb (Light reflection top-left, dark red body) */
    background: radial-gradient(
        circle at 35% 35%, 
        #fca5a5 0%,   /* Glare (White-ish Red) */
        #dc2626 50%,  /* True Red */
        #991b1b 100%  /* Shadow (Dark Red) */
    );

    /* 2. Border: A dark ring to define the edge against white backgrounds */
    border: 1px solid #7f1d1d; 

    /* --- C. PERFORMANCE & ANIMATION --- */
    /* Infinite pulse loop - 2 seconds is calm, 1 second is urgent. */
    animation: elegant-pulse-red 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    
    /* Hint to browser to optimize rendering for shadow changes */
    will-change: box-shadow;
}
/* ==========================================================
   1. THE ROOT CONTAINER (Structure)
   Class: elegant_tab
   ========================================================== */
.psc-elegant_tab {
    /* CHASSIS: Matches your preferred background */
    background-color: #F1F5F9; 
    border: 1px solid #cbd5e1; 
    border-radius: 6px;
    
    /* SHADOW: Soft, expensive-looking diffuse shadow */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 
                0 4px 6px -2px rgba(0, 0, 0, 0.025);
    
    /* PERFORMANCE: Isolate layout */
    contain: content;
    overflow: hidden; 
}

/* ==========================================================
   2. THE TAB MENU STRIP (The "Tray")
   This is the bar behind the tabs.
   ========================================================== */
.psc-elegant_tab .tab-menu {
    /* TRAY BACKGROUND: Darker to make active tab "pop" */
    background-color: #e2e8f0; 
    
    /* BORDER: The line that runs across the whole width */
    border-bottom: 1px solid #cbd5e1;
    
    /* SPACING: Precise alignment */
    padding-top: 6px; 
    padding-left: 8px;
    gap: 4px; /* Space between tabs */
}

/* ==========================================================
   3. INDIVIDUAL TABS (Default / Inactive)
   ========================================================== */
.psc-elegant_tab .tab-menu-item {
    /* GEOMETRY */
    /* Remove Ignition defaults */
    border: 1px solid transparent; 
    border-bottom: none;
    border-top-left-radius: 6px; /* Softer corners */
    border-top-right-radius: 6px;
    
    /* SPACING */
    padding: 8px 20px; /* Wider = More elegant */
    margin-bottom: -1px; /* CRITICAL: Sits on the border line */
    
    /* TYPOGRAPHY */
    color: #64748b; /* Slate-500 */
    font-family: 'JetBrains Mono', 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    
    /* TRANSITION: Smooth hover effects */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* HOVER STATE (Interactive Feedback) */
.psc-elegant_tab .tab-menu-item:hover {
    color: #1e293b;
    background-color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================
   4. ACTIVE TAB (HYBRID MODE)
   We let the Property Editor handle the Color & Shape.
   We just add the Gloss and the Blue Line.
   ========================================================== */
.psc-elegant_tab .tab-menu-item.active {
    /* 1. THE GLOSS TEXTURE */
    /* This sits ON TOP of the color you picked in the editor. */
    background-image: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.5) 0%,   /* White reflection at top */
        rgba(255, 255, 255, 0.1) 40%,  /* Fades out */
        rgba(0, 0, 0, 0.05) 100%       /* Slight shadow at bottom */
    ) !important;

    /* 2. THE BLUE INDICATOR STRIP */
    /* Since we set borderWidth: 0 in the editor, we use an INSET SHADOW 
       to draw the blue line. It's impossible for Ignition to block this. */
    box-shadow: inset 0 4px 0 #2563EB !important; 
    
    /* 3. TEXT COLOR */
    /* Force dark text so it's readable on your light colors */
    color: #0f172a !important; 
    font-weight: 800 !important;
    
    /* 4. LAYOUT FIXES */
    /* Ensures the tab sits correctly over the divider */
    z-index: 10;
    transform: translateY(1px); 
    
    /* 5. REMOVE DEFAULT BORDERS FORCEFULLY */
    /* Just in case the Property Editor doesn't catch them all */
    border: none !important;
}
/* ==========================================================
   5. CONTENT AREA
   ========================================================== */
.psc-elegant_tab .tab-content {
    background-color: #F1F5F9;
    padding: 16px; /* Breathing room for your content */
}


/* ==========================================================
   ELEGANT TABLE COMPONENT
   Class: table_style
   ========================================================== */

/* 1. THE TABLE CHASSIS (Container) */
.psc-table_style {
    /* Rounded corners & Physical presence */
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    
    /* Subtle depth shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Layout isolation */
    overflow: hidden; 
    --neutral-20: #f8fafc; /* Overriding internal table stripe colors */
}

/* 2. THE HEADER (The "Tray" Look) */
.psc-table_style .ia_table__headContainer {
    /* Matches your Tab Menu Tray */
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

/* Header Cells */
.psc-table_style .ia_table__head__header__cell {
    /* Typography */
    color: #475569 !important; /* Slate-600 */
    font-family: 'JetBrains Mono', 'Segoe UI', sans-serif;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Spacing */
    padding: 12px 16px !important;
}

/* 3. THE BODY ROWS (Interactivity) */
.psc-table_style .ia_table__body__row {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

/* Row Hover Effect */
.psc-table_style .ia_table__body__row:hover {
    background-color: #f8fafc !important; /* Very subtle highlight */
    box-shadow: inset 2px 0 0 #2563EB; /* Blue accent on the left when hovering */
}

/* Selected Row (When user clicks) */
.psc-table_style .ia_table__body__row--selected {
    background-color: #eff6ff !important; /* Light Blue tint */
    border-left: 3px solid #2563EB !important; /* Strong Blue Indicator */
}

/* 4. THE DATA CELLS (Responsive & Readable) */
.psc-table_style .ia_table__cell {
    color: #334155 !important; /* Slate-700 (High readability) */
    
    /* --- RESPONSIVE TEXT MAGIC --- */
    /* Minimum: 14px */
    /* Ideal: 1vw + 8px (scales with screen) */
    /* Maximum: 18px */
    font-size: clamp(14px, 0.8vw + 0.6rem, 18px) !important;
    
    /* Spacing */
    padding: 14px 16px !important; /* Tall, comfortable rows */
    
    /* Clean Look: Remove vertical borders */
    border-right: none !important;
}

/* 5. ALTERNATE ROW STRIPING (Subtle Zebra) */
/* Targets every even row for easier scanning */
.psc-table_style .ia_table__body__row:nth-child(even) {
    background-color: #fafbfd; 
}

/* ==========================================================
   ELEGANT NUMERIC INPUT (HEIGHT UNLOCKED)
   Class: numeric_input_style
   Note: All height constraints removed.
   ========================================================== */

/* 1. THE CHASSIS (The Container) */
.psc-numeric_input_style {
    /* APPEARANCE ONLY */
    border-radius: 6px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    
    /* SHADOW */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    
    /* TRANSITION */
    transition: all 0.2s ease;
    
    /* LAYOUT SAFETY */
    /* Ensures internal elements stretch but don't force size */
    overflow: hidden; 
}

/* HOVER STATE */
.psc-numeric_input_style:hover {
    border-color: #94a3b8 !important; 
    background-color: #f8fafc !important;
}

/* FOCUS STATE (Blue Glow) */
.psc-numeric_input_style.ia_input--focused,
.psc-numeric_input_style:focus-within {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* ==========================================================
   2. THE NUMBER TEXT (Typography)
   ========================================================== */
.psc-numeric_input_style input {
    /* FONT STACK */
    font-family: 'JetBrains Mono', 'Segoe UI', monospace !important;
    font-size: 16px !important; 
    font-weight: 600 !important;
    color: #334155 !important; 
    
    /* ALIGNMENT */
    text-align: right !important; 
    
    /* SPACING (Horizontal Only) */
    padding-left: 2px !important; 
    padding-right: 2px !important;
    
    /* NO VERTICAL PADDING / HEIGHT LOCKS */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important; /* Fills whatever height you set */
}

/* ==========================================================
   3. THE SPINNER BUTTONS (Up/Down Arrows)
   ========================================================== */
   
/* The Button Container */
.psc-numeric_input_style .ia_numericEntryField__stepper {
    border-left: 1px solid #cbd5e1; 
    background-color: #f1f5f9; 
    
    /* Let the height follow the container automatically */
    height: auto !important; 
}

/* Individual Buttons (Up/Down) */
.psc-numeric_input_style .ia_numericEntryField__stepper__up,
.psc-numeric_input_style .ia_numericEntryField__stepper__down {
    cursor: pointer;
    transition: background-color 0.1s;
    /* Ensure no fixed height forces */
    height: 50% !important; 
}

.psc-numeric_input_style .ia_numericEntryField__stepper__up:hover,
.psc-numeric_input_style .ia_numericEntryField__stepper__down:hover {
    background-color: #e2e8f0 !important; 
}

/* The Arrow Icons */
.psc-numeric_input_style .ia_numericEntryField__stepper svg {
    color: #64748b !important; 
    width: 5px !important;
}

/* ACTIVE STATE */
.psc-numeric_input_style .ia_numericEntryField__stepper__up:active,
.psc-numeric_input_style .ia_numericEntryField__stepper__down:active {
    background-color: #2563EB !important; 
}
.psc-numeric_input_style .ia_numericEntryField__stepper__up:active svg,
.psc-numeric_input_style .ia_numericEntryField__stepper__down:active svg {
    color: #ffffff !important; 
}

/* ==========================================================
   ELEGANT DROPDOWN (HEIGHT UNLOCKED)
   Class: dropdown_style
   ========================================================== */

/* 1. THE CHASSIS (The Box Itself) */
.psc-dropdown_style {
    /* REMOVED ALL HEIGHT LOCKS */
    /* The size is now controlled 100% by your Designer layout */
    
    /* Background & Border */
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    
    /* Shadow */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    
    /* Layout */
    display: flex;
    align-items: center; /* Keeps text vertically centered */
    overflow: visible !important; 
}

/* HOVER STATE */
.psc-dropdown_style:hover {
    border-color: #94a3b8 !important; 
    background-color: #f8fafc !important; 
}

/* FOCUS STATE (Blue Glow) */
.psc-dropdown_style.ia_input--focused,
.psc-dropdown_style:focus-within {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* ==========================================================
   2. THE TEXT (Typography Only)
   ========================================================== */
.psc-dropdown_style .ia_dropdown__value, 
.psc-dropdown_style input[type="text"] {
    /* TYPOGRAPHY */
    font-family: 'JetBrains Mono', 'Segoe UI', sans-serif !important;
    color: #334155 !important; 
    font-weight: 600 !important;
    
    /* Font Size */
    font-size: 16px !important; 
    
    /* Spacing */
    padding-left: 8px !important;
    
    /* Ensure no internal height conflicts */
    height: 100% !important; 
}

/* Fix Placeholder */
.psc-dropdown_style input::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

/* ==========================================================
   3. THE ARROW ICON 
   ========================================================== */
.psc-dropdown_style .ia_dropdown__expandIcon {
    color: #64748b !important;
    width: 20px !important; 
    height: 20px !important; /* Icon itself needs size, but won't force container */
    margin-right: 8px; 
}

/* ==========================================================
   4. THE DROPDOWN LIST (Popup)
   ========================================================== */
.psc-dropdown_style .ia_dropdown__optionsModal {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-top: 4px; 
}

.psc-dropdown_style .ia_dropdown__option {
    font-family: 'JetBrains Mono', 'Segoe UI', sans-serif;
    font-size: 14px;
    padding: 10px 16px;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

.psc-dropdown_style .ia_dropdown__option:hover,
.psc-dropdown_style .ia_dropdown__option--selected {
    background-color: #eff6ff !important;
    color: #2563EB !important;
}
.psc-dropdown_style_drops {
    /* REMOVED ALL HEIGHT LOCKS */
    /* The size is now controlled 100% by your Designer layout */
    
    /* Background & Border */
    background-color: #ffffff !important;
    border: 0px solid #cbd5e1 !important;
    border-radius: 6px !important;
    
    /* Shadow */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    
    /* Layout */
    display: flex;
    align-items: center; /* Keeps text vertically centered */
    overflow: visible !important; 
}

/* ==========================================================
   ELEGANT ACTION ICON (INTERACTIVE)
   Class: action_icon
   Features: Pointer cursor, lift on hover, press on click
   ========================================================== */
.psc-action_icon {
    /* LAYOUT */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    
    /* SHAPE */
    border-radius: 6px;
    
    /* SURFACE (Matches your original lens look) */
    background: radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 250, 252, 0.8) 60%,
        rgba(241, 245, 249, 0.6) 100%
    );
    
    /* BORDER */
    border: 1px solid rgba(226, 232, 240, 0.7);
    
    /* SHADOW (Resting State) */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.02);
        
    /* INTERACTION SETUP */
    cursor: pointer; /* <--- The Hand Icon */
    user-select: none; /* Prevents blue text highlight on rapid clicking */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}


/* ==========================================================
   ICON CONTENT (Image / SVG)
   ========================================================== */
.psc-action_icon img,
.psc-action_icon svg {
    /* OPTICAL ZOOM (Your original scaling) */
    width: 125% !important; 
    height: 126% !important;
    object-fit: contain;
    
    /* SUBTLE DEPTH */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
    transition: transform 0.2s ease;
    pointer-events: none; /* Ensures click hits the button, not the image */
}

/* ==========================================================
   HOVER STATE (The "Lift")
   ========================================================== */
.psc-action_icon:hover {
    /* BRIGHTER SURFACE */
    background: radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 1) 0%,
        rgba(248, 250, 252, 0.95) 60%,
        rgba(241, 245, 249, 0.9) 100%
    );
    border-color: #cbd5e1;
    
    /* HIGHER SHADOW */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 4px 6px -1px rgba(0, 0, 0, 0.08), 
        0 2px 4px -1px rgba(0, 0, 0, 0.04);
        
    /* PHYSICAL LIFT */
    transform: translateY(-2px); 
}

/* ==========================================================
   ACTIVE STATE (The "Press")
   This happens only while holding the mouse button down
   ========================================================== */
.psc-action_icon:active {
    /* PHYSICAL SQUISH */
    transform: translateY(1px) scale(0.97); 
    
    /* DEPRESSED SURFACE */
    background: #f1f5f9 !important; /* Flat Slate color */
    border-color: #cbd5e1;
    
    /* INSET SHADOW (Simulates being pushed into the screen) */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        0 0 0 transparent !important; 
}

/* SHRINK ICON ON CLICK */
.psc-action_icon:active img,
.psc-action_icon:active svg {
    transform: scale(0.95);
    filter: none; /* Remove shadow to make it look flush */
    opacity: 0.8;
}

/* ==========================================================
   SIMPLE CARD CONTAINER
   Class: container_style
   Usage: Groups labels/data with subtle separation
   ========================================================== */
.psc-container_style {
    /* 1. SURFACE (Clean White) */
    background-color: #ffffff;
    
    /* 2. SUBTLE BORDER (Softer than inputs) */
    /* Using Slate-200 so it defines the edge but doesn't distract */
    border: 1px solid #e2e8f0; 
    border-radius: 8px; /* Consistent rounded corners */
    
    /* 3. DEPTH (The "Stand Out" Factor) */
    /* A very soft shadow to lift it off the background */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 
                0 1px 2px -1px rgba(0, 0, 0, 0.02);
                
    /* 4. INTERNAL SPACING */
    /* Essential: Keeps your labels from hitting the edges */
    padding: 1px; 
    
    /* 5. LAYOUT ASSIST (Optional) */
    /* If you use a Flex Container, this adds automatic spacing between labels */
    gap: 2px; 
}

/* ==========================================================
   INFO / TOOLTIP CHIP (Reset Page)
   Class: info
   Usage: Apply to a Label/Button you hover over
   ========================================================== */
.psc-tooltip_style {
    /* 1. SURFACE (Light bluish gradient) */
    background: linear-gradient(135deg, #ffffff 0%, #f3f7ff 55%, #eef5ff 100%);
    
    /* 2. BORDER (Soft slate) */
    border: 1px solid #dbe7f5;
    border-radius: 10px;

    /* 3. DEPTH (Soft lift) */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06),
                0 8px 20px rgba(15, 23, 42, 0.08);

    /* 4. TEXT (Clean, readable) */
    color: #0f172a;
    font-weight: 600;
    letter-spacing: 0.2px;

    /* 5. SPACING */
    padding: 8px 12px;

    /* 6. OPTIONAL: avoid text selection */
    user-select: none;
}

/* ==========================================================
   ELEGANT COLUMN CONTAINER (TEXTURE ONLY)
   Class: column_style
   Usage: You pick the background color; this adds the gloss & border.
   ========================================================== */
.psc-column_style {
    /* 1. ZERO LAYOUT (Respects your Designer settings) */
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important; 
    
    /* 2. THE CHASSIS (Shape & Border) */
    border: 1px solid #cbd5e1 !important; /* Matches your other inputs */
    border-radius: 6px !important;
    overflow: hidden; /* Ensures the gloss stays inside the curves */

    /* 3. THE GRADIENT (The "Secret Sauce") */
    /* Transparent White -> Transparent Black */
    /* This allows your chosen background color to shine through */
    background-image: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.5) 0%,    /* Bright reflection at top */
        rgba(255, 255, 255, 0.1) 40%,   /* Fades out */
        rgba(0, 0, 0, 0.05) 100%        /* Subtle shadow at bottom */
    ) !important;
    
    /* 4. FINISH */
    /* A tiny white highlight on the top edge */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
/* Update your named style in the Advanced Stylesheet */
.psc-date_column_style {
    /* Force the background color HERE so the gradient has something to sit on */
    background-color: #cbd5e1 !important; 
    
    /* Re-apply the gradient */
    background-image: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.8) 0%,    
        rgba(255, 255, 255, 0.1) 40%,   
        rgba(0, 0, 0, 0.05) 100%       
    ) !important;
    
    /* Force specific display to ensure it fills the cell */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Reset padding/borders */
    border: 1px solid #94a3b8 !important;
    border-radius: 4px !important;
}

/* ==========================================================
   KPI BARS (Refined Bar Gradient)
   Style Class: psc-kpi_bar
   ========================================================== */
.psc-kpi_bar {
    /* --- Layout & Shape (Preserved) --- */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; 
    border-radius: 6px;
    
    /* --- Typography (Preserved) --- */
    color: #ffffff;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.5px;

    /* --- The Refined Gradient --- */
    background-image: 
        /* Layer 1: Vertical Gloss (Cylindrical Shine) */
        linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.25) 0%, 
            rgba(255, 255, 255, 0.1) 48%, 
            rgba(0, 0, 0, 0.05) 52%, 
            rgba(0, 0, 0, 0.15) 100%),
        /* Layer 2: The Dynamic Bar Gradient
           Adds a subtle 'glow' from left-to-right within the colored area */
        linear-gradient(90deg, 
            var(--base-color) 0%, 
            rgba(255, 255, 255, 0.15) 0%, /* Inset highlight at start */
            var(--base-color) 10%, 
            var(--base-color) var(--val, 0%), 
            transparent var(--val, 0%));
    
    /* --- Polish --- */
    transition: background-image 0.4s ease-out;
    overflow: hidden;
}

/* Hover State */
.psc-kpi_bar:hover {
    filter: brightness(1.1);
}

/* ==========================================================
   POPUP ICON (GRADIENT ONLY)
   Class: popup_icon
   Usage: Surface styling only.
   ========================================================== */
.psc-popup_icon {
    /* SURFACE - UNIFIED RED GRADIENT */
    background: linear-gradient(135deg, #FC8181 0%, #E53E3E 100%);
    
    /* ICON COLOR */
    color: #FFFFFF;
    
    /* SHAPE - MATCHES BUTTON */
    border-radius: 8px;
    
    /* SHADOW - UNIFIED */
    box-shadow: 0 4px 6px rgba(229, 62, 62, 0.3);
}

/* ==========================================================
   POPUP TITLE (TYPOGRAPHY ONLY)
   Class: popup_title
   Usage: Text styling only.
   ========================================================== */
.psc-popup_title {
    /* TYPOGRAPHY */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1A202C;
}

/* ==========================================================
   POPUP MESSAGE (TYPOGRAPHY ONLY)
   Class: popup_message
   Usage: Text styling only.
   ========================================================== */
.psc-popup_message {
    /* TYPOGRAPHY */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #718096;
}

/* ==========================================================
   POPUP ACTION BUTTON (GRADIENT & INTERACTION)
   Class: popup_button
   Usage: Surface and interaction styling only.
   ========================================================== */
.psc-popup_button {
    /* TYPOGRAPHY */
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    
    /* SURFACE - UNIFIED RED GRADIENT */
    background: linear-gradient(135deg, #FC8181 0%, #E53E3E 100%);
    
    /* SHAPE - MATCHES ICON */
    border: none;
    border-radius: 8px;
    
    /* INTERACTION SETUP */
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(229, 62, 62, 0.3);
}

/* HOVER STATE */
.psc-popup_button:hover {
    background: linear-gradient(135deg, #FD9595 0%, #F56565 100%);
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(229, 62, 62, 0.4);
}

/* ACTIVE (CLICK) STATE */
.psc-popup_button:active {
    background: linear-gradient(135deg, #C53030 0%, #9B2C2C 100%);
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 4px rgba(229, 62, 62, 0.2);
}

.psc-elegant_date_picker {
    /* Base Appearance */
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    
    /* Typography */
    color: #475569 !important; /* Slate-600 */
    font-weight: 500;
    
    /* Shadow for depth */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    
    /* Smooth transitions */
    transition: all 0.2s ease-in-out;
}

/* Hover State: slightly darker border */
.psc-elegant_date_picker:hover {
    border-color: #94a3b8 !important; /* Slate-400 */
}

/* Focus State: Active Blue Ring */
.psc-elegant_date_picker:focus-within {
    border-color: #3b82f6 !important; /* Bright Blue */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; /* Blue Glow */
}

/* ==========================================================
   ELEGANT SINGLE FILE UPLOAD 
   ID or Class: .psc-elegant_single_upload
   ========================================================== */
.psc-elegant_single_upload {
    /* 1. LAYOUT & TYPOGRAPHY */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px 24px;
    font-weight: 600;
    color: #475569; /* Elegant Slate Text */
    
    /* 2. FLAT DESIGN BASE (from your elegant-root) */
    border: 2px dashed #cbd5e1; /* Crisp dashed border for upload intent */
    border-radius: 8px;         /* Matches your existing shapes */
    background-color: #f8fafc;  /* Subtle off-white */
    
    /* 3. INTERACTION SETUP */
    cursor: pointer;
    user-select: none;
    /* High-performance transition using your custom bezier curve */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* HOVER / DRAG-OVER STATE */
.psc-elegant_single_upload:hover {
    border-color: #64748b;     /* Darkens the border noticeably */
    background-color: #f1f5f9; /* Slight background shift */
    color: #334155;
    
    /* The 3D lift from your popup_button */
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(51, 65, 85, 0.15);
}

/* ACTIVE (CLICK / DROP) STATE */
.psc-elegant_single_upload:active {
    border-style: solid;       /* Switch to solid border on click/drop for feedback */
    border-color: #3b82f6;     /* Elegant action blue */
    background-color: #eff6ff; 
    color: #1d4ed8;
    
    /* The snappy press down from your popup_button */
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 4px rgba(51, 65, 85, 0.1);
}
/* BEGIN STYLE CLASSES */
@keyframes psc-andon_button-anim {
  0% {
    background-color: #FF0000;
  }
  100% {
    background-color: #FF00F0;
  }
}
.psc-andon_button {
  animation-name: psc-andon_button-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}