/* ========================================================================== IIG IT ASSET MANAGEMENT — DESIGN SYSTEM Clean rebuild: tokens -> base -> layout shell -> components -> themes ========================================================================== */ /* -------------------------------------------------------------------------- 1. THEME TOKENS (data-app-theme on ) -------------------------------------------------------------------------- */ :root { /* Deeper enterprise palette — less neon / high-contrast */ --primary-color: #3730a3; --primary-hover: #312e81; --primary-soft: rgba(55, 48, 163, 0.11); --secondary-color: #0f766e; --accent-teal: #0f766e; --success-color: #15803d; --warning-color: #c2410c; --danger-color: #be123c; --accent-amber: #d97706; --accent-rose: #e11d48; --accent-sky: #0284c7; /* Soft mint canvas (Option B family) — slightly deeper so white cards lift */ --bg-color: #e4efed; --bg-image: radial-gradient(ellipse at 0% 0%, rgba(15, 118, 110, 0.07) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, rgba(15, 118, 110, 0.04) 0%, transparent 45%), linear-gradient(180deg, #eef5f4 0%, #e4efed 100%); --bg-anim: none; --surface-color: #ffffff; --surface-solid: #ffffff; --canvas-bg: #dde8e6; --text-primary: #0f172a; --text-secondary: #475569; --text-inverse: #ffffff; --border-color: #b9c9c6; --glass-border: rgba(255, 255, 255, 0.8); --card-backdrop: none; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.07); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.1); --input-bg: #f1f5f4; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif; --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif; --z-modal: 2000; --z-auth-screen: 9000; --z-modal-priority: 10050; --z-toast: 11000; --card-bg: var(--surface-solid); --bg-secondary: var(--canvas-bg); --text-color: var(--text-primary); /* Brand chrome (sidebar / topbar) */ --brand-teal: #078787; --brand-teal-deep: #066e6e; --brand-surface: #e8f2f1; } /* Dark mode — deeper navy + muted teal (less neon glow) */ html[data-theme="dark"] { --primary-color: #0f766e; --primary-hover: #14b8a6; --secondary-color: #0d7377; --accent-teal: #14b8a6; --success-color: #22c55e; --warning-color: #f59e0b; --danger-color: #f43f5e; --accent-amber: #f59e0b; --accent-rose: #f43f5e; --accent-sky: #0ea5e9; --bg-color: #0a1018; --bg-image: radial-gradient(ellipse at 15% -10%, rgba(15, 118, 110, 0.16) 0%, transparent 45%), radial-gradient(ellipse at 90% 10%, rgba(20, 184, 166, 0.08) 0%, transparent 40%), linear-gradient(180deg, #0f172a 0%, #0a1018 100%); --bg-anim: none; --surface-color: rgba(18, 28, 44, 0.96); --surface-solid: #121c2c; --canvas-bg: #0c1420; --card-bg: #121c2c; --card-backdrop: rgba(18, 28, 44, 0.94); --glass-border: rgba(20, 184, 166, 0.16); --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-inverse: #0a1018; --border-color: rgba(148, 163, 184, 0.16); --input-bg: rgba(10, 16, 24, 0.75); --primary-soft: rgba(20, 184, 166, 0.12); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5); --brand-teal: #0d1e2b; --brand-teal-deep: #0a1620; --brand-surface: #163042; } @keyframes auroraBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes countUpFade { from { opacity: 0.35; } to { opacity: 1; } } @keyframes skeletonShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes ringBell { 0%, 100% { transform: rotate(0deg) scale(1); } 15%, 45%, 75% { transform: rotate(14deg) scale(1.08); } 30%, 60% { transform: rotate(-14deg) scale(1.08); } } @keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); } 70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } } /* -------------------------------------------------------------------------- 2. RESET & BASE -------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; background-color: var(--bg-color); background-image: var(--bg-image); background-attachment: fixed; background-size: cover; color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-primary); font-weight: 700; letter-spacing: -0.02em; } h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } h4 { font-size: 0.9rem; } p { color: var(--text-secondary); } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: inherit; } ul { list-style: none; } img { max-width: 100%; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-secondary) 35%, transparent); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-secondary) 55%, transparent); } .hidden { display: none !important; } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } /* -------------------------------------------------------------------------- 3. APP SHELL -------------------------------------------------------------------------- */ .screen { min-height: 100vh; display: flex; } #app-screen { width: 100%; min-width: 0; overflow: hidden; } .sidebar { width: 240px; flex-shrink: 0; height: 100vh; display: flex; flex-direction: column; background: var(--brand-teal, #078787); border-right: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; box-shadow: 2px 0 14px rgba(6, 110, 110, 0.2); transition: width 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; z-index: 40; overflow: hidden; } /* Sidebar must never inherit .card padding — it breaks the collapsed rail */ .sidebar.card { padding: 0; border-radius: 0; box-shadow: none; border: none; border-right: 1px solid rgba(255, 255, 255, 0.18); } .sidebar-header { height: auto; min-height: 104px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 0.8rem 0.9rem; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.2); flex-shrink: 0; overflow: visible; background: transparent; transition: var(--transition); } .sidebar-brand-lockup { display: flex; align-items: center; justify-content: flex-start; width: 100%; max-width: 100%; } .sidebar-brand-stack { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.75rem; width: 100%; } .sidebar-brand-pair { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; } .sidebar-brand-logo-plate { width: auto; max-width: 155px; height: auto; min-height: 76px; max-height: 90px; display: flex; align-items: center; justify-content: center; padding: 0.45rem 0.8rem; border-radius: var(--radius-lg); background: var(--brand-surface, #e8f2f1); border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); transform: none; transition: var(--transition); overflow: visible; flex-shrink: 0; } .sidebar-header:hover .sidebar-brand-logo-plate { border: 1px solid rgba(255, 255, 255, 0.55); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } .sidebar-brand-row, .sidebar-brand-pill, .sidebar-brand-group, .sidebar-brand-title, .sidebar-brand-tag { display: none !important; } .sidebar-header:hover .sidebar-brand-pill { box-shadow: none; transform: none; } .sidebar-header img.sidebar-logo-full, .sidebar-header img.sidebar-brand-icon { width: auto; height: auto; max-width: 100%; max-height: 78px; flex-shrink: 0; display: block; object-fit: contain; object-position: center; border-radius: 0; background: transparent; border: none; box-shadow: none; filter: contrast(1.08) saturate(1.05); image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; padding: 0; } .sidebar-brand-wordmark { font-family: var(--font-heading, 'Plus Jakarta Sans'), 'Segoe UI', sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1; color: var(--brand-teal-deep, #066e6e); white-space: nowrap; text-transform: uppercase; padding: 0.26rem 0.68rem; border-radius: 999px; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); align-self: center; flex-shrink: 0; transition: var(--transition); } .sidebar-header img.sidebar-brand-logo { width: auto; max-width: 115px; height: auto; max-height: 56px; object-position: left center; } .sidebar-logo-mini { display: none; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-logo-round { width: 48px; height: 48px; border-radius: var(--radius-md); background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); display: flex; align-items: center; justify-content: center; overflow: visible; padding: 6px; transition: var(--transition); } .sidebar-logo-round--mark { border-radius: var(--radius-md); background: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); padding: 6px; } .sidebar-header:hover .sidebar-logo-round, .sidebar-header:hover .sidebar-brand-icon { transform: none; box-shadow: none; } .sidebar-header:hover .sidebar-logo-round--mark { box-shadow: none; border: none; } .sidebar-logo-round-img { width: 100%; height: 100%; max-height: none; object-fit: contain; display: block; border-radius: 4px; background: transparent; } .sidebar-logo-round--mark .sidebar-logo-round-img { width: 100%; max-width: none; height: 100%; max-height: none; object-fit: contain; object-position: center; } .sidebar-scroll { flex: 1; overflow-y: auto; padding: 0.9rem 0.8rem; } .nav-links { display: flex; flex-direction: column; gap: 3px; } .nav-links li { list-style: none; } .nav-links a { display: flex; align-items: center; gap: 12px; padding: 0.68rem 0.9rem; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.88); font-weight: 600; font-size: 0.88rem; transition: var(--transition); position: relative; } .nav-links a i { width: 18px; text-align: center; font-size: 0.95rem; flex-shrink: 0; color: rgba(255, 255, 255, 0.85); } .nav-links a:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; } .nav-links a:hover i { color: #ffffff; } .nav-links a.active { background: var(--brand-surface, #e8f2f1); color: var(--brand-teal-deep, #066e6e); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); font-weight: 700; } .nav-links a.active i { color: var(--brand-teal-deep, #066e6e); } .nav-links a.active::before { content: none; } .nav-text { flex: 1; } .nav-links a.nav-link-chat-hub .nav-text { flex: 1; min-width: 0; } .nav-chat-badge { background: var(--danger-color); color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 800; flex-shrink: 0; margin-left: auto; } /* Collapsed sidebar */ .sidebar.collapsed { width: 78px; } .sidebar.collapsed .sidebar-brand-lockup, .sidebar.collapsed .sidebar-brand-pill, .sidebar.collapsed .sidebar-logo-full, .sidebar.collapsed .sidebar-brand-group, .sidebar.collapsed .sidebar-brand-tag, .sidebar.collapsed .sidebar-brand-row, .sidebar.collapsed .sidebar-brand-title, .sidebar.collapsed .sidebar-brand-pair, .sidebar.collapsed .sidebar-brand-stack, .sidebar.collapsed .sidebar-brand-logo-plate, .sidebar.collapsed .sidebar-brand-wordmark, .sidebar.collapsed .nav-text, .sidebar.collapsed .nav-chat-badge, .sidebar.collapsed #sidebar-chat-badge, .sidebar.collapsed #sidebar-agreements-badge { display: none; } .sidebar.collapsed .sidebar-logo-mini { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 auto; } .sidebar.collapsed .sidebar-logo-round { margin: 0 auto; } .sidebar.collapsed .nav-links a, .sidebar.collapsed .nav-links a.nav-link-chat-hub { justify-content: center; padding: 0.7rem; gap: 0; } .sidebar.collapsed .sidebar-header { min-height: 68px; height: 68px; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 0; } /* Main content column */ .main-content { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; padding: 0 1.5rem 1.75rem; display: flex; flex-direction: column; } .view { display: flex; flex-direction: column; gap: 0; animation: fadeInUp 0.32s cubic-bezier(0.22, 1, 0.36, 1); } /* -------------------------------------------------------------------------- 4. TOP BAR — quiet flat strip (Linear-style) -------------------------------------------------------------------------- */ .top-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 56px; flex-shrink: 0; position: sticky; top: 1rem; z-index: 30; margin: 1rem 0 1.25rem 0; padding: 0 1.25rem; background: var(--brand-teal, #078787); border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 6px 18px rgba(6, 110, 110, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08); transition: var(--transition); } .it-support-ticker { display: flex; align-items: center; gap: 0.55rem; flex: 1 1 auto; min-width: 0; max-width: calc(100% - 280px); height: 34px; padding: 0 0.35rem 0 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); overflow: hidden; } .it-support-ticker.hidden { display: none !important; } .it-support-ticker__icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 0.75rem; } .it-support-ticker__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .it-support-ticker__track { display: inline-flex; align-items: center; white-space: nowrap; width: max-content; color: #fff; font-size: 0.82rem; font-weight: 650; letter-spacing: 0.01em; /* Always running: enter from right, exit left (single line — no duplicate text) */ padding-left: 100%; animation: itSupportMarquee 22s linear infinite; } .it-support-ticker:hover .it-support-ticker__track { animation-play-state: paused; } .it-support-ticker__item i { margin-right: 0.35rem; opacity: 0.9; } .it-support-ticker__sep { margin: 0 0.55rem; opacity: 0.55; } @keyframes itSupportMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @media (max-width: 900px) { .it-support-ticker { max-width: calc(100% - 210px); } .it-support-ticker__track { font-size: 0.74rem; animation-duration: 16s; } } .top-header .top-ghost-btn, .top-header .icon-btn { color: #ffffff; background: rgba(255, 255, 255, 0.14); width: 36px; height: 36px; } .top-header .top-ghost-btn:hover, .top-header .icon-btn:hover { background: rgba(255, 255, 255, 0.28); color: #ffffff; transform: translateY(-1px); } .top-header .top-bar-divider { background: rgba(255, 255, 255, 0.25); height: 22px; } .top-header .top-bar-profile-widget { color: #ffffff; padding: 0.25rem 0.6rem 0.25rem 0.35rem; } .top-header .top-bar-profile-widget:hover { background: rgba(255, 255, 255, 0.2); } .top-header .top-bar-profile-widget .profile-info span:first-child, .top-header .top-bar-profile-widget #profile-menu-chevron { color: #ffffff !important; font-weight: 700; } .top-nav-left { display: none; } .top-breadcrumb-widget { display: none; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-color); animation: liveDot 2s infinite; } /* Legacy search field styles — kept harmless if unused */ .spotlight-search-container { display: none; } .spotlight-search-trigger { display: none; } .spotlight-kbd-hint { display: none; } .spotlight-results { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; min-width: 340px; max-height: 420px; overflow-y: auto; background: var(--surface-solid); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 500; padding: 0.6rem; } .spotlight-result-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); } .spotlight-result-item:hover { background: var(--primary-soft); } /* -------------------------------------------------------------------------- COMMAND PALETTE (Ctrl/Cmd+K) -------------------------------------------------------------------------- */ .cmdk-overlay { align-items: flex-start; justify-content: center; padding-top: 11vh; z-index: var(--z-modal-priority); } .cmdk-panel { width: 100%; max-width: 580px; max-height: 68vh; display: flex; flex-direction: column; background: var(--surface-solid); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: 0 30px 80px rgba(8, 12, 24, 0.4); overflow: hidden; animation: popIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .cmdk-input-row { display: flex; align-items: center; gap: 12px; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .cmdk-input-row i { color: var(--text-secondary); font-size: 0.95rem; } .cmdk-input { flex: 1; border: none !important; background: transparent !important; box-shadow: none !important; font-size: 0.98rem; padding: 0; color: var(--text-primary); outline: none; } .cmdk-esc-hint { font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); background: var(--canvas-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 7px; flex-shrink: 0; } .cmdk-results { overflow-y: auto; padding: 0.5rem; flex: 1; } .cmdk-section-label { font-size: 0.68rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.65rem 0.7rem 0.35rem; } .cmdk-row { display: flex; align-items: center; gap: 12px; padding: 0.55rem 0.7rem; border-radius: var(--radius-md); cursor: pointer; transition: background 0.1s ease; } .cmdk-row:hover, .cmdk-row.is-active { background: var(--primary-soft); } .cmdk-row-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.92rem; } .cmdk-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cmdk-row-title { font-weight: 700; font-size: 0.87rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk-row-subtitle { font-size: 0.74rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk-empty { padding: 2.4rem 1rem; text-align: center; color: var(--text-secondary); font-size: 0.86rem; } /* -------------------------------------------------------------------------- SKELETON LOADERS -------------------------------------------------------------------------- */ .skeleton-row td { padding: 0.85rem 1rem; } .skeleton-bar { display: inline-block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--border-color) 55%, transparent) 25%, color-mix(in srgb, var(--border-color) 90%, transparent) 37%, color-mix(in srgb, var(--border-color) 55%, transparent) 63%); background-size: 400% 100%; animation: skeletonShimmer 1.3s ease infinite; } .top-nav-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; /* always pin search / theme / bell / profile to the right */ } .top-ghost-btn { width: 34px; height: 34px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; font-size: 0.88rem; transition: background 0.15s ease, color 0.15s ease; } .top-ghost-btn:hover { background: var(--primary-soft); color: var(--primary-color); } /* Keep old icon-btn class usable elsewhere; in top bar prefer ghost */ .icon-btn { background: transparent; color: var(--text-secondary); border: none; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: none; transition: background 0.15s ease, color 0.15s ease; position: relative; font-size: 0.88rem; } .icon-btn:hover { color: var(--primary-color); background: var(--primary-soft); transform: none; box-shadow: none; } .notif-badge { position: absolute; top: 2px; right: 2px; background: var(--danger-color); color: #fff; font-size: 0.55rem; font-weight: 800; min-width: 14px; height: 14px; border-radius: 7px; display: none; align-items: center; justify-content: center; border: 1.5px solid var(--canvas-bg); } .top-notif-wrap { position: relative; display: flex; align-items: center; } .top-bar-divider { width: 1px; height: 18px; margin: 0 6px; background: var(--border-color); flex-shrink: 0; } .popover-panel { position: absolute; top: 40px; right: 0; width: 380px; max-height: 460px; overflow-y: auto; background: var(--surface-solid); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); padding: 1.1rem; z-index: 500; } .popover-panel-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 0.75rem; } .popover-panel-header h4 { font-size: 1rem; display: flex; align-items: center; gap: 8px; } #bell-floating-alert { position: absolute; top: 40px; right: 0; background: var(--surface-solid); color: var(--text-primary); padding: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); z-index: 600; width: 340px; display: none; text-align: left; animation: popIn 0.3s ease; overflow: hidden; cursor: pointer; } #bell-floating-alert .bell-alert-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.85rem; background: linear-gradient(135deg, #1e3a5f, #2563eb); color: #fff; } #bell-floating-alert .bell-alert-head strong { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bell-floating-alert .bell-alert-body { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0.95rem 0.95rem; } #bell-floating-alert .bell-alert-avatar { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--primary-color) 16%, transparent); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; flex-shrink: 0; } #bell-floating-alert #bell-alert-title { display: block; font-size: 0.92rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bell-floating-alert #bell-alert-desc { display: block; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; margin-top: 3px; word-break: break-word; } /* Agreements hub — header icon + full page */ .agreements-hub-btn i { color: var(--success-color); } .agreements-page-header { margin-bottom: 1.25rem; } .agreements-page-count-pill { display: inline-flex; align-items: center; padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; background: color-mix(in srgb, var(--success-color) 14%, transparent); color: var(--success-color); white-space: nowrap; } .agreements-page-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; padding-bottom: 1rem; } @media (min-width: 1200px) { .agreements-page-feed { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.15rem; } } .agreements-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; margin-bottom: 1rem; } .agreements-toolbar__search { flex: 1 1 240px; max-width: 420px; display: flex; align-items: center; gap: 0.55rem; padding: 0 0.85rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--canvas-bg); } .agreements-toolbar__search i { color: var(--text-secondary); font-size: 0.85rem; } .agreements-toolbar__search input { border: none; background: transparent; box-shadow: none; padding-left: 0; } .agreements-toolbar__tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; } .agreements-tab { border: 1px solid var(--border-color); background: var(--surface-solid); color: var(--text-secondary); border-radius: 999px; padding: 0.42rem 0.9rem; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.4rem; } .agreements-tab__icon { font-size: 0.8rem; opacity: 0.92; } .agreements-tab__count { min-width: 1.3rem; height: 1.3rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; font-weight: 800; } /* Action Required — urgent / needs your sign-off */ .agreements-tab--action { color: var(--danger-color); border-color: color-mix(in srgb, var(--danger-color) 30%, var(--border-color)); background: color-mix(in srgb, var(--danger-color) 7%, var(--surface-solid)); } .agreements-tab--action:hover { border-color: var(--danger-color); background: color-mix(in srgb, var(--danger-color) 12%, var(--surface-solid)); } .agreements-tab--action.is-active { background: color-mix(in srgb, var(--danger-color) 16%, var(--surface-solid)); border-color: color-mix(in srgb, var(--danger-color) 55%, var(--border-color)); box-shadow: 0 2px 8px color-mix(in srgb, var(--danger-color) 18%, transparent); } /* In Progress — workflow running */ .agreements-tab--pending { color: var(--primary-color); border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color)); background: color-mix(in srgb, var(--primary-color) 7%, var(--surface-solid)); } .agreements-tab--pending:hover { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-solid)); } .agreements-tab--pending.is-active { background: color-mix(in srgb, var(--primary-color) 16%, var(--surface-solid)); border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color)); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 18%, transparent); } /* Completed — done / archived */ .agreements-tab--completed { color: var(--success-color); border-color: color-mix(in srgb, var(--success-color) 30%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 7%, var(--surface-solid)); } .agreements-tab--completed:hover { border-color: var(--success-color); background: color-mix(in srgb, var(--success-color) 12%, var(--surface-solid)); } .agreements-tab--completed.is-active { background: color-mix(in srgb, var(--success-color) 16%, var(--surface-solid)); border-color: color-mix(in srgb, var(--success-color) 55%, var(--border-color)); box-shadow: 0 2px 8px color-mix(in srgb, var(--success-color) 18%, transparent); } /* All — full list overview */ .agreements-tab--all { color: var(--secondary-color); border-color: color-mix(in srgb, var(--secondary-color) 28%, var(--border-color)); background: color-mix(in srgb, var(--secondary-color) 7%, var(--surface-solid)); } .agreements-tab--all:hover { border-color: var(--secondary-color); background: color-mix(in srgb, var(--secondary-color) 12%, var(--surface-solid)); } .agreements-tab--all.is-active { background: color-mix(in srgb, var(--secondary-color) 16%, var(--surface-solid)); border-color: color-mix(in srgb, var(--secondary-color) 50%, var(--border-color)); box-shadow: 0 2px 8px color-mix(in srgb, var(--secondary-color) 16%, transparent); } .agreements-tab.is-active .agreements-tab__count { background: color-mix(in srgb, currentColor 22%, transparent); } .agreements-page-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; margin-bottom: 1.5rem; background: var(--surface-solid); border: 1px solid var(--border-color); border-radius: var(--radius-md); } .agreements-page-pagination__info { font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; } .agreements-page-pagination__controls { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .agreements-page-btn { min-width: 34px; height: 34px; padding: 0 0.55rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--surface-solid); color: var(--text-primary); font-size: 0.82rem; font-weight: 700; cursor: pointer; } .agreements-page-btn:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); } .agreements-page-btn.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } .agreements-page-btn:disabled { opacity: 0.45; cursor: not-allowed; } .top-bar-profile-widget { position: relative; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.2rem 0.35rem 0.2rem 0.2rem; border-radius: 8px; border: none; background: transparent; box-shadow: none; transition: background 0.15s ease; } .top-bar-profile-widget:hover { background: var(--primary-soft); border-color: transparent; transform: none; box-shadow: none; } .top-bar-profile-widget #profile-menu-chevron { font-size: 0.58rem; color: var(--text-secondary); transition: transform 0.25s ease; } .profile-avatar-ring { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: #fff; flex-shrink: 0; font-size: 0.85rem; border: 2px solid color-mix(in srgb, var(--primary-color) 35%, #fff); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); } .profile-avatar-ring img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; image-rendering: auto; } .profile-dropdown-head .profile-avatar-ring { width: 84px; height: 84px; margin-bottom: 0.55rem; font-size: 2rem; border-width: 3px; position: relative; } .profile-avatar-ring--upload { cursor: pointer; overflow: visible; } .profile-avatar-ring--upload img, .profile-avatar-ring--upload > .fa-user { border-radius: 50%; } .profile-avatar-ring--upload img { overflow: hidden; clip-path: circle(50%); } .profile-avatar-camera { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border: 2px solid var(--surface-solid); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); pointer-events: none; } .profile-photo-change-btn { margin-top: 0.55rem; border: 1px solid var(--border-color); background: var(--primary-soft); color: var(--primary-color); font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; } .profile-photo-change-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } .profile-info { display: flex; flex-direction: column; line-height: 1.15; } .profile-info span:first-child { font-weight: 650; font-size: 0.8rem; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); } /* Role stays in dropdown — hide duplicate under name in the top bar strip */ .top-bar-profile-widget>.profile-info .top-bar-role-pill { display: none; } .role-pill { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; background: var(--primary-soft); color: var(--primary-color); padding: 1px 8px; border-radius: 10px; width: fit-content; margin-top: 2px; } .profile-dropdown { position: absolute; top: 40px; right: 0; width: 250px; background: var(--surface-solid); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); padding: 0.7rem; z-index: 500; display: flex; flex-direction: column; gap: 4px; } .profile-dropdown-head { display: flex; flex-direction: column; align-items: center; padding: 0.9rem 0.5rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.4rem; text-align: center; } .top-profile-menu-btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.65rem 0.8rem; border: none; background: transparent; color: var(--text-primary); font-size: 0.88rem; font-weight: 700; border-radius: var(--radius-sm); transition: var(--transition); text-align: left; } .top-profile-menu-btn:hover { background: var(--primary-soft); color: var(--primary-color); } .top-profile-menu-btn.danger { color: var(--danger-color); } .top-profile-menu-btn.danger:hover { background: color-mix(in srgb, var(--danger-color) 12%, transparent); } .top-profile-menu-btn i { width: 30px; height: 30px; border-radius: 8px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .top-profile-menu-btn.danger i { background: color-mix(in srgb, var(--danger-color) 12%, transparent); } /* -------------------------------------------------------------------------- 5. TYPOGRAPHY / PAGE HEADER -------------------------------------------------------------------------- */ .page-header { margin: 0.1rem 0 0.9rem; } .page-header h1 { margin-bottom: 3px; font-size: 1.28rem; letter-spacing: -0.02em; } .page-header p { font-size: 0.84rem; color: var(--text-secondary); } /* -------------------------------------------------------------------------- 6. HELPDESK CONTACT STRIP -------------------------------------------------------------------------- */ .helpdesk-contact-strip, .helpdesk-ticker { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.1rem; margin-bottom: 1.25rem; border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); background: var(--surface-solid); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .helpdesk-contact-strip__tag, .helpdesk-ticker-tag { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; background: var(--primary-soft); padding: 0.35rem 0.8rem; border-radius: var(--radius-sm); color: var(--primary-color); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.3px; } .helpdesk-contact-strip__body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem; font-size: 0.9rem; font-weight: 600; } .helpdesk-contact-strip__body a { color: var(--primary-color); font-weight: 700; text-decoration: none; } .helpdesk-contact-strip__body a:hover { text-decoration: underline; } .helpdesk-contact-strip__sep { width: 1px; height: 14px; background: var(--border-color); display: inline-block; } /* legacy ticker bits kept inert if any remain */ .helpdesk-ticker-track { flex: 1; overflow: hidden; white-space: nowrap; position: relative; } .helpdesk-ticker-content { display: inline-flex; align-items: center; gap: 1.5rem; font-weight: 600; font-size: 0.9rem; } .helpdesk-ticker-content a { color: var(--primary-color); font-weight: 700; } .helpdesk-ticker-content span.sep { color: var(--border-color); } /* -------------------------------------------------------------------------- 7. BUTTONS -------------------------------------------------------------------------- */ .btn { padding: 0.62rem 1.1rem; border-radius: var(--radius-md); border: none; font-weight: 700; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition); white-space: nowrap; } /* Instant "something is happening" feedback on click, applied for a brief moment so Save/Delete/etc. never feel unresponsive while their handler runs. Purely visual — does not disable or block the button. */ .iig-btn-pressed { opacity: 0.72; cursor: progress; filter: saturate(0.9); transform: scale(0.98); transition: opacity 0.12s ease, transform 0.12s ease, filter 0.12s ease; } button.is-loading, .btn.is-loading { cursor: progress; opacity: 0.78; } .btn-primary { background: linear-gradient(135deg, #3730a3, #4338ca); color: var(--text-inverse); box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35); } .btn-primary:hover { background: linear-gradient(135deg, #312e81, #3730a3); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(79, 70, 229, 0.42); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--surface-solid); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-2px); } .btn-secondary:active { transform: translateY(0); } .btn-danger { background: var(--danger-color); color: #fff; } .btn-danger:hover { filter: brightness(0.92); } .btn-warning { background: var(--warning-color); color: #fff; } .btn-warning:hover { filter: brightness(0.92); } .btn-success { background: var(--success-color); color: #fff; } .btn-success:hover { filter: brightness(0.92); } .btn-block { display: flex; width: 100%; justify-content: center; padding: 0.8rem; } .btn-icon, .btn-close, .action-btn { background: transparent; border: none; color: var(--text-secondary); font-size: 1rem; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); } .btn-icon:hover, .btn-close:hover, .action-btn:hover { color: var(--primary-color); background: var(--primary-soft); } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; } /* -------------------------------------------------------------------------- 8. FORMS -------------------------------------------------------------------------- */ .input-group { margin-bottom: 1.15rem; } .input-group label { display: block; margin-bottom: 0.4rem; font-weight: 700; font-size: 0.82rem; color: var(--text-secondary); } .input-wrapper { position: relative; display: flex; align-items: center; width: 100%; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], input[type="file"], select, textarea { width: 100%; padding: 0.68rem 0.9rem; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; transition: var(--transition); } textarea { resize: vertical; min-height: 80px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--surface-solid); } input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 0.7; } /* Icon-in-field inputs — must come AFTER the global input padding rule above */ .input-wrapper>i { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 0.85rem; pointer-events: none; z-index: 1; width: 1rem; text-align: center; line-height: 1; } .input-wrapper input[type="text"], .input-wrapper input[type="password"], .input-wrapper input[type="email"], .input-wrapper input[type="tel"], .input-wrapper input[type="number"] { padding-left: 2.75rem; padding-right: 0.9rem; } .input-wrapper input[type="password"] { padding-right: 2.75rem; } .password-toggle-btn { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; z-index: 2; border-radius: 50%; } .password-toggle-btn:hover { color: var(--primary-color); background: var(--primary-soft); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; } .form-group { margin-bottom: 1.1rem; grid-column: span 1; } .form-group label { display: block; margin-bottom: 0.4rem; font-weight: 700; font-size: 0.82rem; color: var(--text-secondary); } .col-span-2 { grid-column: span 2; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .col-span-2 { grid-column: span 1; } } .terms-group { display: flex; align-items: center; gap: 8px; margin: 0.5rem 0 0.9rem; } .terms-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); } .terms-group label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; } /* Shared pill quick-filter tabs (Assets, Helpdesk, ...) */ .pill-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .pill-tab { border: 1px solid var(--border-color); background: var(--surface-solid); color: var(--text-secondary); border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: var(--transition); } .pill-tab:hover { border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); color: var(--primary-color); } .pill-tab.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 30%, transparent); } /* Shared workflow stepper (Handover Agreements, IT Clearance) */ .workflow-stepper { display: flex; align-items: center; padding: 1.1rem 1.4rem; margin-bottom: 1rem; gap: 0; } .workflow-step { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 0 0 auto; min-width: 90px; } .workflow-step__icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary-color); font-size: 1rem; border: 1.5px solid color-mix(in srgb, var(--primary-color) 25%, var(--border-color)); } .workflow-step__label { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); text-align: center; white-space: nowrap; } .workflow-step__line { flex: 1 1 auto; height: 2px; background: color-mix(in srgb, var(--primary-color) 20%, var(--border-color)); margin: 0 0.25rem; margin-bottom: 1.4rem; min-width: 20px; transition: background 0.2s ease; } .workflow-step.is-done .workflow-step__icon { background: color-mix(in srgb, var(--success-color) 18%, transparent); color: var(--success-color); border-color: color-mix(in srgb, var(--success-color) 45%, var(--border-color)); } .workflow-step.is-done .workflow-step__label { color: var(--success-color); } .workflow-step.is-active .workflow-step__icon { background: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent); } .workflow-step.is-active .workflow-step__label { color: var(--primary-color); font-weight: 800; } .workflow-step.is-pending .workflow-step__icon { background: color-mix(in srgb, var(--border-color) 55%, transparent); color: var(--text-secondary); border-color: var(--border-color); opacity: 0.75; } .workflow-step.is-pending .workflow-step__label { color: var(--text-secondary); opacity: 0.85; } .workflow-step__line.is-done { background: color-mix(in srgb, var(--success-color) 55%, var(--border-color)); } .workflow-step__line.is-active { background: color-mix(in srgb, var(--primary-color) 55%, var(--border-color)); } @media (max-width: 900px) { .workflow-stepper { flex-wrap: wrap; gap: 0.75rem; } .workflow-step__line { display: none; } } /* Shared quiet stat divider bar (Helpdesk, SIM Cards ...) */ .quiet-stat-bar { display: flex; align-items: stretch; gap: 0; margin-bottom: 1rem; background: var(--surface-solid); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .quiet-stat { flex: 1; padding: 0.9rem 1.25rem; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--border-color); } .quiet-stat:last-child { border-right: none; } .quiet-stat__label { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); } .quiet-stat__value { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; } /* Filters bar */ .filters-bar { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; padding: 1rem 1.15rem; margin-bottom: 1.15rem; } .filter-input, .filter-select { padding: 0.6rem 0.95rem; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); font-size: 0.86rem; } .filter-group { display: flex; gap: 0.9rem; flex-wrap: wrap; } /* Assets page */ .assets-page-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .asset-stats-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 1rem; } .asset-stat-pill { min-width: 0; padding: 0.65rem 0.75rem; background: var(--surface-solid); border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 0.55rem; } @media (max-width: 1200px) { .asset-stats-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .asset-stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .asset-stat-pill__icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; background: var(--primary-soft); color: var(--primary-color); } .asset-stat-pill__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .asset-stat-pill__label { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.01em; white-space: nowrap; } .asset-stat-pill strong { font-size: 1.2rem; color: var(--text-primary); line-height: 1.1; } .asset-stat-pill--available { border-left-color: var(--secondary-color, #0f7a8a); } .asset-stat-pill--available .asset-stat-pill__icon { background: color-mix(in srgb, var(--secondary-color, #0f7a8a) 14%, transparent); color: var(--secondary-color, #0f7a8a); } .asset-stat-pill--inuse { border-left-color: var(--warning-color); } .asset-stat-pill--inuse .asset-stat-pill__icon { background: color-mix(in srgb, var(--warning-color) 14%, transparent); color: var(--warning-color); } .asset-stat-pill--pending { border-left-color: var(--accent-sky); } .asset-stat-pill--pending .asset-stat-pill__icon { background: color-mix(in srgb, var(--accent-sky) 14%, transparent); color: var(--accent-sky); } .asset-stat-pill--maintenance { border-left-color: var(--danger-color); } .asset-stat-pill--maintenance .asset-stat-pill__icon { background: color-mix(in srgb, var(--danger-color) 14%, transparent); color: var(--danger-color); } .asset-stat-pill--dead { border-left-color: #64748b; } .asset-stat-pill--dead .asset-stat-pill__icon { background: rgba(100, 116, 139, 0.14); color: #64748b; } .assets-toolbar { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.1rem; margin-bottom: 1rem; } .assets-toolbar__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; } .assets-toolbar__search { flex: 1 1 260px; max-width: 480px; display: flex; align-items: center; gap: 0.55rem; padding: 0 0.85rem; height: 44px; min-height: 44px; max-height: 44px; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--canvas-bg); overflow: hidden; } .assets-toolbar__search i { color: var(--text-secondary); font-size: 0.85rem; flex-shrink: 0; } .assets-toolbar__search input { border: none; background: transparent; box-shadow: none; padding: 0; margin: 0; width: 100%; height: 100%; line-height: 1; box-sizing: border-box; } .assets-toolbar__meta { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; } .assets-filter-count { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); padding: 0.35rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color)); } .assets-clear-filters { padding: 0.35rem 0.7rem; font-size: 0.78rem; } .assets-clear-filters.hidden { display: none; } .assets-toolbar__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; } @media (max-width: 1100px) { .assets-toolbar__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .assets-toolbar__filters { grid-template-columns: 1fr; } } .assets-filter-field label { display: block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 0.3rem; } .assets-filter-select { width: 100%; min-width: 0; } .asset-table-row { cursor: pointer; transition: background-color 0.15s ease; } .asset-table-row:hover { background: color-mix(in srgb, var(--primary-color) 6%, transparent); } .assets-empty-cell { text-align: center; padding: 2.5rem 1rem !important; color: var(--text-secondary); } .assets-empty-cell i { font-size: 1.75rem; color: #cbd5e1; margin-bottom: 0.5rem; display: block; } .modal-form-section { margin-bottom: 1.15rem; padding-bottom: 0.25rem; border-bottom: 1px dashed color-mix(in srgb, var(--border-color) 80%, transparent); } .modal-form-section:last-of-type { border-bottom: none; margin-bottom: 0.5rem; } .modal-form-section__title { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-color); margin-bottom: 0.85rem; } .modal-form-section__title i { opacity: 0.9; } .action-popup-card--asset { max-width: 400px; padding: 1.1rem 1.2rem 1.2rem; text-align: left; max-height: min(88vh, 560px); overflow-y: auto; overflow-x: hidden; } .entity-popup-header__text { min-width: 0; flex: 1; } .action-popup-card--asset .entity-popup-header { margin-bottom: 0.75rem; padding-bottom: 0.75rem; padding-right: 2rem; } .action-popup-card--asset .entity-popup-header .action-popup-icon { width: 42px; height: 42px; font-size: 1.1rem; } .action-popup-card--asset .entity-popup-header .action-popup-title { font-size: 1.05rem; line-height: 1.25; } .action-popup-card--asset .entity-popup-meta { font-size: 0.78rem; color: var(--text-secondary); } .asset-action-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.65rem; padding: 0.7rem 0.8rem; margin-bottom: 0.85rem; background: var(--canvas-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.78rem; line-height: 1.4; } .asset-action-summary__full { grid-column: 1 / -1; } .asset-action-summary strong { color: var(--text-secondary); font-weight: 700; font-size: 0.72rem; } .action-popup-card--asset .action-popup-actions { gap: 0.55rem; } .action-popup-section { margin-bottom: 0.55rem; } .action-popup-section:last-child { margin-bottom: 0; } .action-popup-section__label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 0.35rem; padding-left: 0.1rem; } .action-popup-section__buttons { display: flex; flex-direction: column; gap: 0.35rem; } .action-popup-section__buttons--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; } .action-popup-section__buttons--grid .action-popup-btn:nth-child(3):last-child { grid-column: 1 / -1; } .action-popup-card--asset .action-popup-btn { width: 100%; justify-content: flex-start; padding: 0.55rem 0.75rem; font-size: 0.82rem; font-weight: 600; border-radius: 9px; gap: 0.55rem; box-shadow: none; border: 1px solid var(--border-color); background: var(--surface-solid); color: var(--text-primary); letter-spacing: 0; } .action-popup-card--asset .action-popup-btn i { width: 1rem; text-align: center; flex-shrink: 0; font-size: 0.82rem; } .action-popup-card--asset .action-popup-btn:hover { transform: none; filter: none; border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); background: color-mix(in srgb, var(--primary-color) 5%, var(--surface-solid)); } .action-popup-card--asset .action-popup-btn--primary { background: color-mix(in srgb, var(--primary-color) 9%, var(--surface-solid)); border-color: color-mix(in srgb, var(--primary-color) 28%, var(--border-color)); color: var(--primary-color); } .action-popup-card--asset .action-popup-btn--primary:hover { background: color-mix(in srgb, var(--primary-color) 14%, var(--surface-solid)); } .action-popup-card--asset .action-popup-btn--secondary { background: var(--surface-solid); border-color: var(--border-color); color: var(--text-primary); } .action-popup-card--asset .action-popup-btn--warning { background: color-mix(in srgb, var(--warning-color) 9%, var(--surface-solid)); border-color: color-mix(in srgb, var(--warning-color) 30%, var(--border-color)); color: var(--warning-color); } .action-popup-card--asset .action-popup-btn--warning:hover { background: color-mix(in srgb, var(--warning-color) 14%, var(--surface-solid)); } .action-popup-card--asset .action-popup-btn--danger { background: color-mix(in srgb, var(--danger-color) 8%, var(--surface-solid)); border-color: color-mix(in srgb, var(--danger-color) 28%, var(--border-color)); color: var(--danger-color); } .action-popup-card--asset .action-popup-btn--danger:hover { background: color-mix(in srgb, var(--danger-color) 13%, var(--surface-solid)); } .action-popup-card--asset .action-popup-btn--indigo { background: color-mix(in srgb, var(--secondary-color) 9%, var(--surface-solid)); border-color: color-mix(in srgb, var(--secondary-color) 28%, var(--border-color)); color: var(--secondary-color); } .action-popup-card--asset .action-popup-section--danger .action-popup-section__buttons { padding-top: 0.35rem; margin-top: 0.15rem; border-top: 1px dashed color-mix(in srgb, var(--danger-color) 25%, var(--border-color)); } @media (max-width: 380px) { .action-popup-section__buttons--grid { grid-template-columns: 1fr; } } .asset-summary-panel { background: color-mix(in srgb, var(--primary-color) 7%, var(--surface-solid)); padding: 12px 15px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color)); margin-bottom: 15px; } .asset-summary-panel__label { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .asset-summary-panel__title { color: var(--primary-color); font-size: 1.05rem; display: block; margin-bottom: 4px; } .asset-summary-panel__meta { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; } .asset-status-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success-color) 7%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--success-color) 22%, var(--border-color)); } .asset-status-locked.hidden { display: none !important; } .asset-status-hint { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.4; margin: 0; } .asset-status-edit.hidden { display: none !important; } /* Toggle switch */ .access-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .access-toggle-switch input { opacity: 0; width: 0; height: 0; } .access-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border-color); border-radius: 24px; transition: var(--transition); } .access-toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: var(--transition); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .access-toggle-switch input:checked+.access-toggle-slider { background: var(--success-color); } .access-toggle-switch input:checked+.access-toggle-slider::before { transform: translateX(20px); } /* -------------------------------------------------------------------------- 9. CARDS & SURFACES -------------------------------------------------------------------------- */ .card { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.25rem 1.35rem; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .card:hover { box-shadow: var(--shadow-md); } .sidebar.card:hover, .modal-content.card:hover { box-shadow: none; transform: none; } /* Light mode only — cards must lift clearly off mint background */ html[data-theme="light"] .card, html[data-theme="light"] .widget-card, html[data-theme="light"] .stat-card, html[data-theme="light"] .quiet-stat-bar, html[data-theme="light"] #view-dashboard .dash-kpi-card, html[data-theme="light"] #view-dashboard .dash-panel, html[data-theme="light"] #view-dashboard .return-clearance-widget { background: #ffffff; border: 1px solid #c2d0cd; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.07); } html[data-theme="light"] .card:hover, html[data-theme="light"] .stat-card:hover, html[data-theme="light"] #view-dashboard .dash-kpi-card:hover { border-color: #aebfbc; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.09); } html[data-theme="light"] .sidebar.card, html[data-theme="light"] .sidebar.card:hover { background: var(--brand-teal, #078787); border: none; box-shadow: 2px 0 14px rgba(6, 110, 110, 0.2); } .widget-card { background: var(--surface-solid); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.15rem; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease; } .widget-card:hover { transform: none; box-shadow: var(--shadow-sm); } /* Handover agreement — policy & declaration panels */ .handover-policy-panel { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 18px; max-height: 220px; overflow-y: auto; font-size: 0.84rem; line-height: 1.55; color: var(--text-primary); } .handover-policy-heading { font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px; } .handover-policy-heading--usage { color: var(--primary-color); } .handover-policy-heading--return { color: var(--danger-color); margin-top: 14px; } .handover-policy-list { margin: 0 0 6px 18px; padding: 0; color: var(--text-secondary); } .handover-policy-list li { margin-bottom: 6px; } .handover-policy-list li::marker { color: var(--primary-color); } .handover-declaration-box { background: color-mix(in srgb, var(--success-color) 10%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--success-color) 28%, var(--border-color)); border-left: 4px solid var(--success-color); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 15px; font-size: 0.88rem; line-height: 1.55; color: var(--text-primary); } .handover-declaration-box strong { color: var(--success-color); display: inline-flex; align-items: center; gap: 6px; } /* Asset agreement cards */ .agreement-card { background: var(--surface-solid); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.1rem 1.15rem 1.2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; gap: 0.85rem; min-height: 0; overflow: hidden; transition: var(--transition); } .agreement-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .agreement-card--pending { border-color: color-mix(in srgb, var(--warning-color) 45%, var(--border-color)); background: color-mix(in srgb, var(--warning-color) 6%, var(--surface-solid)); } .agreement-card--manager { border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color)); background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-solid)); } .agreement-card--hr { border-color: color-mix(in srgb, var(--success-color) 45%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 6%, var(--surface-solid)); } .agreement-card--admin { border-color: color-mix(in srgb, var(--secondary-color) 45%, var(--border-color)); background: color-mix(in srgb, var(--secondary-color) 6%, var(--surface-solid)); } .agreement-card--done { border-color: color-mix(in srgb, var(--success-color) 55%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 8%, var(--surface-solid)); } .agreement-card--rejected { border-color: color-mix(in srgb, var(--danger-color) 45%, var(--border-color)); background: color-mix(in srgb, var(--danger-color) 5%, var(--surface-solid)); } .agreement-card--returned { border-color: color-mix(in srgb, var(--text-secondary) 35%, var(--border-color)); } .agreement-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; } .agreement-card__id { display: inline-block; font-size: 0.72rem; font-weight: 800; background: var(--bg-secondary); color: var(--text-secondary); padding: 2px 8px; border-radius: 8px; } .agreement-card__tag { display: block; font-size: 1.05rem; color: var(--text-primary); margin-top: 4px; } .agreement-card__body { font-size: 0.85rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 0.45rem; } .agreement-card__row { display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.45; } .agreement-card__row i { width: 18px; flex-shrink: 0; margin-top: 2px; color: var(--primary-color); } .agreement-card__row:nth-child(3) i { color: var(--success-color); } .agreement-card__row:nth-child(4) i { color: var(--secondary-color); } .agreement-card__row strong { color: var(--text-primary); } .agreement-card__footer { border-top: 1px solid var(--border-color); padding-top: 0.85rem; margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.65rem; } .agreement-card__date { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .agreement-card__btn { padding: 7px 12px; font-size: 0.78rem; font-weight: 700; line-height: 1.3; white-space: normal; text-align: center; flex: 1 1 9.5rem; max-width: 100%; min-width: 0; } .agreement-card__btns { display: flex; flex-wrap: wrap; gap: 0.45rem; flex: 1 1 9.5rem; justify-content: flex-end; min-width: 0; } .agreement-card__btns .agreement-card__btn { flex: 1 1 auto; } /* SIM cards section */ .sim-stats-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .sim-stat-pill { flex: 1 1 150px; min-width: 130px; padding: 0.7rem 0.9rem; background: var(--surface-solid); border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 0.65rem; } .sim-stat-pill__icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; background: var(--primary-soft); color: var(--primary-color); } .sim-stat-pill__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sim-stat-pill__label { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.01em; white-space: nowrap; } .sim-stat-pill strong { font-size: 1.2rem; color: var(--text-primary); line-height: 1.1; } .sim-stat-pill--available { border-left-color: var(--secondary-color, #0f7a8a); } .sim-stat-pill--available .sim-stat-pill__icon { background: color-mix(in srgb, var(--secondary-color, #0f7a8a) 14%, transparent); color: var(--secondary-color, #0f7a8a); } .sim-stat-pill--inuse { border-left-color: var(--warning-color); } .sim-stat-pill--inuse .sim-stat-pill__icon { background: color-mix(in srgb, var(--warning-color) 14%, transparent); color: var(--warning-color); } .sim-stat-pill--suspended { border-left-color: var(--danger-color); } .sim-stat-pill--suspended .sim-stat-pill__icon { background: color-mix(in srgb, var(--danger-color) 14%, transparent); color: var(--danger-color); } .sim-table-row:hover { background: color-mix(in srgb, var(--primary-color) 6%, transparent); } .sim-table-empid { color: var(--text-secondary); font-size: 0.78rem; } /* Helpdesk page */ .helpdesk-stats-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .helpdesk-stat { flex: 1 1 150px; min-width: 130px; padding: 0.7rem 0.9rem; background: var(--surface-solid); border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 2px; } .helpdesk-stat__label { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; } .helpdesk-stat strong { font-size: 1.3rem; color: var(--text-primary); line-height: 1.1; } .priority-badge { display: inline-flex; align-items: center; padding: 0.28rem 0.65rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; } .priority-badge.priority-urgent { background: color-mix(in srgb, var(--danger-color) 14%, transparent); color: var(--danger-color); } .priority-badge.priority-high { background: color-mix(in srgb, var(--warning-color) 14%, transparent); color: var(--warning-color); } .priority-badge.priority-low { background: rgba(100, 116, 139, 0.14); color: #64748b; } .priority-badge.priority-normal { background: color-mix(in srgb, var(--secondary-color, #0f7a8a) 14%, transparent); color: var(--secondary-color, #0f7a8a); } .helpdesk-action-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .helpdesk-action-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; margin-left: 4px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; background: color-mix(in srgb, currentColor 20%, transparent); color: inherit; } .asset-table-assignee { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; } .asset-table-empid { font-size: 0.76rem; font-weight: 700; color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, transparent); padding: 1px 7px; border-radius: 5px; width: fit-content; } .asset-table-meta-line { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; } .asset-table-meta-label { display: inline-block; min-width: 2.6rem; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: color-mix(in srgb, var(--primary-color) 75%, var(--text-secondary)); opacity: 0.9; } .sim-table-muted { color: var(--text-secondary); font-size: 0.85rem; } .sim-form-hint { margin: 0 0 0.25rem; padding: 0.65rem 0.85rem; font-size: 0.82rem; line-height: 1.45; color: var(--text-secondary); background: color-mix(in srgb, var(--primary-color) 7%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color)); border-radius: var(--radius-sm); } .agreement-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; } .agreement-status--pending { background: color-mix(in srgb, var(--warning-color) 14%, transparent); color: var(--warning-color); } .agreement-status--manager { background: color-mix(in srgb, var(--primary-color) 14%, transparent); color: var(--primary-color); } .agreement-status--hr { background: color-mix(in srgb, var(--success-color) 14%, transparent); color: var(--success-color); } .agreement-status--admin { background: color-mix(in srgb, var(--secondary-color) 14%, transparent); color: var(--secondary-color); } .agreement-status--done { background: color-mix(in srgb, var(--success-color) 18%, transparent); color: var(--success-color); } .agreement-status--rejected { background: color-mix(in srgb, var(--danger-color) 14%, transparent); color: var(--danger-color); } .agreement-status--returned { background: color-mix(in srgb, var(--text-secondary) 14%, transparent); color: var(--text-secondary); } /* Manager approval box (no signature) */ .mgr-approval-box { border: 1.5px solid #8b5cf6; border-radius: var(--radius-md); padding: 10px; background: var(--surface-solid); text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 130px; } .mgr-approval-box__title { font-size: 0.78rem; font-weight: 700; color: #8b5cf6; margin-bottom: 8px; } .mgr-approval-box__status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 800; margin-bottom: 6px; } .mgr-approval-box__status--pending { color: #8b5cf6; } .mgr-approval-box__status--approved { color: var(--success-color); } .mgr-approval-box__status--rejected { color: var(--danger-color); } .mgr-approval-box__note { font-size: 0.68rem; color: var(--text-secondary); margin-bottom: 6px; } .mgr-approval-box__by { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); } .mgr-approval-box__date { font-size: 0.68rem; color: var(--text-secondary); margin-top: 2px; } .mgr-approval-section { border-top: 2px solid var(--border-color); padding-top: 15px; margin-top: 15px; background: color-mix(in srgb, var(--primary-color) 5%, var(--surface-solid)); border-radius: var(--radius-md); padding: 15px; } .mgr-approval-section h3 { color: var(--primary-color); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 1rem; } .mgr-approval-section__hint { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; } .entity-card { color: var(--text-primary); padding: 1.2rem 1.25rem; border-radius: var(--radius-lg); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; min-height: 120px; border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); background: var(--surface-solid); transition: border-color 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .entity-card:hover { transform: none; box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary-color) 25%, var(--border-color)); } .entity-card--readonly { cursor: default; } .entity-card--readonly:hover { transform: none; box-shadow: var(--shadow-sm); } .entity-card__icon { position: absolute; right: -6px; bottom: -10px; font-size: 5rem; opacity: 0.08; transform: rotate(-8deg); pointer-events: none; color: var(--primary-color); } .entity-card__name { font-size: 1rem; font-weight: 700; text-shadow: none; word-break: break-word; position: relative; z-index: 1; line-height: 1.3; color: var(--text-primary); } .entity-card__count { position: relative; z-index: 1; margin-top: 1.2rem; display: flex; align-items: baseline; gap: 8px; } .entity-card__count strong { font-size: 1.75rem; font-weight: 800; line-height: 1; text-shadow: none; color: var(--text-primary); } .entity-card__count span { font-size: 0.75rem; font-weight: 700; opacity: 1; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } .entity-card--tone-1 { border-left-color: var(--primary-color); background: var(--surface-solid); } .entity-card--tone-2 { border-left-color: var(--secondary-color); background: var(--surface-solid); } .entity-card--tone-3 { border-left-color: var(--warning-color); background: var(--surface-solid); } .entity-card--tone-4 { border-left-color: var(--accent-sky); background: var(--surface-solid); } .entity-card--tone-5 { border-left-color: var(--danger-color); background: var(--surface-solid); } .entity-card--loc-1 { border-left-color: var(--accent-sky); background: var(--surface-solid); } .entity-card--loc-2 { border-left-color: var(--warning-color); background: var(--surface-solid); } .entity-card--loc-3 { border-left-color: var(--success-color); background: var(--surface-solid); } .entity-card--loc-4 { border-left-color: var(--primary-color); background: var(--surface-solid); } .entity-card--loc-5 { border-left-color: var(--danger-color); background: var(--surface-solid); } .grid-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; } /* -------------------------------------------------------------------------- 10. TABLES -------------------------------------------------------------------------- */ .data-table-container { padding: 0; overflow: hidden; margin-bottom: 1.25rem; } .table-responsive { overflow-x: auto; } table, .data-table { width: 100%; border-collapse: collapse; } table thead th, .data-table thead th { text-align: left; padding: 0.75rem 1.15rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); background: color-mix(in srgb, var(--canvas-bg) 80%, #fff); border-bottom: 1px solid var(--border-color); white-space: nowrap; } table thead th:first-child, .data-table thead th:first-child { border-top-left-radius: var(--radius-lg); } table thead th:last-child, .data-table thead th:last-child { border-top-right-radius: var(--radius-lg); } table tbody td, .data-table tbody td { padding: 0.8rem 1.15rem; font-size: 0.875rem; color: var(--text-primary); border-bottom: 1px solid var(--border-color); } table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: none; } table tbody tr, .data-table tbody tr { transition: background 0.12s ease; } table tbody tr:hover, .data-table tbody tr:hover { background: color-mix(in srgb, var(--secondary-color, var(--primary-color)) 6%, transparent); } /* Employees Master table — readable text */ .emp-table-row { cursor: pointer; } .emp-table-name-cell { display: flex; align-items: center; gap: 10px; } .emp-table-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; box-shadow: 0 2px 6px color-mix(in srgb, var(--primary-color) 30%, transparent); } .emp-table-avatar--img { object-fit: cover; object-position: center; border: 2px solid var(--primary-color); display: block; } .emp-table-name { color: var(--text-primary); font-size: 0.95rem; } .emp-table-id { display: inline-block; background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-solid)); color: var(--primary-hover); border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color)); padding: 3px 10px; border-radius: 6px; font-weight: 700; font-size: 0.85rem; } .emp-table-email { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-hover); font-weight: 600; text-decoration: none; } .emp-table-email:hover { color: var(--primary-color); text-decoration: underline; } .emp-table-email i { font-size: 0.8rem; opacity: 0.9; } .emp-table-phone { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 600; } .emp-table-phone i { color: var(--success-color); font-size: 0.8rem; } .emp-table-dept { color: var(--text-primary); } .emp-table-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 500; } .emp-table-meta i { color: var(--text-secondary); font-size: 0.8rem; } .emp-table-meta__pin { color: var(--danger-color) !important; } .emp-table-muted { color: var(--text-secondary); } /* -------------------------------------------------------------------------- 11. STATUS / ROLE BADGES -------------------------------------------------------------------------- */ .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 0.28rem 0.65rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; } .status-available, .status-open { background: color-mix(in srgb, var(--success-color) 14%, transparent); color: var(--success-color); } .status-in-use, .status-progress { background: color-mix(in srgb, var(--primary-color) 14%, transparent); color: var(--primary-color); } .status-pending-handover { background: color-mix(in srgb, var(--secondary-color) 14%, transparent); color: var(--secondary-color); } .status-return-pending { background: color-mix(in srgb, var(--warning-color) 16%, transparent); color: var(--warning-color); } .return-clearance-widget { padding: 1rem 1.15rem; } .return-clearance-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.85rem; } .return-clearance-list { display: flex; flex-direction: column; gap: 0.75rem; } .return-clearance-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--surface-solid); } .return-clearance-item--unread { border-color: color-mix(in srgb, var(--success-color) 40%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 6%, var(--surface-solid)); } .return-clearance-item__title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; } .return-clearance-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-color); flex-shrink: 0; } .return-clearance-item__meta, .return-clearance-item__emp, .return-clearance-item__bundle, .return-clearance-item__comments { font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem; } .return-clearance-item__dates { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-secondary); } .clearance-item .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.78rem; white-space: nowrap; } .app-empty-state { padding: 2.25rem 1.5rem; text-align: center; color: var(--text-secondary); background: var(--canvas-bg); border-radius: var(--radius-lg); border: 1px dashed var(--border-color); } .app-empty-state__icon { font-size: 2.1rem; color: color-mix(in srgb, var(--primary-color) 45%, var(--text-secondary)); margin-bottom: 0.65rem; display: block; } .app-empty-state__title { font-size: 0.98rem; color: var(--text-primary); display: block; font-weight: 800; } .app-empty-state__sub { font-size: 0.86rem; margin: 0.35rem 0 0; display: block; color: var(--text-secondary); } .dashboard-chat-shortcut:hover { border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); box-shadow: var(--shadow-md); } /* IT Clearance Forms page */ .clearance-toolbar { padding: 1rem 1.15rem; margin-bottom: 1rem; } .clearance-toolbar__search { position: relative; margin-bottom: 0.85rem; } .clearance-toolbar__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); } .clearance-toolbar__search .filter-input { padding-left: 2.2rem; width: 100%; } .clearance-toolbar__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .clearance-tab { border: 1px solid var(--border-color); background: var(--surface-solid); color: var(--text-secondary); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; } .clearance-tab.is-active { background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-solid)); border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); color: var(--primary-color); } .clearance-page-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } .clearance-card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-solid); } .clearance-card--pending { border-left: 4px solid var(--warning-color); } .clearance-card--cleared { border-left: 4px solid var(--success-color); } .clearance-card--hold { border-left: 4px solid var(--danger-color); } .clearance-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; } .clearance-card__title { font-size: 1rem; font-weight: 800; color: var(--text-primary); } .clearance-card__meta { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; } .clearance-card__issues { font-size: 0.78rem; color: #b45309; background: rgba(245, 158, 11, 0.1); padding: 0.45rem 0.6rem; border-radius: 6px; } .clearance-card__footer { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--border-color); } .agreement-status--clearance-pending { background: rgba(245, 158, 11, 0.15); color: #d97706; } .status-maintenance { background: color-mix(in srgb, var(--warning-color) 16%, transparent); color: var(--warning-color); } .status-expired, .status-closed { background: color-mix(in srgb, var(--danger-color) 14%, transparent); color: var(--danger-color); } .role-badge { display: inline-block; padding: 0.24rem 0.65rem; border-radius: 20px; font-size: 0.72rem; font-weight: 800; text-transform: capitalize; background: var(--primary-soft); color: var(--primary-color); } /* -------------------------------------------------------------------------- 12. STATS / DASHBOARD -------------------------------------------------------------------------- */ .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-bottom: 0.9rem; } @media (max-width: 1400px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .stat-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.85rem; border: 1px solid var(--border-color); background: var(--surface-solid); box-shadow: none; border-radius: var(--radius-md); } .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .stat-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; background: var(--primary-soft); color: var(--primary-color); } .stat-details h3 { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0; opacity: 1; letter-spacing: 0.02em; } .stat-details h2 { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; } /* Soft KPI tones (no loud full-bleed gradients) */ .stat-card.primary-gradient, .stat-card.success-gradient, .stat-card.warning-gradient, .stat-card.danger-gradient, .stat-card.info-gradient, .stat-card.purple-gradient, .stat-card.emerald-gradient { background: var(--surface-solid); color: var(--text-primary); } .stat-card.primary-gradient { border-left: 4px solid var(--primary-color); } .stat-card.success-gradient { border-left: 4px solid var(--success-color); } .stat-card.warning-gradient { border-left: 4px solid var(--warning-color); } .stat-card.danger-gradient { border-left: 4px solid var(--danger-color); } .stat-card.info-gradient { border-left: 4px solid var(--accent-sky); } .stat-card.purple-gradient { border-left: 4px solid var(--secondary-color); } .stat-card.emerald-gradient { border-left: 4px solid var(--success-color); } .stat-card.primary-gradient .stat-icon { background: var(--primary-soft); color: var(--primary-color); } .stat-card.success-gradient .stat-icon { background: color-mix(in srgb, var(--success-color) 14%, transparent); color: var(--success-color); } .stat-card.warning-gradient .stat-icon { background: color-mix(in srgb, var(--warning-color) 14%, transparent); color: var(--warning-color); } .stat-card.danger-gradient .stat-icon { background: color-mix(in srgb, var(--danger-color) 14%, transparent); color: var(--danger-color); } .stat-card.info-gradient .stat-icon { background: color-mix(in srgb, var(--accent-sky) 14%, transparent); color: var(--accent-sky); } .stat-card.purple-gradient .stat-icon { background: color-mix(in srgb, var(--secondary-color) 14%, transparent); color: var(--secondary-color); } .stat-card.emerald-gradient .stat-icon { background: color-mix(in srgb, var(--success-color) 14%, transparent); color: var(--success-color); } .stat-card.primary-gradient h2, .stat-card.primary-gradient h3, .stat-card.success-gradient h2, .stat-card.success-gradient h3, .stat-card.warning-gradient h2, .stat-card.warning-gradient h3, .stat-card.danger-gradient h2, .stat-card.danger-gradient h3, .stat-card.info-gradient h2, .stat-card.info-gradient h3, .stat-card.purple-gradient h2, .stat-card.purple-gradient h3, .stat-card.emerald-gradient h2, .stat-card.emerald-gradient h3 { color: inherit; } .stat-card.primary-gradient h3, .stat-card.success-gradient h3, .stat-card.warning-gradient h3, .stat-card.danger-gradient h3, .stat-card.info-gradient h3, .stat-card.purple-gradient h3, .stat-card.emerald-gradient h3 { color: var(--text-secondary); } .stat-card.primary-gradient h2, .stat-card.success-gradient h2, .stat-card.warning-gradient h2, .stat-card.danger-gradient h2, .stat-card.info-gradient h2, .stat-card.purple-gradient h2, .stat-card.emerald-gradient h2 { color: var(--text-primary); } .dashboard-charts { display: grid; grid-template-columns: 1.7fr 1fr; gap: 0.85rem; } @media (max-width: 1180px) { .dashboard-charts { grid-template-columns: 1fr; } } .chart-card-2027, .chart-container { padding: 0.85rem 1rem; display: flex; flex-direction: column; min-width: 0; } .chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.55rem; margin-bottom: 0.65rem; flex-wrap: wrap; } .chart-card-head-left { display: flex; align-items: center; gap: 0.55rem; } .chart-card-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .chart-card-head h3 { font-size: 0.92rem; margin: 0; } .chart-card-head p { font-size: 0.78rem; margin: 1px 0 0; color: var(--text-secondary); } .chart-card-pill { font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; background: var(--primary-soft); color: var(--primary-color); } .chart-container h3 { font-size: 0.88rem; margin-bottom: 0.55rem; display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-weight: 700; } .distribution-list { display: flex; flex-direction: column; gap: 0.4rem; } .distribution-list li { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; padding: 0.4rem 0.55rem; border-radius: var(--radius-sm); background: var(--canvas-bg); } /* ---- Dashboard: exact mockup card shapes ---- */ #view-dashboard { --dash-navy: var(--primary-color); --dash-teal: var(--accent-teal); --dash-amber: var(--accent-amber); --dash-rose: var(--accent-rose); --dash-sky: var(--accent-sky); --dash-card-radius: 14px; --dash-card-shadow: var(--shadow-sm); --dash-card-border: var(--border-color); gap: 0; padding-bottom: 1.5rem; } #view-dashboard .dash-panel { background: var(--surface-solid); border: 1px solid var(--dash-card-border); border-radius: var(--dash-card-radius); box-shadow: var(--dash-card-shadow); } #view-dashboard .dash-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.15rem; } #view-dashboard .dash-topbar__title h1 { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); } #view-dashboard .dash-topbar__title p { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--text-secondary); } #view-dashboard .dash-topbar__support { margin-bottom: 0; padding: 0.4rem 0.85rem; gap: 0.55rem; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--dash-card-border); box-shadow: none; } #view-dashboard .helpdesk-contact-strip__tag { font-size: 0.7rem; padding: 0.22rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--dash-teal) 14%, transparent); color: var(--dash-teal); } #view-dashboard .helpdesk-contact-strip__body { font-size: 0.78rem; } #view-dashboard .return-clearance-widget { margin-bottom: 1rem; padding: 0.9rem 1.05rem; border-radius: var(--dash-card-radius); box-shadow: var(--dash-card-shadow); } /* KPI cards — compact equal row */ #view-dashboard .dash-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 1rem; } #view-dashboard .dash-kpi-card__value-row { display: flex; align-items: center; gap: 8px; min-width: 0; } #view-dashboard .dash-kpi-card__spark { display: block; width: 52px; height: 18px; flex-shrink: 0; line-height: 0; margin-left: auto; } #view-dashboard .dash-kpi-card__spark svg { display: block; width: 100%; height: 100%; overflow: visible; } #view-dashboard .dash-kpi-card { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; text-align: left; padding: 12px 12px 12px 11px; border: 1px solid var(--dash-card-border); border-left-width: 4px; border-radius: 12px; background: var(--surface-solid); box-shadow: var(--dash-card-shadow); font-family: inherit; color: inherit; margin: 0; cursor: pointer; transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease; } #view-dashboard .dash-kpi-card:hover { box-shadow: 0 10px 24px rgba(79, 70, 229, 0.14); transform: translateY(-2px); } #view-dashboard .dash-kpi-card:active { transform: translateY(0); } #view-dashboard .dash-kpi-card__icon { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } #view-dashboard .dash-kpi-card:hover .dash-kpi-card__icon { transform: scale(1.06); } #view-dashboard div.dash-kpi-card { cursor: default; } #view-dashboard .dash-kpi-card__icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } #view-dashboard .dash-kpi-card__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } #view-dashboard .dash-kpi-card__label { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); line-height: 1.2; } #view-dashboard .dash-kpi-card__value { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } #view-dashboard .dash-kpi-card--navy { border-left-color: var(--dash-navy); background: linear-gradient(135deg, color-mix(in srgb, var(--dash-navy) 8%, #fff) 0%, #fff 55%); } #view-dashboard .dash-kpi-card--navy .dash-kpi-card__icon { background: color-mix(in srgb, var(--dash-navy) 18%, transparent); color: var(--dash-navy); } #view-dashboard .dash-kpi-card--teal { border-left-color: var(--dash-teal); background: linear-gradient(135deg, color-mix(in srgb, var(--dash-teal) 8%, #fff) 0%, #fff 55%); } #view-dashboard .dash-kpi-card--teal .dash-kpi-card__icon { background: color-mix(in srgb, var(--dash-teal) 18%, transparent); color: var(--dash-teal); } #view-dashboard .dash-kpi-card--amber { border-left-color: var(--dash-amber); background: linear-gradient(135deg, color-mix(in srgb, var(--dash-amber) 10%, #fff) 0%, #fff 55%); } #view-dashboard .dash-kpi-card--amber .dash-kpi-card__icon { background: color-mix(in srgb, var(--dash-amber) 18%, transparent); color: var(--dash-amber); } #view-dashboard .dash-kpi-card--rose { border-left-color: var(--dash-rose); background: linear-gradient(135deg, color-mix(in srgb, var(--dash-rose) 9%, #fff) 0%, #fff 55%); } #view-dashboard .dash-kpi-card--rose .dash-kpi-card__icon { background: color-mix(in srgb, var(--dash-rose) 18%, transparent); color: var(--dash-rose); } #view-dashboard .dash-kpi-card--sky { border-left-color: var(--dash-sky); background: linear-gradient(135deg, color-mix(in srgb, var(--dash-sky) 9%, #fff) 0%, #fff 55%); } #view-dashboard .dash-kpi-card--sky .dash-kpi-card__icon { background: color-mix(in srgb, var(--dash-sky) 18%, transparent); color: var(--dash-sky); } html[data-theme="dark"] #view-dashboard .dash-kpi-card--navy { background: linear-gradient(135deg, color-mix(in srgb, var(--dash-navy) 16%, var(--surface-solid)) 0%, var(--surface-solid) 60%); } html[data-theme="dark"] #view-dashboard .dash-kpi-card--teal { background: linear-gradient(135deg, color-mix(in srgb, var(--dash-teal) 14%, var(--surface-solid)) 0%, var(--surface-solid) 60%); } html[data-theme="dark"] #view-dashboard .dash-kpi-card--amber { background: linear-gradient(135deg, color-mix(in srgb, var(--dash-amber) 14%, var(--surface-solid)) 0%, var(--surface-solid) 60%); } html[data-theme="dark"] #view-dashboard .dash-kpi-card--rose { background: linear-gradient(135deg, color-mix(in srgb, var(--dash-rose) 14%, var(--surface-solid)) 0%, var(--surface-solid) 60%); } html[data-theme="dark"] #view-dashboard .dash-kpi-card--sky { background: linear-gradient(135deg, color-mix(in srgb, var(--dash-sky) 14%, var(--surface-solid)) 0%, var(--surface-solid) 60%); } #view-dashboard .dashboard-charts { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.95fr); gap: 14px; align-items: stretch; } #view-dashboard .dash-charts-main, #view-dashboard .dash-alerts-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; } #view-dashboard .dash-inventory-card { flex: 1; padding: 1.15rem 1.25rem 1.25rem; } #view-dashboard .dash-panel__title { font-size: 1.05rem; font-weight: 800; color: #0f1b2d; letter-spacing: -0.02em; margin: 0 0 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid #eef2f6; } #view-dashboard .dash-inventory-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 280px; } #view-dashboard .dash-inventory-pane { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0.35rem; } #view-dashboard .dash-inventory-pane--divider { border-left: 1px solid #eef2f6; padding-left: 1.1rem; } #view-dashboard .dash-inventory-pane__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; } #view-dashboard .dash-chart-frame { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; flex: 1; } #view-dashboard .dash-chart-frame--inventory { height: 250px; min-height: 230px; } /* Alert panel cards */ #view-dashboard .dash-alert-card { padding: 0.85rem 1rem 0.7rem; margin: 0; } #view-dashboard .dash-alert-card--activity { flex: 1; } #view-dashboard .dash-alert-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; } #view-dashboard .dash-alert-head h3 { margin: 0; font-size: 0.88rem; font-weight: 800; color: #0f1b2d; } #view-dashboard .dash-alert-viewall { font-size: 0.75rem; font-weight: 700; color: var(--dash-teal); white-space: nowrap; } #view-dashboard .dash-alert-viewall:hover { text-decoration: underline; } #view-dashboard .dash-alert-scroll { max-height: 78px; overflow-y: auto; } #view-dashboard .dash-alert-scroll--tall { max-height: 148px; } #view-dashboard .dash-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } #view-dashboard .dash-alert-row { display: flex; align-items: center; gap: 10px; padding: 0.45rem 0.15rem; border-bottom: 1px solid #f1f5f9; cursor: default; } #view-dashboard .dash-alert-row:last-child { border-bottom: none; } #view-dashboard .dash-alert-row--click { cursor: pointer; } #view-dashboard .dash-alert-row__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #94a3b8; } #view-dashboard .dash-alert-row--danger .dash-alert-row__dot { background: var(--dash-rose); } #view-dashboard .dash-alert-row--warning .dash-alert-row__dot { background: var(--dash-amber); } #view-dashboard .dash-alert-row--success .dash-alert-row__dot { background: #16a34a; } #view-dashboard .dash-alert-row--info .dash-alert-row__dot { background: var(--dash-teal); } #view-dashboard .dash-alert-row--muted .dash-alert-row__dot { background: #94a3b8; } #view-dashboard .dash-alert-row__title { flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 600; color: #0f1b2d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view-dashboard .dash-alert-row__meta { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: #64748b; } #view-dashboard .dash-alert-row--danger .dash-alert-row__meta { color: var(--dash-rose); } #view-dashboard .dash-alert-row--warning .dash-alert-row__meta { color: var(--dash-amber); } #view-dashboard .dash-alert-row--empty { color: #94a3b8; font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.15rem; } /* Live chats bar */ #view-dashboard .dashboard-chat-shortcut { margin-top: 14px; cursor: pointer; padding: 1rem 1.25rem; transition: border-color 0.15s ease, background 0.15s ease; } #view-dashboard .dashboard-chat-shortcut:hover { border-color: color-mix(in srgb, var(--dash-teal) 30%, var(--dash-card-border)); background: color-mix(in srgb, var(--dash-teal) 4%, #fff); } #view-dashboard .dash-chat-row { align-items: center; gap: 0.85rem; } #view-dashboard .dash-chat-row__left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; } #view-dashboard .dash-chat-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--dash-teal) 14%, transparent); color: var(--dash-teal); } #view-dashboard .dash-chat-row__left h3 { margin: 0; font-size: 0.98rem; font-weight: 800; color: #0f1b2d; display: flex; align-items: center; gap: 8px; } #view-dashboard .dash-chat-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; padding: 0 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: var(--dash-teal); color: #fff; } #view-dashboard .dash-chat-row__left p { margin: 0.18rem 0 0; color: #64748b; font-size: 0.82rem; } #view-dashboard .dash-chat-row__right { flex-shrink: 0; } #view-dashboard .dash-chat-link { font-size: 0.86rem; font-weight: 700; color: var(--dash-teal); display: inline-flex; align-items: center; gap: 6px; } #view-dashboard .dash-section { margin-top: 1.25rem; } #view-dashboard .dash-section__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.6rem; } #view-dashboard .dash-billing-card { padding: 1rem 1.15rem; } #view-dashboard .dash-billing-card h3 { margin: 0 0 0.7rem; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; color: var(--text-primary); } .sim-cost-rate-hint { font-size: 0.68rem; font-weight: 700; color: var(--primary-color); background: var(--primary-soft); padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap; } .sim-cost-report-card { padding: 1.25rem 1.35rem !important; margin-bottom: 1.25rem !important; } .sim-cost-report-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .sim-cost-report-head h3 { margin: 0; font-size: 0.88rem; font-weight: 800; display: flex; align-items: center; gap: 7px; color: var(--text-primary); } .sim-cost-report-head h3 i { color: var(--primary-color); font-size: 0.85rem; } .sim-cost-table { margin: 0; font-size: 0.8rem; } .sim-cost-table thead th { padding: 0.65rem 1.15rem !important; font-size: 0.7rem !important; letter-spacing: 0.04em; } .sim-cost-table tbody td, .sim-cost-table tfoot td { padding: 0.65rem 1.15rem !important; font-size: 0.82rem; } .sim-cost-table tbody td, .sim-cost-table thead th, .sim-cost-table tfoot td { font-variant-numeric: tabular-nums; } .sim-cost-company-subtotal td { background: var(--canvas-bg); border-top: 1px solid var(--border-color); font-size: 0.78rem; } .sim-cost-grand-total td { background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-solid)); border-top: 2px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); color: var(--text-primary); font-size: 0.8rem; } .sim-cost-footnote { margin: 0.4rem 0 0; font-size: 0.68rem; color: var(--text-secondary); line-height: 1.35; } .sim-cost-grand-line { margin: 0.55rem 0 0; padding: 0.45rem 0.65rem; font-size: 0.78rem; color: var(--text-primary); background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--primary-color) 25%, var(--border-color)); border-radius: 8px; } .sim-cost-empty { color: var(--text-secondary); margin: 0; padding: 0.25rem 0; font-size: 0.82rem; } .sim-billing-report-card { padding: 1.25rem 1.35rem !important; margin-bottom: 1.25rem !important; } .sim-billing-report-sub { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--text-secondary); font-weight: 500; } .sim-billing-list { display: flex; flex-direction: column; gap: 0.65rem; } .sim-billing-item { border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-solid); overflow: hidden; } .sim-billing-item__head { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.15rem; border: none; background: var(--canvas-bg); cursor: pointer; text-align: left; font-family: inherit; color: inherit; transition: background 0.15s ease; } .sim-billing-item__head:hover { background: var(--primary-soft); } .sim-billing-item__icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary-color); font-size: 0.8rem; } .sim-billing-item__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sim-billing-item__email { font-size: 0.84rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sim-billing-item__sub { font-size: 0.7rem; color: var(--text-secondary); } .sim-billing-item__cost { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); background: var(--surface-solid); border: 1px solid var(--border-color); padding: 0.18rem 0.45rem; border-radius: 999px; white-space: nowrap; } .sim-billing-item__chevron { color: var(--text-secondary); font-size: 0.75rem; transition: transform 0.2s ease; flex-shrink: 0; } .sim-billing-item.is-open .sim-billing-item__chevron { transform: rotate(180deg); } .sim-billing-item__body { display: none; border-top: 1px solid var(--border-color); } .sim-billing-item.is-open .sim-billing-item__body { display: block; } .sim-billing-table { margin: 0; font-size: 0.8rem; } .sim-billing-table thead th { padding: 0.65rem 1.15rem !important; font-size: 0.7rem !important; } .sim-billing-table tbody td { padding: 0.65rem 1.15rem !important; } @media (max-width: 1400px) { #view-dashboard .dash-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1180px) { #view-dashboard .dashboard-charts { grid-template-columns: 1fr; } #view-dashboard .dash-inventory-split { grid-template-columns: 1fr; } #view-dashboard .dash-inventory-pane--divider { border-left: none; border-top: 1px solid #eef2f6; padding-left: 0.35rem; padding-top: 1rem; margin-top: 0.5rem; } #view-dashboard .dash-chart-frame--inventory { height: 220px; } } @media (max-width: 860px) { #view-dashboard .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { #view-dashboard .dash-topbar { align-items: flex-start; } #view-dashboard .dash-topbar__support { width: 100%; } } /* -------------------------------------------------------------------------- 13. MODALS -------------------------------------------------------------------------- */ .modal-overlay, .custom-modal-overlay { position: fixed; inset: 0; background: rgba(10, 14, 26, 0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 1.5rem; } .modal-overlay--priority, .modal-overlay.modal-overlay--priority { z-index: var(--z-modal-priority); } .image-lightbox-card { background: var(--surface-solid); border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); width: min(96vw, 1100px); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; padding: 0; } .image-lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); } .image-lightbox-counter { margin-left: 8px; font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; } .image-lightbox-actions { display: flex; align-items: center; gap: 4px; } .image-lightbox-body { padding: 12px 16px; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.04); min-height: 40vh; } .image-lightbox-body img { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: 10px; border: 1px solid var(--border-color); background: #fff; } .image-lightbox-hint { margin: 0; padding: 8px 16px 12px; font-size: 0.75rem; color: var(--text-secondary); text-align: center; } .condition-photo-thumb { border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff; text-align: center; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .condition-photo-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); } .condition-photo-thumb img { width: 100%; height: 110px; object-fit: cover; display: block; pointer-events: none; } .condition-photo-thumb__cap { padding: 4px; font-size: 0.75rem; background: #f8fafc; font-weight: 600; color: #334155; } .condition-photo-thumb__cap i { margin-right: 4px; opacity: 0.7; } .modal-overlay.hidden, .custom-modal-overlay.hidden { display: none !important; } .modal-content, .custom-modal-card, .action-popup-card { background: var(--surface-solid); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; padding: 1.4rem 1.5rem; animation: popIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); color: var(--text-primary); } .modal-content.modal-sm { max-width: 420px; padding: 1.1rem 1.2rem; } .modal-content.modal-compact .modal-header { padding-bottom: 0.75rem; margin-bottom: 0.85rem; } .modal-content.modal-compact .input-group { margin-bottom: 0.85rem; } .modal-content.modal-compact .modal-footer { margin-top: 0.85rem; padding-top: 0.85rem; } .modal-content.modal-md { max-width: 520px; } .modal-content.modal-lg { max-width: 720px; } .modal-content.modal-xl { max-width: 850px; } .action-popup-card { max-width: 420px; text-align: center; position: relative; overflow: visible; max-height: none; padding: 1.45rem 1.4rem 1.35rem; box-shadow: var(--shadow-lg); } .action-popup-card--actions { max-width: 440px; } .action-popup-card--entity { max-width: 500px; text-align: left; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--border-color); } .modal-header h2 { font-size: 1.12rem; display: flex; align-items: center; gap: 8px; margin: 0; } .modal-footer, .modal-actions { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--border-color); } .action-popup-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%; background: var(--canvas-bg); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); z-index: 2; } .action-popup-close:hover { color: var(--danger-color); border-color: color-mix(in srgb, var(--danger-color) 35%, transparent); background: color-mix(in srgb, var(--danger-color) 8%, transparent); } .action-popup-glow { display: none; } .action-popup-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; margin: 0 auto 1rem; } .action-popup-icon.warning { background: color-mix(in srgb, var(--warning-color) 16%, transparent); color: var(--warning-color); } .action-popup-icon.danger { background: color-mix(in srgb, var(--danger-color) 16%, transparent); color: var(--danger-color); } .action-popup-icon.info { background: var(--primary-soft); color: var(--primary-color); } .action-popup-icon.success { background: color-mix(in srgb, var(--success-color) 16%, transparent); color: var(--success-color); } .action-popup-title { font-size: 1.18rem; font-weight: 800; margin-bottom: 0.35rem; color: var(--text-primary); } .action-popup-message { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 1.25rem; } .action-popup-subtitle { margin-bottom: 1.25rem; } .action-popup-actions { display: flex; flex-direction: column; gap: 0.7rem; position: relative; z-index: 1; } .action-popup-empty { padding: 1rem; color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; background: var(--canvas-bg); border-radius: var(--radius-md); border: 1px dashed var(--border-color); } .action-popup-btn { width: 100%; justify-content: center; padding: 0.8rem 1.15rem; font-size: 0.92rem; font-weight: 700; border-radius: var(--radius-md); display: flex; align-items: center; gap: 10px; transition: var(--transition); cursor: pointer; border: none; color: #fff; letter-spacing: 0.15px; } .action-popup-btn:hover { transform: none; filter: brightness(1.03); } .action-popup-btn--primary { background: var(--primary-color); box-shadow: none; } .action-popup-btn--secondary { background: #64748b; box-shadow: none; } .action-popup-btn--warning { background: var(--warning-color); box-shadow: none; } .action-popup-btn--danger { background: var(--danger-color); box-shadow: none; } .action-popup-btn--indigo { background: var(--secondary-color, #0f7a8a); box-shadow: none; } .action-popup-card.action-popup-card--compact { max-width: 420px; padding: 1.35rem 1.5rem; } .action-popup-ticket-id { color: var(--primary-color); margin: 0 0 0.35rem; font-weight: 800; letter-spacing: 0.4px; font-size: 0.92rem; } .action-popup-title--success { color: var(--success-color) !important; } .action-popup-success-chip { background: color-mix(in srgb, var(--success-color) 12%, transparent); border: 1px solid color-mix(in srgb, var(--success-color) 28%, transparent); border-radius: var(--radius-md); padding: 0.55rem 0.8rem; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--success-color); font-weight: 700; font-size: 0.9rem; } .action-popup-info-panel { background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent); border-radius: var(--radius-md); padding: 0.75rem 0.85rem; margin-bottom: 0.75rem; text-align: left; } .action-popup-info-panel__title { display: flex; align-items: center; gap: 6px; color: var(--primary-color); font-weight: 800; font-size: 0.88rem; margin-bottom: 4px; } .action-popup-info-panel__text { font-size: 0.84rem; color: var(--text-primary); margin: 0; line-height: 1.4; } .entity-popup-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; } .entity-popup-header .action-popup-icon { margin: 0; width: 48px; height: 48px; font-size: 1.35rem; flex-shrink: 0; } .entity-popup-header .action-popup-title { margin: 0; font-size: 1.28rem; text-align: left; } .entity-popup-meta { margin: 0; color: var(--primary-color); font-size: 0.84rem; font-weight: 600; } .entity-popup-list { margin-bottom: 1.25rem; max-height: 220px; overflow-y: auto; padding-right: 4px; } .entity-popup-footer { display: flex; gap: 12px; } .entity-popup-footer .btn { flex: 1; padding: 0.8rem; border-radius: var(--radius-md); font-weight: 700; } .modal-premium { text-align: center; padding: 2.25rem 2rem; border-radius: var(--radius-xl); position: relative; overflow: hidden; max-width: 440px; background: var(--surface-solid); } .modal-premium--danger { border: 1px solid color-mix(in srgb, var(--danger-color) 35%, transparent); box-shadow: var(--shadow-lg); } .modal-premium--success { text-align: left; max-width: 480px; border: 1px solid color-mix(in srgb, var(--success-color) 35%, transparent); box-shadow: var(--shadow-lg); } .modal-premium--purple { text-align: left; max-width: 480px; border: 1px solid color-mix(in srgb, var(--secondary-color, #0f7a8a) 35%, transparent); box-shadow: var(--shadow-lg); } .modal-premium-glow { display: none !important; } .modal-premium-glow--danger { display: none !important; } .modal-premium-icon { width: 64px; height: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.65rem; margin: 0 auto 1.1rem; } .modal-premium-icon--danger { background: color-mix(in srgb, var(--danger-color) 12%, transparent); color: var(--danger-color); border: 1px solid color-mix(in srgb, var(--danger-color) 28%, transparent); box-shadow: none; } .modal-premium-icon--danger i { animation: pulse 2s infinite; } .modal-premium-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.75rem; } .modal-premium-title--danger { color: var(--danger-color); } .modal-premium-message { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.75rem; padding: 0 6px; } .modal-premium-actions { display: flex; gap: 12px; justify-content: center; } .modal-premium-actions .btn { flex: 1; padding: 0.85rem; border-radius: var(--radius-md); font-weight: 700; } .modal-premium-header { display: flex; align-items: center; gap: 14px; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.1rem; } .modal-premium-header-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .modal-premium-header-icon--success { background: color-mix(in srgb, var(--success-color) 16%, transparent); color: var(--success-color); border: 2px solid color-mix(in srgb, var(--success-color) 30%, transparent); } .modal-premium-header-icon--purple { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #8b5cf6; border: 2px solid color-mix(in srgb, #8b5cf6 30%, transparent); } .modal-premium-header h2 { margin: 0; font-size: 1.4rem; font-weight: 800; } .modal-premium-header h2.title-success { color: var(--success-color); } .modal-premium-header h2.title-purple { color: #8b5cf6; } .modal-premium-header p { margin: 3px 0 0; color: var(--text-secondary); font-size: 0.86rem; } .modal-premium-panel { background: var(--canvas-bg); border: 1px solid var(--border-color); padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 1.4rem; } .modal-premium-panel-label { font-size: 0.78rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 4px; } .role-option-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--canvas-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); } .role-option-card:hover { border-color: color-mix(in srgb, var(--primary-color) 35%, transparent); background: var(--primary-soft); } .role-option-card input { width: 18px; height: 18px; accent-color: var(--primary-color); flex-shrink: 0; } .role-option-list { display: flex; flex-direction: column; gap: 10px; } .history-timeline { display: flex; flex-direction: column; gap: 0.9rem; padding-left: 0.6rem; border-left: 2px solid var(--border-color); } .history-timeline-item { position: relative; padding-left: 1rem; } .history-timeline-item::before { content: ''; position: absolute; left: -1.32rem; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary-color); } .history-timeline-item__action { margin: 0; font-weight: 600; color: var(--text-primary); } .history-timeline-item__details { margin: 0.2rem 0; font-size: 0.88rem; color: var(--text-secondary); } .history-timeline-item__meta { margin: 0; font-size: 0.78rem; color: var(--text-secondary); } .asset-history-modal { max-height: 92vh; overflow-y: auto; } .asset-life-summary { margin: 0.5rem 0 1rem; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color)); } .asset-life-summary__top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .asset-life-summary__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 4px; } .asset-life-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .asset-life-stat { background: var(--surface-solid); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; text-align: center; } .asset-life-stat span { display: block; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 2px; } .asset-life-stat strong { display: block; font-size: 1.05rem; color: var(--primary-color); } .asset-life-stat small { font-size: 0.7rem; color: var(--text-secondary); } .asset-life-meta { margin-top: 10px; font-size: 0.8rem; color: var(--text-secondary); } .asset-life-section-title { margin: 0 0 10px; font-size: 0.9rem; color: var(--text-primary); } .asset-life-section-title i { color: var(--primary-color); margin-right: 6px; } .asset-life-cycles { margin-bottom: 12px; } .asset-life-cycle { border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: var(--surface-solid); } .asset-life-cycle__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: color-mix(in srgb, var(--canvas-bg) 70%, var(--surface-solid)); border-bottom: 1px solid var(--border-color); font-size: 0.85rem; } .asset-life-cycle__role { margin-left: auto; font-size: 0.75rem; color: var(--text-secondary); } .asset-life-cycle__body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 10px 12px; font-size: 0.82rem; } .asset-life-cycle__body span { display: block; font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 2px; } .asset-life-cycle-badge { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; } .asset-life-cycle-badge--active { background: color-mix(in srgb, #2563eb 15%, transparent); color: #1d4ed8; } .asset-life-cycle-badge--pending { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; } .asset-life-cycle-badge--done { background: color-mix(in srgb, #10b981 16%, transparent); color: #047857; } .asset-life-cycle__events { border-top: 1px solid var(--border-color); padding: 8px 12px 10px; background: color-mix(in srgb, var(--canvas-bg) 40%, var(--surface-solid)); } .asset-life-cycle__events-title { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .asset-life-cycle__events .history-timeline-item { margin-bottom: 8px; } .history-timeline-item--handover::before { background: #2563eb; } .history-timeline-item--return::before { background: #059669; } .asset-life-empty { text-align: center; padding: 1rem; color: var(--text-secondary); font-size: 0.9rem; } @media (max-width: 640px) { .asset-life-summary__top, .asset-life-stats, .asset-life-cycle__body { grid-template-columns: 1fr 1fr; } } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; } /* Settings — Light / Dark theme mode picker */ .theme-mode-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } .theme-mode-option { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1.1rem 1.1rem; border: 1.5px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-solid); cursor: pointer; transition: var(--transition); text-align: left; } .theme-mode-option:hover { border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color)); } .theme-mode-option.is-active { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-soft); } .theme-mode-option__swatch { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; } .theme-mode-option__swatch--light { background: linear-gradient(135deg, #eef2ff, #ffffff); color: #3730a3; border: 1px solid #c7d2fe; } .theme-mode-option__swatch--dark { background: linear-gradient(135deg, #0b1220, #1e293b); color: #818cf8; border: 1px solid rgba(129, 140, 248, 0.35); } .theme-mode-option__label { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); } .theme-mode-option__desc { font-size: 0.78rem; color: var(--text-secondary); } /* Settings — tab rail layout */ .settings-layout { display: grid; grid-template-columns: 230px 1fr; gap: 1.25rem; align-items: start; } .settings-tab-rail { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.75rem; position: sticky; top: 1rem; } .settings-tab-btn { display: flex; align-items: center; gap: 0.6rem; text-align: left; border: none; background: transparent; color: var(--text-secondary); font-size: 0.88rem; font-weight: 700; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); } .settings-tab-btn:hover { background: color-mix(in srgb, var(--primary-color) 6%, transparent); color: var(--primary-color); } .settings-tab-btn.is-active { background: var(--primary-soft); color: var(--primary-color); } .settings-tab-content { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; } .settings-tab-pane { display: flex; flex-direction: column; gap: 1.1rem; } @media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } .settings-tab-rail { flex-direction: row; overflow-x: auto; position: static; } } .photo-upload-slot { border: 1.5px dashed var(--border-color); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; aspect-ratio: 1; cursor: pointer; overflow: hidden; background: var(--canvas-bg); transition: var(--transition); } .photo-upload-slot:hover { border-color: var(--primary-color); } .photo-upload-slot img { width: 100%; height: 100%; object-fit: cover; } /* -------------------------------------------------------------------------- 14. TOAST -------------------------------------------------------------------------- */ .toast { position: fixed; top: 20px; right: 20px; padding: 0.95rem 1.4rem; border-radius: var(--radius-md); color: #fff; font-weight: 700; font-size: 0.9rem; z-index: var(--z-toast); box-shadow: var(--shadow-lg); transform: translateY(-16px); opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 2rem)); } .toast.show { transform: translateY(0); opacity: 1; } .toast.success { background: var(--success-color); } .toast.error { background: var(--danger-color); } .toast.warning { background: var(--warning-color); } .toast.info { background: var(--primary-color); } /* -------------------------------------------------------------------------- 15. RBAC VISIBILITY (JS toggles body.role-*) -------------------------------------------------------------------------- */ body:not(.role-superadmin) .require-superadmin { display: none !important; } body.role-hr .require-admin-level, body.role-reporting_manager .require-admin-level, body.role-it_reporting_manager .require-admin-level, body.role-employee .require-admin-level { display: none !important; } body.role-employee .hide-from-employee, body.role-employee .hide-from-employee-only { display: none !important; } body.role-employee .hide-from-limited, body.role-hr .hide-from-limited, body.role-reporting_manager .hide-from-limited, body.role-it_reporting_manager .hide-from-limited { display: none !important; } body.role-employee .hide-software-nav, body.role-hr .hide-software-nav { display: none !important; } /* System Health Check modal checklist */ .hc-alerts { background: var(--canvas-bg, #f8fafc); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); padding: 0.75rem 0.9rem; } .hc-alert-item { font-size: 0.85rem; padding: 0.35rem 0.5rem; margin-top: 0.35rem; border-radius: 6px; border-left: 3px solid #b91c1c; background: rgba(185, 28, 28, 0.08); } .hc-alert-item--attn { border-left-color: #b45309; background: rgba(180, 83, 9, 0.08); } .hc-alert-cat { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-secondary); margin-right: 0.35rem; } .hc-cat-block { border: 1px solid var(--border-color); border-radius: var(--radius-sm, 8px); margin-bottom: 0.65rem; overflow: hidden; background: var(--card-bg, #fff); } .hc-cat-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.85rem; background: var(--canvas-bg, #f1f5f9); cursor: pointer; user-select: none; } .hc-cat-header-left { display: flex; align-items: center; gap: 0.55rem; } .hc-cat-num { font-size: 0.75rem; color: var(--text-secondary); font-weight: 700; } .hc-cat-title { font-weight: 700; font-size: 0.92rem; } .hc-cat-progress { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; } .hc-cat-body { padding: 0.35rem 0.55rem 0.65rem; } .hc-cat-block--collapsed .hc-cat-body { display: none; } .hc-item { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.45rem 0.35rem; border-radius: 6px; } .hc-item:hover { background: var(--canvas-bg, #f8fafc); } .hc-check { margin-top: 0.2rem; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; } .hc-item-text { flex: 1; min-width: 0; } .hc-item-title { display: block; font-size: 0.88rem; font-weight: 600; } .hc-item-hint { display: block; font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.15rem; } .hc-item-text--done .hc-item-title { text-decoration: line-through; color: var(--text-secondary); } .hc-item-cmd { display: inline-flex; gap: 0.35rem; margin-top: 0.25rem; font-size: 0.7rem; padding: 0.15rem 0.45rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--canvas-bg, #f8fafc); color: var(--success-color, #047857); font-family: ui-monospace, Consolas, monospace; } .hc-cmd-lbl { color: var(--text-secondary); text-transform: uppercase; font-size: 0.65rem; } .hc-status-group { display: flex; gap: 0.25rem; flex-shrink: 0; } .hc-status-btn { font-size: 0.65rem; font-weight: 700; padding: 0.25rem 0.4rem; border-radius: 4px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; } .hc-status-btn--ok { background: rgba(16, 185, 129, 0.15); color: #047857; border-color: #6ee7b7; } .hc-status-btn--attn { background: rgba(245, 158, 11, 0.15); color: #b45309; border-color: #fcd34d; } .hc-status-btn--crit { background: rgba(239, 68, 68, 0.15); color: #b91c1c; border-color: #fca5a5; } body.role-employee .hide-sim-sensitive, body.role-hr .hide-sim-sensitive { display: none !important; } body.role-employee .assets-admin-filters { display: none !important; } body:not(.role-employee) .require-employee { display: none !important; } body.role-admin .require-ticket-raise, body.role-superadmin .require-ticket-raise, body.role-admin .require-asset-request-create, body.role-superadmin .require-asset-request-create { display: none !important; } /* -------------------------------------------------------------------------- 16. AUTH SCREEN — Embossed split card -------------------------------------------------------------------------- */ #login-screen.modern-auth-wrapper { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; z-index: var(--z-auth-screen); overflow: hidden; background: var(--bg-color); background-image: var(--bg-image); } #login-screen.modern-auth-wrapper.hidden { display: none !important; } .emboss-card { position: relative; width: min(920px, 94vw); min-height: 560px; max-height: 96vh; background: var(--surface-solid); border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; } .emboss-card.register-active { min-height: min(720px, 96vh); max-height: 96vh; } .emboss-left-half, .emboss-right-half { padding: 2.2rem 2.5rem; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 0; max-height: 96vh; -webkit-overflow-scrolling: touch; } .emboss-half-inner { margin: auto 0; width: 100%; display: flex; flex-direction: column; justify-content: center; } .emboss-right-half { grid-column: 2; } .emboss-form-title { font-size: 1.45rem; font-weight: 800; margin-bottom: 0.25rem; flex-shrink: 0; } .emboss-form-subtitle { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 1rem; flex-shrink: 0; } .emboss-panel { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: linear-gradient(155deg, var(--primary-color) 0%, var(--primary-hover) 55%, var(--secondary-color) 140%); transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); z-index: 5; display: flex; align-items: center; justify-content: center; } .emboss-panel-contents { padding: 2.5rem; color: #fff; text-align: center; position: relative; width: 100%; height: 100%; } .emboss-panel-info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem; opacity: 1; transition: opacity 0.3s ease 0.15s; } #panel-welcome { opacity: 0; pointer-events: none; } .emboss-card.register-active .emboss-panel { transform: translateX(-100%); } .emboss-card.register-active #panel-join { opacity: 0; pointer-events: none; } .emboss-card.register-active #panel-welcome { opacity: 1; pointer-events: auto; } .emboss-panel-logo-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.6rem; } .emboss-panel-logo-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; } .emboss-panel-logo-row svg { height: 40px; flex-shrink: 0; transform: translateY(-2px); } .emboss-panel-logo-name { font-family: var(--font-heading), 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 2.15rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-transform: none; color: #ffffff; display: flex; align-items: center; position: relative; top: 3px; } .emboss-panel-product-tag { font-size: 0.75rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; opacity: 0.85; } .emboss-panel-badge { display: inline-block; background: rgba(255, 255, 255, 0.18); padding: 4px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; margin-bottom: 1rem; } .emboss-panel-info h2 { color: #fff; font-size: 1.4rem; margin-bottom: 0.7rem; } .emboss-panel-info p { color: rgba(255, 255, 255, 0.85); font-size: 0.86rem; line-height: 1.55; margin-bottom: 1.6rem; max-width: 320px; } .emboss-panel-btn { background: #fff; color: var(--primary-color); border: none; padding: 0.7rem 1.8rem; border-radius: 8px; font-weight: 800; font-size: 0.88rem; box-shadow: none; transition: var(--transition); } .emboss-panel-btn:hover { transform: none; background: #f4f6f8; } .auth-recovery-links { text-align: center; margin-top: 1.1rem; display: flex; justify-content: center; gap: 12px; font-size: 0.83rem; } .auth-recovery-links a { color: var(--text-secondary); font-weight: 700; } .auth-recovery-links a:hover { color: var(--primary-color); text-decoration: underline; } .auth-recovery-links span { color: var(--border-color); } #password-strength-box, #change-pwd-strength-box { background: var(--canvas-bg); border: 1px solid var(--border-color); color: var(--text-secondary); } /* Auth form fields — sign-in / sign-up only */ #login-screen .input-wrapper { min-width: 0; } #login-screen .input-wrapper input { min-width: 0; box-sizing: border-box; } #login-screen .emboss-right-half .input-wrapper input[type="password"] { padding-right: 2.65rem; } #login-screen .password-toggle-btn { right: 0.35rem; width: 1.85rem; height: 1.85rem; font-size: 0.8rem; } #login-screen .input-group a { font-size: 0.78rem; color: var(--primary-color); font-weight: 600; white-space: nowrap; } #register-form .input-group label { font-size: 0.76rem; margin-bottom: 0.25rem; } #register-form .input-wrapper input { padding: 0.55rem 0.65rem 0.55rem 2.1rem; font-size: 0.88rem; } #register-form .register-submit-btn { position: sticky; bottom: 0; width: 100%; margin-top: 0.75rem; padding: 0.9rem 1rem; font-size: 1rem; font-weight: 800; z-index: 3; border: none; border-radius: 12px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35); cursor: pointer; } #register-form .register-submit-btn:hover { filter: brightness(1.05); transform: translateY(-1px); } #register-form .register-scroll-hint { font-size: 0.72rem; color: var(--text-secondary); text-align: center; margin: 0.35rem 0 0; opacity: 0.85; } .modal-icon-header { display: flex; justify-content: center; margin-bottom: 1.1rem; } .modal-icon-glow { width: 62px; height: 62px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; border: 2px solid var(--border-color); } .modal-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem; text-align: center; } .modal-subtitle { font-size: 0.88rem; color: var(--text-secondary); text-align: center; margin-bottom: 1.5rem; } .modal-close-btn { position: absolute; top: 16px; right: 18px; background: transparent; border: none; font-size: 1.4rem; color: var(--text-secondary); } .support-info-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.6rem; } .support-info-item { display: flex; align-items: center; gap: 14px; background: var(--canvas-bg); border: 1px solid var(--border-color); padding: 12px 16px; border-radius: var(--radius-md); text-align: left; } .support-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--surface-solid); color: var(--primary-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); } .support-text { display: flex; flex-direction: column; } .support-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.5px; } .support-value { font-size: 0.9rem; font-weight: 700; } .btn-modal-action { width: 100%; padding: 0.8rem; border-radius: var(--radius-sm); background: var(--primary-color); color: #fff; font-weight: 700; border: none; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary-color) 60%, transparent); } @media (max-width: 820px) { .emboss-card { grid-template-columns: 1fr; } .emboss-panel { display: none; } .emboss-left-half, .emboss-right-half { display: none; padding: 2.2rem 1.8rem; } .emboss-card:not(.register-active) .emboss-left-half { display: flex; } .emboss-card.register-active .emboss-right-half { display: flex; grid-column: 1; } } /* -------------------------------------------------------------------------- 17. LIVE CHAT HUB -------------------------------------------------------------------------- */ .chat-hub-shell { padding: 0; overflow: hidden; border-radius: var(--radius-lg); } .chat-hub-layout { display: grid; grid-template-columns: 280px 1fr 290px; height: calc(100vh - 175px); min-height: 540px; max-height: 840px; } .chat-hub-list-pane { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border-color); background: var(--surface-solid); } .chat-hub-list-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.8rem; height: 52px; min-height: 52px; max-height: 52px; border-bottom: 1px solid var(--border-color); background: var(--surface-solid); box-sizing: border-box; flex-shrink: 0; } .chat-hub-search-wrap { flex: 1; margin: 0; } .chat-hub-search-wrap>i { left: 0.8rem; font-size: 0.8rem; } .chat-hub-search-wrap input { border-radius: 999px; background: color-mix(in srgb, var(--canvas-bg) 65%, var(--surface-solid)); border-color: transparent; font-size: 0.82rem; height: 34px; padding: 0.35rem 0.8rem 0.35rem 2.2rem; } .chat-hub-search-wrap input:focus { border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); background: var(--surface-solid); } .chat-hub-filter-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-color); } .chat-hub-tickets-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .chat-hub-conv-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.8rem 0.9rem; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent); transition: background 0.15s ease; } .chat-hub-conv-item:hover { background: color-mix(in srgb, var(--primary-color) 4%, var(--surface-solid)); } .chat-hub-conv-item.is-selected { background: color-mix(in srgb, var(--primary-color) 9%, var(--surface-solid)); } .chat-hub-conv-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; flex-shrink: 0; overflow: hidden; } .chat-hub-conv-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .chat-hub-conv-body { min-width: 0; flex: 1; } .chat-hub-conv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; } .chat-hub-conv-name { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-hub-conv-time { font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .chat-hub-conv-preview { font-size: 0.76rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; padding-right: 14px; } .chat-hub-conv-preview.is-unread { color: var(--text-primary); font-weight: 600; } .chat-hub-conv-status { width: 8px; height: 8px; border-radius: 50%; background: var(--success-color); flex-shrink: 0; align-self: center; } .chat-hub-conv-status.is-closed { background: var(--text-secondary); opacity: 0.45; } .chat-hub-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.85rem; border-top: 1px solid var(--border-color); font-size: 0.68rem; color: var(--text-secondary); flex-shrink: 0; background: color-mix(in srgb, var(--canvas-bg) 40%, var(--surface-solid)); } .chat-hub-pagination { display: flex; align-items: center; gap: 3px; } .chat-hub-page-btn { min-width: 24px; height: 24px; padding: 0 5px; border: none; border-radius: 5px; background: transparent; color: var(--text-secondary); font-size: 0.7rem; font-weight: 700; cursor: pointer; } .chat-hub-page-btn:hover { color: var(--primary-color); background: var(--primary-soft); } .chat-hub-page-btn.is-active { background: var(--primary-color); color: #fff; } .chat-hub-page-btn:disabled { opacity: 0.35; cursor: default; } .chat-hub-room-pane { display: flex; flex-direction: column; overflow: hidden; position: relative; background: var(--surface-solid); border-right: 1px solid var(--border-color); } .chat-hub-room-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%; } .chat-hub-context-pane { display: flex; flex-direction: column; overflow-y: auto; background: color-mix(in srgb, var(--canvas-bg) 55%, var(--surface-solid)); } .chat-hub-context-empty { text-align: center; color: var(--text-secondary); font-size: 0.84rem; padding: 3rem 1rem; } .chat-hub-context-empty i { font-size: 1.5rem; opacity: 0.4; margin-bottom: 0.5rem; display: block; } .chat-hub-context-body { display: flex; flex-direction: column; } .chat-hub-context-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 1rem; height: 52px; min-height: 52px; max-height: 52px; box-sizing: border-box; font-size: 0.92rem; font-weight: 800; color: var(--text-primary); border-bottom: 1px solid var(--border-color); background: var(--surface-solid); flex-shrink: 0; } .chat-hub-context-head__title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .chat-hub-context-head__title i { color: var(--primary-color); font-size: 0.9rem; } .chat-hub-context-head__badges { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 5px; flex-shrink: 0; } .chat-hub-context-head__badges .status-badge { font-size: 0.68rem; padding: 2px 8px; white-space: nowrap; } .chat-hub-ctx-block { padding: 0.85rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); } .chat-hub-ctx-block:last-child { border-bottom: none; } .chat-hub-context-section__title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 0.6rem; } .chat-hub-context-asset { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.65rem 0.7rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-solid); cursor: pointer; text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .chat-hub-context-asset:hover { border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); box-shadow: var(--shadow-sm); } .chat-hub-context-asset__icon { width: 40px; height: 40px; border-radius: 8px; background: color-mix(in srgb, var(--canvas-bg) 70%, var(--surface-solid)); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; border: 1px solid var(--border-color); } .chat-hub-context-asset__meta { min-width: 0; flex: 1; } .chat-hub-context-asset__name { font-weight: 700; font-size: 0.84rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-hub-context-asset__tag { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; } .chat-hub-asset-chevron { font-size: 0.7rem; color: var(--text-secondary); flex-shrink: 0; } .chat-hub-context-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.38rem 0; font-size: 0.8rem; } .chat-hub-context-row>span:first-child { color: var(--text-secondary); font-weight: 600; flex-shrink: 0; } .chat-hub-context-row>span:last-child, .chat-hub-ctx-id-wrap { color: var(--text-primary); font-weight: 700; text-align: right; min-width: 0; word-break: break-word; } .chat-hub-ctx-id-wrap { display: inline-flex; align-items: center; gap: 4px; } .chat-hub-copy-btn { width: 24px; height: 24px; padding: 0; font-size: 0.68rem; color: var(--text-secondary); } .chat-hub-context-actions { display: flex; flex-direction: column; gap: 0.45rem; } .chat-hub-qa-btn { width: 100%; justify-content: center; border-radius: 10px; padding: 0.62rem 1rem; font-size: 0.84rem; font-weight: 700; } .chat-hub-qa-resolve { background: var(--success-color); border-color: var(--success-color); } @media (max-width: 1200px) { .chat-hub-layout { grid-template-columns: 260px 1fr; } .chat-hub-context-pane { display: none; } } .chat-hub-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; color: var(--text-secondary); } .chat-hub-empty h3 { margin: 0 0 0.35rem; color: var(--text-primary); font-size: 1rem; } .chat-hub-empty p { margin: 0; font-size: 0.84rem; } .chat-hub-room-header { padding: 0 1rem; height: 52px; min-height: 52px; max-height: 52px; box-sizing: border-box; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--surface-solid); flex-shrink: 0; } .chat-hub-room-header__main { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; } .chat-hub-contact-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex-shrink: 0; position: relative; overflow: hidden; } .chat-hub-contact-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .chat-hub-online-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--success-color); border: 2px solid var(--surface-solid); right: 0; bottom: 0; } .chat-hub-online-dot.is-closed { background: var(--text-secondary); } .chat-hub-contact-name { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-hub-contact-role { font-size: 0.76rem; color: var(--text-secondary); margin-top: 1px; } .chat-hub-room-header__meta { min-width: 0; flex: 1; } .chat-hub-menu-btn { flex-shrink: 0; } .chat-hub-observer-banner { background: color-mix(in srgb, var(--secondary-color) 12%, transparent); border-bottom: 1px dashed var(--secondary-color); color: var(--secondary-color); padding: 7px 1.1rem; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .chat-hub-observer-pill { font-size: 0.65rem; background: var(--secondary-color); color: #fff; padding: 2px 8px; border-radius: 10px; font-weight: 800; } .chat-hub-messages { flex: 1; overflow-y: auto; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; background: color-mix(in srgb, var(--canvas-bg) 92%, #fff); } .chat-hub-date-sep { display: flex; align-items: center; justify-content: center; margin: 0.5rem 0 0.25rem; } .chat-hub-date-sep span { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); } .chat-hub-system-note { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0.5rem 0; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-style: italic; color: var(--text-secondary); text-align: center; } .chat-hub-system-note i { opacity: 0.7; font-size: 0.7rem; } .chat-hub-msg { display: flex; flex-direction: column; width: fit-content; max-width: 65%; } .chat-hub-msg.is-mine { align-self: flex-end; align-items: flex-end; } .chat-hub-msg.is-theirs { align-self: flex-start; align-items: flex-start; } .chat-hub-msg__meta { margin-bottom: 3px; max-width: 100%; } .chat-hub-msg__meta.is-mine { text-align: right; } .chat-hub-msg__meta.is-theirs { text-align: left; } .chat-hub-bubble__sender { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 0.68rem; line-height: 1.2; color: var(--text-secondary); } .chat-hub-bubble__sender strong { color: var(--text-primary); font-weight: 700; } .chat-hub-role-pill { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; background: rgba(59, 130, 246, 0.14); color: #2563eb; } .chat-hub-role-pill--superadmin { background: linear-gradient(135deg, #8b5cf6, #d946ef); color: #fff; } .chat-hub-role-pill--admin { background: rgba(16, 185, 129, 0.18); color: #059669; } .chat-hub-role-pill--hr { background: rgba(249, 115, 22, 0.18); color: #ea580c; } .chat-hub-role-pill--employee, .chat-hub-role-pill--user { background: rgba(100, 116, 139, 0.16); color: #475569; } .chat-hub-role-pill--reporting_manager, .chat-hub-role-pill--it_reporting_manager { background: rgba(99, 102, 241, 0.16); color: #3730a3; } .chat-hub-sender-note { font-size: 0.6rem; opacity: 0.85; font-style: italic; } .chat-hub-bubble { display: inline-block; padding: 0.35rem 0.55rem 0.28rem; border-radius: 8px; font-size: 0.82rem; line-height: 1.35; word-break: break-word; max-width: 100%; } .chat-hub-bubble.is-mine { background: var(--primary-color); color: #fff; border-bottom-right-radius: 2px; } .chat-hub-bubble.is-theirs { background: var(--surface-solid); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent); border-bottom-left-radius: 2px; } .chat-hub-bubble__time { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 2px; margin-left: 0.55rem; float: right; font-size: 0.62rem; line-height: 1; opacity: 0.8; white-space: nowrap; } .chat-hub-bubble.is-theirs .chat-hub-bubble__time { color: var(--text-secondary); } .chat-hub-bubble.is-mine .chat-hub-bubble__time { color: rgba(255, 255, 255, 0.85); } .chat-hub-bubble.is-mine .chat-hub-bubble__time i { color: rgba(255, 255, 255, 0.95); font-size: 0.58rem; } .chat-hub-msg-img { margin-top: 4px; max-width: 220px; max-height: 180px; border-radius: 8px; cursor: pointer; display: block; object-fit: cover; border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent); } .chat-hub-attach-bubble { margin-top: 4px; } .chat-hub-doc-card { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--surface-solid) 88%, var(--primary-color) 12%); border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent); color: inherit; text-decoration: none; font-size: 0.8rem; font-weight: 600; max-width: 220px; word-break: break-word; } .chat-hub-doc-card i { font-size: 1.2rem; color: var(--primary-color); flex-shrink: 0; } .chat-hub-attach-preview { display: flex; align-items: center; gap: 10px; background: var(--primary-soft); border-top: 1px dashed var(--primary-color); padding: 8px 1rem; flex-shrink: 0; } .chat-hub-attach-preview__thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--surface-solid); border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent); display: flex; align-items: center; justify-content: center; } .chat-hub-attach-preview__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .chat-hub-doc-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 1.4rem; background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-solid)); } .chat-hub-attach-preview__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .chat-hub-attach-preview__meta span { font-size: 0.82rem; color: var(--primary-color); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-hub-attach-preview__meta small { font-size: 0.72rem; color: var(--text-secondary); } .chat-hub-attach-preview__remove { color: var(--danger-color); flex-shrink: 0; } .chat-hub-img-preview { display: flex; align-items: center; justify-content: space-between; background: var(--primary-soft); border-top: 1px dashed var(--primary-color); padding: 7px 1.1rem; flex-shrink: 0; } .chat-hub-img-preview__label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--primary-color); font-weight: 700; } .chat-hub-input-row { padding: 0.75rem 1rem; background: var(--surface-solid); border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; } .chat-hub-attach-btn { flex-shrink: 0; color: var(--text-secondary); border: none; background: transparent; } .chat-hub-composer { flex: 1; display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-solid); padding: 0 0.35rem 0 0.9rem; min-width: 0; } .chat-hub-composer input { flex: 1; border: none; background: transparent; padding: 0.55rem 0; font-size: 0.86rem; outline: none; min-width: 0; } .chat-hub-emoji-btn { width: 32px; height: 32px; border: none; background: transparent; color: var(--text-secondary); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat-hub-emoji-btn:hover { color: var(--primary-color); background: var(--primary-soft); } .chat-hub-send-btn { width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--primary-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .chat-hub-send-btn:hover { background: var(--primary-hover); } .chat-hub-closed-notice { padding: 0.9rem; background: var(--canvas-bg); border-top: 1px dashed var(--border-color); text-align: center; color: var(--text-secondary); font-size: 0.84rem; font-weight: 600; flex-shrink: 0; } .chat-bubble { max-width: 74%; padding: 0.7rem 0.95rem; border-radius: var(--radius-md); font-size: 0.86rem; line-height: 1.5; box-shadow: var(--shadow-sm); } .chat-bubble.mine { align-self: flex-end; background: var(--primary-color); color: #fff; } .chat-bubble.theirs { align-self: flex-start; background: var(--surface-solid); border: 1px solid var(--border-color); } /* -------------------------------------------------------------------------- 18. RESPONSIVE -------------------------------------------------------------------------- */ /* Note: the sidebar stays a normal flex sibling of .main-content at every width (never position:fixed) so it can never visually overlap the page content - it simply narrows itself via the existing .collapsed state. */ @media (max-width: 1080px) { .sidebar { width: 208px; } .sidebar.collapsed { width: 72px; } .main-content { padding: 0 1.5rem 1.5rem; } .sidebar-brand-stack { flex-direction: row; align-items: center; gap: 0.6rem; } .sidebar-header img.sidebar-brand-icon { width: auto; height: auto; max-width: 100%; max-height: 64px; object-position: center; filter: contrast(1.22) saturate(1.18); } .sidebar-brand-logo-plate { max-width: 140px; height: auto; min-height: 60px; max-height: 74px; overflow: visible; justify-content: center; background: #ffffff; padding: 0.35rem 0.65rem; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .sidebar-brand-wordmark { font-size: 0.66rem; letter-spacing: 0.1em; padding: 0.22rem 0.58rem; align-self: center; } .sidebar-brand-pair { gap: 8px; } .sidebar-header { min-height: 78px; height: auto; padding: 0.6rem 1rem 0.6rem; align-items: flex-start; justify-content: center; } } @media (max-width: 640px) { .sidebar { width: 78px; } .sidebar .sidebar-brand-lockup, .sidebar .sidebar-brand-pill, .sidebar .sidebar-logo-full, .sidebar .sidebar-brand-group, .sidebar .sidebar-brand-tag, .sidebar .sidebar-brand-row, .sidebar .sidebar-brand-title, .sidebar .sidebar-brand-pair, .sidebar .sidebar-brand-stack, .sidebar .sidebar-brand-logo-plate, .sidebar .sidebar-brand-wordmark, .sidebar .nav-text, .sidebar .nav-chat-badge, .sidebar #sidebar-chat-badge, .sidebar #sidebar-agreements-badge { display: none; } .sidebar .sidebar-logo-mini { display: inline-flex; } .sidebar .nav-links a, .sidebar .nav-links a.nav-link-chat-hub { justify-content: center; padding: 0.7rem; gap: 0; } .sidebar .sidebar-header { padding: 0; gap: 0; } .main-content { padding: 0 1rem 1.5rem; } .top-header { flex-wrap: wrap; height: auto; margin: 0.6rem 0 1rem 0; padding: 0.6rem 0.85rem; } } /* -------------------------------------------------------------------------- 19. ASSET QR STICKER & SCAN -------------------------------------------------------------------------- */ .asset-print-sticker { background: #fff; border: 1px solid #cbd5e1; width: 4.2cm; height: 2cm; margin: 1.25rem auto; padding: 0.15cm 0.18cm; display: flex; align-items: center; justify-content: space-between; gap: 0.18cm; border-radius: 3px; box-sizing: border-box; color: #000; } .asset-sticker-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 1px; padding-right: 4px; } .asset-sticker-brand { display: block; width: 100%; line-height: 0; margin-bottom: 1px; } .asset-sticker-logo-svg { height: 13px; width: 40px; display: block; } .asset-sticker-tag { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 900; line-height: 1.05; color: #000; letter-spacing: 0.1px; word-break: break-all; margin: 0; padding: 0; } .asset-sticker-qr { width: 60px; height: 60px; flex-shrink: 0; } .asset-sticker-qr img { display: block; width: 60px !important; height: 60px !important; image-rendering: pixelated; } .asset-scan-details { display: grid; gap: 0.65rem; } .asset-scan-row { display: grid; grid-template-columns: 130px 1fr; gap: 0.5rem; padding: 0.55rem 0.65rem; background: color-mix(in srgb, var(--primary-color) 6%, transparent); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.9rem; } .asset-scan-row strong { color: var(--text-secondary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .asset-scan-row span { color: var(--text-primary); font-weight: 600; word-break: break-word; } .asset-scan-header { text-align: center; padding: 0.75rem; margin-bottom: 0.5rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent); } .asset-scan-header h3 { margin: 0; font-size: 1.35rem; color: var(--primary-color); } .asset-scan-not-found { text-align: center; padding: 1.5rem; color: var(--text-secondary); } /* Dashboard alert widgets — theme-aware */ .dashboard-notice { padding: 0.65rem 0.85rem; border-radius: 8px; border-left: 4px solid; font-size: 0.88rem; display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.55rem; color: var(--text-primary); } .dashboard-notice:last-child { margin-bottom: 0; } .dashboard-notice__icon { font-size: 1.15rem; margin-top: 2px; flex-shrink: 0; } .dashboard-notice__body { flex: 1; } .dashboard-notice__title { display: block; font-size: 0.92rem; font-weight: 800; margin: 0; color: var(--text-primary); } .dashboard-notice__sub { display: block; font-size: 0.82rem; font-weight: 700; margin: 2px 0 0; } .dashboard-notice--success { background: rgba(16, 185, 129, 0.12); border-color: #10b981; } .dashboard-notice--success .dashboard-notice__icon { color: #34d399; } .dashboard-notice--success .dashboard-notice__sub { color: #6ee7b7; } .dashboard-notice--info { background: rgba(37, 99, 235, 0.12); border-color: #2563eb; } .dashboard-notice--info .dashboard-notice__icon { color: #60a5fa; } .dashboard-notice--info .dashboard-notice__sub { color: #93c5fd; } .dashboard-notice--warning { background: rgba(245, 158, 11, 0.12); border-color: #f59e0b; } .dashboard-notice--warning .dashboard-notice__icon { color: #fbbf24; } .dashboard-notice--warning .dashboard-notice__sub { color: #fcd34d; } .dashboard-notice--danger { background: rgba(239, 68, 68, 0.12); border-color: #ef4444; } .dashboard-notice--danger .dashboard-notice__icon { color: #f87171; } .dashboard-notice--danger .dashboard-notice__sub { color: #fca5a5; } .dashboard-notice--purple { background: color-mix(in srgb, var(--secondary-color) 10%, transparent); border-color: var(--secondary-color); } .dashboard-notice--purple .dashboard-notice__icon { color: var(--secondary-color); } .dashboard-notice--purple .dashboard-notice__sub { color: var(--secondary-color); } .dashboard-notice__badge { font-size: 0.75rem; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; background: var(--primary-soft); color: var(--text-secondary); } .dashboard-alert-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); background: var(--canvas-bg); border: 1px solid var(--border-color); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .dashboard-alert-item:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color)); } .dashboard-alert-item strong { color: var(--text-primary); font-size: 0.84rem; } .dashboard-alert-item span { color: var(--text-secondary); font-size: 0.78rem; } .dashboard-alert-item .alert-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .dashboard-alert-item .alert-badge--danger { background: rgba(239, 68, 68, 0.15); color: #f87171; } .dashboard-alert-item .alert-badge--warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } .dashboard-alert-item .alert-badge--info { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } /* Table inline code */ table code, .data-table code { background: var(--canvas-bg); color: var(--text-primary); padding: 2px 6px; border-radius: 4px; font-size: 0.82em; border: 1px solid var(--border-color); } /* Agreement modal description */ #td-desc { background: var(--canvas-bg) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; } /* Employee action popup */ .emp-action-item { color: var(--text-primary) !important; background: var(--canvas-bg) !important; border: 1px solid var(--border-color) !important; } .emp-action-item:hover { background: var(--primary-soft) !important; border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)) !important; } /* Chart custom tooltip */ .custom-tooltip { background: var(--surface-solid) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--shadow-lg) !important; } .custom-tooltip .tooltip-cat-box { background: var(--canvas-bg); border: 1px solid var(--border-color); } .custom-tooltip .tooltip-header { border-bottom-color: var(--border-color) !important; } html[data-theme="dark"] table tbody tr:hover, html[data-theme="dark"] .data-table tbody tr:hover { background: rgba(20, 184, 166, 0.08); } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .card { border-color: var(--glass-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(20, 184, 166, 0.08); } html[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #0f766e 0%, #0d7377 100%); box-shadow: 0 6px 18px rgba(15, 118, 110, 0.28); } html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 8px 22px rgba(20, 184, 166, 0.28); } html[data-theme="dark"] .sidebar { background: var(--brand-teal, #0d1e2b); border-right: 1px solid rgba(20, 184, 166, 0.16); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .sidebar-brand-logo-plate { background: #163042; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(20, 184, 166, 0.28); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .sidebar-header:hover .sidebar-brand-logo-plate { background: #1a3a4d; border-color: rgba(20, 184, 166, 0.4); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .sidebar-brand-wordmark { background: rgba(15, 118, 110, 0.22); color: #5eead4; border: 1px solid rgba(20, 184, 166, 0.28); box-shadow: none; text-shadow: none; } html[data-theme="dark"] .sidebar-logo-round { background: #163042; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(20, 184, 166, 0.28); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .top-header { background: var(--brand-teal, #0d1e2b); border: 1px solid rgba(20, 184, 166, 0.18); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .it-support-ticker { background: rgba(20, 184, 166, 0.1); border-color: rgba(20, 184, 166, 0.22); } html[data-theme="dark"] .it-support-ticker__icon { background: rgba(20, 184, 166, 0.18); color: #5eead4; } html[data-theme="dark"] .top-header .top-ghost-btn, html[data-theme="dark"] .top-header .icon-btn { background: rgba(20, 184, 166, 0.1); color: #e2e8f0; border: 1px solid rgba(20, 184, 166, 0.16); } html[data-theme="dark"] .top-header .top-ghost-btn:hover, html[data-theme="dark"] .top-header .icon-btn:hover { background: rgba(20, 184, 166, 0.2); color: #ffffff; } html[data-theme="dark"] .top-header .top-bar-profile-widget { background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.16); } html[data-theme="dark"] .top-header .top-bar-profile-widget:hover { background: rgba(20, 184, 166, 0.18); } html[data-theme="dark"] .nav-links a { color: rgba(226, 232, 240, 0.82); } html[data-theme="dark"] .nav-links a:hover { background: rgba(20, 184, 166, 0.12); color: #5eead4; } html[data-theme="dark"] .nav-links a:hover i { color: #5eead4; } html[data-theme="dark"] .nav-links a.active { background: var(--brand-surface, #163042); color: #99f6e4; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); border: 1px solid rgba(20, 184, 166, 0.28); } html[data-theme="dark"] .nav-links a.active i { color: #99f6e4; } html[data-theme="dark"] #view-dashboard .dash-kpi-card:hover { box-shadow: 0 14px 36px rgba(45, 212, 191, 0.18); } /* Dark mode only — fix hardcoded navy titles/rows that vanish on dark cards */ html[data-theme="dark"] #view-dashboard .dash-panel__title, html[data-theme="dark"] #view-dashboard .dash-alert-head h3, html[data-theme="dark"] #view-dashboard .dash-alert-row__title, html[data-theme="dark"] #view-dashboard .dash-chat-row__left h3 { color: #f1f5f9; } html[data-theme="dark"] #view-dashboard .dash-panel__title { border-bottom-color: rgba(148, 163, 184, 0.22); } html[data-theme="dark"] #view-dashboard .dash-inventory-pane--divider { border-left-color: rgba(148, 163, 184, 0.22); } html[data-theme="dark"] #view-dashboard .dash-alert-row { border-bottom-color: rgba(148, 163, 184, 0.14); } html[data-theme="dark"] #view-dashboard .dash-alert-row__meta { color: #94a3b8; } html[data-theme="dark"] #view-dashboard .dash-alert-row--danger .dash-alert-row__meta { color: var(--dash-rose, #fb7185); } html[data-theme="dark"] #view-dashboard .dash-alert-row--warning .dash-alert-row__meta { color: var(--dash-amber, #fbbf24); } html[data-theme="dark"] #view-dashboard .dash-alert-row--empty, html[data-theme="dark"] #view-dashboard .dash-inventory-pane__label { color: #94a3b8; } html[data-theme="dark"] #view-dashboard .dashboard-chat-shortcut:hover { background: color-mix(in srgb, var(--dash-teal, #14b8a6) 10%, var(--surface-solid)); } html[data-theme="dark"] .condition-photo-thumb__cap { background: rgba(15, 23, 42, 0.85); color: #e2e8f0; } html[data-theme="dark"] .cmdk-panel { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(45, 212, 191, 0.22); } /* Employee Asset Kit Hub */ .employee-kit-modal { max-height: 90vh; overflow-y: auto; } .employee-kit-assets { max-height: 220px; overflow-y: auto; margin-bottom: 12px; } .employee-kit-agreements { margin-bottom: 12px; font-size: 0.85rem; } .employee-kit-workflow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); } .employee-kit-workflow .btn { font-size: 0.82rem; } .employee-kit-footer { justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .employee-kit-exit-banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 0.85rem; line-height: 1.5; background: color-mix(in srgb, var(--warning-color) 12%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--warning-color) 35%, var(--border-color)); } .employee-kit-exit-banner--danger { background: color-mix(in srgb, var(--danger-color) 10%, var(--surface-solid)); border-color: color-mix(in srgb, var(--danger-color) 35%, var(--border-color)); } .employee-kit-exit-banner--ok { background: color-mix(in srgb, var(--success-color) 10%, var(--surface-solid)); border-color: color-mix(in srgb, var(--success-color) 35%, var(--border-color)); } .emp-kit-asset-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 6px; background: var(--canvas-bg); } .emp-kit-asset-row__actions { display: flex; flex-wrap: wrap; gap: 4px; } .emp-kit-asset-row__actions .btn { padding: 3px 8px; font-size: 0.72rem; } .emp-exit-badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; font-weight: 700; } .emp-exit-badge--active { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .emp-exit-badge--done { background: rgba(16, 185, 129, 0.15); color: #10b981; } .clearance-tab--exit.is-active { border-color: #ef4444; color: #ef4444; } .clearance-exit-panel { margin-bottom: 1rem; padding: 1rem 1.15rem; } .clearance-exit-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 8px; background: var(--canvas-bg); } .clearance-exit-card__meta { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; } .exit-agreement-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 6px; font-size: 0.84rem; } /* -------------------------------------------------------------------------- 20. NAVY + TEAL ENTERPRISE POLISH (global) -------------------------------------------------------------------------- */ .btn-icon, .btn-close, .action-btn { border-radius: 8px; } .modal-icon-glow { width: 56px; height: 56px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-color); border: 1px solid var(--border-color); box-shadow: none; } .action-popup-card--asset .action-popup-btn--primary, .action-popup-card--asset .action-popup-btn { box-shadow: none; } .chat-bubble.mine { background: var(--primary-color); } .spotlight-search-trigger { border-radius: 8px; box-shadow: none; } .top-header { background: var(--brand-teal, #078787); } .emp-table-avatar { background: var(--primary-color); box-shadow: none; } .chart-card-pill { border-radius: 6px; } .nav-chat-badge { border-radius: 6px; } .filter-chip, .chip, .pill { border-radius: 6px !important; } /* Soften leftover glow / neon ornaments */ .modal-premium-glow, .action-popup-glow { display: none !important; } .sidebar { background: var(--brand-teal, #078787); } .main-content { background: transparent; } /* ----------------------------------------------------------------------- Chat Hub: Emoji Picker Panel ----------------------------------------------------------------------- */ .chat-hub-emoji-picker { position: absolute; bottom: calc(100% + 6px); right: 0; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: var(--surface-solid, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14); z-index: 200; width: 216px; animation: fadeInUp 0.15s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .chat-hub-emoji-btn-item { background: none; border: none; font-size: 1.35rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; line-height: 1; transition: background 0.15s, transform 0.1s; flex: 0 0 auto; } .chat-hub-emoji-btn-item:hover { background: var(--primary-soft, rgba(37, 99, 235, 0.08)); transform: scale(1.2); } /* Make the emoji button container relatively positioned so picker can anchor to it */ .chat-hub-composer { position: relative; } /* ----------------------------------------------------------------------- Chat Hub: Employee Monitoring Transparency Notice ----------------------------------------------------------------------- */ .chat-hub-monitor-notice { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: color-mix(in srgb, var(--primary-color, #2563eb) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #2563eb) 20%, transparent); font-size: 0.75rem; color: var(--primary-color, #2563eb); font-weight: 600; opacity: 0.85; flex-shrink: 0; } .chat-hub-monitor-notice i { font-size: 0.8rem; flex-shrink: 0; } /* ----------------------------------------------------------------------- Chat Hub: Pagination Previous/Next disabled state ----------------------------------------------------------------------- */ .chat-hub-page-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }