:root {
    /* Medical 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);
}

.public-booking-card {
    max-width: 720px;
}

.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;
}

.navbar-brand-logo {
    height: 56px;
    width: 56px;
    object-fit: contain;
}

/* ---------- 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;
}

/* ---------- 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;
}

.table thead th {
    text-align: center;
    vertical-align: middle;
}

/* ---------- 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;
}

/* ---------- Lab/service order 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; }
}