/* ═══════════════════════════════════════════════════════════════
   ehr_content.css — Page container, main content, footer
   Load order: 4
   ═══════════════════════════════════════════════════════════════ */

/* Page container — wraps header + main content */
.ehr-page-container {
    margin-left: var(--ehr-sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--ehr-transition);
}

/* When sidebar is collapsed */
.ehr-sidebar.collapsed ~ .ehr-page-container {
    margin-left: 0;
}

/* Main content area */
.ehr-main-content {
    padding-top: var(--ehr-header-height);
    min-height: calc(100vh - var(--ehr-header-height));
    background: var(--ehr-white);
}

/* Content frame — replaces old centered box. Full width, no gaps. */
.ehr-content-frame {
    background: var(--ehr-white);
    padding: 16px;
    width: 100%;
}

/* Page content flex wrapper */
.ehr-page-content {
    display: flex;
    flex-flow: column;
    gap: 1em;
    width: 100%;
}

/* Footer */
.ehr-footer {
    padding: 16px 20px;
    font-size: 11px;
    color: var(--ehr-text-muted);
    text-align: center;
    border-top: 1px solid var(--ehr-border-light);
    background: var(--ehr-white);
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    .ehr-page-container {
        margin-left: 0;
    }

    .ehr-main-content {
        padding-top: var(--ehr-mobile-bar-height);
    }

    .ehr-content-frame {
        padding: 10px;
    }
}

/* Legacy .page-content — used by stable and other pages */
.page-content {
    display: flex;
    flex-flow: column;
    gap: 1em;
    width: 100%;
    margin: 0;
}
@media (max-width: 768px) {
    .page-content {
        width: auto;
    }
}

/* ─── Stable horse list fixes ─── */

/* Horse name + icons side-by-side (pencil/arrow next to name, not below) */
/* Horse name cell layout — flex to align icons/badges inline.
   :not([colspan]) excludes detail cells and expanded info cells
   (which have colspan and are also td:first-child in their row).
   The > combinator prevents matching TDs in nested tables. */
.stable_horse_list_table > tbody > tr > td:first-child:not([colspan]) {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Horse name div — takes all available space, truncates when needed */
.stable_horse_list_table > tbody > tr > td:first-child:not([colspan]) > div:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
/* Icons div — pushed to far right, never shrinks */
.stable_horse_list_table > tbody > tr > td:first-child:not([colspan]) > div:last-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Alternating row colors for stable table.
   Each horse has 3 TRs: data row, expanded-info row, detail row.
   6n cycle alternates color every other horse:
   Rows 1-3 (horse 1): white,  Rows 4-6 (horse 2): grey,
   Rows 7-9 (horse 3): white,  Rows 10-12 (horse 4): grey, etc.
   Detail rows get white override from .stable_horse_list_horse_detail_row rule. */
.stable_horse_list_table tbody > tr:nth-child(6n+1),
.stable_horse_list_table tbody > tr:nth-child(6n+2),
.stable_horse_list_table tbody > tr:nth-child(6n+3) { background-color: #ffffff; }
.stable_horse_list_table tbody > tr:nth-child(6n+4),
.stable_horse_list_table tbody > tr:nth-child(6n+5),
.stable_horse_list_table tbody > tr:nth-child(6n+6) { background-color: #eef2ee; }

/* Stable expanded info — hide entire row by default, show when JS toggles */
tr:has(> td > .stable_horse_list_expanded_info) {
    display: none;
}
tr:has(> td > .stable_horse_list_expanded_info.stable_horse_list_show) {
    display: table-row;
}
.stable_horse_list_expanded_info {
    display: none !important;
}
.stable_horse_list_expanded_info.stable_horse_list_show {
    display: block !important;
}