/* ========================================================================= Aarogya — app theme ========================================================================= */ :root { /* Brand (default = "blue") */ --a-primary: #2563eb; --a-primary-dark: #1d4ed8; --a-primary-soft: #dbeafe; --a-accent: #06b6d4; --a-success: #10b981; --a-warning: #f59e0b; --a-danger: #ef4444; --a-info: #6366f1; /* Neutrals (light mode) */ --a-bg: #f4f7fc; --a-card: #ffffff; --a-border: #e5e9f2; --a-muted: #6b7280; --a-text: #111827; --a-text-soft: #374151; --a-table-hover: #f8fafc; --a-input-bg: #ffffff; /* Effects */ --a-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06); --a-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04); --a-shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04); --a-radius-sm: .5rem; --a-radius: .75rem; --a-radius-lg: 1rem; --a-side-w: 240px; --a-bottom-nav-h: 60px; } /* Accent presets — switched via data-accent on */ [data-accent="blue"] { --a-primary:#2563eb; --a-primary-dark:#1d4ed8; --a-primary-soft:#dbeafe; --a-accent:#06b6d4; } [data-accent="teal"] { --a-primary:#0d9488; --a-primary-dark:#0f766e; --a-primary-soft:#ccfbf1; --a-accent:#06b6d4; } [data-accent="purple"] { --a-primary:#7c3aed; --a-primary-dark:#6d28d9; --a-primary-soft:#ede9fe; --a-accent:#ec4899; } [data-accent="rose"] { --a-primary:#e11d48; --a-primary-dark:#be123c; --a-primary-soft:#ffe4e6; --a-accent:#f59e0b; } [data-accent="orange"] { --a-primary:#ea580c; --a-primary-dark:#c2410c; --a-primary-soft:#ffedd5; --a-accent:#f59e0b; } [data-accent="green"] { --a-primary:#16a34a; --a-primary-dark:#15803d; --a-primary-soft:#dcfce7; --a-accent:#84cc16; } /* Dark mode */ [data-theme="dark"] { --a-bg: #0b1220; --a-card: #131c30; --a-border: #243049; --a-muted: #94a3b8; --a-text: #f1f5f9; --a-text-soft: #cbd5e1; --a-table-hover: #1a2540; --a-input-bg: #0f1828; --a-primary-soft: rgba(37, 99, 235, .15); /* Override Bootstrap 5.3 vars so cards/forms/tables/modals get our palette */ --bs-body-bg: var(--a-bg); --bs-body-color: var(--a-text); --bs-secondary-color: var(--a-muted); --bs-tertiary-bg: var(--a-input-bg); --bs-tertiary-color: var(--a-muted); --bs-emphasis-color: var(--a-text); --bs-border-color: var(--a-border); --bs-border-color-translucent: var(--a-border); --bs-heading-color: var(--a-text); --bs-link-color: var(--a-primary); --bs-link-hover-color: var(--a-primary-dark); } [data-theme="dark"][data-accent="teal"] { --a-primary-soft: rgba(13, 148, 136, .18); } [data-theme="dark"][data-accent="purple"] { --a-primary-soft: rgba(124, 58, 237, .18); } [data-theme="dark"][data-accent="rose"] { --a-primary-soft: rgba(225, 29, 72, .18); } [data-theme="dark"][data-accent="orange"] { --a-primary-soft: rgba(234, 88, 12, .18); } [data-theme="dark"][data-accent="green"] { --a-primary-soft: rgba(22, 163, 74, .18); } [data-theme="dark"] .app-top { background: rgba(19, 28, 48, .85); } [data-theme="dark"] .app-bottom-nav { background: rgba(19, 28, 48, .96); } [data-theme="dark"] .app-top-btn { color: var(--a-text); } [data-theme="dark"] .app-top-btn:hover { background: rgba(255, 255, 255, .06); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--a-input-bg); color: var(--a-text); } [data-theme="dark"] .form-control::placeholder { color: var(--a-muted); } [data-theme="dark"] .table { color: var(--a-text); --bs-table-bg: transparent; } [data-theme="dark"] .table thead.table-light { background: var(--a-input-bg); } [data-theme="dark"] .table tbody tr:hover { background: var(--a-table-hover); } [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu { background: var(--a-card); color: var(--a-text); border-color: var(--a-border); } [data-theme="dark"] .alert-info { background: rgba(99, 102, 241, .12); color: #c7d2fe; border-color: rgba(99, 102, 241, .3); } [data-theme="dark"] .alert-success { background: rgba(16, 185, 129, .12); color: #a7f3d0; border-color: rgba(16, 185, 129, .3); } [data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .12); color: #fde68a; border-color: rgba(245, 158, 11, .3); } [data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, .12); color: #fecaca; border-color: rgba(239, 68, 68, .3); } [data-theme="dark"] .bg-light { background: var(--a-input-bg) !important; color: var(--a-text); } [data-theme="dark"] .text-dark { color: var(--a-text) !important; } [data-theme="dark"] .btn-light { background: var(--a-input-bg); border-color: var(--a-border); color: var(--a-text); } [data-theme="dark"] .btn-outline-secondary { color: var(--a-text); border-color: var(--a-border); } [data-theme="dark"] hr { border-color: var(--a-border); } [data-theme="dark"] .softbg { background: var(--a-primary-soft); } [data-theme="dark"] .dashed { background: rgba(255, 255, 255, .02); } [data-theme="dark"] #installPrompt { background: var(--a-card); color: var(--a-text); } [data-theme="dark"] .auth-card { background: var(--a-card); border-color: var(--a-border); } [data-theme="dark"] body { color-scheme: dark; } /* Backwards-compat aliases (so old --kivi-* references still work) */ :root { --kivi-primary: var(--a-primary); --kivi-bg: var(--a-bg); --kivi-card: var(--a-card); --kivi-border: var(--a-border); } /* ========================================================================= Theme picker panel ========================================================================= */ .theme-panel { position: fixed; right: 1rem; bottom: calc(var(--a-bottom-nav-h) + 1rem + env(safe-area-inset-bottom)); background: var(--a-card); color: var(--a-text); border: 1px solid var(--a-border); border-radius: var(--a-radius); box-shadow: var(--a-shadow-lg); padding: 1rem; width: min(320px, calc(100vw - 2rem)); z-index: 1060; display: none; animation: pageIn .25s; } @media (min-width: 992px) { .theme-panel { bottom: 5rem; } } .theme-panel.show { display: block; } .theme-panel h6 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--a-muted); margin: 0 0 .5rem; font-weight: 700; } .theme-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; } .theme-modes .mode { border: 1.5px solid var(--a-border); border-radius: var(--a-radius-sm); padding: .65rem; cursor: pointer; text-align: center; font-size: .85rem; font-weight: 500; background: var(--a-bg); color: var(--a-text); transition: border-color .15s, transform .12s; } .theme-modes .mode:hover { border-color: var(--a-primary); } .theme-modes .mode:active { transform: scale(.97); } .theme-modes .mode.active { border-color: var(--a-primary); background: var(--a-primary-soft); color: var(--a-text); } .theme-modes .mode i { font-size: 1.2rem; display: block; margin-bottom: .15rem; } .theme-accents { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; } .theme-accents .swatch { aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform .15s, border-color .15s; position: relative; } .theme-accents .swatch:hover { transform: scale(1.1); } .theme-accents .swatch:active { transform: scale(.92); } .theme-accents .swatch.active { border-color: var(--a-text); } .theme-accents .swatch.active::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid #fff; } .theme-accents .blue { background: linear-gradient(135deg,#2563eb,#06b6d4); } .theme-accents .teal { background: linear-gradient(135deg,#0d9488,#06b6d4); } .theme-accents .purple { background: linear-gradient(135deg,#7c3aed,#ec4899); } .theme-accents .rose { background: linear-gradient(135deg,#e11d48,#f59e0b); } .theme-accents .orange { background: linear-gradient(135deg,#ea580c,#f59e0b); } .theme-accents .green { background: linear-gradient(135deg,#16a34a,#84cc16); } /* ========================================================================= Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { height: 100%; margin: 0; } body { background: var(--a-bg); color: var(--a-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; overscroll-behavior-y: contain; } a { color: var(--a-primary); text-decoration: none; transition: color .15s; } a:hover { color: var(--a-primary-dark); } h1, h2, h3, h4, h5 { color: var(--a-text); letter-spacing: -0.01em; } /* ========================================================================= Brand ========================================================================= */ .brand { font-weight: 700; color: var(--a-primary); } .brand-mark { display: inline-flex; align-items: center; gap: .5rem; } .brand-mark .dot { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--a-primary), var(--a-accent)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .9rem; box-shadow: 0 4px 12px rgba(37, 99, 235, .35); } .brand-mark .dot::after { content: 'A'; } /* ========================================================================= Layout ========================================================================= */ .app-shell { display: flex; min-height: 100vh; min-height: 100dvh; } .app-side { width: var(--a-side-w); background: linear-gradient(180deg, #0f172a, #1e293b); color: #cbd5e1; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; flex-shrink: 0; } .app-side::-webkit-scrollbar { width: 6px; } .app-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; } .app-side a { color: #cbd5e1; display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: var(--a-radius-sm); font-size: .92rem; font-weight: 500; margin-bottom: 2px; transition: all .18s; } .app-side a:hover { background: rgba(255, 255, 255, .06); color: #fff; transform: translateX(2px); } .app-side a.active { background: linear-gradient(135deg, rgba(37, 99, 235, .25), rgba(6, 182, 212, .15)); color: #fff; box-shadow: inset 3px 0 0 var(--a-primary); } .app-side a i { font-size: 1.05rem; opacity: .9; } .app-side .group-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #64748b; margin: 1.25rem .8rem .4rem; } .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .app-top { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--a-border); display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .5rem; padding: .5rem .75rem; position: sticky; top: 0; z-index: 100; min-height: 56px; } .app-top-btn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; color: var(--a-text); display: grid; place-items: center; font-size: 1.4rem; transition: background .15s, transform .12s; } .app-top-btn:hover { background: rgba(15,23,42,.06); } .app-top-btn:active { transform: scale(.93); } .app-top-title { min-width: 0; text-align: center; } .app-top-title .title-text { display: block; font-weight: 700; font-size: 1.05rem; color: var(--a-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-top-title .title-sub { display: block; font-size: .7rem; color: var(--a-muted); margin-top: -2px; } .app-top-right { display: flex; align-items: center; gap: .5rem; } .app-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--a-primary), var(--a-accent)); color: #fff; font-weight: 700; font-size: .82rem; display: grid; place-items: center; text-decoration: none; box-shadow: 0 2px 8px rgba(37,99,235,.3); transition: transform .12s; } .app-avatar:hover { color: #fff; transform: scale(1.05); } .app-avatar:active { transform: scale(.93); } @media (min-width: 992px) { .app-top { grid-template-columns: 1fr auto; padding: .65rem 1.25rem; } .app-top > .app-top-btn[data-toggle="sidebar"] { display: none; } /* hide hamburger only */ .app-top-title { text-align: left; } .app-top-title .title-text { font-size: 1.15rem; } } .app-content { padding: 1.25rem; flex: 1; animation: pageIn .35s cubic-bezier(.2, .8, .25, 1); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } @media (max-width: 575.98px) { .app-content { padding: .9rem; } } @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 991.98px) { .app-side { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .25s cubic-bezier(.2, .8, .25, 1); z-index: 1040; box-shadow: 8px 0 32px rgba(0, 0, 0, .25); } .app-side.open { transform: translateX(0); } .app-side-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1039; opacity: 0; pointer-events: none; transition: opacity .25s; } .app-side-backdrop.show { opacity: 1; pointer-events: auto; } .app-content { padding-bottom: calc(var(--a-bottom-nav-h) + 1rem + env(safe-area-inset-bottom)); } } /* ========================================================================= Bottom nav (mobile) ========================================================================= */ .app-bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 255, 255, .98); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--a-border); box-shadow: 0 -2px 16px rgba(15, 23, 42, .06); z-index: 1030; } .app-bottom-nav .nav-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--a-bottom-nav-h); } .app-bottom-nav a, .app-bottom-nav button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #64748b; font-size: .68rem; font-weight: 600; text-decoration: none; padding: .3rem .25rem; position: relative; transition: color .15s, transform .12s; min-height: 100%; } .app-bottom-nav a i, .app-bottom-nav button i { font-size: 1.4rem; line-height: 1; transition: transform .15s; } .app-bottom-nav a:active, .app-bottom-nav button:active { transform: scale(.92); } .app-bottom-nav a.active { color: var(--a-primary); } .app-bottom-nav a.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 3px; background: var(--a-primary); border-radius: 0 0 3px 3px; } .app-bottom-nav a.active i { transform: scale(1.1); } @media (max-width: 991.98px) { .app-bottom-nav { display: block; } } /* ========================================================================= Cards / KPIs ========================================================================= */ .card { border: 1px solid var(--a-border); border-radius: var(--a-radius); background: var(--a-card); box-shadow: var(--a-shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; } .card:hover { box-shadow: var(--a-shadow); } .kpi { background: var(--a-card); border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: 1rem 1.1rem; position: relative; overflow: hidden; box-shadow: var(--a-shadow-sm); transition: transform .25s, box-shadow .25s; } .kpi::before { content: ''; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--a-primary-soft), transparent); opacity: .55; } .kpi:hover { transform: translateY(-2px); box-shadow: var(--a-shadow); } .kpi .label { color: var(--a-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .kpi .value { font-size: 1.6rem; font-weight: 700; margin-top: .25rem; color: var(--a-text); } @media (max-width: 575.98px) { .kpi { padding: .75rem .85rem; } .kpi .label { font-size: .65rem; } .kpi .value { font-size: 1.25rem; } } /* On mobile, stack any KPI grid as 2-cols — keeps dashboard at-a-glance */ @media (max-width: 575.98px) { .row.g-3.kpi-row > [class*="col-"], .row.g-3 > [class*="col-md-"]:has(> .kpi) { flex: 0 0 50%; max-width: 50%; } } .section-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; gap: .5rem; } .section-h h1 { font-size: 1.5rem; margin: 0; font-weight: 700; letter-spacing: -.01em; } @media (max-width: 575.98px) { .section-h { margin-bottom: .85rem; } .section-h h1 { font-size: 1.25rem; } .section-h .btn { padding: .35rem .7rem; font-size: .85rem; } } /* ========================================================================= Buttons ========================================================================= */ .btn { border-radius: var(--a-radius-sm); font-weight: 500; transition: transform .12s, box-shadow .15s, background .15s; } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(135deg, var(--a-primary), var(--a-primary-dark)); border: 0; box-shadow: 0 2px 6px rgba(37, 99, 235, .25); } .btn-primary:hover { box-shadow: 0 4px 14px rgba(37, 99, 235, .35); } .btn-success { background: var(--a-success); border-color: var(--a-success); } .btn-warning { background: var(--a-warning); border-color: var(--a-warning); color: #fff; } .btn-danger { background: var(--a-danger); border-color: var(--a-danger); } /* Floating action button */ .fab { position: fixed; right: 1rem; bottom: calc(var(--a-bottom-nav-h) + 1rem + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--a-primary), var(--a-accent)); color: #fff; font-size: 1.4rem; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37, 99, 235, .4); z-index: 1020; border: 0; transition: transform .2s; } .fab:hover { color: #fff; transform: scale(1.05); } .fab:active { transform: scale(.95); } @media (min-width: 992px) { .fab { bottom: 1.5rem; } } /* ========================================================================= Forms ========================================================================= */ .form-control, .form-select { border-radius: var(--a-radius-sm); border-color: var(--a-border); padding: .55rem .75rem; font-size: 15px; /* prevents iOS zoom on focus */ transition: border-color .15s, box-shadow .15s; } .form-control:focus, .form-select:focus { border-color: var(--a-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .form-label { font-weight: 500; color: var(--a-text-soft); margin-bottom: .35rem; } .form-label.small { font-size: .78rem; color: var(--a-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .input-group .btn { border-top-right-radius: var(--a-radius-sm); border-bottom-right-radius: var(--a-radius-sm); } /* Bigger touch targets on mobile */ @media (max-width: 575.98px) { .form-control, .form-select { padding: .65rem .85rem; min-height: 44px; } .btn { min-height: 44px; padding-left: 1rem; padding-right: 1rem; } .btn-sm { min-height: 36px; } } /* ========================================================================= Top loading bar ========================================================================= */ #topLoader { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--a-primary), var(--a-accent)); transform: scaleX(0); transform-origin: left; z-index: 9999; transition: transform .35s ease, opacity .3s; box-shadow: 0 0 8px rgba(37, 99, 235, .4); } #topLoader.go { transform: scaleX(.6); transition-duration: 4s; } #topLoader.done { transform: scaleX(1); opacity: 0; transition-duration: .4s; } /* ========================================================================= Form submit overlay ========================================================================= */ #busyOverlay { position: fixed; inset: 0; background: rgba(255, 255, 255, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 9998; } #busyOverlay.show { display: flex; animation: fadeIn .15s; } .spinner-ring { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--a-primary-soft); border-top-color: var(--a-primary); animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } /* ========================================================================= Skeleton loaders ========================================================================= */ .skeleton { background: linear-gradient(90deg, #eef2f7 0%, #f7f9fc 50%, #eef2f7 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--a-radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ========================================================================= Splash ========================================================================= */ #appSplash { position: fixed; inset: 0; z-index: 99999; background: linear-gradient(135deg, var(--a-primary), var(--a-accent)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; transition: opacity .35s; } #appSplash.hidden { opacity: 0; pointer-events: none; } #appSplash .splash-logo { width: 84px; height: 84px; border-radius: 22px; background: rgba(255, 255, 255, .15); display: grid; place-items: center; font-size: 2.5rem; font-weight: 800; box-shadow: 0 8px 32px rgba(0, 0, 0, .15); animation: splashPulse 1.6s ease-in-out infinite; } #appSplash .splash-name { margin-top: 1rem; font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; } #appSplash .splash-tag { margin-top: .25rem; opacity: .85; font-size: .9rem; } @keyframes splashPulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(0, 0, 0, .15); } 50% { transform: scale(1.06); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); } } /* ========================================================================= Auth pages ========================================================================= */ .auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .08), transparent 50%), radial-gradient(circle at 100% 100%, rgba(6, 182, 212, .08), transparent 50%), var(--a-bg); } .auth-card { background: #fff; border: 1px solid var(--a-border); border-radius: var(--a-radius-lg); padding: 2rem; width: 100%; max-width: 440px; box-shadow: var(--a-shadow-lg); animation: pageIn .4s cubic-bezier(.2, .8, .25, 1); } /* ========================================================================= Calendar ========================================================================= */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; } .cal-day { background: var(--a-card); border: 1px solid var(--a-border); border-radius: var(--a-radius-sm); min-height: 96px; padding: .4rem; font-size: .82rem; color: var(--a-text); transition: transform .15s, box-shadow .15s; } .cal-day:hover { box-shadow: var(--a-shadow-sm); } .cal-day .d { font-weight: 600; color: var(--a-text-soft); } .cal-day.muted { background: var(--a-input-bg); color: var(--a-muted); border-style: dashed; } .cal-event { background: linear-gradient(135deg, var(--a-primary), var(--a-primary-dark)); color: #fff; font-size: .7rem; border-radius: 4px; padding: .15rem .35rem; margin-top: .2rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-event:hover { color: #fff; opacity: .9; } /* ========================================================================= Slot grid ========================================================================= */ .slot-grid { display: flex; flex-wrap: wrap; gap: .4rem; } .slot { padding: .55rem .85rem; border: 1px solid var(--a-border); border-radius: var(--a-radius-sm); background: #fff; cursor: pointer; font-size: .88rem; font-weight: 500; transition: all .15s; } .slot:hover:not(.taken) { border-color: var(--a-primary); color: var(--a-primary); } .slot.taken { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; text-decoration: line-through; } .slot.active { background: var(--a-primary); color: #fff; border-color: var(--a-primary); box-shadow: 0 4px 12px rgba(37, 99, 235, .3); } /* ========================================================================= Doc compare ========================================================================= */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .compare-grid img, .compare-grid video { width: 100%; border-radius: var(--a-radius-sm); border: 1px solid var(--a-border); background: #000; } @media (max-width: 768px) { .compare-grid { grid-template-columns: 1fr; } } /* ========================================================================= Tables ========================================================================= */ .table { color: var(--a-text); margin-bottom: 0; } .table thead.table-light { background: #f8fafc; } .table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--a-muted); font-weight: 700; border-bottom: 1px solid var(--a-border); padding-top: .65rem; padding-bottom: .65rem; } .table tr { transition: background .12s; } .table tbody tr:hover { background: #f8fafc; } .table tbody td { padding: .75rem .75rem; vertical-align: middle; } /* Card-wrapped tables: rounded corners + horizontal scroll on mobile */ .card > table.table:first-child { border-top-left-radius: var(--a-radius); border-top-right-radius: var(--a-radius); } .card.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card.p-0 .table { min-width: 600px; } @media (max-width: 575.98px) { .table thead th { font-size: .65rem; padding: .5rem .5rem; } .table tbody td { padding: .55rem .5rem; font-size: .85rem; } .table .btn-sm { padding: .25rem .5rem; font-size: .75rem; } /* Allow tables to scroll horizontally inside card-wrapped containers */ .card.p-0 .table { min-width: 520px; } } .badge { font-weight: 600; letter-spacing: .02em; } .badge.rounded-pill { padding: .35em .7em; } /* ========================================================================= Network indicator ========================================================================= */ #netPill { position: fixed; right: 12px; bottom: calc(var(--a-bottom-nav-h) + 12px + env(safe-area-inset-bottom)); padding: .35rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; z-index: 1080; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); animation: pageIn .3s; } @media (min-width: 992px) { #netPill { bottom: 12px; } } /* ========================================================================= Install prompt banner ========================================================================= */ #installPrompt { position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--a-bottom-nav-h) + 1rem + env(safe-area-inset-bottom)); background: #fff; border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: .85rem 1rem; box-shadow: var(--a-shadow-lg); z-index: 1050; display: none; animation: pageIn .3s; align-items: center; gap: .75rem; } #installPrompt.show { display: flex; } @media (min-width: 992px) { #installPrompt { left: auto; right: 1.5rem; max-width: 360px; bottom: 1.5rem; } } /* ========================================================================= Print ========================================================================= */ @media print { .app-side, .app-top, .app-bottom-nav, .noprint, .fab, #topLoader, #netPill, #installPrompt { display: none !important; } .app-content { padding: 0; } body { background: #fff; } } /* ========================================================================= Utility ========================================================================= */ .softbg { background: var(--a-primary-soft); } .dashed { border: 1.5px dashed var(--a-border); padding: 1.25rem; border-radius: var(--a-radius); text-align: center; color: var(--a-muted); background: rgba(248, 250, 252, .5); } .text-muted { color: var(--a-muted) !important; } /* Stagger animation for grid items */ .stagger > * { animation: pageIn .35s both; } .stagger > *:nth-child(1) { animation-delay: .03s; } .stagger > *:nth-child(2) { animation-delay: .06s; } .stagger > *:nth-child(3) { animation-delay: .09s; } .stagger > *:nth-child(4) { animation-delay: .12s; } .stagger > *:nth-child(5) { animation-delay: .15s; } .stagger > *:nth-child(6) { animation-delay: .18s; } .stagger > *:nth-child(7) { animation-delay: .21s; } .stagger > *:nth-child(8) { animation-delay: .24s; } .stagger > *:nth-child(9) { animation-delay: .27s; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }