/* MAXEK layout + field tokens (theme-independent) */ :root { --maxek-red: #E30613; /* Data-entry forms — navy tint (distinct from dashboard slate) */ --bg-form-card: #172033; --bg-form-card-top: #1a2744; --bg-form-input: #0f1829; --border-form: #2a4060; --form-accent: #3d6ea8; /* Data display panels — slate/charcoal (view/list, no blue accent) */ --bg-display-panel: #1E2533; --bg-display-panel-top: #242d3d; --border-display: #2E374A; /* Layout tokens — header, subbar, content (desktop-first) */ --layout-toolbar-height: 56px; --layout-toolbar-padding-x: 24px; --layout-content-padding: 24px; --layout-content-padding-compact: 16px; --layout-control-height: 36px; --layout-control-radius: 8px; --layout-font-toolbar: 13px; --layout-font-subnav: 12px; --layout-gap: 12px; --layout-section-gap: 16px; /* ERP field width standards (forms + tables) */ --erp-width-qty: 110px; --erp-width-rate: 120px; --erp-width-amount: 165px; --erp-width-date: 130px; --erp-width-id: 140px; --erp-width-unit: 80px; --erp-width-item: 250px; --erp-width-select: 280px; --erp-width-select-wide: 300px; --erp-width-small-num: 110px; --erp-width-medium-num: 165px; } /* ── Dashboard themes (set data-theme on ) ── */ :root, [data-theme="command-dark"] { --maxek-bg: #141822; --maxek-sidebar-bg: #232323; --maxek-accent: #E30613; --maxek-accent-soft: rgba(227, 6, 19, 0.14); --maxek-accent-border: rgba(227, 6, 19, 0.45); --maxek-card-bg: #1E2533; --maxek-card-bg-alt: #242d3d; --maxek-text: #F3F4F6; --maxek-text-muted: #9CA3AF; --maxek-border: #2E374A; --maxek-header-bg: #1E2533; --maxek-toolbar-bg: #141822; --maxek-input-bg: #141822; --maxek-input-text: #ffffff; --maxek-link: #93c5fd; --maxek-sidebar-active-pill: #ffffff; --maxek-scrollbar-track: #141822; --maxek-scrollbar-thumb: #3b4458; --maxek-kpi-1: var(--maxek-card-bg); --maxek-kpi-2: var(--maxek-card-bg); --maxek-kpi-3: var(--maxek-card-bg); --maxek-kpi-4: var(--maxek-card-bg); --maxek-kpi-5: var(--maxek-card-bg); --maxek-kpi-6: var(--maxek-card-bg); --maxek-kpi-text: var(--maxek-text); --maxek-kpi-label: var(--maxek-text-muted); --maxek-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } [data-theme="pro-light"] { --maxek-bg: #eef1f6; --maxek-sidebar-bg: #1a365d; --maxek-accent: #2563eb; --maxek-accent-soft: rgba(37, 99, 235, 0.12); --maxek-accent-border: rgba(37, 99, 235, 0.35); --maxek-card-bg: #ffffff; --maxek-card-bg-alt: #f8fafc; --maxek-text: #1e293b; --maxek-text-muted: #64748b; --maxek-border: #cbd5e1; --maxek-header-bg: #ffffff; --maxek-toolbar-bg: #ffffff; --maxek-input-bg: #f1f5f9; --maxek-input-text: #1e293b; --maxek-link: #2563eb; --maxek-sidebar-active-pill: #60a5fa; --maxek-scrollbar-track: #e2e8f0; --maxek-scrollbar-thumb: #94a3b8; --maxek-kpi-1: var(--maxek-card-bg); --maxek-kpi-2: var(--maxek-card-bg); --maxek-kpi-3: var(--maxek-card-bg); --maxek-kpi-4: var(--maxek-card-bg); --maxek-kpi-5: var(--maxek-card-bg); --maxek-kpi-6: var(--maxek-card-bg); --maxek-kpi-text: var(--maxek-text); --maxek-kpi-label: var(--maxek-text-muted); --maxek-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); } [data-theme="ultra-color"] { --maxek-bg: #12151c; --maxek-sidebar-bg: #0f1419; --maxek-accent: #14b8a6; --maxek-accent-soft: rgba(20, 184, 166, 0.16); --maxek-accent-border: rgba(20, 184, 166, 0.45); --maxek-card-bg: #1a1f2b; --maxek-card-bg-alt: #222836; --maxek-text: #f8fafc; --maxek-text-muted: #94a3b8; --maxek-border: #2d3548; --maxek-header-bg: #1a1f2b; --maxek-toolbar-bg: #12151c; --maxek-input-bg: #0f1419; --maxek-input-text: #f8fafc; --maxek-link: #38bdf8; --maxek-sidebar-active-pill: #14b8a6; --maxek-scrollbar-track: #12151c; --maxek-scrollbar-thumb: #334155; --maxek-kpi-1: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); --maxek-kpi-2: linear-gradient(135deg, #059669 0%, #10b981 100%); --maxek-kpi-3: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); --maxek-kpi-4: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%); --maxek-kpi-5: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); --maxek-kpi-6: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); --maxek-kpi-text: #ffffff; --maxek-kpi-label: rgba(255, 255, 255, 0.82); --maxek-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } :root, [data-theme="command-dark"], [data-theme="pro-light"], [data-theme="ultra-color"] { --maxek-charcoal: var(--maxek-sidebar-bg); --bg-dark-ops: var(--maxek-bg); --bg-card-dark: var(--maxek-card-bg); --text-main: var(--maxek-text); --text-muted: var(--maxek-text-muted); --border-subtle: var(--maxek-border); } .maxek-layout, .maxek-layout * { box-sizing: border-box; } .maxek-layout [data-project-section][hidden] { display: none !important; } /* erp-field sets display:flex; without this, [hidden] rows stay visible */ .maxek-layout .erp-field[hidden], .maxek-layout .attendance-worker-verify[hidden] { display: none !important; } .maxek-layout { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-dark-ops); color: var(--text-main); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* Top-nav layout: hide legacy left rail */ .maxek-topnav-layout .tool-rail { display: none !important; } .maxek-topnav-layout { flex-direction: column; } .maxek-topnav-layout .main-window { width: 100%; max-width: 100%; } /* VERTICAL TOOL RAIL */ .maxek-layout .tool-rail { width: 238px; background-color: var(--maxek-charcoal); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; padding: 16px; flex-shrink: 0; } .maxek-layout .logo-container { padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; } .maxek-logo { display: block; object-fit: contain; max-width: 100%; height: auto; } .maxek-logo--sidebar { width: 52px; margin-bottom: 10px; } .maxek-logo--header { width: 28px; flex-shrink: 0; } .maxek-layout .logo-link { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: inherit; } .maxek-layout .logo-text-block { display: flex; flex-direction: column; align-items: flex-start; } .maxek-layout .logo-text-main { font-size: 24px; font-weight: 800; color: var(--text-main); letter-spacing: 2px; text-decoration: none; } .maxek-layout .logo-text-main span { color: var(--maxek-red); } .maxek-layout .logo-subtext { font-size: 10px; color: var(--text-muted); letter-spacing: 3px; text-transform: uppercase; margin-top: 2px; } .maxek-layout .action-heading { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1.5px; margin-bottom: 10px; } .maxek-layout .rail-btn { background-color: transparent; border: 1px solid var(--maxek-charcoal); color: var(--text-main); padding: 9px 12px; border-radius: 6px; cursor: pointer; width: 100%; text-align: left; margin-bottom: 7px; font-size: 14px; display: flex; align-items: center; gap: 12px; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; text-decoration: none; } .maxek-layout .department-btn { min-height: 42px; font-weight: 650; position: relative; border-color: transparent; } .maxek-layout .department-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .maxek-layout .department-btn.active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 99px; background: var(--maxek-sidebar-active-pill); } .maxek-layout .rail-btn i { color: var(--maxek-accent); font-size: 16px; transition: color 0.3s ease; } .maxek-layout .rail-btn:hover, .maxek-layout .rail-btn.active { background-color: var(--maxek-accent); border-color: var(--maxek-accent); color: #fff; } .maxek-layout .rail-btn:hover i, .maxek-layout .rail-btn.active i { color: #fff; } .maxek-layout .rail-group { margin-bottom: 5px; } .maxek-layout .rail-group-summary { border: 1px solid transparent; color: var(--text-main); padding: 8px 10px; border-radius: 6px; cursor: pointer; width: 100%; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; list-style: none; } .maxek-layout .rail-group-summary::-webkit-details-marker { display: none; } .maxek-layout .rail-group-summary span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .maxek-layout .rail-group-summary i:first-child { color: var(--maxek-red); width: 18px; text-align: center; } .maxek-layout .rail-group-chevron { color: var(--text-muted); font-size: 11px; transition: transform 0.2s ease, color 0.2s ease; } .maxek-layout .rail-group[open] .rail-group-chevron { transform: rotate(180deg); } .maxek-layout .rail-group-summary:hover, .maxek-layout .rail-group-summary.active { background: rgba(227, 6, 19, 0.14); border-color: rgba(227, 6, 19, 0.45); color: #fff; } .maxek-layout .rail-group-summary:hover .rail-group-chevron, .maxek-layout .rail-group-summary.active .rail-group-chevron { color: #fff; } .maxek-layout .rail-subnav { display: grid; gap: 2px; padding: 4px 0 7px 27px; } .maxek-layout .rail-subbtn { color: #cbd5e1; text-decoration: none; font-size: 12px; line-height: 1.25; padding: 6px 8px; border-left: 2px solid rgba(156, 163, 175, 0.22); border-radius: 0 5px 5px 0; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .maxek-layout .rail-subbtn:hover, .maxek-layout .rail-subbtn.active { background: rgba(227, 6, 19, 0.12); border-left-color: var(--maxek-red); color: #fff; } /* MAIN DASHBOARD CONTENT WINDOW */ .maxek-layout .main-window { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; } .maxek-layout .maxek-toolbar-stack { flex: 0 0 auto; position: sticky; top: 0; z-index: 40; background: var(--maxek-toolbar-bg); overflow: visible; } .maxek-layout .top-utility-strip { min-height: var(--layout-toolbar-height); height: var(--layout-toolbar-height); background-color: var(--maxek-header-bg); border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--layout-toolbar-padding-x); gap: var(--layout-gap); flex-shrink: 0; overflow: visible; } .maxek-layout .search-wrapper { position: relative; width: min(320px, 100%); } .maxek-layout .search-wrapper input { width: 100%; height: var(--layout-control-height); background-color: var(--maxek-input-bg); border: 1px solid var(--border-subtle); padding: 0 14px 0 36px; border-radius: 999px; color: var(--maxek-input-text); font-size: var(--layout-font-toolbar); } .maxek-layout .search-wrapper i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; } .maxek-layout .header-actions { display: flex; align-items: center; gap: 10px; overflow: visible; } .maxek-layout .user-status-cluster { display: flex; align-items: center; gap: 10px; flex-shrink: 0; overflow: visible; padding-top: 2px; padding-right: 2px; } .maxek-layout .timestamp, .maxek-layout .header-datetime { font-size: var(--layout-font-toolbar); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; height: var(--layout-control-height); padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--layout-control-radius); background: rgba(20, 24, 34, 0.55); display: inline-flex; align-items: center; } .maxek-layout .rail-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px; } .maxek-layout .rail-top-row .logo-container { padding-bottom: 0; border-bottom: none; margin-bottom: 0; min-width: 0; } .maxek-layout .rail-close { display: none; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--border-subtle); border-radius: 8px; background: transparent; color: var(--text-main); cursor: pointer; } .maxek-layout .rail-close:hover { border-color: var(--maxek-red); color: var(--maxek-red); } .maxek-layout .department-subbar.is-collapsed { display: none; } .maxek-layout .department-subbar-reopen { display: none; align-items: center; gap: 8px; margin: 0 var(--layout-toolbar-padding-x); min-height: calc(var(--layout-toolbar-height) - 12px); padding: 0 14px; border: 1px solid var(--border-subtle); border-radius: var(--layout-control-radius); background: rgba(20, 24, 34, 0.96); color: var(--text-main); font-size: 11px; font-weight: 650; cursor: pointer; flex: 0 0 auto; } .maxek-layout .department-subbar-reopen.is-visible { display: inline-flex; } .maxek-layout .department-subbar-reopen:hover { border-color: var(--maxek-red); color: #fff; } .maxek-layout .department-subbar-reopen i { color: var(--maxek-red); } .maxek-layout .department-subbar-close { flex-shrink: 0; width: var(--layout-control-height); height: var(--layout-control-height); margin-left: auto; border: 1px solid var(--border-subtle); border-radius: var(--layout-control-radius); background: transparent; color: var(--text-main); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .maxek-layout .department-subbar-close:hover { border-color: var(--maxek-red); color: var(--maxek-red); } .maxek-layout .alert-badge { position: relative; cursor: pointer; font-size: 18px; } .maxek-layout .alert-count { position: absolute; top: -5px; right: -8px; background-color: var(--maxek-red); color: #fff; font-size: 10px; font-weight: bold; padding: 2px 5px; border-radius: 50%; } .maxek-layout .admin-profile { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } .maxek-layout .admin-avatar { width: 28px; height: 28px; border-radius: 50%; background-color: var(--maxek-red); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0; } .maxek-layout .dashboard-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--layout-content-padding); } .maxek-layout .section-header { font-size: 24px; font-weight: 700; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; } .maxek-layout .section-header span { color: var(--maxek-red); } .maxek-layout .analytics-grid { display: grid; grid-template-columns: 1.5fr 2fr 1.2fr; gap: 25px; margin-bottom: 30px; } .maxek-layout .panel-card { background-color: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 20px; } .maxek-layout .panel-title { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; } .maxek-layout .chart-box { height: 180px; border: 2px dashed var(--border-subtle); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .maxek-layout .kpi-tile-row { display: flex; flex-direction: column; gap: 15px; } .maxek-layout .compact-tile { background-color: var(--bg-dark-ops); border: 1px solid var(--border-subtle); border-left: 4px solid var(--maxek-red); padding: 12px 15px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } .maxek-layout .tile-meta p { font-size: 12px; color: var(--text-muted); } .maxek-layout .tile-meta h3 { font-size: 20px; font-weight: 700; margin-top: 2px; } .maxek-layout .data-grid-container { background-color: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 25px; } .maxek-layout .grid-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .maxek-layout .erp-table { width: 100%; border-collapse: collapse; text-align: left; } .maxek-layout .erp-table th { padding: 14px; border-bottom: 2px solid var(--border-subtle); color: var(--text-muted); font-size: 13px; text-transform: uppercase; } .maxek-layout .erp-table td { padding: 14px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; } .maxek-layout .erp-table a { color: var(--text-main); text-decoration: none; } .maxek-layout .dpr-desc-clamp { max-width: 320px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } .maxek-layout .erp-table td.erp-col-project { max-width: 200px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; cursor: help; } .maxek-layout .erp-table a:hover { color: var(--maxek-red); } .maxek-layout .status-pill { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-block; } .maxek-layout .status-pill.active { background-color: rgba(16, 185, 129, 0.2); color: #10B981; } .maxek-layout .status-pill.pending { background-color: rgba(245, 158, 11, 0.2); color: #F59E0B; } .maxek-layout .status-pill.empty { background-color: rgba(156, 163, 175, 0.2); color: var(--text-muted); } .maxek-layout .logout-link { color: var(--text-muted); font-size: 13px; text-decoration: none; } .maxek-layout .logout-link:hover { color: var(--maxek-red); } /* ── ENTERPRISE MODULE SYSTEM (Phase 2) ── */ .maxek-layout .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 90; } .maxek-layout .sidebar-overlay.visible { display: block; } .maxek-layout .header-left { display: flex; align-items: center; gap: var(--layout-gap); min-width: 0; flex: 1; } .maxek-layout .sidebar-toggle { display: none; background: transparent; border: 1px solid var(--border-subtle); color: var(--text-main); width: var(--layout-control-height); height: var(--layout-control-height); border-radius: var(--layout-control-radius); cursor: pointer; align-items: center; justify-content: center; } .maxek-layout .header-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-width: 0; } .maxek-layout .header-logo { font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--text-main); text-decoration: none; white-space: nowrap; } .maxek-layout .header-brand-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; white-space: nowrap; } @media (max-width: 1100px) { .maxek-layout .header-brand-sub { display: none; } } .maxek-layout .header-logo span { color: var(--maxek-red); } .maxek-layout .branch-select { background: var(--bg-dark-ops); border: 1px solid var(--border-subtle); color: var(--text-main); height: var(--layout-control-height); padding: 0 12px; border-radius: var(--layout-control-radius); font-size: var(--layout-font-toolbar); min-width: 150px; } .maxek-layout .header-icon-btn { position: relative; background: transparent; border: 1px solid var(--border-subtle); color: var(--text-main); width: var(--layout-control-height); height: var(--layout-control-height); border-radius: var(--layout-control-radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px; overflow: visible; } .maxek-layout .header-icon-btn:hover { border-color: var(--maxek-accent); color: var(--maxek-accent); } .maxek-layout .header-logout-btn { min-height: var(--layout-control-height); height: var(--layout-control-height); padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--layout-control-radius); color: var(--text-main); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: var(--layout-font-toolbar); font-weight: 700; white-space: nowrap; } .maxek-layout .header-logout-btn:hover { border-color: var(--maxek-red); color: #fff; } .maxek-layout .header-badge { position: absolute; top: 0; right: 0; transform: translate(40%, -40%); background: var(--maxek-red); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; z-index: 3; line-height: 1; box-shadow: 0 0 0 2px var(--maxek-header-bg, #141822); pointer-events: none; } .maxek-layout .profile-chip { display: flex; align-items: center; gap: 8px; height: var(--layout-control-height); padding: 0 10px 0 4px; border: 1px solid var(--border-subtle); border-radius: 999px; cursor: pointer; font-size: var(--layout-font-toolbar); font-weight: 600; } .maxek-layout .erp-field-with-action { align-items: stretch; gap: 10px; } .maxek-layout .erp-inline-action { border: 1px solid var(--border-subtle); background: var(--bg-dark-ops); color: var(--text-main); border-radius: 8px; padding: 0 12px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; min-height: 42px; align-self: stretch; } .maxek-layout .erp-inline-action:hover { border-color: var(--maxek-red); color: #fff; } .maxek-layout .erp-modal[hidden] { display: none; } .maxek-layout .erp-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; } .maxek-layout .erp-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.58); } .maxek-layout .erp-modal-card { position: relative; width: min(760px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 22px; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.36); } .maxek-layout .erp-modal-header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .maxek-layout .erp-modal-header h3 { margin: 0 0 5px; font-size: 20px; } .maxek-layout .erp-modal-header p { margin: 0; color: var(--text-muted); font-size: 13px; } .maxek-layout .erp-modal-close { width: 36px; height: 36px; border: 1px solid var(--border-subtle); border-radius: 8px; background: transparent; color: var(--text-main); cursor: pointer; flex: 0 0 auto; } .maxek-layout .employee-detail-modal { width: min(940px, 100%); } .maxek-layout .employee-detail-layout { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: start; } .maxek-layout .employee-detail-photo { width: 132px; height: 132px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border-subtle); background: var(--bg-dark-ops); } .maxek-layout .employee-detail-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 42px; } .maxek-layout .attendance-worker-verify-panel { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-dark-ops); } .maxek-layout .attendance-worker-verify-panel .employee-detail-photo { width: 96px; height: 96px; } .maxek-layout .attendance-worker-verify-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .maxek-layout .attendance-worker-verify-meta strong { font-size: 15px; color: var(--text-primary); } .maxek-layout .attendance-worker-verify-meta span { font-size: 13px; color: var(--text-muted); } .maxek-layout .attendance-worker-verify-hint { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); } .maxek-layout .attendance-bulk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0.5rem; flex-wrap: wrap; } .maxek-layout .attendance-bulk-select-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .maxek-layout .attendance-bulk-count { font-size: 12px; color: var(--text-muted); } .maxek-layout .attendance-bulk-table-wrap { max-height: 360px; margin-bottom: 0.5rem; } .maxek-layout .attendance-bulk-table-wrap .bulk-row-status { min-width: 7rem; } .maxek-layout .employee-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .maxek-layout .employee-detail-grid div { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); } .maxek-layout .employee-detail-grid span { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; } .maxek-layout .employee-detail-grid strong { color: var(--text-main); font-size: 14px; word-break: break-word; } .maxek-layout .employee-document-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; color: var(--text-muted); font-size: 13px; } .maxek-layout .employee-document-links a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 11px; color: var(--text-main); text-decoration: none; } .maxek-layout .employee-document-links a:hover { border-color: var(--maxek-red); color: var(--maxek-red); } .maxek-layout .employee-detail-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; } .maxek-layout .erp-link-btn { background: none; border: none; padding: 0; color: var(--accent-primary, #4da3ff); font: inherit; font-weight: 600; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; } .maxek-layout .erp-link-btn:hover { color: var(--text-main); } .maxek-layout .project-hub-card { width: min(1080px, 100%); } .maxek-layout .project-hub-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .maxek-layout .project-hub-stat { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px 14px; } .maxek-layout .project-hub-stat span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .maxek-layout .project-hub-stat strong { font-size: 18px; color: var(--text-main); } .maxek-layout .project-hub-section { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; background: rgba(0, 0, 0, 0.12); } .maxek-layout .project-hub-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .maxek-layout .project-hub-section-head h4 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; } .maxek-layout .project-hub-section-actions { display: flex; flex-wrap: wrap; gap: 8px; } .maxek-layout .project-hub-table-scroll { max-height: 220px; } .maxek-layout .erp-table-compact th, .maxek-layout .erp-table-compact td { padding: 8px 10px; font-size: 13px; } .maxek-layout .project-hub-empty { color: var(--text-muted); font-style: italic; } .maxek-layout .project-hub-muted { color: var(--text-muted); font-size: 13px; } .maxek-layout .project-hub-footer { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border-subtle); } .maxek-layout .staff-component-row, .maxek-layout .staff-travel-row { grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1.2fr) minmax(100px, 1fr) auto; align-items: end; } .maxek-layout .staff-component-row .staff-component-custom-field[hidden] { display: none; } .maxek-layout .staff-increment-card { margin-top: 1rem; } .maxek-layout .staff-increment-history { margin-bottom: 1rem; } .maxek-layout .staff-increment-form { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle, #e2e8f0); } .maxek-layout .erp-form-hint { color: var(--text-muted, #64748b); font-size: 13px; margin: 0 0 0.75rem; } .maxek-layout .rail-nav-scroll { flex: 1; overflow-y: auto; margin-right: -8px; padding-right: 8px; } .maxek-layout .department-subbar { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--layout-gap); min-height: var(--layout-toolbar-height); height: auto; padding: 8px var(--layout-toolbar-padding-x); border-bottom: 1px solid var(--border-subtle); background: rgba(20, 24, 34, 0.96); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); flex: 0 0 auto; position: relative; z-index: 30; } .maxek-layout .department-subbar-title { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: var(--layout-font-toolbar); font-weight: 800; min-width: 0; max-width: 200px; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .maxek-layout .department-subbar-title i { color: var(--maxek-red); } .maxek-layout .department-subbar-scroll { display: flex; align-items: center; gap: 6px; overflow-x: visible; row-gap: 6px; min-width: 0; flex: 1; height: auto; flex-wrap: wrap; overflow-y: visible; scrollbar-width: thin; } .maxek-layout .department-subbar-scroll::-webkit-scrollbar { height: 6px; } .maxek-layout .department-subbar-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.45); border-radius: 4px; } @media (max-width: 1099px) { .maxek-layout .department-subbar-scroll { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .maxek-layout .department-subbar-scroll::-webkit-scrollbar { display: block; height: 6px; } } .maxek-layout .department-subbar-link { display: inline-flex; align-items: center; height: calc(var(--layout-control-height) - 4px); padding: 0 12px; border: 1px solid transparent; border-radius: 6px; color: #cbd5e1; font-size: 11px; font-weight: 650; text-decoration: none; white-space: nowrap; } .maxek-layout .department-subbar-link:hover, .maxek-layout .department-subbar-link.active { color: #fff; background: rgba(227, 6, 19, 0.15); border-color: rgba(227, 6, 19, 0.45); } .maxek-layout .erp-sub-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: calc(var(--layout-toolbar-height) - 8px); padding: 0 var(--layout-toolbar-padding-x); margin: 0; border-radius: 0; border: none; border-bottom: 1px solid var(--border-subtle); background: rgba(30, 37, 51, 0.98); } .maxek-layout .erp-sub-toolbar--secondary { min-height: calc(var(--layout-toolbar-height) - 10px); padding-top: 4px; padding-bottom: 4px; background: rgba(24, 28, 38, 0.98); border-bottom: 1px solid rgba(46, 55, 74, 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .maxek-layout .erp-sub-toolbar--secondary::before { content: ""; display: inline-block; width: 3px; height: 18px; margin-right: 2px; border-radius: 99px; background: var(--maxek-red); flex-shrink: 0; } .maxek-layout .erp-sub-toolbar-link { display: inline-flex; align-items: center; gap: 0.35rem; height: calc(var(--layout-control-height) - 6px); padding: 0 10px; border-radius: 6px; font-size: 11px; font-weight: 650; color: #cbd5e1; text-decoration: none; border: 1px solid transparent; white-space: nowrap; } .maxek-layout .erp-sub-toolbar-link i { font-size: 0.78rem; color: var(--maxek-red); opacity: 0.95; } .maxek-layout .erp-sub-toolbar-link:hover, .maxek-layout .erp-sub-toolbar-link.active { color: #fff; background: rgba(227, 6, 19, 0.15); border-color: rgba(227, 6, 19, 0.45); } .maxek-layout .erp-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--layout-gap); } .maxek-layout .erp-summary-grid--stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .maxek-layout .erp-stat-card { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-left: 3px solid var(--maxek-red); border-radius: 8px; padding: 10px 12px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .maxek-layout .erp-stat-card span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; } .maxek-layout .erp-stat-card strong { font-size: 18px; font-weight: 800; color: var(--text-main); line-height: 1.2; } .maxek-layout .erp-stat-card strong small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--text-muted); } .maxek-layout .erp-notice-bar { margin-bottom: 1rem; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(59, 130, 246, 0.35); background: rgba(30, 58, 138, 0.18); color: #dbeafe; font-size: 13px; line-height: 1.5; } .maxek-layout .erp-notice-bar a { color: #93c5fd; font-weight: 600; } .maxek-layout .erp-notice-bar a:hover { color: #fff; } .maxek-layout .erp-module-section { margin-top: 0.25rem; } .maxek-layout .erp-module-section-title { margin: 0 0 0.65rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .maxek-layout .erp-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .maxek-layout .erp-module-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-card-dark); color: var(--text-main); text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; } .maxek-layout .erp-module-tile:hover { border-color: rgba(227, 6, 19, 0.55); background: rgba(30, 37, 51, 0.95); transform: translateY(-1px); } .maxek-layout .erp-module-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(227, 6, 19, 0.12); color: var(--maxek-red); font-size: 15px; flex-shrink: 0; } .maxek-layout .erp-module-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .maxek-layout .erp-module-tile-label { font-size: 13px; font-weight: 700; color: var(--text-main); line-height: 1.25; } .maxek-layout .erp-module-tile-desc { font-size: 11px; color: var(--text-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .maxek-layout .erp-module-tile-open, .maxek-layout .erp-module-tile-run { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; } .maxek-layout .erp-module-tile-open { color: #b45309; background: #fff7ed; } .maxek-layout .erp-module-tile-run { color: #1d4ed8; background: #eff6ff; } .maxek-layout .erp-module-tile-chevron { font-size: 10px; color: var(--text-muted); opacity: 0.7; } .maxek-layout .erp-summary-grid--compact { gap: 0.65rem; } .maxek-layout .erp-table-toolbar--compact { padding: 0.35rem 0; gap: 0.45rem; } .maxek-layout .help-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; } .maxek-layout .help-topic-card .erp-form-title { margin-bottom: 0.35rem; font-size: 0.95rem; } .maxek-layout .help-topic-category { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 0.25rem; } .maxek-layout .help-topic-desc { margin: 0 0 0.65rem; font-size: 0.85rem; color: #475569; line-height: 1.45; } .maxek-layout .help-topic-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .maxek-layout .help-contact-list { margin: 0.75rem 0 0; display: grid; gap: 0.55rem; } .maxek-layout .help-contact-list div { display: grid; grid-template-columns: 110px 1fr; gap: 0.5rem; font-size: 0.9rem; } .maxek-layout .help-contact-list dt { margin: 0; font-weight: 700; color: #64748b; } .maxek-layout .help-contact-list dd { margin: 0; color: #1f2937; } .maxek-layout .department-hub { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - (var(--layout-toolbar-height) * 2) - (var(--layout-content-padding) * 2)); padding: var(--layout-content-padding); } .maxek-layout .department-hub-card { max-width: 420px; width: 100%; padding: 36px 32px; border-radius: 18px; border: 1px solid var(--border-subtle); background: rgba(20, 24, 34, 0.88); text-align: center; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); } .maxek-layout .department-hub-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 16px; background: rgba(227, 6, 19, 0.12); color: var(--maxek-red); font-size: 26px; } .maxek-layout .department-hub-card h2 { margin: 0 0 10px; color: #fff; font-size: 24px; font-weight: 800; } .maxek-layout .department-hub-card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; } .maxek-layout .page-header-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--layout-gap); margin-top: 0.35rem; margin-bottom: var(--layout-section-gap); flex-wrap: wrap; position: relative; z-index: 1; } .pro-dash-content--module .page-header-bar { position: relative; z-index: 1; margin-top: 0; margin-bottom: var(--layout-section-gap); clear: both; } .pro-dash-content--module > .department-subbar, .pro-dash-content--module > .pro-dash-department-subbar { flex-shrink: 0; margin-bottom: 20px; } .maxek-layout .page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; line-height: 1.25; } .maxek-layout .breadcrumb { font-size: 13px; color: var(--text-muted); } .maxek-layout .breadcrumb a { color: var(--text-muted); text-decoration: none; } .maxek-layout .breadcrumb a:hover { color: var(--maxek-red); } .maxek-layout .page-header-actions { display: flex; gap: 10px; flex-wrap: wrap; } .maxek-layout .erp-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.2s ease; } .maxek-layout .erp-btn-primary { background: var(--maxek-red); color: #fff; border-color: var(--maxek-red); } .maxek-layout .erp-btn-primary:hover { filter: brightness(1.08); color: #fff; } .maxek-layout .erp-btn-ghost { background: transparent; color: var(--text-main); border-color: var(--border-subtle); } .maxek-layout .erp-btn-ghost:hover { border-color: var(--maxek-red); color: var(--maxek-red); } .maxek-layout .erp-btn-sm { padding: 6px 12px; font-size: 12px; } /* Standard vertical data-entry screen: toolbar → form → table */ .maxek-layout .erp-module-layout { display: flex; flex-direction: column; gap: 1.25rem; } .maxek-layout .erp-module-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.75rem 1rem; background: linear-gradient(180deg, var(--bg-display-panel-top) 0%, var(--bg-display-panel) 100%); border: 1px solid var(--border-display); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } .maxek-layout .erp-module-toolbar-search { position: relative; flex: 1 1 220px; max-width: 420px; min-width: 180px; } .maxek-layout .erp-module-toolbar-search > i, .maxek-layout .erp-module-toolbar-search-form > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; pointer-events: none; z-index: 1; } .maxek-layout .erp-module-toolbar-search input, .maxek-layout .erp-module-toolbar-search-form input { width: 100%; background: var(--bg-dark-ops); border: 1px solid var(--border-subtle); color: var(--text-main); border-radius: 8px; padding: 8px 12px 8px 34px; font-size: 13px; } .maxek-layout .erp-module-toolbar-search-form { position: relative; margin: 0; } .maxek-layout .erp-module-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .maxek-layout .erp-module-toolbar--standard { flex-direction: row; align-items: flex-start; gap: 0.65rem 0.75rem; } .maxek-layout .erp-module-toolbar--standard .erp-module-toolbar-search { flex: 1 1 200px; max-width: 420px; min-width: 200px; } .maxek-layout .erp-module-toolbar--standard .erp-module-toolbar-search-form { display: flex; align-items: center; gap: 0.5rem; width: 100%; } .maxek-layout .erp-module-toolbar--standard .erp-module-toolbar-search-form input[type="search"] { flex: 1 1 auto; min-width: 0; } .maxek-layout .erp-module-toolbar--standard .erp-toolbar-search-btn { flex: 0 0 auto; white-space: nowrap; } .maxek-layout .erp-module-toolbar--standard .erp-module-toolbar-actions { flex: 1 1 100%; justify-content: flex-start; gap: 0.4rem; } .maxek-layout .erp-module-toolbar--standard .erp-module-toolbar-actions .erp-btn-sm { white-space: nowrap; flex: 0 0 auto; } .maxek-layout .erp-module-toolbar--standard .erp-toolbar-select { max-width: 8.5rem; } .maxek-layout .erp-selectable-row { cursor: pointer; } .maxek-layout .erp-selectable-row.is-selected { background: rgba(59, 130, 246, 0.12); outline: 1px solid rgba(59, 130, 246, 0.35); } .maxek-layout .erp-hidden-form { display: none; } /* ERP Admin pages: single module toolbar only — hide stacked platform subbars */ .maxek-layout.erp-admin-page .department-subbar, .maxek-layout.erp-admin-page .department-subbar-reopen, .maxek-layout.erp-admin-page .pro-dash-department-subbar, .maxek-layout.erp-admin-page .erp-sub-toolbar, .maxek-layout.erp-admin-page .erp-sub-toolbar--secondary { display: none !important; } .erp-toolbar-divider { display: inline-block; width: 1px; height: 1.5rem; background: var(--border-subtle, #334155); margin: 0 0.15rem; flex-shrink: 0; } .erp-toolbar-select-wrap { display: inline-flex; margin: 0; } .erp-toolbar-select { height: var(--layout-control-height, 32px); padding: 0 0.5rem; border-radius: var(--layout-control-radius, 6px); border: 1px solid var(--border-subtle, #334155); background: var(--bg-dark-ops, #0f172a); color: var(--text-main, #e2e8f0); font-size: var(--layout-font-toolbar, 12px); max-width: 9rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .maxek-layout .erp-module-form-panel { margin: 0; } .maxek-layout .erp-module-table-panel { margin: 0; } .maxek-layout .erp-module-table-panel--hidden { display: none; } @media print { .maxek-layout .erp-module-toolbar, .maxek-layout .erp-module-form-panel, .maxek-layout .page-actions, .maxek-layout .tool-rail, .maxek-layout .maxek-top-nav, .maxek-layout #department-subbar { display: none !important; } .maxek-layout .erp-module-table-panel { border: none; box-shadow: none; } body.erp-print-table-only .maxek-layout > *:not(.main-window), body.erp-print-table-only .main-window > *:not(.dashboard-body), body.erp-print-table-only .dashboard-body > *:not(:has(.erp-print-focus)) { display: none !important; } body.erp-print-table-only .erp-print-focus { display: block !important; border: none; box-shadow: none; } } .maxek-layout .module-layout { display: grid; grid-template-columns: minmax(440px, 520px) minmax(0, 1fr); gap: 24px; align-items: start; } /* Wider data-entry column when form + list are side by side */ .maxek-layout .module-layout.module-layout--entry-wide { grid-template-columns: clamp(480px, 42vw, 640px) minmax(0, 1fr); } .maxek-layout .erp-module-layout.module-layout--stacked { display: flex; flex-direction: column; } .maxek-layout .module-layout.module-layout--list-only { grid-template-columns: 1fr; } .maxek-layout .worker-module-layout { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; } .maxek-layout .worker-module-layout .worker-form-card { align-self: start; } .maxek-layout .worker-form-card { padding: 16px 18px; } .maxek-layout .worker-form-card .erp-form-title { font-size: 16px; margin-bottom: 12px; } .maxek-layout .worker-form-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } .maxek-layout .worker-form-grid--compact .erp-form-actions { margin-top: 2px; } .maxek-layout .worker-form-grid--compact .erp-field input, .maxek-layout .worker-form-grid--compact .erp-field select { min-height: 40px; padding: 8px 10px; font-size: 13px; } .maxek-layout .worker-form-grid--compact .erp-field input[type="file"] { min-height: 40px; padding: 6px 10px; font-size: 12px; } .maxek-layout .worker-form-grid--compact .erp-field label { font-size: 11px; } .maxek-layout .worker-rate-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 10px; border-radius: 8px; background: rgba(20, 24, 34, 0.55); border: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-muted); line-height: 1.35; } .maxek-layout .worker-rate-summary[hidden] { display: none; } .maxek-layout .worker-rate-summary-label { flex: 0 0 100%; font-weight: 600; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .maxek-layout .worker-rate-pill strong { font-weight: 600; color: var(--text-main); margin-right: 4px; } .maxek-layout .settings-module-layout { grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.4fr); gap: 1.25rem; align-items: start; } .maxek-layout .settings-dashboard-layout .settings-actions-card, .maxek-layout .settings-dashboard-layout #settings-modules, .maxek-layout .settings-dashboard-layout .erp-table-panel:last-child { grid-column: 1 / -1; } .maxek-layout .settings-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-top: 1rem; } .maxek-layout .settings-action-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.85rem 1rem; border-radius: 8px; border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.22)); background: var(--bg-display-panel, #1e2533); color: var(--text-main, #e2e8f0); text-decoration: none; font-weight: 700; } .maxek-layout .settings-action-card i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(59, 130, 246, 0.14); color: #93c5fd; } .maxek-layout .settings-action-card:hover { border-color: rgba(59, 130, 246, 0.42); background: var(--bg-display-panel-top, #242d3d); } .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .settings-action-card { background: #ffffff; color: #1e293b; border-color: rgba(15, 23, 42, 0.1); } .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .settings-action-card:hover { background: #f8fafc; border-color: rgba(20, 184, 166, 0.35); } .maxek-layout .settings-module-layout #department-master { max-width: 360px; } .maxek-layout .settings-module-layout #department-master .erp-form-grid { grid-template-columns: 1fr; } .maxek-layout .settings-module-layout #department-master .span-2, .maxek-layout .settings-module-layout #department-master .erp-form-actions { grid-column: span 1; } /* Module / data-entry pages — navy form surfaces (dashboard keeps --bg-card-dark) */ .maxek-layout:not(.dashboard-mode) .main-window { background: #111722; } .maxek-layout:not(.dashboard-mode) .dashboard-body { background: transparent; } .maxek-layout .erp-form-card { background: linear-gradient(180deg, var(--bg-form-card-top) 0%, var(--bg-form-card) 100%); color: var(--text-main); border: 1px solid var(--border-form); border-left: 3px solid var(--form-accent); border-radius: 10px; padding: 16px 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .maxek-layout .erp-module-form-panel.erp-form-card { padding: 12px 14px 14px; } .maxek-layout .erp-data-entry-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-form); } .maxek-layout .erp-data-entry-header__title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; } .maxek-layout .erp-data-entry-header .erp-form-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; } .maxek-layout .erp-data-entry-nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 6px; border: 1px solid var(--border-form); background: rgba(15, 24, 41, 0.65); color: var(--text-muted); cursor: pointer; flex-shrink: 0; font-size: 12px; line-height: 1; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .maxek-layout .erp-data-entry-nav:hover { color: #fff; border-color: rgba(227, 6, 19, 0.45); background: rgba(227, 6, 19, 0.14); } /* Wide data-entry panels — compact tab strip, spacious form body (BOQ / DPR / GRN / PO) */ .maxek-layout .module-layout.module-layout--entry-focus { display: flex; flex-direction: column; gap: 20px; width: 100%; } .maxek-layout .module-layout.module-layout--entry-focus:not(.module-layout--list-only) .erp-data-entry-panel--wide { flex: 1 1 auto; min-height: min(72vh, 900px); } .maxek-layout .erp-data-entry-panel--wide { width: 100%; max-width: 100%; min-height: min(68vh, 840px); padding: 18px 22px 24px; display: flex; flex-direction: column; } .maxek-layout .erp-data-entry-panel--wide > form { flex: 1 1 auto; min-height: 0; } .maxek-layout .erp-data-entry-panel--wide .erp-form-grid { gap: 20px 18px; } .maxek-layout .erp-data-entry-panel--wide .erp-field { gap: 8px; } .maxek-layout .erp-data-entry-panel--wide .erp-field input:not([type="checkbox"]):not([type="radio"]), .maxek-layout .erp-data-entry-panel--wide .erp-field select, .maxek-layout .erp-data-entry-panel--wide .erp-field textarea { min-height: 42px; padding: 10px 12px; } .maxek-layout .erp-data-entry-panel--wide .erp-table-panel { margin-top: 1.25rem; } .maxek-layout .erp-data-entry-panel--wide .erp-table-scroll { max-height: none; min-height: 12rem; } .maxek-layout .erp-data-entry-panel--wide [data-dpr-measurement-panel] { margin-top: 10px; padding: 16px 18px; border-radius: 10px; background: rgba(15, 24, 41, 0.5); border: 1px solid var(--border-form); } .maxek-layout .erp-data-entry-panel--wide .boq-lines-table { min-width: 820px; } .maxek-layout .erp-data-entry-panel--wide .boq-lines-table td, .maxek-layout .erp-data-entry-panel--wide .boq-lines-table th { padding: 10px 8px; } .maxek-layout .erp-data-entry-panel--wide .boq-lines-table .boq-input { padding: 0.55rem 0.6rem; } .maxek-layout .erp-module-form-panel .erp-form-grid { gap: 16px 14px; } .maxek-layout .erp-module-form-panel .erp-form-grid .erp-form-actions { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-form); } .maxek-layout .erp-form-card--compact { padding: 12px 14px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .maxek-layout .erp-form-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--text-main); } .maxek-layout .erp-form-subtitle { margin: 0.5rem 0 0.25rem; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); } .maxek-layout .erp-hint { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--text-muted); } .maxek-layout .boq-add-item-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; background: var(--bg-dark-ops, #141822); border: 1px solid var(--border-subtle, #2e374a); border-radius: 8px; } .maxek-layout .boq-add-item-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); flex-shrink: 0; } .maxek-layout .boq-add-item-bar select, .maxek-layout .boq-add-item-bar .boq-add-item-input { min-height: 34px; padding: 4px 10px; font-size: 13px; border: 1px solid var(--border-form); border-radius: 8px; background: var(--bg-form-input); color: var(--text-main); } .maxek-layout .boq-add-item-input { flex: 1 1 260px; min-width: 200px; } .maxek-layout .boq-add-item-bar #boq-shared-desc-pick { flex: 0 0 200px; } .maxek-layout .boq-add-item-bar #boq-shared-category-filter { flex: 0 0 170px; } .maxek-layout .boq-add-item-bar .boq-add-item-qty, .maxek-layout .boq-add-item-bar .boq-add-item-rate { flex: 0 0 110px; min-width: 90px; } .maxek-layout .boq-desc-cell .boq-desc-input[readonly], .maxek-layout td > input[name="specification[]"][readonly] { background: var(--bg-dark-ops, #141822); color: var(--text-muted); cursor: default; } .maxek-layout .maker-row { padding: 0.75rem; border: 1px solid var(--border-form); border-radius: 8px; background: rgba(15, 24, 41, 0.65); color: var(--text-main); } .maxek-layout .boq-module-layout { grid-template-columns: 1fr; } .maxek-layout .dpr-module-layout { grid-template-columns: 1fr; } .maxek-layout .dpr-attach-scroll { overflow-x: auto; } .maxek-layout .dpr-attach-table { min-width: 880px; } .maxek-layout .dpr-attach-actions { white-space: nowrap; min-width: 11rem; } /* —— ERP field width standards (ERP-wide) —— */ .maxek-layout .erp-field--qty, .maxek-layout .erp-field--small-num { max-width: var(--erp-width-small-num); } .maxek-layout .erp-field--rate { max-width: var(--erp-width-rate); } .maxek-layout .erp-field--amount, .maxek-layout .erp-field--medium-num { max-width: var(--erp-width-medium-num); } .maxek-layout .erp-field--date { max-width: var(--erp-width-date); } .maxek-layout .erp-field--id { max-width: var(--erp-width-id); } .maxek-layout .erp-field--unit { max-width: var(--erp-width-unit); } .maxek-layout .erp-field--select-wide:not(.span-2) { max-width: var(--erp-width-select-wide); } .maxek-layout .erp-field--desc, .maxek-layout .erp-field--full { max-width: none; width: 100%; } .maxek-layout input.erp-input--qty, .maxek-layout select.erp-input--qty, .maxek-layout input.erp-input--rate, .maxek-layout select.erp-input--rate, .maxek-layout input.erp-input--amount, .maxek-layout input.erp-input--date, .maxek-layout input.erp-input--id, .maxek-layout select.erp-input--select-wide, .maxek-layout input.erp-input--unit { width: var(--erp-input-width, 100%); max-width: 100%; box-sizing: border-box; } .maxek-layout input.erp-input--qty, .maxek-layout select.erp-input--qty { --erp-input-width: var(--erp-width-qty); } .maxek-layout input.erp-input--rate { --erp-input-width: var(--erp-width-rate); } .maxek-layout input.erp-input--amount { --erp-input-width: var(--erp-width-amount); } .maxek-layout input.erp-input--date { --erp-input-width: var(--erp-width-date); } .maxek-layout input.erp-input--id { --erp-input-width: var(--erp-width-id); } .maxek-layout input.erp-input--unit, .maxek-layout select.erp-input--unit { --erp-input-width: var(--erp-width-unit); } .maxek-layout select.erp-input--select-wide { --erp-input-width: var(--erp-width-select-wide); } .maxek-layout .erp-input--qty, .maxek-layout .erp-input--rate, .maxek-layout .erp-input--amount, .maxek-layout .erp-field--qty input:not([type="checkbox"]):not([type="radio"]), .maxek-layout .erp-field--rate input:not([type="checkbox"]):not([type="radio"]), .maxek-layout .erp-field--amount input:not([type="checkbox"]):not([type="radio"]), .maxek-layout .erp-field--small-num input:not([type="checkbox"]):not([type="radio"]), .maxek-layout .erp-field--medium-num input:not([type="checkbox"]):not([type="radio"]), .maxek-layout .erp-table .num, .maxek-layout .erp-table td.num, .maxek-layout .erp-table th.num { text-align: right; } .maxek-layout .erp-table.erp-table-entry, .maxek-layout .erp-table[data-entry-table] { table-layout: fixed; } .maxek-layout .erp-table .erp-col-item, .maxek-layout .erp-table th.erp-col-item, .maxek-layout .erp-table td.erp-col-item { width: var(--erp-width-item); min-width: var(--erp-width-item); } .maxek-layout .erp-table .erp-col-desc, .maxek-layout .erp-table th.erp-col-desc, .maxek-layout .erp-table td.erp-col-desc { min-width: var(--erp-width-item); width: auto; } .maxek-layout .erp-table .erp-col-qty, .maxek-layout .erp-table th.erp-col-qty, .maxek-layout .erp-table td.erp-col-qty { width: var(--erp-width-qty); min-width: var(--erp-width-qty); } .maxek-layout .erp-table .erp-col-unit, .maxek-layout .erp-table th.erp-col-unit, .maxek-layout .erp-table td.erp-col-unit { width: var(--erp-width-unit); min-width: var(--erp-width-unit); } .maxek-layout .erp-table .erp-col-rate, .maxek-layout .erp-table th.erp-col-rate, .maxek-layout .erp-table td.erp-col-rate { width: var(--erp-width-rate); min-width: var(--erp-width-rate); } .maxek-layout .erp-table .erp-col-amount, .maxek-layout .erp-table th.erp-col-amount, .maxek-layout .erp-table td.erp-col-amount { width: var(--erp-width-amount); min-width: var(--erp-width-amount); } .maxek-layout .erp-table .erp-col-qty input, .maxek-layout .erp-table .erp-col-rate input, .maxek-layout .erp-table .erp-col-amount input, .maxek-layout .erp-table .erp-col-unit input, .maxek-layout .erp-table .erp-col-unit select, .maxek-layout .erp-table .erp-col-item select { width: 100%; min-width: 0; box-sizing: border-box; } .maxek-layout .erp-table .erp-col-desc textarea, .maxek-layout .erp-table .erp-col-desc input { width: 100%; min-width: 0; box-sizing: border-box; } .maxek-layout [data-format-amount], .maxek-layout [data-format-rate], .maxek-layout [data-format-qty] { font-variant-numeric: tabular-nums; } .maxek-layout .boq-lines-table { table-layout: fixed; min-width: 760px; } .maxek-layout .boq-lines-table .boq-col-no { width: 3rem; } .maxek-layout .boq-lines-table .boq-col-desc, .maxek-layout .boq-lines-table .erp-col-desc { min-width: var(--erp-width-item); width: auto; } .maxek-layout .boq-lines-table .boq-col-qty, .maxek-layout .boq-lines-table .erp-col-qty { width: var(--erp-width-qty); min-width: var(--erp-width-qty); } .maxek-layout .boq-lines-table .boq-col-rate, .maxek-layout .boq-lines-table .erp-col-rate { width: var(--erp-width-rate); min-width: var(--erp-width-rate); } .maxek-layout .boq-lines-table .boq-col-unit, .maxek-layout .boq-lines-table .erp-col-unit { width: var(--erp-width-unit); min-width: var(--erp-width-unit); } .maxek-layout .boq-lines-table .boq-col-amount, .maxek-layout .boq-lines-table .erp-col-amount { width: var(--erp-width-amount); min-width: var(--erp-width-amount); } .maxek-layout .boq-lines-table .boq-col-actions { width: 3.5rem; } .maxek-layout .boq-lines-table .boq-input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.45rem 0.5rem; font-size: 0.875rem; background: #fff; color: #111827; } .maxek-layout .boq-lines-table .boq-desc { min-height: 3.25rem; resize: vertical; line-height: 1.35; } .maxek-layout .boq-lines-table .boq-qty, .maxek-layout .boq-lines-table .boq-rate { min-width: 5.5rem; text-align: right; } .maxek-layout .boq-lines-table .boq-amount { background: #f8fafc; font-weight: 600; text-align: right; } .maxek-layout .boq-lines-table td { vertical-align: middle; } .maxek-layout .erp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .maxek-layout .erp-form-grid--compact { gap: 10px 12px; } .maxek-layout .erp-form-grid .span-2 { grid-column: span 2; } .maxek-layout .erp-form-grid .boq-header-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; } .maxek-layout .erp-form-section-head { grid-column: 1 / -1; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px dashed var(--erp-border, #cbd5e1); } .maxek-layout .erp-form-section-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; color: #0f172a; } .maxek-layout .erp-form-optional { font-weight: 500; color: #64748b; font-size: 0.875rem; } .maxek-layout .erp-form-section-help { margin: 0; font-size: 0.875rem; color: #64748b; } .maxek-layout .erp-platform-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .maxek-layout .erp-platform-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex-shrink: 0; } .maxek-layout .erp-platform-eyebrow { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; } .maxek-layout .erp-platform-title { margin: 0 0 0.35rem; font-size: 1.75rem; font-weight: 700; color: #0f172a; } .maxek-layout .erp-platform-subtitle { margin: 0; color: #475569; } .maxek-layout .erp-platform-company-erp { margin: 1.75rem 0 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e2e8f0; } .maxek-layout .erp-platform-company-erp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .maxek-layout .erp-platform-company-erp--empty { border-top: 1px solid #e2e8f0; } .maxek-layout .erp-sub-toolbar-stack { display: flex; flex-direction: column; gap: 0.35rem; } .maxek-layout .erp-sub-toolbar-section-label { margin: 0.35rem 0 0; padding: 0 1rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; } .maxek-layout .erp-form-actions { grid-column: span 2; margin-top: 4px; } .maxek-layout .erp-field { display: flex; flex-direction: column-reverse; gap: 6px; } .maxek-layout .erp-field input:not([type="checkbox"]):not([type="radio"]), .maxek-layout .erp-field select, .maxek-layout .erp-field textarea { width: 100%; border: 1px solid var(--border-form); border-radius: 8px; padding: 10px 12px; font-size: 14px; background: var(--bg-form-input); color: var(--text-main); min-height: 42px; } .maxek-layout .erp-field input::placeholder, .maxek-layout .erp-field textarea::placeholder { color: var(--text-muted); opacity: 0.75; } .maxek-layout .erp-field input[type="date"], .maxek-layout .erp-field input[type="month"], .maxek-layout .erp-field input[type="datetime-local"] { color-scheme: dark; } .maxek-layout .erp-field select option { background: var(--bg-form-card); color: var(--text-main); } .maxek-layout .coa-entry-panel .coa-options-row { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; padding-top: 4px; } .maxek-layout .coa-entry-panel .coa-check { position: static; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 14px; color: var(--text-muted); cursor: pointer; pointer-events: auto; } .maxek-layout .coa-entry-panel .coa-check input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--maxek-red); } .maxek-layout .erp-field input[type="file"] { min-height: 42px; padding: 8px 12px; } .maxek-layout .erp-field textarea { min-height: 88px; resize: vertical; } .maxek-layout .erp-field label { position: static; display: block; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--text-muted); pointer-events: none; white-space: normal; overflow-wrap: anywhere; transition: color 0.2s ease; } .maxek-layout .erp-field input:focus, .maxek-layout .erp-field select:focus, .maxek-layout .erp-field textarea:focus, .maxek-layout .erp-field input.has-value, .maxek-layout .erp-field select.has-value, .maxek-layout .erp-field textarea.has-value, .maxek-layout .erp-field input:not(:placeholder-shown), .maxek-layout .erp-field textarea:not(:placeholder-shown) { border-color: var(--maxek-red); outline: none; box-shadow: 0 0 0 1px rgba(227, 6, 19, 0.25); } .maxek-layout .erp-field:focus-within label { color: var(--maxek-red); } .maxek-layout .erp-field.erp-field-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 10px; align-items: stretch; } .maxek-layout .erp-field.erp-field-with-action label { grid-column: 1 / -1; grid-row: 1; } .maxek-layout .erp-field.erp-field-with-action select, .maxek-layout .erp-field.erp-field-with-action input:not([type="checkbox"]):not([type="radio"]) { grid-column: 1; grid-row: 2; } .maxek-layout .erp-field.erp-field-with-action .erp-inline-action { grid-column: 2; grid-row: 2; align-self: stretch; } .maxek-layout .erp-field-auto-number { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border-form); border-radius: 8px; background: var(--bg-form-input); min-height: auto; padding: 0; } .maxek-layout .erp-field-auto-number:focus-within { border-color: var(--maxek-red); box-shadow: 0 0 0 1px rgba(227, 6, 19, 0.25); } .maxek-layout .erp-field-auto-number label { position: static; display: block; margin: 0; padding: 10px 12px 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--text-muted); } .maxek-layout .erp-field-auto-number:focus-within label { color: var(--maxek-red); } .maxek-layout .erp-auto-number { display: block; width: 100%; padding: 4px 12px 8px; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--text-main); letter-spacing: 0.02em; } .maxek-layout .erp-auto-number-hint { margin: 0; padding: 0 12px 10px; font-size: 11px; line-height: 1.3; color: var(--text-muted); } .maxek-layout .erp-validation { margin-bottom: 16px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--maxek-red); background: rgba(227, 6, 19, 0.12); color: #fecaca; font-size: 14px; } .maxek-layout .erp-table-panel { background: linear-gradient(180deg, var(--bg-display-panel-top) 0%, var(--bg-display-panel) 100%); border: 1px solid var(--border-display); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16); } /* Module pages: table/list panels stay slate — forms use navy + blue accent */ .maxek-layout:not(.dashboard-mode) .erp-table-panel { background: linear-gradient(180deg, var(--bg-display-panel-top) 0%, var(--bg-display-panel) 100%); border: 1px solid var(--border-display); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16); } .maxek-layout:not(.dashboard-mode) .data-grid-container { background: linear-gradient(180deg, var(--bg-display-panel-top) 0%, var(--bg-display-panel) 100%); border: 1px solid var(--border-display); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16); } .maxek-layout .erp-table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--layout-gap); min-height: var(--layout-toolbar-height); padding: 0 var(--layout-content-padding); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; } .maxek-layout .erp-table-title { font-size: 16px; font-weight: 600; margin: 0; } .maxek-layout .erp-table-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .maxek-layout .erp-table-search { position: relative; } .maxek-layout .erp-table-search i { position: absolute; left: 12px; top: 11px; color: var(--text-muted); font-size: 13px; } .maxek-layout .erp-table-search input { background: var(--bg-dark-ops); border: 1px solid var(--border-subtle); color: var(--text-main); border-radius: 8px; padding: 8px 12px 8px 34px; min-width: 220px; font-size: 13px; } .maxek-layout .erp-table-scroll { overflow-x: auto; } .maxek-layout .erp-table-module { border-radius: 0; } .maxek-layout .erp-table-module thead th { position: sticky; top: 0; background: var(--bg-display-panel-top); z-index: 2; } .maxek-layout .erp-table-panel .erp-table-toolbar { border-bottom-color: var(--border-display); } .maxek-layout .erp-pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-muted); } .maxek-layout .erp-page-buttons { display: flex; gap: 8px; } .maxek-layout .approval-badge, .maxek-layout .status-pill { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-block; white-space: nowrap; } .maxek-layout .approval-draft { background: rgba(156, 163, 175, 0.2); color: #9ca3af; } .maxek-layout .approval-pending-checker { background: rgba(59, 130, 246, 0.2); color: #60a5fa; } .maxek-layout .approval-pending, .maxek-layout .approval-pending-approval { background: rgba(245, 158, 11, 0.2); color: #f59e0b; } .maxek-layout .approval-approved, .maxek-layout .approval-active, .maxek-layout .approval-present, .maxek-layout .approval-paid { background: rgba(16, 185, 129, 0.2); color: #10b981; } .maxek-layout .approval-rejected, .maxek-layout .approval-inactive, .maxek-layout .approval-absent { background: rgba(239, 68, 68, 0.2); color: #ef4444; } .maxek-layout .workflow-role-badge { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; } .maxek-layout .role-maker { background: rgba(99, 102, 241, 0.2); color: #818cf8; } .maxek-layout .role-checker { background: rgba(14, 165, 233, 0.2); color: #38bdf8; } .maxek-layout .role-approver { background: rgba(227, 6, 19, 0.2); color: #f87171; } .maxek-layout .approval-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; } .maxek-layout .approval-widget { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-left: 4px solid var(--maxek-red); border-radius: 8px; padding: 18px 20px; } .maxek-layout .approval-widget h4 { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; } .maxek-layout .approval-widget .count { font-size: 28px; font-weight: 700; } .maxek-layout a.approval-widget:hover { border-color: var(--maxek-red); } .maxek-layout .workflow-row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .maxek-layout .workflow-inline-form { display: inline; margin: 0; } .maxek-layout .workflow-hint { font-size: 12px; color: var(--maxek-muted, #888); font-style: italic; } .maxek-layout .dashboard-counter-section { margin-bottom: 24px; } .maxek-layout .counter-section-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .maxek-layout .counter-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .maxek-layout .approval-history-panel { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 16px; margin-top: 8px; } .maxek-layout .approval-history-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; } .maxek-layout .approval-history-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; font-size: 13px; } .maxek-layout .approval-history-grid .label { display: block; font-size: 11px; opacity: 0.7; text-transform: uppercase; } .maxek-layout .approval-history-grid .span-2 { grid-column: span 2; } .maxek-layout .rejection-notice { border-left: 3px solid var(--maxek-red); margin: 12px 0; } .maxek-layout .reject-modal[hidden] { display: none; } .maxek-layout .reject-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .maxek-layout .reject-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .maxek-layout .reject-modal-card { position: relative; background: var(--maxek-panel, #1a1a1a); border-radius: 12px; padding: 24px; min-width: 360px; max-width: 90vw; z-index: 1; } .maxek-layout .notification-unread { font-weight: 600; } .maxek-layout .transaction-tab-bar { display: flex; gap: 4px; margin-bottom: 12px; padding: 3px; border-radius: 8px; border: 1px solid var(--border-subtle); background: rgba(24, 28, 38, 0.98); border-bottom: 1px solid var(--border-subtle); } .maxek-layout .transaction-tab { background: rgba(30, 37, 51, 0.85); border: 1px solid transparent; color: #cbd5e1; padding: 5px 12px; cursor: pointer; border-radius: 6px; font-size: 12px; font-weight: 600; border-bottom: 2px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .maxek-layout .transaction-tab:hover { color: #fff; background: rgba(227, 6, 19, 0.1); border-color: rgba(227, 6, 19, 0.35); } .maxek-layout .transaction-tab.active { color: #fff; background: rgba(227, 6, 19, 0.18); border-color: rgba(227, 6, 19, 0.45); border-bottom-color: var(--maxek-red); } /* Data-entry / module tab bar — navy theme (distinct from dashboard slate) */ .maxek-layout .erp-form-card--tabs { background: linear-gradient(180deg, var(--bg-form-card-top) 0%, var(--bg-form-card) 100%); color: var(--text-main); border: 1px solid var(--border-form); border-left: 3px solid var(--form-accent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04); padding: 6px 8px; margin-bottom: 0.5rem; } .maxek-layout .erp-tab-bar { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .maxek-layout .erp-tab { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.22rem 0.55rem; border-radius: 5px; text-decoration: none; font-size: 11px; font-weight: 600; color: #cbd5e1; background: rgba(23, 32, 51, 0.92); border: 1px solid var(--border-form); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .maxek-layout .erp-tab:hover { color: #fff; background: rgba(227, 6, 19, 0.12); border-color: rgba(227, 6, 19, 0.4); } .maxek-layout .erp-tab.active { color: #fff; background: rgba(227, 6, 19, 0.2); border-color: var(--maxek-red); box-shadow: inset 0 -2px 0 var(--maxek-red); } .maxek-layout .erp-tab .erp-badge { background: var(--maxek-red); color: #fff; border-radius: 999px; padding: 0 0.4rem; font-size: 0.72rem; font-weight: 700; margin-left: 0.15rem; } .maxek-layout .erp-btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .maxek-layout .erp-form-card--tabs .erp-btn-ghost { background: rgba(23, 32, 51, 0.92); color: #cbd5e1; border-color: var(--border-form); } .maxek-layout .erp-form-card--tabs .erp-btn-ghost:hover { color: #fff; background: rgba(227, 6, 19, 0.12); border-color: rgba(227, 6, 19, 0.4); } .maxek-layout .erp-form-card--tabs .erp-btn-primary { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); } .maxek-layout .transaction-tab-panel { display: none; } .maxek-layout .transaction-tab-panel.active { display: block; } .maxek-layout .approval-timeline { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .maxek-layout .approval-timeline-item { display: flex; gap: 12px; align-items: flex-start; } .maxek-layout .approval-timeline-marker { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--maxek-red, #c0392b); flex-shrink: 0; } .maxek-layout .approval-timeline-body { flex: 1; font-size: 13px; } .maxek-layout .approval-timeline-meta { display: flex; flex-wrap: wrap; gap: 8px; opacity: 0.85; font-size: 12px; margin-top: 4px; } .maxek-layout .approval-timeline-remarks { margin: 6px 0 0; font-size: 12px; opacity: 0.9; } .maxek-layout .approval-active { background: rgba(16, 185, 129, 0.2); color: #10b981; } .maxek-layout .module-stack { display: flex; flex-direction: column; gap: 24px; } .maxek-layout .flash-messages { margin-bottom: 20px; } /* ── DASHBOARD HOME (dark ERP theme) ── */ .maxek-layout.dashboard-mode .main-window { background: var(--bg-dark-ops); overflow: hidden; } .maxek-layout.dashboard-mode .dashboard-body { padding: var(--layout-content-padding-compact) var(--layout-content-padding); flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Department hubs — scrollable workspace */ .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body { overflow-x: hidden; overflow-y: auto; padding: 1rem 1.25rem 1.75rem; scrollbar-color: #3b4458 #141822; scrollbar-width: thin; } .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body::-webkit-scrollbar, .maxek-shell-layout .shell-main-content::-webkit-scrollbar { width: 10px; height: 10px; } .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-track, .maxek-shell-layout .shell-main-content::-webkit-scrollbar-track { background: #141822; } .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-thumb, .maxek-shell-layout .shell-main-content::-webkit-scrollbar-thumb { background: #3b4458; border-radius: 999px; border: 2px solid #141822; } /* Command Centre main dashboard — one viewport (1080p), no scroll */ .maxek-layout.command-centre-mode.dashboard-mode { --cc-viewport-chrome: calc(var(--layout-toolbar-height) + var(--layout-status-height)); } .maxek-layout.command-centre-mode.dashboard-mode .dashboard-body { overflow: hidden; padding: 0.45rem 1rem 0.35rem; flex: 1 1 auto; min-height: 0; max-height: calc(100vh - var(--cc-viewport-chrome)); } .maxek-layout.command-centre-mode.dashboard-mode .dash-page.command-centre-page { flex: 1 1 auto; min-height: 0; height: 100%; max-height: 100%; display: grid; grid-template-rows: auto auto minmax(min-content, 1fr) minmax(68px, 9vh); grid-template-columns: minmax(0, 1fr); gap: 0.4rem; padding-bottom: 0; overflow: hidden; } .maxek-layout.dashboard-mode .dash-context-bar { display: flex; align-items: center; gap: var(--layout-section-gap); flex-wrap: wrap; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 14px; margin-bottom: 0; } .maxek-layout.dashboard-mode .dash-project-select { display: flex; flex-direction: column; gap: 4px; min-width: 160px; } .maxek-layout.dashboard-mode .dash-project-select label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-select { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 12px; font-size: 13px; background: var(--bg-dark-ops); color: var(--text-main); } .maxek-layout.dashboard-mode .dash-select-sm { padding: 7px 10px; font-size: 12px; } .maxek-layout.dashboard-mode .dash-progress-wrap { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 280px; } .maxek-layout.dashboard-mode .dash-progress-label { font-size: 13px; font-weight: 600; color: var(--text-main); white-space: nowrap; } .maxek-layout.dashboard-mode .dash-progress-track { flex: 1; height: 10px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; } .maxek-layout.dashboard-mode .dash-progress-fill { height: 100%; background: linear-gradient(90deg, var(--maxek-red), #f97316); border-radius: 999px; } .maxek-layout.dashboard-mode .dash-progress-pct { font-size: 13px; font-weight: 700; color: var(--maxek-red); } .maxek-layout.dashboard-mode .dash-quick-links { display: flex; gap: 14px; flex-wrap: wrap; } .maxek-layout.dashboard-mode .dash-quick-links a { font-size: 13px; color: #93c5fd; text-decoration: none; font-weight: 500; } .maxek-layout.dashboard-mode .dash-quick-links a:hover { color: #fff; text-decoration: underline; } .maxek-layout.dashboard-mode .dash-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-gap); margin-bottom: 0; } .maxek-layout.dashboard-mode .dash-kpi-card { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; display: flex; justify-content: space-between; align-items: flex-start; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .maxek-layout.dashboard-mode .dash-kpi-card-accent { border-color: rgba(227, 6, 19, 0.45); } .maxek-layout.dashboard-mode .dash-kpi-card .tile-meta p { font-size: 12px; color: var(--text-muted); margin: 0; } .maxek-layout.dashboard-mode .dash-kpi-card .tile-meta h3 { font-size: 28px; font-weight: 700; color: var(--text-main); margin: 4px 0 2px; line-height: 1; } .maxek-layout.dashboard-mode .dash-kpi-sub { font-size: 11px; color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-kpi-icon { font-size: 22px; color: rgba(227, 6, 19, 0.55); margin-top: 4px; } .maxek-layout.dashboard-mode .dash-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gap); margin-bottom: 0; } .maxek-layout.dashboard-mode .dash-chart-card { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .maxek-layout.dashboard-mode .dash-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; } .maxek-layout.dashboard-mode .dash-chart-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-main); } .maxek-layout.dashboard-mode .dash-chart-meta { display: flex; gap: 8px; flex-wrap: wrap; } .maxek-layout.dashboard-mode .dash-badge { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-main); font-weight: 600; } .maxek-layout.dashboard-mode .dash-badge-green { background: rgba(16, 185, 129, 0.2); color: #10b981; } .maxek-layout.dashboard-mode .dash-health-layout { display: flex; align-items: center; gap: 28px; } .maxek-layout.dashboard-mode .dash-donut { width: 140px; height: 140px; border-radius: 50%; background: conic-gradient( #10b981 0deg 130deg, #f59e0b 130deg 200deg, #3b82f6 200deg 300deg, rgba(255, 255, 255, 0.12) 300deg 360deg ); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .maxek-layout.dashboard-mode .dash-donut-inner { width: 88px; height: 88px; border-radius: 50%; background: var(--bg-card-dark); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--text-main); box-shadow: inset 0 0 0 1px var(--border-subtle); } .maxek-layout.dashboard-mode .dash-health-bars { flex: 1; display: flex; flex-direction: column; gap: 14px; } .maxek-layout.dashboard-mode .dash-health-item-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-main); margin-bottom: 6px; } .maxek-layout.dashboard-mode .dash-health-track { height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; } .maxek-layout.dashboard-mode .dash-health-fill { height: 100%; border-radius: 999px; } .maxek-layout.dashboard-mode .dash-bar-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 180px; padding-top: 10px; } .maxek-layout.dashboard-mode .dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 8px; } .maxek-layout.dashboard-mode .dash-bar { width: 100%; max-width: 36px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #14b8a6, #0ea5e9); min-height: 8px; } .maxek-layout.dashboard-mode .dash-bar-col:nth-child(2) .dash-bar { background: linear-gradient(180deg, #f59e0b, #ef4444); } .maxek-layout.dashboard-mode .dash-bar-col:nth-child(3) .dash-bar { background: linear-gradient(180deg, #10b981, #059669); } .maxek-layout.dashboard-mode .dash-bar-col:nth-child(4) .dash-bar { background: linear-gradient(180deg, #6366f1, #8b5cf6); } .maxek-layout.dashboard-mode .dash-bar-col:nth-child(5) .dash-bar { background: linear-gradient(180deg, #ec4899, #f43f5e); } .maxek-layout.dashboard-mode .dash-bar-col:nth-child(6) .dash-bar { background: linear-gradient(180deg, #3b82f6, #2563eb); } .maxek-layout.dashboard-mode .dash-bar-col:nth-child(7) .dash-bar { background: linear-gradient(180deg, #8b5cf6, #6366f1); } .maxek-layout.dashboard-mode .dash-bar-col span { font-size: 11px; color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-table-panel { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .maxek-layout.dashboard-mode .dash-table-panel .erp-table-toolbar { background: transparent; border-bottom: 1px solid var(--border-subtle); } .maxek-layout.dashboard-mode .dash-table-panel .erp-table-title { color: var(--text-main); } .maxek-layout.dashboard-mode .dash-workflow-table th { background: rgba(255, 255, 255, 0.03); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); } .maxek-layout.dashboard-mode .dash-workflow-table td { color: var(--text-main); border-bottom: 1px solid var(--border-subtle); } .maxek-layout.dashboard-mode .dash-workflow-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); } .maxek-layout.dashboard-mode .dash-action-link { color: #93c5fd; font-weight: 600; text-decoration: none; } .maxek-layout.dashboard-mode .dash-action-link:hover { color: #fff; text-decoration: underline; } @media (max-width: 1200px) { .maxek-layout.dashboard-mode .dash-charts-row { grid-template-columns: 1fr; } .maxek-layout.dashboard-mode .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .maxek-layout.dashboard-mode .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } .maxek-layout.dashboard-mode .dash-charts-row { grid-template-columns: 1fr; } .maxek-layout.dashboard-mode .dash-health-layout { flex-direction: column; } } @media (max-width: 600px) { .maxek-layout.dashboard-mode .dash-kpi-row { grid-template-columns: 1fr; } } /* Mini-laptop layout: use the full viewport and open navigation on demand. */ @media (max-width: 1366px), (max-height: 800px) { .maxek-layout .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; } .maxek-layout .tool-rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%); transition: transform 0.25s ease; } .maxek-layout .tool-rail.open { transform: translateX(0); } .maxek-layout .tool-rail.open .rail-close { display: inline-flex; align-items:center; justify-content:center; } .maxek-layout .top-utility-strip { padding-left:12px; padding-right:12px; } .maxek-layout .dashboard-body { padding-left:12px; padding-right:12px; } } /* Login standalone */ .maxek-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-dark-ops); padding: 24px; } .maxek-login-card { width: 100%; max-width: 420px; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 32px; } .maxek-login-card h1 { text-align: center; margin: 0 0 8px; font-size: 28px; } .maxek-login-card h1 span { color: var(--maxek-red); } .maxek-login-card .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 28px; font-size: 13px; } .maxek-login-card .erp-field { position: relative; margin-bottom: 16px; } .maxek-login-card .erp-field input { width: 100%; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 16px 12px 8px; font-size: 14px; background: var(--bg-dark-ops); color: var(--text-main); } .maxek-login-card .erp-field label { position: absolute; left: 12px; top: 14px; font-size: 13px; color: var(--text-muted); pointer-events: none; transition: all 0.2s ease; } .maxek-login-card .erp-field input:focus, .maxek-login-card .erp-field input:not(:placeholder-shown) { border-color: var(--maxek-red); outline: none; } .maxek-login-card .erp-field input:focus + label, .maxek-login-card .erp-field input:not(:placeholder-shown) + label { top: 4px; font-size: 11px; color: var(--maxek-red); } @media (max-width: 1100px) { .maxek-layout.dashboard-mode .dash-two-col { grid-template-columns: 1fr; } } /* Dashboard v2 sections */ .maxek-layout.dashboard-mode .dash-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; } .maxek-layout.dashboard-mode .dash-hero-text h2 { margin: 0 0 6px; font-size: 1.75rem; color: var(--text-main); } .maxek-layout.dashboard-mode .dash-hero-text p { margin: 0; color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-hero-actions { display: flex; gap: 10px; align-items: center; } .maxek-layout.dashboard-mode .dash-badge-count { background: rgba(255, 255, 255, 0.12); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; margin-left: 6px; } .maxek-layout.dashboard-mode .section-header { color: var(--text-main); } .maxek-layout.dashboard-mode .counter-section-title { color: var(--text-main); } .maxek-layout.dashboard-mode a.approval-widget { color: var(--text-main); text-decoration: none; } .maxek-layout.dashboard-mode a.approval-widget:hover { color: #fff; } .maxek-layout.dashboard-mode .dash-section { margin-bottom: 28px; } .maxek-layout.dashboard-mode .dash-summary-grid { grid-template-columns: repeat(5, 1fr); } .maxek-layout.dashboard-mode .dash-summary-card { text-align: center; padding: 20px 12px; } .maxek-layout.dashboard-mode .dash-summary-card i { font-size: 1.25rem; opacity: 0.7; margin-bottom: 8px; display: block; } .maxek-layout.dashboard-mode .dash-two-col { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; margin-bottom: 28px; } .maxek-layout.dashboard-mode .dash-panel { background: var(--bg-card-dark, #1e293b); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 20px; } .maxek-layout.dashboard-mode .dash-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .maxek-layout.dashboard-mode .dash-panel-head h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .maxek-layout.dashboard-mode .dash-panel-head a { font-size: 13px; color: var(--maxek-red, #ef4444); text-decoration: none; } .maxek-layout.dashboard-mode .dash-activity-feed, .maxek-layout.dashboard-mode .dash-notif-list { list-style: none; margin: 0; padding: 0; } .maxek-layout.dashboard-mode .dash-activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; } .maxek-layout.dashboard-mode .dash-activity-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .maxek-layout.dashboard-mode .dash-activity-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; } .maxek-layout.dashboard-mode .dash-activity-remarks { display: block; font-size: 12px; color: var(--text-muted); font-style: italic; margin-top: 2px; } .maxek-layout.dashboard-mode .dash-activity-empty, .maxek-layout.dashboard-mode .dash-notif-empty { color: var(--text-muted); font-size: 14px; padding: 12px 0; } .maxek-layout.dashboard-mode .dash-side-stack { display: flex; flex-direction: column; gap: 16px; } .maxek-layout.dashboard-mode .dash-notif-item { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; } .maxek-layout.dashboard-mode .dash-notif-item.unread { border-left: 3px solid var(--maxek-red, #ef4444); padding-left: 10px; } .maxek-layout.dashboard-mode .dash-notif-item span { display: block; color: var(--text-muted); margin-top: 2px; } .maxek-layout.dashboard-mode .dash-notif-item small { color: var(--text-muted); font-size: 11px; } .maxek-layout.dashboard-mode .dash-approval-links { display: flex; flex-direction: column; gap: 10px; } .maxek-layout.dashboard-mode .dash-approval-links a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: rgba(255,255,255,0.04); border-radius: 8px; text-decoration: none; color: inherit; transition: background 0.15s; } .maxek-layout.dashboard-mode .dash-approval-links a:hover { background: rgba(255,255,255,0.08); } .maxek-layout.dashboard-mode .dash-approval-links strong { font-size: 1.25rem; color: var(--maxek-red, #ef4444); } .maxek-layout.dashboard-mode .dash-counter-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .maxek-layout.dashboard-mode .dash-counter-grid { grid-template-columns: repeat(2, 1fr); } .maxek-layout.dashboard-mode .dash-kpi-compact { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .maxek-layout.dashboard-mode .dash-summary-grid { grid-template-columns: repeat(2, 1fr); } .maxek-layout.dashboard-mode .dash-counter-tabs { grid-template-columns: 1fr; } .maxek-layout.dashboard-mode .dash-kpi-compact { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px) { .maxek-layout .analytics-grid { grid-template-columns: 1fr; } .maxek-layout .module-layout { grid-template-columns: 1fr; } .maxek-layout .approval-widgets { grid-template-columns: 1fr; } } @media (max-width: 900px) { .maxek-layout .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; } .maxek-layout .tool-rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%); transition: transform 0.25s ease; } .maxek-layout .tool-rail.open { transform: translateX(0); } .maxek-layout .search-wrapper { width: 100%; max-width: 280px; } .maxek-layout .header-actions { flex-wrap: wrap; justify-content: flex-start; } .maxek-layout .profile-chip span { display: none; } .maxek-layout .header-logout-btn span { display: none; } .maxek-layout .header-logout-btn { width: var(--layout-control-height); justify-content: center; padding: 0; } .maxek-layout .top-utility-strip { height: auto; min-height: var(--layout-toolbar-height); flex-wrap: wrap; gap: var(--layout-gap); padding: 10px var(--layout-content-padding-compact); } .maxek-layout .department-subbar { height: auto; min-height: var(--layout-toolbar-height); align-items: flex-start; flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 10px var(--layout-content-padding-compact); } .maxek-layout .department-subbar-scroll { width: 100%; height: auto; } .maxek-layout .tool-rail.open .rail-close { display: inline-flex; align-items: center; justify-content: center; } .maxek-layout .header-datetime { font-size: 11px; padding: 5px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .maxek-layout .dashboard-body { padding: var(--layout-content-padding-compact); } .maxek-layout.dashboard-mode .dashboard-body { padding: var(--layout-content-padding-compact); } .maxek-layout .erp-form-grid { grid-template-columns: 1fr; } .maxek-layout .erp-form-grid .span-2, .maxek-layout .erp-form-actions { grid-column: span 1; } .maxek-layout .worker-module-layout { grid-template-columns: 1fr; } .maxek-layout .worker-form-grid--compact .span-2, .maxek-layout .worker-form-grid .span-2 { grid-column: span 1; } .maxek-layout .erp-field.erp-field-with-action { grid-template-columns: 1fr; } .maxek-layout .erp-field.erp-field-with-action .erp-inline-action { grid-column: 1; grid-row: 3; } .maxek-layout .erp-inline-action { min-height: var(--layout-control-height); justify-content: center; } .maxek-layout .employee-detail-layout { grid-template-columns: 1fr; } .maxek-layout .employee-detail-photo { width: 96px; height: 96px; } .maxek-layout .project-hub-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* DPR measurement entry */ .maxek-layout .dpr-dimension-group { margin-bottom: 1.15rem; padding: 12px 14px; border-radius: 8px; background: rgba(15, 24, 41, 0.35); border: 1px solid var(--border-form); } .maxek-layout .dpr-dimension-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; } .maxek-layout .dpr-reading-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.55rem; } .maxek-layout .dpr-reading-row input { flex: 1; min-width: 0; } .maxek-layout .dpr-steel-line { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--erp-border, #e2e8f0); } /* DPR BOQ row — compact number, wide description */ .maxek-layout .dpr-boq-primary-grid { display: grid; grid-template-columns: minmax(120px, 0.55fr) minmax(240px, 2fr) minmax(180px, 0.75fr); gap: 0.75rem 1rem; align-items: end; } .maxek-layout .erp-field--boq-number { max-width: 160px; } .maxek-layout .erp-field--boq-desc { min-width: 0; } .maxek-layout .boq-desc-cell { min-width: 220px; display: flex; flex-direction: column; gap: 0.35rem; } .maxek-layout .boq-desc-cell .boq-desc-pick { width: 100%; font-size: 0.8rem; } .maxek-layout .boq-desc-cell .boq-desc-input { width: 100%; } .maxek-layout #boq-items-grid .boq-unit-manual { width: 100%; font-size: 0.8rem; } .maxek-layout .revised-estimate-module .re-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .maxek-layout .revised-estimate-module .re-tab-btn.is-active { background: var(--accent, #c41e3a); color: #fff; } .maxek-layout .revised-estimate-lines-table input[readonly] { background: rgba(255, 255, 255, 0.04); } .maxek-layout .re-line-new td.re-orig-col { color: var(--text-muted, #94a3b8); } .maxek-layout .erp-field--billing { max-width: 280px; } .maxek-layout .dpr-open-saved-card .erp-form-title { margin-bottom: 0.35rem; } .maxek-layout .module-layout--entry-form-open [data-hide-on-entry-open] { display: none !important; } .maxek-layout .dpr-boq-bulk-action .dpr-boq-bulk-label { font-size: 0.72rem; color: var(--text-muted, #94a3b8); margin-top: 0.25rem; } .maxek-layout .erp-field--desc { min-width: 0; } .maxek-layout .dpr-manpower-row--sized { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 0.65rem 0.75rem; } .maxek-layout .dpr-manpower-row--sized .erp-field--mp-staff, .maxek-layout .dpr-manpower-row--sized .erp-field--mp-trade, .maxek-layout .dpr-manpower-row--sized .erp-field--mp-qty, .maxek-layout .dpr-manpower-row--sized .erp-field--mp-hours, .maxek-layout .dpr-manpower-row--sized .erp-field--mp-remarks { min-width: 0; } .maxek-layout .dpr-upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1rem; } .maxek-layout .dpr-upload-field input[type="file"] { width: 100%; font-size: 0.82rem; } @media (max-width: 960px) { .maxek-layout .dpr-boq-primary-grid { grid-template-columns: 1fr 1fr; } .maxek-layout .dpr-boq-bulk-action { grid-column: 1 / -1; } .maxek-layout .dpr-manpower-row--sized { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maxek-layout .dpr-upload-grid { grid-template-columns: 1fr; } } /* ── Dashboard single-screen tabs (Overview / Operations) ── */ .maxek-layout.dashboard-mode .header-datetime { color: var(--text-muted); background: rgba(20, 24, 34, 0.55); border-color: var(--border-subtle); } .maxek-layout.dashboard-mode .dash-header-zone { display: flex; flex-direction: column; gap: var(--layout-gap); flex-shrink: 0; } .maxek-layout.dashboard-mode .dash-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--layout-gap); overflow: hidden; } .maxek-layout.dashboard-mode .dash-top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--layout-gap); flex-wrap: wrap; flex-shrink: 0; min-height: var(--layout-control-height); } .maxek-layout.dashboard-mode .dash-hero-text { min-width: 0; flex: 1; } .maxek-layout.dashboard-mode .dash-top-row h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .maxek-layout.dashboard-mode .dash-top-row p { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); line-height: 1.35; } .maxek-layout.dashboard-mode .dash-top-row-minimal { align-items: center; } .maxek-layout.dashboard-mode .dash-tab-bar-inline { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .maxek-layout.dashboard-mode .dash-settings-btn { flex-shrink: 0; } .maxek-layout.dashboard-mode .dash-context-compact { margin-bottom: 0; padding: 10px 14px; flex-shrink: 0; } .maxek-layout.dashboard-mode .dash-tab-bar { display: flex; gap: 6px; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); min-height: calc(var(--layout-control-height) + 2px); align-items: flex-end; } .maxek-layout.dashboard-mode .dash-tab { appearance: none; border: none; background: transparent; color: var(--text-muted); font-size: var(--layout-font-toolbar); font-weight: 700; padding: 8px 14px 6px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; min-height: var(--layout-control-height); } .maxek-layout.dashboard-mode .dash-tab:hover { color: var(--text-main); background: rgba(227, 6, 19, 0.08); } .maxek-layout.dashboard-mode .dash-tab.active { color: var(--text-main); border-bottom-color: var(--maxek-red); background: rgba(227, 6, 19, 0.1); } .maxek-layout.dashboard-mode .dash-tab-panels { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .maxek-layout.dashboard-mode .dash-tab-panel { display: none; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; flex-direction: column; gap: var(--layout-gap); padding-right: 2px; scrollbar-width: thin; } .maxek-layout.dashboard-mode .dash-tab-panel.active { display: flex; } .maxek-layout.dashboard-mode .dash-kpi-compact { grid-template-columns: repeat(4, 1fr); gap: var(--layout-gap); margin-bottom: 0; } .maxek-layout.dashboard-mode .dash-kpi-compact .dash-kpi-card { padding: 10px 12px; border-radius: 10px; } .maxek-layout.dashboard-mode .dash-kpi-compact .tile-meta h3 { font-size: 20px; } .maxek-layout.dashboard-mode .dash-charts-compact { gap: var(--layout-gap); margin-bottom: 0; } .maxek-layout.dashboard-mode .dash-charts-compact .dash-chart-card { padding: 12px 14px; border-radius: 10px; } .maxek-layout.dashboard-mode .dash-bar-chart-compact { height: 96px; } .maxek-layout.dashboard-mode .dash-donut-compact { width: 88px; height: 88px; } .maxek-layout.dashboard-mode .dash-donut-compact .dash-donut-inner { width: 54px; height: 54px; font-size: 18px; } .maxek-layout.dashboard-mode .dash-health-compact { gap: 14px; } .maxek-layout.dashboard-mode .dash-summary-compact { grid-template-columns: repeat(5, 1fr); gap: var(--layout-gap); margin-bottom: 0; } .maxek-layout.dashboard-mode .dash-summary-compact .approval-widget, .maxek-layout.dashboard-mode .dash-summary-compact .dash-summary-card { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); color: var(--text-main); text-decoration: none; } .maxek-layout.dashboard-mode .dash-summary-compact .approval-widget h4 { color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-summary-compact .approval-widget .count { color: var(--text-main); } .maxek-layout.dashboard-mode .dash-summary-compact .dash-summary-card { padding: 10px 8px; } .maxek-layout.dashboard-mode .dash-summary-compact .count { font-size: 22px; } .maxek-layout.dashboard-mode .dash-ops-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: minmax(120px, 1fr) auto; gap: var(--layout-gap); min-height: min-content; flex: 1; } .maxek-layout.dashboard-mode .dash-ops-grid > .dash-panel { min-height: 0; } .maxek-layout.dashboard-mode .dash-ops-grid > .dash-table-compact { grid-column: 1 / -1; } .maxek-layout.dashboard-mode .dash-panel-light { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); color: var(--text-main); padding: 12px 14px; border-radius: 10px; box-shadow: none; display: flex; flex-direction: column; min-height: 0; } .maxek-layout.dashboard-mode .dash-panel-light .dash-panel-head h3 { color: var(--text-main); font-size: 0.92rem; } .maxek-layout.dashboard-mode .dash-panel-light .dash-panel-head a { color: #f87171; } .maxek-layout.dashboard-mode .dash-panel-light .dash-activity-item { border-bottom-color: var(--border-subtle); padding: 8px 0; font-size: 13px; color: var(--text-main); } .maxek-layout.dashboard-mode .dash-panel-light .dash-activity-meta, .maxek-layout.dashboard-mode .dash-panel-light .dash-notif-item span, .maxek-layout.dashboard-mode .dash-panel-light .dash-notif-item small, .maxek-layout.dashboard-mode .dash-panel-light .dash-activity-empty, .maxek-layout.dashboard-mode .dash-panel-light .dash-notif-empty { color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-panel-light .dash-activity-icon { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-panel-light .dash-notif-item { border-bottom-color: var(--border-subtle); padding: 8px 0; } .maxek-layout.dashboard-mode .dash-panel-light .dash-notif-item.unread { border-left-color: var(--maxek-red); } .maxek-layout.dashboard-mode .dash-panel-light .dash-approval-links a { background: rgba(255, 255, 255, 0.04); color: var(--text-main); } .maxek-layout.dashboard-mode .dash-panel-light .dash-approval-links a:hover { background: rgba(255, 255, 255, 0.08); } .maxek-layout.dashboard-mode .dash-panel-light .dash-approval-links strong { color: var(--maxek-red); } .maxek-layout.dashboard-mode .dash-scroll-region { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; } .maxek-layout.dashboard-mode .dash-scroll-region-sm { max-height: 140px; } .maxek-layout.dashboard-mode .dash-table-compact { padding: 0; } .maxek-layout.dashboard-mode .dash-table-compact .erp-table-toolbar { min-height: auto; padding: 10px 14px; } .maxek-layout.dashboard-mode .dash-table-compact .erp-table th, .maxek-layout.dashboard-mode .dash-table-compact .erp-table td { padding: 8px 10px; font-size: 12px; } .maxek-layout.dashboard-mode .dash-table-compact .erp-table-scroll { max-height: none; overflow: visible; } .maxek-layout.dashboard-mode .section-header { font-size: 15px; margin-bottom: 8px; color: var(--text-main); } .maxek-layout .dash-display-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; } .maxek-layout .dash-display-toggles label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); line-height: 1.3; } /* User permission matrix (Settings > Users) */ .maxek-layout .perm-super-admin-banner { margin-bottom: 0.75rem; } .maxek-layout .perm-toolbar { margin-bottom: 0.5rem; } .maxek-layout .perm-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0.75rem; align-items: center; } .maxek-layout .perm-step { margin-top: 1rem; } .maxek-layout .perm-step-title { margin: 0 0 0.5rem; font-size: 13px; font-weight: 600; color: var(--text-main); } .maxek-layout .perm-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; } .maxek-layout .perm-dept-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #3b4658; border-radius: 8px; background: #182131; color: #e2e8f0; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; } .maxek-layout .perm-dept-chip input { flex-shrink: 0; display: inline-block !important; appearance: auto !important; width: 17px; height: 17px; accent-color: var(--maxek-red); } .maxek-layout .perm-dept-chip:hover { border-color: #64748b; background: #202b3d; } .maxek-layout .perm-dept-chip:has(input:checked) { border-color: #3b82f6; background: #243b64; color: #ffffff; } .maxek-layout .perm-matrix-scroll { overflow-x: auto; border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 8px; } .maxek-layout .perm-matrix-table { min-width: 760px; margin: 0; } .maxek-layout .perm-matrix-table th, .maxek-layout .perm-matrix-table td { vertical-align: middle; font-size: 12px; } .maxek-layout .perm-col-module { min-width: 180px; font-weight: 500; } .maxek-layout .perm-col-dept { min-width: 120px; color: var(--text-muted); } .maxek-layout .perm-col-action { width: 52px; text-align: center; } .maxek-layout .perm-action-check { display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; } .maxek-layout .perm-department-panels { display:grid; gap:14px; } .maxek-layout .perm-department-panel { overflow:hidden; border:1px solid var(--border-subtle); border-radius:10px; background:#131d2d; color:#e2e8f0; } .maxek-layout .perm-department-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border-subtle); background:#1a2638; } .maxek-layout .perm-department-actions { display:flex; gap:7px; flex-wrap:wrap; } .maxek-layout .perm-subtab-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:8px; padding:12px; } .maxek-layout .perm-subtab-item { padding:10px 12px; border:1px solid var(--border-subtle); border-radius:8px; background:#182335; color:#e2e8f0; } .maxek-layout .perm-subtab-access { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; } .maxek-layout .perm-subtab-access input { display:inline-block!important; appearance:auto!important; width:18px; height:18px; accent-color:var(--maxek-red); } .maxek-layout .perm-subtab-advanced { margin-top:8px; } .maxek-layout .perm-subtab-actions-title { color:var(--text-muted); font-size:12px; font-weight:700; } .maxek-layout .perm-action-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:7px; margin-top:9px; } .maxek-layout .perm-action-grid .perm-action-check { justify-content:flex-start; gap:6px; font-size:12px; } .maxek-layout .perm-action-grid input[type="checkbox"] { display:inline-block!important; appearance:auto!important; width:15px; height:15px; accent-color:var(--maxek-red); } .maxek-layout .cp-library-match-status { padding: 10px 12px; border: 1px solid #334155; border-left: 3px solid #3b82f6; border-radius: 8px; background: #131d2d; color: #cbd5e1; font-size: 13px; line-height: 1.45; } .maxek-layout .cp-library-match-status.is-match { border-left-color: #22c55e; background: rgba(34, 197, 94, .08); color: #dcfce7; } .maxek-layout .cp-library-match-status.is-missing { border-left-color: #f59e0b; background: rgba(245, 158, 11, .08); color: #fef3c7; } @media (max-width:760px) { .maxek-layout .perm-department-header { align-items:flex-start; flex-direction:column; } .maxek-layout .perm-subtab-list { grid-template-columns:1fr; } } .maxek-layout .dash-display-hint { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); } .maxek-layout .dash-display-modal-card { max-width: 520px; } .maxek-layout .dash-display-form .erp-form-actions { margin-top: 16px; } @media (max-width: 1200px) { .maxek-layout.dashboard-mode .dash-summary-compact { grid-template-columns: repeat(3, 1fr); } .maxek-layout.dashboard-mode .dash-ops-grid { grid-template-columns: 1fr; grid-template-rows: auto; overflow-y: auto; } .maxek-layout.dashboard-mode .dash-tab-panel.active { overflow-y: auto; } } @media (max-width: 900px) { .maxek-layout.dashboard-mode .dash-kpi-compact { grid-template-columns: repeat(2, 1fr); } .maxek-layout.dashboard-mode .dash-charts-compact { grid-template-columns: 1fr; } .maxek-layout.dashboard-mode .dash-summary-compact { grid-template-columns: repeat(2, 1fr); } } /* Approvals — compact list & detail */ .approval-tab-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; } .approvals-compact-table td, .approvals-compact-table th { white-space: nowrap; } .approval-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .approval-detail-ref { margin: 0.25rem 0 0; color: var(--erp-muted, #64748b); } .approval-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem 1.25rem; margin-bottom: 1rem; } .approval-detail-grid .detail-label { display: block; font-size: 0.75rem; color: var(--erp-muted, #64748b); margin-bottom: 0.15rem; } .approval-detail-actions { flex-wrap: wrap; gap: 0.5rem; } .dash-workflow-summary { padding: 0.75rem 1rem; margin: 0; font-size: 0.9rem; } .maxek-layout .erp-guarantee-row { margin-bottom: 12px; padding: 12px; border: 1px solid var(--border-form); border-radius: 8px; background: rgba(15, 24, 41, 0.45); } .maxek-layout .erp-project-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 12px 16px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--border-form); border-radius: 8px; background: rgba(15, 24, 41, 0.35); } .maxek-layout .erp-project-detail-grid .span-2 { grid-column: 1 / -1; } .maxek-layout .erp-project-hidden-date { display: none !important; } .maxek-layout .erp-row-badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-primary, #6ea8fe); padding: 4px 10px; border-radius: 999px; background: rgba(110, 168, 254, 0.12); } .maxek-layout .erp-treasury-section { margin-top: 4px; background: rgba(15, 24, 41, 0.55); } .maxek-layout .erp-bill-submission-panel { margin-bottom: 8px; } .maxek-layout .erp-bill-submission-row { margin-bottom: 12px; padding: 12px; border: 1px solid var(--border-form); border-radius: 8px; background: rgba(15, 24, 41, 0.35); } .maxek-layout .erp-pending-bill-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: rgba(255, 255, 255, 0.03); } .maxek-layout .erp-pending-bill-summary span { display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .maxek-layout .erp-pending-bill-summary strong { font-size: 16px; color: var(--text-main); } /* ── TOP HORIZONTAL NAV (MAXEK UI Standard) ── */ .maxek-topnav-layout .maxek-toolbar-stack { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } .maxek-top-nav { background: var(--maxek-charcoal); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; overflow: visible; } .maxek-top-nav--horizontal { display: block; position: relative; z-index: 50; overflow: visible; } .maxek-top-nav--drawer { display: none; flex: 1; overflow: auto; background: transparent; border: 0; } .maxek-top-nav-list { list-style: none; margin: 0; padding: 0 8px; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; overflow-y: visible; flex-wrap: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .maxek-top-nav--drawer .maxek-top-nav-list { flex-direction: column; padding: 8px 12px 16px; overflow-x: hidden; } .maxek-top-nav-item { position: relative; flex-shrink: 0; } .maxek-top-nav--horizontal .maxek-top-nav-item.has-children:hover, .maxek-top-nav--horizontal .maxek-top-nav-item.has-children:focus-within, .maxek-top-nav--horizontal .maxek-top-nav-item.has-children.is-open { z-index: 80; } .maxek-top-nav--drawer .maxek-top-nav-item { width: 100%; } .maxek-top-nav-link, .maxek-top-nav-trigger { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--text-main); font-size: var(--layout-font-toolbar); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; } .maxek-top-nav--drawer .maxek-top-nav-link, .maxek-top-nav--drawer .maxek-top-nav-trigger { width: 100%; height: auto; min-height: 42px; border-radius: 6px; justify-content: flex-start; } .maxek-top-nav-link i, .maxek-top-nav-trigger i:first-child { color: var(--maxek-red); font-size: 14px; } .maxek-top-nav-link:hover, .maxek-top-nav-trigger:hover, .maxek-top-nav-item.is-active > .maxek-top-nav-link, .maxek-top-nav-item.is-active > .maxek-top-nav-trigger, .maxek-top-nav-link.active, .maxek-top-nav-trigger.active { background: rgba(227, 6, 19, 0.15); color: #fff; } .maxek-top-nav-chevron { font-size: 10px; margin-left: 2px; opacity: 0.7; transition: transform 0.2s ease; } .maxek-top-nav-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; max-width: 320px; max-height: 70vh; overflow: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 0 8px 8px 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); z-index: 200; padding: 6px 0; } .maxek-top-nav--drawer .maxek-top-nav-dropdown { position: static; display: none; min-width: 0; max-width: none; max-height: none; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 6px; box-shadow: none; margin: 4px 0 8px 12px; padding: 4px 0; } .maxek-top-nav--horizontal .maxek-top-nav-dropdown { position: fixed; top: var(--maxek-dropdown-top, auto); left: var(--maxek-dropdown-left, auto); right: auto; bottom: auto; margin-top: 0; } .maxek-top-nav-item.has-children:hover > .maxek-top-nav-dropdown, .maxek-top-nav-item.has-children:focus-within > .maxek-top-nav-dropdown, .maxek-top-nav-item.has-children.is-open > .maxek-top-nav-dropdown { display: block; } .maxek-top-nav-item.has-children:hover .maxek-top-nav-chevron, .maxek-top-nav-item.has-children:focus-within .maxek-top-nav-chevron, .maxek-top-nav-item.has-children.is-open .maxek-top-nav-chevron { transform: rotate(180deg); } .maxek-top-nav-dropdown-link { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: #1f2937; font-size: 13px; text-decoration: none; transition: background-color 0.15s ease; } .maxek-top-nav--drawer .maxek-top-nav-dropdown-link { color: var(--text-main); } .maxek-top-nav-dropdown-link:hover, .maxek-top-nav-dropdown-link.active { background: rgba(227, 6, 19, 0.08); color: var(--maxek-red); } .maxek-top-nav-dropdown-link i { width: 16px; text-align: center; color: var(--maxek-red); font-size: 12px; } .maxek-mobile-nav { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); z-index: 100; background: var(--maxek-charcoal); border-right: 1px solid var(--border-subtle); flex-direction: column; transform: translateX(-100%); transition: transform 0.25s ease; } .maxek-mobile-nav.open { display: flex; transform: translateX(0); } .maxek-mobile-nav.open .maxek-top-nav--drawer { display: block; } .maxek-mobile-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); } .maxek-mobile-nav-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); } .maxek-topnav-layout .sidebar-toggle { display: none; } /* Module toolbar macro */ .erp-module-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 16px; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 10px; } .erp-module-toolbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; flex: 1; } .erp-module-toolbar-title { margin: 0; font-size: 16px; font-weight: 700; white-space: nowrap; } .erp-module-toolbar-search { position: relative; min-width: 200px; flex: 1; max-width: 360px; } .erp-module-toolbar-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; } .erp-module-toolbar-search input { width: 100%; height: var(--layout-control-height); padding: 0 12px 0 34px; border-radius: var(--layout-control-radius); border: 1px solid var(--border-subtle); background: var(--bg-dark-ops); color: var(--text-main); font-size: var(--layout-font-toolbar); } .erp-module-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .erp-module-toolbar--standard .erp-module-toolbar-actions { flex: 1 1 100%; } /* Dashboard live tables & quick entry */ .maxek-layout.dashboard-mode .dash-page-simple { overflow: auto; } .maxek-layout.dashboard-mode .dash-welcome-row { display: flex; align-items: center; justify-content: space-between; gap: var(--layout-gap); flex-wrap: wrap; margin-bottom: 12px; } .maxek-layout.dashboard-mode .dash-welcome-row h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-main); } .maxek-layout.dashboard-mode .dash-welcome-row p { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-ref-kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .maxek-layout.dashboard-mode .dash-ref-kpi-card { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 88px; } .maxek-layout.dashboard-mode .dash-ref-kpi-card p { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); } .maxek-layout.dashboard-mode .dash-ref-kpi-card h3 { margin: 0; font-size: 22px; line-height: 1.1; } .maxek-layout.dashboard-mode .dash-ref-kpi-card .dash-ref-kpi-link { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--maxek-red); text-decoration: none; } .maxek-layout.dashboard-mode .dash-ref-kpi-icon { font-size: 22px; opacity: 0.35; color: var(--maxek-red); } .maxek-layout.dashboard-mode .dash-quick-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 10px; } .maxek-layout.dashboard-mode .dash-quick-entry-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-right: 4px; } .maxek-layout.dashboard-mode .dash-quick-entry .erp-btn { font-size: 12px; } .maxek-layout.dashboard-mode .dash-live-section { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: auto; } .maxek-layout.dashboard-mode .dash-live-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .maxek-layout.dashboard-mode .dash-live-panel-full { min-height: 200px; } .maxek-layout.dashboard-mode .dash-live-panel { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-height: 220px; } .maxek-layout.dashboard-mode .dash-live-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); } .maxek-layout.dashboard-mode .dash-live-panel-head h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; } .maxek-layout.dashboard-mode .dash-live-panel .erp-table-scroll { flex: 1; overflow: auto; } .maxek-layout.dashboard-mode .dash-live-panel .erp-table { font-size: 12px; } .maxek-layout.dashboard-mode .dash-live-panel .erp-table th, .maxek-layout.dashboard-mode .dash-live-panel .erp-table td { padding: 8px 10px; } @media (max-width: 1400px) { .maxek-layout.dashboard-mode .dash-ref-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1100px) { .maxek-layout.dashboard-mode .dash-ref-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maxek-layout.dashboard-mode .dash-live-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .maxek-topnav-layout .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; } .maxek-top-nav--horizontal { display: none; } .maxek-layout .search-wrapper { width: 100%; max-width: 280px; } } @media (max-width: 640px) { .maxek-layout.dashboard-mode .dash-ref-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Department selection dashboard (cards only) */ .maxek-layout.dept-selection-mode .dept-selection-page { display: flex; flex-direction: column; gap: 1.25rem; min-height: calc(100vh - 120px); padding: 0.5rem 0 2rem; } .maxek-layout .dept-selection-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-subtle); } .maxek-layout .dept-selection-header h2 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; } .maxek-layout .dept-selection-header p { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--text-muted); } .maxek-layout .dept-selection-user { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--text-main); } .maxek-layout .dept-selection-user i { font-size: 1.25rem; color: var(--maxek-red); } .maxek-layout .dept-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; flex: 1; align-content: start; } .maxek-layout .dept-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 120px; padding: 1.25rem 1rem; text-decoration: none; color: var(--text-main); background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 10px; transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .maxek-layout .dept-card:hover { border-color: var(--maxek-red); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .maxek-layout .dept-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: rgba(227, 6, 19, 0.12); color: var(--maxek-red); font-size: 1.35rem; } .maxek-layout .dept-card-label { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; } /* Department full-screen workspace */ .maxek-layout.dept-workspace-mode .main-window { background: #111722; } .maxek-layout.dept-workspace-mode .dashboard-body { padding: 1rem 1.25rem 1.5rem; } .maxek-layout .dept-workspace-main--full { width: 100%; max-width: 100%; } .maxek-layout .dept-module-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .maxek-layout .dept-module-tile { min-height: 56px; padding: 12px 14px; } .maxek-layout .dept-workspace { --dept-accent: #e30613; display: flex; flex-direction: column; gap: 1rem; min-height: calc(100vh - 120px); } .maxek-layout .dept-workspace-header { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; padding: 0.25rem 0 0.85rem; border-bottom: 1px solid var(--border-subtle); } .maxek-layout .dept-workspace-back { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.45rem 0.85rem; border-radius: 8px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.03); color: var(--text-muted); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .maxek-layout .dept-workspace-back:hover { color: var(--text-main); border-color: color-mix(in srgb, var(--dept-accent) 45%, var(--border-subtle)); background: color-mix(in srgb, var(--dept-accent) 10%, transparent); } .maxek-layout .dept-workspace-header-main { display: flex; align-items: center; gap: 0.85rem; } .maxek-layout .dept-workspace-header-text { min-width: 0; } .maxek-layout .dept-workspace-eyebrow { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--dept-accent) 70%, var(--text-muted)); } .maxek-layout .dept-workspace-header h1 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .maxek-layout .dept-workspace-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--dept-accent) 18%, transparent); color: var(--dept-accent); border: 1px solid color-mix(in srgb, var(--dept-accent) 28%, transparent); flex-shrink: 0; } .maxek-layout .dept-workspace-summary-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); } .maxek-layout .dept-workspace-stats { margin-bottom: 0.25rem; } .maxek-layout .dept-stat-card { border-color: color-mix(in srgb, var(--dept-accent) 18%, var(--border-subtle)); } .maxek-layout .dept-stat-card strong { color: var(--dept-accent); } .maxek-layout .dept-stat-warn { color: #f59e0b !important; } .maxek-layout .dept-workspace-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.35rem 0 0.65rem; border-bottom: 1px solid var(--border-subtle); } .maxek-layout .dept-workspace-tab { padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-card-dark); color: var(--text-main); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .maxek-layout .dept-workspace-tab:hover { border-color: color-mix(in srgb, var(--dept-accent) 50%, var(--border-subtle)); background: color-mix(in srgb, var(--dept-accent) 12%, var(--bg-card-dark)); color: var(--text-main); } .maxek-layout .dept-menu-toggle { display: none; align-items: center; gap: 0.55rem; width: 100%; padding: 0.65rem 0.85rem; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-card-dark); color: var(--text-main); font-size: 0.88rem; font-weight: 600; cursor: pointer; } .maxek-layout .dept-menu-toggle-chevron { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); transition: transform 0.2s ease; } .maxek-layout .dept-menu-toggle[aria-expanded="true"] .dept-menu-toggle-chevron { transform: rotate(180deg); } .maxek-layout .dept-workspace-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 1.25rem; flex: 1; align-items: start; } .maxek-layout .dept-workspace-sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 0.85rem 0.65rem; position: sticky; top: 0.5rem; } .maxek-layout .dept-workspace-sidebar-label { margin: 0 0 0.55rem; padding: 0 0.55rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .maxek-layout .dept-workspace-header--compact { border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.75rem; } .maxek-layout .dept-workspace-summary-inline { margin: 0.35rem 0 0; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); } .maxek-layout .dept-workspace-sidebar-head { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-subtle); } .maxek-layout .dept-workspace-back--sidebar { width: 100%; justify-content: center; padding: 0.55rem 0.75rem; font-size: 0.78rem; font-weight: 700; color: var(--text-main); background: color-mix(in srgb, var(--dept-accent) 8%, rgba(255, 255, 255, 0.03)); border-color: color-mix(in srgb, var(--dept-accent) 35%, var(--border-subtle)); } .maxek-layout .dept-workspace-back--sidebar:hover { color: #fff; background: color-mix(in srgb, var(--dept-accent) 55%, transparent); border-color: var(--dept-accent); } .maxek-layout .dept-workspace-sidebar-dept { display: flex; align-items: center; gap: 0.55rem; padding: 0 0.35rem; } .maxek-layout .dept-workspace-sidebar-dept-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--dept-accent) 16%, transparent); color: var(--dept-accent); flex-shrink: 0; } .maxek-layout .dept-workspace-sidebar-dept-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.25; } .maxek-layout .dept-workspace-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .maxek-layout .dept-tool-ticket, .maxek-layout .erp-office-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 8px 6px; border-radius: 6px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.025); color: var(--text-main); text-decoration: none; text-align: center; transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .maxek-layout .dept-tool-ticket:hover, .maxek-layout .erp-office-tab:hover { border-color: color-mix(in srgb, var(--dept-accent) 45%, var(--border-subtle)); background: color-mix(in srgb, var(--dept-accent) 10%, rgba(255, 255, 255, 0.03)); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .maxek-layout .dept-tool-ticket.is-active, .maxek-layout .erp-office-tab.is-active { border-color: color-mix(in srgb, var(--dept-accent) 60%, var(--border-subtle)); background: color-mix(in srgb, var(--dept-accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dept-accent) 25%, transparent); } .maxek-layout .dept-tool-ticket-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; background: color-mix(in srgb, var(--dept-accent) 14%, transparent); color: var(--dept-accent); } .maxek-layout .dept-tool-ticket-icon i { font-size: 0.72rem; } .maxek-layout .dept-tool-ticket-label { font-size: 0.68rem; font-weight: 650; line-height: 1.2; letter-spacing: 0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .maxek-layout .dept-tool-ticket-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--dept-accent); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; } .maxek-layout .dept-workspace-empty { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 2rem; border: 1px dashed var(--border-subtle); border-radius: 12px; color: var(--text-muted); font-size: 0.9rem; } .maxek-layout .dept-workspace-main--overview { padding-top: 0.15rem; } .maxek-layout.dept-workspace-mode .maxek-toolbar-stack .maxek-top-nav, .maxek-layout.command-centre-mode .maxek-toolbar-stack .maxek-top-nav { display: none !important; } .maxek-layout .dept-workspace-menu { display: flex; flex-direction: column; gap: 0.3rem; } .maxek-layout .dept-workspace-menu-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.62rem 0.65rem; border-radius: 8px; border: 1px solid transparent; color: var(--text-main); text-decoration: none; font-size: 0.86rem; font-weight: 550; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .maxek-layout .dept-workspace-menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: color-mix(in srgb, var(--dept-accent) 14%, transparent); color: var(--dept-accent); flex-shrink: 0; } .maxek-layout .dept-workspace-menu-icon i { font-size: 0.82rem; } .maxek-layout .dept-workspace-menu-label { flex: 1; min-width: 0; } .maxek-layout .dept-workspace-menu-chevron { font-size: 0.68rem; color: var(--text-muted); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; } .maxek-layout .dept-workspace-menu-link:hover { background: color-mix(in srgb, var(--dept-accent) 12%, transparent); border-color: color-mix(in srgb, var(--dept-accent) 22%, transparent); } .maxek-layout .dept-workspace-menu-link:hover .dept-workspace-menu-chevron { opacity: 1; transform: translateX(0); } .maxek-layout .dept-workspace-main { min-width: 0; } .maxek-layout .dept-module-tile .erp-module-tile-icon { background: color-mix(in srgb, var(--dept-accent) 14%, transparent); color: var(--dept-accent); } .maxek-layout .dept-module-tile:hover { border-color: color-mix(in srgb, var(--dept-accent) 35%, var(--border-subtle)); } @media (max-width: 900px) { .maxek-layout .dept-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maxek-layout .dept-menu-toggle { display: flex; } .maxek-layout .dept-workspace-layout { grid-template-columns: 1fr; gap: 0.75rem; } .maxek-layout .dept-workspace-sidebar { display: none; position: static; } .maxek-layout .dept-workspace-sidebar.is-open { display: block; } .maxek-layout .dept-workspace-menu { flex-direction: column; } .maxek-layout .dept-workspace-menu-link { min-width: 0; } } @media (max-width: 480px) { .maxek-layout .dept-card-grid { grid-template-columns: 1fr; } .maxek-layout .dept-card { min-height: 96px; flex-direction: row; justify-content: flex-start; padding: 1rem 1.25rem; } } /* ── Command Centre layout ── */ .maxek-topnav-layout.command-centre-layout { flex-direction: row; } .maxek-topnav-layout.command-centre-layout .tool-rail.command-centre-rail { display: flex !important; width: 248px; padding: 16px 14px; position: relative; flex-shrink: 0; height: 100vh; overflow: hidden; } .maxek-topnav-layout.command-centre-layout .main-window { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; } .maxek-topnav-layout.command-centre-layout .header-brand { display: none; } .maxek-topnav-layout.command-centre-layout .sidebar-toggle { display: none; } .command-centre-rail .cc-sidebar-section { margin-bottom: 12px; } .command-centre-rail .cc-sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 4px; } .command-centre-rail .cc-sidebar-muted { font-size: 13px; color: var(--text-muted); } .command-centre-rail .cc-sidebar-muted i { color: var(--text-muted); } .command-centre-rail .cc-sidebar-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f59e0b; color: #111827; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .command-centre-rail .cc-sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 8px 4px; } .command-centre-rail .cc-sidebar-user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .command-centre-rail .cc-sidebar-user-meta strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .command-centre-rail .cc-sidebar-user-meta span { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .command-centre-rail .cc-rail-close { display: none; } .command-centre-page { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1.25rem; width: 100%; max-width: 1600px; margin: 0 auto; } /* Command Centre — compact sizing for one-screen fit */ .maxek-layout.command-centre-mode.dashboard-mode .cc-page-header { align-items: center; gap: 10px; flex-shrink: 0; } .maxek-layout.command-centre-mode.dashboard-mode .cc-page-title { font-size: 1.25rem; } .maxek-layout.command-centre-mode.dashboard-mode .cc-page-subtitle { margin: 2px 0 0; font-size: 0.78rem; } .maxek-layout.command-centre-mode.dashboard-mode .cc-kpi-row--main { gap: 8px; flex-shrink: 0; } .maxek-layout.command-centre-mode.dashboard-mode .cc-kpi-row--main .erp-stat-card.cc-kpi-card { min-height: 52px; padding: 6px 10px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-kpi-row--main .erp-stat-card.cc-kpi-card strong { font-size: 15px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-kpi-row--main .erp-stat-card.cc-kpi-card strong small.cc-kpi-hint { font-size: 10px; line-height: 1.25; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-section { margin-top: 0; gap: 0.35rem; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-section-title { font-size: 0.72rem; flex-shrink: 0; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-grid--main { flex: 1 1 auto; min-height: 0; height: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: unset; gap: 8px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-grid--main .cc-dept-card { min-height: 0; height: 100%; padding: 10px 12px; gap: 4px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-card-tag { font-size: 9px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-card-icon { width: 32px; height: 32px; font-size: 0.9rem; border-radius: 8px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-card-title { font-size: 0.88rem; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-card-desc { font-size: 0.72rem; line-height: 1.35; -webkit-line-clamp: 2; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-card-stats { padding-top: 4px; gap: 4px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-stat-pill { font-size: 10px; padding: 2px 7px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets { margin-top: 0; gap: 8px; min-height: 0; overflow: hidden; align-self: stretch; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets .cc-panel { min-height: 0; height: 100%; padding: 8px 10px; display: flex; flex-direction: column; overflow: hidden; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets .cc-panel-head { margin-bottom: 4px; flex-shrink: 0; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets .cc-panel-head h2 { font-size: 0.82rem; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets .cc-widget-head { gap: 8px; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets .cc-widget-icon { width: 28px; height: 28px; font-size: 0.85rem; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets .cc-widget-subtitle { font-size: 0.68rem; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets .cc-widget-placeholder { min-height: 0; flex: 1 1 auto; padding: 6px 8px; overflow: hidden; } .maxek-layout.command-centre-mode.dashboard-mode .cc-bottom-row--widgets .cc-widget-placeholder p { font-size: 0.72rem; line-height: 1.35; } .cc-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cc-page-title { margin: 0; font-size: 1.65rem; font-weight: 700; letter-spacing: -0.01em; } .cc-page-subtitle { margin: 6px 0 0; font-size: 0.92rem; color: var(--text-muted); } .cc-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cc-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .cc-kpi-row--main { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--layout-gap); margin-bottom: 0; } .cc-kpi-row--main .erp-stat-card.cc-kpi-card { min-height: 72px; } .cc-kpi-row--main .erp-stat-card.cc-kpi-card strong small.cc-kpi-hint { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 1.35; } .cc-kpi-hint--ok { color: #10b981; } .cc-kpi-hint--warn { color: #f59e0b; } .cc-kpi-hint--danger { color: #ef4444; } .cc-kpi-hint--info { color: #60a5fa; } .cc-kpi-hint--muted { color: var(--text-muted); } .cc-kpi-warn { color: #b45309; } .cc-kpi-danger { color: #ef4444; } .cc-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; grid-auto-rows: minmax(200px, auto); align-items: stretch; } .cc-dept-section { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.25rem; } .cc-dept-section-title { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .cc-dept-grid--main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; grid-auto-rows: minmax(148px, auto); } .cc-dept-grid--main .cc-dept-card { min-height: 148px; padding: 12px 14px; gap: 6px; } .cc-dept-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; height: 100%; padding: 12px 14px; text-decoration: none; color: var(--text-main); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), var(--bg-card-dark); border: 1px solid var(--border-subtle); border-top: 3px solid var(--cc-accent, var(--maxek-red)); border-radius: 12px; transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; min-width: 0; overflow: hidden; } .cc-dept-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cc-accent, var(--maxek-red)) 45%, var(--border-subtle)); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .cc-dept-card-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); line-height: 1.3; } .cc-dept-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--cc-accent, var(--maxek-red)) 18%, transparent); color: var(--cc-accent, var(--maxek-red)); font-size: 0.95rem; flex-shrink: 0; } .cc-dept-card-icon--muted { background: rgba(156, 163, 175, 0.12); color: var(--text-muted); } .cc-dept-card-title { font-size: 0.92rem; font-weight: 700; line-height: 1.3; min-width: 0; } .cc-dept-card-desc { font-size: 0.76rem; line-height: 1.35; color: var(--text-muted); flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cc-dept-card-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; min-width: 0; } .cc-dept-card-stats--links { gap: 10px 14px; } .cc-dept-stat-pill { font-size: 11px; color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px 10px; } .cc-dept-stat-pill strong { color: var(--text-main); font-weight: 700; } .cc-dept-stat-pill--ok strong { color: #10b981; } .cc-dept-stat-pill--warn strong { color: #f59e0b; } .cc-dept-stat-pill--danger strong { color: #ef4444; } .cc-dept-card--more { border-top-color: var(--border-subtle); cursor: default; } .cc-dept-more-link { font-size: 12px; font-weight: 600; color: var(--maxek-red); text-decoration: none; } .cc-dept-more-link:hover { text-decoration: underline; } .cc-bottom-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; } .cc-bottom-row--widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0.25rem; } .cc-widget-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .cc-widget-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(227, 6, 19, 0.12); color: var(--maxek-red); font-size: 1rem; flex-shrink: 0; } .cc-widget-subtitle { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-muted); font-weight: 400; } .cc-widget-placeholder { display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 16px; border: 1px dashed rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.02); } .cc-widget-placeholder p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); text-align: center; max-width: 36ch; } .cc-panel { background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; min-height: 220px; } .cc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .cc-panel-head h2 { margin: 0; font-size: 0.95rem; font-weight: 700; } .cc-panel-link { font-size: 12px; color: var(--maxek-red); text-decoration: none; } .cc-panel-link:hover { text-decoration: underline; } .cc-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .cc-activity-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .cc-activity-item:last-child { border-bottom: none; } .cc-activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--text-muted); } .cc-activity-dot--ok { background: #10b981; } .cc-activity-dot--warn { background: #f59e0b; } .cc-activity-dot--danger { background: #ef4444; } .cc-activity-dot--info { background: #60a5fa; } .cc-activity-dot--muted { background: var(--text-muted); } .cc-activity-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cc-activity-body strong { font-size: 13px; } .cc-activity-body span { font-size: 12px; color: var(--text-muted); } .cc-activity-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .cc-quick-actions { display: flex; flex-direction: column; gap: 10px; } .cc-quick-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 72px; padding: 12px; border-radius: 10px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02); color: var(--text-main); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; } .cc-quick-action i { font-size: 1.15rem; color: var(--maxek-red); } .cc-quick-action span { font-size: 12px; font-weight: 600; } .cc-quick-action:hover { border-color: var(--maxek-red); background: rgba(227, 6, 19, 0.08); } @media (max-width: 1280px) { .cc-kpi-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .cc-kpi-row--main { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .maxek-topnav-layout.command-centre-layout .tool-rail.command-centre-rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%); transition: transform 0.25s ease; } .maxek-topnav-layout.command-centre-layout .tool-rail.command-centre-rail.open { transform: translateX(0); } .maxek-topnav-layout.command-centre-layout .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; } .command-centre-rail .cc-rail-close { display: inline-flex; position: absolute; top: 12px; right: 12px; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-subtle); border-radius: 8px; background: transparent; color: var(--text-main); cursor: pointer; } .cc-bottom-row { grid-template-columns: 1fr; } .cc-dept-grid--main { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cc-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-kpi-row--main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-dept-grid { grid-template-columns: 1fr; } .cc-dept-grid--main { grid-template-columns: 1fr; } .cc-page-title { font-size: 1.35rem; } } /* ═══════════════════════════════════════════════════════════════ MAXEK ERP — Final UI/UX Shell Standard (2026) ═══════════════════════════════════════════════════════════════ */ :root { --layout-quick-panel-width: 200px; --layout-action-panel-width: 220px; --layout-status-height: 28px; --layout-help-width: 72px; } .maxek-shell-layout .main-window { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: var(--layout-status-height); } .maxek-shell-layout .shell-workspace { display: flex; flex: 1 1 auto; min-height: 0; position: relative; } /* Command Centre / department hub — use rail only; hide duplicate shell side panels */ .maxek-shell-layout.command-centre-layout .shell-quick-panel, .maxek-shell-layout.command-centre-layout .shell-action-panel, .maxek-shell-layout.dept-workspace-mode .shell-quick-panel, .maxek-shell-layout.dept-workspace-mode .shell-action-panel { display: none !important; } .maxek-shell-layout.command-centre-layout.maxek-topnav-layout { flex-direction: row; } .maxek-shell-layout.command-centre-layout .shell-main-content { overflow: hidden; display: flex; flex-direction: column; } .maxek-shell-layout.command-centre-layout .shell-main-content .dashboard-body { flex: 1 1 auto; min-height: 0; } .maxek-shell-layout .shell-main-content { flex: 1 1 auto; min-width: 0; overflow: auto; scrollbar-color: #3b4458 #141822; scrollbar-width: thin; } /* Header — three-zone layout */ .maxek-shell-layout .top-utility-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px) auto; gap: 12px; } .maxek-shell-layout .header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; } .maxek-shell-layout .header-center { display: flex; align-items: center; justify-content: center; } .maxek-shell-layout .header-company-name { font-size: 12px; color: var(--text-muted); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; border-left: 1px solid var(--border-subtle); padding-left: 10px; } .global-search-hint { color: var(--text-muted); font-size: 13px; margin: 0; } .global-search-result-list { list-style: none; margin: 0; padding: 0; } .global-search-result-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); text-decoration: none; } .global-search-result-item:hover { background: rgba(227, 6, 19, 0.1); } .global-search-result-item span { font-size: 11px; color: var(--text-muted); } .maxek-shell-layout .company-select, .maxek-shell-layout .branch-select, .maxek-shell-layout .project-select { height: var(--layout-control-height); font-size: 12px; background: var(--bg-dark-ops); border: 1px solid var(--border-subtle); border-radius: var(--layout-control-radius); color: #fff; padding: 0 8px; } .maxek-shell-layout .company-select, .maxek-shell-layout .branch-select { max-width: 130px; } .maxek-shell-layout .project-select { min-width: 160px; max-width: min(240px, 28vw); text-overflow: ellipsis; } .maxek-shell-layout .search-wrapper--global { width: 100%; display: flex; align-items: center; gap: 8px; } .maxek-shell-layout .search-wrapper--global input { flex: 1; cursor: pointer; } .maxek-shell-layout .header-search-kbd, .maxek-shell-layout .global-search-kbd { font-size: 10px; padding: 2px 6px; border: 1px solid var(--border-subtle); border-radius: 4px; color: var(--text-muted); background: rgba(0, 0, 0, 0.2); white-space: nowrap; } .maxek-shell-layout .header-quick-actions { position: relative; } .maxek-shell-layout .header-quick-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); z-index: 60; padding: 6px; animation: maxek-fade-in 0.15s ease; } .maxek-shell-layout .header-quick-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--text-main); text-decoration: none; font-size: 13px; border-radius: 6px; } .maxek-shell-layout .header-quick-menu a:hover { background: rgba(227, 6, 19, 0.12); color: var(--maxek-red); } /* Main toolbar — active MAXEK Red */ .maxek-shell-layout .maxek-top-nav-link.active, .maxek-shell-layout .maxek-top-nav-item.is-active > .maxek-top-nav-link { color: var(--maxek-red) !important; border-bottom-color: var(--maxek-red); } /* Sub-toolbar badges & hover */ .maxek-shell-layout .department-subbar-link { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .maxek-shell-layout .department-subbar-link:hover { background: rgba(227, 6, 19, 0.1); color: #fff; } .maxek-shell-layout .department-subbar-link.active { background: rgba(227, 6, 19, 0.18); color: var(--maxek-red); border-color: var(--maxek-red); } .maxek-shell-layout .department-subbar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; font-size: 10px; font-weight: 700; background: var(--maxek-red); color: #fff; border-radius: 999px; } /* Quick panel (left) */ .shell-quick-panel { flex: 0 0 var(--layout-quick-panel-width); background: var(--bg-card-dark); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; transition: margin 0.2s ease, opacity 0.2s ease; } .shell-quick-panel.is-collapsed { margin-left: calc(-1 * var(--layout-quick-panel-width)); opacity: 0; pointer-events: none; } .shell-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); } .shell-panel-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 6px; } .shell-panel-toggle { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; } .shell-quick-links { padding: 8px; display: flex; flex-direction: column; gap: 4px; } .shell-quick-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--text-main); text-decoration: none; font-size: 13px; border-radius: 6px; transition: background 0.15s ease; } .shell-quick-link:hover { background: rgba(227, 6, 19, 0.12); color: var(--maxek-red); } .shell-panel-empty { font-size: 12px; color: var(--text-muted); padding: 8px; margin: 0; } .shell-quick-reopen, .shell-action-reopen { position: fixed; z-index: 35; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-card-dark); color: var(--text-main); cursor: pointer; display: flex; align-items: center; justify-content: center; } .shell-quick-reopen { left: 8px; top: calc(var(--layout-toolbar-height) * 2 + 60px); } .shell-action-reopen { right: 8px; top: calc(var(--layout-toolbar-height) * 2 + 60px); } .shell-action-reopen-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; font-size: 9px; background: var(--maxek-red); color: #fff; border-radius: 999px; display: flex; align-items: center; justify-content: center; } /* Action panel (right) */ .shell-action-panel { flex: 0 0 var(--layout-action-panel-width); background: var(--bg-card-dark); border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; transition: margin 0.2s ease, opacity 0.2s ease; } .shell-action-panel.is-collapsed { margin-right: calc(-1 * var(--layout-action-panel-width)); opacity: 0; pointer-events: none; } .shell-action-section { padding: 8px; display: flex; flex-direction: column; gap: 4px; } .shell-action-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: var(--text-main); text-decoration: none; font-size: 13px; border-radius: 6px; transition: background 0.15s ease; } .shell-action-item:hover { background: rgba(227, 6, 19, 0.1); } .shell-action-badge { min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 700; background: var(--maxek-red); color: #fff; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .shell-action-badge--warn { background: #e67e22; } /* Breadcrumb — clickable */ .breadcrumb--clickable { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin-top: 4px; } .breadcrumb--clickable a { color: var(--text-muted); text-decoration: none; } .breadcrumb--clickable a:hover { color: var(--maxek-red); } .breadcrumb--clickable .breadcrumb-current { color: var(--text-main); } .breadcrumb-sep { color: var(--text-muted); opacity: 0.6; } /* Entry screen actions */ .erp-entry-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border-subtle); margin-top: 16px; } /* Status strip (bottom) */ .shell-status-strip { position: fixed; bottom: 0; left: 0; right: 0; height: var(--layout-status-height); background: #1a1d24; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 11px; color: var(--text-muted); z-index: 50; gap: 12px; } .status-strip-left, .status-strip-center, .status-strip-right { display: flex; align-items: center; gap: 14px; } .status-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .status-item--healthy .status-dot { color: #2ecc71; font-size: 7px; } .status-item--attention .status-dot, .status-item--warn .status-dot { color: var(--maxek-red); font-size: 7px; } .status-item--muted { opacity: 0.75; } /* Help center (bottom-left) */ .shell-help-center { position: fixed; bottom: calc(var(--layout-status-height) + 8px); left: 12px; z-index: 45; } .shell-help-trigger { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-main); font-size: 12px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: background 0.15s ease; } .shell-help-trigger:hover { background: rgba(227, 6, 19, 0.15); color: var(--maxek-red); } .shell-help-drawer { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 200px; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); animation: maxek-slide-up 0.2s ease; } .shell-help-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; } .shell-help-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; } .shell-help-links { list-style: none; margin: 0; padding: 6px; } .shell-help-links a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--text-main); text-decoration: none; font-size: 13px; border-radius: 6px; } .shell-help-links a:hover { background: rgba(227, 6, 19, 0.1); color: var(--maxek-red); } /* Global search modal */ .global-search-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .global-search-modal[hidden] { display: none; } .global-search-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); animation: maxek-fade-in 0.15s ease; } .global-search-panel { position: relative; width: min(640px, 92vw); background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); animation: maxek-slide-up 0.2s ease; overflow: hidden; } .global-search-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); } .global-search-head i { color: var(--text-muted); } .global-search-input { flex: 1; background: transparent; border: none; color: #fff; font-size: 16px; outline: none; } .global-search-categories { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); } .global-search-cat { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 11px; background: var(--bg-dark-ops); border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .global-search-cat:hover, .global-search-cat.is-active { border-color: var(--maxek-red); color: var(--maxek-red); } .global-search-results { padding: 16px; min-height: 80px; } .global-search-hint { color: var(--text-muted); font-size: 13px; margin: 0; } @keyframes maxek-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes maxek-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1100px) { .maxek-shell-layout .top-utility-strip { grid-template-columns: 1fr auto; } .maxek-shell-layout .header-center { grid-column: 1 / -1; order: 3; } .shell-quick-panel, .shell-action-panel { display: none; } .shell-quick-reopen, .shell-action-reopen { display: none; } } @media (max-width: 768px) { .maxek-shell-layout .header-company-name, .maxek-shell-layout .project-select { display: none; } .status-strip-center { display: none; } } /* ── Theme switcher (header) ── */ .maxek-theme-switcher { position: relative; } .maxek-theme-switcher .header-icon-btn.is-active { border-color: var(--maxek-accent); color: var(--maxek-accent); background: var(--maxek-accent-soft); } .maxek-theme-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 196px; padding: 6px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--maxek-card-bg); box-shadow: var(--maxek-shadow); z-index: 120; } .maxek-theme-menu[hidden] { display: none !important; } .maxek-theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-main); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; } .maxek-theme-option:hover { background: var(--maxek-accent-soft); border-color: var(--maxek-accent-border); } .maxek-theme-option.is-selected { background: var(--maxek-accent-soft); border-color: var(--maxek-accent); color: var(--maxek-accent); } .maxek-theme-swatch { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.15); } .maxek-theme-swatch--command-dark { background: linear-gradient(135deg, #232323 50%, #E30613 50%); } .maxek-theme-swatch--pro-light { background: linear-gradient(135deg, #1a365d 50%, #eef1f6 50%); } .maxek-theme-swatch--ultra-color { background: linear-gradient(135deg, #0d9488 25%, #2563eb 25% 50%, #7c3aed 50% 75%, #ef4444 75%); } /* Pro Light — navy sidebar keeps light text on dark rail */ [data-theme="pro-light"] .command-centre-rail, [data-theme="pro-light"] .command-centre-rail .logo-text-main, [data-theme="pro-light"] .command-centre-rail .rail-btn { color: #e2e8f0; } [data-theme="pro-light"] .command-centre-rail { background: var(--maxek-sidebar-bg); border-right-color: rgba(255, 255, 255, 0.08); } [data-theme="pro-light"] .command-centre-rail .cc-sidebar-muted, [data-theme="pro-light"] .command-centre-rail .cc-sidebar-user-meta span { color: rgba(226, 232, 240, 0.72); } [data-theme="pro-light"] .maxek-layout.dashboard-mode .dash-quick-links a { color: var(--maxek-link); } [data-theme="pro-light"] .maxek-layout .erp-stat-card { border-left-color: var(--maxek-accent); } /* Ultra Color — vivid KPI tiles */ [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card:nth-child(6n+1), [data-theme="ultra-color"] .dash-kpi-row .dash-kpi-card:nth-child(4n+1), [data-theme="ultra-color"] .dash-ref-kpi-row .dash-ref-kpi-card:nth-child(5n+1) { background: var(--maxek-kpi-1); border-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.35); } [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card:nth-child(6n+2), [data-theme="ultra-color"] .dash-kpi-row .dash-kpi-card:nth-child(4n+2), [data-theme="ultra-color"] .dash-ref-kpi-row .dash-ref-kpi-card:nth-child(5n+2) { background: var(--maxek-kpi-2); border-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.35); } [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card:nth-child(6n+3), [data-theme="ultra-color"] .dash-kpi-row .dash-kpi-card:nth-child(4n+3), [data-theme="ultra-color"] .dash-ref-kpi-row .dash-ref-kpi-card:nth-child(5n+3) { background: var(--maxek-kpi-3); border-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.35); } [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card:nth-child(6n+4), [data-theme="ultra-color"] .dash-kpi-row .dash-kpi-card:nth-child(4n+4), [data-theme="ultra-color"] .dash-ref-kpi-row .dash-ref-kpi-card:nth-child(5n+4) { background: var(--maxek-kpi-4); border-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.35); } [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card:nth-child(6n+5), [data-theme="ultra-color"] .dash-ref-kpi-row .dash-ref-kpi-card:nth-child(5n+5) { background: var(--maxek-kpi-5); border-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.35); } [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card:nth-child(6n+6) { background: var(--maxek-kpi-6); border-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.35); } [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card span, [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card strong, [data-theme="ultra-color"] .dash-kpi-row .dash-kpi-card .tile-meta p, [data-theme="ultra-color"] .dash-kpi-row .dash-kpi-card .tile-meta h3, [data-theme="ultra-color"] .dash-ref-kpi-row .dash-ref-kpi-card p, [data-theme="ultra-color"] .dash-ref-kpi-row .dash-ref-kpi-card h3 { color: var(--maxek-kpi-text); } [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card span, [data-theme="ultra-color"] .dash-kpi-row .dash-kpi-card .tile-meta p, [data-theme="ultra-color"] .dash-ref-kpi-row .dash-ref-kpi-card p { color: var(--maxek-kpi-label); } [data-theme="ultra-color"] .cc-kpi-row--main .erp-stat-card.cc-kpi-card strong small.cc-kpi-hint { color: rgba(255, 255, 255, 0.88); } [data-theme="ultra-color"] .maxek-layout.command-centre-mode.dashboard-mode .dashboard-body, [data-theme="ultra-color"] .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body { scrollbar-color: var(--maxek-scrollbar-thumb) var(--maxek-scrollbar-track); } [data-theme="ultra-color"] .maxek-layout.command-centre-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-track, [data-theme="ultra-color"] .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-track { background: var(--maxek-scrollbar-track); } [data-theme="ultra-color"] .maxek-layout.command-centre-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-thumb, [data-theme="ultra-color"] .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-thumb { background: var(--maxek-scrollbar-thumb); border-color: var(--maxek-scrollbar-track); } [data-theme="pro-light"] .maxek-layout.command-centre-mode.dashboard-mode .dashboard-body, [data-theme="pro-light"] .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body { scrollbar-color: var(--maxek-scrollbar-thumb) var(--maxek-scrollbar-track); } [data-theme="pro-light"] .maxek-layout.command-centre-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-track, [data-theme="pro-light"] .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-track { background: var(--maxek-scrollbar-track); } [data-theme="pro-light"] .maxek-layout.command-centre-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-thumb, [data-theme="pro-light"] .maxek-layout.dept-workspace-mode.dashboard-mode .dashboard-body::-webkit-scrollbar-thumb { background: var(--maxek-scrollbar-thumb); border-color: var(--maxek-scrollbar-track); } /* ── Dashboard layout themes (data-dashboard-theme on content wrapper) ── */ .pro-dash-theme-layout { --dash-layout-gap: var(--layout-section-gap, 16px); } [data-dashboard-theme="executive"] .pro-dash-exec-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--dash-layout-gap); margin-bottom: calc(var(--dash-layout-gap) * 1.25); } [data-dashboard-theme="executive"] .pro-dash-exec-kpi-card { background: var(--maxek-card-bg); border: 1px solid var(--maxek-border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } [data-dashboard-theme="executive"] .pro-dash-exec-kpi-label { font-size: 12px; color: var(--maxek-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } [data-dashboard-theme="executive"] .pro-dash-exec-kpi-value { font-size: 1.75rem; line-height: 1.1; color: var(--maxek-text); } [data-dashboard-theme="executive"] .pro-dash-exec-kpi-hint { font-size: 12px; color: var(--maxek-text-muted); } [data-dashboard-theme="executive"] .pro-dash-exec-kpi-card--warn { border-color: var(--maxek-accent-border); } [data-dashboard-theme="executive"] .pro-dash-exec-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--dash-layout-gap); margin-bottom: calc(var(--dash-layout-gap) * 1.5); } [data-dashboard-theme="executive"] .pro-dash-exec-panel { background: var(--maxek-card-bg); border: 1px solid var(--maxek-border); border-radius: 12px; padding: 16px 18px; } [data-dashboard-theme="executive"] .pro-dash-exec-stat-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } [data-dashboard-theme="executive"] .pro-dash-exec-stat-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--maxek-text-muted); } [data-dashboard-theme="executive"] .pro-dash-exec-stat-list strong { color: var(--maxek-text); font-size: 1.1rem; } [data-dashboard-theme="executive"] .pro-dash-exec-panel-note, [data-dashboard-theme="compact"] .pro-dash-compact-header p { font-size: 12px; color: var(--maxek-text-muted); margin: 0 0 8px; } [data-dashboard-theme="executive"] .pro-dash-compact-actions, [data-dashboard-theme="compact"] .pro-dash-compact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: calc(var(--dash-layout-gap) * 1.25); } [data-dashboard-theme="executive"] .pro-dash-compact-action-btn, [data-dashboard-theme="compact"] .pro-dash-compact-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--maxek-border); background: var(--maxek-card-bg); color: var(--maxek-text); font-size: 13px; text-decoration: none; } [data-dashboard-theme="compact"] .pro-dash-compact-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--dash-layout-gap); } [data-dashboard-theme="compact"] .pro-dash-compact-header h1 { margin: 0; font-size: 1.35rem; } [data-dashboard-theme="compact"] .pro-dash-compact-pending { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--maxek-accent-soft); border: 1px solid var(--maxek-accent-border); color: var(--maxek-text); font-size: 13px; text-decoration: none; } [data-dashboard-theme="compact"] .pro-dash-dept-tile-grid--compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } [data-dashboard-theme="compact"] .pro-dash-dept-tile--compact { min-height: 96px; padding: 12px; } [data-dashboard-theme="compact"] .pro-dash-dept-tile--compact .erp-module-tile-desc, [data-dashboard-theme="compact"] .pro-dash-dept-tile--compact .erp-module-tile-open { display: none; } @media (max-width: 640px) { [data-dashboard-theme="executive"] .pro-dash-exec-kpi-grid, [data-dashboard-theme="executive"] .pro-dash-exec-columns { grid-template-columns: 1fr; } [data-dashboard-theme="compact"] .pro-dash-dept-tile-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pro-dash-dept-tile--locked { cursor: not-allowed; opacity: 0.62; filter: grayscale(0.35); pointer-events: none; } .pro-dash-dept-tile--locked .erp-module-tile-open { color: var(--erp-muted, #94a3b8); } /* ── v1.0.1 UAT: hide legacy dashboard progress bar ── */ .maxek-layout.dashboard-mode .dash-progress-wrap { display: none !important; } /* Department tile accents — dark mode contrast */ .pro-dash-dept-tile[data-dept-slug="projects"], .dept-module-tile[data-dept-slug="projects"] { --dept-accent: #2563eb; } .pro-dash-dept-tile[data-dept-slug="planning-wbs"], .dept-module-tile[data-dept-slug="planning-wbs"], .pro-dash-dept-tile[data-dept-slug="engineering"], .dept-module-tile[data-dept-slug="engineering"] { --dept-accent: #22c55e; } .pro-dash-dept-tile[data-dept-slug="boq"], .dept-module-tile[data-dept-slug="boq"] { --dept-accent: #9333ea; } .pro-dash-dept-tile[data-dept-slug="dpr"], .dept-module-tile[data-dept-slug="dpr"] { --dept-accent: #10b981; } .pro-dash-dept-tile[data-dept-slug="procurement"], .dept-module-tile[data-dept-slug="procurement"] { --dept-accent: #f97316; } .pro-dash-dept-tile[data-dept-slug="store"], .dept-module-tile[data-dept-slug="store"] { --dept-accent: #06b6d4; } .pro-dash-dept-tile[data-dept-slug="hr-payroll"], .dept-module-tile[data-dept-slug="hr-payroll"] { --dept-accent: #ec4899; } .pro-dash-dept-tile[data-dept-slug="accounts"], .dept-module-tile[data-dept-slug="accounts"] { --dept-accent: #6366f1; } .pro-dash-dept-tile[data-dept-slug="qc"], .dept-module-tile[data-dept-slug="qc"] { --dept-accent: #8b5cf6; } .pro-dash-dept-tile[data-dept-slug="vehicle"], .dept-module-tile[data-dept-slug="vehicle"] { --dept-accent: #14b8a6; } .pro-dash-dept-tile[data-dept-slug="plant-operations"], .dept-module-tile[data-dept-slug="plant-operations"], .pro-dash-dept-tile[data-dept-slug="mechanical"], .dept-module-tile[data-dept-slug="mechanical"] { --dept-accent: #166534; } .pro-dash-dept-tile[data-dept-slug="subcontract"], .dept-module-tile[data-dept-slug="subcontract"] { --dept-accent: #ef4444; } .pro-dash-dept-tile[data-dept-slug="reports"], .dept-module-tile[data-dept-slug="reports"] { --dept-accent: #a855f7; } .pro-dash-dept-tile[data-dept-slug="administration"], .dept-module-tile[data-dept-slug="administration"] { --dept-accent: #84cc16; } /* Platform Command Centre layout */ .erp-platform-dashboard { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 100%; } .erp-platform-kpi-grid { margin-bottom: 0; } .erp-platform-quick-actions { margin: 0; } .erp-platform-quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.75rem; } .erp-platform-quick-action { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; min-height: 92px; padding: 0.95rem 1rem; border-radius: 12px; border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.22)); background: var(--bg-card-dark, #1e293b); color: var(--text-main, #e2e8f0); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .erp-platform-quick-action i { font-size: 1.1rem; color: #93c5fd; } .erp-platform-quick-action span { font-size: 0.9rem; font-weight: 600; } .erp-platform-quick-action:hover { border-color: rgba(99, 102, 241, 0.45); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.45); transform: translateY(-1px); } .erp-platform-ticket-strip { margin: 0; } .erp-platform-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .erp-platform-ticket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; } .erp-platform-ticket-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; min-height: 74px; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.22)); background: var(--bg-card-dark, #1e293b); color: var(--text-main, #e2e8f0); text-decoration: none; } .erp-platform-ticket-card i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(96, 165, 250, 0.16); color: #93c5fd; } .erp-platform-ticket-card span { font-size: 0.85rem; font-weight: 700; } .erp-platform-ticket-card strong { min-width: 34px; padding: 0.25rem 0.45rem; border-radius: 999px; background: rgba(239, 68, 68, 0.18); color: #fecaca; text-align: center; font-size: 0.9rem; } .erp-module-tile { position: relative; } .erp-module-tile-sequence { position: absolute; top: 0.7rem; right: 0.75rem; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(239, 68, 68, 0.22); color: #fecaca; font-size: 0.8rem; font-weight: 800; } .erp-platform-dept-grid { gap: 0.85rem; } .erp-platform-dept-grid .pro-dash-dept-tile--mockup { min-height: 112px; } .erp-platform-company-erp { margin: 0; padding-top: 0; } .erp-platform-empty-card { background: var(--bg-card-dark, #1e293b); border-color: var(--border-subtle, rgba(148, 163, 184, 0.22)); color: var(--text-main, #e2e8f0); } .erp-platform-recent-customers { margin-top: 0; } .erp-platform-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .erp-platform-recent-table-wrap { overflow: auto; } .erp-platform-recent-empty { text-align: center; color: var(--text-muted, #94a3b8); } .erp-platform-recent-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 0.75rem; color: var(--text-muted, #94a3b8); font-size: 0.875rem; } .maxek-layout.erp-admin-page .erp-platform-subtitle, .maxek-layout.erp-admin-page .erp-platform-title, .maxek-layout.erp-admin-page .erp-module-section-title { color: var(--text-main, #e2e8f0); } .maxek-layout.erp-admin-page .erp-platform-eyebrow { color: var(--text-muted, #94a3b8); } /* Global page navigation strip — back to department / list / home */ .maxek-layout .erp-page-nav-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--erp-border, rgba(148, 163, 184, 0.22)); background: var(--erp-surface-muted, rgba(15, 23, 42, 0.35)); position: relative; z-index: 6; flex-shrink: 0; } .maxek-layout .erp-page-nav-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; } .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .erp-page-nav-strip { background: #f1f5f9; border-color: #cbd5e1; } .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .erp-page-nav-strip .erp-btn-ghost { color: #0f172a; border-color: #94a3b8; } .maxek-layout .dpr-saved-docs-card { margin-top: 1.25rem; } .maxek-layout .dpr-attach-type { font-size: 0.78rem; text-transform: capitalize; color: var(--text-muted, #94a3b8); } .maxek-layout .toc-bg-section { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--erp-border, rgba(148, 163, 184, 0.22)); } .maxek-layout .toc-bg-section__header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .maxek-layout .toc-bg-section__header .erp-form-subtitle { margin: 0; flex: 1 1 auto; } .maxek-layout .toc-bg-row { padding: 0.75rem 0; margin-bottom: 0.5rem; border-bottom: 1px dashed var(--erp-border, rgba(148, 163, 184, 0.18)); } /* DPR — dark-theme readable chips, progress cards, BOQ list */ .maxek-layout .dpr-progress-card { border: 1px solid var(--border-form, rgba(148, 163, 184, 0.28)); border-radius: 8px; padding: 0.65rem 0.75rem; background: rgba(15, 23, 42, 0.72); color: var(--text-main, #e2e8f0); } .maxek-layout .dpr-progress-card span { display: block; font-size: 0.75rem; color: var(--text-muted, #94a3b8); margin-bottom: 0.25rem; } .maxek-layout .dpr-progress-card strong { font-size: 1rem; color: var(--text-main, #f1f5f9); font-weight: 700; } .maxek-layout .dpr-selected-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.65rem; background: rgba(37, 99, 235, 0.18); border: 1px solid rgba(96, 165, 250, 0.45); border-radius: 999px; font-size: 0.85rem; color: var(--text-main, #e2e8f0); } .maxek-layout .dpr-selected-chip strong { color: #93c5fd; } .maxek-layout .dpr-selected-chip-meta { color: var(--text-muted, #94a3b8); font-size: 0.75rem; } .maxek-layout .dpr-boq-checkbox-list label:hover { background: rgba(148, 163, 184, 0.1); } .maxek-layout .dpr-boq-checkbox-meta { font-size: 0.8rem; color: var(--text-muted, #94a3b8); } .maxek-layout .dpr-boq-checkbox-list { background: rgba(15, 23, 42, 0.35); border-color: var(--border-form, rgba(148, 163, 184, 0.28)) !important; } .maxek-layout .erp-validation--compact { font-size: 0.9rem; line-height: 1.5; } [data-theme="pro-light"] .maxek-layout .dpr-progress-card, .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .dpr-progress-card { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; } [data-theme="pro-light"] .maxek-layout .dpr-progress-card span, .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .dpr-progress-card span { color: #64748b; } [data-theme="pro-light"] .maxek-layout .dpr-progress-card strong, .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .dpr-progress-card strong { color: #0f172a; } [data-theme="pro-light"] .maxek-layout .dpr-selected-chip, .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .dpr-selected-chip { background: #eff6ff; border-color: #93c5fd; color: #1e3a8a; } [data-theme="pro-light"] .maxek-layout .dpr-selected-chip strong, .maxek-layout.pro-dashboard-mode[data-pro-theme="business"] .dpr-selected-chip strong { color: #1d4ed8; } /* Project name — standard 2–3 line display in lists & tables */ .maxek-layout .erp-project-name-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 22rem; } .maxek-layout .erp-project-code { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--maxek-red, #e30613); line-height: 1.2; } .maxek-layout .erp-project-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; line-height: 1.38; color: var(--text-main, #e2e8f0); word-break: break-word; } .maxek-layout .erp-project-name--2 { -webkit-line-clamp: 2; } .maxek-layout #project-list .erp-table th, .maxek-layout [data-module-anchor="project-list"] .erp-table th { white-space: nowrap; } .maxek-layout #project-list .erp-table td.erp-col-project-name, .maxek-layout #project-list .erp-table td.is-project-name { min-width: 12rem; max-width: 22rem; vertical-align: top; padding-top: 0.65rem; padding-bottom: 0.65rem; } .maxek-layout .dash-project-select .dash-select { min-width: 200px; max-width: 320px; } /* Expense / Purchase Entry */ .maxek-layout .expense-entry-module .erp-expense-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 10px 12px; background: var(--bg-form-card, #151d2e); border: 1px solid var(--border-form, #2a3548); border-radius: 10px; } .maxek-layout .expense-entry-module .erp-sub-toolbar-primary, .maxek-layout .expense-entry-module .erp-sub-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .maxek-layout .expense-entry-module .erp-sub-toolbar-divider { width: 1px; height: 24px; background: var(--border-form, #2a3548); margin: 0 4px; } .maxek-layout .expense-entry-panel .expense-entry-layout { display: block; } .maxek-layout .expense-form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 16px; } .maxek-layout .expense-form-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .maxek-layout .expense-head-row { margin-bottom: 12px; align-items: end; } .maxek-layout .expense-head-actions { justify-content: flex-end; } .maxek-layout .expense-project-meta, .maxek-layout .expense-vendor-meta { margin-top: -4px; } .maxek-layout .expense-vendor-create { align-self: flex-start; margin-top: -6px; } .maxek-layout .expense-payment-details { padding: 10px 12px; border: 1px solid var(--border-form, #2a3548); border-radius: 8px; background: rgba(15, 24, 41, 0.45); } .maxek-layout .expense-summary-card { margin-top: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-form, #2a3548); background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.85) 100%); } .maxek-layout .expense-summary-card__title { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #94a3b8); } .maxek-layout .expense-summary-card__list { margin: 0; display: grid; gap: 6px; } .maxek-layout .expense-summary-card__list > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .maxek-layout .expense-summary-card__list dt { margin: 0; color: var(--text-muted, #94a3b8); } .maxek-layout .expense-summary-card__list dd { margin: 0; font-weight: 600; color: var(--text-main, #e2e8f0); } .maxek-layout .expense-summary-card__grand { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-form, #2a3548); font-size: 14px; } .maxek-layout .expense-summary-card__grand dd { color: #4ade80; } .maxek-layout .expense-quick-picks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .maxek-layout .expense-quick-picks__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .maxek-layout .expense-quick-picks__label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted, #64748b); width: 100%; } .maxek-layout .erp-chip { border: 1px solid var(--border-form, #334155); background: rgba(15, 23, 42, 0.6); color: var(--text-main, #cbd5e1); border-radius: 999px; padding: 3px 10px; font-size: 11px; cursor: pointer; } .maxek-layout .erp-chip:hover { border-color: rgba(227, 6, 19, 0.45); background: rgba(227, 6, 19, 0.12); } .maxek-layout .expense-lines-section { margin-top: 8px; } .maxek-layout .expense-lines-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .maxek-layout .expense-lines-scroll { max-height: none; overflow-x: auto; } .maxek-layout .expense-lines-table { min-width: 720px; font-size: 13px; } .maxek-layout .expense-lines-table th, .maxek-layout .expense-lines-table td { padding: 6px 5px; vertical-align: middle; } .maxek-layout .expense-lines-table .col-sl { width: 2rem; text-align: center; color: var(--text-muted, #94a3b8); } .maxek-layout .expense-lines-table input, .maxek-layout .expense-lines-table select { width: 100%; min-height: 34px; padding: 6px 8px; font-size: 12px; } .maxek-layout .expense-lines-totals td { border-top: 2px solid var(--border-form, #334155); background: rgba(15, 23, 42, 0.5); } .maxek-layout .expense-dropzone { position: relative; border: 1px dashed var(--border-form, #475569); border-radius: 8px; padding: 14px; text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .maxek-layout .expense-dropzone.is-dragover { border-color: rgba(227, 6, 19, 0.55); background: rgba(227, 6, 19, 0.08); } .maxek-layout .expense-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .maxek-layout .expense-dropzone-ui { pointer-events: none; color: var(--text-muted, #94a3b8); font-size: 12px; } .maxek-layout .expense-dropzone-ui i { display: block; font-size: 20px; margin-bottom: 6px; } .maxek-layout .expense-attachment-preview { margin-top: 8px; font-size: 12px; word-break: break-all; } .maxek-layout .expense-invoice-hint.is-error { color: #f87171; font-size: 11px; } .maxek-layout .expense-form-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-form, #2a3548); } .maxek-layout .expense-modal { border: 1px solid var(--border-form, #334155); border-radius: 12px; padding: 0; background: var(--bg-form-card, #151d2e); color: var(--text-main, #e2e8f0); max-width: 480px; width: calc(100% - 2rem); } .maxek-layout .expense-modal::backdrop { background: rgba(0, 0, 0, 0.55); } .maxek-layout .expense-modal-form { padding: 16px 18px; } .maxek-layout .expense-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .maxek-layout .expense-modal__header h3 { margin: 0; font-size: 15px; } .maxek-layout .expense-modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } @media (max-width: 1100px) { .maxek-layout .expense-form-columns { grid-template-columns: 1fr; } } @media (max-width: 768px) { .maxek-layout .expense-entry-module .erp-expense-list-toolbar { flex-direction: column; align-items: stretch; } .maxek-layout .expense-lines-table { min-width: 640px; } } /* ── Platform Command Centre — header overlap & layout corrections ── */ .maxek-layout.command-centre-mode .top-utility-strip { min-height: var(--layout-toolbar-height); align-items: center; gap: 8px; overflow: visible; flex-wrap: nowrap; } .maxek-layout.command-centre-mode .header-actions, .maxek-layout.command-centre-mode .user-status-cluster { flex-shrink: 0; gap: 8px; min-width: 0; } .maxek-layout.command-centre-mode .header-icon-btn { flex-shrink: 0; margin: 0; } .maxek-layout.command-centre-mode .header-badge { top: -2px; right: -2px; transform: none; min-width: 16px; height: 16px; font-size: 9px; } .maxek-layout.command-centre-mode.dashboard-mode .shell-main-content, .maxek-layout.command-centre-mode.dashboard-mode .dashboard-body { padding-top: 0.85rem; overflow-x: hidden; max-width: 100%; } .maxek-layout.command-centre-mode.dashboard-mode .cc-page-header { margin-top: 0.35rem; padding-top: 0.25rem; flex-shrink: 0; } .maxek-layout.command-centre-mode.dashboard-mode .cc-page-title { font-size: 1.35rem; line-height: 1.25; margin: 0; } .maxek-layout.command-centre-mode.dashboard-mode .cc-kpi-row--main { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.65rem; width: 100%; } .maxek-layout.command-centre-mode.dashboard-mode .cc-kpi-row--main .erp-stat-card.cc-kpi-card { min-height: 72px; height: 100%; } .maxek-layout.command-centre-mode.dashboard-mode .erp-platform-recent-customers, .maxek-layout.command-centre-mode.dashboard-mode .erp-platform-recent-table-wrap { width: 100%; max-width: 100%; min-width: 0; } .maxek-layout.command-centre-mode.dashboard-mode .erp-platform-recent-table-wrap .erp-table { width: 100%; table-layout: auto; } .maxek-layout.command-centre-mode.dashboard-mode .cc-dept-grid--main, .maxek-layout.command-centre-mode.dashboard-mode .erp-platform-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; width: 100%; max-width: 100%; } .maxek-layout.command-centre-mode.dashboard-mode .erp-platform-dashboard { overflow-x: hidden; max-width: 100%; } .maxek-layout.command-centre-mode.dashboard-mode .dash-page.command-centre-page { overflow-x: hidden; overflow-y: auto; } .maxek-layout.erp-admin-page .erp-platform-dashboard { padding-top: 0.5rem; } /* ── Petty Cash Request — compact 2-column entry form ── */ .maxek-layout .petty-cash-module .erp-petty-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 10px 12px; background: var(--bg-form-card, #151d2e); border: 1px solid var(--border-form, #2a3548); border-radius: 10px; } .maxek-layout .petty-cash-module .erp-sub-toolbar-primary, .maxek-layout .petty-cash-module .erp-sub-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .maxek-layout .petty-cash-module .erp-sub-toolbar-divider { width: 1px; height: 24px; background: var(--border-form, #2a3548); margin: 0 4px; } .maxek-layout .petty-cash-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .maxek-layout .petty-kpi-card { padding: 10px 12px; min-height: 64px; } .maxek-layout .petty-kpi-label { display: block; font-size: 0.72rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .maxek-layout .petty-cash-entry-panel .petty-form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 14px; } .maxek-layout .petty-form-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .maxek-layout .petty-request-number-badge { display: inline-flex; align-items: center; padding: 2px 10px; margin-left: 8px; border-radius: 999px; border: 1px solid var(--border-form, #334155); background: rgba(59, 130, 246, 0.12); color: #93c5fd; font-size: 0.78rem; font-weight: 600; } .maxek-layout .petty-workflow-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-form, #2a3548); background: rgba(15, 23, 42, 0.35); } .maxek-layout .petty-workflow-step { font-size: 0.72rem; padding: 4px 8px; border-radius: 6px; color: var(--text-muted, #94a3b8); border: 1px solid transparent; } .maxek-layout .petty-workflow-step.is-done { color: #86efac; border-color: rgba(34, 197, 94, 0.25); } .maxek-layout .petty-workflow-step.is-active { color: #fde68a; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.1); } .maxek-layout .petty-purpose-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .maxek-layout .petty-purpose-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .maxek-layout .petty-purpose-table-wrap { overflow-x: auto; border: 1px solid var(--border-form, #2a3548); border-radius: 8px; background: rgba(15, 23, 42, 0.45); } .maxek-layout .petty-purpose-table { width: 100%; margin: 0; border-collapse: collapse; } .maxek-layout .petty-purpose-table th, .maxek-layout .petty-purpose-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-form, #2a3548); vertical-align: middle; } .maxek-layout .petty-purpose-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #94a3b8); background: rgba(15, 23, 42, 0.65); } .maxek-layout .petty-purpose-table .col-sl { width: 52px; text-align: center; } .maxek-layout .petty-purpose-table .col-amount { width: 120px; } .maxek-layout .petty-purpose-table .col-action { width: 56px; text-align: center; } .maxek-layout .petty-line-purpose, .maxek-layout .petty-line-amount { width: 100%; min-width: 0; height: 34px; padding: 6px 10px; border: 1px solid var(--border-form, #334155); border-radius: 6px; background: var(--bg-dark-ops, #0f172a); color: var(--text-main, #e2e8f0); font-size: 0.86rem; } .maxek-layout .petty-line-amount { text-align: right; } .maxek-layout .petty-total-label { text-align: right; font-weight: 700; color: var(--text-main, #e2e8f0); } .maxek-layout .petty-total-input { width: 100%; height: 34px; padding: 6px 10px; border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 6px; background: rgba(59, 130, 246, 0.1); color: #93c5fd; font-weight: 700; text-align: right; } .maxek-layout .petty-form-bottom { display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 4px; border-top: 1px solid var(--border-form, #2a3548); } .maxek-layout .petty-form-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .maxek-layout .petty-dropzone { border: 1px dashed var(--border-form, #475569); border-radius: 8px; padding: 14px; text-align: center; cursor: pointer; background: rgba(15, 23, 42, 0.35); } .maxek-layout .petty-dropzone.is-dragover { border-color: #60a5fa; background: rgba(59, 130, 246, 0.08); } .maxek-layout .petty-dropzone input[type="file"] { display: none; } .maxek-layout .petty-dropzone-ui { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-muted, #94a3b8); font-size: 0.82rem; } .maxek-layout .module-layout--entry-form-open .petty-cash-module [data-hide-on-entry-open] { display: none !important; } @media (max-width: 1100px) { .maxek-layout .petty-cash-entry-panel .petty-form-columns { grid-template-columns: 1fr; } .maxek-layout .petty-cash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .maxek-layout .petty-cash-kpi-row { grid-template-columns: 1fr; } } /* MAXEK dashboard standard refresh - 20260709 */ .maxek-layout.ux-main-dashboard-page, .maxek-layout.ux-standard-dept-page, .maxek-layout.approvals-standard-page { --ux-bg: #07111f; --ux-panel: rgba(15, 30, 50, 0.82); --ux-panel-strong: rgba(20, 36, 60, 0.95); --ux-border: rgba(148, 163, 184, 0.18); --ux-border-strong: rgba(96, 165, 250, 0.34); --ux-text: #f8fafc; --ux-muted: #9fb0c6; --ux-red: #ef2626; --ux-green: #22c55e; --ux-blue: #60a5fa; --ux-purple: #a855f7; background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.13), transparent 34%), linear-gradient(180deg, #07111f 0%, #0b1624 48%, #07111f 100%); } .maxek-layout.ux-main-dashboard-page .pro-dash-content, .maxek-layout.ux-standard-dept-page .pro-dash-content, .maxek-layout.approvals-standard-page .dashboard-body { padding-top: clamp(76px, 6vw, 112px); } .ux-main-dashboard, .ux-dept-dashboard, .ux-approval-page { color: var(--ux-text); width: min(100%, 1680px); margin: 0 auto; padding: 8px clamp(16px, 2vw, 28px) 32px; } .ux-eyebrow { margin: 0 0 6px; color: #93c5fd; font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .ux-main-hero, .ux-dept-hero, .ux-approval-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; padding: 10px 0 8px; } .ux-main-hero h1, .ux-dept-hero h1, .ux-approval-hero h1 { margin: 0; color: #fff; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.15; letter-spacing: 0; } .ux-main-hero p, .ux-dept-hero p, .ux-approval-hero p, .ux-panel-head p { margin: 7px 0 0; color: var(--ux-muted); font-size: 0.95rem; } .ux-main-actions, .ux-dept-hero-main { display: flex; align-items: center; gap: 12px; } .ux-dept-hero-icon, .ux-tool-icon { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #bfdbfe; background: color-mix(in srgb, var(--dept-accent, #3b82f6) 28%, rgba(15, 23, 42, 0.96)); } .ux-dept-hero-icon { width: 52px; height: 52px; font-size: 1.25rem; } .ux-soft-btn, .ux-approval-top-tabs a, .ux-role-tabs a, .ux-module-pills a, .ux-status-pills a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ux-border); border-radius: 8px; color: #e5eefb; background: rgba(15, 23, 42, 0.78); padding: 0 14px; text-decoration: none; font-weight: 800; white-space: nowrap; } .ux-soft-btn:hover, .ux-approval-top-tabs a:hover, .ux-role-tabs a:hover, .ux-module-pills a:hover, .ux-status-pills a:hover { border-color: var(--ux-border-strong); color: #fff; } .ux-panel, .ux-side-card, .ux-filter-panel, .ux-approval-table-panel { border: 1px solid var(--ux-border); border-radius: 8px; background: linear-gradient(180deg, rgba(17, 34, 56, 0.92), rgba(10, 23, 39, 0.86)); box-shadow: 0 18px 45px rgba(2, 6, 23, 0.22); } .ux-panel { padding: 16px; margin-bottom: 16px; } .ux-panel--flat { background: rgba(11, 25, 42, 0.72); } .ux-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .ux-panel-head h2, .ux-side-card h2, .ux-table-head h2 { margin: 0; color: #fff; font-size: 1rem; letter-spacing: 0; } .ux-main-workflow { margin-bottom: 18px; } .ux-main-dept-grid { grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 14px; } .ux-main-departments .pro-dash-dept-tile, .ux-main-departments .dept-module-tile { min-height: 92px; } .ux-dept-layout, .ux-approval-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } .ux-dept-primary, .ux-approval-primary { min-width: 0; } .ux-dept-side, .ux-approval-side { display: grid; gap: 14px; } .ux-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ux-kpi-card { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid rgba(96, 165, 250, 0.28); border-radius: 8px; background: linear-gradient(135deg, rgba(29, 78, 216, 0.18), rgba(15, 23, 42, 0.74)); } .ux-kpi-card--1 { border-color: rgba(168, 85, 247, 0.42); } .ux-kpi-card--2 { border-color: rgba(96, 165, 250, 0.42); } .ux-kpi-card--3 { border-color: rgba(245, 158, 11, 0.44); } .ux-kpi-card--4 { border-color: rgba(34, 197, 94, 0.44); } .ux-kpi-card span, .ux-insight-row span, .ux-tool-copy small { color: var(--ux-muted); font-size: 0.82rem; } .ux-kpi-card strong { display: block; margin-top: 8px; color: #fff; font-size: 1.8rem; line-height: 1; } .ux-kpi-card i { color: color-mix(in srgb, var(--dept-accent, #60a5fa) 72%, #fff); font-size: 2rem; opacity: 0.9; } .ux-tool-grid, .ux-report-grid, .ux-ticket-grid { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 12px; } .ux-report-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); } .ux-ticket-grid { grid-template-columns: repeat(4, minmax(200px, 1fr)); } .ux-tool-card, .ux-report-card, .ux-ticket-card { min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ux-border); border-radius: 8px; color: #f8fafc; text-decoration: none; background: rgba(15, 31, 52, 0.82); } .ux-tool-card:hover, .ux-report-card:hover, .ux-ticket-card:hover { border-color: var(--ux-border-strong); transform: translateY(-1px); } .ux-tool-copy { min-width: 0; display: grid; gap: 4px; flex: 1 1 auto; } .ux-tool-copy strong { color: #fff; font-size: 0.93rem; line-height: 1.2; } .ux-tool-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ux-chip, .ux-run-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 9px; border-radius: 999px; color: #bfdbfe; background: rgba(37, 99, 235, 0.28); font-size: 0.72rem; font-weight: 800; } .ux-run-pill { margin-left: auto; } .ux-card-arrow { color: #cbd5e1; margin-left: auto; } .ux-side-card { padding: 14px; } .ux-insight-list, .ux-mini-list { display: grid; gap: 8px; margin-top: 12px; } .ux-insight-row, .ux-mini-list a { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 8px; background: rgba(15, 23, 42, 0.44); } .ux-insight-row strong { color: #fff; } .ux-mini-list a { justify-content: flex-start; color: #dbeafe; text-decoration: none; font-weight: 800; } .ux-mini-list i { color: var(--ux-blue); } .ux-donut-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .ux-donut { width: 88px; height: 88px; border-radius: 50%; background: conic-gradient(var(--ux-green) 0 56%, #f59e0b 56% 82%, #ef4444 82% 100%); position: relative; } .ux-donut::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: #0a1727; } .ux-donut-meta { display: grid; gap: 4px; } .ux-donut-meta strong { color: #fff; font-size: 1.5rem; } .ux-donut-meta span { color: var(--ux-muted); } .ux-approval-top-tabs { display: flex; gap: 8px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; } .ux-approval-top-tabs::-webkit-scrollbar { display: none; } .ux-approval-top-tabs a { min-width: 180px; flex-shrink: 0; justify-content: space-between; } .ux-approval-top-tabs a.is-active, .ux-role-tabs a.is-active, .ux-module-pills a.is-active, .ux-status-pills a.is-active { border-color: var(--ux-blue); color: #fff; background: rgba(59, 130, 246, 0.28); } .ux-approval-top-tabs strong { min-width: 30px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: var(--ux-blue); font-size: 0.75rem; } .ux-queue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; } .ux-queue-card { min-height: 56px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 8px 14px; border: 1px solid var(--ux-border); border-left: 5px solid var(--ux-red); border-radius: 8px; color: #f8fafc; text-decoration: none; background: var(--ux-panel-strong); } .ux-queue-card.is-active { border-color: var(--ux-blue); border-left-color: var(--ux-blue); } .ux-queue-card i { grid-row: span 3; color: var(--ux-blue); font-size: 1.4rem; } .ux-queue-card span { color: #e5e7eb; font-weight: 900; text-transform: uppercase; } .ux-queue-card strong { color: var(--ux-blue); font-size: 1.3rem; } .ux-queue-card small { color: var(--ux-muted); } .ux-filter-panel { display: grid; gap: 8px; padding: 10px 12px; margin-bottom: 8px; } .ux-role-tabs, .ux-module-pills, .ux-status-pills { display: flex; flex-wrap: wrap; gap: 8px; } .ux-approval-table-panel { overflow: hidden; } .ux-table-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--ux-border); background: rgba(20, 36, 60, 0.76); } .ux-select-row { display: inline-flex; align-items: center; gap: 10px; color: #e5e7eb; font-weight: 700; } .ux-approval-table { min-width: 920px; } .ux-approval-table th, .ux-approval-table td { vertical-align: middle; } .ux-approval-table th:last-child, .ux-approval-table td:last-child { position: sticky; right: 0; background: rgba(10, 23, 39, 0.96); box-shadow: -8px 0 12px -8px rgba(2, 6, 23, 0.55); } .ux-row-actions { justify-content: flex-start; flex-wrap: nowrap; } .ux-per-page-select { display: inline-flex; align-items: center; gap: 6px; color: var(--ux-muted, #94a3b8); font-size: 0.85rem; margin-left: auto; } .ux-per-page-select select { background: rgba(20, 36, 60, 0.9); color: #fff; border: 1px solid var(--ux-border); border-radius: 6px; padding: 4px 8px; } .erp-pagination .erp-btn.is-disabled { opacity: 0.4; pointer-events: none; } .ux-row-actions .erp-btn-primary { background: var(--ux-red); border-color: var(--ux-red); } .ux-empty-state { color: var(--ux-muted); } @media (max-width: 1400px) { .ux-main-dept-grid, .ux-tool-grid, .ux-report-grid, .ux-ticket-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .ux-dept-layout, .ux-approval-layout { grid-template-columns: 1fr; } .ux-dept-side, .ux-approval-side { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px) { .ux-main-hero, .ux-dept-hero, .ux-approval-hero { align-items: flex-start; flex-direction: column; } .ux-kpi-grid, .ux-queue-grid, .ux-dept-side, .ux-approval-side { grid-template-columns: 1fr; } .ux-main-dept-grid, .ux-tool-grid, .ux-report-grid, .ux-ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ux-main-dashboard, .ux-dept-dashboard, .ux-approval-page { padding-inline: 12px; } .ux-main-dept-grid, .ux-tool-grid, .ux-report-grid, .ux-ticket-grid { grid-template-columns: 1fr; } .ux-table-head { align-items: flex-start; flex-direction: column; } } /* Platform sidebar compact fix */ .platform-command-centre-page .tool-rail { width: 260px !important; min-width: 260px !important; padding: 18px 14px !important; overflow-y: auto !important; } .platform-command-centre-page .tool-rail a, .platform-command-centre-page .tool-rail .rail-btn, .platform-command-centre-page .tool-rail .rail-subbtn, .platform-command-centre-page .tool-rail summary { display: flex !important; align-items: center !important; gap: 9px !important; width: 100% !important; min-height: 40px !important; margin: 4px 0 !important; padding: 9px 10px !important; white-space: normal !important; box-sizing: border-box !important; } .platform-command-centre-page .tool-rail i { width: 18px !important; min-width: 18px !important; text-align: center !important; } .platform-command-centre-page .main-window { margin-left: 260px !important; } .platform-command-centre-page .top-utility-strip { min-height: 76px !important; height: auto !important; gap: 14px !important; padding: 10px 18px !important; } .platform-command-centre-page .header-actions { display: flex !important; gap: 8px !important; align-items: center !important; white-space: nowrap !important; } .platform-command-centre-page .header-icon-btn { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; position: relative !important; } .platform-command-centre-page .dashboard-body { padding-top: 32px !important; } .platform-command-centre-page .erp-platform-dashboard { max-width: 1180px !important; margin: 0 auto !important; padding: 0 18px 44px !important; } /* Dashboard shell stability — deliberately scoped to avoid changing module headers, department insight asides, tables, and ordinary ERP cards. */ .pro-dashboard-mode .pro-dash-shell:not(.is-sidebar-collapsed) .pro-dash-sidebar { width: 260px; min-width: 260px; } .pro-dashboard-mode .pro-dash-sidebar-nav { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; } .pro-dashboard-mode .pro-dash-sidebar-section { display: grid; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); } .pro-dashboard-mode .pro-dash-sidebar-section-title { padding: 4px 12px 7px; color: var(--text-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .pro-dashboard-mode .pro-dash-nav-link--module { min-height: 36px; padding-top: 8px; padding-bottom: 8px; font-size: 0.78rem; } .pro-dashboard-mode .pro-dash-nav-link--module small { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 999px; color: #fff; background: rgba(227, 6, 19, 0.7); text-align: center; } .pro-dashboard-mode .pro-dash-nav-link.is-active { background: rgba(227, 6, 19, 0.16); color: #fff; box-shadow: inset 3px 0 0 var(--maxek-red); } .command-centre-page { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1500px; margin: 0 auto; } .command-centre-page .cc-page-eyebrow, .command-centre-page .cc-page-meta { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.78rem; } .command-centre-page .cc-page-meta { flex-wrap: wrap; margin-top: 12px; gap: 10px 18px; } .command-centre-page .cc-kpi-card { display: flex; flex-direction: column; min-width: 0; min-height: 112px; padding: 16px 18px; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-left: 3px solid var(--maxek-red); border-radius: 10px; } .command-centre-page .cc-kpi-label { margin: 0; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .command-centre-page .cc-kpi-value { margin-top: 8px; font-size: 1.75rem; line-height: 1; color: var(--text-main); } .command-centre-page .cc-kpi-hint { margin-top: auto; padding-top: 8px; font-size: 0.75rem; } .command-centre-page .cc-panel { padding: 16px 18px; background: var(--bg-card-dark); border: 1px solid var(--border-subtle); border-radius: 12px; } .command-centre-page .cc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .command-centre-page .cc-panel-head h2 { margin: 0; font-size: 0.95rem; } .command-centre-page .cc-activity-list, .command-centre-page .cc-quick-actions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .command-centre-page .cc-activity-item, .command-centre-page .cc-quick-action { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; color: var(--text-main); text-decoration: none; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-subtle); border-radius: 8px; } .command-centre-page .cc-activity-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .command-centre-page .cc-activity-body span, .command-centre-page .cc-activity-time { color: var(--text-muted); font-size: 0.75rem; } .ux-standard-dept-page .ux-dept-layout { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); overflow: visible; } .ux-standard-dept-page .ux-dept-primary, .ux-standard-dept-page .ux-panel { width: 100%; min-width: 0; max-width: 100%; } .ux-standard-dept-page .ux-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } .ux-standard-dept-page .ux-kpi-card { min-width: 0; overflow: hidden; } .ux-standard-dept-page .ux-kpi-card > div { min-width: 0; } .ux-standard-dept-page .ux-kpi-card strong { font-size: clamp(1.35rem, 2vw, 1.75rem); overflow-wrap: anywhere; } .ux-standard-dept-page .ux-kpi-card > i { flex: 0 0 auto; font-size: 1.65rem; } .ux-standard-dept-page .ux-tool-grid, .ux-standard-dept-page .ux-report-grid, .ux-standard-dept-page .ux-ticket-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .ux-standard-dept-page .ux-tool-card, .ux-standard-dept-page .ux-report-card, .ux-standard-dept-page .ux-ticket-card { min-width: 0; overflow: hidden; } .ux-standard-dept-page .ux-dept-side { width: auto; min-width: 0; position: sticky; top: 16px; padding: 0; background: transparent; } @media (max-width: 1100px) { .command-centre-page .cc-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .command-centre-page .cc-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ux-standard-dept-page .ux-dept-layout { grid-template-columns: 1fr; } .ux-standard-dept-page .ux-dept-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } @media (max-width: 720px) { .command-centre-page .cc-kpi-row, .command-centre-page .cc-dept-grid, .command-centre-page .cc-bottom-row { grid-template-columns: 1fr; } }