:root {
    /* Brand colors (--oms-teal*, --oms-cream, --oms-tint, --oms-ink) live in themes.css */
    --oms-charcoal: var(--oms-ink-soft);
    /* 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: 280px;
    min-height: calc(100vh - 56px);
    background-color: #fff;
    border-right: 1px solid #e3e6ea;
    flex-shrink: 0;
    position: relative;
}

.oms-sidebar .nav-link {
    color: #33404d;
    border-radius: 0.375rem;
    padding: 0.5rem 0.9rem;
    font-size: 1rem;
    font-weight: 500;
    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;
    font-weight: 700;
    letter-spacing: 0.09em;
    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;
}

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

/* ---------- Refraction / prescription grid (eye examination, prescriptions) ---------- */
.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;
}

.eye-badge-od { color: var(--oms-teal-dark); font-weight: 700; }
.eye-badge-os { color: #b5651d; font-weight: 700; }

/* ---------- Optical 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(var(--oms-teal-rgb),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; }
}

/* ---------- Typography (same as oms) ---------- */
body { font-size: 1rem; }
@media screen {
    .table thead th { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
    .table tbody td { font-size: 1rem; font-weight: 500; }
    .badge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
}
.form-control, .form-select { font-size: 1rem; font-weight: 500; }
select option { font-weight: 500; }
.form-label { font-size: 0.95rem; font-weight: 600; margin-bottom: 5px; }
.btn { font-size: 0.95rem; font-weight: 600; }
.btn-sm { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; }
.dropdown-menu { font-size: 0.95rem; }
.dropdown-item { font-size: 0.95rem; font-weight: 500; }
.nav-tabs .nav-link { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }
.alert { font-size: 0.95rem; }
.modal-title { font-size: 1.1rem; font-weight: 700; }
.oms-content .small, .oms-content small { font-size: 0.9em; }
/* Checkboxes and radios use the app's teal accent instead of Bootstrap blue. */
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--oms-teal); border-color: var(--oms-teal); }
.form-check-input:focus { border-color: var(--oms-teal); box-shadow: 0 0 0 .2rem rgba(var(--oms-teal-rgb),.2); }
.form-check-input:disabled:checked { background-color: var(--oms-teal); border-color: var(--oms-teal); opacity: .5; }
/* No page-level horizontal scrollbar: wide tables scroll inside their own .table-responsive wrapper. */
/* clip, not hidden: hidden would make the body a scroll container and break the sticky sidebar. */
body { overflow-x: clip; max-width: 100%; }
.oms-content { min-width: 0; max-width: 100%; }