/* ********************************************************************************************
* OntarioTECK VBA Developers
* Developed by Gustavo Miller 
* Date Created : 2026-06-15 8:40:49 AM
* 
* Location: D:\Curriculum Vitae\ASP.Net 6\CV\wwwroot\css\
* Filename: pain\paindoctors.css
*
* Consolidated and normalized styles for Doctors View
* ********************************************************************************************/

/* =========================
ROOT / GLOBAL
========================= */
:root {
    --navbar-height: 75px;
    --footer-height: 45px;
    --header-height: 29px;
    --message-height: 48px;
    --options-height: 60px;
    --grid-container: 530px;
}

body.layout-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main wrapper from layout */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: var(--navbar-height);
    min-height: 0;
}

/* =========================
VIEW SCOPE
========================= */
.my-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .my-view > .container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .my-view .app {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* =========================
    TOP SECTIONS
    ========================= */
    .my-view .top {
        flex: 0 0 auto;
    }

    /* =========================
    MAIN CONTENT AREA
    ========================= */
    .my-view .main {
        flex: 1;
        display: flex;
        overflow: hidden;
        background: #eef8de;
        min-height: 0;
        border: 2px solid purple;
        margin-bottom: var(--footer-height);
    }

    .my-view .center-content {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        min-height: 0;
    }

        .my-view .center-content > .row {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            min-height: 0;
        }

            .my-view .center-content > .row > [class*="col-"] {
                display: flex;
                flex-direction: column;
                min-height: 0;
                flex: 1 1 0;
            }

    /* =========================
   SCROLL AREA
   ========================= */
    .my-view .scroll-area {
        width: 100%;
        flex: 1;
        overflow-y: auto;
        background: #eef8de;
        padding: 5px 20px;
        box-sizing: border-box;
        min-height: 0;
        padding-right: 10px;
    }

/* =========================
GRID LAYOUT
========================= */
.wrapper-gridtable {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.entry-partial {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.painmedworking {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

/* Grid table */
.grid-table {
    display: grid;
    grid-template-columns: 110px 230px 100px 100px 130px 90px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    gap: 6px;
}

/* Grid header */
.grid-header {
    position: sticky;
    top: 0;
    background: #f2f2f2;
    z-index: 5;
    padding: 6px 4px;
    border-bottom: 1px solid #ccc;
    max-height: 80px;
}

/* Grid rows */
.grid-row {
    display: grid;
    border-bottom: 1px solid #e0e0e0;
    grid-template-columns: 140px 80px 90px 90px 90px 90px 90px 90px;
    padding: 4px 2px;
}

    .grid-row:hover {
        background-color: #e9f3ff;
        cursor: pointer;
    }

    .grid-row.selected {
        background-color: #c7e0ff !important;
        border-left: 4px solid #0078d4;
    }

    .grid-row.selectedall {
        background-color: #c7e0ff !important;
    }

/* =========================
   GRID ACTION BUTTONS
   ========================= */
.options-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.options-buttons {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.grid-row:hover .options-buttons {
    opacity: 1;
}

.options-cell[data-doc="false"] .view-btn {
    display: none;
}

.options-cell[data-doc="false"] .history-btn {
    display: inline-block;
}

/* =========================
    FLEX HELPERS
========================= */
.flex-fill-scroll {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.left-col,
.painworking-body,
.painworking-wrapper,
.center-content,
.row,
[class*="col-"] {
    min-height: 0 !important;
}

/* =========================
    Doctors Compact
========================= */
.pain-grid-container {
    display: flex;
    flex-direction: column;
    /* LOCK WIDTHS so nothing goes crazy */
    grid-template-columns: 140px /* Date */
    80px 90px 90px 90px 90px 90px 90px;
    border: 1px solid #ccc;
    max-height: var(--grid-container);
    overflow-x: auto; /* prevents breaking layout */
    overflow-y: auto;
}

/* Each row is its own grid */
.paingrid-row {
    display: grid;
    grid-template-columns: 140px 80px 90px 90px 90px 90px 90px 90px;
}

.cell {
    padding: 2px;
    border: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;
}

.cellrow {
    padding: 4px;
    border: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;
}

.header {
    font-weight: bold;
    background-color: #d9d9d9;
    position: sticky;
    top: 0;
    z-index: 2
}

/* Hover */
.data-row:hover {
    background-color: #e9f3ff;
    cursor: pointer;
}

/* Expandable row */
.expand-row {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .expand-row.open {
        max-height: 150px;
    }

.expand-content {
    padding: 10px;
    background: #f7f7f7;
    border-left: 4px solid #0078d4;
}

/* Each row is its own grid */
.grid-row {
    display: grid;
    grid-template-columns: 140px 80px 90px 90px 90px 90px 90px 90px;
}

/* Cells */
.cell {
    padding: 4px;
    border: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;
}

/* Header */
.header-row {
    position: sticky;
    top: 0;
    background: #d9d9d9;
    font-weight: bold;
    z-index: 5;
}

/* Hover */
.data-row:hover {
    background-color: #e9f3ff;
    cursor: pointer;
}

/* Expandable row */
.expand-row {
    display: grid !important;
    grid-template-columns: 140px 80px 90px 90px 90px 90px 90px 90px;
    width: 100% !important; /* full container width */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    /* opened */
    .expand-row.open {
        max-height: 300px;
    }

/* content */
.expand-content {
    grid-column: 1 / 9; /* 🔥 EXACT number of columns */
    padding: 14px;
    background: #ffffff;
    border-left: 4px solid #0078d4;
    text-align: left;
    white-space: normal;
    min-width: 100%;
}

/* wrapper breaks grid constraints */
.row-block {
    display: block;
    width: 100%;
}

/* your grid rows remain unchanged */
.grid-row {
    display: grid;
    grid-template-columns: 140px 80px 90px 90px 90px 90px 90px 90px;
}

    .grid-row.active {
        background-color: #dbeafe;
        border-left: 4px solid #0078d4;
    }


/* expand row now FREE */
.expand-row {
    position: relative; /* KEY */
    grid-column: 1 / -1; /* force full span in grid */

    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .expand-row.open {
        max-height: 300px;
    }

.expand-content {
    width: 100%;
    display: block;
    padding: 14px;
    background: #ffffff;
    border-left: 4px solid #0078d4;
    white-space: normal;
}

.date-box {
    width: 170px;
}

.listselect {
    width: 240px !important;
}

/* Date Range styling */
.date-range-wrapper {
    display: flex;
    align-items: center;
    margin: 7px;
    gap: 0.75rem;
    justify-content: flex-start; /* <-- key */
}

    .date-range-wrapper .date-box {
        flex: 0 0 auto; /* <-- prevents stretching */
        width: 180px; /* pick a reasonable size */
    }

.date-separator {
    white-space: nowrap;
}

/* Optional: highlight selected row */
.cellrow.selected {
    background-color: #c7e0ff !important;
    border-left: 4px solid #0078d4;
}

/* Optional: highlight selected row */
.cellrow.selectedall {
    background-color: #c7e0ff !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 767.98px) {
    .my-view .center-content > .row > [class*="col-"] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .my-view .center-content > .row {
        flex-wrap: nowrap;
    }

        .my-view .center-content > .row > [class*="col-"] {
            flex: 1 1 0;
        }
}