/* ========================================================================== 1. DESIGN TOKENS & SYSTEM VARIABLES (Glassy Minimalist) ========================================================================== */ @property --ark-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes ark-rotate { to { --ark-angle: 360deg; } } :root { /* Color Palette (Dark - default) */ --ark-angle: 0deg; --bg-main: #0a0e13; --bg-surface: rgba(18, 26, 35, 0.86); --bg-sidebar: rgba(10, 14, 19, 0.96); --select-option-bg: #18222d; --surface-solid: #121a23; --surface-raised: #18222d; --input-bg: rgba(10, 14, 19, 0.72); --hover-bg: rgba(77, 163, 255, 0.08); --table-header-bg: #1f2b38; --danger: #ff6b6b; --danger-bg: rgba(255, 107, 107, 0.1); --border-color: #27333f; --border-active: rgba(77, 163, 255, 0.5); --text-main: #eef4fa; --text-muted: #adbdcd; --primary: #4da3ff; --primary-hover: #6bb4ff; --accent-secondary: #8b5cf6; --accent-tertiary: #2dd4a7; --primary-bg-light: rgba(77, 163, 255, 0.1); --bg-required: rgba(255, 107, 107, 0.15); --text-required: #ff9a9a; --bg-recommended: rgba(45, 212, 167, 0.15); --text-recommended: #6ee7c0; --success: #2dd4a7; --font-stack: "Century Gothic", "Questrial", "Didact Gothic", "URW Gothic", "Avant Garde", "Futura", "Trebuchet MS", "Segoe UI", sans-serif; --font-size-base: 14px; --shadow-deep: 0 10px 25px -5px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 18px rgba(77, 163, 255, 0.18); } html { font-size: var(--font-size-base); } /* Light theme override - toggled via data-theme attribute on */ html[data-theme="light"] { --bg-main: #f3f6fa; --bg-surface: rgba(255, 255, 255, 0.75); --bg-sidebar: rgba(255, 255, 255, 0.97); --select-option-bg: #ffffff; --surface-solid: #ffffff; --surface-raised: #ffffff; --input-bg: rgba(248, 250, 252, 0.94); --hover-bg: rgba(77, 163, 255, 0.07); --table-header-bg: #edf2f7; --danger: #dc3545; --danger-bg: rgba(220, 53, 69, 0.07); --border-color: rgba(39, 51, 63, 0.14); --border-active: rgba(37, 99, 235, 0.42); --text-main: #14202b; --text-muted: #627488; --primary: #2563eb; --primary-hover: #3b82f6; --accent-secondary: #7c3aed; --accent-tertiary: #059669; --primary-bg-light: rgba(37, 99, 235, 0.08); --bg-required: rgba(225, 29, 72, 0.08); --text-required: #e11d48; --bg-recommended: rgba(5, 150, 105, 0.08); --text-recommended: #047857; --success: #059669; --shadow-deep: 0 10px 25px -5px rgba(15, 23, 42, 0.12); --shadow-glow: 0 0 18px rgba(37, 99, 235, 0.14); } /* ========================================================================== 2. GLOBAL RESET & BASE RULES ========================================================================== */ * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: var(--font-stack); background-color: var(--bg-main); color: var(--text-main); display: flex; height: 100vh; flex-direction: column; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; } /* ========================================================================== Custom Modern Dark Scrollbars ========================================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; transition: background-color 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.2); } * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; } /* ========================================================================== 3. TYPOGRAPHY HIERARCHY ========================================================================== */ h2 { font-size: 1.571rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; letter-spacing: 0.5px; } h3 { font-size: 1.143rem; font-weight: 700; color: var(--text-main); margin-bottom: 12px; } p { font-size: 0.929rem; color: var(--text-muted); } strong { color: var(--text-main); font-weight: 700; } /* ========================================================================== 4. LAYOUT CORE STRUCTURE ========================================================================== */ #header { min-height: 60px; height: auto; background: var(--bg-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 24px 10px 16px; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-deep); z-index: 100; } #header-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .header-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 auto; } #header h1 { font-size: 1.286rem; font-weight: 700; margin: 0; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #header button, #btn-manage-env { background-color: transparent; border: 1px solid var(--border-color); color: var(--primary); font-family: var(--font-stack); font-size: 0.857rem; font-weight: 700; padding: 6px 16px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; margin-left: 12px; } #header button:hover, #btn-manage-env:hover { background-color: var(--primary-bg-light); border-color: var(--primary); } #layout { display: flex; flex-direction: row; flex: 1; overflow: hidden; } /* Sidebar & Resizer */ #sidebar { width: 320px; min-width: 0; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-color); height: 100%; overflow-y: auto; overflow-x: hidden; position: relative; transition: width 0.3s ease; } #sidebar.collapsed { width: 0 !important; min-width: 0; border-right-color: transparent; } .sidebar-resizer { width: 6px; cursor: col-resize; position: absolute; top: 0; right: 0; bottom: 0; z-index: 50; background: transparent; transition: background-color 0.2s ease; } .sidebar-resizer:hover, .sidebar-resizer.dragging { background-color: var(--primary); } #content { flex: 1; padding: 35px; background: radial-gradient( circle at top left, rgba(56, 189, 248, 0.03), transparent 50% ); overflow-y: auto; } /* ========================================================================== 5. NAVIGATION & SIDEBAR COMPONENT STATES ========================================================================== */ .sidebar-section { border-bottom: 1px solid var(--border-color); padding-bottom: 8px; } .sidebar-section-title { padding: 15px 16px 8px 24px; font-size: 0.786rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; } .menu-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 10px 24px; cursor: pointer; font-size: 0.929rem; color: var(--text-muted); list-style: none; transition: all 0.2s ease; border-left: 3px solid transparent; } .menu-item:hover { background-color: rgba(255, 255, 255, 0.02); color: var(--text-main); transform: translateX(3px); /* Glassy nudge */ } .menu-item.active { background-color: var(--primary-bg-light); color: var(--primary); font-weight: 700; border-left: 3px solid var(--primary); } /* ========================================================================== 6. PANELS, FORMS & UPLOADS (The Glass Dropzones) ========================================================================== */ .form-box, .config-item-box, .preview-summary, .migration-panel, .progress-container-card { background: var(--bg-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 25px; border-radius: 12px; border: var(--border-color); box-shadow: var(--shadow-deep); margin-bottom: 25px; max-width: 800px; } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 0.857rem; font-weight: 700; margin-bottom: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .form-group input { width: 100%; padding: 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); font-family: var(--font-stack); font-size: 1rem; transition: all 0.2s ease; } .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); } /* File Upload Beautification */ input[type="file"] { font-family: var(--font-stack); font-size: 0.929rem; color: var(--text-muted); cursor: pointer; } input[type="file"]::file-selector-button { background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-family: var(--font-stack); font-size: 0.857rem; font-weight: 700; margin-right: 15px; transition: all 0.2s ease; } input[type="file"]::file-selector-button:hover { background-color: var(--primary-bg-light); color: var(--primary); border-color: var(--primary); } /* Live Data filter search (item pages that support GET-with-filter, e.g. Transaction Codes) -- the text input had no styling at all before this, so it rendered as a plain unstyled browser input sitting flush against the hint text above it and the Fetch button beside it. This themes it to match the rest of the dark UI and gives the row proper spacing/gap instead of the old inline margin-right hack. */ .live-data-filter-hint { color: var(--text-muted); font-size: 0.857rem; margin-top: 4px; } .live-data-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } #live-data-filter-input { background-color: rgba(0, 0, 0, 0.15); border: 1px solid var(--border-color); color: var(--text-main); font-family: var(--font-stack); font-size: 0.929rem; padding: 10px 14px; border-radius: 6px; min-width: 220px; } #live-data-filter-input::placeholder { color: var(--text-muted); } #live-data-filter-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); } .upload-slot { background: rgba(0, 0, 0, 0.15); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } .slot-name { font-weight: 700; font-size: 0.929rem; } /* ========================================================================== 7. BUTTONS & BADGES ========================================================================== */ .btn-primary { background-color: var(--primary); color: #000; font-weight: 700; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-family: var(--font-stack); font-size: 0.929rem; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4); background-color: #60c9f8; } .btn-primary:active { transform: translateY(1px); } .btn-secondary { background-color: transparent; color: var(--text-main); border: 1px solid var(--border-color); padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 0.929rem; transition: all 0.2s; } .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.05); border-color: var(--text-muted); } .badge { font-size: 10px; padding: 3px 8px; border-radius: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .badge-required { background: var(--bg-required); color: var(--text-required); border: 1px solid rgba(251, 113, 133, 0.3); } .badge-recommended { background: var(--bg-recommended); color: var(--text-recommended); border: 1px solid rgba(45, 212, 191, 0.3); } /* ========================================================================== 8. DATA TABLES & PREVIEWS ========================================================================== */ .preview-table-wrap { overflow-x: auto; margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: 8px; } table { width: 100%; border-collapse: collapse; font-size: 0.857rem; background: rgba(0, 0, 0, 0.2); } th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } th { background-color: rgba(15, 23, 42, 0.8); color: var(--primary); font-weight: 700; text-transform: uppercase; font-size: 0.786rem; letter-spacing: 0.5px; } tr:hover td { background-color: rgba(255, 255, 255, 0.03); } .environment-status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; color: var(--text-muted); background: var(--hover-bg); white-space: nowrap; } .environment-status.selected { color: #4ade80; background: rgba(34, 197, 94, 0.12); } .environment-page-section { width: 100%; margin-bottom: 24px; } .environment-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .environment-section-header h3 { margin: 0 0 4px; color: var(--text-main); } .environment-section-header p { margin: 0; color: var(--text-muted); } .environment-list-section, .environment-form-section { box-sizing: border-box; } #environment-list .table-wrapper { max-width: 100%; margin-bottom: 0; border-radius: 12px; } #environment-list table { min-width: 680px; } #environment-list th, #environment-list td { vertical-align: middle; } #environment-list th:last-child, #environment-list td:last-child { width: 1%; white-space: nowrap; } #environment-list .user-actions { display: flex; align-items: center; gap: 6px; } .environment-form-card { box-sizing: border-box; width: 100%; max-width: none; margin-bottom: 0; } .environment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .environment-form-grid .form-group, .environment-form-grid input { min-width: 0; box-sizing: border-box; } .environment-form-wide { grid-column: 1 / -1; } .environment-form-actions { display: flex; justify-content: flex-end; padding-top: 2px; } @media (max-width: 760px) { .environment-form-grid { grid-template-columns: 1fr; } .environment-form-wide { grid-column: auto; } .environment-section-header { align-items: flex-start; flex-direction: column; } } /* Live Data results table (fetched straight from OPERA Cloud, e.g. Rate Codes' ~25-column response with raw arrays/objects in several fields). Scoped to .live-data-table only -- NOT the generic table/td rule above, which is shared with the editable Accelerator/Main grids where cells need to wrap and stay fully visible for editing. Here rows are read-only and meant to be scanned quickly, so long values are clipped with an ellipsis; renderLiveDataResults() puts the untruncated value in each cell's title attribute so hovering still shows everything. */ .live-data-table td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sticky header for the main editable config grid -- only works because #main-grid-table-wrap below is given a bounded height + overflow-y:auto, which is what actually creates the scrolling context sticky positions against. Scoped to #main-grid-table so it doesn't affect the other, shorter .preview-table-wrap tables elsewhere in the app. */ #main-grid-table thead th { position: sticky; top: 0; z-index: 5; background-color: rgba(15, 23, 42, 0.95); } /* Thin secondary horizontal scrollbar rendered ABOVE the grid, synced via JS with the table's own horizontal scroll position. Lets you scroll sideways to reach far-right columns without first scrolling all the way down to find the real scrollbar at the bottom of a long table. */ .grid-top-scroll { overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: 6px; } .grid-top-scroll-inner { height: 1px; } /* ========================================================================== /* ========================================================================== 9. CUSTOM TOAST NOTIFICATIONS (Replaces Ugly Alerts) ========================================================================== */ #toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .custom-toast { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 20px; min-width: 250px; color: var(--text-main); font-size: 0.929rem; font-weight: 400; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 12px; transform: translateX(120%); opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .custom-toast.show { transform: translateX(0); opacity: 1; } .toast-error { border-left: 4px solid var(--text-required); } .toast-success { border-left: 4px solid var(--success); } .toast-icon { font-size: 1.143rem; } /* Table Action Buttons (Select, Edit, Delete) */ table button { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); color: var(--text-muted); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: var(--font-stack); font-size: 0.786rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s ease; } table button:hover { border-color: var(--primary); color: var(--primary); background-color: var(--primary-bg-light); transform: translateY(-1px); box-shadow: var(--shadow-glow); } #header-sidebar-toggle { background: transparent !important; border: none !important; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; min-width: 40px; /* Prevents the container from shrinking */ border-radius: 50% !important; transition: all 0.2s ease; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* Force the SVG to stay exactly 24x24 pixels */ #header-sidebar-toggle svg { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; } #header-sidebar-toggle:hover { color: var(--text-main); background-color: rgba(255, 255, 255, 0.05) !important; } /* The CSS-Driven Collapse Rule */ #sidebar { width: 320px; transition: width 0.3s ease; /* CSS handles the smooth sliding animation */ } #sidebar.collapsed { width: 0 !important; /* !important guarantees it overrides the drag-resizer */ min-width: 0 !important; border-right-color: transparent; overflow: hidden; } /* ========================================================================== 10. THEME / FONT-SIZE CONTROLS ========================================================================== */ #theme-toggle-btn { font-size: 16px !important; line-height: 1; padding: 6px 12px !important; } #font-size-select { background-color: transparent; border: 1px solid var(--border-color); color: var(--primary); font-family: var(--font-stack); font-size: 0.857rem; font-weight: 700; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-left: 12px; } #font-size-select:hover { border-color: var(--primary); } /* ========================================================================== 11. WATERMARK ========================================================================== */ #layout { position: relative; z-index: 1; } #app-watermark { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #app-watermark-inner { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; transform: rotate(-22deg); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 40px 0; } #app-watermark-inner span { display: inline-block; white-space: nowrap; font-size: 0.929rem; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); opacity: 0.06; padding: 0 24px; } /* ========================================================================== 12. FOOTER ========================================================================== */ #app-footer { height: 28px; flex-shrink: 0; background: var(--bg-surface); border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.786rem; color: var(--text-muted); letter-spacing: 0.3px; position: relative; z-index: 1; } /* ========================================================================== 13. MAIN-WINDOW SCROLL UP/DOWN BUTTONS ========================================================================== */ #content-scroll-buttons { position: fixed; right: 24px; bottom: 24px; z-index: 500; display: none; flex-direction: column; gap: 10px; } #content-scroll-buttons button { width: 40px; height: 40px; border-radius: 50%; border: none; background-color: var(--primary); color: #000; font-size: 1.143rem; cursor: pointer; box-shadow: var(--shadow-deep); transition: all 0.2s ease; } #content-scroll-buttons button:hover { transform: translateY(-2px); } /* ========================================================================== 17. EDITABLE CONFIG GRID (inline add/edit/delete + row menus) ========================================================================== */ .grid-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .scope-icon { margin-left: 4px; font-size: 0.85em; } .row-menu-wrap { position: relative; display: inline-block; } .row-menu-btn { background: transparent; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 2px 8px; border-radius: 4px; } .row-menu-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); } .row-menu-dropdown { display: none; position: absolute; right: 0; top: 100%; z-index: 500; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: var(--shadow-deep); min-width: 130px; overflow: hidden; } .row-menu-dropdown.open { display: block; } .row-menu-dropdown button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text-main); padding: 9px 14px; font-size: 0.857rem; cursor: pointer; } .row-menu-dropdown button:hover { background: rgba(255, 255, 255, 0.06); } .row-menu-dropdown button.danger { color: #f87171; } .editable-row input, .editable-row select { width: 100%; padding: 6px 8px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--primary); border-radius: 4px; color: var(--text-main); font-size: 0.929rem; box-sizing: border-box; } .row-save-btn, .row-cancel-btn { background: transparent; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; padding: 4px 8px; margin-right: 4px; font-size: 0.857rem; } .row-save-btn { color: #4ade80; border-color: #4ade80; } .row-cancel-btn { color: #f87171; border-color: #f87171; } #floating-add-row-btn { position: fixed; right: 24px; top: 45%; width: 46px; height: 46px; border-radius: 50%; background-color: var(--primary); color: #000; font-size: 22px; font-weight: 700; border: none; cursor: pointer; box-shadow: var(--shadow-deep); z-index: 900; display: none; align-items: center; justify-content: center; } #floating-add-row-btn:hover { transform: translateY(-2px); } /* ========================================================================== 14. SIDEBAR SEARCH - CLEAR BUTTON ========================================================================== */ #sidebar-search-wrap { position: relative; } #clear-search-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; display: none; padding: 2px 4px; } #clear-search-btn:hover { color: var(--text-main); } /* Sidebar scroll-to-bottom button (pairs with existing scroll-to-top) */ .sidebar-scroll-btn { position: sticky; width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary); color: #000; border: none; font-size: 1.286rem; cursor: pointer; display: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); z-index: 100; margin-left: calc(100% - 60px); transition: background-color 0.2s ease; } .sidebar-scroll-btn:hover { background-color: var(--primary-hover); } /* ========================================================================== 15. LOGIN SCREEN ========================================================================== */ #login-screen { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: var(--bg-main); } #login-card { background: var(--bg-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-color); border-radius: 12px; padding: 40px; width: 340px; box-shadow: var(--shadow-deep); text-align: center; } #login-card h2 { margin-bottom: 6px; } #login-card p { margin-bottom: 20px; } #login-card .form-group { text-align: left; } #login-error { color: var(--text-required); font-size: 0.857rem; margin-bottom: 12px; min-height: 16px; } #login-card .btn-primary { width: 100%; } /* ========================================================================== 16. ALERT / NOTICE BOXES ========================================================================== */ .alert { padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; } .alert h3 { margin-top: 0; } .alert-error { background: #7f1d1d; color: #fca5a5; border: 1px solid #f87171; } .alert-warning { background: #fff3cd; color: #664d03; border: 2px solid #e0a800; } /* ========================================================================== 17. VALIDATION RESULT CELLS ========================================================================== */ .result-cell { font-size: 0.786rem; font-weight: 700; white-space: normal !important; max-width: 280px; } .result-pending { color: var(--text-muted); } .result-ok { color: var(--success); } .result-error { color: var(--text-required); cursor: help; } /* ========================================================================== 18. COMPACT MODE (Small) — headings/tables/buttons shrink further toward the sidebar's own scale, not just the same % as body text ========================================================================== */ html[data-font-size="small"] h2 { font-size: 1.05rem; } html[data-font-size="small"] h3 { font-size: 0.95rem; } html[data-font-size="small"] p { font-size: 0.85rem; } html[data-font-size="small"] .btn-primary, html[data-font-size="small"] .btn-secondary { font-size: 0.85rem; padding: 8px 16px; } html[data-font-size="small"] table { font-size: 0.8rem; } html[data-font-size="small"] th { font-size: 0.75rem; } html[data-font-size="small"] .badge { font-size: 0.65rem; padding: 2px 6px; } html[data-font-size="small"] input[type="file"]::file-selector-button { font-size: 0.8rem; padding: 6px 12px; } html[data-font-size="small"] .form-group input { padding: 8px; } html[data-font-size="small"] .form-group label { font-size: 0.75rem; } html[data-font-size="small"] #header button, html[data-font-size="small"] #btn-manage-env { padding: 4px 10px; } html[data-font-size="small"] #font-size-select { font-size: 0.75rem; padding: 4px 8px; } #forgot-password-screen, #reset-password-screen { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: var(--bg-main); } #forgot-password-card, #reset-password-card { background: var(--bg-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-color); border-radius: 12px; padding: 40px; width: 340px; box-shadow: var(--shadow-deep); text-align: center; } #forgot-password-card h2, #reset-password-card h2 { margin-bottom: 6px; } #forgot-password-card p, #reset-password-card p { margin-bottom: 20px; } #forgot-password-card .form-group, #reset-password-card .form-group { text-align: left; } #forgot-password-card .btn-primary, #reset-password-card .btn-primary { width: 100%; } #forgot-password-message, #reset-password-message { font-size: 0.857rem; margin-bottom: 12px; min-height: 16px; } .auth-link { margin-top: 14px; font-size: 0.857rem; } .auth-link a { color: var(--primary); cursor: pointer; text-decoration: none; } .auth-link a:hover { text-decoration: underline; } #manage-users-modal { box-sizing: border-box; padding: clamp(8px, 2vw, 24px); overflow: hidden; } #manage-users-modal .user-admin-dialog { width: min(1080px, 94vw); max-width: 100%; max-height: calc(100dvh - clamp(16px, 4vw, 48px)); display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 16px; border-color: rgba(56, 189, 248, 0.2); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), var(--shadow-glow); } #manage-users-modal .user-admin-header, #manage-users-modal .user-actions, #edit-env-access-modal .user-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #manage-users-modal .user-admin-header { flex: 0 0 auto; z-index: 4; padding: 22px 26px; background: color-mix(in srgb, var(--bg-main) 88%, transparent); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(18px); } #manage-users-modal .user-admin-header-actions { display: flex; align-items: center; gap: 8px; } #manage-users-modal .user-admin-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 24px 26px 28px; } #manage-users-modal .user-admin-eyebrow { color: var(--primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3px; } #manage-users-modal .user-admin-subtitle, #manage-users-modal .user-create-copy { color: var(--text-muted); } #manage-users-modal .user-admin-subtitle { margin-top: 4px; } #manage-users-modal .user-create-section { margin-top: 20px; padding: 20px; border: 1px solid var(--border-color); border-radius: 12px; background: linear-gradient(135deg, var(--primary-bg-light), transparent 60%); } #manage-users-modal .user-create-section h3 { margin-bottom: 4px; } #manage-users-modal .user-create-copy { margin-bottom: 16px; } #manage-users-modal .user-admin-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--border-color); border-radius: 8px; margin-top: 20px; } #manage-users-modal .user-admin-table-wrap table { min-width: 820px; } #manage-users-modal th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--bg-main) 72%, transparent); } #manage-users-modal tbody tr { transition: background-color 0.18s ease; } #manage-users-modal tbody tr:hover { background: var(--primary-bg-light); } #manage-users-modal .user-status { display: inline-block; padding: 3px 8px; border-radius: 999px; background: rgba(34, 197, 94, 0.12); color: #4ade80; white-space: nowrap; } #manage-users-modal .user-status.disabled { background: rgba(248, 113, 113, 0.12); color: #f87171; } #manage-users-modal .user-role-select { min-width: 120px; padding: 6px 8px; color: var(--text-main); background-color: var(--select-option-bg); border: 1px solid var(--border-color); border-radius: 6px; } #manage-users-modal .user-actions { flex-wrap: wrap; } #manage-users-modal td:last-child { min-width: 190px; } #manage-users-modal .user-form-error, #edit-env-access-modal .user-form-error { min-height: 18px; margin-bottom: 8px; color: var(--text-required); font-size: 0.78rem; } .user-env-picker { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; } .user-env-option { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; } .user-env-option input:disabled { opacity: 0.4; } #manage-users-modal .user-form-hint { color: var(--text-muted); font-size: 0.78rem; } #manage-users-modal .user-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } @media (max-width: 720px) { #manage-users-modal { padding: 8px; } #manage-users-modal .user-admin-dialog { max-height: calc(100dvh - 16px); border-radius: 12px; } #manage-users-modal .user-create-grid { grid-template-columns: 1fr; } #manage-users-modal .user-admin-header { align-items: flex-start; } #manage-users-modal .user-admin-header { padding: 16px 18px; } #manage-users-modal .user-admin-header-actions { align-items: stretch; } #manage-users-modal .user-admin-body { padding: 18px; } #manage-users-modal .user-create-section { padding: 16px; } } @media (max-height: 700px) { #manage-users-modal .user-admin-header { padding-top: 14px; padding-bottom: 14px; } #manage-users-modal .user-admin-body { padding-top: 16px; padding-bottom: 18px; } } .form-group select { width: 100%; padding: 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); font-family: var(--font-stack); font-size: 1rem; cursor: pointer; transition: all 0.2s ease; color-scheme: dark; } .form-group select option, #manage-users-modal .user-role-select option { color: var(--text-main); background-color: var(--select-option-bg); } html[data-theme="light"] .form-group select, html[data-theme="light"] #manage-users-modal .user-role-select { color-scheme: light; } .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); } /* Accelerator grid: per-row action menu + dirty/deleted row states */ .row-actions-cell { position: relative; text-align: center; } .row-actions-btn { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 4px 10px; border-radius: 4px; } .row-actions-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); } .row-actions-menu { display: none; position: absolute; right: 0; top: 100%; z-index: 50; background: var(--bg-sidebar); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); min-width: 170px; overflow: hidden; } /* Main grid's Actions column is the FIRST column (Accelerator's is last), so the default right:0 anchor pushes the 170px-wide menu off the left edge of the scrollable table wrapper, where it gets clipped -- this flips the anchor to the cell's left edge instead, so it opens rightward into the table (visible) rather than leftward off it (hidden). */ .row-actions-menu.anchor-left { left: 0; right: auto; } /* Gap under the Upload Excel Template box, above whatever renders in #preview-section (the "+ Add Row" start-fresh prompt, the full editable grid, or nothing) -- without this the file input and Add Row button sit flush against each other with no breathing room. Applied as a CSS class (not an inline style) so it survives independent of how #preview-section's own innerHTML gets rebuilt on every render. */ .preview-section-spacer { margin-top: 20px; } .row-actions-menu.open { display: block; } .row-actions-menu.flip-up { top: auto; bottom: 100%; } .row-actions-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-main); padding: 10px 14px; font-size: 0.857rem; cursor: pointer; } .row-actions-menu button:hover { background: var(--primary-bg-light); color: var(--primary); } .row-actions-menu button:disabled { opacity: 0.35; cursor: not-allowed; } .grid-row-dirty td { background: rgba(250, 204, 21, 0.08); } .grid-row-deleted td { opacity: 0.45; text-decoration: line-through; } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* Accelerator grid: Room Types multi-select picker (Rate Codes / Pricing Schedules - Standard) */ .room-types-cell { position: relative; cursor: pointer; } .room-types-cell:hover { background: rgba(255, 255, 255, 0.05); } .room-type-picker-menu { display: none; position: absolute; left: 0; top: 100%; z-index: 60; background: var(--bg-sidebar); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); min-width: 220px; max-height: 240px; overflow-y: auto; padding: 6px; } .room-type-picker-menu.open { display: block; } .room-type-picker-menu label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 0.857rem; color: var(--text-main); cursor: pointer; border-radius: 4px; white-space: nowrap; } .room-type-picker-menu label:hover { background: var(--primary-bg-light); } .room-type-picker-menu .empty-note { padding: 8px; font-size: 0.8rem; color: var(--text-muted); white-space: normal; } /* Locks the Accelerator grid (row menus, cell editing, room-type picker) while an OPERA import job is running, so clicks can't kill the in-flight job. */ table.accel-grid-locked { opacity: 0.55; pointer-events: none; cursor: not-allowed; user-select: none; } /* ========================================================================== 19. APPLICATION-WIDE VISUAL REFINEMENT Shared finishing layer for the shell, navigation, content, forms, tables, feedback states and authentication. Specialized grid rules above remain intact; these rules provide a consistent baseline across every page. ========================================================================== */ html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { background: radial-gradient(circle at 12% -8%, rgba(56, 189, 248, 0.12), transparent 30rem), radial-gradient(circle at 92% 110%, rgba(45, 212, 191, 0.07), transparent 34rem), var(--bg-main); } ::selection { color: var(--text-main); background: rgba(56, 189, 248, 0.3); } :where(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Application header */ #header { min-height: 68px; padding: 10px clamp(14px, 2vw, 28px); background: color-mix(in srgb, var(--surface-solid) 88%, transparent); border-bottom-color: color-mix(in srgb, var(--primary) 16%, var(--border-color)); box-shadow: 0 8px 30px rgba(2, 6, 23, 0.18); } #header h1 { font-weight: 700; letter-spacing: -0.015em; } #header-right { gap: 8px; } #header button, #btn-manage-env, #font-size-select { min-height: 36px; margin-left: 0; border-radius: 8px; } #header button, #btn-manage-env { padding: 7px 13px; } #header button:active, #btn-manage-env:active { transform: translateY(1px); } #env-label, #current-user-label { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--hover-bg); color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; } #env-label::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 14%, transparent); } #btn-logout { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 38%, transparent) !important; background: var(--danger-bg) !important; } #btn-logout:hover { color: #fff !important; border-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 76%, #7f1d1d) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--danger) 22%, transparent); } #font-size-select { background-color: var(--input-bg); color: var(--text-main); } #font-size-select option { color: var(--text-main); background: var(--select-option-bg); } #theme-toggle-btn { width: 38px; padding-inline: 0 !important; } /* Sidebar and navigation */ #sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, transparent), transparent 180px), var(--bg-sidebar); box-shadow: 8px 0 28px rgba(2, 6, 23, 0.1); } .sidebar-section { padding: 8px 10px 12px; } .sidebar-section-title { padding: 12px 12px 8px; color: color-mix(in srgb, var(--text-muted) 88%, var(--text-main)); letter-spacing: 0.11em; } .menu-item { margin: 2px 0; padding: 9px 12px; border-left: 0; border-radius: 7px; } .menu-item:hover { background: var(--hover-bg); transform: translateX(2px); } .menu-item.active { border-left: 0; background: linear-gradient(90deg, var(--primary-bg-light), transparent); box-shadow: inset 3px 0 0 var(--primary); } #sidebar-search-wrap { margin: 12px 12px 8px; } #sidebar-search-wrap input { width: 100%; padding: 10px 34px 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--input-bg); color: var(--text-main); font: inherit; } /* Main content and page hierarchy */ #content { padding: clamp(20px, 3vw, 40px); background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.055), transparent 42%), transparent; scroll-behavior: smooth; } .page-header { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); } .page-header h2 { margin-bottom: 5px; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -0.02em; } /* Surfaces and panels */ .form-box, .config-item-box, .preview-summary, .migration-panel, .progress-container-card { border: 1px solid var(--border-color); background: color-mix(in srgb, var(--surface-raised) 82%, transparent); box-shadow: 0 14px 38px rgba(2, 6, 23, 0.17); } .form-box:hover, .config-item-box:hover, .migration-panel:hover { border-color: color-mix(in srgb, var(--primary) 24%, var(--border-color)); } .upload-slot { gap: 16px; background: var(--input-bg); transition: border-color 0.2s ease, background-color 0.2s ease; } .upload-slot:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color)); background: var(--primary-bg-light); } /* Unified fields */ .form-group label { color: color-mix(in srgb, var(--text-muted) 82%, var(--text-main)); } .form-group input, .form-group select, .editable-row input, .editable-row select, #live-data-filter-input, textarea { min-height: 42px; border-color: var(--border-color); border-radius: 8px; background: var(--input-bg); color: var(--text-main); } .form-group input:hover, .form-group select:hover, #live-data-filter-input:hover, textarea:hover { border-color: color-mix(in srgb, var(--text-muted) 50%, var(--border-color)); } .form-group input:focus, .form-group select:focus, #live-data-filter-input:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg-light), var(--shadow-glow); } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--text-muted) 72%, transparent); } /* Buttons */ .btn-primary, .btn-secondary, table button, input[type="file"]::file-selector-button { border-radius: 8px; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #062033; box-shadow: 0 7px 18px rgba(56, 189, 248, 0.18); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(56, 189, 248, 0.28); } .btn-secondary { background: var(--hover-bg); } .btn-secondary:hover { background: var(--primary-bg-light); border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color)); color: var(--primary); } button:disabled, select:disabled, input:disabled { cursor: not-allowed !important; opacity: 0.48; } /* Tables and data-heavy screens */ .preview-table-wrap, #main-grid-table-wrap { border-radius: 10px; border: 1px solid var(--border-color); background: color-mix(in srgb, var(--surface-solid) 72%, transparent); box-shadow: 0 10px 26px rgba(2, 6, 23, 0.1); } table { background: transparent; } th, td { border-bottom-color: var(--border-color); } th, #main-grid-table thead th { background: var(--table-header-bg); color: color-mix(in srgb, var(--primary) 82%, var(--text-main)); } tbody tr { transition: background-color 0.16s ease; } tr:hover td { background: var(--hover-bg); } table button { background: var(--hover-bg); } /* Feedback and utility elements */ .alert { border-radius: 10px; box-shadow: 0 8px 20px rgba(2, 6, 23, 0.12); } .alert-error { color: #fecdd3; border-color: rgba(251, 113, 133, 0.55); background: rgba(127, 29, 29, 0.72); } .alert-warning { color: #fde68a; border: 1px solid rgba(245, 158, 11, 0.5); background: rgba(120, 53, 15, 0.62); } html[data-theme="light"] .alert-error { color: #9f1239; background: #fff1f2; } html[data-theme="light"] .alert-warning { color: #78350f; background: #fffbeb; } .custom-toast { border-radius: 10px; background: color-mix(in srgb, var(--surface-solid) 96%, transparent); box-shadow: 0 16px 40px rgba(2, 6, 23, 0.3); } #content-scroll-buttons button, .sidebar-scroll-btn, #floating-add-row-btn { box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28); } /* Authentication screens */ #login-screen, #forgot-password-screen, #reset-password-screen { padding: 20px; background: radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.15), transparent 28rem), radial-gradient(circle at 82% 90%, rgba(45, 212, 191, 0.09), transparent 30rem), var(--bg-main); } #login-card, #forgot-password-card, #reset-password-card { width: min(390px, 100%); border-radius: 16px; border-color: color-mix(in srgb, var(--primary) 20%, var(--border-color)); background: color-mix(in srgb, var(--surface-raised) 86%, transparent); box-shadow: 0 24px 70px rgba(2, 6, 23, 0.38); } .auth-link a { font-weight: 700; } /* Footer and responsive shell */ #app-footer { min-height: 30px; height: auto; padding: 5px 16px; background: color-mix(in srgb, var(--surface-solid) 90%, transparent); } @media (max-width: 1050px) { #header { align-items: flex-start; } #header-right { width: 100%; justify-content: flex-start; padding-left: 56px; } #btn-logout { margin-left: auto; } } @media (max-width: 720px) { #header { padding: 9px 12px; } #header-right { padding-left: 0; } #header h1 { font-size: 1rem; } #env-label, #current-user-label { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; } #content { padding: 16px; } .form-box, .config-item-box, .preview-summary, .migration-panel, .progress-container-card { padding: 18px; border-radius: 10px; } .upload-slot { align-items: flex-start; flex-direction: column; } #app-footer { font-size: 0.68rem; text-align: center; } } /* ========================================================================== 20. ARK WORKBOOK STUDIO VISUAL LANGUAGE Shared charcoal palette, restrained blue-violet-mint accents and animated rings on high-value surfaces only. Dense grids and navigation stay static to avoid unnecessary repainting on data-heavy screens. ========================================================================== */ body { letter-spacing: 0.01em; background: radial-gradient(900px 500px at 15% -10%, rgba(77, 163, 255, 0.1), transparent 60%), radial-gradient(700px 500px at 95% 0%, rgba(139, 92, 246, 0.09), transparent 60%), var(--bg-main); background-attachment: fixed; } html[data-theme="light"] body { background: radial-gradient(900px 500px at 15% -10%, rgba(37, 99, 235, 0.09), transparent 60%), radial-gradient(700px 500px at 95% 0%, rgba(124, 58, 237, 0.06), transparent 60%), var(--bg-main); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { border: 2px solid var(--bg-main); border-radius: 10px; background: var(--surface-raised); } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--surface-raised) 72%, var(--primary)); } #header { background: color-mix(in srgb, var(--bg-main) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--border-color); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); } #header h1 { background: linear-gradient(90deg, var(--primary), var(--accent-secondary), var(--accent-tertiary)); -webkit-background-clip: text; background-clip: text; color: transparent; } #header button:not(#btn-logout):not(#header-sidebar-toggle), #font-size-select { border: 1px solid transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, conic-gradient(from var(--ark-angle), var(--primary), var(--accent-secondary), var(--accent-tertiary), var(--primary)) border-box; animation: ark-rotate 16s linear infinite; } #header button:not(#btn-logout):not(#header-sidebar-toggle):hover, #font-size-select:hover { color: var(--text-main); background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, conic-gradient(from var(--ark-angle), var(--primary), var(--accent-secondary), var(--accent-tertiary), var(--primary)) border-box; animation-duration: 4s; box-shadow: 0 6px 18px rgba(77, 163, 255, 0.16); } #env-label::before { background: var(--accent-tertiary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-tertiary) 16%, transparent); } #sidebar { background: linear-gradient(180deg, rgba(77, 163, 255, 0.045), transparent 190px), var(--bg-sidebar); box-shadow: 8px 0 28px rgba(0, 0, 0, 0.16); } .menu-item:hover { background: rgba(77, 163, 255, 0.08); } .menu-item.active { color: var(--text-main); background: rgba(77, 163, 255, 0.14); box-shadow: inset 3px 0 0 var(--primary); } .menu-item.active .badge { filter: saturate(1.08); } #content { background: transparent; } .page-header h2 { letter-spacing: 0.01em; } .page-header::after { content: ""; display: block; width: 72px; height: 2px; margin-top: 13px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent-secondary), var(--accent-tertiary)); } .form-box, .config-item-box, .preview-summary, .migration-panel, .progress-container-card, #login-card, #forgot-password-card, #reset-password-card, #manage-users-modal .user-admin-dialog { border: 1px solid transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, conic-gradient(from var(--ark-angle), var(--primary), var(--accent-secondary), var(--accent-tertiary), var(--primary)) border-box; animation: ark-rotate 22s linear infinite; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); } .environment-list-section { padding: 18px 20px 20px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-solid); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } .form-group input, .form-group select, .editable-row input, .editable-row select, #live-data-filter-input, textarea { border-color: var(--border-color); background: var(--input-bg); } .form-group input:focus, .form-group select:focus, .editable-row input:focus, .editable-row select:focus, #live-data-filter-input:focus, textarea:focus { border-color: transparent; background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, conic-gradient(from var(--ark-angle), var(--primary), var(--accent-secondary), var(--accent-tertiary), var(--primary)) border-box; animation: ark-rotate 5s linear infinite; box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16); } select option { color: var(--text-main); background: var(--select-option-bg); } select option:checked { color: #05121f; background: var(--primary); } .btn-primary { border: 1px solid transparent; color: #05121f; background: linear-gradient(135deg, var(--primary), var(--accent-tertiary)) padding-box, conic-gradient(from var(--ark-angle), #fff, var(--accent-secondary), var(--accent-tertiary), #fff) border-box; animation: ark-rotate 10s linear infinite; box-shadow: 0 7px 18px rgba(77, 163, 255, 0.18); } .btn-primary:hover { color: #05121f; background: linear-gradient(135deg, var(--primary-hover), #4ee0b8) padding-box, conic-gradient(from var(--ark-angle), #fff, var(--accent-secondary), var(--accent-tertiary), #fff) border-box; animation-duration: 3s; box-shadow: 0 10px 24px rgba(77, 163, 255, 0.24); } .btn-secondary { border: 1px solid transparent; background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, linear-gradient(115deg, var(--primary), var(--accent-secondary), var(--accent-tertiary)) border-box; } .btn-secondary:hover { color: var(--text-main); background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, linear-gradient(115deg, var(--primary), var(--accent-secondary), var(--accent-tertiary)) border-box; } .badge-required { border-color: rgba(255, 107, 107, 0.35); } .badge-recommended { border-color: rgba(45, 212, 167, 0.35); } .environment-status.selected, #manage-users-modal .user-status { color: var(--accent-tertiary); background: rgba(45, 212, 167, 0.11); } .preview-table-wrap, .table-wrapper, #main-grid-table-wrap, #manage-users-modal .user-admin-table-wrap { border-color: var(--border-color); background: var(--surface-solid); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); } th, #main-grid-table thead th { color: var(--text-muted); background: var(--table-header-bg); font-size: 0.76rem; letter-spacing: 0.08em; } tbody tr:hover td { background: rgba(77, 163, 255, 0.06); } table button { border-color: var(--border-color); color: var(--text-muted); background: var(--surface-raised); } table button:hover { border-color: var(--primary); color: var(--text-main); background: rgba(77, 163, 255, 0.1); } #login-screen, #forgot-password-screen, #reset-password-screen { background: radial-gradient(800px 480px at 18% 0%, rgba(77, 163, 255, 0.14), transparent 60%), radial-gradient(700px 500px at 90% 100%, rgba(139, 92, 246, 0.11), transparent 60%), var(--bg-main); } #app-footer { border-top: 1px solid var(--border-color); background: color-mix(in srgb, var(--bg-main) 84%, transparent); } /* Use only the real Regular and Bold faces supplied by Century Gothic and its fallbacks. Intermediate 500/600 requests render inconsistently across Windows text, native controls and dynamically generated table content. */ body, input, select, textarea, option, td, p, #env-label, #current-user-label, .menu-item, .custom-toast { font-weight: 400; } h1, h2, h3, h4, h5, h6, strong, b, th, label, button, #header button, .btn-primary, .btn-secondary, .sidebar-section-title, .menu-item.active, .slot-name, .badge, .result-cell, .auth-link a { font-weight: 700; } .header-left { align-items: center; gap: 12px; } #header-sidebar-toggle { order: 0; flex: 0 0 36px; width: 36px !important; height: 36px !important; min-width: 36px; align-self: center; } #header-sidebar-toggle svg { width: 22px !important; height: 22px !important; } #header h1 { order: 1; display: flex; align-items: center; gap: 9px; min-width: 0; } #header h1 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-brand-icon { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--primary); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }