:root {
    /* Dental clinic brand palette — clinical, calm teal */
    --oms-teal: #0f7a72;
    --oms-teal-dark: #0b5f59;
    --oms-teal-light: #5cb3ac;
    --oms-cream: #eaf6f4;
    --oms-charcoal: #24312f;
    /* Inter renders noticeably crisper than the system-UI default at small
       dashboard sizes; the stack falls back gracefully if the CDN is unreachable. */
    --oms-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #f4f6f9;
    font-family: var(--oms-font);
    color: var(--oms-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .stat-value, .card-title, .btn {
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--oms-charcoal);
}

/* ---------- Login screen ---------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--oms-teal) 0%, var(--oms-teal-dark) 100%);
}

.login-card {
    width: 100%;
    max-width: 380px;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.login-logo {
    width: auto;
    height: 80px;
    max-width: 220px;
}

/* ---------- Top navbar ---------- */
.oms-navbar {
    background-color: var(--oms-teal);
}

.oms-navbar .navbar-brand {
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 0.02em;
}

.oms-navbar .navbar-brand small {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--oms-cream);
    letter-spacing: 0.08em;
}

/* ---------- Sidebar ---------- */
.oms-sidebar {
    width: 250px;
    min-height: calc(100vh - 56px);
    background-color: #fff;
    border-right: 1px solid #e3e6ea;
    flex-shrink: 0;
    position: relative;
    transition: width 0.15s ease;
}

.oms-sidebar .nav-link {
    color: #33404d;
    border-radius: 0.375rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oms-sidebar .nav-link.active {
    background-color: var(--oms-teal);
    color: #fff !important;
}

.oms-sidebar .nav-link:hover:not(.active) {
    background-color: var(--oms-cream);
}

.oms-sidebar .sidebar-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9aa5b1;
    margin: 0.9rem 0.9rem 0.3rem;
    white-space: nowrap;
    overflow: hidden;
}

/* Collapsible menu groups (wrapped by the script in sidebar.php). */
.oms-sidebar .sidebar-section[role="button"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.6rem 0 0.15rem;
    padding: 0.3rem 0.9rem;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
}

.oms-sidebar .sidebar-section[role="button"]:hover {
    background-color: #f4f6f9;
    color: var(--oms-charcoal);
}

.oms-sidebar .sidebar-section[role="button"]:focus-visible {
    outline: 2px solid var(--oms-teal-light);
    outline-offset: -2px;
}

.sidebar-section-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.sidebar-section.is-closed .sidebar-section-chevron {
    transform: rotate(-90deg);
}

/* grid-rows 1fr -> 0fr animates to the group's natural height, no fixed max-height. */
.sidebar-group {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.2s ease;
}

.sidebar-group.is-closed {
    grid-template-rows: 0fr;
}

.sidebar-group.no-anim {
    transition: none;
}

.sidebar-group-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Icon-only sidebar has no headings to click, so every group stays open there. */
.oms-sidebar.collapsed .sidebar-group.is-closed {
    grid-template-rows: 1fr;
}

/* ---------- Sidebar collapse toggle ----------
   A small tab pinned to the sidebar's own right edge, half-overlapping the
   content area — since sidebar.php is one shared include but every page's
   own heading row is duplicated per-file, this is what makes the button
   read as "top-left of the page" on every single page without touching
   each one individually. Position is relative to the sidebar itself, so
   it automatically follows the sidebar's edge whether expanded or collapsed. */
.sidebar-collapse-btn {
    position: absolute;
    top: 1.5rem;
    right: -14px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e6ea;
    border-radius: 50%;
    background: #fff;
    color: #6c757d;
    box-shadow: 0 0.125rem 0.35rem rgba(36, 49, 47, 0.15);
    z-index: 5;
}

.sidebar-collapse-btn:hover {
    background-color: var(--oms-cream);
    color: var(--oms-charcoal);
}

.oms-sidebar.collapsed {
    width: 64px;
}

.oms-sidebar.collapsed .sidebar-toggle-row {
    justify-content: center;
}

