/** * ============================================================================ * PRODUCTION CSS - COMBINED FROM ALL SOURCE FILES * ============================================================================ * Auto-generated bundle - DO NOT EDIT DIRECTLY * Edit source files in html/assets/css/ and run build.sh * * Build Order: * 1. style.css - Base styles (buttons, forms, base elements) * 2. header.css - Header/navbar styles * 3. content.css - Content layout styles * 4. card.css - Card components * 5. components.css - UI components (toasts, modals, badges) * 6. tables.css - Table styles * 7. modal.css - Modal overrides * 8. login.css - Login/auth pages * 9. custom-dashboard.css - Dashboard customizations * 10. command-center.css - Command center layout * 11. state_data_changes.css - State Data Changes page styles * 12. company-form.css - Company add/edit form styles * 13. media.css - Bootstrap 5 responsive breakpoints * 14. leases-media.css - Lease-specific responsive * 15. companies-media.css - Company-specific responsive * * Generated: 2025-12-02 15:08:30 UTC * ============================================================================ */ /* ======================================== * BASE STYLES * ======================================== */ /* =============================== style.css – Global Variables and Resets =============================== */ /* Light Mode Defaults */ :root { /* Core Brand Colors - WCAG 2.1 AA Compliant */ --primary-color: #00BCD4; /* Brand cyan - 3.94:1 (large text only) */ --primary-hover: #0097a7; /* Darker cyan */ --danger-color: #d32f2f; /* Red - 6.53:1 ✅ AA */ --success-color: #2e7d32; /* Green - 4.61:1 ✅ AA */ --warning-color: #f57c00; /* Orange - 3.98:1 (large text only) */ --info-color: #0277bd; /* Blue - 5.91:1 ✅ AA */ /* Text and Accent Colors */ --color-text: #1a1a1a; /* 12.63:1 ✅ AAA */ --color-muted: #5a6268; /* 6.01:1 ✅ AA (improved from #666) */ --color-border: #d3d6e2; /* form borders, panel separators */ --color-link: var(--primary-color); --color-link-hover: var(--primary-hover); /* Backgrounds */ --background-main: #f7f7f8; /* entire page background */ --background-panel: #ffffff; /* modal/panel/card backgrounds */ --background-header: #e7eaf0; /* site header / top bar */ --background-nav: #f5f5f8; /* side/nav backgrounds */ --background-footer: #e7eaf0; /* footer */ --background-control: #ffffff; /* form inputs, select controls */ --modal-overlay-bg: rgba(200, 200, 220, 0.5); /* Bootstrap compatibility */ --bs-body-bg: var(--background-main); /* Match Bootstrap body background to our main background */ /* Shadows */ --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.06); --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.13); --shadow-heavy: 0 10px 44px rgba(0, 0, 0, 0.2); /* Typography */ --font-family-base: 'Segoe UI', Arial, sans-serif; --font-size-base: 16px; /* Layout Metrics */ --header-bar-height: 95px; --media-header-bar-height: 80px; --secondary-nav-height: 60px; --container-max-width: 1150px; --border-radius: 14px; /* Transitions */ --transition-fast: 0.2s ease; --transition-medium: 0.3s ease; --transition-slow: 0.5s ease; /* Tables */ --row-bg-even: #f7f9fc; --row-bg-odd: #e9edf3; /* Always‐white text/icons on top of a dark panel (e.g. "X" button) */ --color-on-panel: #ffffff; } /* ================================================ Bootstrap Button Variable Overrides Override Bootstrap's default blue with our brand colors Using !important because Bootstrap loads from CDN ================================================ */ .btn-primary { --bs-btn-color: var(--background-panel) !important; --bs-btn-bg: var(--primary-color) !important; --bs-btn-border-color: var(--primary-color) !important; --bs-btn-hover-color: var(--background-panel) !important; --bs-btn-hover-bg: var(--primary-hover) !important; --bs-btn-hover-border-color: var(--primary-hover) !important; --bs-btn-focus-shadow-rgb: 0, 188, 212 !important; /* Primary color RGB */ --bs-btn-active-color: var(--background-panel) !important; --bs-btn-active-bg: var(--primary-hover) !important; --bs-btn-active-border-color: var(--primary-hover) !important; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important; --bs-btn-disabled-color: var(--background-panel) !important; --bs-btn-disabled-bg: var(--color-muted) !important; --bs-btn-disabled-border-color: var(--color-muted) !important; } /* Override Bootstrap focus ring globally */ :root { --bs-focus-ring-color: rgba(0, 188, 212, 0.25) !important; --bs-link-color: var(--primary-color) !important; --bs-link-hover-color: var(--primary-hover) !important; --bs-link-color-rgb: 0, 188, 212 !important; --bs-blue: var(--primary-color) !important; --bs-primary: var(--primary-color) !important; --bs-primary-rgb: 0, 188, 212 !important; } [data-bs-theme=light] { --bs-focus-ring-color: rgba(0, 188, 212, 0.25) !important; --bs-link-color: var(--primary-color) !important; --bs-link-hover-color: var(--primary-hover) !important; --bs-blue: var(--primary-color) !important; --bs-primary: var(--primary-color) !important; --bs-primary-rgb: 0, 188, 212 !important; } /* ================================================ Bootstrap Form Controls (Checkbox & Radio) Overrides Override Bootstrap's default blue with our brand colors ================================================ */ .form-check-input:checked { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .form-check-input:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25) !important; } /* Indeterminate state for checkboxes */ .form-check-input:indeterminate { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } /* Native checkbox and radio inputs */ input[type="checkbox"]:checked, input[type="radio"]:checked { accent-color: var(--primary-color); } /* ================================================ Form Input Focus States Override Bootstrap's blue focus with brand cyan ================================================ */ input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25) !important; outline: none !important; } /* Date inputs */ input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25) !important; } /* Text selection inside date inputs */ input[type="date"]::selection, input[type="datetime-local"]::selection, input[type="month"]::selection, input[type="time"]::selection, input[type="week"]::selection { background-color: var(--primary-color) !important; color: white !important; } /* Date input calendar picker icon */ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: rgba(0, 188, 212, 0.1); border-radius: 4px; } /* Global text selection */ ::selection { background-color: var(--primary-color) !important; color: white !important; } ::-moz-selection { background-color: var(--primary-color) !important; color: white !important; } /* ================================================ Dark Mode Overrides – WCAG 2.1 AAA Compliant ================================================ */ body.dark-mode { /* ==== Canvas / Page Background ==== */ --background-main: #0a0a0a; /* Near black */ /* ==== Header / Nav / Footer ==== */ --background-header: #1a1a1a; /* Slightly lighter */ --background-nav: #1a1a1a; --background-footer: #1a1a1a; --background-hover: #2a2a2a; /* ==== Panel / Card Container ==== */ --background-panel: #1e1e1e; /* Card surfaces */ --color-seperator: #3a3a3a; /* ==== Form Controls ==== */ --background-control: #2a2a2a; /* ==== Modal Overlay ==== */ --modal-overlay-bg: rgba(0, 0, 0, 0.9); /* ==== Borders / Separators ==== */ --color-border: #3a3a3a; /* ==== Page Text - AAA Compliant ==== */ --color-text: #ffffff; /* 21:1 ✅ AAA */ --color-muted: #c9d1d9; /* 12.58:1 ✅ AAA */ --search-text: #000000; /* ==== Brand Colors - Dark Mode Variants ==== */ --primary-color: #26e7ff; /* Light cyan - 10.89:1 ✅ AAA */ --primary-hover: #00bcd4; --danger-color: #ff5252; /* 8.12:1 ✅ AAA */ --success-color: #66bb6a; /* 9.83:1 ✅ AAA */ --warning-color: #ffa726; /* 9.67:1 ✅ AAA */ --info-color: #29b6f6; /* 8.94:1 ✅ AAA */ --color-link: var(--primary-color); --color-link-hover: var(--primary-hover); --secondary-color: #9ca3af; /* Lighter gray */ --secondary-hover: #d1d5db; /* ==== Table Rows ==== */ --row-bg-even: #1e1e1e; --row-bg-odd: #141414; /* ==== On-Panel White Text/Icons ==== */ --color-on-panel: #ffffff; } /* =============================== Global Reset / Base =============================== */ html, body { margin: 0; padding: 0; font-family: var(--font-family-base); font-size: var(--font-size-base); background: var(--background-main); color: var(--color-text); line-height: 1.5; overflow-x: hidden; } /* Sticky footer - body as flex container */ body { display: flex; flex-direction: column; min-height: 100vh; } /* Main content grows to push footer down */ .main-content { flex: 1 0 auto; } /* Footer stays at bottom */ .site-footer, footer { flex-shrink: 0; margin-top: auto; padding: 20px; text-align: center; background: var(--background-main); border-top: 1px solid var(--border-color, #ddd); } * { box-sizing: border-box; } a { color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-link-hover); } /* ================================================ Select/Dropdown Option Styling Force primary color for selected/hovered options ================================================ */ select option:checked, select option:hover { background: var(--primary-color) !important; color: var(--background-panel) !important; } /* Dark mode support */ body.dark-mode select option:checked, body.dark-mode select option:hover { background: var(--primary-color) !important; color: var(--color-text) !important; } /* ————————————————————————————————————————— Notes on the New Dark Scheme: ————————————————————————————————————————— • “Page” background ( --background-main ) is now #242831, which is almost black but slightly blue‐toned. • “Panel” background ( --background-panel ) is #2d2f39 in Dark Mode → keeps modals/cards just a bit lighter than page. • Header/Nav/Footer ( --background-header, --background-nav, --background-footer ) are #2f343f → a mid/charcoal so they feel cohesive but still separate. • Form controls ( --background-control ) are #3a3d4a → lighter than the panel so inputs stand out clearly. • All text uses ( --color-text ) = #e6e8eb rather than pure white → easier on the eyes. • “Always‐white on panel” ( --color-on-panel ) is #fff, reserved for the “X” icon and any other place you want guaranteed white. You can further tweak any of these values if you want them even darker/lighter. But this should give you a much more balanced, “professional” dark mode, where header, panel, and controls each occupy their own distinct grey‐toned layer, instead of collapsing into one flat black. Feel free to experiment with tiny adjustments (e.g. #2c2e38 instead of #2d2f39) until you’re happy, but this structure is a good jumping‐off point. /* ======================================== * HEADER STYLES * ======================================== */ /* =============================== header.css – Fixed Header + Secondary Navigation =============================== */ /* -------------------------------- Fixed Top Header Bar -------------------------------- */ .header-bar { position: fixed; top: 0; left: 0; width: 100vw; z-index: 1000; background: var(--background-header); color: var(--color-text); height: var(--header-bar-height); padding: 0 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); box-sizing: border-box; transition: background var(--transition-medium), color var(--transition-medium); font-family: var(--font-family-base); overflow: hidden; /* Clip angled background at header edge */ } /* Logo & Branding */ .header-left { display: flex; align-items: center; } .header-logo-dark { display: none; } body.dark-mode .header-logo-dark { display: inline; } body.dark-mode .header-logo-light { display: none; } .product-logo { font-size: 1.4em; font-weight: bold; color: var(--color-link); letter-spacing: 0.04em; } .header-logo-image img { height: 5.5em; max-height: 90px; vertical-align: middle; /* Adjust as needed for your header size */ } .header-logo-image { display: flex; align-items: center; /* Optional: add margin or padding if needed */ } /* User Info and Controls */ .header-right { display: flex; align-items: center; align-self: flex-end; margin-bottom: 0.5em; justify-content: flex-end; } .user-name { color: var(--color-muted); font-weight: bold; font-size: 1em; margin: 0 10px; } .user-menu { position: relative; display: flex; flex-direction: column; align-items: flex-end; margin-left: 10px; cursor: pointer; z-index: 10000; /* Very high z-index to ensure dropdown appears above everything including main-content margin overlap */ /* Removed isolation - was blocking dropdown clicks */ } /* Angled background element behind user menu - mirrors hexagon corner */ .user-menu::before { content: ''; position: absolute; top: -50px; right: -11px; width: 197px; height: 109px; background: var(--primary-color); opacity: 1; transform: skewY(-13deg); transform-origin: top right; z-index: 0; /* Changed from -1 to work without isolation */ pointer-events: none; border-radius: 4px 0 0 4px; } .user-menu-trigger { display: flex; align-items: center; gap: 8px; position: relative; z-index: 10002; /* Above the background, very high to ensure interactivity */ } .user-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; align-items: flex-end; text-align: right; } .user-name { font-weight: 500; font-size: 14px; color: #ffffff; text-shadow: .1px 1px 0px rgba(0, 0, 0, .5); } .user-role { font-size: 11px; color: #f5f5f5; font-weight: 400; margin-right: 10px; } .user-avatar { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); display: block; border: 2px solid #ffffff; } .user-menu-dropdown { opacity: 0; visibility: hidden; pointer-events: none; position: absolute; top: 100%; right: 0; background: var(--background-panel); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: var(--shadow-medium); min-width: 160px; padding: 12px 0; margin-top: 0; /* Remove gap - dropdown appears right at bottom of trigger */ transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 10003; /* Very high - above trigger and any overlapping content */ } .user-menu:hover .user-menu-dropdown, .user-menu:focus-within .user-menu-dropdown, .user-menu-dropdown:hover, .user-menu-dropdown:focus-within { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .user-menu-dropdown a { display: block; padding: 10px 16px; text-decoration: none; color: var(--color-text); transition: background 0.2s; } .user-menu-dropdown a:hover { background: var(--background-hover); font-weight: 700; } /* -------------------------------- Theme Switch -------------------------------- */ .theme-switch { display: inline-block; position: relative; width: 50px; height: 26px; margin-left: 18px; vertical-align: middle; } .theme-switch input { opacity: 0; width: 0; height: 0; } .theme-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 18px; transition: background-color var(--transition-fast); } .theme-switch .slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: #fff; transition: transform var(--transition-fast); border-radius: 50%; box-shadow: 0 1px 5px #0002; } .theme-switch input:checked+.slider { background-color: var(--primary-color); } .theme-switch input:checked+.slider:before { transform: translateX(24px); background-color: #23272a; } .theme-switch input:focus+.slider { box-shadow: 0 0 1px var(--primary-color); } /* -------------------------------- Secondary Navigation Bar -------------------------------- */ .secondary-nav-bar { position: fixed; top: var(--header-bar-height); left: 0; width: 100vw; z-index: 999; height: var(--secondary-nav-height); background: var(--background-nav); color: var(--color-text); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07); } .secondary-nav-left, .secondary-nav-right { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; } .secondary-nav-left { flex: 1; justify-content: flex-start; } .secondary-nav-right { flex: 1; justify-content: flex-end; flex-wrap: nowrap; } .secondary-nav-bar .search-box { display: flex; align-items: center; background: #eee; border-radius: 5px; padding-left: 10px; border: 1px solid #ddd; } .secondary-nav-bar .search-box input[type="text"] { background: none; border: none; color: #555; padding: 8px; width: 200px; outline: none; } .secondary-nav-bar .search-box button { background: none; border: none; color: #777; padding: 8px 10px; cursor: pointer; } .secondary-nav-bar .search-box button:hover { color: #333; } .nav-links { display: flex; align-items: center; } .nav-link { color: var(--color-link); padding: 8px 12px; margin-left: 16px; font-weight: 700; border-radius: 4px; text-decoration: none; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); } .nav-link:hover { background: var(--color-link-hover); color: #fff; } /* -------------------------------- Page Layout Offset to Account for Header (Secondary Nav Hidden) -------------------------------- */ .users-page .users-content-area, .leases-page .leases-content-area, .superadmin-page .content-area, .main-content { margin-top: var(--header-bar-height); /* Secondary nav is hidden, so only account for header bar height */ } /* -------------------------------- Dark Mode Overrides -------------------------------- */ body.dark-mode .header-bar { background: var(--background-header); color: var(--color-link); border-bottom: 1px solid var(--color-border); box-shadow: 0 4px 24px #0002; backdrop-filter: blur(2.5px); } body.dark-mode .header-bar .product-logo, body.dark-mode .header-bar .user-menu, body.dark-mode .header-bar .user-name { color: var(--color-link) !important; filter: none !important; } /* Enhanced text shadow for dark mode */ body.dark-mode .header-bar .user-name { text-shadow: 0 0 8px rgba(0, 188, 212, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); } .role-toggle-form { display: block; margin: 0; } .role-toggle-form button { width: 100%; text-align: left; background: none; border: none; padding: 10px 16px; font: inherit; color: var(--color-text); cursor: pointer; transition: background 0.2s; } .role-toggle-form button:hover { background: var(--background-footer); } /* =============================== RESPONSIVE: Hamburger menu at 1200px, keep angled background =============================== */ @media (min-width: 1200px) { .hamburger-btn { display: none !important; /* Hide hamburger on desktop */ } } @media (max-width: 1199px) { .hamburger-btn { display: block; /* Show hamburger below 1200px */ } /* Keep angled background - it looks good with hamburger menu */ /* Navigation links are hidden via header.php inline styles */ } /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhlYWRlci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O29DQUVvQzs7QUFFcEM7O2tDQUVrQztBQUNsQztFQUNFLGVBQWU7RUFDZixNQUFNO0VBQ04sT0FBTztFQUNQLFlBQVk7RUFDWixhQUFhO0VBQ2Isb0NBQW9DO0VBQ3BDLHdCQUF3QjtFQUN4QixnQ0FBZ0M7RUFDaEMsZUFBZTtFQUNmLGFBQWE7RUFDYiw4QkFBOEI7RUFDOUIsbUJBQW1CO0VBQ25CLDRDQUE0QztFQUM1QyxzQkFBc0I7RUFDdEIsK0VBQStFO0VBQy9FLG9DQUFvQztBQUN0Qzs7QUFFQSxvQkFBb0I7QUFDcEI7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0FBQ3JCO0FBQ0E7RUFDRSxZQUFZO0VBQ1osY0FBYztFQUNkLHNCQUFzQjtBQUN4QjtBQUNBO0VBQ0UsZ0JBQWdCO0VBQ2hCLGlCQUFpQjtFQUNqQix3QkFBd0I7RUFDeEIsc0JBQXNCO0FBQ3hCOztBQVFBLDJCQUEyQjtBQUMzQjtFQUNFLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIseUJBQXlCO0FBQzNCO0FBQ0E7RUFDRSx5QkFBeUI7RUFDekIsaUJBQWlCO0VBQ2pCLGNBQWM7RUFDZCxjQUFjO0FBQ2hCOztBQUVBO0VBQ0Usa0JBQWtCO0VBQ2xCLGFBQWE7RUFDYixzQkFBc0I7RUFDdEIscUJBQXFCO0VBQ3JCLGlCQUFpQjtFQUNqQixlQUFlO0VBQ2YsYUFBYTtBQUNmOztBQUVBO0VBQ0UsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQixRQUFRO0FBQ1Y7O0FBRUE7RUFDRSxXQUFXO0VBQ1gsWUFBWTtFQUNaLGNBQWM7RUFDZCxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLHVCQUF1QjtBQUN6Qjs7QUFFQTtFQUNFLFdBQVc7RUFDWCxZQUFZO0VBQ1osa0JBQWtCO0VBQ2xCLGlCQUFpQjtFQUNqQixzQ0FBc0M7RUFDdEMsY0FBYztBQUNoQjs7QUFFQTtFQUNFLFVBQVU7RUFDVixrQkFBa0I7RUFDbEIsb0JBQW9CO0VBQ3BCLGtCQUFrQjtFQUNsQixTQUFTO0VBQ1QsUUFBUTtFQUNSLG1DQUFtQztFQUNuQyxxQ0FBcUM7RUFDckMsa0JBQWtCO0VBQ2xCLGdDQUFnQztFQUNoQyxnQkFBZ0I7RUFDaEIsZUFBZTtFQUNmLGVBQWU7RUFDZix3QkFBd0I7RUFDeEIsa0RBQWtEO0VBQ2xELGNBQWM7QUFDaEI7O0FBRUE7Ozs7RUFJRSxVQUFVO0VBQ1YsbUJBQW1CO0VBQ25CLG9CQUFvQjtFQUNwQix3QkFBd0I7QUFDMUI7O0FBRUEsb0RBQW9EO0FBQ3BEO0VBQ0UsZ0JBQWdCO0VBQ2hCLGlCQUFpQjtBQUNuQjs7QUFFQTtFQUNFLGNBQWM7RUFDZCxrQkFBa0I7RUFDbEIscUJBQXFCO0VBQ3JCLHdCQUF3QjtFQUN4QiwyQkFBMkI7QUFDN0I7QUFDQTtFQUNFLG9DQUFvQztBQUN0Qzs7QUFFQTs7a0NBRWtDO0FBQ2xDO0VBQ0UscUJBQXFCO0VBQ3JCLGtCQUFrQjtFQUNsQixXQUFXO0VBQ1gsWUFBWTtFQUNaLGlCQUFpQjtFQUNqQixzQkFBc0I7QUFDeEI7QUFDQTtFQUNFLFVBQVU7RUFDVixRQUFRO0VBQ1IsU0FBUztBQUNYO0FBQ0E7RUFDRSxrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLE1BQU0sRUFBRSxPQUFPO0VBQ2YsUUFBUSxFQUFFLFNBQVM7RUFDbkIsc0JBQXNCO0VBQ3RCLG1CQUFtQjtFQUNuQixtREFBbUQ7QUFDckQ7QUFDQTtFQUNFLFdBQVc7RUFDWCxrQkFBa0I7RUFDbEIsWUFBWTtFQUNaLFdBQVc7RUFDWCxTQUFTO0VBQ1QsV0FBVztFQUNYLHNCQUFzQjtFQUN0Qiw0Q0FBNEM7RUFDNUMsa0JBQWtCO0VBQ2xCLDJCQUEyQjtBQUM3QjtBQUNBO0VBQ0Usc0NBQXNDO0FBQ3hDO0FBQ0E7RUFDRSwyQkFBMkI7RUFDM0IseUJBQXlCO0FBQzNCO0FBQ0E7RUFDRSx3Q0FBd0M7QUFDMUM7O0FBRUE7O2tDQUVrQztBQUNsQztFQUNFLGVBQWU7RUFDZiw2QkFBNkI7RUFDN0IsT0FBTztFQUNQLFlBQVk7RUFDWixZQUFZO0VBQ1osbUNBQW1DO0VBQ25DLGlDQUFpQztFQUNqQyx3QkFBd0I7RUFDeEIsYUFBYTtFQUNiLDhCQUE4QjtFQUM5QixtQkFBbUI7RUFDbkIsZUFBZTtFQUNmLHNCQUFzQjtFQUN0Qix5Q0FBeUM7QUFDM0M7O0FBRUE7O0VBRUUsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQixTQUFTO0FBQ1g7QUFDQTtFQUNFLE9BQU87RUFDUCwyQkFBMkI7QUFDN0I7QUFDQTtFQUNFLE9BQU87RUFDUCx5QkFBeUI7QUFDM0I7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLGdCQUFnQjtFQUNoQixrQkFBa0I7RUFDbEIsa0JBQWtCO0VBQ2xCLHNCQUFzQjtBQUN4QjtBQUNBO0VBQ0UsZ0JBQWdCO0VBQ2hCLFlBQVk7RUFDWixXQUFXO0VBQ1gsWUFBWTtFQUNaLFlBQVk7RUFDWixhQUFhO0FBQ2Y7QUFDQTtFQUNFLGdCQUFnQjtFQUNoQixZQUFZO0VBQ1osV0FBVztFQUNYLGlCQUFpQjtFQUNqQixlQUFlO0FBQ2pCO0FBQ0E7RUFDRSxXQUFXO0FBQ2I7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0FBQ3JCO0FBQ0E7RUFDRSx3QkFBd0I7RUFDeEIsaUJBQWlCO0VBQ2pCLGlCQUFpQjtFQUNqQixnQkFBZ0I7RUFDaEIsa0JBQWtCO0VBQ2xCLHFCQUFxQjtFQUNyQiwyRUFBMkU7QUFDN0U7QUFDQTtFQUNFLG1DQUFtQztFQUNuQyxXQUFXO0FBQ2I7O0FBRUE7O2tDQUVrQztBQUNsQzs7OztFQUlFLCtFQUErRTtBQUNqRjs7QUFFQTs7a0NBRWtDO0FBQ2xDO0VBQ0Usb0NBQW9DO0VBQ3BDLHdCQUF3QjtFQUN4Qiw0Q0FBNEM7RUFDNUMsNEJBQTRCO0VBQzVCLDRCQUE0QjtBQUM5QjtBQUNBOzs7RUFHRSxtQ0FBbUM7RUFDbkMsdUJBQXVCO0FBQ3pCOztBQUVBO0VBQ0UsY0FBYztFQUNkLFNBQVM7QUFDWDs7QUFFQTtFQUNFLFdBQVc7RUFDWCxnQkFBZ0I7RUFDaEIsZ0JBQWdCO0VBQ2hCLFlBQVk7RUFDWixrQkFBa0I7RUFDbEIsYUFBYTtFQUNiLHdCQUF3QjtFQUN4QixlQUFlO0VBQ2YsMkJBQTJCO0FBQzdCOztBQUVBO0VBQ0Usb0NBQW9DO0FBQ3RDIiwiZmlsZSI6ImhlYWRlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XHJcbiAgIGhlYWRlci5jc3Mg4oCTIEZpeGVkIEhlYWRlciArIFNlY29uZGFyeSBOYXZpZ2F0aW9uXHJcbiAgID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cclxuXHJcbi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcbiAgIEZpeGVkIFRvcCBIZWFkZXIgQmFyXHJcbi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tICovXHJcbi5oZWFkZXItYmFyIHtcclxuICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgdG9wOiAwO1xyXG4gIGxlZnQ6IDA7XHJcbiAgd2lkdGg6IDEwMHZ3O1xyXG4gIHotaW5kZXg6IDEwMDA7XHJcbiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZC1oZWFkZXIpO1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0KTtcclxuICBoZWlnaHQ6IHZhcigtLWhlYWRlci1iYXItaGVpZ2h0KTtcclxuICBwYWRkaW5nOiAwIDIwcHg7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgdmFyKC0tY29sb3ItYm9yZGVyKTtcclxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQgdmFyKC0tdHJhbnNpdGlvbi1tZWRpdW0pLCBjb2xvciB2YXIoLS10cmFuc2l0aW9uLW1lZGl1bSk7XHJcbiAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWJhc2UpO1xyXG59XHJcblxyXG4vKiBMb2dvICYgQnJhbmRpbmcgKi9cclxuLmhlYWRlci1sZWZ0IHtcclxuICBkaXNwbGF5OiBmbGV4O1xyXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbn1cclxuLnByb2R1Y3QtbG9nby1pbWFnZSB7XHJcbiAgaGVpZ2h0OiA0MHB4O1xyXG4gIG1hcmdpbjogMCAxMnB4O1xyXG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XHJcbn1cclxuLnByb2R1Y3QtbG9nbyB7XHJcbiAgZm9udC1zaXplOiAxLjRlbTtcclxuICBmb250LXdlaWdodDogYm9sZDtcclxuICBjb2xvcjogdmFyKC0tY29sb3ItbGluayk7XHJcbiAgbGV0dGVyLXNwYWNpbmc6IDAuMDRlbTtcclxufVxyXG5AbWVkaWEgKG1pbi13aWR0aDogOTAwcHgpIHtcclxuICAucHJvZHVjdC1sb2dvLWltYWdlIHtcclxuICAgIGhlaWdodDogNjBweDtcclxuICAgIG1heC13aWR0aDogMTAwcHg7XHJcbiAgfVxyXG59XHJcblxyXG4vKiBVc2VyIEluZm8gYW5kIENvbnRyb2xzICovXHJcbi5oZWFkZXItcmlnaHQge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtZW5kO1xyXG59XHJcbi51c2VyLW5hbWUge1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci1tdXRlZCk7XHJcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XHJcbiAgZm9udC1zaXplOiAxZW07XHJcbiAgbWFyZ2luOiAwIDEwcHg7XHJcbn1cclxuXHJcbi51c2VyLW1lbnUge1xyXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICBkaXNwbGF5OiBmbGV4O1xyXG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XHJcbiAgYWxpZ24taXRlbXM6IGZsZXgtZW5kO1xyXG4gIG1hcmdpbi1sZWZ0OiAxMHB4O1xyXG4gIGN1cnNvcjogcG9pbnRlcjtcclxuICB6LWluZGV4OiAxMTAwO1xyXG59XHJcblxyXG4udXNlci1tZW51LXRyaWdnZXIge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICBnYXA6IDhweDtcclxufVxyXG5cclxuLnVzZXItYXZhdGFyIHtcclxuICB3aWR0aDogNDBweDtcclxuICBoZWlnaHQ6IDQwcHg7XHJcbiAgZmxleC1zaHJpbms6IDA7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG59XHJcblxyXG4udXNlci1hdmF0YXIgaW1nIHtcclxuICB3aWR0aDogMTAwJTtcclxuICBoZWlnaHQ6IDEwMCU7XHJcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xyXG4gIG9iamVjdC1maXQ6IGNvdmVyO1xyXG4gIGJveC1zaGFkb3c6IDAgMCAzcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xyXG4gIGRpc3BsYXk6IGJsb2NrO1xyXG59XHJcblxyXG4udXNlci1tZW51LWRyb3Bkb3duIHtcclxuICBvcGFjaXR5OiAwO1xyXG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcclxuICBwb2ludGVyLWV2ZW50czogbm9uZTtcclxuICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgdG9wOiAxMDAlO1xyXG4gIHJpZ2h0OiAwO1xyXG4gIGJhY2tncm91bmQ6IHZhcigtLWJhY2tncm91bmQtcGFuZWwpO1xyXG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbG9yLWJvcmRlcik7XHJcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xyXG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1tZWRpdW0pO1xyXG4gIG1pbi13aWR0aDogMTYwcHg7XHJcbiAgcGFkZGluZzogMTJweCAwO1xyXG4gIG1hcmdpbi10b3A6IDhweDtcclxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7XHJcbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjJzIGVhc2UsIHRyYW5zZm9ybSAwLjJzIGVhc2U7XHJcbiAgei1pbmRleDogMTAwMDE7XHJcbn1cclxuXHJcbi51c2VyLW1lbnU6aG92ZXIgLnVzZXItbWVudS1kcm9wZG93bixcclxuLnVzZXItbWVudTpmb2N1cy13aXRoaW4gLnVzZXItbWVudS1kcm9wZG93bixcclxuLnVzZXItbWVudS1kcm9wZG93bjpob3ZlcixcclxuLnVzZXItbWVudS1kcm9wZG93bjpmb2N1cy13aXRoaW4ge1xyXG4gIG9wYWNpdHk6IDE7XHJcbiAgdmlzaWJpbGl0eTogdmlzaWJsZTtcclxuICBwb2ludGVyLWV2ZW50czogYXV0bztcclxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7XHJcbn1cclxuXHJcbi8qIEVuc3VyZSBkcm9wZG93biBkb2Vzbid0IGNsb3NlIG9uIGZhc3QgaG92ZXIgb3V0ICovXHJcbi51c2VyLW1lbnUtZHJvcGRvd24ge1xyXG4gIG1hcmdpbi10b3A6IDEycHg7XHJcbiAgcGFkZGluZy10b3A6IDE2cHg7XHJcbn1cclxuXHJcbi51c2VyLW1lbnUtZHJvcGRvd24gYSB7XHJcbiAgZGlzcGxheTogYmxvY2s7XHJcbiAgcGFkZGluZzogMTBweCAxNnB4O1xyXG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcclxuICBjb2xvcjogdmFyKC0tY29sb3ItdGV4dCk7XHJcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjJzO1xyXG59XHJcbi51c2VyLW1lbnUtZHJvcGRvd24gYTpob3ZlciB7XHJcbiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZC1mb290ZXIpO1xyXG59XHJcblxyXG4vKiAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxyXG4gICBUaGVtZSBTd2l0Y2hcclxuLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi9cclxuLnRoZW1lLXN3aXRjaCB7XHJcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xyXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICB3aWR0aDogNTBweDtcclxuICBoZWlnaHQ6IDI2cHg7XHJcbiAgbWFyZ2luLWxlZnQ6IDE4cHg7XHJcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcclxufVxyXG4udGhlbWUtc3dpdGNoIGlucHV0IHtcclxuICBvcGFjaXR5OiAwO1xyXG4gIHdpZHRoOiAwO1xyXG4gIGhlaWdodDogMDtcclxufVxyXG4udGhlbWUtc3dpdGNoIC5zbGlkZXIge1xyXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgdG9wOiAwOyBsZWZ0OiAwO1xyXG4gIHJpZ2h0OiAwOyBib3R0b206IDA7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogI2NjYztcclxuICBib3JkZXItcmFkaXVzOiAxOHB4O1xyXG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgdmFyKC0tdHJhbnNpdGlvbi1mYXN0KTtcclxufVxyXG4udGhlbWUtc3dpdGNoIC5zbGlkZXI6YmVmb3JlIHtcclxuICBjb250ZW50OiBcIlwiO1xyXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICBoZWlnaHQ6IDIwcHg7XHJcbiAgd2lkdGg6IDIwcHg7XHJcbiAgbGVmdDogM3B4O1xyXG4gIGJvdHRvbTogM3B4O1xyXG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XHJcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIHZhcigtLXRyYW5zaXRpb24tZmFzdCk7XHJcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xyXG4gIGJveC1zaGFkb3c6IDAgMXB4IDVweCAjMDAwMjtcclxufVxyXG4udGhlbWUtc3dpdGNoIGlucHV0OmNoZWNrZWQgKyAuc2xpZGVyIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yKTtcclxufVxyXG4udGhlbWUtc3dpdGNoIGlucHV0OmNoZWNrZWQgKyAuc2xpZGVyOmJlZm9yZSB7XHJcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDI0cHgpO1xyXG4gIGJhY2tncm91bmQtY29sb3I6ICMyMzI3MmE7XHJcbn1cclxuLnRoZW1lLXN3aXRjaCBpbnB1dDpmb2N1cyArIC5zbGlkZXIge1xyXG4gIGJveC1zaGFkb3c6IDAgMCAxcHggdmFyKC0tcHJpbWFyeS1jb2xvcik7XHJcbn1cclxuXHJcbi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcbiAgIFNlY29uZGFyeSBOYXZpZ2F0aW9uIEJhclxyXG4tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLSAqL1xyXG4uc2Vjb25kYXJ5LW5hdi1iYXIge1xyXG4gIHBvc2l0aW9uOiBmaXhlZDtcclxuICB0b3A6IHZhcigtLWhlYWRlci1iYXItaGVpZ2h0KTtcclxuICBsZWZ0OiAwO1xyXG4gIHdpZHRoOiAxMDB2dztcclxuICB6LWluZGV4OiA5OTk7XHJcbiAgaGVpZ2h0OiB2YXIoLS1zZWNvbmRhcnktbmF2LWhlaWdodCk7XHJcbiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZC1uYXYpO1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0KTtcclxuICBkaXNwbGF5OiBmbGV4O1xyXG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIHBhZGRpbmc6IDAgMjBweDtcclxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gIGJveC1zaGFkb3c6IDAgMnB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMDcpO1xyXG59XHJcblxyXG4uc2Vjb25kYXJ5LW5hdi1sZWZ0LFxyXG4uc2Vjb25kYXJ5LW5hdi1yaWdodCB7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIGdhcDogMTZweDtcclxufVxyXG4uc2Vjb25kYXJ5LW5hdi1sZWZ0IHtcclxuICBmbGV4OiAxO1xyXG4gIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcclxufVxyXG4uc2Vjb25kYXJ5LW5hdi1yaWdodCB7XHJcbiAgZmxleDogMTtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtZW5kO1xyXG59XHJcblxyXG4uc2Vjb25kYXJ5LW5hdi1iYXIgLnNlYXJjaC1ib3gge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICBiYWNrZ3JvdW5kOiAjZWVlO1xyXG4gIGJvcmRlci1yYWRpdXM6IDVweDtcclxuICBwYWRkaW5nLWxlZnQ6IDEwcHg7XHJcbiAgYm9yZGVyOiAxcHggc29saWQgI2RkZDtcclxufVxyXG4uc2Vjb25kYXJ5LW5hdi1iYXIgLnNlYXJjaC1ib3ggaW5wdXRbdHlwZT1cInRleHRcIl0ge1xyXG4gIGJhY2tncm91bmQ6IG5vbmU7XHJcbiAgYm9yZGVyOiBub25lO1xyXG4gIGNvbG9yOiAjNTU1O1xyXG4gIHBhZGRpbmc6IDhweDtcclxuICB3aWR0aDogMjAwcHg7XHJcbiAgb3V0bGluZTogbm9uZTtcclxufVxyXG4uc2Vjb25kYXJ5LW5hdi1iYXIgLnNlYXJjaC1ib3ggYnV0dG9uIHtcclxuICBiYWNrZ3JvdW5kOiBub25lO1xyXG4gIGJvcmRlcjogbm9uZTtcclxuICBjb2xvcjogIzc3NztcclxuICBwYWRkaW5nOiA4cHggMTBweDtcclxuICBjdXJzb3I6IHBvaW50ZXI7XHJcbn1cclxuLnNlY29uZGFyeS1uYXYtYmFyIC5zZWFyY2gtYm94IGJ1dHRvbjpob3ZlciB7XHJcbiAgY29sb3I6ICMzMzM7XHJcbn1cclxuXHJcbi5uYXYtbGlua3Mge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxufVxyXG4ubmF2LWxpbmsge1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci1saW5rKTtcclxuICBwYWRkaW5nOiA4cHggMTJweDtcclxuICBtYXJnaW4tbGVmdDogMTZweDtcclxuICBmb250LXdlaWdodDogNzAwO1xyXG4gIGJvcmRlci1yYWRpdXM6IDRweDtcclxuICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XHJcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCB2YXIoLS10cmFuc2l0aW9uLWZhc3QpLCBjb2xvciB2YXIoLS10cmFuc2l0aW9uLWZhc3QpO1xyXG59XHJcbi5uYXYtbGluazpob3ZlciB7XHJcbiAgYmFja2dyb3VuZDogdmFyKC0tY29sb3ItbGluay1ob3Zlcik7XHJcbiAgY29sb3I6ICNmZmY7XHJcbn1cclxuXHJcbi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcbiAgIFBhZ2UgTGF5b3V0IE9mZnNldCB0byBBY2NvdW50IGZvciBIZWFkZXIgKyBOYXZcclxuLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi9cclxuLnVzZXJzLXBhZ2UgLnVzZXJzLWNvbnRlbnQtYXJlYSxcclxuLmxlYXNlcy1wYWdlIC5sZWFzZXMtY29udGVudC1hcmVhLFxyXG4uc3VwZXJhZG1pbi1wYWdlIC5jb250ZW50LWFyZWEsXHJcbi5tYWluLWNvbnRlbnQge1xyXG4gIG1hcmdpbi10b3A6IGNhbGModmFyKC0taGVhZGVyLWJhci1oZWlnaHQpICsgdmFyKC0tc2Vjb25kYXJ5LW5hdi1oZWlnaHQpICsgMzJweCk7XHJcbn1cclxuXHJcbi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcbiAgIERhcmsgTW9kZSBPdmVycmlkZXNcclxuLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi9cclxuYm9keS5kYXJrLW1vZGUgLmhlYWRlci1iYXIge1xyXG4gIGJhY2tncm91bmQ6IHZhcigtLWJhY2tncm91bmQtaGVhZGVyKTtcclxuICBjb2xvcjogdmFyKC0tY29sb3ItbGluayk7XHJcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHZhcigtLWNvbG9yLWJvcmRlcik7XHJcbiAgYm94LXNoYWRvdzogMCA0cHggMjRweCAjMDAwMjtcclxuICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoMi41cHgpO1xyXG59XHJcbmJvZHkuZGFyay1tb2RlIC5oZWFkZXItYmFyIC5wcm9kdWN0LWxvZ28sXHJcbmJvZHkuZGFyay1tb2RlIC5oZWFkZXItYmFyIC51c2VyLW1lbnUsXHJcbmJvZHkuZGFyay1tb2RlIC5oZWFkZXItYmFyIC51c2VyLW5hbWUge1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci1saW5rKSAhaW1wb3J0YW50O1xyXG4gIGZpbHRlcjogbm9uZSAhaW1wb3J0YW50O1xyXG59XHJcblxyXG4ucm9sZS10b2dnbGUtZm9ybSB7XHJcbiAgZGlzcGxheTogYmxvY2s7XHJcbiAgbWFyZ2luOiAwO1xyXG59XHJcblxyXG4ucm9sZS10b2dnbGUtZm9ybSBidXR0b24ge1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIHRleHQtYWxpZ246IGxlZnQ7XHJcbiAgYmFja2dyb3VuZDogbm9uZTtcclxuICBib3JkZXI6IG5vbmU7XHJcbiAgcGFkZGluZzogMTBweCAxNnB4O1xyXG4gIGZvbnQ6IGluaGVyaXQ7XHJcbiAgY29sb3I6IHZhcigtLWNvbG9yLXRleHQpO1xyXG4gIGN1cnNvcjogcG9pbnRlcjtcclxuICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kIDAuMnM7XHJcbn1cclxuXHJcbi5yb2xlLXRvZ2dsZS1mb3JtIGJ1dHRvbjpob3ZlciB7XHJcbiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZC1mb290ZXIpO1xyXG59XHJcbiJdfQ== */ /* ======================================== * CONTENT LAYOUT * ======================================== */ /* =============================== content.css – Layout for Page Content Wrappers Handles spacing, width, and responsive padding =============================== */ /* ------------------------------- 🧱 Core Layout Container ------------------------------- */ .admin-content-area { max-width: 1280px; margin: 0 auto; padding: 24px 32px; box-sizing: border-box; background: var(--background-main, #f5f6fa); color: var(--color-text, #232a2f); transition: background 0.3s, color 0.3s; } /* Dashboard Wrapper - ensure light gray background, not white */ .dashboard-wrapper { background: var(--background-main) !important; flex: 1; display: flex; flex-direction: column; } /* ------------------------------- 📦 Page-Specific Content Area Padding ------------------------------- */ .users-content-area, .leases-content-area, .companies-content-area { padding-bottom: 60px; } /* ------------------------------- 🧭 Page Header Layout ------------------------------- */ .header-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; } .header-flex h1 { color: var(--color-link); /* Static accent (teal) by request */ font-size: 2.2em; font-weight: bold; margin: 0; flex-shrink: 0; line-height: 1.2; letter-spacing: -1px; text-shadow: 0 2px 8px #00bcd420; } /* ------------------------------- ➕ Generic Add Button Styles ------------------------------- */ .add-btn { background: var(--primary-color, #00BCD4); color: #fff; font-weight: 600; font-size: 1.08em; padding: 12px 30px; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 10px #0002; transition: background 0.2s, box-shadow 0.2s; } .add-btn:hover { background: var(--primary-hover, #0097a7); box-shadow: 0 4px 16px #0003; } /* =============================== 🔍 Filter Bar Layout (Shared by Users, Companies, Leases, etc.) =============================== */ .filter-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; } .filter-group.left { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .filter-group.right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-width: 240px; } .search-reset-wrap { display: flex; align-items: center; gap: 12px; } #filter-search { flex: 1; min-width: 220px; max-width: 300px; padding: 10px 12px; border: 1px solid var(--color-border, #b0bec5); border-radius: 6px; color: var(--search-text, #232a2f); font-size: 1em; box-shadow: inset 0 1px 2px #0001; transition: background 0.3s, color 0.3s; } #reset-filters-btn { background: var(--danger-color, #e53935); color: #fff; border: none; border-radius: 6px; padding: 10px 18px; font-weight: bold; font-size: 0.95em; cursor: pointer; transition: background 0.2s ease; } #reset-filters-btn:hover { background: #b71c1c; } /* ------------------------------- 📱 Responsive Adjustments (Bootstrap md breakpoint) ------------------------------- */ @media (max-width: 767.98px) { .admin-content-area { padding: 20px 16px; } .users-content-area, .leases-content-area, .companies-content-area { padding-bottom: 40px; } } @media (max-width: 540px) { .header-flex { flex-direction: column; align-items: stretch; gap: 10px; } .add-btn { width: 100%; margin-top: 8px; font-size: 1em; } .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; } .filter-group.right, .filter-group.left, .search-reset-wrap { flex-direction: column; align-items: stretch; min-width: 0; gap: 8px; } #filter-search, #reset-filters-btn { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } } /* End content.css */ /* ======================================== * CARD COMPONENTS * ======================================== */ /* =============================== card.css – Card Layout Styles Extracted from production.css =============================== */ /* Generic card wrapper */ .card { background: var(--background-panel, #fff); border-radius: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13); padding: 32px 30px 30px; color: var(--color-text, #232225); box-sizing: border-box; transition: background 0.3s, color 0.3s; max-width: 1440px; margin-left: auto; margin-right: auto; } .card--narrow { max-width: 960px; margin-left: auto; margin-right: auto; } /* Card variation for tables */ .table-card { overflow-x: auto; width: 100%; } /* Compact dashboard stats card */ .stat-card { background: var(--background-panel, #f8fafc); border-radius: 12px; box-shadow: 0 1px 5px 0 rgba(60, 100, 130, 0.06); padding: 22px 30px 18px; min-width: 180px; min-height: 110px; flex: 1 0 160px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; transition: background 0.3s, color 0.3s, box-shadow 0.3s; } .stat-card-label { font-size: 1em; color: var(--color-link, #00bcd4); margin-bottom: 7px; font-weight: 600; letter-spacing: 0.01em; } .stat-card-value { font-size: 2.3em; font-weight: 700; color: var(--color-text, #1d2c3a); } .stat-card-sub { margin-top: 6px; font-size: 0.95em; color: var(--color-muted, #9cb6bc); font-weight: 500; } /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7b0NBR29DOztBQUVwQyx5QkFBeUI7QUFDekI7RUFDRSx5Q0FBeUM7RUFDekMsbUJBQW1CO0VBQ25CLDBDQUEwQztFQUMxQyx1QkFBdUI7RUFDdkIsaUNBQWlDO0VBQ2pDLHNCQUFzQjtFQUN0Qix1Q0FBdUM7RUFDdkMsaUJBQWlCO0VBQ2pCLGlCQUFpQjtFQUNqQixrQkFBa0I7QUFDcEI7O0FBRUE7RUFDRSxnQkFBZ0I7RUFDaEIsaUJBQWlCO0VBQ2pCLGtCQUFrQjtBQUNwQjs7QUFFQSw4QkFBOEI7QUFDOUI7RUFDRSxnQkFBZ0I7RUFDaEIsV0FBVztBQUNiOztBQUVBLGlDQUFpQztBQUNqQztFQUNFLDRDQUE0QztFQUM1QyxtQkFBbUI7RUFDbkIsZ0RBQWdEO0VBQ2hELHVCQUF1QjtFQUN2QixnQkFBZ0I7RUFDaEIsaUJBQWlCO0VBQ2pCLGVBQWU7RUFDZixhQUFhO0VBQ2Isc0JBQXNCO0VBQ3RCLHVCQUF1QjtFQUN2Qix1QkFBdUI7RUFDdkIsd0RBQXdEO0FBQzFEOztBQUVBO0VBQ0UsY0FBYztFQUNkLGlDQUFpQztFQUNqQyxrQkFBa0I7RUFDbEIsZ0JBQWdCO0VBQ2hCLHNCQUFzQjtBQUN4Qjs7QUFFQTtFQUNFLGdCQUFnQjtFQUNoQixnQkFBZ0I7RUFDaEIsaUNBQWlDO0FBQ25DOztBQUVBO0VBQ0UsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQixrQ0FBa0M7RUFDbEMsZ0JBQWdCO0FBQ2xCIiwiZmlsZSI6ImNhcmQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxyXG4gICBjYXJkLmNzcyDigJMgQ2FyZCBMYXlvdXQgU3R5bGVzXHJcbiAgIEV4dHJhY3RlZCBmcm9tIHByb2R1Y3Rpb24uY3NzXHJcbiAgID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cclxuXHJcbi8qIEdlbmVyaWMgY2FyZCB3cmFwcGVyICovXHJcbi5jYXJkIHtcclxuICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLXBhbmVsLCAjZmZmKTtcclxuICBib3JkZXItcmFkaXVzOiAxNHB4O1xyXG4gIGJveC1zaGFkb3c6IDAgOHB4IDMycHggcmdiYSgwLCAwLCAwLCAwLjEzKTtcclxuICBwYWRkaW5nOiAzMnB4IDMwcHggMzBweDtcclxuICBjb2xvcjogdmFyKC0tY29sb3ItdGV4dCwgIzIzMjIyNSk7XHJcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcclxuICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kIDAuM3MsIGNvbG9yIDAuM3M7XHJcbiAgbWF4LXdpZHRoOiAxNDQwcHg7XHJcbiAgbWFyZ2luLWxlZnQ6IGF1dG87XHJcbiAgbWFyZ2luLXJpZ2h0OiBhdXRvO1xyXG59XHJcblxyXG4uY2FyZC0tbmFycm93IHtcclxuICBtYXgtd2lkdGg6IDk2MHB4O1xyXG4gIG1hcmdpbi1sZWZ0OiBhdXRvO1xyXG4gIG1hcmdpbi1yaWdodDogYXV0bztcclxufVxyXG5cclxuLyogQ2FyZCB2YXJpYXRpb24gZm9yIHRhYmxlcyAqL1xyXG4udGFibGUtY2FyZCB7XHJcbiAgb3ZlcmZsb3cteDogYXV0bztcclxuICB3aWR0aDogMTAwJTtcclxufVxyXG5cclxuLyogQ29tcGFjdCBkYXNoYm9hcmQgc3RhdHMgY2FyZCAqL1xyXG4uc3RhdC1jYXJkIHtcclxuICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLXBhbmVsLCAjZjhmYWZjKTtcclxuICBib3JkZXItcmFkaXVzOiAxMnB4O1xyXG4gIGJveC1zaGFkb3c6IDAgMXB4IDVweCAwIHJnYmEoNjAsIDEwMCwgMTMwLCAwLjA2KTtcclxuICBwYWRkaW5nOiAyMnB4IDMwcHggMThweDtcclxuICBtaW4td2lkdGg6IDE4MHB4O1xyXG4gIG1pbi1oZWlnaHQ6IDExMHB4O1xyXG4gIGZsZXg6IDEgMCAxNjBweDtcclxuICBkaXNwbGF5OiBmbGV4O1xyXG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XHJcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XHJcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjNzLCBjb2xvciAwLjNzLCBib3gtc2hhZG93IDAuM3M7XHJcbn1cclxuXHJcbi5zdGF0LWNhcmQtbGFiZWwge1xyXG4gIGZvbnQtc2l6ZTogMWVtO1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci1saW5rLCAjMDBiY2Q0KTtcclxuICBtYXJnaW4tYm90dG9tOiA3cHg7XHJcbiAgZm9udC13ZWlnaHQ6IDYwMDtcclxuICBsZXR0ZXItc3BhY2luZzogMC4wMWVtO1xyXG59XHJcblxyXG4uc3RhdC1jYXJkLXZhbHVlIHtcclxuICBmb250LXNpemU6IDIuM2VtO1xyXG4gIGZvbnQtd2VpZ2h0OiA3MDA7XHJcbiAgY29sb3I6IHZhcigtLWNvbG9yLXRleHQsICMxZDJjM2EpO1xyXG59XHJcblxyXG4uc3RhdC1jYXJkLXN1YiB7XHJcbiAgbWFyZ2luLXRvcDogNnB4O1xyXG4gIGZvbnQtc2l6ZTogMC45NWVtO1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci1tdXRlZCwgIzljYjZiYyk7XHJcbiAgZm9udC13ZWlnaHQ6IDUwMDtcclxufVxyXG5cclxuQG1lZGlhIChtYXgtd2lkdGg6IDcwMHB4KSB7XHJcbiAgLnN0YXQtY2FyZCB7XHJcbiAgICBtaW4td2lkdGg6IDE0MHB4O1xyXG4gICAgcGFkZGluZzogMTZweCA4dncgMTRweDtcclxuICB9XHJcbn1cclxuIl19 */ /* ======================================== * UI COMPONENTS * ======================================== */ /* =============================== components.css – Reusable UI Elements Contains: role badges, toast notifications, pills, summaries, etc. Theme-aware using :root variables =============================== */ /* ------------------------------- 📛 Role Badges -------------------------------- */ .role-badge { display: inline-block; padding: 4px 10px; font-size: 0.8em; border-radius: 16px; margin: 2px 3px; white-space: nowrap; user-select: none; font-weight: 600; line-height: 1; transition: background 0.2s ease, color 0.2s ease; } .badge-owner { background-color: var(--success-color); color: #fff; } .badge-manager { background-color: var(--info-color); color: #fff; } .badge-pumper { background-color: var(--warning-color); color: #000; } .role-badge.more-badge { background-color: #999; color: #fff; font-size: 0.75em; padding: 4px 10px; border-radius: 12px; margin-left: 4px; } /* ------------------------------- 🔔 Toast Notifications (Modern) -------------------------------- */ #toast-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 20000; display: flex; flex-direction: column; align-items: center; gap: 12px; } .toast { display: flex; align-items: center; gap: 12px; padding: 12px 20px; min-width: 280px; max-width: 90vw; background-color: #fdfdfd; color: #333; font-size: 15px; font-weight: 500; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); border: 1px solid #e2e2e2; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; } .toast .icon { font-size: 18px; color: #777; flex-shrink: 0; } .toast .message { flex: 1; white-space: pre-line; color: #333; } body.dark-mode .toast { background-color: #fdfdfd !important; color: #222 !important; border: 1px solid #ddd !important; } .toast.success { background-color: var(--success-color); color: #fff; box-shadow: 0 0 16px rgba(40, 167, 69, 0.5); } .toast.error { background-color: var(--danger-color); color: #fff; box-shadow: 0 0 18px rgba(220, 53, 69, 0.7); } .toast.warning { background-color: var(--warning-color); color: var(--color-text); box-shadow: 0 0 16px rgba(255, 193, 7, 0.7); } .toast.info { background-color: var(--info-color); color: #fff; box-shadow: 0 0 16px rgba(23, 162, 184, 0.6); } /* Removed @keyframes toastIn and toastOutSwipe - now using Bootstrap Toast + animate.css */ /* ------------------------------- 📦 Pills & Assignment Summary -------------------------------- */ .assignment-summary { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; max-width: 240px; scrollbar-width: thin; } .assignment-summary::-webkit-scrollbar { height: 4px; } .assignment-summary::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } #user-company-roles-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .role-pill { display: flex; align-items: center; justify-content: space-between; background: #f2f2f5; border-radius: 999px; padding: 8px 16px; font-size: 0.94em; color: #333; border: 1px solid #ddd; max-width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .role-pill .badge { font-size: 0.85em; padding: 5px 12px; border-radius: 999px; font-weight: 600; text-transform: capitalize; white-space: nowrap; color: white; } .pill-meta { color: #444; font-size: 0.92em; margin-left: 12px; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pill-remove-btn { background: var(--danger-color); color: white; border: 2px solid var(--danger-color); font-size: 1.2em; font-weight: bold; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; padding: 0; transition: all 0.2s; margin-left: 12px; } .pill-remove-btn:hover { background: transparent; color: var(--danger-color); transform: scale(1.1); } .profile-theme-toggle { display: flex; align-items: center; margin-bottom: 20px; } /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O29DQUlvQzs7QUFFcEM7O2tDQUVrQztBQUNsQztFQUNFLHFCQUFxQjtFQUNyQixpQkFBaUI7RUFDakIsZ0JBQWdCO0VBQ2hCLG1CQUFtQjtFQUNuQixlQUFlO0VBQ2YsbUJBQW1CO0VBQ25CLGlCQUFpQjtFQUNqQixnQkFBZ0I7RUFDaEIsY0FBYztFQUNkLGlEQUFpRDtBQUNuRDs7QUFFQSxpQkFBaUIsc0NBQXNDLEVBQUUsV0FBVyxFQUFFO0FBQ3RFLGlCQUFpQixtQ0FBbUMsS0FBSyxXQUFXLEVBQUU7QUFDdEUsaUJBQWlCLHNDQUFzQyxFQUFFLFdBQVcsRUFBRTs7QUFFdEU7RUFDRSxzQkFBc0I7RUFDdEIsV0FBVztFQUNYLGlCQUFpQjtFQUNqQixpQkFBaUI7RUFDakIsbUJBQW1CO0VBQ25CLGdCQUFnQjtBQUNsQjs7QUFFQTs7a0NBRWtDO0FBQ2xDO0VBQ0UsZUFBZTtFQUNmLFlBQVk7RUFDWixTQUFTO0VBQ1QsMkJBQTJCO0VBQzNCLGNBQWM7RUFDZCxhQUFhO0VBQ2Isc0JBQXNCO0VBQ3RCLG1CQUFtQjtFQUNuQixTQUFTO0FBQ1g7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLFNBQVM7RUFDVCxrQkFBa0I7RUFDbEIsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZix5QkFBeUI7RUFDekIsV0FBVztFQUNYLGVBQWU7RUFDZixnQkFBZ0I7RUFDaEIsbUJBQW1CO0VBQ25CLDBDQUEwQztFQUMxQyx5QkFBeUI7RUFDekIsVUFBVTtFQUNWLDJCQUEyQjtFQUMzQix5QkFBeUI7QUFDM0I7O0FBRUE7RUFDRSxlQUFlO0VBQ2YsV0FBVztFQUNYLGNBQWM7QUFDaEI7O0FBRUE7RUFDRSxPQUFPO0VBQ1AscUJBQXFCO0VBQ3JCLFdBQVc7QUFDYjs7QUFFQTtFQUNFLG9DQUFvQztFQUNwQyxzQkFBc0I7RUFDdEIsaUNBQWlDO0FBQ25DOztBQUVBO0VBQ0Usc0NBQXNDO0VBQ3RDLFdBQVc7RUFDWCwyQ0FBMkM7QUFDN0M7O0FBRUE7RUFDRSxxQ0FBcUM7RUFDckMsV0FBVztFQUNYLDJDQUEyQztBQUM3Qzs7QUFFQTtFQUNFLHNDQUFzQztFQUN0Qyx3QkFBd0I7RUFDeEIsMkNBQTJDO0FBQzdDOztBQUVBO0VBQ0UsbUNBQW1DO0VBQ25DLFdBQVc7RUFDWCw0Q0FBNEM7QUFDOUM7O0FBRUE7RUFDRSxPQUFPLFVBQVUsRUFBRSwyQkFBMkIsRUFBRTtFQUNoRCxPQUFPLFVBQVUsRUFBRSx3QkFBd0IsRUFBRTtBQUMvQzs7QUFFQTtFQUNFLE9BQU8sVUFBVSxFQUFFLHdCQUF3QixFQUFFO0VBQzdDLE9BQU8sVUFBVSxFQUFFLDJCQUEyQixFQUFFO0FBQ2xEOztBQUVBOztrQ0FFa0M7QUFDbEM7RUFDRSxhQUFhO0VBQ2IsUUFBUTtFQUNSLG1CQUFtQjtFQUNuQixpQkFBaUI7RUFDakIsZ0JBQWdCO0VBQ2hCLG1CQUFtQjtFQUNuQixnQkFBZ0I7RUFDaEIscUJBQXFCO0FBQ3ZCOztBQUVBO0VBQ0UsV0FBVztBQUNiO0FBQ0E7RUFDRSxnQkFBZ0I7RUFDaEIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0UsZUFBZTtFQUNmLGFBQWE7RUFDYixzQkFBc0I7RUFDdEIsUUFBUTtBQUNWOztBQUVBO0VBQ0UsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQiw4QkFBOEI7RUFDOUIsbUJBQW1CO0VBQ25CLG9CQUFvQjtFQUNwQixpQkFBaUI7RUFDakIsaUJBQWlCO0VBQ2pCLFdBQVc7RUFDWCxzQkFBc0I7RUFDdEIsZUFBZTtFQUNmLHlDQUF5QztBQUMzQzs7QUFFQTtFQUNFLGlCQUFpQjtFQUNqQixpQkFBaUI7RUFDakIsb0JBQW9CO0VBQ3BCLGdCQUFnQjtFQUNoQiwwQkFBMEI7RUFDMUIsbUJBQW1CO0VBQ25CLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFdBQVc7RUFDWCxpQkFBaUI7RUFDakIsaUJBQWlCO0VBQ2pCLFlBQVk7RUFDWixnQkFBZ0I7RUFDaEIsdUJBQXVCO0VBQ3ZCLG1CQUFtQjtBQUNyQjs7QUFFQTtFQUNFLG1CQUFtQjtFQUNuQixZQUFZO0VBQ1osWUFBWTtFQUNaLGdCQUFnQjtFQUNoQixpQkFBaUI7RUFDakIsV0FBVztFQUNYLFlBQVk7RUFDWixrQkFBa0I7RUFDbEIsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQix1QkFBdUI7RUFDdkIsY0FBYztFQUNkLGVBQWU7RUFDZixVQUFVO0VBQ1YsMkJBQTJCO0VBQzNCLGlCQUFpQjtBQUNuQjs7QUFFQTtFQUNFLG1CQUFtQjtBQUNyQiIsImZpbGUiOiJjb21wb25lbnRzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cclxuICAgY29tcG9uZW50cy5jc3Mg4oCTIFJldXNhYmxlIFVJIEVsZW1lbnRzXHJcbiAgIENvbnRhaW5zOiByb2xlIGJhZGdlcywgdG9hc3Qgbm90aWZpY2F0aW9ucywgcGlsbHMsIHN1bW1hcmllcywgZXRjLlxyXG4gICBUaGVtZS1hd2FyZSB1c2luZyA6cm9vdCB2YXJpYWJsZXNcclxuICAgPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSAqL1xyXG5cclxuLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxyXG4gICDwn5ObIFJvbGUgQmFkZ2VzXHJcbi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tICovXHJcbi5yb2xlLWJhZGdlIHtcclxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XHJcbiAgcGFkZGluZzogNHB4IDEwcHg7XHJcbiAgZm9udC1zaXplOiAwLjhlbTtcclxuICBib3JkZXItcmFkaXVzOiAxNnB4O1xyXG4gIG1hcmdpbjogMnB4IDNweDtcclxuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xyXG4gIHVzZXItc2VsZWN0OiBub25lO1xyXG4gIGZvbnQtd2VpZ2h0OiA2MDA7XHJcbiAgbGluZS1oZWlnaHQ6IDE7XHJcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjJzIGVhc2UsIGNvbG9yIDAuMnMgZWFzZTtcclxufVxyXG5cclxuLmJhZGdlLW93bmVyICAgeyBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWNjZXNzLWNvbG9yKTsgY29sb3I6ICNmZmY7IH1cclxuLmJhZGdlLW1hbmFnZXIgeyBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1pbmZvLWNvbG9yKTsgICAgY29sb3I6ICNmZmY7IH1cclxuLmJhZGdlLXB1bXBlciAgeyBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS13YXJuaW5nLWNvbG9yKTsgY29sb3I6ICMwMDA7IH1cclxuXHJcbi5yb2xlLWJhZGdlLm1vcmUtYmFkZ2Uge1xyXG4gIGJhY2tncm91bmQtY29sb3I6ICM5OTk7XHJcbiAgY29sb3I6ICNmZmY7XHJcbiAgZm9udC1zaXplOiAwLjc1ZW07XHJcbiAgcGFkZGluZzogNHB4IDEwcHg7XHJcbiAgYm9yZGVyLXJhZGl1czogMTJweDtcclxuICBtYXJnaW4tbGVmdDogNHB4O1xyXG59XHJcblxyXG4vKiAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcbiAgIPCflJQgVG9hc3QgTm90aWZpY2F0aW9ucyAoTW9kZXJuKVxyXG4tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLSAqL1xyXG4jdG9hc3QtY29udGFpbmVyIHtcclxuICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgYm90dG9tOiAzMHB4O1xyXG4gIGxlZnQ6IDUwJTtcclxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XHJcbiAgei1pbmRleDogMjAwMDA7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgZ2FwOiAxMnB4O1xyXG59XHJcblxyXG4udG9hc3Qge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICBnYXA6IDEycHg7XHJcbiAgcGFkZGluZzogMTJweCAyMHB4O1xyXG4gIG1pbi13aWR0aDogMjgwcHg7XHJcbiAgbWF4LXdpZHRoOiA5MHZ3O1xyXG4gIGJhY2tncm91bmQtY29sb3I6ICNmZGZkZmQ7XHJcbiAgY29sb3I6ICMzMzM7XHJcbiAgZm9udC1zaXplOiAxNXB4O1xyXG4gIGZvbnQtd2VpZ2h0OiA1MDA7XHJcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcclxuICBib3gtc2hhZG93OiAwIDZweCAyMHB4IHJnYmEoMCwgMCwgMCwgMC4wOCk7XHJcbiAgYm9yZGVyOiAxcHggc29saWQgI2UyZTJlMjtcclxuICBvcGFjaXR5OiAwO1xyXG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgyMHB4KTtcclxuICB0cmFuc2l0aW9uOiBhbGwgMC40cyBlYXNlO1xyXG59XHJcblxyXG4udG9hc3QgLmljb24ge1xyXG4gIGZvbnQtc2l6ZTogMThweDtcclxuICBjb2xvcjogIzc3NztcclxuICBmbGV4LXNocmluazogMDtcclxufVxyXG5cclxuLnRvYXN0IC5tZXNzYWdlIHtcclxuICBmbGV4OiAxO1xyXG4gIHdoaXRlLXNwYWNlOiBwcmUtbGluZTtcclxuICBjb2xvcjogIzMzMztcclxufVxyXG5cclxuYm9keS5kYXJrLW1vZGUgLnRvYXN0IHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmRmZGZkICFpbXBvcnRhbnQ7XHJcbiAgY29sb3I6ICMyMjIgIWltcG9ydGFudDtcclxuICBib3JkZXI6IDFweCBzb2xpZCAjZGRkICFpbXBvcnRhbnQ7XHJcbn1cclxuXHJcbi50b2FzdC5zdWNjZXNzIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWNjZXNzLWNvbG9yKTtcclxuICBjb2xvcjogI2ZmZjtcclxuICBib3gtc2hhZG93OiAwIDAgMTZweCByZ2JhKDQwLCAxNjcsIDY5LCAwLjUpO1xyXG59XHJcblxyXG4udG9hc3QuZXJyb3Ige1xyXG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWRhbmdlci1jb2xvcik7XHJcbiAgY29sb3I6ICNmZmY7XHJcbiAgYm94LXNoYWRvdzogMCAwIDE4cHggcmdiYSgyMjAsIDUzLCA2OSwgMC43KTtcclxufVxyXG5cclxuLnRvYXN0Lndhcm5pbmcge1xyXG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXdhcm5pbmctY29sb3IpO1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0KTtcclxuICBib3gtc2hhZG93OiAwIDAgMTZweCByZ2JhKDI1NSwgMTkzLCA3LCAwLjcpO1xyXG59XHJcblxyXG4udG9hc3QuaW5mbyB7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0taW5mby1jb2xvcik7XHJcbiAgY29sb3I6ICNmZmY7XHJcbiAgYm94LXNoYWRvdzogMCAwIDE2cHggcmdiYSgyMywgMTYyLCAxODQsIDAuNik7XHJcbn1cclxuXHJcbkBrZXlmcmFtZXMgdG9hc3RJbiB7XHJcbiAgZnJvbSB7IG9wYWNpdHk6IDA7IHRyYW5zZm9ybTogdHJhbnNsYXRlWSgyMHB4KTsgfVxyXG4gIHRvICAgeyBvcGFjaXR5OiAxOyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7IH1cclxufVxyXG5cclxuQGtleWZyYW1lcyB0b2FzdE91dFN3aXBlIHtcclxuICBmcm9tIHsgb3BhY2l0eTogMTsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApOyB9XHJcbiAgdG8gICB7IG9wYWNpdHk6IDA7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgxMDAlKTsgfVxyXG59XHJcblxyXG4vKiAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcbiAgIPCfk6YgUGlsbHMgJiBBc3NpZ25tZW50IFN1bW1hcnlcclxuLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi9cclxuLmFzc2lnbm1lbnQtc3VtbWFyeSB7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBnYXA6IDZweDtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIGZsZXgtd3JhcDogbm93cmFwO1xyXG4gIG92ZXJmbG93LXg6IGF1dG87XHJcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcclxuICBtYXgtd2lkdGg6IDI0MHB4O1xyXG4gIHNjcm9sbGJhci13aWR0aDogdGhpbjtcclxufVxyXG5cclxuLmFzc2lnbm1lbnQtc3VtbWFyeTo6LXdlYmtpdC1zY3JvbGxiYXIge1xyXG4gIGhlaWdodDogNHB4O1xyXG59XHJcbi5hc3NpZ25tZW50LXN1bW1hcnk6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcclxuICBiYWNrZ3JvdW5kOiAjY2NjO1xyXG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XHJcbn1cclxuXHJcbiN1c2VyLWNvbXBhbnktcm9sZXMtbGlzdCB7XHJcbiAgbWFyZ2luLXRvcDogOHB4O1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICBnYXA6IDhweDtcclxufVxyXG5cclxuLnJvbGUtcGlsbCB7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcclxuICBiYWNrZ3JvdW5kOiAjZjJmMmY1O1xyXG4gIGJvcmRlci1yYWRpdXM6IDk5OXB4O1xyXG4gIHBhZGRpbmc6IDhweCAxNnB4O1xyXG4gIGZvbnQtc2l6ZTogMC45NGVtO1xyXG4gIGNvbG9yOiAjMzMzO1xyXG4gIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7XHJcbiAgbWF4LXdpZHRoOiAxMDAlO1xyXG4gIGJveC1zaGFkb3c6IDAgMXB4IDNweCByZ2JhKDAsIDAsIDAsIDAuMDQpO1xyXG59XHJcblxyXG4ucm9sZS1waWxsIC5iYWRnZSB7XHJcbiAgZm9udC1zaXplOiAwLjg1ZW07XHJcbiAgcGFkZGluZzogNXB4IDEycHg7XHJcbiAgYm9yZGVyLXJhZGl1czogOTk5cHg7XHJcbiAgZm9udC13ZWlnaHQ6IDYwMDtcclxuICB0ZXh0LXRyYW5zZm9ybTogY2FwaXRhbGl6ZTtcclxuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xyXG4gIGNvbG9yOiB3aGl0ZTtcclxufVxyXG5cclxuLnBpbGwtbWV0YSB7XHJcbiAgY29sb3I6ICM0NDQ7XHJcbiAgZm9udC1zaXplOiAwLjkyZW07XHJcbiAgbWFyZ2luLWxlZnQ6IDEycHg7XHJcbiAgZmxleC1ncm93OiAxO1xyXG4gIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XHJcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcclxufVxyXG5cclxuLnBpbGwtcmVtb3ZlLWJ0biB7XHJcbiAgYmFja2dyb3VuZDogI2U1MzkzNTtcclxuICBjb2xvcjogd2hpdGU7XHJcbiAgYm9yZGVyOiBub25lO1xyXG4gIGZvbnQtc2l6ZTogMS4yZW07XHJcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XHJcbiAgd2lkdGg6IDI2cHg7XHJcbiAgaGVpZ2h0OiAyNnB4O1xyXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcclxuICBkaXNwbGF5OiBmbGV4O1xyXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgbGluZS1oZWlnaHQ6IDE7XHJcbiAgY3Vyc29yOiBwb2ludGVyO1xyXG4gIHBhZGRpbmc6IDA7XHJcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjJzO1xyXG4gIG1hcmdpbi1sZWZ0OiAxMnB4O1xyXG59XHJcblxyXG4ucGlsbC1yZW1vdmUtYnRuOmhvdmVyIHtcclxuICBiYWNrZ3JvdW5kOiAjYzYyODI4O1xyXG59XHJcbiJdfQ== */ /* ======================================== * TABLE STYLES * ======================================== */ /* =============================== table.css Universal Table Styles Theme-aware: Light & Dark Mode (For use on ANY data table in the app) =============================== */ /* ===== Sortable Column Arrows ===== */ th.sortable { position: relative; text-align: left; padding-right: 24px; /* space for arrow */ cursor: pointer; } th.sorted-asc::after, th.sorted-desc::after { content: ''; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; } th.sorted-asc::after { border-bottom-color: var(--color-link); } th.sorted-desc::after { border-top-color: var(--color-link); } th.sortable .sort-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 0.85em; color: var(--color-link); pointer-events: none; user-select: none; } .center-col { text-align:center !important; } /* --- Table Area Wrapper (enables horizontal scrolling) --- */ .data-table-container { width: 100%; overflow-x: auto; margin-top: 18px; } /* --- Main Table Styles --- */ .data-table { width: 100%; border-collapse: collapse; background: var(--background-header); border-radius: 12px; box-shadow: 0 2px 16px #0001; overflow: hidden; } /* --- Table Cell & Header Styles --- */ .data-table th, .data-table td { padding: 13px 10px; border: 1px solid var(--color-border); color: var(--color-text); text-align: left; } .data-table th { background: var(--background-nav); font-weight: bold; } /* === Remove built-in nth-child striping in favor of class-based! === */ /* .data-table tr:nth-child(even) { background: var(--background-main); } */ /* --- Zebra Striping via Classes (for dynamic filtering/deletes) --- */ .data-table tr.even-row { background: var(--row-bg-even) !important; } .data-table tr.odd-row { background: var(--row-bg-odd) !important; } .data-table th { background: var(--row-bg-odd) !important; } /* --- Hover Row --- */ .data-table tr:hover { background: var(--background-footer) !important; transition: background 0.11s; } /* --- Table Actions (Edit/Delete) --- */ .table-actions button, .table-actions a { margin-right: 7px; padding: 5px 15px; background: var(--primary-color); border: none; border-radius: 5px; color: #fff; font-size: 0.97em; cursor: pointer; transition: background 0.15s; text-decoration: none; } .table-actions button:last-child, .table-actions a:last-child { margin-right: 0; } .table-actions button:hover, .table-actions a:hover { background: var(--primary-hover); } .table-actions .send-reset-btn { background: var(--info-color); } .table-actions .send-reset-btn:hover { background: #138496; } /* --- No Data Row --- */ .data-table .no-data { text-align: center; font-style: italic; color: var(--color-muted); background: transparent; } /* --- Actions Cell Alignment --- */ .data-table td.actions-cell { text-align: center; } /* --- Optional Column Widths --- */ .data-table th.username-col, .data-table td.username-col { width: 180px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Responsive Table Adjustments --- */ /* --- Alignment Utilities --- */ .data-table th, .data-table td { text-align: left; } .data-table th.status-col, .data-table td.status-col, .data-table th.assignments-col, .data-table td.assignments-col, .data-table th.actions-col, .data-table td.actions-col, .data-table th.phone-col, .data-table td.phone-col { text-align: center; } .btn-icon { background: transparent; border: none; padding: 4px 6px; color: var(--danger-color, #c62828); font-size: 1.15em; cursor: pointer; vertical-align: middle; margin-left: 7px; margin-right: 0; } .btn-icon:hover { background: #ffdada; color: #a00; border-radius: 3px; } .btn-reactivate, .btn-hard-delete { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 7px; font-size: 1em; font-weight: 700; padding: 6px 16px; cursor: pointer; box-shadow: none; transition: background 0.18s, box-shadow 0.18s; margin-right: 7px; margin-bottom: 0; margin-top: 2px; } .btn-reactivate { background: #22c46e; color: #fff; } .btn-reactivate:hover, .btn-reactivate:focus { background: #159a52; color: #fff; } .btn-hard-delete { background: #e54848; color: #fff; } .btn-hard-delete:hover, .btn-hard-delete:focus { background: #b32222; color: #fff; } .reactivate-icon, .delete-icon { font-size: 1.1em; display: flex; align-items: center; } /* === Both Desktop Table and Card (use shared class for horizontal button rows) === */ .user-card-actions-horizontal, .actions-col { display: flex; flex-direction: row; gap: 14px; justify-content: center; align-items: center; } /* All horizontal action buttons (Reactivate + Delete) get the same width */ .user-card-actions-horizontal .btn-reactivate, .user-card-actions-horizontal .btn-hard-delete, .actions-col .btn-reactivate, .actions-col .btn-hard-delete { flex: 1 1 0; min-width: 130px; max-width: 180px; justify-content: center; margin: 0; } /* ===== END table.css ===== */ /* ======================================== * MODAL OVERRIDES * ======================================== */ /* =============================== modal.css – Cleaned & Reusable Modal Styles Used by: users, companies, leases, reset-password, etc. =============================== */ /* ------------------------------- Modal Background Overlay ------------------------------- */ .modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--modal-overlay-bg, rgba(200, 200, 220, 0.5)); justify-content: center; align-items: center; z-index: 10010; overflow-y: auto; } .modal-bg.active { display: flex; } .modal-bg.confirm-modal { z-index: 11020 !important; } /* ------------------------------- Modal Panel (Core) ------------------------------- */ .modal-panel { background: var(--background-panel, #fff); color: var(--color-text, #232225); border-radius: 14px; padding: 36px 38px 32px; width: 98%; max-width: 800px; min-width: 320px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 44px #000c, 0 2px 10px rgba(0, 188, 212, 0.27); position: relative; margin: auto; transition: background 0.3s, color 0.3s; } .modal-panel h3 { margin: 0 0 18px; font-size: 1.32em; font-weight: bold; color: var(--color-link, var(--primary-color, #00BCD4)); } /* Center reset-password modal vertically */ .reset-container { display: flex; flex-direction: column; justify-content: center; margin: auto; } /* ------------------------------- Modal Form Layout ------------------------------- */ .modal-fields { display: flex; flex-wrap: wrap; gap: 0 36px; margin-bottom: 10px; } .field-group { flex: 1 1 45%; min-width: 220px; margin-bottom: 22px; display: flex; flex-direction: column; } .field-group.full-width { flex-basis: 100%; min-width: 0; } /* ------------------------------- Inputs, Labels, Textareas ------------------------------- */ .modal-panel label { color: var(--color-muted, #666); margin-bottom: 5px; font-size: 1em; font-weight: 500; } .modal-panel input, .modal-panel select, .modal-panel textarea { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--color-border, #d3d6e2); background: var(--background-control, #f7f7f8); color: var(--color-text, #232225); font-size: 1em; box-sizing: border-box; transition: all 0.3s; } .modal-panel input:focus, .modal-panel select:focus, .modal-panel textarea:focus { outline: none; border-color: var(--primary-color, #00BCD4); box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.13); } /* ------------------------------- Password Requirements List ------------------------------- */ .password-requirements { color: var(--danger-color, #c00); font-size: 0.875rem; margin-bottom: 1rem; } .password-requirements ul { list-style: none; padding-left: 0; margin: 0; } .password-requirements li { position: relative; padding-left: 1.25em; margin-bottom: 0.5em; } .password-requirements li::before { content: '✗'; position: absolute; left: 0; top: 0; color: inherit; } .password-requirements li.met::before { content: '✓'; color: var(--success-color, green); } /* ------------------------------- Dark Mode Overrides (Inputs / Labels) ------------------------------- */ body.dark-mode .modal-panel input:disabled { color: var(--color-muted, #666) !important; } body.dark-mode .modal-panel input, body.dark-mode .modal-panel select, body.dark-mode .modal-panel textarea { background: var(--background-control, #f7f7f8) !important; color: var(--color-text, #232225) !important; border: 1px solid var(--color-border, #d3d6e2); } body.dark-mode .modal-panel label { color: var(--color-text, #bbb); } /* --------------------------------- Close Button (“X”) in upper right ----------------------------------- */ .modal-panel .close-modal { /* Use your --danger-color for the red background */ background: var(--danger-color, #c62828); /* Make the “X” itself use the text color variable */ color: var(--color-on-panel, #fff); border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 1.7em; cursor: pointer; position: absolute; top: 20px; right: 9px; z-index: 99; transition: background 0.2s; } /* On hover, darken your danger‐color by 10% (fallback to #a31515) */ .modal-panel .close-modal:hover { background: hsl( /* If you’re using HSL in your variable, this will inherit. If not, the fallback below kicks in. */ var(--danger-hue, 0), var(--danger-saturation, 84%), calc(var(--danger-lightness, 54%) - 10%) ) /* Fallback to literal #a31515 if the above calc() can’t be parsed */ /* You can also simply hard‐code “background: #a31515;” if you don’t need the HSL‐calc approach. */ /* Example fallback: background: darken(var(--danger-color, #c62828), 10%); (Use a preprocessor or leave the hex #a31515 here.) */ ; } /* ------------------------------- Modal Footer & Actions ------------------------------- */ .modal-footer, .modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--color-seperator, #ccc); padding-top: 20px; } .left-actions, .right-actions { display: flex; gap: 12px; } .left-actions { justify-content: flex-start; } .right-actions { justify-content: flex-end; } /* ------------------------------- Buttons (Primary, Secondary, Critical) ------------------------------- */ /* Primary button (“Save Changes”, etc.) */ .btn-primary, .confirm-modal .btn-primary { background-color: var(--primary-color, #00BCD4); /* Instead of “color: white;”, use your text‐on‐primary variable, or fallback to #fff */ color: var(--color-on-panel, #fff); border: none; border-radius: 6px; font-size: 1em; padding: 12px 18px; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: background 0.2s; } .btn-primary:hover { background-color: var(--primary-hover, #0097a7); } /* Secondary button (“Cancel”) */ .btn-secondary, .confirm-modal .btn-secondary { background-color: var(--secondary-color, #e0e0e0); /* Instead of “color: #333;”, use var(--color-text) or a dedicated variable */ color: var(--color-text, #333); border: 1px solid var(--color-border, #ccc); border-radius: 6px; font-size: 1em; padding: 12px 18px; font-weight: 600; transition: background 0.2s; } .btn-secondary:hover { background-color: var(--secondary-hover, #d5d5d5); } /* Critical button (“Delete User”) */ .btn-critical { background-color: var(--danger-color, #e53935); /* Make sure the “Delete” text remains legible—use var(--background-panel) or var(--color-text) */ color: var(--color-on-panel, #fff); border: none; border-radius: 6px; font-size: 0.9em; padding: 8px 14px; font-weight: 600; opacity: 0.85; transition: background 0.2s, opacity 0.2s; } .btn-critical:hover { background-color: var(--danger-color, #c62828); opacity: 1; } /* ------------------------------- Confirm Modal Variants (e.g. delete/hard-delete/reactivate) ------------------------------- */ #confirm-role-remove-modal .modal-panel, #confirm-delete-modal .modal-panel, #confirm-unsaved-modal .modal-panel, #confirm-hard-delete-modal .modal-panel, #confirm-reactivate-modal .modal-panel { background: var(--background-panel, #fff); color: var(--color-text, #232225); max-width: 480px; padding: 24px 32px; border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); text-align: left; transition: background 0.3s, color 0.3s; } #confirm-role-remove-modal h3, #confirm-delete-modal h3, #confirm-unsaved-modal h3, #confirm-hard-delete-modal h3, #confirm-reactivate-modal h3 { margin-top: 0; margin-bottom: 16px; font-size: 20px; color: var(--color-link, var(--primary-color, #00BCD4)); } #confirm-role-remove-modal p, #confirm-delete-modal p, #confirm-unsaved-modal p, #confirm-hard-delete-modal p, #confirm-reactivate-modal p { font-size: 16px; margin-bottom: 24px; line-height: 1.5; } /* ------------------------------- Marked Role for Pending Deletion ------------------------------- */ .role-row.marked-for-removal { opacity: 0.5; font-style: italic; position: relative; } .role-row.marked-for-removal::after { content: "Marked for Removal"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--danger-color); background: rgba(211, 47, 47, 0.1); border: 2px solid var(--danger-color); border-radius: 6px; padding: 4px 10px; } /* Dark mode adjustment */ body.dark-mode .role-row.marked-for-removal::after { background: rgba(255, 82, 82, 0.15); } /* ------------------------------- Inline “Marked for…” alerts ------------------------------- */ .inline-alert { margin: 0 8px; border-radius: 6px; padding: 4px 10px; font-size: 0.9em; font-weight: 500; display: inline-block; vertical-align: middle; border: 2px solid; } /* WCAG AA Compliant Alert Colors */ .inline-alert.alert-danger { border-color: var(--danger-color); color: var(--danger-color); background: rgba(211, 47, 47, 0.1); } .inline-alert.alert-success { border-color: var(--success-color); color: var(--success-color); background: rgba(46, 125, 50, 0.1); } .inline-alert.alert-warning { border-color: var(--warning-color); color: var(--warning-color); background: rgba(245, 124, 0, 0.1); } .inline-alert.alert-info { border-color: var(--info-color); color: var(--info-color); background: rgba(2, 119, 189, 0.1); } /* Dark mode - use darker backgrounds */ body.dark-mode .inline-alert.alert-danger { background: rgba(255, 82, 82, 0.15); } body.dark-mode .inline-alert.alert-success { background: rgba(102, 187, 106, 0.15); } body.dark-mode .inline-alert.alert-warning { background: rgba(255, 167, 38, 0.15); } body.dark-mode .inline-alert.alert-info { background: rgba(41, 182, 246, 0.15); } /* ------------------------------- Superadmin Icon ------------------------------- */ .superadmin-icon { color: gold; margin-left: 4px; font-size: 1em; vertical-align: top; } /* ------------------------------- Form Groups (Superadmin, Send-setup) ------------------------------- */ .form-group.superadmin-toggle, .form-group.send-setup { flex-basis: 100%; margin: 0 0 8px; display: flex; align-items: baseline; gap: 0.5rem; } .form-group.superadmin-toggle label, .form-group.send-setup label { display: flex; align-items: center; margin: 0; white-space: nowrap; } .form-group.superadmin-toggle small, .form-group.send-setup small { margin: 0; font-size: 0.9em; color: var(--color-muted, #666); } #super-admin-checkbox { margin-right: 0.5em; } /* ------------------------------- Add-Role Header ------------------------------- */ .add-role-header { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; margin: 20px 0 6px; } .add-role-header h4 { margin: 0; font-size: 1.2em; color: var(--color-text, #232225); } .add-role-header button { margin: 0; } .add-role-header + .modal-fields { margin-top: 0; } /* Cleanup first .modal-fields margin */ .modal-panel > .modal-fields.two-column-layout:first-of-type { margin-bottom: 0; } .modal-fields.superadmin-row { margin-top: 0; margin-bottom: 10px; } /* ------------------------------- Disabled Inputs ------------------------------- */ .disabled-input, .modal-panel input:disabled { background-color: var(--color-border, #d3d3d3) !important; border-color: #999 !important; color: var(--color-muted, #666) !important; cursor: not-allowed; } /* ------------------------------- Center only on reset-password page ------------------------------- */ body.reset-password-page { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } /* ------------------------------- Error Message Styling ------------------------------- */ .error-message { color: var(--danger-color, #c00); font-size: 0.875rem; margin-bottom: 1rem; } /* ------------------------------- Move help-links into bottom-right of reset-password panel ------------------------------- */ .reset-container { position: relative; } .reset-container .help-links { position: absolute; bottom: 20px; /* adjust padding as desired */ right: 20px; /* adjust padding as desired */ margin: 0; font-size: 0.9em; } /* ------------------------------- “Forgot Password” Container (Mobile) ------------------------------- */ .forgot-container { max-width: 410px; margin: 60px auto 0; padding: 36px 38px 32px; border-radius: 14px; background: var(--background-panel, #fff); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.01), 0 2px 8px rgba(0, 188, 212, 0.14); } .forgot-container h1 { color: var(--primary-color, #00BCD4); font-size: 1.6em; margin-bottom: 20px; } .forgot-container .success-message { color: var(--success-color, #155724); background: #d4edda; border: 1px solid #c3e6cb; border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; font-size: 1em; } .forgot-container .error-message { color: #b32020; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 6px; padding: 14px 16px; margin-bottom: 18px; font-size: 1em; } .forgot-container .modal-footer { border-top: none; margin-top: 16px; padding-top: 0; justify-content: flex-end; } .forgot-container .help-links { text-align: right; margin-top: 24px; font-size: 0.97em; } /* ================================ End of modal.css ================================ */ /* ======================================== * LOGIN/AUTH PAGES * ======================================== */ /* =============================== login.css – Standalone Login Page Styling Used by: index.php =============================== */ body.login { margin: 0; padding: 0; background: var(--background-main, #f5f6fa); font-family: var(--font-family-base, 'Segoe UI', sans-serif); color: var(--color-text, #212225); display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-container { background: var(--background-panel, #fff); border-radius: 14px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); padding: 40px 50px; max-width: 420px; width: 100%; text-align: center; } .login-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; } .product-logo-image { height: 150px; vertical-align: middle; } .product-logo { font-size: 1.4em; font-weight: 700; color: var(--color-link, #00BCD4); } .login-form-wrapper h2 { font-size: 1.4em; margin-bottom: 18px; color: var(--color-text); } .login-form-wrapper form { text-align: left; } .login-form-wrapper input[type="text"], .login-form-wrapper input[type="password"] { width: 100%; padding: 10px 12px; font-size: 1em; border: 1px solid var(--color-border, #ccc); border-radius: 6px; background: var(--background-control, #fff); box-sizing: border-box; margin-top: 5px; } .login-form-wrapper button[type="submit"] { width: 100%; background-color: var(--primary-color); color: white; padding: 12px; font-size: 1em; border: none; border-radius: 6px; cursor: pointer; margin-top: 20px; transition: background-color 0.2s ease; } .login-form-wrapper button[type="submit"]:hover { background-color: var(--primary-hover); } .login-error { color: var(--danger-color, #c62828); margin-top: 12px; display: none; font-size: 0.95em; text-align: center; } .or-divider { text-align: center; margin: 20px 0 10px; color: var(--color-muted); font-weight: 500; } .btn-google { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #ccc; padding: 10px 16px; font-size: 0.96em; font-weight: 600; color: #444; border-radius: 6px; text-decoration: none; transition: background 0.2s, border-color 0.2s; width: 100%; } .btn-google:hover { background: #f5f5f5; border-color: #bbb; } .google-icon { height: 20px; margin-right: 10px; } .login-container p { margin-top: 18px; font-size: 0.9em; color: var(--color-muted); } /* =============================== Dark Mode Overrides for Login Page =============================== */ body.login.dark-mode { background: var(--background-main, #1e1e1e); } body.login.dark-mode .login-container { background: var(--background-panel, #2e2e2e); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); color: var(--color-text, #eee); } body.login.dark-mode input[type="text"], body.login.dark-mode input[type="password"] { background: var(--background-control, #3a3a3a); color: #f0f0f0; border-color: #555; } body.login.dark-mode .btn-google { background: #444; color: #eee; border-color: #555; } body.login.dark-mode .btn-google:hover { background: #555; border-color: #777; } body.login.dark-mode .or-divider, body.login.dark-mode p { color: var(--color-muted, #aaa); } .form-group { position: relative; } .pwd-bubble { position: absolute; left: 105%; top: 0; min-width: 230px; background: #fff; color: #222; border: 1.5px solid #dedede; border-radius: 8px; box-shadow: 0 2px 14px 0 #0012; padding: 12px 18px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.25s; font-size: 0.97em; } .pwd-bubble.active { opacity: 1; pointer-events: auto; } .pwd-bubble ul { list-style: none; margin: 0; padding: 0; } .pwd-bubble li { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; color: #a33333; } .pwd-bubble li.met { color: #298e46; text-decoration: none; } .pwd-bubble .bubble-icon { font-size: 1.1em; } .pwd-match-bubble { color: #d11a1a; margin-top: 5px; min-height: 18px; font-size: 0.98em; transition: opacity 0.18s; opacity: 0; } .pwd-match-bubble.active { opacity: 1; } .input-error { border-color: #d11a1a !important; } /* =================================================== Let reset-password bubbles float outside the panel =================================================== */ /* Only on the reset password page: */ body.reset-password-page .modal-panel, body.reset-password-page .reset-container { position: relative !important; /* establish containing block */ overflow: visible !important; /* allow children to overflow */ } /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvZ2luLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O29DQUdvQzs7QUFFcEM7RUFDRSxTQUFTO0VBQ1QsVUFBVTtFQUNWLDJDQUEyQztFQUMzQyw0REFBNEQ7RUFDNUQsaUNBQWlDO0VBQ2pDLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsdUJBQXVCO0VBQ3ZCLGlCQUFpQjtBQUNuQjs7QUFFQTtFQUNFLHlDQUF5QztFQUN6QyxtQkFBbUI7RUFDbkIseUNBQXlDO0VBQ3pDLGtCQUFrQjtFQUNsQixnQkFBZ0I7RUFDaEIsV0FBVztFQUNYLGtCQUFrQjtBQUNwQjs7QUFFQTtFQUNFLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsdUJBQXVCO0VBQ3ZCLFNBQVM7RUFDVCxtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSxZQUFZO0FBQ2Q7O0FBRUE7RUFDRSxnQkFBZ0I7RUFDaEIsZ0JBQWdCO0VBQ2hCLGlDQUFpQztBQUNuQzs7QUFFQTtFQUNFLGdCQUFnQjtFQUNoQixtQkFBbUI7RUFDbkIsd0JBQXdCO0FBQzFCOztBQUVBO0VBQ0UsZ0JBQWdCO0FBQ2xCOztBQUVBOztFQUVFLFdBQVc7RUFDWCxrQkFBa0I7RUFDbEIsY0FBYztFQUNkLDJDQUEyQztFQUMzQyxrQkFBa0I7RUFDbEIsMkNBQTJDO0VBQzNDLHNCQUFzQjtFQUN0QixlQUFlO0FBQ2pCOztBQUVBO0VBQ0UsV0FBVztFQUNYLHNDQUFzQztFQUN0QyxZQUFZO0VBQ1osYUFBYTtFQUNiLGNBQWM7RUFDZCxZQUFZO0VBQ1osa0JBQWtCO0VBQ2xCLGVBQWU7RUFDZixnQkFBZ0I7RUFDaEIsc0NBQXNDO0FBQ3hDOztBQUVBO0VBQ0Usc0NBQXNDO0FBQ3hDOztBQUVBO0VBQ0UsbUNBQW1DO0VBQ25DLGdCQUFnQjtFQUNoQixhQUFhO0VBQ2IsaUJBQWlCO0VBQ2pCLGtCQUFrQjtBQUNwQjs7QUFFQTtFQUNFLGtCQUFrQjtFQUNsQixtQkFBbUI7RUFDbkIseUJBQXlCO0VBQ3pCLGdCQUFnQjtBQUNsQjs7QUFFQTtFQUNFLG9CQUFvQjtFQUNwQixtQkFBbUI7RUFDbkIsdUJBQXVCO0VBQ3ZCLGdCQUFnQjtFQUNoQixzQkFBc0I7RUFDdEIsa0JBQWtCO0VBQ2xCLGlCQUFpQjtFQUNqQixnQkFBZ0I7RUFDaEIsV0FBVztFQUNYLGtCQUFrQjtFQUNsQixxQkFBcUI7RUFDckIsOENBQThDO0VBQzlDLFdBQVc7QUFDYjs7QUFFQTtFQUNFLG1CQUFtQjtFQUNuQixrQkFBa0I7QUFDcEI7O0FBRUE7RUFDRSxZQUFZO0VBQ1osa0JBQWtCO0FBQ3BCOztBQUVBO0VBQ0UsZ0JBQWdCO0VBQ2hCLGdCQUFnQjtFQUNoQix5QkFBeUI7QUFDM0I7O0FBRUE7O29DQUVvQztBQUNwQztFQUNFLDJDQUEyQztBQUM3Qzs7QUFFQTtFQUNFLDRDQUE0QztFQUM1Qyx5Q0FBeUM7RUFDekMsOEJBQThCO0FBQ2hDOztBQUVBOztFQUVFLDhDQUE4QztFQUM5QyxjQUFjO0VBQ2Qsa0JBQWtCO0FBQ3BCOztBQUVBO0VBQ0UsZ0JBQWdCO0VBQ2hCLFdBQVc7RUFDWCxrQkFBa0I7QUFDcEI7O0FBRUE7RUFDRSxnQkFBZ0I7RUFDaEIsa0JBQWtCO0FBQ3BCOztBQUVBOztFQUVFLCtCQUErQjtBQUNqQzs7QUFFQSxjQUFjLGtCQUFrQixFQUFFO0lBQzlCO01BQ0Usa0JBQWtCO01BQ2xCLFVBQVU7TUFDVixNQUFNO01BQ04sZ0JBQWdCO01BQ2hCLGdCQUFnQjtNQUNoQixXQUFXO01BQ1gsMkJBQTJCO01BQzNCLGtCQUFrQjtNQUNsQiw4QkFBOEI7TUFDOUIsa0JBQWtCO01BQ2xCLFdBQVc7TUFDWCxVQUFVO01BQ1Ysb0JBQW9CO01BQ3BCLHlCQUF5QjtNQUN6QixpQkFBaUI7SUFDbkI7SUFDQTtNQUNFLFVBQVU7TUFDVixvQkFBb0I7SUFDdEI7SUFDQTtNQUNFLGdCQUFnQjtNQUNoQixTQUFTLEVBQUUsVUFBVTtJQUN2QjtJQUNBO01BQ0UsYUFBYTtNQUNiLG1CQUFtQjtNQUNuQixRQUFRO01BQ1Isa0JBQWtCO01BQ2xCLGNBQWM7SUFDaEI7SUFDQTtNQUNFLGNBQWM7TUFDZCxxQkFBcUI7SUFDdkI7SUFDQTtNQUNFLGdCQUFnQjtJQUNsQjtJQVVBO01BQ0UsY0FBYztNQUNkLGVBQWU7TUFDZixnQkFBZ0I7TUFDaEIsaUJBQWlCO01BQ2pCLHlCQUF5QjtNQUN6QixVQUFVO0lBQ1o7SUFDQTtNQUNFLFVBQVU7SUFDWjtJQUNBO01BQ0UsZ0NBQWdDO0lBQ2xDO0FBQ0o7O3dEQUV3RDs7QUFFeEQscUNBQXFDO0FBQ3JDOztFQUVFLDZCQUE2QixJQUFJLCtCQUErQjtFQUNoRSwrQkFBK0IsRUFBRSwrQkFBK0I7QUFDbEUiLCJmaWxlIjoibG9naW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxyXG4gICBsb2dpbi5jc3Mg4oCTIFN0YW5kYWxvbmUgTG9naW4gUGFnZSBTdHlsaW5nXHJcbiAgIFVzZWQgYnk6IGluZGV4LnBocFxyXG4gICA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09ICovXHJcblxyXG5ib2R5LmxvZ2luIHtcclxuICBtYXJnaW46IDA7XHJcbiAgcGFkZGluZzogMDtcclxuICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLW1haW4sICNmNWY2ZmEpO1xyXG4gIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1iYXNlLCAnU2Vnb2UgVUknLCBzYW5zLXNlcmlmKTtcclxuICBjb2xvcjogdmFyKC0tY29sb3ItdGV4dCwgIzIxMjIyNSk7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gIG1pbi1oZWlnaHQ6IDEwMHZoO1xyXG59XHJcblxyXG4ubG9naW4tY29udGFpbmVyIHtcclxuICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLXBhbmVsLCAjZmZmKTtcclxuICBib3JkZXItcmFkaXVzOiAxNHB4O1xyXG4gIGJveC1zaGFkb3c6IDAgNnB4IDMwcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xyXG4gIHBhZGRpbmc6IDQwcHggNTBweDtcclxuICBtYXgtd2lkdGg6IDQyMHB4O1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIHRleHQtYWxpZ246IGNlbnRlcjtcclxufVxyXG5cclxuLmxvZ2luLWhlYWRlciB7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gIGdhcDogMTJweDtcclxuICBtYXJnaW4tYm90dG9tOiAyMHB4O1xyXG59XHJcblxyXG4ucHJvZHVjdC1sb2dvLWltYWdlIHtcclxuICBoZWlnaHQ6IDUwcHg7XHJcbn1cclxuXHJcbi5wcm9kdWN0LWxvZ28ge1xyXG4gIGZvbnQtc2l6ZTogMS40ZW07XHJcbiAgZm9udC13ZWlnaHQ6IDcwMDtcclxuICBjb2xvcjogdmFyKC0tY29sb3ItbGluaywgIzAwQkNENCk7XHJcbn1cclxuXHJcbi5sb2dpbi1mb3JtLXdyYXBwZXIgaDIge1xyXG4gIGZvbnQtc2l6ZTogMS40ZW07XHJcbiAgbWFyZ2luLWJvdHRvbTogMThweDtcclxuICBjb2xvcjogdmFyKC0tY29sb3ItdGV4dCk7XHJcbn1cclxuXHJcbi5sb2dpbi1mb3JtLXdyYXBwZXIgZm9ybSB7XHJcbiAgdGV4dC1hbGlnbjogbGVmdDtcclxufVxyXG5cclxuLmxvZ2luLWZvcm0td3JhcHBlciBpbnB1dFt0eXBlPVwidGV4dFwiXSxcclxuLmxvZ2luLWZvcm0td3JhcHBlciBpbnB1dFt0eXBlPVwicGFzc3dvcmRcIl0ge1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIHBhZGRpbmc6IDEwcHggMTJweDtcclxuICBmb250LXNpemU6IDFlbTtcclxuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb2xvci1ib3JkZXIsICNjY2MpO1xyXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcclxuICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLWNvbnRyb2wsICNmZmYpO1xyXG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbiAgbWFyZ2luLXRvcDogNXB4O1xyXG59XHJcblxyXG4ubG9naW4tZm9ybS13cmFwcGVyIGJ1dHRvblt0eXBlPVwic3VibWl0XCJdIHtcclxuICB3aWR0aDogMTAwJTtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yKTtcclxuICBjb2xvcjogd2hpdGU7XHJcbiAgcGFkZGluZzogMTJweDtcclxuICBmb250LXNpemU6IDFlbTtcclxuICBib3JkZXI6IG5vbmU7XHJcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xyXG4gIGN1cnNvcjogcG9pbnRlcjtcclxuICBtYXJnaW4tdG9wOiAyMHB4O1xyXG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4ycyBlYXNlO1xyXG59XHJcblxyXG4ubG9naW4tZm9ybS13cmFwcGVyIGJ1dHRvblt0eXBlPVwic3VibWl0XCJdOmhvdmVyIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWhvdmVyKTtcclxufVxyXG5cclxuLmxvZ2luLWVycm9yIHtcclxuICBjb2xvcjogdmFyKC0tZGFuZ2VyLWNvbG9yLCAjYzYyODI4KTtcclxuICBtYXJnaW4tdG9wOiAxMnB4O1xyXG4gIGRpc3BsYXk6IG5vbmU7XHJcbiAgZm9udC1zaXplOiAwLjk1ZW07XHJcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG59XHJcblxyXG4ub3ItZGl2aWRlciB7XHJcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gIG1hcmdpbjogMjBweCAwIDEwcHg7XHJcbiAgY29sb3I6IHZhcigtLWNvbG9yLW11dGVkKTtcclxuICBmb250LXdlaWdodDogNTAwO1xyXG59XHJcblxyXG4uYnRuLWdvb2dsZSB7XHJcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICBiYWNrZ3JvdW5kOiAjZmZmO1xyXG4gIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7XHJcbiAgcGFkZGluZzogMTBweCAxNnB4O1xyXG4gIGZvbnQtc2l6ZTogMC45NmVtO1xyXG4gIGZvbnQtd2VpZ2h0OiA2MDA7XHJcbiAgY29sb3I6ICM0NDQ7XHJcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xyXG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcclxuICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kIDAuMnMsIGJvcmRlci1jb2xvciAwLjJzO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG59XHJcblxyXG4uYnRuLWdvb2dsZTpob3ZlciB7XHJcbiAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcclxuICBib3JkZXItY29sb3I6ICNiYmI7XHJcbn1cclxuXHJcbi5nb29nbGUtaWNvbiB7XHJcbiAgaGVpZ2h0OiAyMHB4O1xyXG4gIG1hcmdpbi1yaWdodDogMTBweDtcclxufVxyXG5cclxuLmxvZ2luLWNvbnRhaW5lciBwIHtcclxuICBtYXJnaW4tdG9wOiAxOHB4O1xyXG4gIGZvbnQtc2l6ZTogMC45ZW07XHJcbiAgY29sb3I6IHZhcigtLWNvbG9yLW11dGVkKTtcclxufVxyXG5cclxuLyogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxyXG4gICBEYXJrIE1vZGUgT3ZlcnJpZGVzIGZvciBMb2dpbiBQYWdlXHJcbiAgID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cclxuYm9keS5sb2dpbi5kYXJrLW1vZGUge1xyXG4gIGJhY2tncm91bmQ6IHZhcigtLWJhY2tncm91bmQtbWFpbiwgIzFlMWUxZSk7XHJcbn1cclxuXHJcbmJvZHkubG9naW4uZGFyay1tb2RlIC5sb2dpbi1jb250YWluZXIge1xyXG4gIGJhY2tncm91bmQ6IHZhcigtLWJhY2tncm91bmQtcGFuZWwsICMyZTJlMmUpO1xyXG4gIGJveC1zaGFkb3c6IDAgNHB4IDE2cHggcmdiYSgwLCAwLCAwLCAwLjYpO1xyXG4gIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0LCAjZWVlKTtcclxufVxyXG5cclxuYm9keS5sb2dpbi5kYXJrLW1vZGUgaW5wdXRbdHlwZT1cInRleHRcIl0sXHJcbmJvZHkubG9naW4uZGFyay1tb2RlIGlucHV0W3R5cGU9XCJwYXNzd29yZFwiXSB7XHJcbiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZC1jb250cm9sLCAjM2EzYTNhKTtcclxuICBjb2xvcjogI2YwZjBmMDtcclxuICBib3JkZXItY29sb3I6ICM1NTU7XHJcbn1cclxuXHJcbmJvZHkubG9naW4uZGFyay1tb2RlIC5idG4tZ29vZ2xlIHtcclxuICBiYWNrZ3JvdW5kOiAjNDQ0O1xyXG4gIGNvbG9yOiAjZWVlO1xyXG4gIGJvcmRlci1jb2xvcjogIzU1NTtcclxufVxyXG5cclxuYm9keS5sb2dpbi5kYXJrLW1vZGUgLmJ0bi1nb29nbGU6aG92ZXIge1xyXG4gIGJhY2tncm91bmQ6ICM1NTU7XHJcbiAgYm9yZGVyLWNvbG9yOiAjNzc3O1xyXG59XHJcblxyXG5ib2R5LmxvZ2luLmRhcmstbW9kZSAub3ItZGl2aWRlcixcclxuYm9keS5sb2dpbi5kYXJrLW1vZGUgcCB7XHJcbiAgY29sb3I6IHZhcigtLWNvbG9yLW11dGVkLCAjYWFhKTtcclxufVxyXG5cclxuLmZvcm0tZ3JvdXAgeyBwb3NpdGlvbjogcmVsYXRpdmU7IH1cclxuICAgIC5wd2QtYnViYmxlIHtcclxuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgICBsZWZ0OiAxMDUlO1xyXG4gICAgICB0b3A6IDA7XHJcbiAgICAgIG1pbi13aWR0aDogMjMwcHg7XHJcbiAgICAgIGJhY2tncm91bmQ6ICNmZmY7XHJcbiAgICAgIGNvbG9yOiAjMjIyO1xyXG4gICAgICBib3JkZXI6IDEuNXB4IHNvbGlkICNkZWRlZGU7XHJcbiAgICAgIGJvcmRlci1yYWRpdXM6IDhweDtcclxuICAgICAgYm94LXNoYWRvdzogMCAycHggMTRweCAwICMwMDEyO1xyXG4gICAgICBwYWRkaW5nOiAxMnB4IDE4cHg7XHJcbiAgICAgIHotaW5kZXg6IDMwO1xyXG4gICAgICBvcGFjaXR5OiAwO1xyXG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcclxuICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjI1cztcclxuICAgICAgZm9udC1zaXplOiAwLjk3ZW07XHJcbiAgICB9XHJcbiAgICAucHdkLWJ1YmJsZS5hY3RpdmUge1xyXG4gICAgICBvcGFjaXR5OiAxO1xyXG4gICAgICBwb2ludGVyLWV2ZW50czogYXV0bztcclxuICAgIH1cclxuICAgIC5wd2QtYnViYmxlIHVsIHtcclxuICAgICAgbGlzdC1zdHlsZTogbm9uZTtcclxuICAgICAgbWFyZ2luOiAwOyBwYWRkaW5nOiAwO1xyXG4gICAgfVxyXG4gICAgLnB3ZC1idWJibGUgbGkge1xyXG4gICAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAgICBnYXA6IDdweDtcclxuICAgICAgbWFyZ2luLWJvdHRvbTogM3B4O1xyXG4gICAgICBjb2xvcjogI2EzMzMzMztcclxuICAgIH1cclxuICAgIC5wd2QtYnViYmxlIGxpLm1ldCB7XHJcbiAgICAgIGNvbG9yOiAjMjk4ZTQ2O1xyXG4gICAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XHJcbiAgICB9XHJcbiAgICAucHdkLWJ1YmJsZSAuYnViYmxlLWljb24ge1xyXG4gICAgICBmb250LXNpemU6IDEuMWVtO1xyXG4gICAgfVxyXG4gICAgQG1lZGlhIChtYXgtd2lkdGg6IDcwMHB4KSB7XHJcbiAgICAgIC5wd2QtYnViYmxlIHtcclxuICAgICAgICBwb3NpdGlvbjogc3RhdGljO1xyXG4gICAgICAgIG1pbi13aWR0aDogdW5zZXQ7XHJcbiAgICAgICAgbWFyZ2luOiA4cHggMCAwIDA7XHJcbiAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcclxuICAgICAgICBib3JkZXI6IDEuNXB4IHNvbGlkICNiYmI7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgIC5wd2QtbWF0Y2gtYnViYmxlIHtcclxuICAgICAgY29sb3I6ICNkMTFhMWE7XHJcbiAgICAgIG1hcmdpbi10b3A6IDVweDtcclxuICAgICAgbWluLWhlaWdodDogMThweDtcclxuICAgICAgZm9udC1zaXplOiAwLjk4ZW07XHJcbiAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgMC4xOHM7XHJcbiAgICAgIG9wYWNpdHk6IDA7XHJcbiAgICB9XHJcbiAgICAucHdkLW1hdGNoLWJ1YmJsZS5hY3RpdmUge1xyXG4gICAgICBvcGFjaXR5OiAxO1xyXG4gICAgfVxyXG4gICAgLmlucHV0LWVycm9yIHtcclxuICAgICAgYm9yZGVyLWNvbG9yOiAjZDExYTFhICFpbXBvcnRhbnQ7XHJcbiAgICB9XHJcbi8qID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxyXG4gICBMZXQgcmVzZXQtcGFzc3dvcmQgYnViYmxlcyBmbG9hdCBvdXRzaWRlIHRoZSBwYW5lbFxyXG4gICA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cclxuXHJcbi8qIE9ubHkgb24gdGhlIHJlc2V0IHBhc3N3b3JkIHBhZ2U6ICovXHJcbmJvZHkucmVzZXQtcGFzc3dvcmQtcGFnZSAubW9kYWwtcGFuZWwsXHJcbmJvZHkucmVzZXQtcGFzc3dvcmQtcGFnZSAucmVzZXQtY29udGFpbmVyIHtcclxuICBwb3NpdGlvbjogcmVsYXRpdmUgIWltcG9ydGFudDsgICAvKiBlc3RhYmxpc2ggY29udGFpbmluZyBibG9jayAqL1xyXG4gIG92ZXJmbG93OiB2aXNpYmxlICAgICFpbXBvcnRhbnQ7IC8qIGFsbG93IGNoaWxkcmVuIHRvIG92ZXJmbG93ICovXHJcbn1cclxuXHJcbiJdfQ== */ /* ======================================== * DASHBOARD CUSTOMIZATIONS * ======================================== */ /* Custom dashboard card spacing and sizing overrides (non-destructive) Loaded only on admin/dashboard pages via layout.php */ :root{--container-max-width:1400px} .dashboard-container, .admin-content-area, .companies-content-area, .users-content-area, .leases-content-area{ max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } /* Generic grid used by dashboard and fragments (.sa-grid introduced in views) */ .sa-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start} /* Card tweaks: slightly larger min-width, lighter shadow, and more breathing room */ .sa-card, .card, .stat-card{padding:20px;border-radius:12px;box-shadow:0 8px 28px rgba(10,20,30,0.06)} .stat-card{min-width:220px} @media (max-width: 767.98px) { .sa-grid{gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));} .dashboard-container, .admin-content-area{padding-left:12px;padding-right:12px} } /* ======================================== * COMMAND CENTER LAYOUT * ======================================== */ /* ============================================================================ WELLLOGIX COMMAND CENTER — SUPERADMIN DASHBOARD STYLES Real-time operational intelligence interface Last Updated: 2025-10-14 ============================================================================ */ /* ============================================================================ FULL-WIDTH LAYOUT FOR COMMAND CENTER Remove container constraints to use full viewport width ============================================================================ */ .admin-dashboard.command-center-view { width: 100%; max-width: none; padding: 0; flex: 1; display: flex; flex-direction: column; min-height: calc(100vh - var(--header-bar-height)); } .admin-dashboard.command-center-view .dashboard-header { background: var(--background-panel); border-bottom: 1px solid var(--primary-color); padding: 16px 24px; margin: 0; } .admin-dashboard.command-center-view .dashboard-header-inner { max-width: none; margin: 0; padding: 0; } .admin-dashboard.command-center-view .dashboard-container { padding: 0; margin: 0; max-width: none; flex: 1; display: flex; flex-direction: column; min-height: 100%; } /* Dark mode title - WCAG AA compliant (7:1 contrast ratio) */ body.dark-mode .dashboard-title { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } body.dark-mode .dashboard-intro { color: #c9d1d9; } :root { /* Brand Color - WellLogix Cyan */ --cc-brand: #00bcd4; --cc-brand-light: #26e7ff; --cc-brand-dark: #0097a7; /* Status Colors - WCAG AA Compliant Light Mode */ --cc-critical: #d32f2f; /* 6.53:1 on white ✅ */ --cc-high: #f57c00; /* 3.98:1 on white (large text) */ --cc-medium: #f9a825; /* 3.37:1 on white (large text) */ --cc-success: #2e7d32; /* 4.61:1 on white ✅ */ --cc-info: #0277bd; /* 5.91:1 on white ✅ */ /* Light Mode Palette */ --cc-bg-primary: #ffffff; --cc-bg-secondary: #f5f5f5; --cc-bg-tertiary: #e8e8e8; --cc-border: #d0d0d0; --cc-text-primary: #1a1a1a; /* 12.63:1 ✅ AAA */ --cc-text-secondary: #5a6268; /* 6.01:1 ✅ AA */ --cc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --cc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --cc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); } /* ============================================================================ DARK MODE OVERRIDES - WCAG AAA COMPLIANT ============================================================================ */ body.dark-mode .command-center { /* Status Colors - Dark Mode Optimized */ --cc-critical: #ff5252; /* 8.12:1 ✅ AAA */ --cc-high: #ffa726; /* 9.67:1 ✅ AAA */ --cc-medium: #ffeb3b; /* 16.72:1 ✅ AAA */ --cc-success: #66bb6a; /* 9.83:1 ✅ AAA */ --cc-info: #29b6f6; /* 8.94:1 ✅ AAA */ --cc-brand: #26e7ff; /* 10.89:1 ✅ AAA */ /* Dark Mode Palette */ --cc-bg-primary: #1e1e1e; --cc-bg-secondary: #0a0a0a; --cc-bg-tertiary: #2a2a2a; --cc-border: #3a3a3a; --cc-text-primary: #ffffff; /* 21:1 ✅ AAA */ --cc-text-secondary: #c9d1d9; /* 12.58:1 ✅ AAA */ --cc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --cc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6); --cc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8); /* CRITICAL: Force background color */ background: #0a0a0a !important; } /* Dark mode adjustments for specific elements */ body.dark-mode .cc-card { border-color: var(--cc-border); } body.dark-mode .cc-error-item:hover, body.dark-mode .cc-activity-item:hover, body.dark-mode .cc-pending-item:hover { background: rgba(255, 255, 255, 0.05); } body.dark-mode .cc-empty { color: var(--cc-text-secondary); } body.dark-mode .cc-loading { color: var(--cc-text-secondary); } /* ============================================================================ LAYOUT STRUCTURE - DASHBOARD (Superadmin Dashboard) 2-column layout: Sidebar (360px, 10% smaller) | Main (flexible) ============================================================================ */ .dashboard-cc { display: grid; grid-template-areas: "alert alert" "sidebar main"; grid-template-columns: 360px 1fr; grid-template-rows: auto 1fr; gap: 10px; padding: 14px; background: var(--background-main); flex: 1; } /* When pending approvals banner is visible, it sits between alert and cards */ #pendingApprovalsBanner { grid-column: 1 / -1; margin-bottom: 8px; } /* Alert Banner at Top */ .dashboard-cc-alert-banner { grid-area: alert; background: var(--cc-brand); color: white; padding: 12px 20px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--cc-shadow-lg); animation: slideDown 0.3s ease-out; position: relative; overflow: hidden; min-height: 60px; max-height: 80px; } /* Brand accent stripe */ .cc-alert-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cc-brand-light); } .dashboard-cc-alert-banner.critical { background: var(--cc-critical); border-left: 6px solid #b71c1c; } .dashboard-cc-alert-banner.error { background: var(--cc-critical); border-left: 6px solid #b71c1c; } .dashboard-cc-alert-banner.warning { background: var(--cc-high); color: #000000; /* Dark text for better contrast */ border-left: 6px solid #e65100; } .dashboard-cc-alert-banner.healthy { background: var(--cc-success); border-left: 6px solid #1b5e20; } .dashboard-cc-alert-content { display: flex; align-items: center; gap: 10px; } .dashboard-cc-alert-icon { font-size: 32px; animation: pulse 2s infinite; } .dashboard-cc-alert-text h2 { margin: 0; font-size: 18px; font-weight: 600; } .dashboard-cc-alert-text p { margin: 4px 0 0 0; font-size: 12px; opacity: 0.9; } .dashboard-cc-alert-actions { display: flex; gap: 10px; } .dashboard-cc-alert-banner .cc-btn { padding: 8px 16px; border: 2px solid white; background: rgba(255, 255, 255, 0.25); color: white; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; transition: all 0.2s; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .dashboard-cc-alert-banner .cc-btn:hover { background: white; color: var(--cc-brand-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .dashboard-cc-alert-banner.warning .cc-btn:hover { color: var(--cc-high); } /* ============================================================================ LEFT SIDEBAR — System Health & Quick Stats (Dashboard) ============================================================================ */ .dashboard-cc-sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: 10px; align-self: start; /* Prevent stretching beyond content */ } /* Staggered animation for System Health cards */ .dashboard-cc-sidebar .cc-card { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.5s ease-out forwards; } .dashboard-cc-sidebar .cc-card:nth-child(1) { animation-delay: 0.1s; } .dashboard-cc-sidebar .cc-card:nth-child(2) { animation-delay: 0.2s; } .dashboard-cc-sidebar .cc-card:nth-child(3) { animation-delay: 0.3s; } .dashboard-cc-sidebar .cc-card:nth-child(4) { animation-delay: 0.4s; } .dashboard-cc-sidebar .cc-card:nth-child(5) { animation-delay: 0.5s; } /* ============================================================================ MAIN AREA — Error Feed & Activity Stream (Horizontal Layout) ============================================================================ */ .dashboard-cc-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-self: start; /* Match sidebar alignment */ } /* Horizontal grid container for side-by-side cards */ .cc-horizontal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; /* Force equal heights */ height: 617.5px; /* Match sidebar height exactly */ } /* Make error feed and activity stream equal height and match sidebar */ .cc-horizontal-grid .cc-card { display: flex; flex-direction: column; height: 617.5px; /* Match container */ } .cc-horizontal-grid .cc-error-feed, .cc-horizontal-grid .cc-activity-stream { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .dashboard-cc-stats .cc-card:nth-child(1) { animation-delay: 0.2s; } /* Pending Approvals */ .dashboard-cc-stats .cc-card:nth-child(2) { animation-delay: 0.3s; } /* New Registrations */ .dashboard-cc-stats .cc-card:nth-child(3) { animation-delay: 0.4s; } /* Errors Chart */ .cc-card { background: var(--cc-bg-primary); border-radius: 12px; padding: 14px; box-shadow: var(--cc-shadow-md); border: 1px solid var(--cc-border); } .cc-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--cc-bg-secondary); } .cc-card-title { font-size: 12px; font-weight: 600; color: var(--cc-text-primary); display: flex; align-items: center; gap: 6px; } .cc-card-badge { font-size: 11px; padding: 4px 8px; border-radius: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .cc-card-badge.live { background: var(--cc-success); color: white; animation: livePulse 2s infinite; box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.3); } /* Dark mode badge adjustments */ body.dark-mode .cc-card-badge.live { background: var(--cc-success); box-shadow: 0 0 0 2px rgba(102, 187, 106, 0.3); } /* Health Indicator */ .cc-health-indicator { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--cc-bg-secondary); border-radius: 8px; margin-bottom: 10px; } .cc-health-dot { width: 16px; height: 16px; border-radius: 50%; position: relative; animation: pulse 2s infinite; } /* Animated ring effect */ .cc-health-dot::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; animation: healthPulse 2s infinite; } .cc-health-dot.healthy { background: var(--cc-success); } .cc-health-dot.healthy::before { box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.7); } .cc-health-dot.warning { background: var(--cc-medium); } .cc-health-dot.warning::before { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); } .cc-health-dot.critical { background: var(--cc-critical); } .cc-health-dot.critical::before { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); } .cc-health-text { flex: 1; } .cc-health-text strong { display: block; font-size: 12px; color: var(--cc-text-primary); } .cc-health-text span { font-size: 12px; color: var(--cc-text-secondary); } /* Metric Item */ .cc-metric { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cc-bg-secondary); gap: 8px; } .cc-metric:last-child { border-bottom: none; } .cc-metric-label { font-size: 12px; color: var(--cc-text-secondary); white-space: normal; overflow: visible; flex-shrink: 1; min-width: 0; line-height: 1.3; } .cc-metric-value { font-size: 15px; font-weight: 600; color: var(--cc-text-primary); white-space: nowrap; flex-shrink: 0; text-align: right; } .cc-metric-value.critical { color: var(--cc-critical); } .cc-metric-value.warning { color: var(--cc-medium); } .cc-metric-value.success { color: var(--cc-success); } /* ============================================================================ SHARED CARD STYLES (Used by both Dashboard and Companies) ============================================================================ */ /* Table container should expand naturally */ .cc-table-container { display: flex; flex-direction: column; background: var(--cc-bg-primary); border-radius: 12px; /* Shadow removed - cleaner look */ border: 1px solid var(--cc-border); overflow: hidden; /* Prevent content overflow */ } /* Error Feed */ .cc-error-feed { background: var(--cc-bg-primary); border-radius: 12px; box-shadow: var(--cc-shadow-md); border: 1px solid var(--cc-border); overflow-y: auto; overflow-x: hidden; /* Prevent horizontal scrollbar */ } .cc-error-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--cc-bg-secondary); transition: background 0.2s; } .cc-error-item:hover { background: var(--cc-bg-secondary); } .cc-error-item:last-child { border-bottom: none; } .cc-error-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .cc-error-icon.critical { background: rgba(211, 47, 47, 0.15); color: var(--cc-critical); border: 2px solid var(--cc-critical); } .cc-error-icon.high { background: rgba(245, 124, 0, 0.15); color: var(--cc-high); border: 2px solid var(--cc-high); } .cc-error-icon.medium { background: rgba(249, 168, 37, 0.15); color: var(--cc-medium); border: 2px solid var(--cc-medium); } .cc-error-icon.info { background: rgba(2, 119, 189, 0.15); color: var(--cc-info); border: 2px solid var(--cc-info); } .cc-error-content { flex: 1; min-width: 0; /* Allow flex item to shrink below content size */ overflow: hidden; /* Prevent overflow */ } .cc-error-title { font-size: 12px; font-weight: 600; color: var(--cc-text-primary); margin-bottom: 4px; word-wrap: break-word; /* Break long words */ overflow-wrap: break-word; /* Modern browsers */ } .cc-error-details { font-size: 11px; color: var(--cc-text-primary); margin: 4px 0; font-weight: 500; opacity: 0.9; } .cc-error-meta { font-size: 12px; color: var(--cc-text-secondary); display: flex; gap: 10px; flex-wrap: wrap; } .cc-error-time { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; color: var(--cc-text-secondary); } .cc-error-time strong { font-size: 12px; color: var(--cc-text-primary); } /* Activity Stream */ .cc-activity-stream { background: var(--cc-bg-primary); border-radius: 12px; box-shadow: var(--cc-shadow-md); border: 1px solid var(--cc-border); overflow-y: auto; overflow-x: hidden; /* Prevent horizontal scrollbar */ } .cc-activity-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--cc-bg-secondary); transition: background 0.2s; } .cc-activity-item:hover { background: var(--cc-bg-secondary); } .cc-activity-item:last-child { border-bottom: none; } .cc-activity-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cc-brand); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 11px; flex-shrink: 0; border: 2px solid var(--cc-brand-light); } .cc-activity-content { flex: 1; min-width: 0; /* Allow flex item to shrink below content size */ overflow: hidden; /* Prevent overflow */ } .cc-activity-text { font-size: 11px; color: var(--cc-text-primary); margin-bottom: 2px; word-wrap: break-word; /* Break long words */ overflow-wrap: break-word; /* Modern browsers */ } .cc-activity-text strong { font-weight: 600; color: var(--cc-brand); } .cc-activity-time { font-size: 11px; color: var(--cc-text-secondary); } .cc-activity-badge { padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; } .cc-activity-badge.success { background: rgba(46, 125, 50, 0.15); color: var(--cc-success); border: 1px solid var(--cc-success); } .cc-activity-badge.warning { background: rgba(245, 124, 0, 0.15); color: var(--cc-high); border: 1px solid var(--cc-high); } .cc-activity-badge.info { background: rgba(2, 119, 189, 0.15); color: var(--cc-info); border: 1px solid var(--cc-info); } /* ============================================================================ SHARED STAT CARD STYLES (Used by Dashboard right sidebar) ============================================================================ */ .cc-stat-card { background: var(--cc-bg-primary); border-radius: 12px; padding: 14px; box-shadow: var(--cc-shadow-md); border: 1px solid var(--cc-border); text-align: center; } .cc-stat-value { font-size: 36px; font-weight: 700; color: var(--cc-text-primary); margin-bottom: 8px; } .cc-stat-label { font-size: 11px; color: var(--cc-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .cc-stat-change { font-size: 12px; margin-top: 8px; padding: 4px 8px; border-radius: 4px; display: inline-block; } .cc-stat-change.up { background: rgba(40, 167, 69, 0.1); color: var(--cc-success); } .cc-stat-change.down { background: rgba(220, 53, 69, 0.1); color: var(--cc-critical); } /* Mini Chart */ .cc-mini-chart { height: 80px; margin-top: 12px; } /* Chart Container Stat Card */ .cc-chart-stat-card { margin-top: 12px; padding: 10px; } /* Pending Registrations List */ .cc-pending-list { max-height: 250px; overflow-y: auto; } .cc-pending-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--cc-bg-secondary); transition: background 0.2s; /* Subtle animation on load - minimal transform to prevent layout shift */ opacity: 0; transform: translateY(8px); animation: fadeInUp 0.3s ease-out forwards; } /* Staggered animation delays for Pending Approval items */ .cc-pending-item:nth-child(1) { animation-delay: 0.05s; } .cc-pending-item:nth-child(2) { animation-delay: 0.1s; } .cc-pending-item:nth-child(3) { animation-delay: 0.15s; } .cc-pending-item:nth-child(4) { animation-delay: 0.2s; } .cc-pending-item:nth-child(5) { animation-delay: 0.25s; } .cc-pending-item:nth-child(6) { animation-delay: 0.3s; } .cc-pending-item:nth-child(7) { animation-delay: 0.35s; } .cc-pending-item:nth-child(8) { animation-delay: 0.4s; } .cc-pending-item:hover { background: var(--cc-bg-secondary); } .cc-pending-item:last-child { border-bottom: none; } .cc-pending-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 12px; flex-shrink: 0; } .cc-pending-info { flex: 1; min-width: 0; } .cc-pending-name { font-size: 12px; font-weight: 600; color: var(--cc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-pending-email { font-size: 10px; color: var(--cc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-pending-time { font-size: 10px; color: var(--cc-text-secondary); flex-shrink: 0; } /* ============================================================================ STAT SUMMARY CARDS (Right Sidebar) ============================================================================ */ .cc-stat-summary { padding: 16px 0; } .cc-stat-item { text-align: center; padding: 10px; } .cc-stat-value { font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 8px; color: var(--cc-text); } .cc-stat-value.success { color: var(--cc-success); } .cc-stat-value.warning { color: var(--cc-high); } .cc-stat-value.critical { color: var(--cc-critical); } .cc-stat-label { font-size: 11px; color: var(--cc-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } /* ============================================================================ ANIMATIONS ============================================================================ */ @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Health dot expanding ring animation */ @keyframes healthPulse { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 8px currentColor; opacity: 0.5; } 100% { box-shadow: 0 0 0 12px currentColor; opacity: 0; } } @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 50% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); } } /* ============================================================================ RESPONSIVE DESIGN ============================================================================ */ @media (max-width: 1400px) { .command-center { grid-template-areas: "alert alert" "sidebar main" "stats stats"; grid-template-columns: 400px 1fr; grid-template-rows: auto 1fr auto; } } @media (max-width: 992px) { .command-center { grid-template-areas: "alert" "sidebar" "main" "stats"; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; } .cc-alert-banner { flex-direction: column; gap: 10px; text-align: center; } /* Stack upper section vertically on mobile */ .cc-upper-section { grid-template-columns: 1fr; gap: 10px; } } /* Stack Recent Errors and Live Stream vertically on dashboard when sidebar doesn't shrink */ @media (max-width: 1650px) { .dashboard-cc-main { grid-template-columns: 1fr; /* Single column - stack vertically */ } } /* Adjust sidebar width at medium breakpoint */ @media (max-width: 1400px) { .cc-upper-section { grid-template-columns: 320px 1fr; } /* Stack distribution chart and top states vertically, center chart */ .cc-distribution-container { flex-direction: column; align-items: center; } .cc-chart-wrapper { width: 100%; max-width: 400px; /* Constrain chart width for better appearance */ margin: 0 auto; } .cc-top-states-wrapper { flex: 1; width: 100%; max-width: 100%; /* Allow full width for horizontal layout */ margin-top: 20px; } /* Display top states horizontally across bottom */ #top-states-list, .cc-top-states-list { display: flex !important; flex-direction: row !important; gap: 10px; justify-content: center; align-items: stretch; } .cc-top-state-item, .cc-top-states-list .cc-top-state-item { flex: 1; min-width: 0; /* Allow flex items to shrink below content size */ max-width: none; } /* Adjust state details for horizontal layout */ .cc-top-state-item .cc-state-details { width: 100%; } .cc-phone-column { display: none; } } /* ============================================================================ SCROLLBAR STYLING - Unified style for all scrollable areas ============================================================================ */ /* Universal scrollbar width */ .cc-error-feed::-webkit-scrollbar, .cc-activity-stream::-webkit-scrollbar, .cc-top-states-list::-webkit-scrollbar { width: 10px; } /* Scrollbar track - half-shape (right-side rounded) */ .cc-error-feed::-webkit-scrollbar-track, .cc-activity-stream::-webkit-scrollbar-track, .cc-top-states-list::-webkit-scrollbar-track { background: var(--background-darker); border-radius: 0 8px 8px 0; /* Half-rounded on right side */ } /* Scrollbar thumb - half-shape (right-side rounded) */ .cc-error-feed::-webkit-scrollbar-thumb, .cc-activity-stream::-webkit-scrollbar-thumb, .cc-top-states-list::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 0 8px 8px 0; /* Half-rounded on right side */ border: 2px solid var(--background-panel); } /* Scrollbar thumb hover */ .cc-error-feed::-webkit-scrollbar-thumb:hover, .cc-activity-stream::-webkit-scrollbar-thumb:hover, .cc-top-states-list::-webkit-scrollbar-thumb:hover { background: var(--accent-color); } /* Timeline scrollbar - special right-side rounded effect */ .cc-timeline::-webkit-scrollbar { width: 10px; } .cc-timeline::-webkit-scrollbar-track { background: var(--background-darker); border-radius: 0 8px 8px 0; /* Half-rounded on right side */ } .cc-timeline::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 0 8px 8px 0; /* Half-rounded on right side */ border: 2px solid var(--background-panel); } .cc-timeline::-webkit-scrollbar-thumb:hover { background: var(--accent-color); } /* Table wrapper scrollbar styling - matches right corners */ .cc-table-wrapper::-webkit-scrollbar { width: 10px; } .cc-table-wrapper::-webkit-scrollbar-track { background: var(--background-darker); border-radius: 0 8px 8px 0; /* Match table border radius on right side */ } .cc-table-wrapper::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 0 8px 8px 0; /* Match table border radius on right side */ border: 2px solid var(--background-panel); } .cc-table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--accent-color); } /* Table tbody scrollbar styling - curved edges */ .cc-table tbody::-webkit-scrollbar { width: 10px; } .cc-table tbody::-webkit-scrollbar-track { background: var(--background-darker); border-radius: 0 8px 8px 0; /* Curved right edge */ } .cc-table tbody::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 0 8px 8px 0; /* Curved right edge */ border: 2px solid var(--background-panel); } .cc-table tbody::-webkit-scrollbar-thumb:hover { background: var(--accent-color); } /* ============================================================================ UTILITY CLASSES ============================================================================ */ .cc-loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--cc-text-secondary); } .cc-empty { text-align: center; padding: 40px; color: var(--cc-text-secondary); font-size: 12px; } .cc-spinner { border: 3px solid var(--cc-bg-tertiary); border-top: 3px solid #667eea; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================================================ COMPANIES COMMAND CENTER LAYOUT 2-column layout: Sidebar (320px) | Main (flexible) For Companies, Users, Leases, Logs pages ============================================================================ */ /* Layout Container */ .companies-cc { display: grid; grid-template-areas: "sidebar main" "bottom bottom"; grid-template-columns: 320px 1fr; grid-template-rows: auto auto; gap: 20px; padding: 14px; min-height: calc(100vh - 80px); max-width: 100%; overflow-x: hidden; align-items: stretch; /* Stretch items to match height */ overflow-y: hidden; /* Prevent scrollbar flicker during page load animations */ animation: enableScroll 0s 1.5s forwards; /* Re-enable scroll after animations complete */ } @keyframes enableScroll { to { overflow-y: auto; } } .companies-cc-sidebar { grid-area: sidebar; min-width: 0; /* Prevent grid blowout */ display: flex; flex-direction: column; } .companies-cc-main { grid-area: main; min-width: 0; /* Prevent grid blowout */ display: flex; flex-direction: column; } .cc-sidebar-card { flex: 1; /* Fill available height */ display: flex; flex-direction: column; } .cc-table-container { flex: 1; /* Fill available height to match sidebar */ display: flex; flex-direction: column; opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease-out 0.4s forwards; } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .cc-bottom-stats { grid-area: bottom; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; min-width: 0; /* Prevent grid blowout */ align-items: stretch; /* Make cards equal height */ opacity: 0; animation: fadeInUp 0.6s ease 0.6s forwards; } /* Remove old stats panel styles */ .cc-stats-panel { display: none; } /* ============================================================================ SIDEBAR STYLES ============================================================================ */ .cc-sidebar-card { flex: 1; /* Fill available height */ display: flex; flex-direction: column; background: var(--background-panel); border: 1px solid var(--primary-color); border-left: 3px solid var(--primary-color); border-radius: 8px; padding: 20px 20px 0 20px; /* Remove bottom padding */ box-shadow: var(--cc-shadow-sm); opacity: 0; transform: translateX(-30px); animation: slideInFromLeft 0.6s ease 0.2s forwards; } @keyframes slideInFromLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } .cc-sidebar-title { font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--color-text); margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 2px solid var(--primary-color); letter-spacing: 0.3px; } .cc-metric-group { display: grid; gap: 0; /* Remove gap, use margin-bottom on items instead for consistency */ } .cc-metric { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; /* Match metric-row padding */ background: var(--background-color); border-radius: 4px; margin-bottom: 8px; /* Match metric-row margin */ transition: all 0.2s ease; /* Add transition for hover effect */ opacity: 0; transform: scale(0.95); animation: popIn 0.4s ease forwards; } /* Staggered delays for Quick Stats items */ .cc-metric:nth-child(1) { animation-delay: 0.9s; } .cc-metric:nth-child(2) { animation-delay: 1.0s; } .cc-metric:nth-child(3) { animation-delay: 1.1s; } .cc-metric:nth-child(4) { animation-delay: 1.2s; } .cc-metric:nth-child(5) { animation-delay: 1.3s; } /* Error Rate (24h) */ @keyframes popIn { 0% { opacity: 0; transform: scale(0.95); } 50% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } /* Alternating row colors for Quick Stats */ .cc-metric:nth-child(even) { background: rgba(0, 188, 212, 0.05); } /* Hover effect for Quick Stats - only on clickable items */ .cc-metric[style*="cursor: pointer"]:hover { background: rgba(0, 188, 212, 0.15) !important; transform: translateX(2px); } .cc-metric-label { font-size: 12px; color: var(--color-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .cc-metric-value { font-size: 20px; font-weight: 700; color: var(--color-text); margin-left: 12px; /* Add spacing between label and value */ } .cc-metric-value.success { color: var(--success-color); } .cc-metric-value.danger { color: var(--danger-color); } .cc-metric-value.warning { color: var(--warning-color); } .cc-metric-value.info { color: var(--info-color); } .cc-metric-value.muted { color: var(--color-muted); } .cc-divider { height: 1px; background: var(--primary-color); opacity: 0.3; margin: 16px 0; } .cc-section { margin-top: 16px; } .cc-section-title { font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--color-text); margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 2px solid var(--primary-color); letter-spacing: 0.3px; } /* Stat List */ .cc-stat-list { display: flex; flex-direction: column; gap: 4px; /* Reduced from 6px for extra compact look */ } .cc-stat-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; /* Reduced from 6px 10px */ background: var(--background-color); border-radius: 4px; font-size: 12px; /* Reduced from 13px */ transition: all 0.2s ease; /* Add transition for hover effect */ } /* Alternating row colors for Quick Stats */ .cc-stat-item:nth-child(even) { background: rgba(0, 188, 212, 0.05); } /* Hover effect for Quick Stats - only on clickable items */ .cc-stat-item[style*="cursor: pointer"]:hover { background: rgba(0, 188, 212, 0.1) !important; transform: translateX(2px); } .cc-stat-label { color: var(--color-text); font-weight: 500; font-size: 11px; } .cc-stat-value { color: var(--primary-color); font-weight: 700; font-size: 18px; /* Consistent size for sidebar stats */ } /* Metric Row (similar to stat-item, used in Activity Metrics) */ .cc-metric-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; /* Add horizontal padding for spacing */ background: var(--background-color); border-radius: 4px; font-size: 11px; margin-bottom: 8px; transition: all 0.2s ease; /* Changed from background to all for transform effect */ opacity: 0; transform: scale(0.95); animation: popIn 0.4s ease forwards; } /* Staggered delays for Activity & Performance rows */ .cc-metric-row:nth-child(2) { animation-delay: 0.9s; } .cc-metric-row:nth-child(3) { animation-delay: 1.0s; } .cc-metric-row:nth-child(4) { animation-delay: 1.1s; } .cc-metric-row:nth-child(5) { animation-delay: 1.2s; } .cc-metric-row:nth-child(6) { animation-delay: 1.3s; } .cc-metric-row:nth-child(7) { animation-delay: 1.4s; } /* Alternating row colors for Activity & Performance */ .cc-metric-row:nth-child(even) { background: rgba(0, 188, 212, 0.05); } /* Hover effect for Activity & Performance - only on clickable item */ .cc-metric-row[style*="cursor: pointer"]:hover { background: rgba(0, 188, 212, 0.1) !important; transform: translateX(2px); } .cc-metric-label { color: var(--color-text); font-weight: 500; } .cc-metric-value { color: var(--primary-color); font-weight: 700; font-size: 12px; } /* Activity List */ .cc-activity-list { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; } .cc-activity-item { display: flex; gap: 10px; padding: 8px; background: var(--background-color); border-radius: 4px; font-size: 12px; } .cc-activity-icon { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; } .cc-activity-icon.cc-icon-success { background: var(--success-color); } .cc-activity-icon.cc-icon-danger { background: var(--danger-color); } .cc-activity-icon.cc-icon-warning { background: var(--warning-color); } .cc-activity-icon.cc-icon-info { background: var(--info-color); } .cc-activity-content { flex: 1; } .cc-activity-text { color: var(--color-text); margin-bottom: 4px; line-height: 1.4; } .cc-activity-meta { color: var(--color-muted); font-size: 11px; } /* ============================================================================ MAIN CONTENT STYLES ============================================================================ */ .cc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 20px 16px 20px 0px; background: var(--background-panel); border: 1px solid var(--primary-color); border-left: 3px solid var(--primary-color); border-radius: 8px; } .cc-page-title { font-size: 28px; /* Increased from 24px */ font-weight: 700; color: var(--primary-color); /* Changed to primary color for emphasis */ margin: 0; letter-spacing: 0.5px; /* Add letter spacing for better readability */ } /* ============================================================================ FORMS COMMAND CENTER LAYOUT Single-column layout for forms with consistent padding ============================================================================ */ .forms-cc { padding: 20px 20px 0 20px; max-width: 100%; background: var(--background-main); } /* Buttons */ .cc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 12px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; text-decoration: none !important; } /* Override Bootstrap reboot link styles for buttons */ a.cc-btn { text-decoration: none !important; } .cc-btn-primary { background: var(--primary-color); color: #ffffff; } .cc-btn-primary:hover { background: var(--primary-color); color: #ffffff !important; text-decoration: none !important; /* Ensure text stays white on hover */ filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3); } .cc-btn-secondary { background: var(--background-color); color: var(--color-text); border: 1px solid var(--primary-color); } .cc-btn-secondary:hover { background: var(--background-panel); border-color: var(--primary-color); filter: brightness(1.05); } .cc-btn-info { background: var(--info-color); color: #ffffff; } .cc-btn-info:hover { filter: brightness(1.1); } .cc-btn-success { background: var(--success-color); color: #ffffff; } .cc-btn-success:hover { filter: brightness(1.1); } .cc-btn-danger { background: var(--danger-color); color: #ffffff; } .cc-btn-danger:hover { filter: brightness(1.1); } .cc-btn-sm { padding: 6px 12px; font-size: 12px; } .cc-btn-icon { font-size: 12px; line-height: 1; } /* Filter Bar */ .cc-filter-bar { margin-bottom: 10px; padding: 16px; background: var(--background-panel); border: 1px solid var(--primary-color); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .cc-filter-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cc-filter-group:first-child { flex: 0 0 auto; /* Dropdowns stay left */ } .cc-filter-group:last-child { flex: 1 1 auto; /* Search and reset stretch/align right */ justify-content: flex-end; } .cc-select, .cc-search { padding: 10px 14px; font-size: 12px; color: var(--color-text); background: var(--background-color); border: 1px solid var(--primary-color); border-radius: 6px; outline: none; transition: all 0.2s ease; } .cc-select { min-width: 150px; } .cc-search { min-width: 300px; max-width: 400px; } .cc-select:focus, .cc-search:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1); } /* Search box placeholder */ .cc-search::placeholder { color: #666; opacity: 1; } /* Dark mode search input - ensure text is visible */ body.dark-mode .cc-search { color: #ffffff !important; background: #2a2a2a !important; border-color: var(--primary-color); } body.dark-mode .cc-search::placeholder { color: #999 !important; opacity: 1; } /* Light mode search input - ensure text is visible */ body:not(.dark-mode) .cc-search { color: #1a1a1a !important; background: #ffffff !important; } body:not(.dark-mode) .cc-search::placeholder { color: #666 !important; } /* Color-coded stat values for better visual scanning */ .cc-metric-value.success, .cc-stat-value.success { color: #2e7d32 !important; /* Green for positive/active */ } .cc-metric-value.danger, .cc-stat-value.danger { color: #d32f2f !important; /* Red for deleted/critical */ } .cc-metric-value.warning, .cc-stat-value.warning { color: #f57c00 !important; /* Orange for warnings */ } .cc-metric-value.info, .cc-stat-value.info { color: #0277bd !important; /* Blue for info/activity */ } .cc-metric-value.muted, .cc-stat-value.muted { color: #666 !important; /* Gray for inactive/neutral */ } /* Light mode - slightly darker card background for better contrast */ body:not(.dark-mode) .cc-sidebar-card, body:not(.dark-mode) .cc-stats-card { background: #f8f9fa !important; /* Very light gray instead of pure white */ } /* Light mode - command center layout background matches header */ body:not(.dark-mode) .command-center-layout { background: var(--background-header) !important; } /* Light mode - select dropdowns should be white */ body:not(.dark-mode) .cc-select { background: #ffffff !important; } /* Light mode - add subtle black border to all buttons for better definition */ body:not(.dark-mode) .cc-btn { border: 1px solid rgba(0, 0, 0, 0.15) !important; } body:not(.dark-mode) .cc-btn-secondary { border: 1px solid rgba(0, 0, 0, 0.2) !important; } /* Fix dropdown options - ensure readable text in both light and dark mode */ .cc-select option { background: var(--background-panel); color: var(--color-text); padding: 8px; } /* Dark mode option fix */ body.dark-mode .cc-select option { background: #1e1e1e; color: #ffffff; } /* ============================================================================ TABLE STYLES ============================================================================ */ .cc-table-container { flex: 1; /* Fill available height to match sidebar */ display: flex; flex-direction: column; background: transparent; /* No background, let table show through */ border: none; /* No border on container */ border-radius: 0; overflow: visible; /* No scrolling on container */ width: 100%; /* Fill available space */ } /* Header when inside table container */ .cc-table-container .cc-header { margin-top: 0; /* Remove top margin for better alignment */ margin-bottom: 10px; padding: 20px 16px 20px 0px; border: none; /* No border */ border-radius: 0; background: transparent; /* No background */ flex-shrink: 0; /* Don't shrink header */ } /* Filter bar when inside table container */ .cc-table-container .cc-filter-bar { margin-bottom: 10px; border-radius: 0; border: none; /* No border */ background: transparent; /* No background */ padding: 16px 0; /* Adjust padding */ flex-shrink: 0; /* Don't shrink filters */ } /* Table wrapper to handle border and layout */ .cc-table-wrapper { flex: 1; /* Fill remaining space */ border-radius: 8px; background: var(--background-panel); border: 1px solid var(--primary-color); border-left: 3px solid var(--primary-color); /* Match sidebar effect */ min-height: 0; /* Allow flexbox to shrink */ /* max-height removed to allow height matching with sidebar */ display: flex; flex-direction: column; overflow: hidden; /* Hide overflow on wrapper */ } .cc-table { width: 100%; border-collapse: separate; /* Allows border-radius to work */ border-spacing: 0; /* No gaps between cells */ background: var(--background-panel); border: none; /* Border moved to wrapper */ border-radius: 0; /* Border radius on wrapper instead */ display: flex; flex-direction: column; overflow: hidden; } .cc-table thead { background: var(--background-color); position: sticky; top: 0; z-index: 10; display: block; width: 100%; overflow-y: scroll; /* Force scrollbar space even when not scrolling */ overflow-x: hidden; } /* Hide the actual scrollbar on thead but keep the space */ .cc-table thead::-webkit-scrollbar { width: 10px; height: 0; } .cc-table thead::-webkit-scrollbar-thumb { background: transparent; } .cc-table thead::-webkit-scrollbar-track { background: transparent; } .cc-table thead tr { display: table; width: 100%; table-layout: fixed; } .cc-table tbody { display: block; overflow-y: auto; /* Scrollbar on tbody only */ overflow-x: hidden; max-height: 425px; /* Increased from 415px for more content visibility */ } .cc-table tbody tr { display: table; width: 100%; table-layout: fixed; } .cc-table th { padding: 14px 16px; font-size: 11px; font-weight: 700; color: var(--color-text); text-align: left; border-bottom: 2px solid var(--primary-color); text-transform: uppercase; letter-spacing: 0.3px; /* Reduced from 0.5px to improve alignment */ } /* Column width optimization */ .cc-table th:nth-child(1), .cc-table td:nth-child(1) { width: 20%; /* Company Name - wider */ } .cc-table th:nth-child(2), .cc-table td:nth-child(2) { width: 6%; /* State - small (2 letters) */ text-align: center; /* Center state codes */ } .cc-table th:nth-child(3), .cc-table td:nth-child(3) { width: 12%; /* City - medium */ } .cc-table th:nth-child(4), .cc-table td:nth-child(4) { width: 22%; /* Address - wider */ } .cc-table th:nth-child(5), .cc-table td:nth-child(5) { width: 12%; /* Phone - fixed size */ text-align: center; /* Center phone numbers */ } .cc-table th:nth-child(6), .cc-table td:nth-child(6) { width: 10%; /* Status - medium */ text-align: center; } .cc-table th:nth-child(7), .cc-table td:nth-child(7) { width: 18%; /* Actions - buttons need space */ text-align: center; } /* First header cell - rounded top-left */ .cc-table thead tr:first-child th:first-child { border-top-left-radius: 7px; } /* Last header cell - rounded top-right */ .cc-table thead tr:first-child th:last-child { border-top-right-radius: 7px; } .cc-table tbody tr { border-bottom: 1px solid var(--primary-color); transition: background 0.2s ease; background: var(--background-panel); /* Default background */ opacity: 0; transform: translateY(-10px); animation: fillDown 0.3s ease-out forwards; } /* Staggered delays for table rows - up to 15 rows */ .cc-table tbody tr:nth-child(1) { animation-delay: 0.6s; } .cc-table tbody tr:nth-child(2) { animation-delay: 0.65s; } .cc-table tbody tr:nth-child(3) { animation-delay: 0.7s; } .cc-table tbody tr:nth-child(4) { animation-delay: 0.75s; } .cc-table tbody tr:nth-child(5) { animation-delay: 0.8s; } .cc-table tbody tr:nth-child(6) { animation-delay: 0.85s; } .cc-table tbody tr:nth-child(7) { animation-delay: 0.9s; } .cc-table tbody tr:nth-child(8) { animation-delay: 0.95s; } .cc-table tbody tr:nth-child(9) { animation-delay: 1.0s; } .cc-table tbody tr:nth-child(10) { animation-delay: 1.05s; } .cc-table tbody tr:nth-child(11) { animation-delay: 1.1s; } .cc-table tbody tr:nth-child(12) { animation-delay: 1.15s; } .cc-table tbody tr:nth-child(13) { animation-delay: 1.2s; } .cc-table tbody tr:nth-child(14) { animation-delay: 1.25s; } .cc-table tbody tr:nth-child(15) { animation-delay: 1.3s; } @keyframes fillDown { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /* Alternating row colors for better readability */ .cc-table tbody tr:nth-child(even) { background: rgba(0, 188, 212, 0.08); /* More visible - increased from 0.03 */ } .cc-table tbody tr:hover { background: rgba(0, 188, 212, 0.15) !important; /* Even more visible on hover */ } .cc-table tbody tr:last-child { border-bottom: none; /* No border on last row */ } /* Last row - rounded bottom corners */ .cc-table tbody tr:last-child td:first-child { border-bottom-left-radius: 7px; } .cc-table tbody tr:last-child td:last-child { border-bottom-right-radius: 7px; } .cc-table td { padding: 14px 16px; font-size: 12px; color: var(--color-text); border-bottom: 1px solid rgba(0, 188, 212, 0.1); /* Soft border between rows */ } .cc-table tbody tr:last-child td { border-bottom: none; /* Remove border from last row cells */ } .cc-table .cc-text-center { text-align: center; } .cc-table .cc-text-bold { font-weight: 600; } .cc-sortable { cursor: pointer; user-select: none; position: relative; padding-right: 24px; /* Add padding to make room for icon */ } .cc-sortable:hover { color: var(--primary-color); } .cc-sort-icon { color: var(--primary-color); font-size: 10px; display: inline-block; min-width: 10px; /* Reserve space even when empty */ position: absolute; /* Uniform positioning for all sort icons */ right: 8px; top: 50%; transform: translateY(-50%); /* Vertically center the icon */ margin-left: 0; } .cc-loading-row, .cc-empty-row { text-align: center; padding: 40px !important; color: var(--color-muted); } .cc-actions-cell { white-space: nowrap; } .cc-actions-cell .cc-btn { margin-right: 6px; } .cc-actions-cell .cc-btn:last-child { margin-right: 0; } /* ============================================================================ BADGES ============================================================================ */ .cc-badge { display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; } .cc-badge-success { background: var(--success-color); color: #ffffff; } .cc-badge-danger { background: var(--danger-color); color: #ffffff; } .cc-badge-warning { background: var(--warning-color); color: #ffffff; } .cc-badge-info { background: var(--info-color); color: #ffffff; } .cc-badge-muted { background: var(--color-muted); color: #ffffff; } /* ============================================================================ MOBILE CARD STYLES ============================================================================ */ .cc-card-container { display: none; /* Hidden by default, shown on mobile */ } .mobile-only { display: none; } .desktop-only { display: block; } @media (max-width: 991px) { .mobile-only { display: block; } .desktop-only { display: none; } .cc-card-container { display: flex; flex-direction: column; gap: 10px; } } .cc-card { background: var(--background-panel); border: 1px solid var(--primary-color); border-left: 3px solid var(--primary-color); border-radius: 8px; padding: 16px; box-shadow: var(--cc-shadow-sm); } .cc-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cc-card-title { font-size: 12px; font-weight: 700; color: var(--color-text); margin: 0; } .cc-card-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .cc-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 12px; } .cc-card-label { color: var(--color-muted); font-weight: 600; min-width: 80px; } .cc-card-value { color: var(--color-text); text-align: right; flex: 1; } .cc-card-actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--primary-color); } .cc-card-actions .cc-btn { flex: 1; } /* ============================================================================ STATS PANEL STYLES ============================================================================ */ .cc-stats-card { background: var(--background-panel); border: 1px solid var(--primary-color); border-left: 3px solid var(--primary-color); border-radius: 8px; padding: 14px; margin-bottom: 20px; box-shadow: var(--cc-shadow-sm); display: flex; flex-direction: column; } .cc-stats-card:last-child { margin-bottom: 0; } /* Make content areas equal height in bottom stats */ .cc-bottom-stats .cc-stats-card { height: 100%; /* Fill available height */ max-height: 100%; /* Don't exceed grid cell */ margin-bottom: 0; /* No bottom margin in grid */ min-height: 0; /* Critical: allow flexbox children to shrink */ overflow: hidden; /* Prevent any overflow */ } .cc-stats-title { font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--color-text); margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 2px solid var(--primary-color); letter-spacing: 0.3px; flex-shrink: 0; /* Don't shrink title */ } .cc-chart-container { position: relative; height: 250px; flex: 1; /* Fill remaining space */ } .cc-chart-container canvas { max-height: 250px; } /* Distribution Container with Chart + Top States */ .cc-distribution-container { display: flex; gap: 20px; align-items: stretch; /* Stretch to fill height equally */ flex: 1 1 auto; min-height: 0; /* Allow shrinking */ overflow: visible; /* Allow natural sizing */ } .cc-chart-wrapper { flex: 1 1 auto; min-width: 0; position: relative; height: auto; /* Use parent height */ max-height: 100%; align-self: stretch; transition: transform 0.3s ease; opacity: 0; transform: scale(0.95); animation: chartPopIn 0.6s ease 0.7s forwards; } @keyframes chartPopIn { 0% { opacity: 0; transform: scale(0.95); } 50% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } /* Subtle glow effect on hover */ .cc-chart-wrapper:hover { transform: scale(1.02); } .cc-chart-wrapper canvas { max-height: 280px; cursor: pointer !important; transition: filter 0.3s ease; } .cc-chart-wrapper canvas:hover { filter: brightness(1.05); } /* Add a subtle instruction hint */ .cc-chart-wrapper::after { content: 'Click any segment to filter by state'; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--color-text-muted); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; background: var(--background-panel); padding: 4px 12px; border-radius: 12px; white-space: nowrap; } .cc-chart-wrapper:hover::after { opacity: 0.8; } .cc-top-states-wrapper { flex: 0 1 auto; /* Don't grow, allow shrinking */ display: flex; flex-direction: column; min-width: 200px; /* Minimum width instead of fixed */ max-width: 300px; /* Maximum width */ overflow: hidden; } .cc-top-states-title { font-size: 12px; font-weight: 600; color: var(--color-text); margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 2px solid var(--primary-color); flex-shrink: 0; /* Don't shrink title */ } .cc-top-states-list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; /* Fill remaining space */ min-height: 0; /* Allow shrinking */ overflow-y: auto; /* Scroll if needed */ overflow-x: hidden; padding-right: 4px; } /* Main Page Top States Styling */ .cc-top-states-list .cc-top-state-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--background-darker); border-radius: 6px; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; opacity: 0; transform: translateX(20px); animation: slideInFromRight 0.5s ease forwards; } /* Staggered delays for top state items */ .cc-top-states-list .cc-top-state-item:nth-child(1) { animation-delay: 0.9s; } .cc-top-states-list .cc-top-state-item:nth-child(2) { animation-delay: 1.0s; } .cc-top-states-list .cc-top-state-item:nth-child(3) { animation-delay: 1.1s; } @keyframes slideInFromRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .cc-top-states-list .cc-top-state-item::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--primary-color); transform: scaleY(0); transition: transform 0.3s ease; } .cc-top-states-list .cc-top-state-item:hover { background: var(--background-hover); transform: translateX(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .cc-top-states-list .cc-top-state-item:hover::before { transform: scaleY(1); } .cc-top-states-list .cc-state-indicator { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; margin-top: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; } .cc-top-states-list .cc-top-state-item:hover .cc-state-indicator { transform: scale(1.2) rotate(5deg); } .cc-top-states-list .cc-state-details { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cc-top-states-list .cc-state-header { display: flex; justify-content: space-between; align-items: center; gap: 4px; } .cc-top-states-list .cc-state-name { font-size: 12px; font-weight: 600; color: var(--color-text); letter-spacing: 0.3px; } .cc-top-states-list .cc-state-count { font-size: 11px; font-weight: 700; color: var(--primary-color); background: rgba(0, 188, 212, 0.1); padding: 2px 8px; border-radius: 10px; } .cc-top-states-list .cc-state-bar-container { width: 100%; height: 6px; background: var(--background-panel); border-radius: 3px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .cc-top-states-list .cc-state-bar { height: 100%; background: var(--primary-color); border-radius: 3px; transition: width 0.6s ease; animation: slideIn 0.6s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Animate cards on load */ .cc-card { animation: fadeInUp 0.5s ease-out backwards; } .dashboard-cc-sidebar .cc-card:nth-child(1) { animation-delay: 0.1s; } .dashboard-cc-sidebar .cc-card:nth-child(2) { animation-delay: 0.2s; } .dashboard-cc-main .cc-card:nth-child(1) { animation-delay: 0.15s; } .dashboard-cc-main .cc-card:nth-child(2) { animation-delay: 0.25s; } /* Animate new items when added dynamically */ .cc-error-item.cc-new, .cc-activity-item.cc-new { animation: slideIn 0.4s ease-out; } /* Stagger animation on initial load - extended to 20 items */ .cc-error-item, .cc-activity-item { animation: slideIn 0.5s ease-out backwards; } .cc-error-item:nth-child(1), .cc-activity-item:nth-child(1) { animation-delay: 0.10s; } .cc-error-item:nth-child(2), .cc-activity-item:nth-child(2) { animation-delay: 0.15s; } .cc-error-item:nth-child(3), .cc-activity-item:nth-child(3) { animation-delay: 0.20s; } .cc-error-item:nth-child(4), .cc-activity-item:nth-child(4) { animation-delay: 0.25s; } .cc-error-item:nth-child(5), .cc-activity-item:nth-child(5) { animation-delay: 0.30s; } .cc-error-item:nth-child(6), .cc-activity-item:nth-child(6) { animation-delay: 0.35s; } .cc-error-item:nth-child(7), .cc-activity-item:nth-child(7) { animation-delay: 0.40s; } .cc-error-item:nth-child(8), .cc-activity-item:nth-child(8) { animation-delay: 0.45s; } .cc-error-item:nth-child(9), .cc-activity-item:nth-child(9) { animation-delay: 0.50s; } .cc-error-item:nth-child(10), .cc-activity-item:nth-child(10) { animation-delay: 0.55s; } .cc-error-item:nth-child(11), .cc-activity-item:nth-child(11) { animation-delay: 0.60s; } .cc-error-item:nth-child(12), .cc-activity-item:nth-child(12) { animation-delay: 0.65s; } .cc-error-item:nth-child(13), .cc-activity-item:nth-child(13) { animation-delay: 0.70s; } .cc-error-item:nth-child(14), .cc-activity-item:nth-child(14) { animation-delay: 0.75s; } .cc-error-item:nth-child(15), .cc-activity-item:nth-child(15) { animation-delay: 0.80s; } .cc-error-item:nth-child(16), .cc-activity-item:nth-child(16) { animation-delay: 0.85s; } .cc-error-item:nth-child(17), .cc-activity-item:nth-child(17) { animation-delay: 0.90s; } .cc-error-item:nth-child(18), .cc-activity-item:nth-child(18) { animation-delay: 0.95s; } .cc-error-item:nth-child(19), .cc-activity-item:nth-child(19) { animation-delay: 1.00s; } .cc-error-item:nth-child(20), .cc-activity-item:nth-child(20) { animation-delay: 1.05s; } .cc-top-states-list .cc-state-percent { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-align: right; font-family: 'Courier New', monospace; } .cc-timeline { flex: 1; /* Fill remaining space */ } .cc-metrics-grid { flex: 1; /* Fill remaining space */ display: flex; flex-direction: column; justify-content: center; /* Center metrics vertically */ } /* Timeline Styles */ .cc-timeline { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; /* Fill remaining space in card, allow grow/shrink */ min-height: 0; /* Critical: allow flexbox to shrink */ overflow-y: auto; overflow-x: hidden; /* Prevent horizontal overflow */ padding-right: 8px; /* Prevent content from touching scrollbar */ border-radius: 8px; /* Rounded corners for scrollbar effect */ background: transparent; border: none; /* No visible border */ } .cc-timeline-item { display: flex; gap: 10px; position: relative; opacity: 0; transform: translateX(-20px) scale(0.9); animation: slideFromIcon 0.5s ease forwards; } /* Staggered delays for timeline items */ .cc-timeline-item:nth-child(1) { animation-delay: 0.8s; } .cc-timeline-item:nth-child(2) { animation-delay: 0.9s; } .cc-timeline-item:nth-child(3) { animation-delay: 1.0s; } .cc-timeline-item:nth-child(4) { animation-delay: 1.1s; } .cc-timeline-item:nth-child(5) { animation-delay: 1.2s; } @keyframes slideFromIcon { 0% { opacity: 0; transform: translateX(-20px) scale(0.9); } 100% { opacity: 1; transform: translateX(0) scale(1); } } .cc-timeline-item:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 24px; width: 2px; height: calc(100% + 4px); background: var(--primary-color); opacity: 0.3; } .cc-timeline-icon { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; font-size: 12px; /* Size for emoji */ line-height: 1; } /* Remove background colors - emoji provides the color */ .cc-timeline-icon.cc-icon-success, .cc-timeline-icon.cc-icon-danger, .cc-timeline-icon.cc-icon-warning, .cc-timeline-icon.cc-icon-info { background: transparent; border: none; } .cc-timeline-content { flex: 1; padding-bottom: 4px; } .cc-timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 10px; /* Add gap so time doesn't crush into action text */ } .cc-timeline-action { font-size: 11px; font-weight: 700; color: var(--color-text); text-transform: capitalize; flex: 1; /* Allow action to grow but not push time off screen */ } .cc-timeline-time { font-size: 11px; color: var(--color-muted); white-space: nowrap; /* Prevent time from wrapping */ flex-shrink: 0; /* Don't let time get squished */ } .cc-timeline-detail { font-size: 11px; color: var(--color-text); margin-bottom: 2px; } .cc-timeline-user { font-size: 11px; color: var(--color-muted); } /* Quick Metrics Grid */ .cc-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; } .cc-metric-item { text-align: center; padding: 10px; background: var(--background-color); border-radius: 6px; } .cc-metric-item .cc-metric-label { font-size: 11px; color: var(--color-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .cc-metric-item .cc-metric-value { font-size: 20px; font-weight: 700; color: var(--primary-color); } /* ============================================================================ RESPONSIVE BREAKPOINTS ============================================================================ */ /* Keep stable layout on all desktop screens */ /* Large screens: maintain 2-column bottom grid */ @media (min-width: 1400px) { .cc-bottom-stats { grid-template-columns: repeat(2, 1fr); max-width: 100%; } } /* Remove max-width constraint under 1400px */ @media (max-width: 1400px) { .cc-top-states-wrapper { max-width: 100% !important; /* Remove 300px constraint for better responsiveness */ } } /* Medium-large screens: still 2 columns but flexible (Bootstrap lg breakpoint) */ @media (min-width: 992px) and (max-width: 1199.98px) { .cc-bottom-stats { grid-template-columns: repeat(2, minmax(400px, 1fr)); } /* Stack chart and top states on smaller screens */ .cc-distribution-container { flex-direction: column; } .cc-top-states-wrapper { flex: 1 !important; min-width: unset !important; /* Remove minimum width constraint */ max-width: 100% !important; /* Take full width - override base 300px */ } .cc-top-states-list { flex-direction: row; flex-wrap: wrap; } .cc-top-state-item { flex: 0 0 calc(50% - 4px); } } /* Tablets: stack bottom stats */ @media (max-width: 1023px) { .command-center-layout { grid-template-areas: "main" "sidebar" "bottom"; grid-template-columns: 1fr; } .cc-sidebar-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .cc-bottom-stats { grid-template-columns: 1fr; } /* Stack chart and top states on mobile */ .cc-distribution-container { flex-direction: column; } .cc-top-states-wrapper { flex: 1 !important; min-width: unset !important; /* Remove minimum width constraint */ max-width: 100% !important; /* Take full width - override base 300px */ } } @media (max-width: 640px) { .command-center-layout { padding: 10px; gap: 10px; } .cc-header { flex-direction: column; gap: 10px; align-items: stretch; } .cc-page-title { font-size: 20px; } .cc-btn-primary { width: 100%; justify-content: center; } .cc-filter-group { flex-direction: column; } .cc-select, .cc-search { width: 100%; } .cc-chart-container { height: 200px; } .cc-timeline { max-height: 300px; } } /* ============================================================================ INTERACTIVE FILTER STYLES ============================================================================ */ /* Clickable filter elements - hover effect */ /* Only apply to items with cursor:pointer set by JavaScript */ .cc-metric[style*="cursor: pointer"]:hover, .cc-stat-item[style*="cursor: pointer"]:hover, .cc-metric-row[style*="cursor: pointer"]:hover, .cc-top-state-item:hover, .cc-timeline-item-clickable:hover { background: rgba(0, 188, 212, 0.15) !important; transform: translateX(2px); transition: all 0.2s ease; cursor: pointer; } /* Active filter highlight */ .cc-filter-active { background: rgba(0, 188, 212, 0.2) !important; border-left: 3px solid var(--primary-color) !important; padding-left: 14px !important; /* Increased from 8px to 14px for better spacing from number */ box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3); } /* Filter toast notification */ .cc-filter-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--primary-color); color: white; padding: 10px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 10000; opacity: 0; transition: all 0.3s ease; } .cc-filter-toast.cc-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Timeline clickable items */ .cc-timeline-item-clickable { transition: all 0.2s ease; border-radius: 4px; padding: 4px; margin: -4px; } .cc-timeline-item-clickable:hover .cc-timeline-action { color: var(--primary-color); text-decoration: underline; } /* ==================== FULL-SCREEN MODAL SYSTEM ==================== */ /* Expandable Card Header */ .cc-card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cc-expand-btn { background: var(--background-darker); border: 1px solid rgba(0, 188, 212, 0.3); color: var(--primary-color); padding: 8px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font-size: 11px; font-weight: 500; position: relative; overflow: hidden; } .cc-expand-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(0, 188, 212, 0.3); transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; } .cc-expand-btn:hover::before { width: 200px; height: 200px; } .cc-expand-btn:hover { background: var(--primary-color); color: #ffffff; transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 20px rgba(0, 188, 212, 0.5), 0 0 30px rgba(0, 188, 212, 0.3); border-color: var(--primary-color); } .cc-expand-btn svg { transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); position: relative; z-index: 1; } .cc-expand-btn:hover svg { transform: rotate(180deg) scale(1.2); } /* Full-Screen Modal Container */ .cc-fullscreen-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); z-index: 100000; display: none; opacity: 0; transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); } .cc-fullscreen-modal.cc-modal-active { display: flex; align-items: center; justify-content: center; opacity: 1; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); animation: modalBackdropFade 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); } @keyframes modalBackdropFade { 0% { opacity: 0; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); } 100% { opacity: 1; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); } } .cc-modal-container { width: 95vw; height: 95vh; background: var(--background-panel); border-radius: 12px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.7) translateY(100px) rotateX(15deg); opacity: 0; animation: modalProfoundEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transform-style: preserve-3d; perspective: 1000px; } @keyframes modalProfoundEntry { 0% { transform: scale(0.7) translateY(100px) rotateX(15deg); opacity: 0; filter: blur(10px); } 60% { transform: scale(1.02) translateY(-10px) rotateX(-2deg); opacity: 1; filter: blur(0px); } 100% { transform: scale(1) translateY(0) rotateX(0deg); opacity: 1; filter: blur(0px); } } /* Modal Header */ .cc-modal-header { background: var(--background-darker); padding: 20px 30px; border-bottom: 2px solid var(--primary-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .cc-modal-title { font-size: 24px; font-weight: 700; color: var(--color-text); margin: 0; letter-spacing: 0.3px; } .cc-modal-controls { display: flex; gap: 10px; align-items: center; } .cc-modal-btn { background: var(--background-panel); border: 1px solid rgba(0, 188, 212, 0.3); color: var(--primary-color); padding: 8px 16px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; font-size: 12px; font-weight: 500; } .cc-modal-btn:hover { background: var(--primary-color); color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3); } .cc-modal-close { background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; padding: 8px; border-radius: 6px; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); display: flex; align-items: center; justify-content: center; position: relative; } .cc-modal-close::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(211, 47, 47, 0.2); border-radius: 6px; transform: scale(0); transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .cc-modal-close:hover::before { transform: scale(1); } .cc-modal-close:hover { color: #d32f2f; transform: rotate(180deg) scale(1.2); } .cc-modal-close svg { position: relative; z-index: 1; } /* Modal Body */ .cc-modal-body { flex: 1; display: flex; overflow: hidden; padding: 30px; gap: 30px; opacity: 0; animation: modalBodyFadeIn 0.6s ease 0.3s forwards; } @keyframes modalBodyFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Chart Modal Layout */ .cc-modal-chart-section { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--background-darker); border-radius: 8px; padding: 40px; position: relative; opacity: 0; transform: scale(0.9) rotateY(-10deg); animation: chartSectionReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; transform-style: preserve-3d; } .cc-chart-hint { font-size: 11px; color: var(--color-text-muted); background: rgba(0, 188, 212, 0.1); padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(0, 188, 212, 0.3); text-align: center; margin-bottom: 20px; opacity: 0; animation: fadeIn 1s ease 1.5s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 0.9; } } @keyframes chartSectionReveal { 0% { opacity: 0; transform: scale(0.9) rotateY(-10deg); } 100% { opacity: 1; transform: scale(1) rotateY(0deg); } } .cc-modal-chart-section canvas { max-width: 700px; max-height: 700px; cursor: pointer; opacity: 0; animation: canvasPulseIn 1s ease 0.8s forwards; transition: transform 0.3s ease; } .cc-modal-chart-section canvas:hover { transform: scale(1.02); } @keyframes canvasPulseIn { 0% { opacity: 0; transform: scale(0.8); } 50% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } .cc-modal-sidebar { width: 350px; display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; overflow: hidden; opacity: 0; transform: translateX(50px); animation: sidebarSlideIn 0.6s ease 0.7s forwards; } @keyframes sidebarSlideIn { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } .cc-modal-sidebar .cc-sidebar-title { font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--color-text); margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 2px solid var(--primary-color); letter-spacing: 0.3px; } .cc-modal-search { width: 100%; padding: 12px 16px; background: var(--background-darker); border: 1px solid rgba(0, 188, 212, 0.3); border-radius: 6px; color: var(--color-text); font-size: 12px; transition: all 0.3s ease; } .cc-modal-search:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1); } .cc-all-states-list { flex: 1; overflow: hidden !important; display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px 0; max-height: none; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .cc-all-states-list::-webkit-scrollbar { display: none !important; width: 0 !important; } .cc-all-states-list::-webkit-scrollbar-track { display: none !important; } .cc-all-states-list::-webkit-scrollbar-thumb { display: none !important; } .cc-all-states-list::-webkit-scrollbar-thumb:hover { display: none !important; } /* Modal Stats Summary at Bottom */ .cc-modal-stats-summary { margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--primary-color); display: flex; flex-direction: column; gap: 10px; } .cc-modal-stat-item { display: flex; justify-content: space-between; align-items: center; } .cc-modal-stat-item .cc-stat-label { font-size: 12px; font-weight: 700; color: var(--color-text); letter-spacing: 0.5px; } .cc-modal-stat-item .cc-stat-value { font-size: 24px; font-weight: 700; color: var(--primary-color); font-family: 'Courier New', monospace; } /* State List Items - Compact but Visible */ .cc-top-state-item { background: var(--background-panel); padding: 12px 14px; border-radius: 8px; border-left: 4px solid; transition: all 0.3s ease; cursor: pointer; min-height: 55px; display: flex; align-items: center; gap: 10px; } .cc-top-state-item:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); background: var(--background-hover); } .cc-state-indicator { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .cc-state-details { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cc-state-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .cc-state-name { font-size: 12px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-state-count { font-size: 12px; font-weight: 900; color: var(--primary-color); font-family: 'Courier New', monospace; flex-shrink: 0; } .cc-state-bar-container { width: 100%; height: 6px; background: var(--background-darker); border-radius: 3px; overflow: hidden; } .cc-state-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; } .cc-state-percent { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-align: right; } /* Modal State Items - Larger, More Prominent Styling */ .cc-modal-state-item { background: var(--background-panel); padding: 18px 20px; border-radius: 8px; border-left: 4px solid; transition: all 0.3s ease; cursor: pointer; min-height: 80px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; overflow: visible; } .cc-modal-state-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0, 188, 212, 0.1) 0%, rgba(0, 188, 212, 0.05) 100%); border-radius: 8px; transform: scaleY(0); transition: transform 0.3s ease; z-index: 0; } .cc-modal-state-item>* { position: relative; z-index: 1; } .cc-modal-state-item:hover { background: var(--background-hover); transform: translateX(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .cc-modal-state-item:hover::before { transform: scaleY(1); } .cc-modal-state-item .cc-state-indicator { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .cc-modal-state-item:hover .cc-state-indicator { transform: scale(1.2) rotate(5deg); } .cc-modal-state-item .cc-state-details { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: visible; } .cc-modal-state-item .cc-state-header { display: flex; justify-content: space-between; align-items: center; } .cc-modal-state-item .cc-state-name { font-size: 20px; font-weight: 700; color: var(--color-text); letter-spacing: 0.5px; } .cc-modal-state-item .cc-state-count { font-size: 18px; font-weight: 700; color: var(--primary-color); font-family: 'Courier New', monospace; } .cc-modal-state-item .cc-state-bar-row { display: flex; align-items: center; gap: 10px; } .cc-modal-state-item .cc-state-bar-container { flex: 0 0 75%; height: 16px; background: var(--background-darker); border-radius: 8px; overflow: hidden; } .cc-modal-state-item .cc-state-bar { height: 100%; border-radius: 8px; transition: width 0.5s ease; } .cc-modal-state-item .cc-state-percent { font-size: 12px; font-weight: 700; color: var(--color-text-muted); min-width: 55px; text-align: left; flex-shrink: 0; } .cc-modal-stats { background: var(--background-darker); padding: 16px; border-radius: 8px; display: flex; flex-direction: column; gap: 10px; } .cc-stat-item { display: flex; justify-content: space-between; align-items: center; } .cc-stat-label { font-size: 11px; color: var(--color-text-muted); font-weight: 500; } .cc-stat-value { font-size: 18px; font-weight: 700; color: var(--primary-color); font-family: 'Courier New', monospace; } /* Timeline Modal Layout */ .cc-timeline-body { flex-direction: column; } .cc-timeline-filters { background: var(--background-darker); padding: 14px; border-radius: 8px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .cc-filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; } /* Modal-specific filter groups */ .cc-timeline-filters .cc-filter-group { display: flex; flex-direction: column; gap: 6px; } .cc-timeline-filters .cc-filter-group label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .cc-modal-select, .cc-modal-input { width: 100%; padding: 10px 14px; background: var(--background-panel); border: 1px solid rgba(0, 188, 212, 0.3); border-radius: 6px; color: var(--color-text); font-size: 12px; transition: all 0.3s ease; } .cc-modal-select:focus, .cc-modal-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1); } .cc-modal-select-sm { padding: 6px 10px; background: var(--background-darker); border: 1px solid rgba(0, 188, 212, 0.3); border-radius: 4px; color: var(--color-text); font-size: 11px; } .cc-timeline-results { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .cc-timeline-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(0, 188, 212, 0.2); } .cc-results-count { font-size: 12px; color: var(--color-text-muted); } .cc-results-count strong { color: var(--primary-color); font-weight: 700; font-size: 12px; } .cc-timeline-modal-list { flex: 1; overflow-y: auto; padding-right: 8px; } .cc-timeline-modal-list .cc-timeline-item { background: var(--background-darker); padding: 16px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid transparent; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; transform: translateX(-30px); animation: timelineItemSlideIn 0.4s ease forwards; } /* Staggered animation for timeline items */ .cc-timeline-modal-list .cc-timeline-item:nth-child(1) { animation-delay: 0.1s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(2) { animation-delay: 0.15s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(3) { animation-delay: 0.2s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(4) { animation-delay: 0.25s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(5) { animation-delay: 0.3s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(6) { animation-delay: 0.35s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(7) { animation-delay: 0.4s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(8) { animation-delay: 0.45s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(9) { animation-delay: 0.5s; } .cc-timeline-modal-list .cc-timeline-item:nth-child(10) { animation-delay: 0.55s; } @keyframes timelineItemSlideIn { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } .cc-timeline-modal-list .cc-timeline-item:hover { background: var(--background-hover); border-left-color: var(--primary-color); transform: translateX(8px) scale(1.02); box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2); } .cc-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 0; } .cc-pagination-btn { padding: 8px 16px; background: var(--background-darker); border: 1px solid rgba(0, 188, 212, 0.3); color: var(--color-text); border-radius: 6px; cursor: pointer; transition: all 0.3s ease; font-size: 12px; font-weight: 500; } .cc-pagination-btn:hover:not(:disabled) { background: var(--primary-color); color: #ffffff; transform: translateY(-2px); } .cc-pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } .cc-pagination-btn.active { background: var(--primary-color); color: #ffffff; } .cc-pagination-info { font-size: 12px; color: var(--color-text-muted); padding: 0 16px; } /* Light Mode Overrides for Modals */ body.light-mode .cc-fullscreen-modal { background: rgba(255, 255, 255, 0.95); } body.light-mode .cc-modal-container { background: #ffffff; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); } body.light-mode .cc-modal-header { background: #f5f5f5; } body.light-mode .cc-modal-chart-section { background: #f9f9f9; } body.light-mode .cc-modal-sidebar { background: #ffffff; } body.light-mode .cc-timeline-filters { background: #f9f9f9; } body.light-mode .cc-modal-search, body.light-mode .cc-modal-select, body.light-mode .cc-modal-input { background: #ffffff; } body.light-mode .cc-timeline-modal-list .cc-timeline-item { background: #f9f9f9; } /* ==================== STATE DETAIL MODAL ==================== */ .cc-state-modal .cc-modal-container { max-width: 1200px; height: auto; max-height: 90vh; } .cc-state-body { flex-direction: column; gap: 0; padding: 0; overflow: hidden; } /* Top Section: State Visual + Details in Row Layout */ .cc-state-top-section { display: flex; flex-direction: row; gap: 30px; padding: 30px 40px 20px 40px; flex: 0 0 auto; } .cc-state-visual { flex: 0 0 350px; display: flex; flex-direction: column; gap: 20px; } .cc-state-map { background: var(--background-darker); border-radius: 12px; padding: 0; /* Remove padding - renderer handles spacing */ display: flex; align-items: center; justify-content: center; min-height: 350px; height: 350px; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border: 3px solid var(--primary-color); } .cc-state-svg-wrapper { /* Positioned by renderer - dimensions calculated dynamically */ display: flex; align-items: center; justify-content: center; z-index: 1; } .cc-state-svg { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)); animation: floatState 4s ease-in-out infinite; } .cc-state-svg path, .cc-state-svg polygon, .cc-state-svg rect, .cc-state-svg circle, .cc-state-svg ellipse { transition: all 0.5s ease; } @keyframes floatState { 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)); } 50% { transform: translateY(-10px) scale(1.02); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4)); } } .cc-state-abbreviation { position: absolute; font-size: 48px; font-weight: 900; letter-spacing: 2px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); z-index: 10; pointer-events: none; } .cc-state-details { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } .cc-state-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cc-state-stat-card { background: var(--background-darker); border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 14px; border-left: 4px solid var(--primary-color); transition: all 0.3s ease; } .cc-state-stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 188, 212, 0.3); } .cc-stat-icon { font-size: 32px; line-height: 1; } .cc-stat-content { flex: 1; } .cc-state-stat-card .cc-stat-value { font-size: 28px; font-weight: 700; color: var(--primary-color); line-height: 1; margin-bottom: 8px; } .cc-state-stat-card .cc-stat-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* Company Rankings - Two Column Layout - COMPACT VERSION */ .cc-company-rankings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .cc-ranking-column { background: var(--background-darker); border-radius: 8px; padding: 10px; } .cc-section-subtitle { font-size: 12px; font-weight: 700; color: var(--color-text); margin: 0 0 2px 0; } .cc-section-description { font-size: 10px; color: var(--color-text-muted); margin: 0 0 8px 0; } .cc-ranking-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; padding-right: 8px; } .cc-ranking-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--background-panel); border-radius: 6px; border-left: 3px solid; transition: all 0.2s ease; } .cc-ranking-item:hover { transform: translateX(2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .cc-company-rank { font-size: 12px; font-weight: 900; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--primary-color); color: #ffffff; border-radius: 50%; flex-shrink: 0; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } .cc-company-info { flex: 1; min-width: 0; } .cc-company-name { font-size: 11px; font-weight: 700; color: var(--color-text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-company-metric { font-size: 11px; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; } .cc-metric-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; background: rgba(0, 188, 212, 0.2); color: var(--primary-color); border-radius: 10px; font-size: 10px; font-weight: 700; } /* Responsive: Stack columns on smaller screens */ @media (max-width: 1200px) { .cc-company-rankings { grid-template-columns: 1fr; } } .cc-company-lease-count { font-size: 12px; color: var(--color-text-muted); padding: 4px 8px; background: rgba(0, 188, 212, 0.1); border-radius: 10px; } /* Mobile Responsive */ @media (max-width: 1023px) { .cc-expand-btn { display: none; /* Hide expand button on mobile */ } .cc-modal-container { width: 100vw; height: 100vh; border-radius: 0; } .cc-modal-body { flex-direction: column; padding: 14px; } .cc-modal-sidebar { width: 100%; } .cc-filter-row { grid-template-columns: 1fr; } } /* ==================== REVENUE METRICS SECTION - FULL WIDTH BOTTOM ==================== */ .cc-revenue-section { width: 100%; padding: 30px 40px 40px 40px; background: var(--background-panel); border-top: 2px solid var(--primary-color); flex: 0 0 auto; } .cc-revenue-header h4 { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 0 0 12px 0; } .cc-revenue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; } .cc-revenue-card { background: var(--background-darker); padding: 10px; border-radius: 6px; border-left: 3px solid var(--primary-color); cursor: default; position: relative; overflow: hidden; } .cc-revenue-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .cc-revenue-card:hover::before { opacity: 1; } .cc-revenue-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .cc-revenue-label { font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .cc-revenue-value { font-size: 20px; font-weight: 700; font-family: 'Courier New', monospace; margin-bottom: 3px; line-height: 1.2; } .cc-revenue-note { font-size: 10px; color: var(--color-text-muted); font-style: italic; } .cc-tier-breakdown { padding-top: 8px; border-top: 1px solid var(--background-darker); } .cc-tier-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .cc-tier-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; background: var(--background-darker); border-radius: 6px; text-align: center; } .cc-tier-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; color: white; width: 100%; text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } .cc-tier-info { font-size: 11px; color: var(--color-text-muted); line-height: 1.3; } .cc-tier-count { font-size: 12px; font-weight: 700; color: var(--primary-color); font-family: 'Courier New', monospace; } /* Revenue highlight card (for total historical revenue) */ .cc-revenue-highlight { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-left: 3px solid #10b981; } .cc-account-status { animation: fadeIn 0.4s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================ COMPANY MANAGEMENT DASHBOARD STYLES Full-featured company administration interface ============================================================================ */ .company-dashboard { padding: 24px; max-width: 1600px; margin: 0 auto; } /* Header */ .company-dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--cc-border); } .company-dashboard-title { display: flex; align-items: center; gap: 10px; } .company-dashboard-title h1 { font-size: 28px; font-weight: 700; color: var(--primary-color); margin: 0; } .company-back-btn { color: var(--cc-primary); text-decoration: none; font-weight: 500; transition: opacity 0.2s; } .company-back-btn:hover { opacity: 0.8; } .company-dashboard-actions { display: flex; gap: 10px; } /* Tabs */ .company-dashboard-tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--cc-border); margin-bottom: 24px; } .company-tab { background: none; border: none; padding: 12px 24px; font-size: 15px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; position: relative; transition: all 0.2s; display: flex; align-items: center; gap: 8px; } .company-tab:hover { color: var(--cc-primary); background: rgba(0, 188, 212, 0.05); } .company-tab.active { color: var(--cc-primary); font-weight: 600; } .company-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--cc-primary); } .tab-badge { background: var(--cc-bg-hover); color: var(--color-text-secondary); padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; } .company-tab.active .tab-badge { background: var(--cc-primary); color: white; } /* Tab Panes */ .company-dashboard-content { min-height: 500px; } .tab-pane { display: none; } .tab-pane.active { display: block; animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Two Column Layout */ .company-two-column { display: grid; grid-template-columns: 1fr 350px; gap: 24px; } .company-main-content { min-width: 0; } .company-sidebar { min-width: 0; } /* Form Styles */ .form-row { margin-bottom: 20px; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .form-group { display: flex; flex-direction: column; } .form-group label { font-size: 12px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; } .cc-input, .cc-select, .cc-textarea { padding: 10px 12px; border: 1px solid var(--cc-border); border-radius: 6px; font-size: 12px; color: var(--color-text); background: var(--cc-bg-primary); transition: all 0.2s; } .cc-input:focus, .cc-select:focus, .cc-textarea:focus { outline: none; border-color: var(--cc-primary); box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1); } .cc-input[readonly], .cc-textarea[readonly] { background: var(--cc-bg-hover); cursor: not-allowed; } .cc-select[disabled] { background: var(--cc-bg-hover); cursor: not-allowed; } .cc-textarea { resize: vertical; font-family: inherit; } .form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--cc-border); } /* Stats Grid */ .company-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .company-stat-item { display: flex; flex-direction: column; gap: 4px; } .company-stat-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .company-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text); } /* Health Score */ .health-score-gauge { text-align: center; } .health-score-value { font-size: 32px; font-weight: 700; color: var(--cc-primary); margin-bottom: 10px; } .health-score-bar { width: 100%; height: 12px; background: var(--cc-bg-hover); border-radius: 6px; overflow: hidden; margin-bottom: 8px; } .health-score-fill { height: 100%; background: linear-gradient(90deg, #2e7d32 0%, #00bcd4 100%); transition: width 0.6s ease; border-radius: 6px; } .health-score-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); } /* Quick Actions */ .quick-actions-list { display: flex; flex-direction: column; gap: 8px; } .quick-action-btn { background: var(--cc-bg-primary); border: 1px solid var(--cc-border); padding: 12px 16px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--color-text); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 10px; text-align: left; } .quick-action-btn:hover { background: var(--cc-bg-hover); border-color: var(--cc-primary); transform: translateX(4px); } .quick-action-btn.quick-action-danger:hover { background: rgba(211, 47, 47, 0.1); border-color: #d32f2f; color: #d32f2f; } .quick-action-icon { font-size: 18px; } /* Activity Timeline */ .activity-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--cc-border); } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--cc-bg-hover); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .activity-content { flex: 1; min-width: 0; } .activity-action { font-size: 12px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; } .activity-meta { font-size: 12px; color: var(--color-text-secondary); display: flex; gap: 10px; } /* ============================================================================ TOAST NOTIFICATIONS ============================================================================ */ .company-toast { position: fixed; top: 80px; right: 24px; background: var(--background-panel); color: var(--color-text); padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); z-index: 10000; min-width: 300px; max-width: 500px; transform: translateX(calc(100% + 24px)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 12px; font-weight: 500; border-left: 4px solid var(--color-text-secondary); } .company-toast.show { transform: translateX(0); } .company-toast-success { border-left-color: var(--color-success); background: var(--background-panel); } .company-toast-error { border-left-color: var(--color-danger); background: var(--background-panel); } .company-toast-info { border-left-color: var(--cc-brand); background: var(--background-panel); } /* Dark mode support */ body.dark-mode .company-toast { background: #1e1e1e; border-color: #2e2e2e; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); } /* ============================================================================ SUBSCRIPTION TAB STYLES ============================================================================ */ .subscription-current, .subscription-pricing, .subscription-comp { padding: 8px 0; } .subscription-plan-card { background: var(--background-secondary); padding: 24px; border-radius: 8px; border: 1px solid var(--border-color); } .plan-tier { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .plan-tier h3 { margin: 0; font-size: 24px; color: var(--color-text); } .plan-price { font-size: 32px; font-weight: 700; color: var(--cc-brand); margin-bottom: 20px; } .comp-badge { background: var(--color-warning); color: #000; padding: 6px 12px; border-radius: 4px; font-weight: 700; font-size: 12px; } .plan-details { display: grid; gap: 10px; } .plan-detail-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .plan-detail-item .label { color: var(--color-text-secondary); font-weight: 500; } .plan-detail-item .value { color: var(--color-text); font-weight: 600; } .pricing-grid { display: grid; gap: 10px; } .pricing-item { display: flex; justify-content: space-between; padding: 10px; background: var(--background-secondary); border-radius: 4px; border: 1px solid var(--border-color); } .pricing-item.full-width { grid-column: 1 / -1; flex-direction: column; gap: 8px; } .pricing-item.total { background: var(--cc-brand); color: #fff; font-weight: 700; font-size: 18px; } .pricing-item.total .pricing-label, .pricing-item.total .pricing-value { color: #fff; } .pricing-label { color: var(--color-text-secondary); font-weight: 500; } .pricing-value { color: var(--color-text); font-weight: 600; } .pricing-value.discount { color: var(--color-danger); } .comp-status { padding: 16px; border-radius: 8px; border: 2px solid var(--border-color); } .comp-status.active { background: rgba(76, 175, 80, 0.1); border-color: var(--color-success); } .comp-status.inactive { background: var(--background-secondary); } .comp-badge-large { display: inline-block; background: var(--color-success); color: #fff; padding: 10px 14px; border-radius: 6px; font-weight: 700; font-size: 12px; } .comp-details { margin-top: 16px; display: grid; gap: 10px; } .comp-detail-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .subscription-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10000; align-items: center; justify-content: center; } .subscription-modal-content { background: var(--background-panel); border-radius: 12px; max-width: 1000px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .subscription-modal-header { padding: 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .subscription-modal-header h2 { margin: 0; color: var(--color-text); } .subscription-modal-close { background: none; border: none; font-size: 32px; color: var(--color-text-secondary); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background 0.2s; } .subscription-modal-close:hover { background: var(--background-secondary); } .subscription-modal-body { padding: 24px; } .tier-selection { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .tier-card { background: var(--background-secondary); border: 2px solid var(--border-color); border-radius: 12px; padding: 24px; text-align: center; transition: all 0.3s; } .tier-card:hover { border-color: var(--cc-brand); box-shadow: 0 4px 16px rgba(0, 188, 212, 0.2); transform: translateY(-4px); } .tier-card h3 { margin: 0 0 16px 0; font-size: 24px; color: var(--color-text); } .tier-price { font-size: 36px; font-weight: 700; color: var(--cc-brand); margin-bottom: 20px; } .tier-features { list-style: none; padding: 0; margin: 0 0 24px 0; text-align: left; } .tier-features li { padding: 8px 0; color: var(--color-text); position: relative; padding-left: 24px; } .tier-features li:before { content: '✓'; color: var(--color-success); font-weight: 700; position: absolute; left: 0; } .cc-panel-danger { border: 2px solid var(--color-danger); } .cc-panel-danger .cc-panel-header { background: rgba(211, 47, 47, 0.1); } /* Responsive */ @media (max-width: 1200px) { .company-two-column { grid-template-columns: 1fr; } .company-sidebar { order: -1; } .tier-selection { grid-template-columns: 1fr; } } @media (max-width: 768px) { .company-dashboard { padding: 16px; } .company-dashboard-header { flex-direction: column; align-items: flex-start; gap: 10px; } .company-dashboard-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } .form-row-2 { grid-template-columns: 1fr; } .company-stat-grid { grid-template-columns: 1fr; } .company-toast { right: 16px; left: 16px; max-width: none; min-width: 0; } .subscription-modal-content { width: 95%; max-height: 95vh; } .plan-price { font-size: 24px; } .tier-price { font-size: 28px; } } /* ============================================================================ BILLING TAB STYLES ============================================================================ */ .billing-filters { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .billing-filters .cc-select { min-width: 200px; flex: 1; } .billing-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .billing-table-wrapper .cc-table { min-width: 900px; } .cc-btn-block { width: 100%; margin-bottom: 8px; } /* =================================================== STATE MODAL - 2-COLUMN LAYOUT OVERRIDES Left Column: Revenue Analytics Only (Scrollable, Stacked Vertically) Right Column: Original State Layout (Map + Stats + Rankings) =================================================== */ /* Override existing .cc-state-body to support grid layout */ .cc-state-body { display: flex !important; flex-direction: row !important; padding: 0 !important; overflow: hidden !important; height: 100% !important; } /* 2-Column Grid: Left Sidebar (Revenue) + Right Main (Original Layout) */ .cc-state-layout-grid { display: grid; grid-template-columns: 380px 1fr; gap: 0; width: 100%; height: 100%; overflow: hidden; } /* LEFT SIDEBAR: Revenue Analytics Only (Scrollable) */ .cc-state-sidebar { background: var(--cc-bg-secondary); border-right: 2px solid var(--primary-color); overflow-y: auto; overflow-x: hidden; padding: 24px; height: 100%; } .cc-state-sidebar .cc-revenue-section { padding: 0 !important; background: transparent !important; border: none !important; width: 100%; } /* RIGHT COLUMN: Main Content with Original Layout */ .cc-state-main-content { overflow-y: auto; overflow-x: hidden; height: 100%; display: flex; flex-direction: column; } /* Restore original top section layout (map + stats side-by-side) */ .cc-state-main-content .cc-state-top-section { display: flex; flex-direction: row; gap: 30px; padding: 30px 40px 20px 40px; flex: 0 0 auto; } /* Restore original visual/map sizing */ .cc-state-main-content .cc-state-visual { flex: 0 0 350px; display: flex; flex-direction: column; gap: 20px; } /* Restore original state-details flex behavior */ .cc-state-main-content .cc-state-details { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } /* =================================================== Bootstrap Reboot Override - Remove Link Underlines from Buttons Must be at end of file to override Bootstrap's reboot.css =================================================== */ a.cc-btn, a.cc-btn:hover, a.cc-btn:focus, a.cc-btn:active, a.cc-btn-primary, a.cc-btn-primary:hover, a.cc-btn-primary:focus, a.cc-btn-primary:active { text-decoration: none !important; } /* ======================================== * STATE DATA CHANGES - PAGE SPECIFIC * ======================================== */ /** * State Data Changes - Superadmin Dashboard Styles */ .change-card { background: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin-bottom: 15px; transition: box-shadow 0.2s; } .change-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .change-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; } .entity-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; } .badge-well { background-color: #e3f2fd; color: #1976d2; } .badge-lease { background-color: #f3e5f5; color: #7b1fa2; } .badge-operator { background-color: #fff3e0; color: #e65100; } .badge-production { background-color: #e8f5e9; color: #388e3c; } .change-detail { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: center; margin: 15px 0; padding: 15px; background-color: #f8f9fa; border-radius: 6px; } .value-box { padding: 10px; border-radius: 4px; background: white; border: 1px solid #dee2e6; } .value-label { font-size: 11px; color: #6c757d; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; } .value-text { font-size: 14px; color: #212529; font-weight: 500; } .arrow-icon { color: #6c757d; font-size: 24px; } .change-actions { display: flex; gap: 10px; justify-content: flex-end; } .summary-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .stat-box { text-align: center; padding: 15px; } .stat-number { font-size: 36px; font-weight: 700; margin-bottom: 5px; } .stat-label { font-size: 14px; opacity: 0.9; } .empty-state { text-align: center; padding: 60px 20px; } .empty-state i { font-size: 64px; color: #dee2e6; margin-bottom: 20px; } .filter-tabs { margin-bottom: 20px; } .filter-tabs .nav-link { color: #6c757d; border: 1px solid #dee2e6; border-radius: 8px; margin-right: 10px; } .filter-tabs .nav-link.active { background-color: #667eea; color: white; border-color: #667eea; } /* ======================================== * COMPANY FORM - ADD/EDIT COMPANY * ======================================== */ /* =============================================== Company Form Styles Modern, clean layout for add/edit company =============================================== */ .company-form-container { max-width: 100%; width: 100%; margin: 0; padding: 0; /* No padding needed, content manages its own spacing */ background: var(--background-main); box-sizing: border-box; } /* Sticky Header */ .company-header-sticky { position: sticky; top: calc(var(--header-bar-height) + var(--secondary-nav-height)); z-index: 90; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 3rem; background: var(--background-panel); border-bottom: 2px solid var(--primary-color); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .company-header-left { display: flex; flex-direction: column; gap: 0.5rem; } .company-header-left h1 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); } .company-header-actions { display: flex; gap: 0.75rem; align-items: center; } .btn-back { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-link); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.2s; } .btn-back:hover { color: var(--primary-color); } /* Form Sections */ .company-form-content { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 3rem 1.5rem 3rem; } .form-section { background: var(--background-panel); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s; } .form-section:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Compact Section Header */ .section-header-compact { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-link-hover) 100%); color: white; } .section-icon-compact { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.2); border-radius: 6px; font-size: 1.1rem; flex-shrink: 0; } .section-header-compact h2 { margin: 0; font-size: 1rem; font-weight: 600; color: white; flex: 1; } /* Old Section Header (for backwards compatibility if needed) */ .section-header { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.75rem; background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-link-hover) 100%); color: white; position: relative; } .section-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); border-radius: 8px; font-size: 1.3rem; flex-shrink: 0; } .section-title { flex: 1; } .section-title h2 { margin: 0; font-size: 1.15rem; font-weight: 600; color: white; } .section-subtitle { margin: 0.15rem 0 0 0; font-size: 0.85rem; opacity: 0.9; color: rgba(255, 255, 255, 0.95); } /* Add Item Button in Section Header */ .btn-add-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; background: white; color: var(--primary-color); border: none; border-radius: 5px; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-left: auto; } .btn-add-item:hover { background: rgba(255, 255, 255, 0.95); transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); } /* Compact Section Body */ .section-body-compact { padding: 1.25rem 1.5rem; } /* Section Body (old) */ .section-body { padding: 1.5rem 1.75rem; } /* Subsections within Section Body */ .subsection { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); } .subsection:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .subsection-title { margin: 0 0 0.75rem 0; font-size: 0.95rem; font-weight: 700; color: var(--primary-color); display: flex; align-items: center; gap: 0.5rem; } .subsection-hint { font-size: 0.8rem; font-weight: 400; color: var(--color-text-secondary); font-style: italic; } /* Form Rows - Compact Layout */ .form-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; } .form-row:last-child { margin-bottom: 0; } /* Column Sizes */ .col-1 { flex: 0 0 calc(8.333% - 0.917rem); } .col-2 { flex: 0 0 calc(16.666% - 0.833rem); } .col-3 { flex: 0 0 calc(25% - 0.75rem); } .col-4 { flex: 0 0 calc(33.333% - 0.667rem); } .col-5 { flex: 0 0 calc(41.666% - 0.583rem); } .col-6 { flex: 0 0 calc(50% - 0.5rem); } .col-7 { flex: 0 0 calc(58.333% - 0.417rem); } .col-8 { flex: 0 0 calc(66.666% - 0.333rem); } .col-9 { flex: 0 0 calc(75% - 0.25rem); } .col-10 { flex: 0 0 calc(83.333% - 0.167rem); } .col-11 { flex: 0 0 calc(91.666% - 0.083rem); } .col-12 { flex: 1 1 100%; } /* Form Groups */ .form-group { display: flex; flex-direction: column; } .form-group label { margin-bottom: 0.35rem; font-weight: 600; color: var(--color-text); font-size: 0.85rem; } .form-group label.required::after { content: " *"; color: #dc3545; font-weight: bold; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.55rem 0.65rem; border: 1px solid var(--color-border); border-radius: 5px; font-size: 0.9rem; font-family: inherit; background: var(--background-main); color: var(--color-text); transition: all 0.2s; } /* Native select custom arrow - consistent chevron style */ .form-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); } .form-group textarea { resize: vertical; min-height: 70px; } /* Dynamic Tables */ .dynamic-table-container { overflow-x: auto; border-radius: 8px; border: 1px solid var(--color-border); } .dynamic-table { width: 100%; border-collapse: collapse; background: var(--background-main); } .dynamic-table thead { background: var(--background-nav); } .dynamic-table th { padding: 1rem; text-align: left; font-weight: 600; color: var(--color-text); border-bottom: 2px solid var(--color-border); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } .dynamic-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .dynamic-table tbody tr { transition: background 0.2s; } .dynamic-table tbody tr:hover { background: var(--background-hover); } .dynamic-table input, .dynamic-table select { width: 100%; padding: 0.5rem; font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--background-main); color: var(--color-text); } .dynamic-table input:focus, .dynamic-table select:focus { outline: none; border-color: var(--primary-color); } /* Empty State */ .empty-state td { text-align: center; padding: 3rem 1rem !important; color: var(--color-muted); font-style: italic; font-size: 1rem; } /* Remove Button in Table */ .btn-remove-row { background: #dc3545; color: white; border: none; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.3rem; } .btn-remove-row:hover { background: #c82333; transform: scale(1.05); } /* View/Edit Button in Table */ .btn-view-row { background: var(--primary-color); color: white; border: none; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; } .btn-view-row:hover { background: var(--color-link-hover); transform: scale(1.05); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.2rem; border: none; border-radius: 6px; font-weight: 600; font-size: 0.875rem; line-height: 1.2; cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap; height: 38px; } .btn-primary { background: var(--primary-color); color: var(--background-panel); border: 1px solid var(--primary-color); box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--background-panel); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4); } .btn-secondary { background: var(--color-muted); color: var(--background-panel); border: 1px solid var(--color-muted); box-shadow: var(--shadow-soft); } .btn-secondary:hover { background: var(--color-text); border-color: var(--color-text); color: var(--background-panel); transform: translateY(-1px); box-shadow: var(--shadow-medium); } /* Responsive Adjustments */ @media (max-width: 1200px) { .company-form-container { padding: 2rem; } .form-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .company-form-container { padding: 1rem; } .enterprise-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .section-header { flex-wrap: wrap; padding: 1rem; } .section-body { padding: 1rem; } .form-row { flex-direction: column; gap: 0.75rem; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { flex: 1 1 100%; } .btn { width: 100%; justify-content: center; } .dynamic-table-container { overflow-x: scroll; } } /* Dark Mode Support */ body.dark-mode .form-section { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.dark-mode .form-section:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } body.dark-mode .section-header { background: linear-gradient(135deg, #1a5490 0%, #0056b3 100%); } body.dark-mode .btn-add-item { background: rgba(255, 255, 255, 0.9); } body.dark-mode .btn-add-item:hover { background: white; } /* Quick Creation Section (Add Mode Only) */ .quick-creation-section { background: var(--background-panel); border: 1px solid var(--color-border); } .quick-creation-icon { background: var(--info-color); color: white; } body.dark-mode .quick-creation-section { background: var(--background-panel); border: 1px solid var(--color-border); } /* ============================================ SELECT2 CUSTOM STYLING Match WellLogix native select styling exactly Uses CSS variables to ensure perfect consistency ============================================ */ /* Hide the original select element completely when Select2 is initialized */ .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } /* Main selection box - match native select exactly */ .select2-container--default .select2-selection--single { height: auto !important; min-height: auto !important; border: 1px solid var(--color-border) !important; border-radius: 5px !important; padding: 0.55rem 2rem 0.55rem 0.65rem !important; font-size: 0.9rem !important; font-family: inherit !important; background: var(--background-main) !important; color: var(--color-text) !important; transition: all 0.2s !important; box-sizing: border-box !important; } /* Focus and open states - match native select:focus */ .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--primary-color) !important; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important; outline: none !important; } /* Selected value text - match native select font */ .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5 !important; padding: 0 !important; padding-left: 0 !important; padding-right: 0 !important; color: var(--color-text) !important; } /* Placeholder text - match native select placeholder */ .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--color-muted) !important; } /* Style Select2's arrow to match our native select chevron */ .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 0.4rem !important; width: 2rem !important; display: flex !important; align-items: center !important; justify-content: center !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none !important; } .select2-container--default .select2-selection--single .select2-selection__arrow::after { content: '' !important; display: block !important; width: 16px !important; height: 16px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 16px !important; } /* Rotate arrow when dropdown is open */ .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after { transform: rotate(180deg) !important; } /* Dropdown container */ .select2-dropdown { border: 1px solid var(--color-border) !important; border-radius: 5px !important; box-shadow: var(--shadow-medium) !important; background: var(--background-panel) !important; overflow: hidden !important; } /* Ensure Select2 container respects viewport bounds */ .select2-container--open .select2-dropdown { max-height: 300px !important; } /* Search box container in dropdown */ .select2-container--default .select2-search--dropdown { padding: 8px !important; background: var(--background-panel) !important; } /* Search input field */ .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--color-border) !important; border-radius: 5px !important; padding: 0.55rem 0.65rem !important; font-size: 0.9rem !important; font-family: inherit !important; background: var(--background-main) !important; color: var(--color-text) !important; } /* Search field focus state */ .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--primary-color) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important; } /* Dropdown options */ .select2-container--default .select2-results__option { padding: 0.55rem 0.65rem !important; font-size: 0.9rem !important; color: var(--color-text) !important; background: var(--background-panel) !important; } /* Highlighted option (keyboard navigation or hover) */ .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--primary-color) !important; color: white !important; } /* Selected option */ .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--primary-color) !important; color: white !important; } /* Results container */ .select2-results { background: var(--background-panel) !important; overflow-x: hidden !important; } .select2-results__options { max-height: 300px !important; background: var(--background-panel) !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Make sure Select2 container fits form-group width */ .select2-container { width: 100% !important; box-sizing: border-box !important; } /* Remove any conflicting borders or backgrounds */ .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--color-muted) !important; } /* ============================================ COMPED SECTION STYLES Checkbox, radios, and date inputs alignment ============================================ */ /* Subscription row custom layout - auto first column, equal split for remaining two */ .form-row.subscription-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; align-items: start; } /* Wrapper for subscription tier + comped - sets minimum width for auto column */ .subscription-field-wrapper { width: fit-content; min-width: fit-content; } /* Subscription tier dropdown + comped checkbox container */ .subscription-comped-group { display: flex; flex-direction: row; align-items: flex-end; gap: 1rem; min-width: fit-content; } .subscription-comped-group .form-group { flex-shrink: 0; } /* Subscription tier dropdown - fit to content */ .form-group #subscription_tier { width: 100% !important; min-width: 275px; max-width: 350px; } /* Force Select2 container for subscription tier to match */ #subscription_tier+.select2-container { min-width: 275px !important; max-width: 350px !important; } /* Prevent flash of unstyled select before Select2 initializes */ select.searchable-select { opacity: 0; position: absolute; pointer-events: none; } /* Show native select if Select2 fails to load */ select.searchable-select.select2-hidden-accessible { opacity: 1; } /* Comped checkbox inline (within subscription tier column) */ .comped-checkbox-inline { display: flex; align-items: center; padding-bottom: 0.55rem; } } /* Comped checkbox container - vertically centered with dropdown (legacy, may be removed) */ .form-group.comped-checkbox-container { display: flex; align-items: flex-start; justify-content: center; padding-top: 1.8rem; padding-left: 0; padding-right: 3rem; } /* Checkbox and radio label styles */ .checkbox-label, .radio-label { display: flex; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer; white-space: nowrap; } .radio-label { gap: 0.25rem; } /* Checkbox and radio input sizing */ input[type="checkbox"].comped-checkbox { width: 16px; height: 16px; cursor: pointer; margin-right: 0.5rem; /* ensure spacing between checkbox and label text */ } input[type="radio"].comped-radio { width: 14px; height: 14px; cursor: pointer; } /* Comped label text */ .checkbox-label>span, .radio-label>span { font-weight: 500; } /* Comped inline fields (type selector and dates) */ .comped-inline-field { display: flex; justify-content: center; align-items: flex-start; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; position: relative; } /* Wrapper that centers content with calculated margins */ .comped-field-wrapper { width: fit-content; margin: 0 auto; display: flex; flex-direction: column; } .comped-inline-field label:not(.radio-label):not(.checkbox-label) { margin-bottom: 0.5rem; padding-left: 0; } /* Special padding for Comp Duration label */ .comp-duration-label { padding-left: 0.4rem !important; } /* Radio button group container */ .comped-radio-group { display: flex; gap: 1rem; flex-wrap: nowrap; padding-left: 0; padding-top: 0.4rem; } /* Vertical dividers for comped fields - positioned at left edge */ .subscription-row .comped-inline-field::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background-color: rgba(0, 0, 0, 0.1); } /* Date range container */ .date-range { display: flex; gap: 0.5rem; align-items: center; width: 100%; } .date-range input[type="date"] { flex: 1; } .date-separator { color: var(--color-muted); } /* Hidden rows/fields (shown via JS) */ .comped-hidden-row { display: none; } /* ============================================ USER AUTOCOMPLETE STYLES ============================================ */ /* User search input wrapper */ .user-search-wrapper { display: flex; gap: 0; align-items: flex-start; flex-direction: column; position: relative; } .user-search-wrapper input[type="text"] { width: 100%; margin-bottom: 0; } /* Autocomplete dropdown */ .autocomplete-dropdown { display: none; width: 100%; max-height: 200px; overflow-y: auto; border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 4px 4px; background: var(--background-panel); box-shadow: var(--shadow-medium); position: absolute; z-index: 1000; top: 100%; left: 0; margin-top: 0; } /* User validation messages */ .user-selected, .user-not-found, #user_selected, #user_not_found { display: none !important; margin-top: 0.5rem; padding: 0.75rem; border-radius: 6px; font-size: 0.9rem; } .user-selected, #user_selected { color: var(--success-color); background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); } .user-selected i, #user_selected i { color: var(--success-color); font-size: 1.25rem; flex-shrink: 0; } .user-not-found, #user_not_found { color: var(--danger-color); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); } .user-not-found i, #user_not_found i { color: var(--danger-color); } /* When validation messages are visible (controlled by JS) */ .user-selected[style*="display: block"], .user-not-found[style*="display: block"], #user_selected[style*="display: block"], #user_not_found[style*="display: block"] { display: flex !important; align-items: flex-start; gap: 0.75rem; } /* Selected user details container */ .selected-user-details { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .selected-user-name { font-weight: 600; font-size: 0.9375rem; color: #0f172a; } .selected-user-email { font-size: 0.875rem; color: #64748b; } .selected-user-company { font-size: 0.8125rem; color: #94a3b8; font-style: italic; } /* User action buttons container */ .user-action-buttons.form-group { flex-direction: row !important; gap: 0.5rem; align-items: flex-end; padding-bottom: 0.5rem; justify-content: flex-start; } .user-action-buttons .btn { white-space: nowrap; font-size: 0.8125rem; padding: 0.4rem 0.65rem; flex: 0 0 auto; } .user-action-buttons .btn i { margin-right: 0.25rem; font-size: 0.875rem; } /* Legacy class - kept for backward compatibility */ .new-user-button-container { display: flex; align-items: flex-end; padding-bottom: 0.5rem; } /* User Lookup Modal */ .user-results-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 4px; background: var(--background-main); } .user-result-card { padding: 1rem; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background 0.2s; } .user-result-card:last-child { border-bottom: none; } .user-result-card:hover { background: var(--background-hover); } .user-result-card .user-name { font-weight: 600; font-size: 1rem; color: var(--color-text); margin-bottom: 0.25rem; } .user-result-card .user-details { display: flex; gap: 1rem; font-size: 0.875rem; color: #64748b; flex-wrap: wrap; } .user-result-card .user-detail-item { display: flex; align-items: center; gap: 0.25rem; } .user-result-card .user-detail-item i { font-size: 0.75rem; } /* ============================================ RESPONSIVE MEDIA QUERIES ============================================ */ /* Under 1400px - Revamp subscription row layout */ @media (max-width: 1399px) { /* Switch to 2-row layout: subscription full-width on row 1, comped fields side-by-side on row 2 */ .form-row.subscription-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } /* Wrapper takes full width on first row */ .subscription-field-wrapper { grid-column: span 2; width: 100%; } /* Subscription + Comped group stays horizontal but full width */ .subscription-comped-group { width: 100%; justify-content: flex-start; } .subscription-comped-group .form-group { flex: 0 0 auto; } .form-group #subscription_tier { min-width: 250px; max-width: 350px; } /* Comped fields stay side-by-side on second row */ .comped-inline-field { justify-content: flex-start; padding-left: 0; } .comped-field-wrapper { margin: 0; width: 100%; } /* Remove vertical dividers on narrow screens */ .subscription-row .comped-inline-field::before { display: none; } /* Adjust radio group for smaller screens */ .comped-radio-group { gap: 0.75rem; } } /* ======================================== * RESPONSIVE - BOOTSTRAP 5 BREAKPOINTS * ======================================== */ /* =============================== media.css – Mobile & Touch Styling Aligned with Bootstrap 5 breakpoints For screens <768px (Bootstrap 'md' breakpoint) =============================== */ @media (max-width: 767.98px) { /*=============================== GLOBAL RESETS =================================*/ *, *::before, *::after { box-sizing: border-box; } body, html { background: var(--background-main) !important; padding: 0 !important; margin: 0 !important; width: 100vw !important; overflow-x: hidden; } /*=============================== HEADER BAR =================================*/ .header-bar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 0 1em !important; height: var(--media-header-bar-height); background: var(--background-header); box-shadow: var(--shadow-soft); border-bottom: 1px solid var(--color-border); position: relative !important; top: 0; left: 0; right: 0; z-index: 10000; } .header-left { display: flex; align-items: center; justify-content: flex-start; } .header-left, .header-right { flex: 0 0 auto; } .header-center { flex: 1 1 0; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; } .hamburger-btn { display: inline-block; background: none; border: none; font-size: 1.5em; color: var(--primary-color); margin-right: 3px; cursor: pointer; padding: 0 4px 0 0; outline: none; transition: background var(--transition-fast); } .product-logo-image { height: 130px !important; margin: auto; } .product-logo { font-size: 0.97em; font-weight: bold; color: var(--primary-color); margin-left: 2px; white-space: nowrap; } .header-right { display: flex; align-items: center; gap: 4px; } .user-avatar { height: 32px; width: 32px; border-radius: 50%; object-fit: cover; } .secondary-nav-bar, .user-menu, .theme-switch { display: none !important; } /*=============================== MOBILE NAV DRAWER =================================*/ .mobile-nav-drawer { position: fixed; top: 0; left: 0; width: 80vw; max-width: 330px; min-width: 200px; height: 100vh; background: var(--background-main); box-shadow: var(--shadow-medium); border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 18px; border-bottom-right-radius: 18px; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; z-index: 20000; transform: translateX(-110%); transition: transform 0.25s cubic-bezier(.5, .02, .37, 1.07); } .mobile-nav-drawer.open { transform: translateX(0); } .drawer-link { background: transparent; color: var(--primary-color); font-size: 1.13em; padding: 14px 22px; border-bottom: 1px solid var(--color-border); font-weight: 500; letter-spacing: 0.01em; outline: none; margin: 0; display: block; transition: background var(--transition-fast), color var(--transition-fast); } .drawer-link:last-child { border-bottom: none; } .drawer-link:active, .drawer-link:hover, .drawer-link:focus { background: var(--background-panel); color: var(--color-on-panel); } /* Light-mode variant for drawer-link */ body:not(.dark-mode) .drawer-link, html:not([data-theme='dark']) .drawer-link { color: var(--primary-hover); border-bottom: 1px solid var(--color-border); } body:not(.dark-mode) .drawer-link:active, html:not([data-theme='dark']) .drawer-link:active, body:not(.dark-mode) .drawer-link:hover, html:not([data-theme='dark']) .drawer-link:hover { background: var(--background-control); color: var(--primary-color); } .mobile-nav-divider { height: 1px; margin: 8px 0; background: var(--color-border); width: 100%; } .mobile-nav-overlay { display: none; position: fixed; z-index: 19999; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.14); pointer-events: none; } .mobile-nav-overlay.open { display: block; pointer-events: auto; } .drawer-links-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; } .drawer-links-bottom { flex: 0 0 auto; padding-bottom: calc(4rem + env(safe-area-inset-bottom, 60px)); border-top: 1px solid #222; background: inherit; } .drawer-link { padding: 1.2rem 2rem; color: #00e0ff; text-decoration: none; display: block; font-size: 1.1rem; border-bottom: 1px solid #181818; } .drawer-links-bottom .drawer-link { border-bottom: none; } /*=============================== CONTENT & CARD PANEL =================================*/ .admin-content-area, .users-content-area, .companies-content-area, .leases-content-area, .main-content { padding: 9px 1vw 26px 1vw !important; background: transparent !important; max-width: 100vw !important; box-sizing: border-box; margin-top: var(--header-bar-height) !important; } .card { border-radius: 14px !important; box-shadow: var(--shadow-soft) !important; background: var(--background-panel) !important; padding: 12px 7px !important; margin-bottom: 12px !important; } /*=============================== HEADLINES =================================*/ h1, h2, .page-title, .users-header-flex h1 { font-size: 0.98em !important; word-break: break-word !important; padding: 0 0 4px 0 !important; margin-bottom: 4px !important; text-align: left !important; color: var(--primary-color) !important; } /*=============================== FILTERS & SEARCH =================================*/ .filter-bar, .search-reset-wrap, .users-header-flex { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; margin-bottom: 8px !important; } .search-reset-wrap input[type="search"], .search-reset-wrap input[type="text"], .search-reset-wrap input, .search-reset-wrap select { font-size: 0.97em !important; padding: 8px 7px !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 5px !important; background: var(--background-control); color: var(--color-text); border: 1px solid var(--color-border) !important; } .search-reset-wrap button, .btn-primary, .btn-secondary, .add-btn, .btn-critical { width: 100% !important; margin-bottom: 6px !important; min-height: 36px !important; font-size: 0.97em !important; border-radius: 8px !important; box-shadow: var(--shadow-soft); transition: background var(--transition-fast); } .btn-icon:active { background: var(--background-control); } /*=============================== TABLE AS CARDS (HYBRID) =================================*/ .data-table, .table-card, .data-table-container { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; overflow-x: auto !important; } .data-table thead { display: none !important; } .data-table tbody tr { display: block; background: var(--background-panel); margin-bottom: 8px; box-shadow: var(--shadow-soft); border-radius: 10px; overflow: hidden; border: none; padding: 0; position: relative; } .data-table td { display: flex !important; justify-content: space-between; align-items: center; padding: 8px 9px !important; font-size: 0.97em !important; border: none !important; border-bottom: 1px solid var(--color-border) !important; background: none !important; position: relative; word-break: break-word; overflow-wrap: anywhere; color: var(--color-text); } .data-table td:before { content: attr(data-label); flex: 1 0 50%; font-weight: 600; color: var(--primary-color); opacity: 0.93; font-size: 0.93em; padding-right: 5px; } .data-table td:last-child { border-bottom: none !important; } .data-table td.actions-cell { text-align: center !important; padding: 13px 3px 6px 3px !important; } /*=============================== USER CARD MOBILE (ALTERNATIVE TO TABLE) =================================*/ .users-list-mobile { display: flex; flex-direction: column; gap: 7px; margin-top: 1px; } .user-card { border-radius: 15px !important; box-shadow: var(--shadow-soft) !important; padding: 18px 16px 14px 16px !important; margin: 0 4px !important; min-width: 0 !important; font-size: 1.06em !important; background: var(--background-panel); color: var(--color-text); } .user-card .user-card-row { gap: 10px !important; font-size: 1em !important; color: var(--color-text); } .user-card-label { font-weight: 600; color: var(--primary-color); font-size: 1em; min-width: 90px; } .user-card-actions { margin-top: 5px; display: flex; gap: 5px; width: 100%; } .user-card-actions .btn-icon { min-width: 30px; min-height: 30px; font-size: 1em; border-radius: 7px; background: var(--background-control); color: var(--primary-color); border: 1px solid var(--color-border); transition: background var(--transition-fast); } .user-card-actions .btn-icon:active { background: var(--background-panel); } .user-card-actions-horizontal { border-top: 2px solid var(--color-border); /* horizontal bar */ padding-top: 12px; /* space above the buttons */ margin-top: 18px; /* space below the bar, before the container */ } /*=============================== MOBILE HEADER & FILTERS =================================*/ .users-header-mobile { display: flex; flex-direction: column; gap: 6px; margin-bottom: 3px; margin-top: 2px; } .users-title-row { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 4px; } .users-header-mobile h1 { font-size: 8vw !important; padding: 16px 0 10px 0 !important; width: 100vw !important; text-align: center !important; color: var(--primary-color) !important; letter-spacing: 0.01em; font-weight: 800; margin: 0 0 4px 0 !important; } .users-header-mobile .add-btn { display: block !important; width: 92vw !important; max-width: 380px !important; margin: 0 auto 12px auto !important; font-size: 1.08em !important; font-weight: 700; padding: 14px 0 !important; border-radius: 13px !important; color: var(--color-on-panel) !important; background: var(--primary-color) !important; box-shadow: var(--shadow-soft) !important; transition: background var(--transition-fast); } .users-header-mobile .add-btn:hover { background: var(--primary-hover) !important; } .user-filters-mobile { display: flex; flex-direction: column; gap: 5px; } .user-filters-mobile .filter-row { display: flex; gap: 5px; margin-bottom: 0; margin-left: auto; margin-right: auto; } .user-filters-mobile select { flex: 1 1 33%; font-size: 0.96em; border-radius: 7px; padding: 6px 4px; background: var(--background-control); color: var(--color-text); border: 1px solid var(--color-border); } .user-filters-mobile .search-row { display: flex; gap: 5px; align-items: center; margin-left: auto; margin-right: auto; } .user-filters-mobile .search-row input[type="text"] { flex: 1 1 80%; border-radius: 7px; font-size: 0.96em; padding: 7px 7px; margin-bottom: 0; margin-right: 5px; color: var(--search-text); border: 1px solid var(--color-border); } .user-filters-mobile .reset-btn-mobile { display: flex; align-items: center; justify-content: center; font-weight: 900 !important; font-size: 1.5em !important; line-height: 36px; padding: 0; border-radius: 50% !important; box-shadow: var(--shadow-soft); background: var(--danger-color) !important; color: var(--color-on-panel) !important; border: none !important; width: 36px !important; height: 36px !important; margin-left: 4px !important; transition: background var(--transition-fast); } .user-filters-mobile .reset-btn-mobile:active { background: darken(var(--danger-color), 10%); } /*=============================== SWITCH DISPLAY: TABLE ⇄ CARDS =================================*/ .card.user-management-card, .header-flex, .filter-bar, .user-filter-bar, #users-table-container { display: none !important; } .users-header-mobile, .user-filters-mobile, .users-list-mobile { gap: 15px !important; margin-top: 6px !important; } /*=============================== FLOATING ACTION BUTTON (FAB) =================================*/ .add-btn.fab { position: fixed; right: 13px; bottom: 14px; z-index: 20200; border-radius: 50%; min-width: 48px; min-height: 48px; font-size: 1.1em; box-shadow: var(--shadow-soft); background: var(--primary-color); color: var(--color-on-panel); display: flex; justify-content: center; align-items: center; transition: background var(--transition-fast); } .add-btn.fab:active { background: var(--primary-hover); } /*=============================== DARK MODE OVERRIDES =================================*/ body.dark-mode, html[data-theme='dark'] { background: var(--background-main) !important; } body.dark-mode .card, html[data-theme='dark'] .card, body.dark-mode .data-table tr, html[data-theme='dark'] .data-table tr, body.dark-mode .user-card, html[data-theme='dark'] .user-card { background: var(--background-panel) !important; color: var(--color-text) !important; box-shadow: var(--shadow-medium) !important; } body.dark-mode .data-table th, body.dark-mode .data-table td, html[data-theme='dark'] .data-table th, html[data-theme='dark'] .data-table td, body.dark-mode .user-card-label, html[data-theme='dark'] .user-card-label { color: var(--primary-color) !important; border-color: var(--color-border) !important; } body.dark-mode .drawer-link, html[data-theme='dark'] .drawer-link { background: var(--background-main) !important; color: var(--primary-hover) !important; border-bottom: 1px solid var(--background-panel) !important; } body.dark-mode .user-card-value, html[data-theme='dark'] .user-card-value { color: var(--color-text) !important; } footer, .footer { font-size: 0.89em !important; text-align: center !important; color: var(--info-color) !important; margin-top: 12px !important; padding-bottom: 12px !important; } /*=============================== MOBILE-SPECIFIC: BUTTON + ADD-BTN ADJUSTMENTS =================================*/ .add-btn, .add-btn.fab { font-size: 0.97em !important; padding: 6px 0 !important; min-width: 60px !important; min-height: 28px !important; border-radius: 7px !important; margin: 0 !important; box-shadow: var(--shadow-soft) !important; } .user-filters-mobile select, .search-reset-wrap input[type="text"] { padding: 6px 6px !important; font-size: 0.96em !important; min-height: 22px !important; margin-bottom: 0 !important; } .user-filters-mobile .search-row { align-items: center; } /*=============================== USER-CARD LAYOUT ADJUSTMENTS =================================*/ .user-card-main-row { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; gap: 12px; width: 100%; } .user-card-info { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .user-card-actions-vertical { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 40px; margin-left: 10px; margin-right: 10px; margin-top: 0; justify-content: flex-start; } /* =============== New Universal Button Styles =============== */ .btn-reactivate, .btn-reactivate-user, .btn-reactivate-company, .btn-reactivate-lease { background: var(--success-color, #22c46e); color: var(--color-on-panel, #fff); display: inline-flex; flex: 1 1 0; min-width: 130px; max-width: 180px; align-items: center; gap: 6px; border: none; border-radius: 7px; font-size: 1em; font-weight: 700; padding: 6px 16px; box-shadow: none; justify-content: center; transition: background .18s, box-shadow .18s; cursor: pointer; margin: 0; } .btn-reactivate:hover, .btn-reactivate-user:hover, .btn-reactivate-company:hover, .btn-reactivate-lease:hover, .btn-reactivate:focus, .btn-reactivate-user:focus, .btn-reactivate-company:focus, .btn-reactivate-lease:focus { background: #16a34a; color: #fff; } .btn-hard-delete, .btn-hard-delete-user, .btn-hard-delete-company, .btn-hard-delete-lease, .btn-delete { background: var(--danger-color, #e54848); color: var(--color-on-panel, #fff); display: inline-flex; flex: 1 1 0; min-width: 130px; max-width: 180px; align-items: center; gap: 6px; border: none; border-radius: 7px; font-size: 1em; font-weight: 700; padding: 6px 16px; box-shadow: none; justify-content: center; transition: background .18s, box-shadow .18s; cursor: pointer; margin: 0; } .btn-hard-delete:hover, .btn-hard-delete-user:hover, .btn-hard-delete-company:hover, .btn-hard-delete-lease:hover, .btn-delete:hover, .btn-delete-user:hover, .btn-delete-company:hover, .btn-delete-lease:hover, .btn-hard-delete:focus, .btn-hard-delete-user:focus, .btn-hard-delete-company:focus, .btn-hard-delete-lease:focus, .btn-delete:focus, .btn-delete-user:focus, .btn-delete-company:focus, .btn-delete-lease:focus { background: #b91c1c; color: #fff; } /* Responsive 100% width for smallest screens (Bootstrap 'xs' - extra small) */ @media (max-width: 575.98px) { .btn-reactivate, .btn-hard-delete { width: 100%; min-width: 0; max-width: none; } } } /* ================================ Tablet/Small Laptop - Hide secondary nav if too crowded For screens between 768px and 1100px =================================*/ @media (min-width: 768px) and (max-width: 1100px) { /* Hide secondary nav bar and show hamburger on smaller desktops/tablets */ .secondary-nav-bar { display: none !important; } .hamburger-btn { display: inline-block !important; background: none; border: none; font-size: 1.5em; color: var(--primary-color); margin-right: 8px; cursor: pointer; padding: 4px 8px; outline: none; transition: background var(--transition-fast); } .hamburger-btn:hover { background: var(--background-hover); border-radius: 4px; } /* Show mobile drawer for navigation */ .mobile-nav-drawer, .mobile-nav-overlay { display: block !important; } /* Adjust main content margin since no secondary nav */ .users-page .users-content-area, .leases-page .leases-content-area, .superadmin-page .content-area, .main-content { margin-top: calc(var(--header-bar-height) + 32px) !important; } } /* ================================ Desktop Hide/Show Switch For screens larger than 1100px =================================*/ @media (min-width: 1101px) { .hamburger-btn, .mobile-nav-drawer, .mobile-nav-overlay, .users-header-mobile, .user-filters-mobile, .users-list-mobile { display: none !important; } } /* ======================================== * RESPONSIVE - LEASES SPECIFIC * ======================================== */ /* ================================ leases-media.css – Lease Management Mobile Styling For screens <768px (Bootstrap md breakpoint) ================================ */ @media (max-width: 767.98px) { /*=============================== MOBILE HEADER & CONTROLS =================================*/ .leases-header-mobile { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 6px 0; padding: 0 1vw; } .leases-header-mobile h1 { font-size: 8vw !important; margin: 0 !important; padding: 8px 0 6px 0 !important; text-align: center !important; color: var(--primary-color) !important; font-weight: 800; letter-spacing: 0.01em; } .leases-header-mobile .add-btn { display: block !important; width: 92vw !important; max-width: 380px !important; margin: 0 auto 12px auto !important; font-size: 1.08em !important; font-weight: 700; padding: 12px 0 !important; border-radius: 13px !important; color: var(--color-on-panel) !important; background: var(--primary-color) !important; box-shadow: var(--shadow-soft) !important; transition: background var(--transition-fast); } .leases-header-mobile .add-btn:hover { background: var(--primary-hover) !important; } /*=============================== MOBILE FILTERS =================================*/ .lease-filters-mobile { display: flex; flex-direction: column; gap: 5px; margin: 0 1vw 8px 1vw; } .lease-filters-mobile .filter-row { display: flex; gap: 5px; margin: 0 auto; width: 100%; } .lease-filters-mobile select { flex: 1 1 33%; font-size: 0.96em; border-radius: 7px; padding: 6px 6px; background: var(--background-control); color: var(--color-text); border: 1px solid var(--color-border); } .lease-filters-mobile .search-row { display: flex; gap: 5px; align-items: center; margin: 0 auto; width: 100%; } .lease-filters-mobile .search-row input[type="text"] { flex: 1 1 80%; border-radius: 7px; font-size: 0.96em; padding: 7px 7px; margin: 0; color: var(--search-text); border: 1px solid var(--color-border); } .lease-filters-mobile .reset-btn-mobile { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.5em; line-height: 36px; padding: 0; border-radius: 50%; box-shadow: var(--shadow-soft); background: var(--danger-color); color: var(--color-on-panel); border: none; width: 36px; height: 36px; margin-left: 4px; transition: background var(--transition-fast); } .lease-filters-mobile .reset-btn-mobile:active { background: darken(var(--danger-color), 10%); } /*=============================== MOBILE LEASE CARD LIST =================================*/ .leases-list-mobile { display: flex; flex-direction: column; gap: 8px; margin: 0 4px; } .lease-card { border-radius: 15px !important; box-shadow: var(--shadow-soft) !important; padding: 18px 16px 14px 16px !important; margin: 0 4px !important; min-width: 0 !important; font-size: 1.06em !important; background: var(--background-panel); color: var(--color-text); } .lease-card .lease-card-main-row { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; gap: 12px; width: 100%; } .lease-card-info { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .lease-card-label { font-weight: 600; color: var(--primary-color); font-size: 1em; min-width: 90px; } .lease-card-value { color: var(--color-text); font-size: 1em; overflow-wrap: anywhere; } .lease-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 40px; margin-left: 8px; margin-right: 8px; margin-top: 0; justify-content: flex-start; } .lease-card-actions button { background: var(--background-control); color: var(--primary-color); border: 1px solid var(--color-border); border-radius: 7px; font-size: 1em; padding: 6px 12px; min-width: 36px; min-height: 36px; cursor: pointer; transition: background var(--transition-fast); } .lease-card-actions button:active { background: var(--background-panel); } /*=============================== HIDE DESKTOP ON MOBILE =================================*/ .lease-management-card, .header-flex, .filter-bar, #leases-table-container { display: none !important; } } /* ================================ Desktop Hide/Show Switch (Bootstrap md and above) =================================*/ @media (min-width: 768px) { .leases-header-mobile, .lease-filters-mobile, .leases-list-mobile, #add-lease-btn-mobile { display: none !important; } } /* ======================================== * RESPONSIVE - COMPANIES SPECIFIC * ======================================== */ /* ================================ companies-media.css – Company Management Mobile Styling For screens <768px (Bootstrap md breakpoint) ================================ */ @media (max-width: 767.98px) { /*=============================== MOBILE HEADER & CONTROLS =================================*/ .companies-header-mobile { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 6px 0; padding: 0 1vw; } .companies-header-mobile h1 { font-size: 8vw !important; margin: 0 !important; padding: 8px 0 6px 0 !important; text-align: center !important; color: var(--primary-color) !important; font-weight: 800; letter-spacing: 0.01em; } .companies-header-mobile .add-btn { display: block !important; width: 92vw !important; max-width: 380px !important; margin: 0 auto 12px auto !important; font-size: 1.08em !important; font-weight: 700; padding: 12px 0 !important; border-radius: 13px !important; color: var(--color-on-panel) !important; background: var(--primary-color) !important; box-shadow: var(--shadow-soft) !important; transition: background var(--transition-fast); } .companies-header-mobile .add-btn:hover { background: var(--primary-hover) !important; } /*=============================== MOBILE FILTERS =================================*/ .company-filters-mobile { display: flex; flex-direction: column; gap: 5px; margin: 0 1vw 8px 1vw; } .company-filters-mobile .filter-row { display: flex; gap: 5px; margin: 0 auto; width: 100%; } .company-filters-mobile select { flex: 1 1 33%; font-size: 0.96em; border-radius: 7px; padding: 6px 6px; background: var(--background-control); color: var(--color-text); border: 1px solid var(--color-border); } .company-filters-mobile .search-row { display: flex; gap: 5px; align-items: center; margin: 0 auto; width: 100%; } .company-filters-mobile .search-row input[type="text"] { flex: 1 1 80%; border-radius: 7px; font-size: 0.96em; padding: 7px 7px; margin: 0; color: var(--search-text); border: 1px solid var(--color-border); } .company-filters-mobile .reset-btn-mobile { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.5em; line-height: 36px; padding: 0; border-radius: 50%; box-shadow: var(--shadow-soft); background: var(--danger-color); color: var(--color-on-panel); border: none; width: 36px; height: 36px; margin-left: 4px; transition: background var(--transition-fast); } .company-filters-mobile .reset-btn-mobile:active { background: darken(var(--danger-color), 10%); } /*=============================== MOBILE COMPANY CARD LIST =================================*/ .companies-list-mobile { display: flex; flex-direction: column; gap: 8px; margin: 0 4px; } .company-card { border-radius: 15px !important; box-shadow: var(--shadow-soft) !important; padding: 18px 16px 14px 16px !important; margin: 0 4px !important; min-width: 0 !important; font-size: 1.06em !important; background: var(--background-panel); color: var(--color-text); } .company-card .company-card-main-row { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; gap: 12px; width: 100%; } .company-card-info { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .company-card-label { font-weight: 600; color: var(--primary-color); font-size: 1em; min-width: 90px; } .company-card-value { color: var(--color-text); font-size: 1em; overflow-wrap: anywhere; } .company-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 40px; margin-left: 8px; margin-right: 8px; margin-top: 0; justify-content: flex-start; } .company-card-actions button { background: var(--background-control); color: var(--primary-color); border: 1px solid var(--color-border); border-radius: 7px; font-size: 1em; padding: 6px 12px; min-width: 36px; min-height: 36px; cursor: pointer; transition: background var(--transition-fast); } .company-card-actions button:active { background: var(--background-panel); } .company-card-actions .btn-reactivate-company { background: var(--success-color); color: var(--color-on-panel); } .company-card-actions .btn-hard-delete-company { background: var(--danger-color); color: var(--color-on-panel); } .company-card-actions .btn-reactivate-company:hover { background: darken(var(--success-color), 10%); } .company-card-actions .btn-hard-delete-company:hover { background: darken(var(--danger-color), 10%); } /*=============================== HIDE DESKTOP ON MOBILE =================================*/ .company-management-card, .header-flex, .filter-bar, #companies-table-container { display: none !important; } } /* ================================ Desktop Hide/Show Switch (Bootstrap md and above) =================================*/ @media (min-width: 768px) { .companies-header-mobile, .company-filters-mobile, .companies-list-mobile, #add-company-btn-mobile { display: none !important; } }