/* Dhakhtar Admin - shared design system. Single stylesheet for every authenticated page + the login page. */ :root { --green: #0F6E56; --green-dark: #0B5744; --green-tint: #E4F3EE; --bg: #F1EFE8; --surface: #FFFFFF; --ink: #2C2C2A; --muted: #7A7870; --border: #E5E3DA; --danger: #A12A2A; --danger-tint: #FBEAEA; --warning: #A15E1A; --warning-tint: #FBEFE0; --blue: #2C5F8A; --blue-tint: #E1EBF5; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(44, 44, 42, 0.06); --shadow-md: 0 4px 16px rgba(44, 44, 42, 0.08); --shadow-lg: 0 12px 32px rgba(44, 44, 42, 0.14); --sidebar-width: 248px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 700; } p { margin: 0; } a { color: var(--green); } :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* ---------- Logo ---------- */ .logo { display: flex; align-items: center; gap: 10px; min-width: 0; } .logo-mark { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-sm); display: block; } .logo-word { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- App shell: sidebar + content ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--green); display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 70; } .sidebar-logo { padding: 0 8px; margin-bottom: 28px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; } .sidebar-link svg { flex-shrink: 0; opacity: 0.85; } .sidebar-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .sidebar-link.active { background: rgba(255, 255, 255, 0.16); color: #fff; } .sidebar-link.active svg { opacity: 1; } .sidebar-link:focus-visible { outline-color: #fff; } /* Off-canvas drawer below 1024px - toggled by .hamburger via app.js, which also injects a single .sidebar-backdrop element into . */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(20, 20, 18, 0.45); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .sidebar-backdrop.show { opacity: 1; pointer-events: auto; } .content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 18px 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 30; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .topbar-title { min-width: 0; } .topbar-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-title .subtitle { margin-top: 2px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-title a.back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; } .topbar-title a.back:hover { color: var(--green); } .topbar-actions { display: flex; align-items: center; gap: 10px; } /* Hamburger: hidden on desktop, shown once the sidebar goes off-canvas */ .hamburger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; flex-shrink: 0; padding: 0; } .hamburger:hover { background: var(--bg); } /* ---------- Topbar user menu ---------- */ .topbar-user { position: relative; } .topbar-user-trigger { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 10px 5px 5px; cursor: pointer; font-family: inherit; color: inherit; } .topbar-user-trigger:hover { background: var(--bg); border-color: var(--border); } .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .topbar-user-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; } .topbar-user-info .name { font-size: 13px; font-weight: 700; color: var(--ink); } .topbar-user-info .role { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .topbar-user-trigger .chevron { color: var(--muted); transition: transform 0.15s ease; flex-shrink: 0; } .topbar-user.open .topbar-user-trigger .chevron { transform: rotate(180deg); } .topbar-user-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 200px; padding: 8px; z-index: 80; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .topbar-user.open .topbar-user-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .topbar-user-menu-head { padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .topbar-user-menu-head .name { font-weight: 700; font-size: 13px; color: var(--ink); } .topbar-user-menu-head .role { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .topbar-user-signout { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; text-align: left; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--danger); cursor: pointer; font-family: inherit; } .topbar-user-signout:hover { background: var(--danger-tint); } .page { padding: 32px 36px; max-width: 1120px; width: 100%; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--green); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 16px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .btn:hover { background: var(--green-dark); } .btn:active { transform: translateY(1px); } .btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--border); } .btn-outline:hover { background: var(--bg); } .btn-danger-outline { background: #fff; color: var(--danger); border: 1px solid #E5C6C6; } .btn-danger-outline:hover { background: var(--danger-tint); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; margin-bottom: 22px; box-shadow: var(--shadow-sm); overflow-x: auto; } .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card-head h2 { font-size: 15.5px; } .card-hint { color: var(--muted); font-size: 12.5px; margin: -8px 0 16px; } /* ---------- Dashboard stat cards ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; } a.stat-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease; } a.stat-card:hover { box-shadow: var(--shadow-md); border-color: var(--green); } a.stat-card:active { transform: translateY(1px); } .stat-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 10px; } .stat-label svg { color: var(--green); flex-shrink: 0; } .stat-value { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; } .stat-hint { margin-top: 6px; font-size: 12px; color: var(--muted); } @media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; } } /* ---------- Advanced filter bar ---------- */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .filter-bar label { min-width: 160px; } .filter-bar-eyebrow { flex-basis: 100%; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .filter-bar-hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; } tr.totals-row td { font-weight: 700; border-top: 2px solid var(--border); } /* ---------- Row identity: small avatar + label ---------- */ .row-identity { display: flex; align-items: center; gap: 10px; } .avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint); color: var(--green-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; object-fit: cover; } /* ---------- Pagination ---------- */ .pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .pagination-summary { color: var(--muted); font-size: 12.5px; } .pagination { display: flex; align-items: center; gap: 6px; } .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; text-decoration: none; font-family: inherit; cursor: pointer; } .page-btn:hover { background: var(--bg); } .page-btn.active { background: var(--green); border-color: var(--green); color: #fff; } .page-btn[disabled], .page-btn.disabled { opacity: 0.4; pointer-events: none; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; margin-bottom: 18px; } .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); } input[type=text], input[type=email], input[type=password], input[type=date], select { padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; color: var(--ink); background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); } /* ---------- Tables ---------- */ table { width: 100%; min-width: 460px; border-collapse: collapse; } th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; } th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; } tr:last-child td { border-bottom: none; } tbody tr:hover { background: #FAF9F5; } .empty { color: var(--muted); font-size: 13.5px; padding: 6px 0; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .badge.approved { background: var(--green-tint); color: var(--green-dark); } .badge.pending { background: var(--warning-tint); color: var(--warning); } .badge.neutral { background: #EFEEE8; color: var(--ink); } .badge.danger { background: var(--danger-tint); color: var(--danger); } .badge.info { background: var(--blue-tint); color: var(--blue); } .badge.type-hospital { background: var(--green-tint); color: var(--green-dark); } .badge.type-clinic { background: var(--blue-tint); color: var(--blue); } .badge.type-dental { background: var(--warning-tint); color: var(--warning); } button.badge { border: none; cursor: pointer; font-family: inherit; transition: opacity 0.15s ease; } button.badge:hover { opacity: 0.75; } /* ---------- Roles & permissions matrix ---------- */ table.perm-matrix th, table.perm-matrix td { white-space: nowrap; text-align: center; } table.perm-matrix th:first-child, table.perm-matrix td:first-child { text-align: left; } .perm-group-head { background: var(--green-tint); color: var(--green-dark); text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .perm-toggle { width: 34px; height: 18px; border-radius: 999px; border: 1px solid var(--border); position: relative; cursor: pointer; padding: 0; transition: background .15s; } .perm-toggle::after { content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; } .perm-toggle.on { background: var(--green); border-color: var(--green); } .perm-toggle.on::after { transform: translateX(16px); } .perm-toggle.off { background: #EFEEE8; } .carrier-avatar { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--green-tint); color: var(--green-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; } .notif-warning { background: var(--warning-tint); color: var(--warning); border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px; } /* ---------- Dialog / modal ---------- */ dialog.modal { border: none; border-radius: var(--radius-md); padding: 0; width: calc(100% - 32px); max-width: 520px; max-height: calc(100vh - 48px); overflow-y: auto; box-shadow: var(--shadow-lg); margin: auto; } dialog.modal::backdrop { background: rgba(44, 44, 42, 0.45); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); } .modal-head h2 { font-size: 15.5px; } .modal-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 6px; line-height: 0; } .modal-close:hover { background: var(--bg); color: var(--ink); } .modal-body { padding: 22px 24px 24px; } /* ---------- Toasts ---------- */ .toast-stack { position: fixed; top: 88px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; } .toast { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 13px 14px; min-width: 280px; max-width: 360px; opacity: 0; transform: translateX(12px); transition: opacity 0.2s ease, transform 0.2s ease; } .toast.show { opacity: 1; transform: translateX(0); } .toast-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .toast.success .toast-icon { background: var(--green-tint); color: var(--green-dark); } .toast.error .toast-icon { background: var(--danger-tint); color: var(--danger); } .toast-message { flex: 1; font-size: 13px; padding-top: 1px; } .toast-dismiss { background: none; border: none; cursor: pointer; color: var(--muted); line-height: 0; padding: 2px; } /* ---------- Login page ---------- */ .login-page { background: var(--bg); } .login-shell { min-height: 100vh; display: flex; } /* -- Left: brand panel -- */ .login-aside { position: relative; overflow: hidden; flex: 1 1 46%; max-width: 620px; background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; padding: 44px 48px; display: flex; flex-direction: column; } .login-aside-glow { position: absolute; inset: 0; background: radial-gradient(circle at 85% 8%, rgba(255,255,255,0.10), transparent 40%), radial-gradient(circle at 10% 90%, rgba(255,255,255,0.08), transparent 45%); pointer-events: none; } .login-aside-word { position: relative; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; } .login-aside-hero { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 24px 0; } .login-aside-hero img { width: 100%; max-width: 230px; height: auto; filter: drop-shadow(0 16px 28px rgba(0,0,0,0.22)); } .login-aside-copy { position: relative; margin-bottom: 26px; } .login-aside-copy h2 { font-size: 32px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; } .login-aside-copy p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 440px; } .login-features { position: relative; list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 16px; } .login-features li { display: flex; align-items: flex-start; gap: 12px; } .login-feature-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; } .login-features li > span:last-child { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; } .login-features strong { font-size: 13.5px; font-weight: 700; } .login-features li span:last-child { font-size: 12.5px; color: rgba(255,255,255,0.75); } .login-aside-footer { position: relative; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.18); } .login-aside-footer .tagline { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 8px; } .login-aside-footer .contact-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: rgba(255,255,255,0.85); font-weight: 600; } /* -- Right: form panel -- */ .login-main { flex: 1 1 54%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; } .login-card { width: 100%; max-width: 380px; } .login-card h1 { font-size: 26px; margin-bottom: 8px; } .login-card p.sub { color: var(--muted); margin: 0 0 26px; font-size: 13.5px; line-height: 1.55; } .login-card form label { margin-bottom: 16px; } .password-field { position: relative; display: block; } .password-field input { width: 100%; padding-right: 38px; } .password-toggle { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); background: none; border: none; padding: 4px; line-height: 0; color: var(--muted); cursor: pointer; } .password-toggle:hover { color: var(--ink); } .password-toggle.is-visible { color: var(--green); } .login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 22px; } .remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); } .remember input { margin: 0; accent-color: var(--green); } .forgot-link { font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } .forgot-link:hover { text-decoration: underline; } .support-line { text-align: center; margin-top: 20px; font-size: 12.5px; color: var(--muted); } .support-line a { font-weight: 700; text-decoration: none; } .support-line a:hover { text-decoration: underline; } .login-footnote { margin-top: 28px; font-size: 11.5px; color: var(--muted); text-align: center; } .login-card .error { background: var(--danger-tint); color: var(--danger); border: 1px solid #E5C6C6; border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 18px; } /* -- Responsive -- */ @media (max-width: 980px) { .login-shell { flex-direction: column; } .login-aside { max-width: none; padding: 32px 28px; } .login-aside-hero { min-height: 0; padding: 16px 0; } .login-aside-hero img { max-width: 130px; } .login-aside-copy h2 { font-size: 24px; } .login-features { display: none; } .login-main { padding: 36px 24px; } } @media (max-width: 420px) { .login-aside { padding: 26px 20px; } .login-card h1 { font-size: 22px; } } /* ---------- Responsive ---------- */ /* Tablet and below: sidebar becomes an off-canvas drawer, hamburger appears */ @media (max-width: 1023px) { .sidebar { position: fixed; top: 0; left: 0; transform: translateX(-100%); box-shadow: var(--shadow-lg); transition: transform 0.25s ease; } .sidebar.open { transform: translateX(0); } .hamburger { display: inline-flex; } .page { max-width: 100%; } } /* Tablet: tighten spacing, drop to 2-column forms */ @media (max-width: 900px) { .topbar { padding: 16px 24px; } .page { padding: 24px; } .form-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } /* Mobile: single-column forms, condensed topbar/user menu, tighter cards */ @media (max-width: 640px) { .topbar { padding: 14px 16px; gap: 10px; } .page { padding: 16px; } .card { padding: 16px; } .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; } .topbar-user-info { display: none; } .topbar-user-trigger { padding: 4px; gap: 0; } .topbar-user-trigger .chevron { display: none; } .card-head { flex-wrap: wrap; gap: 10px; } .card-head .btn { width: 100%; } .toast-stack { left: 12px; right: 12px; top: 78px; } .toast { min-width: 0; max-width: none; width: 100%; } } @media (max-width: 420px) { .login-card { padding: 24px; } } /* ---------- Region bookings bar chart (single-series, sequential green) ---------- */ .region-chart { display: flex; flex-direction: column; gap: 10px; } .region-chart-row { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 12px; } .region-chart-label { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .region-chart-track { position: relative; height: 20px; background: var(--green-tint); } .region-chart-fill { position: absolute; top: 0; left: 0; height: 100%; min-width: 3px; background: var(--green); border-radius: 0 4px 4px 0; } .region-chart-value { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Friendly error page ---------- */ .error-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .error-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 36px 32px; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); } .error-icon { width: 52px; height: 52px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--danger-tint); color: var(--danger); } .error-card h1 { font-size: 20px; margin-bottom: 8px; } .error-card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 24px; } .error-actions { display: flex; gap: 10px; justify-content: center; }