/* LabDental CRM custom styles. Bootstrap 5.3 dark/light theming is driven by the data-bs-theme attribute on , set in _Layout.cshtml from a cookie. */ :root { --ld-primary: #14b8a6; --ld-primary-strong: #0d9488; --ld-primary-soft: rgba(20, 184, 166, 0.10); --ld-sidebar-width: 260px; --ld-radius: 0.85rem; } [data-bs-theme="dark"] { --ld-bg: #0b1220; --ld-surface: #111827; --ld-surface-glass: rgba(17, 24, 39, 0.72); --ld-sidebar-bg: rgba(15, 23, 42, 0.85); --ld-border: rgba(148, 163, 184, 0.18); --bs-body-bg: var(--ld-bg); } [data-bs-theme="light"] { --ld-bg: #f4f7fb; --ld-surface: #ffffff; --ld-surface-glass: rgba(255, 255, 255, 0.78); --ld-sidebar-bg: rgba(255, 255, 255, 0.85); --ld-border: rgba(15, 23, 42, 0.10); --bs-body-bg: var(--ld-bg); } body { background-color: var(--ld-bg); } /* === Login layout === */ .ld-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .ld-login-shell { position: relative; width: 100%; max-width: 28rem; } .ld-theme-toggle-corner { position: fixed; top: 1rem; right: 1rem; margin: 0; } .ld-login-main .card { border: 1px solid var(--ld-border); border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.15); backdrop-filter: blur(8px); background-color: var(--ld-surface-glass); } /* === Authed app shell === */ .ld-app-body { min-height: 100vh; } .ld-app-shell { display: flex; min-height: 100vh; } .ld-sidebar { width: var(--ld-sidebar-width); flex-shrink: 0; background-color: var(--ld-sidebar-bg); backdrop-filter: blur(8px); border-right: 1px solid var(--ld-border); flex-direction: column; padding: 1.25rem 0.85rem; } .ld-sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.5rem 1.25rem; } .ld-brand-mark { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: linear-gradient(135deg, var(--ld-primary), var(--ld-primary-strong)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35); } .ld-brand-text { font-weight: 700; letter-spacing: -0.02em; } .ld-sidebar-nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; overflow-y: auto; padding: 0.25rem 0; } .ld-nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 0.7rem; color: var(--bs-body-color); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; } .ld-nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; } .ld-nav-link:hover { background-color: var(--ld-primary-soft); color: var(--ld-primary); } .ld-nav-link.active { background-color: var(--ld-primary); color: #fff; box-shadow: 0 4px 14px rgba(20, 184, 166, 0.30); } .ld-nav-link.active:hover { background-color: var(--ld-primary-strong); color: #fff; } .ld-nav-link[data-implemented="false"] { opacity: 0.55; cursor: not-allowed; } .ld-nav-link[data-implemented="false"]:hover { background-color: transparent; color: var(--bs-body-color); } .ld-sidebar-footer { border-top: 1px solid var(--ld-border); padding-top: 0.85rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .ld-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* === Topbar === */ .ld-topbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--ld-border); background-color: var(--ld-surface-glass); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 1020; } .ld-page-title { font-size: 1.1rem; font-weight: 600; margin: 0; } .ld-topbar-search { flex: 0 1 22rem; margin-left: 1rem; } .ld-topbar-search .input-group-text, .ld-topbar-search .form-control { background-color: var(--ld-bg); border-color: var(--ld-border); } .ld-bell { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .ld-bell-dot { width: 0.55rem; height: 0.55rem; } .ld-theme-toggle { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .ld-hamburger { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .ld-user-button { border: 1px solid var(--ld-border); background-color: transparent; padding: 0.25rem 0.55rem; border-radius: 999px; color: var(--bs-body-color); } .ld-user-button:hover, .ld-user-button:focus, .ld-user-button[aria-expanded="true"] { background-color: var(--ld-primary-soft); border-color: var(--ld-primary); color: var(--bs-body-color); } .ld-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, var(--ld-primary), var(--ld-primary-strong)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; } .ld-user-button-name { font-size: 0.85rem; font-weight: 600; } .ld-user-button-role { font-size: 0.7rem; } /* === Content === */ .ld-content { flex: 1; padding: 1.5rem; } .ld-content .card { border: 1px solid var(--ld-border); border-radius: var(--ld-radius); background-color: var(--ld-surface); } /* === Off-canvas styling === */ .ld-sidebar-offcanvas { width: var(--ld-sidebar-width); background-color: var(--ld-sidebar-bg); backdrop-filter: blur(8px); border-right: 1px solid var(--ld-border); } .ld-sidebar-offcanvas .ld-sidebar { width: 100%; border-right: 0; background: transparent; backdrop-filter: none; padding: 0.5rem 0.75rem 1rem; } /* Bootstrap primary token override so .btn-primary etc. pick up our teal */ .btn-primary, .btn-primary:focus { --bs-btn-bg: var(--ld-primary); --bs-btn-border-color: var(--ld-primary); --bs-btn-hover-bg: var(--ld-primary-strong); --bs-btn-hover-border-color: var(--ld-primary-strong); --bs-btn-active-bg: var(--ld-primary-strong); --bs-btn-active-border-color: var(--ld-primary-strong); --bs-btn-disabled-bg: var(--ld-primary); --bs-btn-disabled-border-color: var(--ld-primary); } .btn-outline-primary { --bs-btn-color: var(--ld-primary); --bs-btn-border-color: var(--ld-primary); --bs-btn-hover-bg: var(--ld-primary); --bs-btn-hover-border-color: var(--ld-primary); --bs-btn-active-bg: var(--ld-primary-strong); --bs-btn-active-border-color: var(--ld-primary-strong); } .text-primary { color: var(--ld-primary) !important; } .bg-primary { background-color: var(--ld-primary) !important; } /* === Searchable picker (Alpine) === */ [x-cloak] { display: none !important; } .ld-picker .ld-picker-list { z-index: 1080; max-height: 240px; overflow-y: auto; margin-top: 2px; } .ld-picker .ld-picker-list .list-group-item { cursor: pointer; padding: 0.4rem 0.75rem; } /* === Responsive === */ @media (max-width: 991.98px) { .ld-content { padding: 1rem; } .ld-topbar { padding: 0.75rem 1rem; } }