/* ═══════════════════════════════════════════════════════════════
   ehr_base.css — Resets, variables, typography, body
   Load order: 1
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Colors */
    --ehr-green-dark: #0c420c;
    --ehr-green-mid: #1a5e1a;
    --ehr-green-light: #316b31;
    --ehr-green-accent: #2d8a2d;
    --ehr-bg: #f4f4f4;
    --ehr-white: #ffffff;
    --ehr-text: #333333;
    --ehr-text-light: #666666;
    --ehr-text-muted: #999999;
    --ehr-border: #e0e0e0;
    --ehr-border-light: #eeeeee;
    --ehr-shadow: rgba(0, 0, 0, 0.08);
    --ehr-shadow-heavy: rgba(0, 0, 0, 0.15);

    /* Sidebar */
    --ehr-sidebar-width: 200px;
    --ehr-sidebar-bg: var(--ehr-green-dark);
    --ehr-sidebar-text: #c8e6c8;
    --ehr-sidebar-hover: rgba(255, 255, 255, 0.08);
    --ehr-sidebar-active: rgba(255, 255, 255, 0.12);

    /* Header */
    --ehr-header-height: 52px;
    --ehr-header-bg: var(--ehr-white);

    /* Mobile bar */
    --ehr-mobile-bar-height: 48px;
    --ehr-mobile-bar-bg: var(--ehr-green-dark);
    --ehr-mobile-bar-text: #ffffff;
    --ehr-mobile-sub-bg: #1a3d1a;
    --ehr-mobile-sub-text: #d4e8d4;

    /* Transitions */
    --ehr-transition: 0.25s ease;

    /* Typography */
    --ehr-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ehr-font-size: 14px;
    --ehr-line-height: 1.5;
}

/* === Reset === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html, body {
    overscroll-behavior: none;
    /* overflow-x: hidden removed — setting this on html/body corrupts the
       scroll container reference used by min-width media queries, causing
       horsepage_hide_* breakpoints to fire at wrong widths. Instead, clip
       overflow at the page-container level only. */
}

/* Prevent horizontal scroll at the layout level without breaking media queries.
   NOTE: .ehr-content-frame is not used in all pages — .ehr-main-content is the
   actual AJAX content target, so clip must be applied there too. */
.ehr-page-container,
.ehr-main-content,
.ehr-content-frame {
    overflow-x: clip;
}

body {
    font-family: var(--ehr-font);
    font-size: var(--ehr-font-size);
    line-height: var(--ehr-line-height);
    color: var(--ehr-text);
    background: var(--ehr-bg);
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 🍞 BREADCRUMB: img { display: block } above stacks inline icon images
   (capper indicators, badge icons) vertically instead of side-by-side.
   TD images are almost always inline icons — reset them to inline-block.
   Using inline-block (not inline) preserves max-width and sizing control. */
td img {
    display: inline-block;
    vertical-align: middle;
}

/* Legacy grid/table variables (from old style.css :root) */
:root {
    --row-height: 44px;
    --border: 1px solid #e5e7eb;
    --header-bg: #f8fafc;
    --row-bg: #ffffff;
    --row-alt-bg: #f9fafb;
    --accent: #2563eb;
    --col-width: 120px;
    --sidebar-width: 200px;
}