/* ============================================================ ZMILE DMS v2 — DESIGN SYSTEM 5 Themes · Plus Jakarta Sans · Minimalist ============================================================ */ /* ── GOOGLE FONTS ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); /* ══════════════════════════════════════════════════════════ THEME TOKENS — applied to :root via JS class on ══════════════════════════════════════════════════════════ */ /* DEFAULT: Slate — dark charcoal + white, ultra minimal */ :root, html[data-theme="slate"] { --primary: #2D2D2D; --primary2: #3D3D3D; --primary3: #525252; --accent: #E0E0E0; --accent2: #F5F5F5; --accent-pale: #FAFAFA; --sidebar-bg: #1A1A1A; --sidebar-text: rgba(255,255,255,.75); --sidebar-muted:rgba(255,255,255,.35); --sidebar-active:#2D2D2D; --topbar-bg: #FFFFFF; --page-bg: #F4F4F4; --card-bg: #FFFFFF; --text: #1A1A1A; --text-muted: #737373; --border: #E5E5E5; --input-bg: #F9F9F9; --shadow: 0 1px 8px rgba(0,0,0,.06); --shadow-lg: 0 4px 24px rgba(0,0,0,.10); --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB; --badge-active: #1A1A1A; --btn-primary-bg: #1A1A1A; --btn-primary-text: #FFFFFF; --btn-accent-bg: #E0E0E0; --btn-accent-text: #1A1A1A; } /* THEME 1: Ocean Blue */ html[data-theme="ocean"] { --primary: #0C4A6E; --primary2: #075985; --primary3: #0369A1; --accent: #38BDF8; --accent2: #BAE6FD; --accent-pale: #F0F9FF; --sidebar-bg: #082F49; --sidebar-text: rgba(255,255,255,.8); --sidebar-muted:rgba(255,255,255,.35); --sidebar-active:#0C4A6E; --topbar-bg: #FFFFFF; --page-bg: #F0F9FF; --card-bg: #FFFFFF; --text: #0C1A2E; --text-muted: #64748B; --border: #CBD5E1; --input-bg: #F8FAFC; --shadow: 0 1px 8px rgba(12,74,110,.08); --shadow-lg: 0 4px 24px rgba(12,74,110,.14); --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #0369A1; --badge-active: #0C4A6E; --btn-primary-bg: #0C4A6E; --btn-primary-text: #FFFFFF; --btn-accent-bg: #38BDF8; --btn-accent-text: #082F49; } /* THEME 2: Sage Green */ html[data-theme="sage"] { --primary: #2D6A4F; --primary2: #388E6A; --primary3: #40B585; --accent: #74C69D; --accent2: #B7E4C7; --accent-pale: #F0FFF4; --sidebar-bg: #1B4332; --sidebar-text: rgba(255,255,255,.8); --sidebar-muted:rgba(255,255,255,.35); --sidebar-active:#2D6A4F; --topbar-bg: #FFFFFF; --page-bg: #F0FFF4; --card-bg: #FFFFFF; --text: #1A2E25; --text-muted: #6B7280; --border: #D1FAE5; --input-bg: #F9FEFB; --shadow: 0 1px 8px rgba(45,106,79,.08); --shadow-lg: 0 4px 24px rgba(45,106,79,.14); --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB; --badge-active: #2D6A4F; --btn-primary-bg: #2D6A4F; --btn-primary-text: #FFFFFF; --btn-accent-bg: #74C69D; --btn-accent-text: #1B4332; } /* THEME 3: Warm Sand */ html[data-theme="sand"] { --primary: #92400E; --primary2: #B45309; --primary3: #D97706; --accent: #F59E0B; --accent2: #FDE68A; --accent-pale: #FFFBEB; --sidebar-bg: #451A03; --sidebar-text: rgba(255,255,255,.8); --sidebar-muted:rgba(255,255,255,.35); --sidebar-active:#92400E; --topbar-bg: #FFFFFF; --page-bg: #FFFBEB; --card-bg: #FFFFFF; --text: #292524; --text-muted: #78716C; --border: #E7E5E4; --input-bg: #FAFAF9; --shadow: 0 1px 8px rgba(146,64,14,.08); --shadow-lg: 0 4px 24px rgba(146,64,14,.14); --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB; --badge-active: #92400E; --btn-primary-bg: #92400E; --btn-primary-text: #FFFFFF; --btn-accent-bg: #F59E0B; --btn-accent-text: #451A03; } /* THEME 4: Purple Haze */ html[data-theme="purple"] { --primary: #5B21B6; --primary2: #6D28D9; --primary3: #7C3AED; --accent: #A78BFA; --accent2: #DDD6FE; --accent-pale: #F5F3FF; --sidebar-bg: #2E1065; --sidebar-text: rgba(255,255,255,.8); --sidebar-muted:rgba(255,255,255,.35); --sidebar-active:#5B21B6; --topbar-bg: #FFFFFF; --page-bg: #F5F3FF; --card-bg: #FFFFFF; --text: #1E1B4B; --text-muted: #6B7280; --border: #E5E7EB; --input-bg: #FAFAFA; --shadow: 0 1px 8px rgba(91,33,182,.08); --shadow-lg: 0 4px 24px rgba(91,33,182,.14); --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB; --badge-active: #5B21B6; --btn-primary-bg: #5B21B6; --btn-primary-text: #FFFFFF; --btn-accent-bg: #A78BFA; --btn-accent-text: #2E1065; } /* ══════════════════════════════════════════════════════════ BASE RESET & TYPOGRAPHY ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--page-bg); color: var(--text); line-height: 1.6; overflow-x: hidden; font-size: 14px; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } h1,h2,h3,h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; line-height: 1.25; } input,select,textarea,button { font-family: 'Plus Jakarta Sans', sans-serif; } /* Scrollbar */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ══════════════════════════════════════════════════════════ BUTTONS — minimal ══════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.82rem; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; transition: all .18s; letter-spacing: .01em; white-space: nowrap; } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: 0 1px 4px rgba(0,0,0,.12); } .btn-primary:hover { opacity: .88; transform: translateY(-1px); } .btn-gold { background: var(--btn-accent-bg); color: var(--btn-accent-text); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .btn-gold:hover { opacity: .9; transform: translateY(-1px); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { opacity: .88; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { opacity: .88; } .btn-warning { background: var(--warning); color: #fff; } .btn-warning:hover { opacity: .88; } .btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--accent-pale); } .btn-outline-white { background: transparent; color: var(--sidebar-text); border: 1.5px solid rgba(255,255,255,.2); } .btn-outline-white:hover { background: rgba(255,255,255,.08); } .btn-sm { padding: 5px 12px; font-size: 0.76rem; } .btn-xs { padding: 3px 8px; font-size: 0.72rem; border-radius: 6px; } .btn-full { width: 100%; justify-content: center; } .btn-icon { padding: 7px; border-radius: 7px; } .btn:active { transform: translateY(1px) !important; opacity: .85; } /* ══════════════════════════════════════════════════════════ FORMS — clean ══════════════════════════════════════════════════════════ */ .form-group { margin-bottom: 13px; } .form-group label { display: block; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.86rem; color: var(--text); background: var(--input-bg); outline: none; transition: border-color .15s, box-shadow .15s; } /* Checkboxes and radio buttons must keep their natural control size. The generic text-input rule above otherwise stretches them across the full form column and pushes their labels far away. */ .form-group input[type="checkbox"], .form-group input[type="radio"] { width: auto; min-width: 16px; height: 16px; padding: 0; margin: 0; border-radius: 3px; box-shadow: none; flex: 0 0 auto; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); background: var(--card-bg); box-shadow: 0 0 0 3px rgba(0,0,0,.06); } .form-group textarea { resize: vertical; min-height: 70px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; } /* ══════════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════════ */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); } .card-sm { padding: 14px; } .card-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mt-16 { margin-top: 16px; } /* ══════════════════════════════════════════════════════════ BADGES — minimal ══════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; letter-spacing: .04em; } .badge-success { background: #DCFCE7; color: #15803D; } .badge-warning { background: #FEF9C3; color: #A16207; } .badge-danger { background: #FEE2E2; color: #B91C1C; } .badge-info { background: #DBEAFE; color: #1D4ED8; } .badge-navy { background: var(--accent2); color: var(--primary); } .badge-gold { background: var(--accent-pale); color: var(--primary2); } .badge-purple { background: #EDE9FE; color: #6D28D9; } .badge-muted { background: var(--border); color: var(--text-muted); } /* ══════════════════════════════════════════════════════════ TABLES ══════════════════════════════════════════════════════════ */ .table-wrap { overflow-x: auto; border-radius: 8px; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-gutter: stable; touch-action: pan-x pan-y; } .table-wrap::-webkit-scrollbar { height: 9px; } .table-wrap::-webkit-scrollbar-track { background: var(--input-bg); border-radius: 999px; } .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid var(--input-bg); } .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } thead tr { background: var(--accent2); } thead th { padding: 10px 13px; color: var(--primary); font-weight: 700; text-align: left; font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid var(--border); } tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; } tbody tr:hover { background: var(--accent-pale); } tbody tr:last-child { border-bottom: none; } tbody td { padding: 10px 13px; color: var(--text); vertical-align: middle; } tbody tr:nth-child(even) { background: var(--input-bg); } tbody tr:nth-child(even):hover { background: var(--accent-pale); } /* ══════════════════════════════════════════════════════════ MODALS ══════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--card-bg); border-radius: 12px; width: 100%; max-width: 580px; max-height: 92vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.18); transform: translateY(16px) scale(.98); transition: transform .2s; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .modal-overlay.open .modal { transform: none; } .modal-xl { max-width: 880px; } .modal-lg { max-width: 700px; } .modal-sm { max-width: 400px; } .modal-header { background: var(--primary); padding: 16px 20px; border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; } .modal-header h3 { color: #fff; font-size: 1rem; font-weight: 700; } .modal-close { background: rgba(255,255,255,.12); border: none; color: #fff; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: .88rem; display: flex; align-items: center; justify-content: center; transition: background .15s; } .modal-close:hover { background: rgba(255,255,255,.22); } .modal-body { padding: 20px; min-width: 0; } .modal-footer { padding: 13px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; background: var(--input-bg); border-radius: 0 0 12px 12px; } .modal-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .modal-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .modal-section-title { font-size: 0.7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 11px; } /* ══════════════════════════════════════════════════════════ ALERTS ══════════════════════════════════════════════════════════ */ .alert { padding: 10px 14px; border-radius: 8px; font-size: 0.84rem; margin-bottom: 13px; display: flex; align-items: flex-start; gap: 9px; } .alert-success { background: #DCFCE7; border: 1px solid #BBF7D0; color: #15803D; } .alert-danger { background: #FEE2E2; border: 1px solid #FECACA; color: #B91C1C; } .alert-warning { background: #FEF9C3; border: 1px solid #FEF08A; color: #A16207; } .alert-info { background: #DBEAFE; border: 1px solid #BFDBFE; color: #1D4ED8; } .hidden { display: none !important; } /* ══════════════════════════════════════════════════════════ STAT CARDS — minimal ══════════════════════════════════════════════════════════ */ .stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; } .stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; transition: box-shadow .2s; } .stat-card:hover { box-shadow: var(--shadow-lg); } .stat-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 10px; background: var(--accent2); } .stat-num { font-size: 1.65rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 3px; } .stat-label { font-size: 0.74rem; color: var(--text-muted); font-weight: 500; } .stat-delta { font-size: 0.7rem; font-weight: 600; margin-top: 4px; } .stat-delta.up { color: var(--success); } .stat-delta.down { color: var(--danger); } /* ══════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════ */ .app-layout { display: flex; min-height: 100vh; } .sidebar { width: 230px; min-height: 100vh; background: var(--sidebar-bg); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; transition: transform .3s; } .sidebar-brand { padding: 16px 16px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 9px; } .sidebar-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,.2); } .sidebar-name { font-size: 0.88rem; color: #fff; font-weight: 700; line-height: 1.3; } .sidebar-name small { display: block; font-size: 0.64rem; color: var(--sidebar-muted); font-weight: 400; margin-top: 1px; } .sidebar-nav { flex: 1; padding: 10px 8px; overflow-y: auto; } .nav-section { margin-bottom: 4px; } .nav-section-label { font-size: 0.6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sidebar-muted); padding: 6px 10px 3px; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--sidebar-text); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all .15s; margin-bottom: 1px; border: none; background: none; width: 100%; text-align: left; } .nav-item:hover { background: rgba(255,255,255,.07); color: #fff; } .nav-item.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; } .nav-icon { font-size: 0.9rem; width: 17px; text-align: center; flex-shrink: 0; } .nav-badge { margin-left: auto; background: var(--accent); color: var(--sidebar-bg); font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 100px; } .sidebar-footer { padding: 10px 8px; border-top: 1px solid rgba(255,255,255,.06); } .user-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary2); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.74rem; flex-shrink: 0; } .user-info { flex: 1; min-width: 0; } .user-name { font-size: 0.8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 0.66rem; color: var(--sidebar-muted); } .role-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 100px; font-size: 0.6rem; font-weight: 700; letter-spacing: .05em; margin-top: 1px; } .role-staff { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); } .role-dentist { background: rgba(34,197,94,.18); color: #4ADE80; } .role-owner { background: rgba(245,158,11,.18); color: #FCD34D; } /* ══════════════════════════════════════════════════════════ TOPBAR + MAIN ══════════════════════════════════════════════════════════ */ .main-content { margin-left: 230px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; background: var(--page-bg); } .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); padding: 11px 22px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .topbar-left { display: flex; align-items: center; gap: 12px; } .topbar-title { font-size: 1rem; font-weight: 700; color: var(--text); } .topbar-right { display: flex; align-items: center; gap: 8px; } .page-content { padding: 20px; flex: 1; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; } .page-header h1 { font-size: 1.35rem; color: var(--text); } .page-header p { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; } /* ══════════════════════════════════════════════════════════ QUEUE ══════════════════════════════════════════════════════════ */ .queue-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); border-radius: 8px; margin-bottom: 4px; background: var(--card-bg); border: 1px solid var(--border); transition: all .15s; } .queue-row:hover { box-shadow: var(--shadow); } .queue-num { width: 28px; height: 28px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.76rem; flex-shrink: 0; } .queue-info { flex: 1; min-width: 0; } .queue-name { font-weight: 600; font-size: 0.88rem; color: var(--text); } .queue-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; } .queue-actions { display: flex; gap: 5px; flex-shrink: 0; } .queue-empty { text-align: center; padding: 20px 0; color: var(--text-muted); font-size: 0.84rem; } .ongoing-card { background: var(--primary); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; } .ongoing-name { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 3px; } .ongoing-meta { font-size: 0.76rem; color: rgba(255,255,255,.65); } .ongoing-time { font-size: 0.72rem; color: var(--accent); margin-top: 5px; } .ongoing-empty { text-align: center; padding: 14px; color: var(--text-muted); font-size: 0.82rem; font-style: italic; } /* ══════════════════════════════════════════════════════════ MISC UTILITIES ══════════════════════════════════════════════════════════ */ .search-bar { display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 12px; flex: 1; max-width: 300px; } .search-bar input { border: none; background: none; outline: none; font-size: 0.84rem; color: var(--text); width: 100%; } .filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .filter-select { padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.8rem; background: var(--card-bg); color: var(--text); outline: none; cursor: pointer; } .filter-select:focus { border-color: var(--primary); } .divider { height: 1px; background: var(--border); margin: 13px 0; } .text-muted { color: var(--text-muted); font-size: 0.82rem; } .text-center { text-align: center; } .text-right { text-align: right; } .fw-600 { font-weight: 600; } .flex { display: flex; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-center { display: flex; align-items: center; justify-content: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .w-full { width: 100%; } .progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .progress-bar { height: 100%; border-radius: 3px; transition: width .4s; } .progress-bar.blue { background: var(--primary); } .progress-bar.green { background: var(--success); } .progress-bar.red { background: var(--danger); } .progress-bar.gold { background: var(--warning); } .tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 16px; overflow-x: auto; } .tab-btn { padding: 8px 14px; border: none; background: none; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; border-radius: 6px 6px 0 0; white-space: nowrap; } .tab-btn:hover { color: var(--text); background: var(--accent-pale); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .tab-pane { display: none; } .tab-pane.active { display: block; } .sidebar-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.1rem; cursor: pointer; padding: 4px; } #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 11px 15px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; min-width: 250px; max-width: 340px; animation: toast-in .25s ease; font-size: 0.84rem; } .toast.success { border-left: 3px solid var(--success); } .toast.error { border-left: 3px solid var(--danger); } .toast.info { border-left: 3px solid var(--info); } .toast.warning { border-left: 3px solid var(--warning); } @keyframes toast-in { from{transform:translateX(100%);opacity:0} to{transform:none;opacity:1} } /* ══════════════════════════════════════════════════════════ LOGIN PAGE ══════════════════════════════════════════════════════════ */ .login-page { min-height: 100vh; background: var(--sidebar-bg); display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; } .login-page::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } .login-card { background: var(--card-bg); border-radius: 14px; width: 100%; max-width: 400px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.3); position: relative; z-index: 1; animation: card-in .4s cubic-bezier(.23,1,.32,1); } @keyframes card-in { from{transform:translateY(20px) scale(.97);opacity:0} to{transform:none;opacity:1} } .login-header { background: var(--primary); padding: 28px 28px 20px; text-align: center; } .login-logo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.2); margin: 0 auto 11px; } .login-wordmark { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.01em; margin-bottom: 6px; } .login-wordmark span { font-weight: 500; opacity: .8; } .login-header h2 { font-size: .8rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 3px; font-weight: 700; } .login-header p { font-size: 0.78rem; color: rgba(255,255,255,.5); } .login-body { padding: 22px 28px 26px; } .role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 18px; } .role-btn { border: 1.5px solid var(--border); border-radius: 9px; padding: 11px 7px; text-align: center; cursor: pointer; transition: all .15s; background: var(--input-bg); } .role-btn:hover { border-color: var(--primary); background: var(--accent-pale); } .role-btn.selected { border-color: var(--primary); background: var(--accent-pale); } .role-btn .r-icon { font-size: 1.4rem; margin-bottom: 4px; } .role-btn .r-name { font-size: 0.74rem; font-weight: 700; color: var(--text); } .role-btn .r-desc { font-size: 0.64rem; color: var(--text-muted); margin-top: 1px; } .demo-box { background: var(--accent-pale); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 0.73rem; color: var(--text-muted); margin-top: 12px; } .demo-box code { background: var(--border); padding: 1px 5px; border-radius: 4px; font-family: monospace; } /* ══════════════════════════════════════════════════════════ THEME SWITCHER WIDGET ══════════════════════════════════════════════════════════ */ .theme-switcher { display: flex; align-items: center; gap: 6px; } .theme-dot { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all .15s; flex-shrink: 0; } .theme-dot:hover { transform: scale(1.2); } .theme-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--text); } .theme-dot[data-theme="slate"] { background: #2D2D2D; } .theme-dot[data-theme="ocean"] { background: #0C4A6E; } .theme-dot[data-theme="sage"] { background: #2D6A4F; } .theme-dot[data-theme="sand"] { background: #92400E; } .theme-dot[data-theme="purple"] { background: #5B21B6; } /* ══════════════════════════════════════════════════════════ DENTAL CHART — PDA FDI Standard ══════════════════════════════════════════════════════════ */ .dental-chart-wrap { background: var(--input-bg); border-radius: 10px; padding: 16px; } .dental-arch-label { text-align: center; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 6px; } .dental-row { display: flex; justify-content: center; gap: 3px; margin-bottom: 4px; } .dental-row.primary-row { gap: 3px; } .tooth-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 36px; cursor: pointer; border: none; background: none; padding: 2px; border-radius: 6px; transition: background .12s; } .tooth-btn:hover { background: var(--accent2); } .tooth-crown { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: var(--text-muted); background: var(--card-bg); transition: all .15s; } .tooth-num { font-size: 0.6rem; color: var(--text-muted); font-weight: 600; } /* Tooth states */ .tooth-btn[data-state="healthy"] .tooth-crown { background: #DCFCE7; border-color: #86EFAC; color: #15803D; } .tooth-btn[data-state="filled"] .tooth-crown { background: #FEF9C3; border-color: #FDE047; color: #A16207; } .tooth-btn[data-state="crown"] .tooth-crown { background: var(--accent2); border-color: var(--accent); color: var(--primary); } .tooth-btn[data-state="extracted"] .tooth-crown { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; text-decoration: line-through; } .tooth-btn[data-state="rct"] .tooth-crown { background: #EDE9FE; border-color: #C4B5FD; color: #5B21B6; } .tooth-btn[data-state="implant"] .tooth-crown { background: #DBEAFE; border-color: #93C5FD; color: #1D4ED8; } .tooth-btn[data-state="missing"] .tooth-crown { background: var(--border); border-color: var(--text-muted); color: var(--text-muted); opacity: .5; } .dental-divider { border: none; border-top: 1.5px dashed var(--border); margin: 8px 0; } .chart-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .chart-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-muted); } .chart-legend-dot { width: 10px; height: 10px; border-radius: 3px; } /* ══════════════════════════════════════════════════════════ WALLET / BALANCE TAB ══════════════════════════════════════════════════════════ */ .wallet-card { background: var(--primary); border-radius: 12px; padding: 18px 20px; color: #fff; position: relative; overflow: hidden; margin-bottom: 16px; } .wallet-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.06); } .wallet-balance { font-size: 2rem; font-weight: 700; line-height: 1; margin-bottom: 4px; } .wallet-label { font-size: 0.74rem; color: rgba(255,255,255,.6); } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media(max-width:900px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: none; } .main-content { margin-left: 0; } .sidebar-toggle { display: block; } .stat-cards { grid-template-columns: repeat(2,1fr); } .form-row,.form-row-3,.form-row-4 { grid-template-columns: 1fr; } } @media(max-width:560px) { .stat-cards { grid-template-columns: 1fr; } .page-content { padding: 12px; } } /* ══════════════════════════════════════════════════════════ COLLAPSIBLE SIDEBAR ══════════════════════════════════════════════════════════ */ .sidebar-peek { position:fixed; top:50%; left:0; z-index:101; transform:translateY(-50%); background:var(--primary); color:#fff; width:22px; height:60px; border-radius:0 8px 8px 0; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem; box-shadow:2px 0 8px rgba(0,0,0,.15); transition:opacity .2s; opacity:0; pointer-events:none; } body.sidebar-collapsed .sidebar-peek { opacity:1; pointer-events:all; } body.sidebar-collapsed .sidebar { transform:translateX(-100%); } body.sidebar-collapsed .main-content { margin-left:0; } .nav-label { transition:opacity .2s; } /* ══════════════════════════════════════════════════════════ PROGRESS BAR COLORS ══════════════════════════════════════════════════════════ */ .progress-bar.purple { background:var(--primary); } /* ══════════════════════════════════════════════════════════ MOBILE APP EXPERIENCE Shared across staff, dentist, and owner pages ══════════════════════════════════════════════════════════ */ @media(max-width:900px){ html,body{width:100%;max-width:100%;overflow-x:hidden} .app-layout,.main-content{width:100%;min-width:0} .sidebar{width:min(84vw,290px);box-shadow:18px 0 50px rgba(0,0,0,.3);z-index:500} .sidebar.open{transform:translateX(0)} .sidebar-brand{padding:15px 16px} .sidebar-nav{padding-bottom:24px} .nav-item{min-height:43px;padding:10px 12px;font-size:.86rem} .topbar{min-height:58px;padding:9px 13px;gap:8px;align-items:center} .topbar-left{gap:8px;min-width:0} .topbar-title{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-right{gap:6px;flex-wrap:wrap;justify-content:flex-end} .topbar-right .btn{padding:7px 9px;font-size:.7rem} .sidebar-toggle{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:8px;background:var(--input-bg);border:1px solid var(--border);flex-shrink:0} .page-content{width:100%;min-width:0;padding:15px} .page-header{align-items:stretch;margin-bottom:14px} .page-header>div,.page-header>.flex,.page-header>.topbar-right{min-width:0} .page-header h1{font-size:1.18rem} .card{padding:15px;min-width:0} .stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px} .stat-card{padding:14px;min-width:0} .stat-num{font-size:1.4rem;overflow-wrap:anywhere} .form-row,.form-row-3,.form-row-4{grid-template-columns:1fr!important} .filter-row{align-items:stretch;gap:7px} .filter-row>*{min-width:0} .search-bar{max-width:none;width:100%;flex-basis:100%} .filter-select,.filter-row select,.filter-row input[type=date],.filter-row input[type=month]{flex:1;min-width:125px} .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border)} .table-wrap table,table.responsive-table{min-width:720px} th,td{white-space:nowrap} .modal-overlay{padding:8px;align-items:flex-end} .modal{max-height:94dvh;border-radius:14px 14px 0 0} .modal-header{border-radius:14px 14px 0 0;padding:14px 16px} .modal-body{padding:16px} .modal-footer{padding:12px 16px;flex-wrap:wrap} .modal-footer .btn{flex:1;justify-content:center;min-width:110px} .queue-row{align-items:flex-start;flex-wrap:wrap} .queue-actions{width:100%;padding-left:38px;flex-wrap:wrap} .cal-wrap{grid-template-columns:1fr!important} .cal-main,.cal-side{min-width:0} .cal-main{overflow-x:auto;-webkit-overflow-scrolling:touch} .cal-day-headers,.cal-grid-month,.cal-grid-week{min-width:680px} .owner-grid,.task-cols{grid-template-columns:1fr!important} .lab-status-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important} .page-content>div[style*="grid-template-columns"]{grid-template-columns:1fr!important} .modal [style*="grid-template-columns"]{grid-template-columns:1fr!important} .tabs{scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab-btn{min-height:42px} .flex-between{gap:10px;flex-wrap:wrap} canvas{max-width:100%!important} #toast-container{left:12px;right:12px;bottom:12px} .toast{width:100%;min-width:0;max-width:none} } @media(max-width:560px){ .page-content{padding:11px} .topbar{padding:8px 10px} .topbar-right .btn:not(.mobile-essential){max-width:150px} .stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px} .stat-card{padding:12px} .stat-icon{width:32px;height:32px;margin-bottom:8px} .stat-num{font-size:1.24rem} .stat-label{font-size:.67rem} .card-title{font-size:.86rem} .btn{min-height:38px} .field-row{grid-template-columns:1fr!important} } @media(max-width:380px){ .stat-cards{grid-template-columns:1fr!important} .topbar-right{display:none} } /* Responsive hardening: screen-only so printable clinical documents are unchanged. */ @media screen and (max-width:1180px){ .page-content{min-width:0} .page-header,.topbar{min-width:0} .page-header .flex,.page-header .flex-between{flex-wrap:wrap} .table-wrap{border:1px solid var(--border)} .table-wrap table{min-width:max(680px,100%)} } @media screen and (max-width:760px){ .table-wrap{background:linear-gradient(to right,var(--card-bg) 30%,rgba(255,255,255,0)) left center/28px 100% no-repeat,linear-gradient(to left,var(--card-bg) 30%,rgba(255,255,255,0)) right center/28px 100% no-repeat} .table-wrap table{min-width:680px} .modal-overlay{padding:0;align-items:flex-end} .modal{width:100%;max-width:none;max-height:96dvh;border-radius:16px 16px 0 0} .modal-body{overflow-y:auto;overflow-x:hidden} .modal-footer{position:sticky;bottom:0;z-index:2} .action-buttons,.card-actions,.queue-actions,.topbar-actions{flex-wrap:wrap} .action-buttons .btn,.card-actions .btn{flex:1 1 auto} } @media screen and (max-width:480px){ .table-wrap table{min-width:640px} .modal-body{padding:14px} .modal-footer{padding:10px 14px} .modal-footer .btn{flex:1 1 100%} } @media screen and (pointer:coarse){ .btn,.nav-item,.tab-btn,.settings-nav-item,.modal-close,.sidebar-toggle{min-height:44px} button,[role="button"],a.nav-item{touch-action:manipulation} input:not([type="checkbox"]):not([type="radio"]),select{min-height:44px} input[type="checkbox"],input[type="radio"]{width:20px;height:20px;min-width:20px} td .btn,.btn-xs{min-height:40px;min-width:40px} }