/* ========================================================= 
     portal-patient.html styles
   ========================================================= */

:root {
    --primary-color: #005a9c;
    --primary-hover: #004475;
    --card-bg: #ffffff;
    --text-color: #333333;
    --text-muted: #777777;
    --border-color: #cbd5e0;
    --table-header: #71a9d3;
    --table-header-hover: #5d93bc;
}

.portal-container {
    width: 100%;
    max-width: 1100px; /* Wide format for data grids */
    margin: 0 auto;
    background: var(--card-bg);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    color: var(--text-color);
}

    .portal-container h2 {
        color: var(--primary-color);
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 24px;
        border-bottom: 1px solid #e1e8ed;
        padding-bottom: 10px;
    }

/* --- Table Wrappers --- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 30px;
}

/* --- General Table Styling (Modern Table Class) --- */
.modern-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    table-layout: fixed; /* Crucial for keeping columns locked */
}

    .modern-table th {
        background-color: var(--table-header);
        color: white;
        padding: 12px;
        text-align: left;
        cursor: pointer;
        border: 1px solid var(--border-color);
        white-space: nowrap;
        position: relative;
        transition: background-color 0.2s;
    }

        .modern-table th:hover {
            background-color: var(--table-header-hover);
        }

    .modern-table td {
        padding: 12px 10px;
        border: 1px solid #eee;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text-color);
    }

        .modern-table td[colspan] {
            white-space: normal;
            text-align: center;
            color: var(--text-muted);
            padding: 20px;
        }

    .modern-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .modern-table tr.selected {
        background-color: #eef6ff;
        outline: 2px solid var(--table-header);
    }

    .modern-table tr:hover:not(:first-child) {
        background-color: #f1f8ff;
        cursor: pointer;
    }

/* --- Specific Table: Client Profile --- */
.client-profile-table td:first-child {
    width: 150px !important;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    background-color: #f8fafc;
}

.client-profile-table td:last-child {
    width: auto !important;
    color: var(--primary-color);
    white-space: normal;
    word-wrap: break-word;
}

/* --- Specific Table: Patient Profiles (Top Grid) --- */
#patientTable .col-id {
    width: 6ch;
}

#patientTable .col-species {
    width: 15ch;
}

/* --- Tab Interface Styles --- */
.tab-interface {
    margin-top: 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.tab-headers {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.tab-link {
    padding: 14px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-muted);
    border-right: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

    .tab-link:hover {
        background-color: #eef6ff;
        color: var(--primary-color);
    }

    .tab-link.active {
        background: #fff;
        color: var(--primary-color);
        border-top: 3px solid var(--table-header);
        padding-top: 11px; /* Compensate for the 3px border to prevent jumping */
    }

.tab-pane {
    display: none;
    padding: 20px;
    background: #fff;
    min-height: 250px;
}

    .tab-pane.active {
        display: block;
    }

/* --- TAB SYSTEM COLUMN LOCKING --- */
/* Reminders Tab: Column 1 (Date), Column 3 (Declined) */
#remindersTable th:nth-child(1) {
    width: 120px !important;
}

#remindersTable th:nth-child(3) {
    width: 120px !important;
    text-align: center;
}

#remindersTable td:nth-child(3) {
    text-align: center;
}

#remindersTable th:nth-child(2) {
    width: auto !important;
}

/* Visits Tab: Col 1 (Date), Col 3 (Status), Col 4 (Clinician) */
#visitsTable th:nth-child(1) {
    width: 120px !important;
}

#visitsTable th:nth-child(3) {
    width: 120px !important;
}

#visitsTable th:nth-child(4) {
    width: 160px !important;
}

#visitsTable th:nth-child(2) {
    width: auto !important;
}

/* Vaccinations Tab: Col 1 (Due), Col 2 (Given) */
#vaccinesTable th:nth-child(1) {
    width: 120px !important;
}

#vaccinesTable th:nth-child(2) {
    width: 120px !important;
}

#vaccinesTable th:nth-child(3) {
    width: auto !important;
}

/* --- Responsive Mobile Styles --- */
@media screen and (max-width: 768px) {
    .portal-container {
        padding: 20px 15px;
    }

    .tab-link {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    /* Allow tables to scroll on narrow screens */
    .modern-table {
        table-layout: auto;
        min-width: 600px;
    }
}