/* ===================================================================== Dhrubo Visitor Management System — Design System Brand language derived from the supplied visitor-registration mockups: deep navy + corporate blue, rounded white cards, soft shadows, a confident geometric sans for headings and a script accent for taglines. Implements 4 selectable templates via [data-theme] on . ===================================================================== */ :root{ /* ---- Corporate Light (default) ------------------------------- */ --navy-950:#0a2440; --navy-900:#0d2c4e; --navy-800:#123a63; --brand-600:#1a5fd0; --brand-500:#1e6fe0; --brand-400:#4b8cf0; --brand-100:#e4eefd; --brand-50:#f2f7fd; --bg-page:#eef3fa; --bg-shell: linear-gradient(180deg,#eef4fb 0%, #e7f0fb 100%); --surface:#ffffff; --surface-alt:#f6f9fd; --border-soft:#e3eaf3; --text-strong:#0d2438; --text-body:#3d5470; --text-muted:#7c8ba3; --success:#17a463; --success-bg:#e8f9f0; --warning:#f5a623; --warning-bg:#fff6e6; --danger:#e0433a; --danger-bg:#fdeceb; --info:#1e6fe0; --info-bg:#e9f2fd; --secondary:#8592a6; --secondary-bg:#eef1f5; --radius-lg:18px; --radius-md:14px; --radius-sm:10px; --shadow-card: 0 10px 30px -12px rgba(13,44,78,.14), 0 2px 6px rgba(13,44,78,.06); --shadow-pop: 0 20px 45px -15px rgba(13,44,78,.28); --sidebar-w: 264px; --sidebar-w-collapsed: 84px; --topbar-h: 68px; --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-script: 'Dancing Script', cursive; } /* ---- Modern Blue theme ---- */ html[data-theme="modern_blue"]{ --navy-950:#071b3d; --navy-900:#0a2657; --brand-600:#155ef7; --brand-500:#2f74ff; --brand-400:#5f95ff; --brand-100:#e2ecff; --brand-50:#eef4ff; --bg-page:#eef2ff; --bg-shell: linear-gradient(180deg,#eef2ff, #e6edff); --surface:#ffffff; --border-soft:#dfe6fb; --text-strong:#0b1f45; } /* ---- Dark Professional theme ---- */ html[data-theme="dark_professional"]{ --navy-950:#050d1a; --navy-900:#0a1a30; --navy-800:#122642; --brand-600:#3b82f6; --brand-500:#4f90ff; --brand-400:#7aabff; --brand-100:#16305a; --brand-50:#0f2542; --bg-page:#0b1526; --bg-shell: linear-gradient(180deg,#0b1526, #0c1a30); --surface:#101d33; --surface-alt:#0d1830; --border-soft:#1e2f4d; --text-strong:#eef4ff; --text-body:#b7c4dd; --text-muted:#8093b5; --success-bg:#0e2c22; --warning-bg:#332409; --danger-bg:#33130f; --info-bg:#0f2542; --secondary-bg:#1a2740; --shadow-card: 0 10px 30px -12px rgba(0,0,0,.55); } /* ---- Minimal Reception theme (big touch targets, high contrast) ---- */ html[data-theme="minimal_reception"]{ --brand-600:#0f62d6; --brand-500:#1570ea; --bg-page:#ffffff; --bg-shell:#ffffff; --surface:#ffffff; --border-soft:#e2e6ec; --text-strong:#101828; --radius-lg:20px; } *{box-sizing:border-box;} html,body{height:100%;} body{ font-family: var(--font-body); background: var(--bg-shell); color: var(--text-body); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6,.font-heading{font-family:var(--font-heading); color:var(--text-strong); font-weight:600;} .font-script{font-family:var(--font-script);} a{ text-decoration:none; } .text-muted-soft{color:var(--text-muted) !important;} .small-caps{letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; font-weight:700; color:var(--text-muted);} /* =========================== APP SHELL =========================== */ .app-shell{ display:flex; min-height:100vh; } .app-sidebar{ width:var(--sidebar-w); flex-shrink:0; background:linear-gradient(180deg,var(--navy-950),var(--navy-900)); color:#cfe0f7; position:fixed; top:0; bottom:0; left:0; z-index:1030; display:flex; flex-direction:column; transition:width .2s ease; } .app-sidebar.collapsed{ width:var(--sidebar-w-collapsed); } .sidebar-brand{ display:flex; align-items:center; gap:.65rem; padding:1.15rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.08); color:#fff; } .sidebar-brand .logo-mark{ width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand-500),var(--brand-400)); display:flex;align-items:center;justify-content:center;flex-shrink:0; box-shadow:0 6px 16px rgba(30,111,224,.45); } .sidebar-brand .brand-text{ line-height:1.1; } .sidebar-brand .brand-text strong{ font-family:var(--font-heading); font-size:1.02rem; display:block;} .sidebar-brand .brand-text span{ font-size:.68rem; color:#9fb6d8; } .app-sidebar.collapsed .brand-text, .app-sidebar.collapsed .nav-heading, .app-sidebar.collapsed .nav-label{ display:none;} .sidebar-nav{ flex:1; overflow-y:auto; padding:.85rem .7rem; } .sidebar-nav::-webkit-scrollbar{width:5px;} .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:4px;} .nav-heading{ font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#5f7ea9; margin:1rem .6rem .35rem; } .nav-heading:first-child{ margin-top:.2rem; } .nav-item-link{ display:flex; align-items:center; gap:.75rem; padding:.62rem .75rem; border-radius:10px; color:#c7d8f0; font-size:.9rem; font-weight:500; margin-bottom:2px; white-space:nowrap; overflow:hidden; } .nav-item-link i{ font-size:1.05rem; width:20px; text-align:center; flex-shrink:0; } .nav-item-link:hover{ background:rgba(255,255,255,.07); color:#fff; } .nav-item-link.active{ background:linear-gradient(135deg,var(--brand-600),var(--brand-500)); color:#fff; box-shadow:0 6px 16px rgba(30,111,224,.35);} .sidebar-foot{ padding:.85rem 1.1rem 1.1rem; border-top:1px solid rgba(255,255,255,.08); font-size:.72rem; color:#7691b6;} .app-main{ flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; transition:margin-left .2s ease;} body.sidebar-collapsed .app-main{ margin-left:var(--sidebar-w-collapsed); } body.sidebar-collapsed .app-sidebar{ width:var(--sidebar-w-collapsed); } body.sidebar-collapsed .sidebar-brand .brand-text, body.sidebar-collapsed .nav-heading, body.sidebar-collapsed .nav-label{ display:none; } .app-topbar{ height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:1rem; padding:0 1.25rem; position:sticky; top:0; z-index:1020; } .topbar-search{ position:relative; flex:1; max-width:480px;} .topbar-search input{ border-radius:12px; background:var(--surface-alt); border:1px solid var(--border-soft); padding:.55rem .9rem .55rem 2.4rem; font-size:.88rem; width:100%;} .topbar-search i{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--text-muted);} .topbar-icon-btn{ width:42px;height:42px;border-radius:12px;border:1px solid var(--border-soft); background:var(--surface); display:flex;align-items:center;justify-content:center; color:var(--text-body); position:relative; } .topbar-icon-btn:hover{ background:var(--surface-alt); } .topbar-icon-btn .dot{ position:absolute; top:7px; right:8px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--surface);} .user-chip{ display:flex; align-items:center; gap:.6rem; padding:.3rem .7rem .3rem .3rem; border-radius:30px; border:1px solid var(--border-soft); background:var(--surface);} .user-chip img,.user-chip .avatar-fallback{ width:34px;height:34px;border-radius:50%; object-fit:cover; background:var(--brand-100); color:var(--brand-600); display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.8rem;} .user-chip .u-name{ font-size:.82rem; font-weight:600; color:var(--text-strong); line-height:1.1;} .user-chip .u-role{ font-size:.7rem; color:var(--text-muted);} .app-content{ padding:1.5rem; flex:1; } .page-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.35rem; flex-wrap:wrap;} .page-header h1{ font-size:1.45rem; margin:0; } .page-header .subtitle{ color:var(--text-muted); font-size:.9rem; margin-top:.15rem;} .breadcrumb-mini{ font-size:.78rem; color:var(--text-muted); margin-bottom:.25rem;} .breadcrumb-mini a{ color:var(--text-muted); } .breadcrumb-mini .active{ color:var(--brand-600); font-weight:600;} /* =========================== CARDS =========================== */ .card{ border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-card);} .card-header{ background:transparent; border-bottom:1px solid var(--border-soft); font-family:var(--font-heading); font-weight:600; color:var(--text-strong); border-top-left-radius:var(--radius-lg) !important; border-top-right-radius:var(--radius-lg) !important;} .panel{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:1.25rem;} /* KPI cards */ .kpi-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:1.05rem 1.15rem; box-shadow:var(--shadow-card); display:flex; align-items:center; gap:.9rem; position:relative; overflow:hidden; height:100%; } .kpi-card > div:last-child{ min-width:0; } .kpi-card .kpi-label{ overflow-wrap:break-word; } .kpi-card .kpi-icon{ width:48px;height:48px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.25rem; flex-shrink:0;} .kpi-card .kpi-value{ font-family:var(--font-heading); font-size:1.55rem; font-weight:700; color:var(--text-strong); line-height:1;} .kpi-card .kpi-label{ font-size:.76rem; color:var(--text-muted); font-weight:600; margin-top:.3rem; text-transform:uppercase; letter-spacing:.04em;} .kpi-card .kpi-trend{ position:absolute; top:.8rem; right:1rem; font-size:.72rem; font-weight:700; } .kpi-icon.tone-brand{ background:var(--brand-100); color:var(--brand-600);} .kpi-icon.tone-success{ background:var(--success-bg); color:var(--success);} .kpi-icon.tone-warning{ background:var(--warning-bg); color:var(--warning);} .kpi-icon.tone-danger{ background:var(--danger-bg); color:var(--danger);} .kpi-icon.tone-info{ background:var(--info-bg); color:var(--info);} .kpi-icon.tone-secondary{ background:var(--secondary-bg); color:var(--secondary);} /* =========================== BADGES =========================== */ .badge-status{ font-weight:600; font-size:.72rem; padding:.4em .65em; border-radius:8px; display:inline-flex; align-items:center; gap:.35em;} .badge-status i{ font-size:.78em;} .badge-success{ background:var(--success-bg); color:var(--success);} .badge-warning{ background:var(--warning-bg); color:#9a6300;} .badge-danger{ background:var(--danger-bg); color:var(--danger);} .badge-info{ background:var(--info-bg); color:var(--info);} .badge-secondary{ background:var(--secondary-bg); color:var(--secondary);} /* =========================== TABLES =========================== */ .table-modern{ width:100%; border-collapse:separate; border-spacing:0; } .table-modern thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; border-bottom:1px solid var(--border-soft); padding:.75rem .9rem; white-space:nowrap; background:var(--surface-alt); } .table-modern thead th:first-child{ border-top-left-radius:12px;} .table-modern thead th:last-child{ border-top-right-radius:12px;} .table-modern tbody td{ padding:.72rem .9rem; border-bottom:1px solid var(--border-soft); font-size:.86rem; color:var(--text-body); vertical-align:middle;} .table-modern tbody tr:hover{ background:var(--surface-alt); } .table-modern tbody tr:last-child td{ border-bottom:none; } .table-density-compact tbody td, .table-density-compact thead th{ padding-top:.42rem; padding-bottom:.42rem;} .avatar-sm{ width:36px;height:36px;border-radius:50%; object-fit:cover; background:var(--brand-100);} .avatar-xs{ width:28px;height:28px;border-radius:50%; object-fit:cover; background:var(--brand-100);} /* =========================== BUTTONS =========================== */ .btn{ border-radius:10px; font-weight:600; font-size:.87rem; padding:.55rem 1.05rem; } .btn-lg{ padding:.85rem 1.4rem; font-size:1rem; border-radius:12px;} .btn-primary{ background:linear-gradient(135deg,var(--brand-600),var(--brand-500)); border:none; box-shadow:0 8px 20px -6px rgba(30,111,224,.55);} .btn-primary:hover,.btn-primary:focus{ background:linear-gradient(135deg,var(--brand-600),var(--brand-500)); filter:brightness(1.06);} .btn-outline-primary{ border-color:var(--brand-500); color:var(--brand-600);} .btn-success{ background:var(--success); border-color:var(--success);} .btn-danger{ background:var(--danger); border-color:var(--danger);} .btn-warning{ background:var(--warning); border-color:var(--warning); color:#402900;} .btn-soft{ background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand-100);} .btn-touch{ min-height:56px; font-size:1.02rem; border-radius:14px;} .btn-icon{ width:40px;height:40px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center; padding:0;} /* =========================== FORMS =========================== */ .form-label{ font-weight:600; font-size:.82rem; color:var(--text-strong);} .form-control,.form-select{ border-radius:10px; border:1px solid var(--border-soft); padding:.6rem .85rem; font-size:.88rem; background:var(--surface);} .form-control:focus,.form-select:focus{ border-color:var(--brand-400); box-shadow:0 0 0 .2rem var(--brand-100);} .input-icon{ position:relative;} .input-icon i{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--text-muted); z-index:5;} .input-icon .form-control,.input-icon .form-select{ padding-left:2.4rem;} .required-mark{ color:var(--danger); } /* =========================== LOGIN / VISITOR WIZARD SHELL =========================== */ .auth-shell{ min-height:100vh; display:flex; } .auth-visual{ flex:1; position:relative; background:linear-gradient(160deg, rgba(10,36,64,.88), rgba(15,55,95,.72)), url('../img/lobby.svg') center/cover; color:#fff; display:flex; flex-direction:column; justify-content:center; padding:4rem; min-width:0; } .auth-visual .tagline{ font-family:var(--font-script); font-size:2.4rem; color:#dcebff; margin-top:1.5rem;} .auth-form-wrap{ width:460px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--surface); padding:2.5rem;} .feature-row{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.1rem;} .feature-row .fi{ width:42px;height:42px;border-radius:12px; background:rgba(255,255,255,.12); display:flex;align-items:center;justify-content:center; flex-shrink:0;} .wizard-shell{ min-height:100vh; background:var(--bg-shell); } .wizard-header{ background:var(--surface); border-bottom:1px solid var(--border-soft); padding:.9rem 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem;} .wizard-body{ max-width:1400px; margin:1.5rem auto; padding:0 1.25rem; display:flex; gap:1.5rem; align-items:flex-start;} .wizard-steps{ width:280px; flex-shrink:0; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--shadow-card); position:sticky; top:1.5rem;} .wizard-step{ display:flex; gap:.8rem; padding-bottom:1.6rem; position:relative;} .wizard-step:last-child{ padding-bottom:0;} .wizard-step::before{ content:''; position:absolute; left:17px; top:36px; bottom:0; width:2px; background:var(--border-soft);} .wizard-step:last-child::before{ display:none;} .wizard-step .step-num{ width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-weight:700; flex-shrink:0; background:var(--secondary-bg); color:var(--text-muted); z-index:1;} .wizard-step.done .step-num{ background:var(--success); color:#fff;} .wizard-step.active .step-num{ background:var(--brand-500); color:#fff; box-shadow:0 0 0 5px var(--brand-100);} .wizard-step .step-title{ font-weight:700; color:var(--text-strong); font-size:.92rem;} .wizard-step .step-sub{ font-size:.76rem; color:var(--text-muted);} .wizard-step.active .step-title{ color:var(--brand-600);} .wizard-content{ flex:1; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-card); min-width:0;} /* Camera capture */ .camera-box{ position:relative; background:#0c1626; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;} .camera-box video, .camera-box img{ width:100%; height:100%; object-fit:cover;} .camera-frame-guide{ position:absolute; inset:8%; border:3px solid rgba(255,255,255,.85); border-radius:20px; pointer-events:none;} .camera-hint{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.55); color:#fff; padding:.35rem .9rem; border-radius:20px; font-size:.8rem;} /* =========================== MISC =========================== */ .divider-soft{ border-top:1px solid var(--border-soft); margin:1.25rem 0;} .chip{ display:inline-flex; align-items:center; gap:.3rem; background:var(--surface-alt); border:1px solid var(--border-soft); padding:.25rem .65rem; border-radius:20px; font-size:.75rem; font-weight:600; color:var(--text-body);} .empty-state{ text-align:center; padding:3rem 1rem; color:var(--text-muted);} .empty-state i{ font-size:2.6rem; color:var(--border-soft); } .skeleton{ background:linear-gradient(90deg, var(--surface-alt) 25%, var(--border-soft) 37%, var(--surface-alt) 63%); background-size:400% 100%; animation:skel 1.4s ease infinite;} @keyframes skel{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} } .toast-stack{ position:fixed; top:1.25rem; right:1.25rem; z-index:2000; display:flex; flex-direction:column; gap:.6rem; width:340px;} .quick-actions-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.75rem;} .quick-action-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:1.1rem .6rem; border-radius:14px; background:var(--surface); border:1px solid var(--border-soft); box-shadow:var(--shadow-card); color:var(--text-strong); font-weight:600; font-size:.8rem; text-align:center;} .quick-action-btn i{ font-size:1.5rem; color:var(--brand-600);} .quick-action-btn:hover{ border-color:var(--brand-400); transform:translateY(-2px); transition:.15s;} .timeline{ position:relative; padding-left:1.6rem;} .timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--border-soft);} .timeline-item{ position:relative; padding-bottom:1.1rem;} .timeline-item::before{ content:''; position:absolute; left:-1.6rem; top:3px; width:12px;height:12px;border-radius:50%; background:var(--brand-500); border:2px solid var(--surface);} .print-only{ display:none; } @media print{ .app-sidebar,.app-topbar,.no-print{ display:none !important;} .app-main{ margin-left:0 !important;} .print-only{ display:block; } body{ background:#fff;} } @media (max-width: 991.98px){ .app-sidebar{ transform:translateX(-100%); box-shadow:0 0 0 100vmax rgba(0,0,0,0);} .app-sidebar.mobile-open{ transform:translateX(0); box-shadow:0 20px 60px rgba(0,0,0,.35);} .app-main{ margin-left:0 !important;} .auth-visual{ display:none;} .auth-form-wrap{ width:100%;} .wizard-body{ flex-direction:column;} .wizard-steps{ width:100%; position:static; display:flex; overflow-x:auto; gap:1.25rem;} .wizard-step{ padding-bottom:0; flex-shrink:0;} .wizard-step::before{ display:none;} }