.oms-sidebar.collapsed .nav-label,
.oms-sidebar.collapsed .sidebar-section {
    display: none;
}

.oms-sidebar.collapsed .nav-link {
    text-align: center;
    padding: 0.55rem 0;
}

.oms-sidebar.collapsed .nav-link i {
    margin-right: 0 !important;
    font-size: 1.05rem;
}

.oms-content {
    flex-grow: 1;
    padding: 1rem 1.75rem 1.75rem;
    min-width: 0; /* let a collapsed sidebar actually free up space instead of the flex item refusing to shrink/grow */
}

/* ---------- Reusable bits ---------- */
.stat-card {
    border: none;
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(36, 49, 47, 0.08);
    height: 100%;
}

.stat-card .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
}

.table-responsive-card {
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(36, 49, 47, 0.06);
    padding: 1.25rem;
}

/* Box-pad grid item (e.g. appointments list) — a .table-responsive-card that
   lifts slightly on hover since each box is itself a clickable-feeling unit. */
.appt-box {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.appt-box:hover {
    box-shadow: 0 0.35rem 0.9rem rgba(36, 49, 47, 0.12);
    transform: translateY(-2px);
}

/* ---------- Password field with an inline show/hide toggle ---------- */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 2.75rem;
}

.password-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 0;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
    color: var(--oms-charcoal);
}

.password-toggle-btn:focus {
    outline: none;
    box-shadow: none;
}

/* ---------- Compact data grid (prescriptions, tables of paired values) ---------- */
.rx-table th, .rx-table td {
    text-align: center;
    vertical-align: middle;
}

.rx-table th:first-child, .rx-table td:first-child {
    text-align: left;
    font-weight: 600;
}

.rx-table input.form-control {
    text-align: center;
}

/* ---------- Odontogram (dental examination tooth chart) ---------- */
.tooth-chart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    padding: 0.5rem 0;
}

.tooth-chart-row + .tooth-chart-row {
    border-top: 1px dashed #e3e6ea;
    margin-top: 0.25rem;
}

.tooth-cell {
    width: 54px;
    text-align: center;
}

.tooth-cell .tooth-no {
    font-size: 0.68rem;
    color: #9aa5b1;
    margin-bottom: 0.15rem;
}

.tooth-cell select {
    width: 100%;
    padding: 0.15rem 0.2rem;
    font-size: 0.72rem;
    border-radius: 0.3rem;
    border: 1px solid #d7dce2;
    text-align: center;
    background-color: #fff;
}

/* Graphical tooth icon: a crown + tapered root drawn once (toothIconSvg())
   and recolored per condition purely via the wrapper's `color`, since the
   shapes fill/stroke with currentColor. */
.tooth-icon-wrap {
    display: inline-flex;
    margin-bottom: 0.15rem;
}

.tooth-icon {
    width: 30px;
    height: 40px;
}

