/* ============================================================================= AUREX COMMAND — web.css AMIOP | PT. Sambas Mineral Mining SINGKATAN: ACMD | Theme key: acmd-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.keyframes → 23.domain-ACMD → 24.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-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; /* 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; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; } /* ===== 2. Dark Mode ===== */ [data-theme="dark"] { --bg-page: #111111; --bg-surface: #1C1C1C; --bg-elevated: #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-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; } .nav-section-divider { display: none; height: 1px; background: var(--border-default); margin: 4px 12px; } .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; } /* 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; } /* ===== 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; } .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; } .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; } .tv-bg-dark { background: #1C1C1C; } .tv-bg-darker { background: #262626; } .tv-card-inner { background: #1C1C1C; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 12px; } .tv-label { font-size: 11px; color: #6B6B6B; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .tv-subtitle { font-size: 12px; color: #6B6B6B; margin-top: 8px; } .tv-icon-muted { margin-right: 6px; color: #6B6B6B; } .tv-val-success { font-size: 13px; font-weight: 600; color: #4ade80; } .tv-mono-muted { font-family: 'JetBrains Mono', monospace; color: #B0B0B0; } .tv-bar-bg { height: 8px; background: #262626; } .tv-bar-container { height: 56px; background: #262626; border-radius: 4px 4px 0 0; display: flex; align-items: flex-end; overflow: hidden; } .tv-progress-bg { height: 20px; background: #262626; border-radius: 10px; overflow: hidden; } .text-white { color: white; } .text-2xl { font-size: 2rem; } .text-xl { font-size: 1.25rem; } .text-lg-20 { font-size: 20px; } .text-8 { font-size: 8px; } .text-14 { font-size: 14px; } .font-normal { font-weight: 400; } .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; } .bg-elevated-rounded { background: var(--bg-elevated); border-radius: 8px; } .px-8 { padding-left: 32px; padding-right: 32px; } .px-4-py-3 { padding: 12px 16px; } .p-8 { padding: 32px; } .p-10 { padding: 10px; } .pl-36 { padding-left: 36px; } .color-danger-text { color: var(--color-danger); } .text-success-green { color: #388E3C; } .border-bottom-default { border-bottom: 1px solid var(--border-default); } .border-default { border: 1px solid var(--border-default); } .grid-span-2 { grid-column: span 2; } .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; } .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-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); } .gap-6-rem { gap: 1.5rem; } .mb-6-rem { margin-bottom: 1.5rem; } .mt-6-rem { margin-top: 1.5rem; } .w-150 { width: 150px; } .text-11 { font-size: 11px; } .text-upper { text-transform: uppercase; } .tracking-1 { letter-spacing: 0.5px; } .mt-10 { margin-top: 10px; } .mb-10 { margin-bottom: 10px; } .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; } .tv-layout-col { padding: 32px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; } .tv-panel-flex-between { background: #1C1C1C; border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center; } .tv-header-bar { padding: 0 32px; height: 56px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--bg-surface); } .tv-footer-bar { padding: 10px 32px; border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--bg-surface); } .tv-big-metric { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--color-accent); } /* ===== 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); } .card-nested { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; } /* 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); } .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-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .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); } [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; } /* 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); } /* 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-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-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; } .sortable { cursor: pointer; user-select: none; } .sort-icon { font-size: 10px; color: var(--text-muted); margin-left: 4px; } .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); } /* 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; } 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-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ===== 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-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-success { background: var(--color-success); color: white; border-color: var(--color-success); } .btn-success:hover { background: #2e7d32; } .btn-link { height: auto; padding: 0; background: transparent; border: none; color: var(--color-primary); font-size: inherit; } .btn-link:hover { text-decoration: underline; } .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; } /* 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-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .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-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-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; } /* ===== 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); } .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); } /* ===== 20. Charts ===== */ .chart-container { position: relative; width: 100%; } .chart-host { display: block; width: 100%; position: relative; } /* ===== 21. Domain Components — shared ===== */ /* 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); } /* 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); } /* ===== 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 slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes ltiFlash { 0%, 100% { background: var(--color-danger-light); color: var(--color-danger); } 50% { background: var(--color-danger); color: white; } } .animate-spin { animation: spin 1s linear infinite; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } /* ===== 23. Domain Components — ACMD ===== */ /* TV Mode — fullscreen rotating dashboard */ .tv-mode-container { position: fixed; inset: 0; background: var(--bg-page); z-index: 1000; display: flex; flex-direction: column; } [data-theme="dark"] .tv-mode-container { background: var(--bg-page); } /* TV Rotation Dots */ .tv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: all 0.3s; flex-shrink: 0; } .tv-dot.active { background: var(--color-accent); width: 16px; border-radius: 4px; } /* Executive KPI number sizes */ .kpi-xl { font-size: 48px; font-weight: 700; font-family: 'JetBrains Mono', monospace; line-height: 1.1; } .kpi-2xl { font-size: 64px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; } .kpi-tv { font-size: 96px; font-weight: 900; font-family: 'JetBrains Mono', monospace; line-height: 1; } .kpi-tv-lg { font-size: 128px; font-weight: 900; font-family: 'JetBrains Mono', monospace; line-height: 1; } /* RKEF 5-column grid */ .rkef-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } /* Executive KPI card (border-left accent, no overflow) */ .kpi-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-left: 4px solid var(--border-strong); border-radius: var(--radius-xl); padding: 20px; } .kpi-card.ok { border-left-color: var(--color-success); } .kpi-card.caution { border-left-color: var(--color-warning); } .kpi-card.warning { border-left-color: var(--color-danger); background: rgba(211,47,47,0.04); } .kpi-card.neutral { border-left-color: var(--border-strong); } .kpi-card.accent { border-left-color: var(--color-accent); } .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px; } .kpi-unit { font-size: 16px; font-weight: 400; color: var(--text-secondary); margin-left: 4px; } /* Live alert feed (top-right push notifications) */ .alert-feed { position: fixed; top: 80px; right: 16px; z-index: 400; width: 320px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .alert-item { animation: slideInRight 0.2s ease-out; transition: opacity 0.3s, transform 0.3s; pointer-events: all; } .alert-item.dismissing { opacity: 0; transform: translateX(100%); } /* Revenue disclaimer */ .disclaimer-box { background: rgba(245,124,0,0.08); border: 1px solid var(--color-warning); border-radius: var(--radius-md); padding: 12px; margin-top: 12px; margin-bottom: 20px; } .disclaimer-text { font-size: 11px; color: var(--color-warning-text); display: flex; gap: 8px; align-items: flex-start; } [data-theme="dark"] .disclaimer-text { color: #FFB74D; } /* LTI flash (HSE page) */ .lti-flash { animation: ltiFlash 0.5s ease-in-out 3; } /* ===== 24. Responsive ===== */ @media (max-width: 1200px) { .rkef-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .rkef-grid { grid-template-columns: repeat(2, 1fr); } } @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); } } /* ── Non-TV inline style fixes ── */ /* Layout helpers */ .flex { display: flex; } .pos-relative { position: relative; } .flex-1-mw0 { flex: 1; min-width: 0; } .items-baseline { align-items: baseline; } .items-end { align-items: flex-end; } .text-center { text-align: center; } .text-12 { font-size: 12px; } .mt-px { margin-top: 2px; } .col-span-full { grid-column: 1 / -1; } .gap-xs6 { gap: 6px; } .text-ellipsis { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .min-w-80 { min-width: 80px; } .progress-bar-xxs { height: 4px; } .dept-dot { display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0; } .dept-dot-sm { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px; } .dept-bar-fill { height:4px;border-radius:var(--radius-full); } /* Map */ .map-container { flex:1;min-height:0;display:flex;border:1px solid var(--border-default);border-radius:12px;overflow:hidden; } .map-main { flex:1;position:relative; } .map-filter-panel { position:absolute;top:12px;left:12px;z-index:500;display:flex;flex-direction:column;gap:6px; } .btn-filter-xs { font-size:11px; } .btn-filter-jetty { border-color:#3b82f6;color:#3b82f6; } .btn-filter-mine-type { border-color:#f59e0b;color:#f59e0b; } .btn-filter-truck { border-color:#fbbf24;color:#fbbf24; } .btn-filter-office { border-color:#22c55e;color:#22c55e; } .btn-filter-smelter { border-color:#ef4444;color:#ef4444; } .btn-filter-heavy { border-color:#a855f7;color:#a855f7; } .map-stats-overlay { position:absolute;bottom:24px;left:12px;z-index:500;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);border-radius:10px;padding:10px 14px;color:white;font-size:11px;display:flex;gap:16px; } .stat-color-truck { color:#fbbf24;font-weight:700; } .stat-color-heavy { color:#a855f7;font-weight:700; } .stat-color-smelter { color:#ef4444;font-weight:700; } .stat-color-office { color:#22c55e;font-weight:700; } .stat-color-jetty { color:#3b82f6;font-weight:700; } .map-legend-hdr { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:10px; } .map-dot-jetty { background:#3b82f6; } .map-dot-mine { background:#f59e0b; } .map-dot-truck { background:#fbbf24; } .map-dot-office { background:#22c55e; } .map-dot-smelter { background:#ef4444; } .map-dot-heavy { background:#a855f7; } .popup-meta-top { margin-top:4px; } /* Auth */ .pr-10 { padding-right: 2.5rem; } .pwd-toggle { position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:0;line-height:1; } .auth-divider { margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-default);text-align:center; } /* Compliance */ .label-hint { font-size:11px;color:var(--text-muted);margin-top:6px; } .card-divider-row { margin-top:14px;padding-top:14px;border-top:1px solid var(--border-default);display:flex;align-items:center;gap:16px;font-size:12px; } .esg-icon-success { background:var(--color-success-light); } .esg-icon-info { background:var(--color-info-light); } .esg-icon-accent { background:var(--color-accent-light,#FFF8E1); } .esg-icon-purple { background:var(--color-purple-light); } .icon-sm-success { color:var(--color-success);font-size:13px; } .icon-sm-info { color:var(--color-info);font-size:13px; } .icon-sm-accent { color:var(--color-accent);font-size:13px; } .icon-sm-purple { color:var(--color-purple);font-size:13px; } .icon-sm-secondary { color:var(--text-secondary);font-size:13px; } .icon-xs-success { color:var(--color-success);font-size:11px; } .text-purple { color:var(--color-purple); } /* Mine */ .card-footer-sm { padding:10px 16px; } .icon-status-warn { color:var(--color-warning);font-size:8px; } .icon-status-danger { color:var(--color-danger);font-size:8px; } .mt-right-6 { margin-top:6px;text-align:right; } .mb-bar-sm { margin-bottom:14px; } .mb-bar-xs { margin-bottom:5px; } /* LME */ .card-body-p28 { padding:28px; } .icon-trend-success { font-size:26px;color:var(--color-success); } /* HR */ .chart-donut-wrap { width:260px;height:260px;position:relative; } .dept-legend { display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:16px;width:100%; } .card-body-chart { display:flex;flex-direction:column;align-items:center; } .text-warning-hint { margin-top:6px;color:var(--color-warning); } .text-success-hint { margin-top:6px;color:var(--color-success); } /* Financial */ .section-divider-top { margin-top:16px;padding-top:16px;border-top:1px solid var(--border-default); } .section-divider-top-20 { margin-top:20px;padding-top:20px;border-top:1px solid var(--border-default); } .flex-between-xs-pt { display:flex;justify-content:space-between;font-size:12px;padding-top:4px; } .flex-between-xs-mt { display:flex;justify-content:space-between;margin-top:6px;font-size:11px; } .progress-bar-xs { height:6px;margin-top:4px; } .progress-fill-info { background:var(--color-info); } .progress-fill-border { background:var(--border-strong); } /* Ops */ .alert-compact { padding:0.5rem 0.75rem;font-size:0.75rem; } .progress-bar-inline { flex:1;height:8px; } /* Smelter */ /* HSE */ .section-divider-flex { margin-top:16px;padding-top:16px;border-top:1px solid var(--border-default);display:flex;justify-content:space-between;align-items:center; } .card-body-nopad-top { padding:0 16px 16px; } /* ── TV Mode shared utilities ── */ /* Layout */ .tv-body { flex:1;display:flex;flex-direction:column;overflow:hidden; } .tv-grid-1-280 { flex:1;display:grid;grid-template-columns:1fr 280px;gap:12px;overflow:hidden; } .tv-grid-1-340 { flex:1;display:grid;grid-template-columns:1fr 340px;overflow:hidden; } .tv-grid-1-360 { flex:1;display:grid;grid-template-columns:1fr 360px;gap:12px;overflow:hidden; } .tv-chart-area { flex:1;position:relative;min-height:0; } .tv-card-body-col { height:100%;display:flex;flex-direction:column; } .tv-col-overflow { display:flex;flex-direction:column;overflow:hidden;min-height:0; } .tv-shrink-0 { flex-shrink:0; } .tv-text-right { text-align:right; } .tv-col-span-2 { grid-column:1 / -1; } /* TV cards */ .tv-card-dark { background:#1C1C1C;border:1px solid rgba(255,255,255,0.10);border-radius:16px; } .tv-card-dark-sm { background:#1C1C1C;border:1px solid rgba(255,255,255,0.08);border-radius:10px; } .tv-card-danger { background:#1c0a0a;border:1px solid #7f1d1d;border-radius:16px; } .tv-card-danger-sm { background:#1c0a0a;border:1px solid #7f1d1d;border-radius:8px; } .tv-card-warning { background:#1c1000;border:1px solid #78350f;border-radius:10px; } .tv-cell { background:#262626;border-radius:10px;padding:12px 14px; } .tv-cell-8 { background:#262626;border-radius:8px;padding:8px 10px; } /* TV text */ .tv-hdr { font-size:15px;font-weight:600;color:white;flex-shrink:0; } .tv-hdr-sm { font-size:13px;font-weight:600;color:white; } .tv-lbl { font-size:11px;color:#6B6B6B; } .tv-lbl-sm { font-size:10px;color:#6B6B6B; } .tv-lbl-gray { font-size:13px;color:#B0B0B0; } .tv-lbl-gray-sm { font-size:11px;color:#B0B0B0; } .tv-lbl-upper { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#6B6B6B; } .tv-mono { font-family:'JetBrains Mono',monospace;font-weight:700; } .tv-mono-success { font-family:'JetBrains Mono',monospace;font-weight:700;color:#4ade80; } .tv-mono-gray { font-family:'JetBrains Mono',monospace;font-weight:700;color:#B0B0B0; } .tv-mono-info { font-family:'JetBrains Mono',monospace;font-weight:700;color:#60A5FA; } .tv-text-white { color:white; } .tv-text-gray { color:#6B6B6B; } .tv-text-danger-sm { font-size:12px;color:#fca5a5; } .tv-text-warn-sm { font-size:12px;color:#fcd34d; } /* TV row helpers */ .tv-row { display:flex;justify-content:space-between;align-items:center; } .tv-row-mb8 { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; } .tv-row-mb16 { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-shrink:0; } .tv-col-gap5 { display:flex;flex-direction:column;gap:5px; } .tv-col-gap8 { display:flex;flex-direction:column;gap:8px; } .tv-col-gap10 { display:flex;flex-direction:column;gap:10px; } .tv-col-gap12 { display:flex;flex-direction:column;gap:12px; } .tv-col-gap18 { display:flex;flex-direction:column;gap:18px; } .tv-col-gap20 { display:flex;flex-direction:column;gap:20px; } .tv-mt-2 { margin-top:2px; } .tv-mt-3 { margin-top:3px; } .tv-mt-4 { margin-top:4px; } .tv-mt-6 { margin-top:6px; } .tv-mt-8 { margin-top:8px; } .tv-mt-10 { margin-top:10px; } .tv-mt-12 { margin-top:12px; } .tv-mb-4 { margin-bottom:4px; } .tv-mb-6 { margin-bottom:6px; } .tv-mb-8 { margin-bottom:8px; } .tv-mb-10 { margin-bottom:10px; } .tv-mb-12 { margin-bottom:12px; } .tv-mb-14 { margin-bottom:14px; } .tv-mb-16 { margin-bottom:16px; } .tv-mb-20 { margin-bottom:20px; } .tv-p12 { padding:12px; } .tv-p16 { padding:16px; } .tv-p20 { padding:20px; } .tv-p28 { padding:28px; } .tv-p-810 { padding:8px 10px; } .tv-p-1416 { padding:14px 16px; } .tv-p-1620 { padding:16px 20px; } .tv-p-1816 { padding:18px;display:flex;align-items:center;gap:16px;flex-shrink:0; } .tv-icon-accent { color:var(--color-accent);margin-right:6px; } .tv-icon-accent-8 { color:var(--color-accent);margin-right:8px; } .tv-icon-info-6 { color:var(--color-info);margin-right:6px; } .tv-icon-info-10 { color:var(--color-info);margin-right:10px; } .tv-icon-success { color:var(--color-success); } .tv-icon-danger { color:#ef4444; } .tv-icon-warning { color:#f97316; } /* TV bar */ .tv-bar-6 { height:6px;background:#262626;border-radius:3px;overflow:hidden;margin-top:8px; } .tv-bar-8 { height:8px;background:var(--border-default);border-radius:4px;overflow:hidden; } .tv-bar-8-mt10 { height:8px;background:#262626;border-radius:4px;overflow:hidden;margin-top:10px; } .tv-bar-10 { height:10px;background:#262626;border-radius:5px;overflow:hidden; } .tv-bar-20 { height:20px;background:#262626;border-radius:10px;overflow:hidden; } .tv-bar-fill { height:100%;border-radius:4px; } .tv-bar-fill-3 { height:100%;border-radius:3px; } .tv-bar-fill-5 { height:100%;border-radius:5px; } .tv-bar-fill-10 { height:100%;border-radius:10px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px; } /* TV map — pill colors */ .tv-pill-all { border-color:#6b7280;color:#e5e7eb; } .tv-pill-jetty { border-color:#3b82f6;color:#3b82f6; } .tv-pill-mine { border-color:#f59e0b;color:#f59e0b; } .tv-pill-truck { border-color:#fbbf24;color:#fbbf24; } .tv-pill-office { border-color:#22c55e;color:#22c55e; } .tv-pill-smelter { border-color:#ef4444;color:#ef4444; } .tv-pill-heavy { border-color:#a855f7;color:#a855f7; } /* TV map — stat val colors */ .tv-val-truck { color:#fbbf24; } .tv-val-heavy { color:#a855f7; } .tv-val-mine { color:#f59e0b; } .tv-val-smelter { color:#ef4444; } .tv-val-jetty { color:#3b82f6; } .tv-val-office { color:#22c55e; } /* TV map — legend dot colors */ .tv-dot-jetty { background:#3b82f6; } .tv-dot-mine { background:#f59e0b; } .tv-dot-truck { background:#fbbf24; } .tv-dot-office { background:#22c55e; } .tv-dot-smelter { background:#ef4444; } .tv-dot-heavy { background:#a855f7; } /* TV map — panel header */ .tv-panel-hdr { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;margin-bottom:8px; } /* TV KPI suffix spans (unit labels) */ .tv-sfx-12 { font-size:12px;font-weight:400;color:var(--text-muted); } .tv-sfx-16 { font-size:16px;font-weight:400;color:var(--text-muted); } .tv-sfx-22 { font-size:22px;font-weight:400;color:var(--text-muted); } .tv-sfx-24 { font-size:24px;font-weight:400;color:var(--text-muted); } .tv-sfx-28 { font-size:28px;font-weight:400;color:var(--text-muted); } .tv-sfx-36 { font-size:36px;font-weight:500;color:rgba(34,197,94,0.4); } /* TV chart card helpers */ .tv-chart-card { flex:1;overflow:hidden;min-height:0;border-radius:16px; } .tv-chart-title { font-size:15px;font-weight:600;color:var(--text-primary); } .tv-accent-mono { color:var(--color-accent);font-family:'JetBrains Mono',monospace;font-weight:700; } .tv-right-panel { background:var(--bg-canvas);border-left:1px solid var(--border-default);padding:24px;display:flex;flex-direction:column;gap:20px;overflow-y:auto; } .tv-alert-row { border-left-width:3px;border-left-style:solid;border-radius:6px;padding:10px 12px; } .tv-alert-title { font-size:12px;font-weight:700; } .tv-fill-info { background:var(--color-info); } .tv-fill-success { background:var(--color-success); } .tv-fill-accent { background:var(--color-accent); } .app-content-map { display: flex; flex-direction: column; height: calc(100vh - 56px); padding: 24px 16px 16px 24px; gap: 12px; overflow: hidden; } @media (max-width: 640px) { .app-content { padding: 16px; } .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; } .page-header { flex-direction: column; gap: 12px; align-items: flex-start; } .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; } }