/* ═══════════════════════════════════════════════════════════════ HOSPITALITY eOFFICE — Gray Aero Theme ═══════════════════════════════════════════════════════════════ */ /* ── CSS Variables ── */ :root { --bg: #e8eaed; --bg2: #d6d9de; --surface: #f0f2f5; --surface2: #ffffff; --border: #c4c8cf; --border2: #b0b5be; --text: #1e2128; --text-muted: #6b7280; --text-light: #9ca3af; --primary: #3b5bdb; --primary-dark: #2f4ac5; --primary-light:#dbe4ff; --success: #2f9e44; --success-bg: #d3f9d8; --warning: #e67700; --warning-bg: #fff3bf; --danger: #c92a2a; --danger-bg: #ffe3e3; --info: #1971c2; --info-bg: #d0ebff; --shadow: 0 2px 8px rgba(0,0,0,.12); --shadow-lg: 0 8px 24px rgba(0,0,0,.16); --radius: 8px; --radius-lg: 12px; --sidebar-w: 240px; --header-h: 56px; --transition: .18s ease; /* Aero glass effect */ --glass: rgba(255,255,255,.55); --glass-border: rgba(255,255,255,.8); } /* ═══════════════════════════════════════════════════════════════ ADDITIONAL AERO THEMES (applied via data-theme on ) ═══════════════════════════════════════════════════════════════ */ /* ── Dark Aero ── */ [data-theme="dark-aero"] { --bg: #161b22; --bg2: #0d1117; --surface: #1f2630; --surface2: #252d3a; --border: #30363f; --border2: #3d4555; --text: #e1e7ef; --text-muted: #8b949e; --text-light: #555f6b; --primary: #58a6ff; --primary-dark: #388bfd; --primary-light:#1f3a5f; --success: #3fb950; --success-bg: #0f2a18; --warning: #d29922; --warning-bg: #2d2007; --danger: #f85149; --danger-bg: #3b1014; --info: #79c0ff; --info-bg: #0e2a45; --shadow: 0 2px 8px rgba(0,0,0,.5); --shadow-lg: 0 8px 24px rgba(0,0,0,.6); --glass: rgba(22,27,34,.72); --glass-border: rgba(255,255,255,.08); } [data-theme="dark-aero"] .sidebar { background: linear-gradient(175deg, #0d1117 0%, #060a10 100%); } [data-theme="dark-aero"] .header { background: rgba(22,27,34,.85); border-bottom-color: #30363f; } [data-theme="dark-aero"] .modal { background: #1f2630; } [data-theme="dark-aero"] .card { background: #1f2630; border-color: #30363f; } /* ── Blue Aero ── */ [data-theme="blue-aero"] { --bg: #e6eef8; --bg2: #d5e4f4; --surface: #eef4fc; --surface2: #ffffff; --border: #b8d0eb; --border2: #9bbce0; --text: #0f1f3d; --text-muted: #4a6a90; --text-light: #7da0c4; --primary: #1155cc; --primary-dark: #0d47a1; --primary-light:#c8dcf5; --success: #1a7a40; --success-bg: #c6f0d5; --warning: #b45900; --warning-bg: #fff0c5; --danger: #c62828; --danger-bg: #fde8e8; --info: #0277bd; --info-bg: #c5e8f9; --shadow: 0 2px 8px rgba(17,85,204,.15); --shadow-lg: 0 8px 24px rgba(17,85,204,.2); --glass: rgba(230,238,248,.65); --glass-border: rgba(255,255,255,.85); } [data-theme="blue-aero"] .sidebar { background: linear-gradient(175deg, #1a3a6e 0%, #0d2448 100%); } [data-theme="blue-aero"] .header { background: rgba(230,238,248,.75); backdrop-filter: blur(14px); } /* ── Purple Aero ── */ [data-theme="purple-aero"] { --bg: #ede8f5; --bg2: #e0d8f0; --surface: #f3effa; --surface2: #ffffff; --border: #c9bcdf; --border2: #b5a5d4; --text: #1a0f2e; --text-muted: #6a5890; --text-light: #9c8bba; --primary: #7c3aed; --primary-dark: #6d28d9; --primary-light:#ddd6fe; --success: #1e7e50; --success-bg: #d1f5e5; --warning: #a85c00; --warning-bg: #fef5d5; --danger: #be1b2b; --danger-bg: #fde8ea; --info: #4338ca; --info-bg: #e0e7ff; --shadow: 0 2px 8px rgba(124,58,237,.15); --shadow-lg: 0 8px 24px rgba(124,58,237,.22); --glass: rgba(237,232,245,.65); --glass-border: rgba(255,255,255,.85); } [data-theme="purple-aero"] .sidebar { background: linear-gradient(175deg, #3b1a6e 0%, #220d4a 100%); } [data-theme="purple-aero"] .header { background: rgba(237,232,245,.75); backdrop-filter: blur(14px); } /* ── Green Aero ── */ [data-theme="green-aero"] { --bg: #e6f2ec; --bg2: #d4e8dc; --surface: #eef7f2; --surface2: #ffffff; --border: #b2d9c2; --border2: #93c8a8; --text: #0a1f14; --text-muted: #3d6b50; --text-light: #72a886; --primary: #1a7a40; --primary-dark: #146030; --primary-light:#c0ecd2; --success: #1a7a40; --success-bg: #c6f0d5; --warning: #997700; --warning-bg: #fef9c3; --danger: #c0392b; --danger-bg: #fde8e8; --info: #0e7490; --info-bg: #cff3fb; --shadow: 0 2px 8px rgba(26,122,64,.15); --shadow-lg: 0 8px 24px rgba(26,122,64,.2); --glass: rgba(230,242,236,.65); --glass-border: rgba(255,255,255,.85); } [data-theme="green-aero"] .sidebar { background: linear-gradient(175deg, #0f3d22 0%, #07261a 100%); } [data-theme="green-aero"] .header { background: rgba(230,242,236,.75); backdrop-filter: blur(14px); } /* ── Admin: per-module permission grid checkboxes ── */ #menuPermBody input[type="checkbox"].menu-perm-cb { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); vertical-align: middle; } /* ── Theme Picker (sidebar bottom) ── */ .theme-picker { padding: .6rem .8rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: .35rem; } .theme-picker-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); font-weight: 700; } .theme-swatches { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .theme-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.3); transition: border-color .15s, transform .15s, box-shadow .15s; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.4); } .theme-swatch:hover { transform: scale(1.2); border-color: rgba(255,255,255,.7); box-shadow: 0 2px 6px rgba(0,0,0,.5); } .theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.5); } .theme-swatch[data-t="default"] { background: radial-gradient(circle at 40% 40%, #6b7280, #374151); } .theme-swatch[data-t="dark-aero"] { background: radial-gradient(circle at 40% 40%, #58a6ff, #0d1117); } .theme-swatch[data-t="blue-aero"] { background: radial-gradient(circle at 40% 40%, #5b9eff, #1a3a6e); } .theme-swatch[data-t="purple-aero"] { background: radial-gradient(circle at 40% 40%, #a78bfa, #3b1a6e); } .theme-swatch[data-t="green-aero"] { background: radial-gradient(circle at 40% 40%, #34d399, #0f3d22); } /* ══════════════════════════════════════════════════════════════ */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; scroll-behavior: smooth; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } button { cursor: pointer; font-family: inherit; } input, select, textarea { font-family: inherit; } ul { list-style: none; } /* ── Utility ── */ .hidden { display: none !important; } .flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .flex-1 { flex: 1; } .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--text-muted); } .text-sm { font-size: .85rem; } .text-lg { font-size: 1.15rem; } .fw-600 { font-weight: 600; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .w-100 { width: 100%; } .overflow-hidden { overflow: hidden; } /* ── Status Badges ── */ .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 20px; font-size: .75rem; font-weight: 600; white-space: nowrap; } .badge-pending { background: var(--warning-bg); color: var(--warning); } .badge-approved { background: var(--success-bg); color: var(--success); } .badge-rejected { background: var(--danger-bg); color: var(--danger); } .badge-returned { background: var(--info-bg); color: var(--info); } .badge-draft { background: var(--bg2); color: var(--text-muted); } /* Alias variants used in plans / recruitment */ .badge-primary { background: rgba(99,102,241,.12); color: #6366f1; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-secondary { background: var(--bg2); color: var(--text-muted); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500; border: none; transition: filter var(--transition), opacity var(--transition); white-space: nowrap; } .btn:hover { filter: brightness(.93); } .btn:active { filter: brightness(.87); } .btn-primary { background: var(--primary); color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-warning { background: var(--warning); color: #fff; } .btn-secondary { background: var(--bg2); color: var(--text); border: 1px solid var(--border); } .btn-ghost { background: transparent; color: var(--primary); } .btn-sm { padding: .3rem .7rem; font-size: .8rem; } .btn-icon { padding: .4rem; border-radius: 6px; background: var(--bg2); border: 1px solid var(--border); } /* ── Forms ── */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; color: var(--text); } .form-control, .form-input { width: 100%; padding: .55rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); color: var(--text); font-size: .9rem; transition: border-color var(--transition), box-shadow var(--transition); box-sizing: border-box; } .form-control:focus, .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .form-control[readonly], .form-input[readonly] { background: var(--bg); } textarea.form-control, textarea.form-input { resize: vertical; min-height: 80px; } input.form-control, select.form-control, input.form-input, select.form-input { height: 2.6rem; box-sizing: border-box; } .form-row { display: grid; gap: 1rem; } .form-row.cols-2 { grid-template-columns: 1fr 1fr; } .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } /* ── Cards ── */ .card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .card-header { padding: .9rem 1.2rem; background: linear-gradient(135deg, #f5f6fa 0%, #e8eaed 100%); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 1rem; font-weight: 700; } .card-body { padding: 1.2rem; } /* ── Table ── */ .table-wrap { overflow-x: auto; border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; font-size: .88rem; } thead { background: linear-gradient(135deg, #f0f2f5, #e4e6ea); } th { padding: .65rem 1rem; text-align: left; font-weight: 700; color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--border); } td { padding: .65rem 1rem; border-bottom: 1px solid var(--bg2); vertical-align: middle; } tr:hover td { background: #f7f8fa; } tr:last-child td { border-bottom: none; } /* ── Login Page ── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #c9d1e0 0%, #e8eaed 50%, #d4d9e2 100%); position: relative; overflow: hidden; } .login-page::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.4) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(180,195,220,.3) 0%, transparent 55%); } .login-box { position: relative; z-index: 1; background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); } .login-logo { text-align: center; margin-bottom: 1.5rem; } .login-logo img { height: 64px; object-fit: contain; } .login-logo h1 { font-size: 1.3rem; font-weight: 800; margin-top: .5rem; color: var(--text); } .login-logo p { font-size: .8rem; color: var(--text-muted); } /* ── App Shell ── */ .app-shell { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(175deg, #2c3347 0%, #1e2330 100%); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: transform var(--transition); box-shadow: 2px 0 12px rgba(0,0,0,.25); } .sidebar-logo { padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: .75rem; } .sidebar-logo img { height: 36px; border-radius: 6px; } .sidebar-logo .app-name { font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.2; } .sidebar-logo .app-sub { font-size: .7rem; color: rgba(255,255,255,.45); } .sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem 0; } .nav-section { padding: .25rem .75rem .1rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); font-weight: 700; margin-top: .5rem; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: .7rem; padding: .55rem 1.1rem; color: rgba(255,255,255,.72); font-size: .88rem; border-radius: 6px; margin: .1rem .5rem; transition: background var(--transition), color var(--transition); } .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; } .nav-link.active { background: var(--primary); color: #fff; } .nav-link svg { flex-shrink: 0; opacity: .85; } .nav-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: .65rem; font-weight: 700; padding: 1px 6px; border-radius: 20px; } .nav-sub { padding-left: 1rem; overflow: hidden; max-height: 0; transition: max-height .25s ease; } .nav-sub.open { max-height: 500px; } .nav-sub .nav-link { font-size: .84rem; padding: .45rem .9rem; } .nav-arrow { margin-left: auto; transition: transform .2s; font-size: .75rem; opacity: .6; } .nav-link.has-sub.open .nav-arrow { transform: rotate(90deg); } /* Header */ .header { height: var(--header-h); background: var(--glass); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; padding: 0 1.2rem; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .header-menu-btn { display: none; background: none; border: none; padding: .3rem; } .header-title { font-size: 1.05rem; font-weight: 700; flex: 1; } .header-actions { display: flex; align-items: center; gap: .5rem; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; } .user-info .name { font-size: .85rem; font-weight: 600; } .user-info .dept { font-size: .72rem; color: var(--text-muted); } /* Main content */ .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; } .page-content { flex: 1; padding: 1.5rem; } /* ── Stat Cards ── */ .stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow); } .stat-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .stat-icon.blue { background: var(--primary-light); color: var(--primary); } .stat-icon.green { background: var(--success-bg); color: var(--success); } .stat-icon.amber { background: var(--warning-bg); color: var(--warning); } .stat-icon.red { background: var(--danger-bg); color: var(--danger); } .stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; } .stat-label { font-size: .78rem; color: var(--text-muted); margin-top: .2rem; } /* ── Progress Steps (Gate Pass workflow) ── */ .progress-steps { display: flex; align-items: center; gap: 0; margin: 1rem 0; overflow-x: auto; } .step-item { display: flex; align-items: center; flex: 1; min-width: 80px; } .step-circle { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; border: 2px solid var(--border); background: var(--surface2); color: var(--text-muted); position: relative; z-index: 1; } .step-circle.done { background: var(--success); border-color: var(--success); color: #fff; } .step-circle.active { background: var(--primary); border-color: var(--primary); color: #fff; } .step-circle.rejected{ background: var(--danger); border-color: var(--danger); color: #fff; } .step-connector { flex: 1; height: 2px; background: var(--border); margin: 0; } .step-connector.done { background: var(--success); } .step-info { text-align: center; margin-top: .3rem; } .step-name { font-size: .7rem; font-weight: 600; white-space: nowrap; } .step-status{ font-size: .65rem; color: var(--text-muted); } /* ── Modal ── */ .modal-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.45); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .modal { background: var(--surface2); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn .18s ease; } .modal-lg { max-width: 780px; } .modal-header { padding: 1rem 1.2rem; background: linear-gradient(135deg, #f5f6fa, #e8eaed); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; } .modal-title { font-size: 1rem; font-weight: 700; } .modal-close { background: none; border: none; font-size: 1.3rem; color: var(--text-muted); width: 30px; height: 30px; border-radius: 6px; transition: background var(--transition); } .modal-close:hover { background: var(--bg2); } .modal-body { padding: 1.2rem; } .modal-footer { padding: .9rem 1.2rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .6rem; } @keyframes modalIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } } /* ── Toast ── */ .toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .4rem; } .toast { min-width: 220px; max-width: 340px; padding: .75rem 1rem; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; align-items: flex-start; gap: .6rem; animation: toastIn .2s ease; } .toast.success { border-left: 4px solid var(--success); } .toast.error { border-left: 4px solid var(--danger); } .toast.info { border-left: 4px solid var(--primary); } .toast.warning { border-left: 4px solid var(--warning); } @keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } } /* ── Tabs ── */ .tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1rem; gap: 0; overflow-x: auto; } .tab-btn { padding: .6rem 1.1rem; font-size: .875rem; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--transition); white-space: nowrap; } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── Chat ── */ .chat-layout { display: flex; height: calc(100vh - var(--header-h) - 3rem); gap: 1rem; } .chat-users { width: 240px; flex-shrink: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-y: auto; } /* Mobile contacts toggle button — hidden on desktop */ .chat-contacts-btn { display: none; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: .82rem; cursor: pointer; white-space: nowrap; margin-right: .5rem; } /* Close (✕) button inside contacts panel — hidden on desktop */ .chat-contacts-close { display: none; background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: 0; line-height: 1; } .chat-user-item { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; cursor: pointer; transition: background var(--transition); } .chat-user-item:hover, .chat-user-item.active { background: var(--primary-light); } .chat-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; position: relative; } .online-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface2); } .chat-window { flex: 1; display: flex; flex-direction: column; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; } .msg-bubble { max-width: 72%; padding: .55rem .9rem; border-radius: 12px; font-size: .875rem; line-height: 1.45; } .msg-bubble.mine { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; } .msg-bubble.theirs { background: var(--bg2); color: var(--text); align-self: flex-start; border-bottom-left-radius: 3px; } .msg-meta { font-size: .68rem; opacity: .7; margin-top: .2rem; } .chat-input-row { padding: .75rem; border-top: 1px solid var(--border); display: flex; gap: .6rem; } /* ── Roster ── */ .roster-grid { overflow-x: auto; } .roster-table th:first-child, .roster-table td:first-child { position: sticky; left: 0; background: var(--surface2); z-index: 1; box-shadow: 1px 0 0 var(--border); } /* ── Admin layout ── */ .admin-top-bar { background: linear-gradient(135deg, #2c3347, #1e2330); color: #fff; display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; height: var(--header-h); position: sticky; top: 0; z-index: 100; } .admin-top-logo { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1rem; } .admin-top-logo img { height: 30px; } .admin-nav { display: flex; gap: .25rem; flex: 1; overflow: visible; align-items: center; } .admin-nav-link { padding: .4rem .9rem; border-radius: 6px; color: rgba(255,255,255,.72); font-size: .83rem; font-weight: 600; white-space: nowrap; transition: background var(--transition), color var(--transition); } .admin-nav-link:hover, .admin-nav-link.active { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; } /* Functions dropdown group */ .admin-nav-group { position: relative; } .admin-nav-group-btn { padding: .4rem .9rem; border-radius: 6px; color: rgba(255,255,255,.72); font-size: .83rem; font-weight: 600; white-space: nowrap; cursor: pointer; background: none; border: none; display: flex; align-items: center; gap: .35rem; transition: background var(--transition), color var(--transition); } .admin-nav-group-btn:hover, .admin-nav-group-btn.active { background: rgba(255,255,255,.15); color: #fff; } .admin-nav-group-btn .arrow { font-size: .65rem; transition: transform .2s; } .admin-nav-group.open .arrow { transform: rotate(180deg); } .admin-nav-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); min-width: 180px; z-index: 200; padding: .4rem; } .admin-nav-group.open .admin-nav-dropdown { display: flex; flex-direction: column; gap: .1rem; } .admin-nav-dropdown .admin-nav-link { color: var(--text); border-radius: 6px; padding: .45rem .9rem; } .admin-nav-dropdown .admin-nav-link:hover, .admin-nav-dropdown .admin-nav-link.active { background: var(--primary); color: #fff; } .admin-content { max-width: 1280px; margin: 0 auto; padding: 1.5rem; } /* ── Image preview ── */ .img-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); cursor: pointer; } .img-full { max-width: 100%; border-radius: 8px; } /* ── Pagination ── */ .pagination { display: flex; gap: .3rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; } .page-btn { padding: .35rem .65rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); font-size: .8rem; cursor: pointer; transition: background var(--transition); } .page-btn:hover, .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Toggle Switch ── */ .toggle { position: relative; display: inline-block; width: 44px; height: 24px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border2); border-radius: 24px; cursor: pointer; transition: background .2s; } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .toggle input:checked + .toggle-slider { background: var(--success); } .toggle input:checked + .toggle-slider::before { transform: translateX(20px); } /* ── Search bar ── */ .search-bar { display: flex; align-items: center; gap: .5rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .75rem; transition: border-color var(--transition); } .search-bar:focus-within { border-color: var(--primary); } .search-bar input { border: none; background: none; outline: none; font-size: .875rem; flex: 1; color: var(--text); } /* ── Overlay sidebar on mobile ── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199; } /* ══════════════════════════════════════════ HOME LANDING PAGE (hlp-*) ══════════════════════════════════════════ */ /* Hero — bleeds to page edges by undoing the 1.5rem page-content padding */ .hlp-hero { margin: -1.5rem -1.5rem 0; background: linear-gradient(135deg,#1c3aa9 0%,#3b5bdb 100%); position: relative; overflow: hidden; } /* Blurred background image layer */ .hlp-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background: linear-gradient(135deg,#1c3aa9 0%,#3b5bdb 100%); /* fallback */ filter: blur(10px); transform: scale(1.12); /* prevent blurred edges from bleeding out */ z-index: 0; } .hlp-hero-overlay { position: relative; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,.72) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem 2.5rem 1.5rem; } /* Notice board inside hero */ /* Notice board — lives in the About panel (not the hero) */ .hlp-about-notice-heading { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); margin-bottom: .6rem; display: flex; align-items: center; gap: .35rem; } #hlpNoticeBoard { display: flex; flex-direction: column; gap: .6rem; } .hlp-notice-card { background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 8px; padding: .7rem .9rem; color: var(--text); } .hlp-notice-badge { display: inline-flex; align-items: center; gap: .22rem; font-size: .58rem; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 20px; margin-bottom: .3rem; } .hlp-notice-badge.new { background: #22c55e; color: #fff; } .hlp-notice-badge.expired { background: #94a3b8; color: #fff; } .hlp-notice-card-title { font-weight: 700; font-size: .85rem; line-height: 1.3; margin-bottom: .2rem; } .hlp-notice-card-body { font-size: .75rem; color: var(--text-muted); line-height: 1.5; } .hlp-notice-card-img { width: 100%; border-radius: 6px; margin-top: .5rem; max-height: 220px; object-fit: cover; } .hlp-notice-card-exp { font-size: .62rem; color: var(--text-muted); margin-top: .35rem; } .hlp-notice-empty { font-size: .78rem; color: var(--text-muted); padding: .25rem 0; } .hlp-hero-inner { color: #fff; max-width: 700px; } .hlp-hero-logo { height: 56px; object-fit: contain; margin-bottom: 1rem; border-radius: 6px; background: rgba(255,255,255,.12); padding: 4px 8px; } .hlp-hero-title { font-size: 2rem; font-weight: 800; letter-spacing: -.3px; margin-bottom: .3rem; line-height: 1.15; } .hlp-hero-sub { font-size: .9rem; opacity: .85; margin-bottom: 1.25rem; } .hlp-hero-btns { display: flex; gap: .65rem; flex-wrap: wrap; } /* ── Duty Log ── */ .duty-log-row-imgs { display:flex; gap:.4rem; flex-wrap:wrap; } .duty-log-thumb { width:48px; height:48px; object-fit:cover; border-radius:6px; cursor:pointer; border:1px solid var(--border); } .duty-log-img-preview { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; } .duty-log-img-preview img { height:70px; border-radius:8px; object-fit:cover; border:1px solid var(--border); } /* Duty Log Fullscreen */ #dlCard.dl-fullscreen { position: fixed; inset: 0; z-index: 1000; border-radius: 0; display: flex; flex-direction: column; margin: 0; overflow: hidden; } #dlCard.dl-fullscreen #dlTableWrap { flex: 1; overflow: auto; } #dlCard.dl-fullscreen .pagination { padding: .5rem 1rem; border-top: 1px solid var(--border); } .dl-fullscreen-bar { display: none; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; } #dlCard.dl-fullscreen .dl-fullscreen-bar { display: flex; } .btn-light { background: #fff; color: var(--primary); border: 1.5px solid #fff; font-weight: 600; } .btn-light:hover { background: #f0f4ff; } .btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.65); font-weight: 600; } .btn-outline-light:hover { background: rgba(255,255,255,.15); } /* Stats strip — also bleeds to edges */ .hlp-stats-strip { margin: 0 -1.5rem 0; background: var(--primary); display: grid; grid-template-columns: repeat(4,1fr); padding: 1.25rem 1.5rem; gap: 0; } .hlp-stat { display: flex; align-items: center; gap: .85rem; color: #fff; padding: .25rem 1rem; border-right: 1px solid rgba(255,255,255,.2); } .hlp-stat:first-child { padding-left: 0; } .hlp-stat:last-child { border-right: none; } .hlp-stat-icon { font-size: 1.75rem; flex-shrink: 0; } .hlp-stat-val { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; } .hlp-stat-label{ display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; opacity: .8; margin-top: .2rem; } /* About section */ .hlp-about { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 2.5rem 0 1.5rem; } .hlp-about-img-wrap { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 5rem; color: var(--text-light); } .hlp-about-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .hlp-about-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: .5rem; } .hlp-about-title { font-size: 1.45rem; font-weight: 800; margin-bottom: 0; } .hlp-about-divider { width: 38px; height: 3px; background: var(--warning); border-radius: 2px; margin: .6rem 0 .9rem; } .hlp-about-body { font-size: .875rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 1.5rem; } /* Module mini-grid (inside about) */ .hlp-modules-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; } .hlp-module-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem .85rem; cursor: pointer; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); display: flex; align-items: center; gap: .65rem; position: relative; overflow: hidden; } .hlp-module-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--primary); } .hlp-module-card--alert { border-color: var(--danger); } .hlp-module-card--highlight { background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%); border-color: transparent; color: #fff; } .hlp-module-card--highlight .hlp-module-name { color: #fff; } .hlp-module-card--highlight .hlp-module-sub { color: rgba(255,255,255,.75); } .hlp-module-card--highlight:hover { border-color: transparent; filter: brightness(1.08); } .hlp-module-icon { font-size: 1.5rem; flex-shrink: 0; } .hlp-module-name { font-weight: 600; font-size: .85rem; color: var(--text); line-height: 1.2; } .hlp-module-sub { font-size: .72rem; color: var(--text-muted); } .hlp-module-badge { position: absolute; top: .4rem; right: .4rem; background: var(--danger); color: #fff; font-size: .6rem; font-weight: 700; border-radius: 20px; padding: .1rem .4rem; min-width: 16px; text-align: center; } /* Bottom row */ .hlp-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } /* Activity feed */ .home-activity-item { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); } .home-activity-item:last-child { border-bottom: none; } .home-activity-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; } .home-activity-text { flex: 1; min-width: 0; } .home-activity-no { font-size: .82rem; font-weight: 600; color: var(--text); } .home-activity-meta { font-size: .72rem; color: var(--text-muted); } /* Notice board */ .home-announce-item { padding: .75rem 0; border-bottom: 1px solid var(--border); } .home-announce-item:last-child { border-bottom: none; } .home-announce-title { font-weight: 600; font-size: .88rem; margin-bottom: .3rem; } .home-announce-body { font-size: .8rem; color: var(--text-muted); line-height: 1.55; } .home-workflow-steps { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .65rem; } .home-workflow-step { background: var(--primary-light); color: var(--primary); border-radius: 20px; padding: .2rem .7rem; font-size: .72rem; font-weight: 600; } .home-workflow-arrow { color: var(--text-light); font-size: .8rem; } /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2,1fr); } .form-row.cols-3 { grid-template-columns: 1fr 1fr; } .form-row.cols-4 { grid-template-columns: 1fr 1fr; } .hlp-stats-strip { grid-template-columns: repeat(2,1fr); } .hlp-about { grid-template-columns: 1fr; } .hlp-bottom-row { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --sidebar-w: 240px; } .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .sidebar-overlay.open { display: block; } .main-content { margin-left: 0; } .header-menu-btn { display: flex; } .stat-grid { grid-template-columns: repeat(2,1fr); } .chat-users { display: none; } .chat-users.open { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 500; border-radius: 0; border-right: 1px solid var(--border); box-shadow: 4px 0 16px rgba(0,0,0,.18); } .chat-contacts-btn { display: flex; } .chat-contacts-close { display: block; } .form-row.cols-2, .form-row.cols-3, .form-row.cols-4 { grid-template-columns: 1fr; } .admin-nav { display: none; } .admin-nav.open { display: flex; flex-direction: column; position: fixed; top: var(--header-h); left: 0; right: 0; background: #2c3347; padding: .5rem; z-index: 300; } .table-wrap { font-size: .8rem; } .modal { margin: .5rem; } } @media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr 1fr; } .page-content { padding: 1rem .75rem; } .login-box { padding: 1.75rem 1.25rem; } .progress-steps { gap: 0; } .step-circle { width: 26px; height: 26px; font-size: .65rem; } .hlp-hero { margin: -1rem -.75rem 0; } .hlp-stats-strip { margin: 0 -.75rem; grid-template-columns: repeat(2,1fr); } .hlp-hero-title { font-size: 1.4rem; } .hlp-modules-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════ WORK CALENDAR ═══════════════════════════════════════════════════════════════ */ /* Calendar tabs */ .cal-tab { background: none; border: none; padding: .45rem 1.1rem; font-size: .9rem; font-weight: 500; cursor: pointer; color: var(--text2); border-radius: var(--radius) var(--radius) 0 0; transition: var(--transition); position: relative; bottom: -2px; } .cal-tab:hover { color: var(--primary); } .cal-tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); font-weight: 600; } .cal-toolbar { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap; } .cal-nav-btn { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.3rem .75rem; font-size:.88rem; color:var(--text); cursor:pointer; transition:var(--transition); } .cal-nav-btn:hover { background:var(--bg2); } .cal-nav-btn.today { font-weight:600; } .cal-date-label { font-weight:700; font-size:1rem; color:var(--text); flex:1; } .cal-view-sel { font-size:.82rem; padding:.3rem .6rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); } .cal-grid-outer { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; } .cal-header-row { display:flex; border-bottom:2px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:4; } .cal-gutter-hdr { width:56px; flex-shrink:0; border-right:1px solid var(--border); } .cal-day-hdr { flex:1; padding:.5rem .25rem; text-align:center; border-right:1px solid var(--border2); min-width:0; } .cal-day-hdr:last-child { border-right:none; } .cal-day-hdr .dow { font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-size:.68rem; display:block; } .cal-day-hdr .dom { font-size:1.25rem; font-weight:700; color:var(--text); line-height:1.2; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; } .cal-day-hdr.cal-today .dom { background:var(--primary); color:#fff; } .cal-body { display:flex; overflow-y:auto; max-height:640px; } .cal-time-col { width:56px; flex-shrink:0; border-right:1px solid var(--border); } .cal-time-tick { height:64px; border-bottom:1px solid var(--border2); padding:.2rem .4rem 0 0; font-size:.68rem; color:var(--text-muted); text-align:right; box-sizing:border-box; } .cal-days-area { flex:1; display:flex; position:relative; } .cal-day-col { flex:1; border-right:1px solid var(--border2); position:relative; min-width:0; } .cal-day-col:last-child { border-right:none; } .cal-day-col.cal-today-col { background:rgba(59,91,219,.03); } .cal-hour-slot { height:64px; border-bottom:1px dashed var(--border); cursor:pointer; } .cal-hour-slot:hover { background:var(--primary-light); } .cal-half-mark { position:absolute; left:0; right:0; height:1px; background:var(--border2); opacity:.4; pointer-events:none; } .cal-event { position:absolute; left:3px; right:3px; border-radius:6px; padding:.25rem .45rem; font-size:.72rem; line-height:1.35; overflow:hidden; cursor:pointer; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.18); transition:filter .15s, transform .12s, box-shadow .15s; min-height:22px; } .cal-event:hover { filter:brightness(1.08); transform:translateX(1px); box-shadow:0 3px 10px rgba(0,0,0,.22); } .cal-event .ev-title { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-event .ev-time { opacity:.82; font-size:.65rem; } .cal-event .ev-desc { opacity:.75; font-size:.65rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-now-line { position:absolute; left:0; right:0; height:2px; background:var(--danger); z-index:3; pointer-events:none; } .cal-now-line::before { content:''; position:absolute; left:-4px; top:-4px; width:10px; height:10px; background:var(--danger); border-radius:50%; } /* Reminder banner */ .cal-reminder { position:fixed; top:calc(var(--header-h) + .75rem); right:1rem; z-index:500; max-width:340px; background:var(--surface2); border:1px solid var(--primary); border-left:4px solid var(--primary); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:1rem 1.25rem; animation:slideInRight .3s ease; } @keyframes slideInRight { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} } .cal-reminder-title { font-weight:700; font-size:.95rem; color:var(--text); margin-bottom:.25rem; } .cal-reminder-time { font-size:.82rem; color:var(--primary); font-weight:600; margin-bottom:.5rem; } .cal-reminder-desc { font-size:.8rem; color:var(--text-muted); margin-bottom:.75rem; } /* Color picker swatches */ .cal-color-swatches { display:flex; gap:.5rem; flex-wrap:wrap; } .cal-color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:.15s; } .cal-color-swatch.selected, .cal-color-swatch:hover { border-color:var(--text); transform:scale(1.15); } /* Month view */ .cal-month-grid { display:grid; grid-template-columns:repeat(7,1fr); border-left:1px solid var(--border); border-top:1px solid var(--border); } .cal-month-hdr { padding:.4rem .5rem; text-align:center; font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; border-right:1px solid var(--border); border-bottom:2px solid var(--border); background:var(--surface); } .cal-month-cell { min-height:108px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:.35rem .4rem; cursor:pointer; transition:background .1s; vertical-align:top; } .cal-month-cell:hover { background:var(--primary-light); } .cal-month-cell.other-month { background:var(--bg); opacity:.55; } .cal-month-cell.cal-today { background:rgba(59,91,219,.04); } .cal-month-date { font-size:.78rem; font-weight:700; color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; margin-bottom:.2rem; } .cal-month-cell.cal-today .cal-month-date { background:var(--primary); color:#fff; } .cal-month-event { font-size:.68rem; line-height:1.25; padding:.1rem .35rem; border-radius:4px; margin-bottom:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; display:block; } .cal-month-more { font-size:.65rem; color:var(--text-muted); padding:.05rem .35rem; cursor:pointer; } .cal-month-more:hover { color:var(--primary); text-decoration:underline; } @media (max-width:640px) { .cal-day-hdr .dom { font-size:1rem; width:26px; height:26px; } .cal-event { font-size:.65rem; } .cal-month-cell { min-height:70px; } .cal-month-event { display:none; } } /* (old theme blocks removed — see Aero Themes section near top of file) */ /* ══════════════════════════════════════════════════════════════ MEETING ROOM TIMELINE ════════════════════════════════════════════════════════════════ */ .mr-header { display: flex; border-bottom: 2px solid var(--border); background: var(--card-bg, #fff); position: sticky; top: 0; z-index: 10; } .mr-header-label { flex-shrink: 0; width: 160px; border-right: 1px solid var(--border); box-sizing: border-box; /* width:160px = total — matches .mr-room-label */ position: sticky; /* stick to left when timeline scrolls horizontally */ left: 0; z-index: 11; /* above header cells */ background: var(--card-bg, #fff); } .mr-header-cell { flex-shrink: 0; text-align: left; padding-left: .25rem; padding-top: .35rem; font-size: .72rem; font-weight: 600; color: var(--text-muted); line-height: 1.2; border-right: 1px solid var(--border); /* column dividers in header */ box-sizing: border-box; /* width:72px = total (content+padding+border) — no drift */ } .mr-body { background: var(--card-bg, #fff); } .mr-row { display: flex; border-bottom: 1px solid var(--border); min-height: 64px; } .mr-row:last-child { border-bottom: none; } .mr-room-label { flex-shrink: 0; display: flex; align-items: flex-start; padding: .5rem .6rem; border-right: 1px solid var(--border); background: var(--card-bg, #fff); position: sticky; left: 0; z-index: 5; gap: .25rem; box-sizing: border-box; /* width:160px = total (incl padding+border) — matches .mr-header-label */ } .mr-room-name { font-weight: 700; font-size: .82rem; line-height: 1.2; } .mr-room-sub { font-size: .7rem; color: var(--text-muted); } .mr-room-tag { background: var(--hover-bg); border: 1px solid var(--border); border-radius: 3px; padding: .05rem .3rem; font-size: .65rem; color: var(--text-muted); } .mr-timeline-cell { position: relative; box-sizing: content-box; /* width:1728px = content only; border-right is extra */ border-right: 1px solid var(--border); /* right-edge cap for the timeline */ background: repeating-linear-gradient( 90deg, transparent, transparent 71px, var(--border) 71px, var(--border) 72px ); } .mr-slot-bg { position: absolute; top: 0; bottom: 0; cursor: pointer; transition: background .1s; z-index: 1; } .mr-slot-bg:hover { background: rgba(99,102,241,.08); } .mr-booking-bar { position: absolute; top: 8px; bottom: 8px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; padding: 0 .5rem; overflow: hidden; z-index: 3; transition: filter .15s, box-shadow .15s; box-shadow: 0 2px 6px rgba(0,0,0,.15); } .mr-booking-bar:hover { filter: brightness(.88); box-shadow: 0 4px 12px rgba(0,0,0,.22); z-index: 4; } .mr-booking-label { font-size: .76rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger, #ef4444); z-index: 6; pointer-events: none; } .mr-now-line::before { content: ''; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger, #ef4444); } /* ═══════════════════════════════════════════════════════════════ CAPEX MODULE ═══════════════════════════════════════════════════════════════ */ /* ── CAPEX toolbar ── */ .capex-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .capex-toolbar select, .capex-toolbar input[type="text"] { padding: .4rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: .875rem; } /* ── CAPEX section header ── */ .capex-section-header { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--primary); color: #fff; border-radius: 10px 10px 0 0; font-weight: 700; font-size: .95rem; letter-spacing: .02em; margin-top: 1.25rem; } .capex-section-header:first-of-type { margin-top: 0; } .capex-section-count { background: rgba(255,255,255,.25); border-radius: 12px; padding: .1rem .55rem; font-size: .8rem; font-weight: 600; } .capex-section-total { margin-left: auto; font-size: .85rem; font-weight: 600; opacity: .92; } /* ── CAPEX table ── */ .capex-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; margin-bottom: 1.5rem; } .capex-table { width: 100%; border-collapse: collapse; font-size: .835rem; min-width: 900px; } .capex-table thead th { background: var(--surface-2, var(--surface)); color: var(--text-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .55rem .75rem; white-space: nowrap; border-bottom: 2px solid var(--border); text-align: left; } .capex-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; } .capex-table tbody tr:last-child { border-bottom: none; } .capex-table tbody tr:hover { background: var(--surface-hover, rgba(99,102,241,.05)); } .capex-table td { padding: .6rem .75rem; vertical-align: middle; color: var(--text); } .capex-table .td-actions { white-space: nowrap; text-align: right; } .capex-table .td-num { text-align: right; font-variant-numeric: tabular-nums; font-size: .82rem; } .capex-table tfoot td { font-weight: 700; background: var(--surface-2, var(--surface)); padding: .55rem .75rem; border-top: 2px solid var(--border); font-variant-numeric: tabular-nums; } /* ── Priority badge ── */ .capex-priority { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 700; font-size: .78rem; flex-shrink: 0; } .capex-priority-1 { background: #fef2f2; color: #dc2626; } .capex-priority-2 { background: #fff7ed; color: #ea580c; } .capex-priority-3 { background: #fefce8; color: #ca8a04; } .capex-priority-4 { background: #f0fdf4; color: #16a34a; } /* ── Status badge ── */ .capex-status { display: inline-block; padding: .18rem .6rem; border-radius: 20px; font-size: .75rem; font-weight: 600; white-space: nowrap; } .capex-status-not_started { background: #f3f4f6; color: #6b7280; } .capex-status-in_progress { background: #eff6ff; color: #2563eb; } .capex-status-pending { background: #fff7ed; color: #ea580c; } .capex-status-done { background: #f0fdf4; color: #16a34a; } /* ── Approved badge ── */ .capex-approved { display: inline-block; padding: .18rem .6rem; border-radius: 20px; font-size: .75rem; font-weight: 600; } .capex-approved-approved { background: #dcfce7; color: #15803d; } .capex-approved-not_yet { background: #fef9c3; color: #a16207; } /* ── Submission status banner ── */ .capex-sub-banner { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .875rem; font-weight: 500; } .capex-sub-banner.submitted { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; } .capex-sub-banner.approved { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; } .capex-sub-banner.rejected { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } /* ── Image thumbnails ── */ .capex-thumbs { display: flex; gap: .35rem; flex-wrap: wrap; } .capex-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; transition: opacity .15s; } .capex-thumb:hover { opacity: .8; } /* ── Image upload area ── */ .capex-img-upload { border: 2px dashed var(--border); border-radius: 10px; padding: 1rem; text-align: center; cursor: pointer; color: var(--text-muted); font-size: .875rem; transition: border-color .2s; } .capex-img-upload:hover { border-color: var(--primary); color: var(--primary); } .capex-img-preview { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; } .capex-img-preview-item { position: relative; display: inline-block; } .capex-img-preview-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); } .capex-img-preview-item .remove-img { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; } /* ── Approval chain timeline ── */ .capex-approval-chain { display: flex; align-items: center; gap: 0; margin: .75rem 0; flex-wrap: wrap; } .capex-approval-step { display: flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 20px; font-size: .78rem; font-weight: 600; border: 2px solid var(--border); background: var(--surface); color: var(--text-muted); } .capex-approval-step.done { border-color: #16a34a; background: #f0fdf4; color: #15803d; } .capex-approval-step.current { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; } .capex-approval-step.rejected{ border-color: #dc2626; background: #fef2f2; color: #b91c1c; } .capex-approval-arrow { color: var(--text-muted); font-size: 1rem; padding: 0 .2rem; }