.tooth-icon rect,
.tooth-icon path {
    fill: currentColor;
    fill-opacity: 0.22;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.tooth-label {
    font-size: 0.66rem;
    line-height: 1.1;
}

.tooth-missing .tooth-icon rect,
.tooth-missing .tooth-icon path {
    fill: none;
    stroke-dasharray: 2.5 2;
}

.tooth-sound      { color: #9aa5b1; background-color: #fff !important; }
.tooth-caries      { color: #dc3545; background-color: #f8d7da !important; border-color: #dc3545 !important; }
.tooth-filled      { color: #0d6efd; background-color: #cfe2ff !important; border-color: #0d6efd !important; }
.tooth-missing     { color: #6c757d; background-color: #e9ecef !important; border-color: #adb5bd !important; }
.tooth-to-extract  { color: #fd7e14; background-color: #ffe5b4 !important; border-color: #fd7e14 !important; }
.tooth-crown       { color: #198754; background-color: #d4edda !important; border-color: #198754 !important; }
.tooth-root-canal  { color: #6f42c1; background-color: #e2d9f3 !important; border-color: #6f42c1 !important; }
.tooth-flagged     { color: #ffc107; background-color: #fff3cd !important; border-color: #ffc107 !important; }
.tooth-other       { color: var(--oms-teal); background-color: #eaf6f4 !important; border-color: var(--oms-teal) !important; }

.tooth-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: #6c757d;
}

.tooth-legend .legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.15rem;
    border: 1px solid rgba(0,0,0,0.15);
    margin-right: 0.3rem;
    vertical-align: -1px;
}

/* ---------- Treatment / dental lab status timeline ---------- */
.status-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.status-timeline li {
    flex: 1 1 0;
    min-width: 110px;
    text-align: center;
    padding: 0.6rem 0.3rem;
    position: relative;
    font-size: 0.78rem;
    color: #9aa5b1;
    border-top: 3px solid #e3e6ea;
}

.status-timeline li.done {
    color: var(--oms-teal-dark);
    border-top-color: var(--oms-teal);
    font-weight: 600;
}

.status-timeline li.current {
    color: #fff;
    background-color: var(--oms-teal);
    border-radius: 0.35rem;
    border-top-color: var(--oms-teal);
}

/* ---------- POS ---------- */
.pos-product-card {
    border: 1px solid #e3e6ea;
    border-radius: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    background: #fff;
    height: 100%;
}

.pos-product-card:hover {
    border-color: var(--oms-teal);
    box-shadow: 0 0.125rem 0.5rem rgba(15, 122, 114, 0.15);
}

.pos-cart {
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(36, 49, 47, 0.08);
}

/* ---------- Print (e.g. prescriptions, invoices, receipts) ---------- */
@media print {
    .oms-navbar, .oms-sidebar, .no-print { display: none !important; }
    .oms-content { padding: 0; }
    .table-responsive-card { box-shadow: none; padding: 0; margin-bottom: 1rem !important; }
}

/* Current-branch pill in page headers (see branchBadge()) */
.branch-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.branch-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin-right: .35rem;
    border: 1px solid rgba(255, 255, 255, .8);
}
/* Product pictures (inventory lists, product form, POS). */
.product-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    background: #fff;
    flex-shrink: 0;
}
.product-thumb-empty {
    background: #f1f3f5;
    color: #adb5bd;
}
/* Current branch in the top header (switcher button or read-only label). */
.header-branch {
    font-size: 1rem;
    font-weight: 600;
}
.header-branch .branch-dot {
    width: .7rem;
    height: .7rem;
}

/* Access Rights matrix: masonry-style two columns so short groups (e.g.
   Front Desk) don't leave a gap beside taller ones like Patient Care. */
.perm-groups { column-count: 1; column-gap: 1rem; }
@media (min-width: 768px) { .perm-groups { column-count: 2; } }
.perm-group { break-inside: avoid; page-break-inside: avoid; margin-bottom: 1rem; display: inline-block; width: 100%; }

/* Access Rights "Select all" links: no underline, teal on hover. */
.perm-group-select-all { color: var(--oms-teal); text-decoration: none; transition: color .15s; }
.perm-group-select-all:hover,
.perm-group-select-all:focus { color: #d35400; text-decoration: none; }

/* Edit Product: clickable barcode label preview (opens inventory/labels.php). */
.product-label-preview {
    display: block; width: 230px; padding: 6px 10px 4px; text-align: center;
    border: 1px dashed #bbb; border-radius: 8px; background: #fff;
    color: #222; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.product-label-preview:hover { border-color: var(--oms-teal); box-shadow: 0 0 0 3px rgba(15, 122, 114, .15); color: #222; }
.product-label-preview .plp-clinic { font-size: .6rem; color: #777; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-label-preview .plp-name { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.product-label-preview svg { max-width: 100%; height: 56px; }
.product-label-preview .plp-meta { display: flex; justify-content: space-between; font-size: .7rem; }
.product-label-preview .plp-hint { font-size: .65rem; color: var(--oms-teal); margin-top: 2px; }