/* ═══════════════════════════════════════════════════════════════
   ehr_responsive.css — Breakpoint utilities and edge cases
   Load order: 5 (last)
   ═══════════════════════════════════════════════════════════════ */

/* Responsive font sizing */
@media (max-width: 577px) {
    :root { --ehr-font-size: 13px; }
}

@media (min-width: 578px) and (max-width: 768px) {
    :root { --ehr-font-size: 13px; }
}

@media (min-width: 769px) and (max-width: 1200px) {
    :root { --ehr-font-size: 14px; }
}

@media (min-width: 1201px) {
    :root { --ehr-font-size: 14px; }
}

/* Desktop hide / mobile show utilities */
.ehr-desktop-only {
    display: block;
}
.ehr-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .ehr-desktop-only {
        display: none !important;
    }
    .ehr-mobile-only {
        display: block !important;
    }
}

/* Accordion styles for data tables (carried from oldstyle) */
@media (max-width: 767px) {
    .divtable.accordion-xs { width: auto; }
    .accordion-xs .headings { display: none; }
    .accordion-xs .tr { border-bottom-color: #fff; }
    .accordion-xs .th,
    .accordion-xs .td {
        float: none;
        width: auto !important;
        padding: 0;
    }
    .accordion-xs .accordion-xs-toggle {
        font-weight: bold;
        padding: 10px;
        cursor: pointer;
    }
    .accordion-xs .accordion-xs-toggle:hover {
        background-color: #e69500;
    }
    .accordion-xs .accordion-xs-toggle:after {
        content: '\2b';
        float: right;
        position: relative;
        top: 1px;
        display: inline-block;
    }
    .accordion-xs .accordion-xs-toggle.collapsed:after {
        content: '\2212';
    }
    .accordion-xs-collapse .inner { padding: 10px; }
    .accordion-xs-collapse .inner .td {
        width: 50% !important;
        padding: 3px;
        float: left;
        text-align: right;
    }
}

/* ─── Legacy responsive component styles (from old responsive.css) ─── */
@media (max-width: 980px) {
    /* My Horses responsive table */
    .myHorses thead {
        display: none;
    }
    .myHorses tbody td {
        display: block;
        float: left;
        width: 50%;
        text-align: left;
        border: none;
        padding: 7px;
    }
    .myHorses tbody > tr:first-child {
        border-top: 2px solid #000;
    }
    .myHorses tbody > tr {
        border-bottom: 2px solid #000;
    }
    .myHorses td.name {
        display: inline-block;
        font-size: 18px;
        padding: 10px 10px 0 0;
        vertical-align: middle;
        font-weight: bold;
        width: 75%;
        padding-bottom: 6px;
    }
    .myHorses td.health {
        display: inline-block;
        float: none;
        text-align: right !important;
        padding: 10px 0 0 0;
        width: 25%;
    }
    .myHorses td.plan {
        display: inline-block;
        float: none;
        text-align: left !important;
        vertical-align: middle;
        width: 100%;
    }
    .myHorses td.awards {
        display: inline-block;
        float: none;
        text-align: left !important;
        vertical-align: middle;
        width: 50%;
    }
    .myHorses td.reduced {
        display: inline-block;
        float: none;
        text-align: right;
        vertical-align: middle;
        width: 49%;
    }
    .myHorses td.full {
        display: none;
    }
    .btn-quickview {
        padding: 5px 15px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        background: #237424;
    }
    .popover {
        width: 100% !important;
    }
    .popover-header {
        background: #ccd5ed;
        color: #030369;
    }
    .bs-popover-auto[x-placement^="bottom"] .arrow::after,
    .bs-popover-bottom .arrow::after {
        top: 1px;
        border-bottom-color: #fff;
    }
}