/* ============================================================================= AUREX CORE — web.css AMIOP | PT. Sambas Mineral Mining SINGKATAN: ACORE | Theme key: acore-theme Sections: 1.root → 2.dark → 3.reset → 4.base → 5.layout → 6.sidebar → 7.header → 8.typography → 9.grid → 10.cards → 11.tables → 12.forms → 13.buttons → 14.badges → 15.nav → 16.modals → 17.toast → 18.dropdown → 19.feedback → 20.charts → 21.domain-ACORE → 22.responsive NOTE: NO @import — Google Fonts via in HTML ============================================================================= */ /* ===== 1. CSS Variables :root ===== */ :root { --color-primary: #1E3A5F; --color-primary-hover: #152B47; --color-primary-light: color-mix(in srgb, #1E3A5F 15%, transparent); --color-success: #388E3C; --color-success-light: #E8F5E9; --color-warning: #F57C00; --color-warning-light: #FFF3E0; --color-danger: #D32F2F; --color-danger-light: #FFEBEE; --color-info: #1565C0; --color-info-light: #E3F2FD; --color-purple: #7B1FA2; --color-purple-light: #F3E5F5; --color-accent: #F5A623; --color-accent-light: #FFF8E1; --bg-page: #F5F5F5; --bg-surface: #FFFFFF; --bg-elevated: #EBEBEB; --bg-subtle: #EBEBEB; --bg-sidebar: #1A1A1A; --bg-hover: #EFEFEF; --text-primary: #111111; --text-secondary: #555555; --text-muted: #888888; --border-default: #E0E0E0; --border-strong: #C8C8C8; --border-focus: #1E3A5F; --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --header-height: 60px; --sidebar-width: 240px; --z-sidebar: 100; --z-dropdown: 150; --z-modal: 200; --z-modal-content: 201; --z-toast: 500; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; --transition-fast: 150ms ease; --transition-base: 200ms ease; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* Semantic text colors — adapt per theme */ --color-warning-text: #92400E; --color-danger-text: #991B1B; --color-success-text: #065F46; --color-info-text: #1E40AF; --color-neutral-bg: #F1F5F9; --color-neutral-text: #64748B; } /* ===== 2. Dark Mode ===== */ [data-theme="dark"] { --bg-page: #111111; --bg-surface: #1C1C1C; --bg-elevated: #262626; --bg-subtle: #262626; --bg-sidebar: #0A0A0A; --bg-hover: #2E2E2E; --text-primary: #F5F5F5; --text-secondary: #B0B0B0; --text-muted: #6B6B6B; --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.22); /* Color overrides — dark legibility */ --color-primary: #60A5FA; --color-primary-hover: #93C5FD; --color-primary-light: rgba(96,165,250,0.15); --color-success: #81C784; --color-success-light: rgba(129,199,132,0.12); --color-warning: #FFB74D; --color-warning-light: rgba(255,183,77,0.12); --color-danger: #EF9A9A; --color-danger-light: rgba(239,154,154,0.12); --color-info: #90CAF9; --color-info-light: rgba(144,202,249,0.12); --color-purple: #CE93D8; --color-purple-light: rgba(206,147,216,0.12); --color-accent-light: rgba(245,166,35,0.15); --border-focus: #60A5FA; /* Semantic text colors — dark mode */ --color-warning-text: #FFB74D; --color-danger-text: #EF9A9A; --color-success-text: #81C784; --color-info-text: #90CAF9; --color-neutral-bg: rgba(255,255,255,0.08); --color-neutral-text: #B0B0B0; } /* ===== 3. Reset ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font: inherit; border: none; background: none; } ul, ol { list-style: none; } img { max-width: 100%; display: block; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; } input, select, textarea { font: inherit; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-page); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ===== 4. Base Typography ===== */ html { font-size: 14px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; } .font-mono { font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 600; } /* ===== 5. Layout — App Shell ===== */ .app-shell { display: flex; height: 100vh; overflow: hidden; } .app-sidebar { width: var(--sidebar-width); flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-sidebar); position: relative; z-index: var(--z-sidebar); transition: width var(--transition-base); overflow: hidden; } .app-sidebar.collapsed { width: 60px; } .app-sidebar.open { width: var(--sidebar-width); } .app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .app-header { height: var(--header-height); flex-shrink: 0; display: flex; align-items: center; padding: 0 20px; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); gap: 12px; position: relative; } .app-content { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg-page); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; } .sidebar-overlay.open { display: block; } /* ===== 6. Sidebar Components ===== */ .sidebar-brand { height: var(--header-height); display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .brand-logo { width: 36px; height: 36px; background: var(--color-accent); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: 700; flex-shrink: 0; } .brand-info { flex: 1; min-width: 0; overflow: hidden; } .brand-name { font-size: 14px; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-sub { font-size: 11px; color: rgba(255,255,255,0.4); } .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; } .sidebar-footer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .nav-section { margin-bottom: 4px; } .nav-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 0; } .nav-section-header:hover .nav-section-label { color: rgba(255,255,255,0.7); } .nav-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.4); padding: 6px 16px 4px; white-space: nowrap; overflow: hidden; transition: color var(--transition-fast); } .nav-section-chevron { font-size: 10px; color: rgba(255,255,255,0.35); margin-right: 16px; transition: transform var(--transition-fast); flex-shrink: 0; } .nav-section.open .nav-section-chevron { transform: rotate(180deg); } .nav-section-divider { display: none; height: 1px; background: var(--border-default); margin: 4px 12px; } .nav-section-body { max-height: 0; overflow: hidden; transition: max-height var(--transition-fast); } .nav-section.open .nav-section-body { max-height: 1000px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 14px; color: rgba(255,255,255,0.7); text-decoration: none; position: relative; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; border-left: 3px solid transparent; } .nav-item:hover { background: rgba(255,255,255,0.06); color: white; } .nav-item.active { color: var(--color-accent); background: rgba(245,166,35,0.12); border-left-color: var(--color-accent); } .nav-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; } .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .nav-badge { font-size: 11px; background: var(--color-danger); color: white; border-radius: var(--radius-full); padding: 1px 6px; font-weight: 600; } .nav-sub-item { display: flex; align-items: center; padding: 6px 16px 6px 44px; font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color var(--transition-fast); } .nav-sub-item:hover { color: rgba(255,255,255,0.9); } .user-info { flex: 1; min-width: 0; overflow: hidden; } .user-name { font-size: 13px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 11px; color: rgba(255,255,255,0.4); } .btn-logout { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); border-radius: var(--radius-md); transition: color var(--transition-fast), background var(--transition-fast); flex-shrink: 0; } .btn-logout:hover { color: white; background: rgba(255,255,255,0.08); } /* Collapsed sidebar */ .app-sidebar.collapsed .brand-info, .app-sidebar.collapsed .nav-label, .app-sidebar.collapsed .nav-badge, .app-sidebar.collapsed .nav-section-label, .app-sidebar.collapsed .user-info, .app-sidebar.collapsed .btn-logout { display: none; } .app-sidebar.collapsed .nav-section-divider { display: block; } .app-sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; border-left: none; } .app-sidebar.collapsed .sidebar-footer { justify-content: center; padding: 12px 0; } .app-sidebar.collapsed .sidebar-nav { overflow-x: hidden; } /* Icon-rail mode: accordion off, all items always shown */ .app-sidebar.collapsed .nav-section-header { pointer-events: none; padding: 0; } .app-sidebar.collapsed .nav-section-chevron { display: none; } .app-sidebar.collapsed .nav-section-body { max-height: none !important; overflow: visible; } /* Tooltip for collapsed nav-item */ .app-sidebar.collapsed .nav-item { position: relative; } .app-sidebar.collapsed .nav-item::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 4px 10px; font-size: 13px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); box-shadow: var(--shadow-md); z-index: var(--z-dropdown); } .app-sidebar.collapsed .nav-item:hover::after { opacity: 1; } /* ===== 7. Header Components ===== */ .header-left { display: flex; align-items: center; gap: 12px; } .header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } .header-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); } .breadcrumb-sep { color: var(--text-muted); } .breadcrumb-current { font-weight: 600; color: var(--text-primary); } .header-sync { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .bell-wrapper { position: relative; } .bell-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; background: var(--color-danger); color: white; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; } /* ===== 10. Cards & Containers ===== */ .card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); } .card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-default); } .card-header-actions { display: flex; gap: 8px; align-items: center; } .card-body { padding: 20px; } .card-footer { padding: 12px 20px; border-top: 1px solid var(--border-default); background: var(--bg-elevated); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border-default); background: var(--bg-elevated); flex-wrap: wrap; gap: 8px; } .card-nested { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; } /* Stat Grid */ .stat-grid, .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } /* Stat Cards */ .stat-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-top: 3px solid transparent; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-xs); display: flex; align-items: center; gap: var(--space-4); } .stat-primary { border-top-color: var(--color-primary); } .stat-success { border-top-color: var(--color-success); } .stat-warning { border-top-color: var(--color-warning); } .stat-danger { border-top-color: var(--color-danger); } .stat-info { border-top-color: var(--color-info); } .stat-accent { border-top-color: var(--color-accent); } .stat-purple { border-top-color: var(--color-purple); } .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } /* Icon color derived from parent stat card context */ .stat-primary .stat-icon { background: var(--color-primary-light); color: var(--color-primary); } .stat-success .stat-icon { background: var(--color-success-light); color: var(--color-success); } .stat-warning .stat-icon { background: var(--color-warning-light); color: var(--color-warning); } .stat-danger .stat-icon { background: var(--color-danger-light); color: var(--color-danger); } .stat-info .stat-icon { background: var(--color-info-light); color: var(--color-info); } .stat-accent .stat-icon { background: var(--color-accent-light); color: var(--color-accent); } /* stat-icon-xxx standalone aliases */ .stat-icon-primary { background: var(--color-primary-light); color: var(--color-primary); } .stat-icon-success { background: var(--color-success-light); color: var(--color-success); } .stat-icon-warning { background: var(--color-warning-light); color: var(--color-warning); } .stat-icon-danger { background: var(--color-danger-light); color: var(--color-danger); } .stat-icon-info { background: var(--color-info-light); color: var(--color-info); } .stat-icon-accent { background: var(--color-accent-light); color: var(--color-accent); } .stat-icon-muted { background: var(--bg-elevated); color: var(--text-muted); } .stat-body { flex: 1; min-width: 0; } .stat-label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } .stat-value { font-size: 24px; font-weight: 700; line-height: 1.2; } .stat-trend { font-size: 12px; display: flex; align-items: center; gap: 4px; margin-top: 4px; } .trend-up { color: var(--color-success); } .trend-down { color: var(--color-danger); } .trend-flat { color: var(--text-muted); } /* Stat Mini */ .stat-mini { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 12px 16px; } .stat-mini-label { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; } .stat-mini-value { font-size: 18px; font-weight: 700; } /* Icon helpers */ .icon-primary { background: var(--color-primary-light); color: var(--color-primary); } .icon-success { background: var(--color-success-light); color: var(--color-success); } .icon-warning { background: var(--color-warning-light); color: var(--color-warning); } .icon-danger { background: var(--color-danger-light); color: var(--color-danger); } .icon-info { background: var(--color-info-light); color: var(--color-info); } .icon-muted { background: var(--bg-elevated); color: var(--text-muted); } .icon-accent { background: var(--color-accent-light); color: var(--color-accent); } /* ACORE */ [data-theme="dark"] .icon-success { background: rgba(56,142,60,0.15); color: #81C784; } [data-theme="dark"] .icon-warning { background: rgba(245,124,0,0.15); color: #FFB74D; } [data-theme="dark"] .icon-danger { background: rgba(211,47,47,0.15); color: #EF9A9A; } [data-theme="dark"] .icon-info { background: rgba(21,101,192,0.15); color: #90CAF9; } [data-theme="dark"] .icon-accent { background: rgba(245,166,35,0.15); color: #FFCC80; } /* ACORE */ [data-theme="dark"] .stat-primary .stat-icon, [data-theme="dark"] .stat-icon-primary { background: rgba(96,165,250,0.15); color: #60A5FA; } [data-theme="dark"] .stat-success .stat-icon, [data-theme="dark"] .stat-icon-success { background: rgba(56,142,60,0.15); color: #81C784; } [data-theme="dark"] .stat-warning .stat-icon, [data-theme="dark"] .stat-icon-warning { background: rgba(245,124,0,0.15); color: #FFB74D; } [data-theme="dark"] .stat-danger .stat-icon, [data-theme="dark"] .stat-icon-danger { background: rgba(211,47,47,0.15); color: #EF9A9A; } [data-theme="dark"] .stat-info .stat-icon, [data-theme="dark"] .stat-icon-info { background: rgba(21,101,192,0.15); color: #90CAF9; } [data-theme="dark"] .stat-accent .stat-icon, [data-theme="dark"] .stat-icon-accent { background: rgba(245,166,35,0.15); color: #FFCC80; } /* Hardcoded color fixes — dark mode */ [data-theme="dark"] .badge-warning { color: var(--color-warning); } [data-theme="dark"] .alert-warning { color: var(--color-warning); } [data-theme="dark"] .recovery-badge.warn { color: var(--color-warning); } [data-theme="dark"] .badge-casting { background: rgba(206,147,216,0.12); color: var(--color-purple); } /* Dark mode — btn-primary uses light bg (#60A5FA), must use dark text */ [data-theme="dark"] .btn-primary { color: #0F172A; } [data-theme="dark"] .btn-primary:hover { color: #0F172A; } [data-theme="dark"] .pagination-btn.active { color: #0F172A; } /* ===== 11. Tables ===== */ .table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-default); } .table-wrapper table { min-width: 600px; } table th, table td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); } table th { font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-elevated); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; } table tr:last-child td { border-bottom: none; } table tbody tr:hover { background: var(--bg-hover); } table tfoot td { font-weight: 600; background: var(--bg-elevated); border-top: 2px solid var(--border-strong); } .table-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-default); flex-wrap: nowrap; overflow-x: auto; } .table-toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; } .table-toolbar-right { display: flex; align-items: center; gap: 8px; } .table-title { font-size: 15px; font-weight: 600; } .col-no { width: 48px; text-align: center; } .col-action { width: 80px; text-align: right; } th.text-right, td.text-right { text-align: right; } .col-action td { display: flex; justify-content: flex-end; } .sortable { cursor: pointer; user-select: none; } .sort-icon { font-size: 10px; color: var(--text-muted); margin-left: 4px; } .empty-row { border: none; padding: 0; } .table-empty { text-align: center; padding: 48px 16px; } .table-empty-icon { font-size: 36px; color: var(--text-muted); margin-bottom: 12px; } .table-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .table-empty-sub { font-size: 13px; color: var(--text-muted); } .table-sticky-header thead th { position: sticky; top: 0; z-index: 10; } /* Pagination */ .pagination { display: flex; gap: 4px; align-items: center; } .pagination-btn { height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; background: var(--bg-surface); color: var(--text-primary); padding: 0 8px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .pagination-btn:hover:not(:disabled) { background: var(--bg-hover); } .pagination-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } .pagination-info { font-size: 13px; color: var(--text-muted); } .pagination-ellipsis { padding: 0 6px; color: var(--text-muted); } /* ===== 12. Forms ===== */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .form-label .required { color: var(--color-danger); margin-left: 2px; } .form-control { height: 38px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0 12px; background: var(--bg-page); color: var(--text-primary); font-size: 14px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); width: 100%; } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .form-control.error { border-color: var(--color-danger); } .form-control:disabled { opacity: 0.5; background: var(--bg-surface); cursor: not-allowed; } .form-control-lg { height: 44px; font-size: 15px; } textarea.form-control { height: auto; padding: 10px 12px; resize: vertical; } .form-select { height: 38px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0 32px 0 12px; background: var(--bg-page); color: var(--text-primary); font-size: 14px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; cursor: pointer; transition: border-color var(--transition-fast); width: auto; } .form-select:focus { outline: none; border-color: var(--color-primary); } .form-select-sm { height: 30px; font-size: 13px; padding: 0 28px 0 10px; } .form-error { font-size: 12px; color: var(--color-danger); } .form-hint { font-size: 12px; color: var(--text-muted); } .form-row { display: flex; gap: 16px; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .input-group { display: flex; position: relative; align-items: center; } .input-prefix { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; } .input-suffix { position: absolute; right: 12px; color: var(--text-muted); } .input-group .form-control { padding-left: 36px; } .search-box { position: relative; display: flex; align-items: center; flex: 1; } .search-icon { position: absolute; left: 10px; font-size: 13px; color: var(--text-muted); pointer-events: none; } .search-box .form-control { padding-left: 34px; } .toggle-switch { display: inline-flex; cursor: pointer; align-items: center; gap: 8px; } .toggle-switch input { display: none; } .toggle-slider { width: 44px; height: 24px; border-radius: 12px; background: var(--border-strong); position: relative; transition: background var(--transition-base); } .toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform var(--transition-base); } .toggle-switch input:checked + .toggle-slider { background: var(--color-primary); } .toggle-switch input:checked + .toggle-slider::after { transform: translateX(20px); } /* ===== 13. Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); white-space: nowrap; cursor: pointer; border: 1px solid transparent; text-decoration: none; } .btn-xs { height: 24px; padding: 0 8px; font-size: 11px; } .btn-sm { height: 30px; padding: 0 12px; font-size: 13px; } .btn-lg { height: 44px; padding: 0 20px; font-size: 15px; } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-icon.btn-sm { width: 30px; height: 30px; } .btn-icon.btn-xs { width: 24px; height: 24px; } .btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-secondary { background: transparent; border-color: var(--border-default); color: var(--text-primary); } .btn-secondary:hover { background: var(--bg-hover); } .btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); } .btn-outline:hover { background: var(--color-primary-light); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); } .btn-danger { background: var(--color-danger); color: white; border-color: var(--color-danger); } .btn-danger:hover { background: #b71c1c; } .btn-danger-outline { background: transparent; border-color: var(--color-danger); color: var(--color-danger); } .btn-danger-outline:hover { background: var(--color-danger-light); } .btn-success { background: var(--color-success); color: white; border-color: var(--color-success); } .btn-success:hover { background: #2e7d32; } .btn-warning { background: var(--color-warning); color: white; border-color: var(--color-warning); } .btn-warning:hover { background: #e65100; } .btn-outline-primary { background: transparent; border-color: var(--color-primary); color: var(--color-primary); } .btn-outline-primary:hover { background: var(--color-primary-light); } .btn-outline-secondary { background: transparent; border-color: var(--border-default); color: var(--text-primary); } .btn-outline-secondary:hover { background: var(--bg-hover); } .btn-outline-warning { background: transparent; border-color: var(--color-warning); color: var(--color-warning); } .btn-outline-warning:hover { background: var(--color-warning-light); } .btn-link { height: auto; padding: 0; background: transparent; border: none; color: var(--color-primary); font-size: inherit; } .btn-link:hover { text-decoration: underline; } .btn-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast); flex-shrink: 0; } .btn-back:hover { background: var(--bg-hover); } .btn.loading { color: transparent; position: relative; pointer-events: none; } .btn.loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .w-full { width: 100%; } /* ===== 14. Badges & Status ===== */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; } .badge-primary { background: var(--color-primary-light); color: var(--color-primary); } .badge-success { background: var(--color-success-light); color: var(--color-success); } .badge-warning { background: var(--color-warning-light); color: var(--color-warning-text); } .badge-danger { background: var(--color-danger-light); color: var(--color-danger); } .badge-info { background: var(--color-info-light); color: var(--color-info); } .badge-purple { background: var(--color-purple-light); color: var(--color-purple); } .badge-gray { background: var(--bg-elevated); color: var(--text-muted); } .badge-outline { background: transparent; border: 1px solid currentColor; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .badge-role-admin { background: var(--color-danger-light); color: var(--color-danger-text); } .badge-role-manager { background: var(--color-info-light); color: var(--color-info-text); } .badge-role-user { background: var(--color-success-light); color: var(--color-success-text); } /* Domain Badges — ACORE */ .badge-pending { background: var(--color-warning-light); color: var(--color-warning-text); } /* ACORE */ .badge-confirmed { background: var(--color-success-light); color: var(--color-success-text); } /* ACORE */ .badge-disputed { background: var(--color-danger-light); color: var(--color-danger-text); } /* ACORE */ .badge-voided { background: var(--bg-elevated); color: var(--text-muted); } /* ACORE */ .badge-approved { background: var(--color-success-light); color: var(--color-success-text); } /* ACORE */ .badge-active { background: var(--color-info-light); color: var(--color-info-text); } /* ACORE */ .badge-expired { background: var(--color-danger-light); color: var(--color-danger-text); } /* ACORE */ .badge-rejected { background: var(--color-danger-light); color: var(--color-danger-text); } /* ACORE */ .badge-open { background: var(--color-danger-light); color: var(--color-danger-text); } /* ACORE */ .badge-under-investigation { background: var(--color-warning-light); color: var(--color-warning-text); } /* ACORE */ .badge-closed { background: var(--color-success-light); color: var(--color-success-text); } /* ACORE */ .badge-drying { background: var(--color-info-light); color: var(--color-info-text); } /* ACORE */ .badge-smelting { background: var(--color-warning-light); color: var(--color-warning-text); } /* ACORE */ .badge-casting { background: var(--color-purple-light); color: var(--color-purple); } /* ACORE */ .badge-completed { background: var(--color-success-light); color: var(--color-success-text); } /* ACORE */ .badge-detected { background: var(--color-danger-light); color: var(--color-danger-text); } /* ACORE */ .badge-resolved { background: var(--color-success-light); color: var(--color-success-text); } /* ACORE */ .badge-false-positive { background: var(--bg-elevated); color: var(--text-muted); } /* ACORE */ .badge-overdue { background: var(--color-danger-light); color: var(--color-danger-text); } /* ACORE */ .badge-iot-online { background: var(--color-success-light); color: var(--color-success-text); } /* ACORE */ .badge-iot-offline { background: var(--color-danger-light); color: var(--color-danger-text); } /* ACORE */ .badge-not-balance { background: var(--color-danger-light); color: var(--color-danger-text); font-weight: 700; } /* ACORE */ .badge-balance { background: var(--color-success-light); color: var(--color-success-text); font-weight: 700; } /* ACORE */ .badge-ws-live { background: var(--color-success-light); color: var(--color-success-text); } /* ACORE */ .badge-cert-valid { background: var(--color-success-light); color: var(--color-success-text); } /* ACORE */ .badge-cert-expired { background: var(--color-danger-light); color: var(--color-danger-text); } /* ACORE */ .badge-iot-online .badge-dot { background: var(--color-success); animation: pulse 2s infinite; } /* ACORE */ .badge-ws-live .badge-dot { background: var(--color-success); animation: pulse 2s infinite; } /* ACORE */ /* Avatar */ .avatar { width: 36px; height: 36px; border-radius: 50%; background: #0284C7; color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; } .avatar-lg { width: 48px; height: 48px; font-size: 16px; } .avatar-xl { width: 72px; height: 72px; font-size: 24px; } /* ===== 15. Navigation Components ===== */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; } .page-header-left { display: flex; align-items: center; gap: 12px; } .page-header-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .page-header-content { width: 100%; } .page-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .page-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; } .filter-chip { padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-default); font-size: 13px; cursor: pointer; background: var(--bg-surface); color: var(--text-secondary); transition: all var(--transition-fast); } .filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .filter-chip.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .tabs { display: flex; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab-item { padding: 10px 16px; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); } .tab-item:hover { color: var(--text-primary); } .tab-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; } .tab-count { font-size: 11px; background: var(--bg-elevated); border-radius: var(--radius-full); padding: 1px 6px; margin-left: 4px; } .tab-pane { display: none; padding-top: 20px; } .tab-pane.active { display: block; } /* ===== 16. Modals & Overlays ===== */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); align-items: center; justify-content: center; padding: 16px; } .modal-overlay.open { display: flex; } .modal { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; animation: modal-in 0.2s ease; } .modal-sm { max-width: 400px; } .modal-md { max-width: 560px; } .modal-lg { max-width: 720px; } .modal-xl { max-width: 900px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-default); } .modal-title { font-size: 16px; font-weight: 600; } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 8px; } .modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: var(--radius-md); color: var(--text-secondary); font-size: 16px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); } /* ===== 17. Toast ===== */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--bg-surface); border-radius: var(--radius-lg); border-left: 4px solid var(--border-default); box-shadow: var(--shadow-lg); font-size: 14px; max-width: 360px; pointer-events: all; animation: toast-in 0.25s ease; } .toast-success { border-left-color: var(--color-success); } .toast-error { border-left-color: var(--color-danger); } .toast-warning { border-left-color: var(--color-warning); } .toast-info { border-left-color: var(--color-info); } .toast-success i { color: var(--color-success); } .toast-error i { color: var(--color-danger); } .toast-warning i { color: var(--color-warning); } .toast-info i { color: var(--color-info); } /* ===== 18. Dropdown ===== */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); min-width: 200px; overflow: hidden; } .dropdown-menu.open { display: block; } .dropdown-menu-right { right: 0; left: auto; } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; color: var(--text-primary); cursor: pointer; transition: background var(--transition-fast); text-decoration: none; background: none; border: none; width: 100%; text-align: left; } .dropdown-item:hover { background: var(--bg-hover); } .dropdown-item.danger { color: var(--color-danger); } .dropdown-header { padding: 10px 16px 8px; border-bottom: 1px solid var(--border-default); } .dropdown-divider { height: 1px; background: var(--border-default); } /* ===== 19. Feedback Components ===== */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-left: 4px solid transparent; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14px; } .alert-info { background: var(--color-info-light); border-left-color: var(--color-info); color: var(--color-info); } .alert-success { background: var(--color-success-light); border-left-color: var(--color-success); color: var(--color-success); } .alert-warning { background: var(--color-warning-light); border-left-color: var(--color-warning); color: var(--color-warning-text); } .alert-danger { background: var(--color-danger-light); border-left-color: var(--color-danger); color: var(--color-danger); } .alert p { color: var(--text-primary); } .progress-bar { height: 6px; background: var(--bg-elevated); border-radius: var(--radius-full); overflow: hidden; } .progress-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width 0.4s ease; } .progress-fill.success { background: var(--color-success); } .progress-fill.warning { background: var(--color-warning); } .progress-fill.danger { background: var(--color-danger); } .empty-state { text-align: center; padding: 48px 16px; display: flex; flex-direction: column; align-items: center; } .empty-icon { font-size: 48px; color: var(--text-muted); margin-bottom: 12px; } .empty-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .empty-sub { font-size: 14px; color: var(--text-muted); } /* Skeleton */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-elevated) 8%, var(--bg-hover) 18%, var(--bg-elevated) 33%); background-size: 800px 100%; animation: shimmer 1.2s infinite linear; border-radius: var(--radius-sm); } .skeleton-text { height: 14px; margin-bottom: 8px; } .skeleton-title { height: 20px; width: 60%; margin-bottom: 8px; } .skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; } /* Timeline */ .timeline { position: relative; padding-left: 24px; } .timeline-item { position: relative; padding-bottom: 20px; } .timeline-item::before { content: ''; position: absolute; left: -20px; top: 8px; bottom: -8px; width: 1px; background: var(--border-default); } .timeline-item:last-child::before { display: none; } .timeline-dot { width: 16px; height: 16px; border-radius: 50%; position: absolute; left: -28px; top: 4px; background: var(--bg-elevated); border: 2px solid var(--border-default); } .timeline-dot.active { background: var(--color-primary); border-color: var(--color-primary); } .timeline-dot.success { background: var(--color-success); border-color: var(--color-success); } .timeline-dot.danger { background: var(--color-danger); border-color: var(--color-danger); } .timeline-title { font-weight: 600; font-size: 14px; } .timeline-time { font-size: 12px; color: var(--text-muted); } /* ===== 20. Charts & Maps ===== */ .chart-container { position: relative; width: 100%; } .chart-host { display: block; width: 100%; position: relative; } /* ===== 21. Domain Components — ACORE ===== */ /* Compliance Alert (RKAB/Jamrek) */ .compliance-alert { display: flex; gap: 12px; border: 1px solid; border-radius: var(--radius-lg); padding: 12px 16px; align-items: flex-start; margin-bottom: 12px; } .compliance-alert.critical { border-color: var(--color-danger); background: var(--color-danger-light); } .compliance-alert.warning { border-color: var(--color-warning); background: var(--color-warning-light); } .compliance-alert.ok { border-color: var(--color-success); background: var(--color-success-light); } /* RKEF Lini Card */ .lini-rkef-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-surface); border-top: 3px solid var(--border-default); } .lini-rkef-card.smelting { border-top-color: var(--color-warning); } .lini-rkef-card.idle { border-top-color: var(--color-info); } .lini-rkef-card.down { border-top-color: var(--color-danger); animation: pulse 2s infinite; } .lini-rkef-card.completed { border-top-color: var(--color-success); } .lini-rkef-card.drying { border-top-color: var(--color-info); } .lini-rkef-card.casting { border-top-color: var(--color-purple); } .lini-rkef-title { font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .recovery-badge { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; } .recovery-badge.ok { background: var(--color-success-light); color: var(--color-success); } .recovery-badge.warn { background: var(--color-warning-light); color: var(--color-warning-text); } /* GL Journal */ .gl-balance-indicator { font-size: 12px; display: flex; gap: 4px; align-items: center; } .gl-balance-indicator.balanced { color: var(--color-success); } .gl-balance-indicator.unbalanced { color: var(--color-danger); font-weight: 600; } /* Sync Indicator */ .sync-indicator { display: flex; align-items: center; gap: 4px; font-size: 12px; } .sync-indicator.synced { color: var(--color-success); } .sync-indicator.offline { color: var(--color-warning); } /* CCTV Frame */ .cctv-frame { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: #000; display: flex; align-items: center; justify-content: center; min-height: 200px; } /* PTW Worker Certification Row */ .worker-cert-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-default); } .worker-cert-row:last-child { border-bottom: none; } /* PTW Hazard */ .ptw-hazard-item { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border-default); align-items: center; } .ptw-hazard-item:last-child { border-bottom: none; } /* Payroll Summary */ .payroll-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .payroll-summary-row.warning { color: var(--color-warning); } /* Filter Panel */ .filter-panel { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); margin-bottom: 16px; } .filter-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-default); } .filter-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .filter-panel-footer { padding: 12px 16px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 8px; } /* Accordion */ .accordion { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; } .accordion-item { border-top: 1px solid var(--border-default); } .accordion-item:first-child { border-top: none; } .accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-weight: 600; font-size: 14px; background: var(--bg-surface); cursor: pointer; } .accordion-header:hover { background: var(--bg-hover); } .accordion-body { display: none; padding: 16px; border-top: 1px solid var(--border-default); } .accordion-item.open .accordion-body { display: block; } /* Upload Zone */ .upload-zone { border: 2px dashed var(--border-default); border-radius: var(--radius-lg); padding: 32px; text-align: center; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--color-primary); background: var(--color-primary-light); } .file-preview-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); } /* Stepper */ .stepper { display: flex; align-items: center; } .step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; } .step-number { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border-default); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; background: var(--bg-surface); } .step-item.active .step-number { border-color: var(--color-primary); background: var(--color-primary); color: white; } .step-item.completed .step-number { border-color: var(--color-success); background: var(--color-success); color: white; } .step-connector { flex: 1; height: 2px; background: var(--border-default); } .step-item.completed + .step-connector { background: var(--color-success); } /* Login Page */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-page); padding: 16px; } .login-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); } .login-logo { width: 56px; height: 56px; background: var(--color-primary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; } .login-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; } .login-sub { font-size: 14px; color: var(--text-muted); } /* Demo info box */ .demo-info-box { background: var(--color-info-light); border: 1px solid var(--color-info); border-radius: var(--radius-md); padding: 12px 16px; margin-top: 16px; font-size: 13px; } .demo-info-box .demo-title { font-weight: 600; color: var(--color-info); margin-bottom: 8px; } .demo-credential { display: flex; justify-content: space-between; padding: 4px 0; } /* ===== 8. Typography Utilities ===== */ .page-title { font-size: 20px; font-weight: 700; color: var(--text-primary); } .card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); } .page-sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; } .card-sub { font-size: 13px; color: var(--text-muted); } .text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-base { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 18px; } .text-2xl { font-size: 20px; } .text-3xl { font-size: 24px; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .text-primary-color { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .text-info { color: var(--color-info); } .text-accent { color: var(--color-accent); } .text-center { text-align: center; } .text-right { text-align: right; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .link { color: var(--color-primary); } .link:hover { text-decoration: underline; } /* ===== 9. Grid & Flex ===== */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .flex-shrink-0 { flex-shrink: 0; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-cols-5 { grid-template-columns: repeat(5, 1fr); gap: 16px; } .grid-cols-6 { grid-template-columns: repeat(6, 1fr); gap: 16px; } /* Bootstrap-style row/col grid (used by a few pages) */ /* Uses negative-margin + padding gutters (not flex `gap`) so percentage-based columns summing to 100% never overflow the row and force an unwanted wrap. */ .row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; } .row.g-3 { margin-left: -6px; margin-right: -6px; } .row.g-4 { margin-left: -8px; margin-right: -8px; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { min-width: 0; padding-left: 8px; padding-right: 8px; } .row.g-3 > [class*="col-md-"] { padding-left: 6px; padding-right: 6px; } .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; } .px-4 { padding-left: 16px; padding-right: 16px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .py-4 { padding-top: 16px; padding-bottom: 16px; } .w-full { width: 100%; } .h-full { height: 100%; } .min-w-0 { min-width: 0; } .overflow-hidden { overflow: hidden; } .hidden { display: none !important; } .block { display: block; } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } .border { border: 1px solid var(--border-default); } .border-top { border-top: 1px solid var(--border-default); } .border-bottom { border-bottom: 1px solid var(--border-default); } .bg-surface { background: var(--bg-surface); } .bg-page { background: var(--bg-page); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .cursor-pointer { cursor: pointer; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ===== Extended Utilities ===== */ .text-10 { font-size: 10px; } .text-13 { font-size: 13px; } .text-primary { color: var(--color-primary); } .m-0 { margin: 0; } .p-0 { padding: 0; } .ml-1 { margin-left: 4px; } .ml-2 { margin-left: 8px; } .ml-3 { margin-left: 12px; } .mr-1 { margin-right: 4px; } .mr-2 { margin-right: 8px; } .mr-3 { margin-right: 12px; } .mb-auto { margin-bottom: auto; } .mt-auto { margin-top: auto; } .pt-2 { padding-top: 8px; } .pt-3 { padding-top: 12px; } .pt-4 { padding-top: 16px; } .pb-2 { padding-bottom: 8px; } .pb-4 { padding-bottom: 16px; } .pl-2 { padding-left: 8px; } .pl-4 { padding-left: 16px; } .px-2 { padding-left: 8px; padding-right: 8px; } .px-3 { padding-left: 12px; padding-right: 12px; } .py-1 { padding-top: 4px; padding-bottom: 4px; } .py-3 { padding-top: 12px; padding-bottom: 12px; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-col-gap-2 { display: flex; flex-direction: column; gap: 8px; } .flex-col-gap-3 { display: flex; flex-direction: column; gap: 12px; } .inline-flex { display: inline-flex; } .relative { position: relative; } .absolute { position: absolute; } .overflow-auto { overflow: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-auto { overflow-x: auto; } .line-1 { line-height: 1; } .nowrap { white-space: nowrap; } .w-auto { width: auto; } .border-none { border: none; } .radius-0 { border-radius: 0; } .bg-elevated { background: var(--bg-elevated); } .bg-hover { background: var(--bg-hover); } .bg-sidebar { background: var(--bg-sidebar); } .border-l-primary { border-left: 4px solid var(--color-primary); } .border-l-success { border-left: 4px solid var(--color-success); } .border-l-warning { border-left: 4px solid var(--color-warning); } .border-l-danger { border-left: 4px solid var(--color-danger); } .border-l-info { border-left: 4px solid var(--color-info); } .border-l-purple { border-left: 4px solid var(--color-purple); } .w-160 { width: 160px; } .w-200 { width: 200px; } .min-w-200 { min-width: 200px; } .pl-36 { padding-left: 36px; } .pl-34 { padding-left: 34px; } .tv-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; } .tv-metric-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; } .text-11 { font-size: 11px; } .text-14 { font-size: 14px; } .text-8 { font-size: 8px; } .text-2xl { font-size: 2rem; } .text-white { color: white; } .text-upper { text-transform: uppercase; } .tracking-1 { letter-spacing: 0.5px; } .font-normal { font-weight: 400; } .mt-10 { margin-top: 10px; } .mb-10 { margin-bottom: 10px; } .p-8 { padding: 32px; } .p-10 { padding: 10px; } .pl-36 { padding-left: 36px; } .w-150 { width: 150px; } .flex-baseline-gap-1 { display: flex; align-items: baseline; gap: 4px; } .flex-shrink-0 { flex-shrink: 0; } .flex-1 { flex: 1; } .flex-gap-sm { display: flex; gap: 8px; } .flex-gap-sm-10 { display: flex; align-items: center; gap: 10px; } .grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .w-40 { width: 40px; } .accent-primary { accent-color: var(--color-primary); } .bg-elevated-radius { background: var(--bg-elevated); border-radius: var(--radius-md); padding: 14px; } .px-8 { padding-left: 32px; padding-right: 32px; } .px-4-py-3 { padding: 12px 16px; } .color-danger-text { color: #D32F2F; } .text-success-green { color: #388E3C; } .border-bottom-default { border-bottom: 1px solid var(--border-default); } .border-default { border: 1px solid var(--border-default); } .bg-elevated-rounded { background: var(--bg-elevated); border-radius: 8px; } .grid-span-2 { grid-column: span 2; } .text-8-muted { font-size: 8px; color: var(--text-muted); } .label-upper-1 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .label-upper-12 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; } .label-11-mb8 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; } .label-11-mb4-600 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 4px; } .text-muted-no-link { font-size: 12px; color: var(--text-muted); text-decoration: none; } .text-base-muted { font-size: 13px; font-weight: 400; color: var(--text-secondary); } .text-18-bold { font-size: 18px; font-weight: 700; color: var(--text-primary); } .text-20-400-muted { font-size: 20px; font-weight: 400; color: var(--text-muted); } .text-16-mt1 { font-size: 16px; margin-top: 4px; } .text-16 { font-size: 16px; } .text-15 { font-size: 15px; } .text-28-mono-bold { font-size: 28px; font-weight: 700; font-family: monospace; } .grid-1fr-320 { display: grid; grid-template-columns: 1fr 320px; } .label-upper-10 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; } .label-upper-6 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #555555; margin-bottom: 6px; } .label-upper-55 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #555555; } .tv-mono-accent { font-size: 13px; font-family: 'JetBrains Mono', monospace; color: #F5A623; font-weight: 700; } .kpi-value-sm { font-size: 13px; padding: 6px 14px; } .opacity-80 { opacity: 0.8; } .text-11-grey { font-size: 11px; color: #6B6B6B; } .p-6-14 { padding: 6px 14px; } .text-primary-color { color: var(--text-primary); } .text-info-color { color: var(--color-info); } .text-success-lh1 { color: var(--color-success); line-height: 1; } .tv-grid-1fr-320 { flex: 1; display: grid; grid-template-columns: 1fr 320px; overflow: hidden; } .tv-grid-1fr-300 { flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 0; overflow: hidden; } .grid-4-col-16 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; flex-shrink: 0; } .flex-between-pad { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--bg-elevated); border-radius: 6px; } .flex-gap-sp2 { display: flex; gap: var(--space-2); } .flex-wrap-gap-10 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .flex-between-mb4 { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .flex-gap6-pointer { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } .flex-baseline-gap-6 { display: flex; align-items: baseline; gap: 6px; } .danger-mr6 { color: var(--color-danger); margin-right: 6px; } .text-accent { color: var(--color-accent); } .text-accent-lh1 { color: var(--color-accent); line-height: 1; } .text-danger-bold { color: #dc3545; font-weight: 700; } .tv-text-grey-13 { color: #B0B0B0; font-size: 13px; } .tv-link-grey { color: #6B6B6B; font-size: 12px; text-decoration: none; display: flex; align-items: center; gap: 6px; } .btn-clear-grey { color: #6B6B6B; background: none; border: none; cursor: pointer; font-size: 14px; } .text-55-mx2 { color: #555555; margin: 0 8px; } .border-top-auto { border-top: 1px solid var(--border-default); padding-top: 20px; margin-top: auto; } .tv-border-top-auto { border-top: 1px solid rgba(255,255,255,0.10); padding-top: 16px; margin-top: auto; } .tv-border-top-mt8 { border-top: 1px solid rgba(255,255,255,0.10); padding-top: 16px; margin-top: 8px; } .card-xxl { border-radius: 16px; padding: 28px; } .card-lg-p6 { border-radius: 12px; padding: 24px; } .border-left-purple { border-left: 4px solid #8b5cf6; } .input-elevated-bold { border: 1px solid var(--border-default); padding: 6px; background: var(--bg-elevated); font-weight: 600; } .cell-warning { border: 1px solid var(--border-default); padding: 6px; background: #fef3c7; color: #92400e; } .cell-success { border: 1px solid var(--border-default); padding: 6px; background: #d1fae5; color: #065f46; } .td-elevated-left { border: 1px solid var(--border-default); padding: 10px; text-align: left; } .bg-muted-rounded { background: var(--bg-muted); border-radius: 8px; } .tv-header-dark { background: rgba(26,26,26,0.98); border-bottom: 1px solid rgba(255,255,255,0.12); padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .badge-purple { background: #f3e8ff; color: #8b5cf6; } .bg-success-btn { background: #28a745; } .tv-panel-right { background: #111111; border-left: 1px solid rgba(255,255,255,0.10); padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .divider-v { width: 1px; height: 40px; background: var(--border-default); } .w-36 { width: 36px; } .w-180 { width: 180px; } .w-160-right { width: 160px; text-align: right; } .w-14 { width: 14px; } .w-140 { width: 140px; } .legend-dot-warn { width: 12px; height: 12px; background: #fff5f5; border: 1px solid #ffcccc; border-radius: 2px; } .legend-item-color { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; } .table-collapse { width: 100%; border-collapse: collapse; } .pb4-border-bb { padding-bottom: 16px; border-bottom: 1px solid var(--border-default); } .py-2-bold { padding: 8px 0; font-weight: 600; } .w-80-h8 { width: 80px; height: 8px; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .text-green-500 { color: #22c55e; } .grid-gap-14 { display: grid; gap: 14px; } .text-20-bold { font-size: 20px; font-weight: 700; margin: 0; } .text-13-muted-mt2 { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .text-8-success { font-size: 8px; color: var(--color-success); } .max-w-480 { max-width: 480px; } .max-w-560 { max-width: 560px; } .min-w-200 { min-width: 200px; } .text-15-bold { font-size: 15px; font-weight: 700; } .text-16-bold { font-size: 16px; font-weight: 700; } .font-08-rem { font-size: 0.5rem; } .border-left-primary { border-left: 4px solid var(--color-primary); } .gap-1rem { gap: 1rem; } .p-0-16 { padding: 0 16px; } .text-warning { color: var(--color-warning); } .text-danger-color { color: var(--color-danger); } .bg-muted { background: var(--bg-muted); } .bg-elevated-muted { background: var(--bg-elevated); color: var(--text-muted); } .cell-error { border: 1px solid var(--border-default); padding: 6px; background: #fee2e2; color: #991b1b; } .grid-2-sp4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); } .indicator-dot-warn { position: absolute; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--color-warning); border: 2px solid white; box-shadow: 0 0 0 2px var(--color-warning); } .h-200 { height: 200px; } .p-rem-2-1 { padding: 2rem 1rem; } .hero-number { font-size: 3rem; margin-bottom: 0.5rem; } .btn-sm-rem { font-size: 0.85rem; padding: 0.4rem 0.8rem; } .btn-md-rem { font-size: 0.9rem; padding: 0.4rem 1rem; } .grid-1fr-360 { display: grid; grid-template-columns: 1fr 360px; } .gap-5 { gap: 20px; } .bg-success-alpha { background: rgba(34,197,94,0.12); } .text-13-muted-mt10 { font-size: 13px; color: var(--text-muted); margin-top: 10px; } .text-13-muted-mt8 { font-size: 13px; color: var(--text-muted); margin-top: 8px; } .text-13-success-mt8 { font-size: 13px; color: var(--color-success); margin-top: 8px; } .text-sm-muted-mt6 { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .text-sm-muted-mt2 { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .text-sm-grey-mt1 { font-size: 12px; color: #6B6B6B; margin-top: 4px; } .border-top-pt5 { border-top: 1px solid var(--border-default); padding-top: 20px; } .canvas-panel-right { background: var(--bg-canvas, var(--bg-elevated)); border-left: 1px solid var(--border-default); padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .tv-card-main { flex: 1; background: #1C1C1C; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 24px; overflow: hidden; min-height: 0; } .label-55-mt12 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #555555; margin-bottom: 12px; } .label-muted-12 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 12px; } .label-subtle-1 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px; } .label-subtle-2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; } .danger-ef-mr6 { color: #ef4444; margin-right: 6px; } .warning-mr6 { margin-right: 6px; color: #F57C00; } .mt6-muted { margin-top: 6px; color: var(--text-muted); } /* Pass 19 */ .my-16 { margin-top: 16px; margin-bottom: 16px; } .mb-rem-5 { margin-bottom: 0.5rem; } .h-10 { height: 10px; } .flex-baseline-gap4-mt4 { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; } .text-sm-mt2 { font-size: 12px; margin-top: 2px; } .text-white-lh1 { color: white; line-height: 1; } .text-amber-lh1 { color: #f59e0b; line-height: 1; } .danger-dc-mr6 { margin-right: 6px; color: #dc2626; } .bg-dark-red { background: #1c0a0a; } .tv-mono-grey { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #B0B0B0; } .tv-mono-amber { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #f59e0b; } .tv-big-stat { font-size: 40px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--border-strong); } .text-sm-grey-mt6 { font-size: 12px; color: #6B6B6B; margin-top: 6px; } .text-18-mt4 { font-size: 18px; margin-top: 4px; } .grid-2-gap16-mb20 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .text-8-muted { font-size: 8px; color: var(--text-muted); } .px-8-py-2 { padding: 8px 0; } .flex-gap-1 { display: flex; align-items: center; gap: 4px; } .flex-gap-2 { display: flex; align-items: center; gap: 8px; } .flex-gap-3 { display: flex; align-items: center; gap: 12px; } .flex-gap-4 { display: flex; align-items: center; gap: 16px; } .flex-gap-6 { display: flex; align-items: center; gap: 24px; } .flex-col-gap-4 { display: flex; flex-direction: column; gap: 16px; } .flex-between-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .label-sm { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } .label-11 { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; } .label-11-2 { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin-bottom: 2px; } .upper-muted-sm { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .text-sm-muted { font-size: 12px; color: var(--text-muted); } .text-13-muted { font-size: 13px; color: var(--text-muted); } .d-none { display: none; } .p-6px { padding: 6px; } .p-12 { padding: 12px; } .p-14 { padding: 14px; } .mt-6px { margin-top: 6px; } .h-220 { height: 220px; } .min-w-160 { min-width: 160px; } .max-w-600 { max-width: 600px; } .no-events { pointer-events: none; } .btn-clear { color: var(--text-muted); background: none; border: none; cursor: pointer; font-size: 14px; } .input-group-left { border-radius: var(--radius-md) 0 0 var(--radius-md); } .input-group-right { cursor: pointer; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .text-excel { color: #217346; } .card-xl { border-radius: 16px; padding: 24px; } .card-lg { border-radius: 12px; padding: 20px; } .input-bg-elevated { border: 1px solid var(--border-default); padding: 6px; background: var(--bg-elevated); } .bg-elevated-card { background: var(--bg-elevated); border-radius: 8px; padding: 12px; } .icon-amber { width: 32px; height: 32px; background: #F5A623; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .avatar-primary { width: 24px; height: 24px; background: var(--color-primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--color-primary); } .search-icon-abs { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; } .cell-center-bg { text-align: center; padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border-radius: var(--radius-md); } .grid-2fr-1fr { display: grid; grid-template-columns: 2fr 1fr; } .td-mono-danger { padding: 6px; text-align: right; font-family: monospace; color: var(--color-danger); } .td-danger { padding: 6px; color: var(--color-danger); } .td-success-pl { padding: 6px; color: var(--color-success); padding-left: 16px; } .mt-6px-right { margin-top: 6px; text-align: right; } /* ===== 22. Keyframes ===== */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes modal-in { from { opacity: 0; transform: scale(0.95) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .animate-spin { animation: spin 1s linear infinite; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } .animate-fade { animation: fade-in 0.2s ease; } /* ===== Responsive ===== */ @media (max-width: 1024px) { .app-sidebar { position: fixed; left: -260px; top: 0; height: 100vh; z-index: var(--z-sidebar); transition: left var(--transition-base); width: var(--sidebar-width) !important; } .app-sidebar.open { left: 0; } .app-main { margin-left: 0 !important; } .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .app-content { padding: 16px; } .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; } .grid-cols-5, .grid-cols-6 { grid-template-columns: repeat(2, 1fr); } .page-header { flex-direction: column; gap: 12px; align-items: flex-start; } .form-row, .form-row-2, .form-row-3 { flex-direction: column; grid-template-columns: 1fr; } .modal { max-width: 100% !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: fixed; bottom: 0; left: 0; right: 0; } .modal-overlay.open { align-items: flex-end; } .login-card { padding: 24px; } .table-toolbar { flex-wrap: wrap; } }