/* ================= GLOBAL ================= */

* {
    box-sizing: border-box;
}

/* Shared responsive baseline for pages that load this stylesheet. */
html {
    min-width: 0;
}

body {
    min-width: 0;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

@media screen and (max-width: 900px) {
    .app-topbar {
        margin-left: 220px;
    }

    .sidebar {
        width: 220px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .main,
    .main-content {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
        padding: 20px !important;
    }

    .row,
    .header-row {
        flex-wrap: wrap;
    }

    .header-bar {
        gap: 12px;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 640px) {
    html,
    body {
        overflow-x: hidden;
    }

    .app-topbar {
        position: static;
        flex-wrap: wrap;
        margin-left: 0;
        padding: 10px 14px;
    }

    .sidebar {
        position: static !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 12px !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .sidebar .logo,
    .sidebar .logo-section img {
        width: 54px !important;
        max-width: 54px !important;
        margin: 0 8px 0 0 !important;
    }

    .sidebar a,
    .sidebar .sidebar-disabled {
        flex: 1 1 140px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        text-align: center;
        white-space: normal;
    }

    .main,
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        padding: 14px !important;
    }

    .form-card {
        padding: 14px;
    }

    .row,
    .row.case-row1,
    .row.case-row2,
    .row.case-row3,
    .row.case-row4 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    .row.case-row1 .field,
    .row.case-row2 .field,
    .row.case-row3 .field,
    .row.case-row4 .field,
    .row.case-row1 .submit-column {
        grid-column: 1 / -1 !important;
    }

    .header-bar,
    .header-row {
        align-items: stretch;
    }

    .header-bar h1,
    .header-row h1 {
        width: 100%;
        font-size: clamp(20px, 7vw, 30px);
    }

    .header-bar button,
    .header-row button,
    .pae-form-actions,
    .pae-form-actions button,
    .row .submit-btn,
    #submitBtn {
        width: 100%;
        min-width: 0;
    }

    .pae-form-actions {
        margin-left: 0;
        flex-wrap: wrap;
    }
}

@media screen {
    .footer-note {
        display: none !important;
    }
}



html, body {
    overflow-x: hidden;
}



body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #cfcfcf;
}
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    margin-left: 260px;
    padding: 10px 24px;
    background: #3f5f93;
    border-bottom: 1px solid #2f4772;
    color: #fff;
}
.app-topbar-title {
    font-size: 15px;
    font-weight: 700;
}
.app-topbar-user {
    flex: 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
}

/* ================= SIDEBAR ================= */

 br {
    display: block;
    margin-top: -4px;   /* 🔥 pulls "Investigations" upward */
}


.logo-section {
    text-align: center;
}


/* ================= MAIN ================= */

.disabled-label {
    color: #888;         /* ✅ grey text */
    opacity: 0.7;        /* ✅ slightly muted */
}


/* ✅ LIMIT FORM WIDTH (MAIN FIX) */
.form-container {
    /*max-width: 1100px;  slightly tighter = better visual grouping */
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-x: hidden;
    max-width: calc(100% - 0px); /* ensure full available width */
}


/* ================= FORM ================= */
.form-card {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

/* ================= FIELDS ================= */

.field {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}


.field label {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
    text-align: left;        /* ✅ forces label left */
    width: 100%;
}

.field input,
.field select {
    height: 36px;
    width: 100%;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}


.row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.row.case-row1 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.row.case-row1 .field:nth-child(1) { grid-column: 1 / span 2; }
.row.case-row1 .field:nth-child(2) { grid-column: 3 / span 2; }
.row.case-row1 .field:nth-child(3) { grid-column: 5 / span 1; }
.row.case-row1 .field:nth-child(4) { grid-column: 8 / span 1; }
.row.case-row1 .submit-column { grid-column: 8 / span 1; }

.row.case-row2 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.row.case-row2 .field:nth-child(1) { grid-column: span 2; }
.row.case-row2 .field:nth-child(2) { grid-column: span 2; }

.row.case-row1 .field,
.row.case-row2 .field,
.row.case-row3 .field {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

.row.case-row3 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.row.case-row3 .field:nth-child(1) { grid-column: span 2; }
.row.case-row3 .field:nth-child(2) { grid-column: span 1; }
.row.case-row3 .field:nth-child(3) { grid-column: span 3; }

.row.case-row4 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.row.case-row4 .field:nth-child(1) { grid-column: span 3; }

.row.case-row2 .field label {
    white-space: nowrap;
}

.row.case-row1 .field select,
.row.case-row2 .field select,
.row.case-row3 .field select,
.row.case-row3 .field input,
.row.case-row4 .field input {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: block;
}

.form-container .row + .row {
    margin-top: 25px;
}


.grid-9 { grid-template-columns: repeat(9, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-1 { grid-template-columns: 1fr; }


.header-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.header-row h1 {
    margin: 0;
    line-height: 1.2;
    padding-top: 2px;
}

.row .submit-btn {
    width: auto;
    min-width: 150px;
    background: #2e8b57;
    color: #fff;
    border: 1px solid #246b43;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

#submitBtn {
    background: #2e8b57;
    color: #fff;
    border: 1px solid #246b43;
    align-self: start;
    margin-top: 0;
    justify-self: end;
    width: 150px;
    min-width: 150px;
    height: 36px;
    padding: 0 16px;
    line-height: 1;
    grid-column: 8 / span 1;
}

.pae-form-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: auto;
    padding-top: 0;
}

.pae-form-actions button,
.row .submit-btn {
    height: 36px;
    min-width: 150px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.pae-form-actions button {
    background: #2e8b57;
    color: #000;
    border: 1px solid #246b43;
    align-self: flex-start;
    margin-top: 0;
    vertical-align: top;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pae-form-actions button:hover,
#submitBtn:hover {
    filter: brightness(1.04);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    cursor: pointer;
}

/* ================= CLIENT ROW ================= */


.row.grid-1 {
    display: grid;
    grid-template-columns: 1fr;
}


.row .field {
    display: flex;
    flex-direction: column;
}


.row0 {
    grid-template-columns:
        2fr   /* Attorney */
        2fr   /* GAP */
        1fr;   /* Case # */     
}

.row01 {
    grid-template-columns:
        2fr   /* Jurisdiction */
        1.4fr /* Charge level */
        2fr;  /* Fill */
}

/* ✅ ROW 1 */
.row1 {
    grid-template-columns:
        3fr   /* Name */
        1fr   /* Gap */
        1.2fr /* DOB */
        0.3fr /* Gap */
        0.8fr /* Age */
        2fr   /* Gap */
        1.2fr;/* SSN */
}



/* ✅ ROW 2 */
.row2 {
    grid-template-columns:
        0.8fr /* Height */
        0.8fr /* Weight */
        0.6fr /* Gap */
        1fr   /* Eye */
        1fr   /* Hair */
        1fr   /* Gender */
        1.3fr /* Race */
        1.2fr /* Hand */
        1.2fr /* Gap */
        1.2fr;/* Military */
}



/* ✅ ROW 3 */
.row3 {
    display: grid;
    grid-template-columns:
        0.8fr
        0.8fr
        0.6fr
        1fr
        1fr
        1fr
        1.3fr
        1.2fr
        1.2fr
        1.2fr;
    gap: 15px;
}



.row4 {
    display: grid;
    grid-template-columns:
        0.8fr
        0.8fr
        0.6fr
        1fr
        1fr
        1fr
        1.3fr
        1.2fr
        1.2fr
        1.2fr;
    gap: 15px;
}


.section-header {
    display: grid;

    grid-template-columns:
        2fr   /* ✅ matches first input column */
        auto; /* button */

    align-items: end;

    max-width: 1100px;
    margin-bottom: 6px;
}


.section-header .add-btn {
    justify-self: end;   /* ✅ locks to right edge of first column */
}


/* ================= JURISDICTION FORM ================= */

.row-jurisdiction {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}


.row-jurisdiction .left {
    display: flex;
    flex-direction: column;
}


.row-jurisdiction input {
    width: 350px;
}


.row-jurisdiction .submit-btn {
    margin-top: 18px;
}

/* ================= BUTTON ================= */
.submit-btn {
    background: #27457a;
    color: white;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    height: 36px;
    padding: 0 14px;
    white-space: nowrap;
}


.submit-btn:hover {
    background: #1e3560;
}

/* ================= TABLE BASE ================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    overflow-x: auto;   /* ✅ allows table scroll only if needed */
}

/* ================= BASE TABLE STYLE ================= */
table th {
    background: #e6e6e6;
    padding: 8px;
    font-size: 13px;
    border-bottom: 2px solid #bbb;
    text-align: left;
}

table td {
    padding: 10px;
    font-size: 13px;
}

table tbody tr:nth-child(even) {
    background: #f2f2f2;
}

table tbody tr:hover {
    background: #eaf1fb;
}

/* ================= ✅ JURISDICTION TABLE ================= */
.jurisdiction-page table thead,
.jurisdiction-page table tbody {
    display: block;
    width: 100%;
}

.jurisdiction-page table thead tr,
.jurisdiction-page table tbody tr {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.jurisdiction-page .name,
.jurisdiction-page th:first-child {
    flex: 1;
}

.jurisdiction-page .actions,
.jurisdiction-page th:last-child {
    width: 200px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* ================= ✅ FACILITY + INVESTIGATOR TABLE ================= */
.facility-page table,
.investigator-page table {
    display: table;
    width: 100%;
}

.facility-page table thead,
.investigator-page table thead {
    display: table-header-group;
}

.facility-page table tbody,
.investigator-page table tbody {
    display: table-row-group;
}

.facility-page table tr,
.investigator-page table tr {
    display: table-row;
}

.facility-page table th,
.facility-page table td,
.investigator-page table th,
.investigator-page table td {
    display: table-cell;
    vertical-align: middle;
}
.investigator-row {
    display: grid;              /* ✅ REQUIRED */
    grid-template-columns:
        1.5fr   /* name */
        1fr     /* DPSST */
        1.8fr   /* Email */
        1.2fr   /* Phone */
        1fr     /* Level */
        1fr     /* Case manager */
        1fr     /* Password */
        auto;   /* Button */

    gap: 10px;
    width: 100%;
}

/* Facility form + table alignment */
.facility-page .row.grid-6 {
    display: grid;
    grid-template-columns:
        22%   /* Name */
        22%   /* Address */
        22%   /* Jail Roster */
        10%   /* Pass Through */
        10%   /* Plug Ins */
        8%    /* Internet */
        6%;   /* Button */
    gap: 8px;
    align-items: end;
}

.facility-page .field {
    min-width: 0;
}

.facility-page .field input,
.facility-page .field select {
    width: 100%;
}

.facility-page table {
    table-layout: fixed;
    width: 100%;
}

.facility-page th:nth-child(1),
.facility-page td:nth-child(1) { width: 21%; }

.facility-page th:nth-child(2),
.facility-page td:nth-child(2) { width: 20%;}

.facility-page th:nth-child(3),
.facility-page td:nth-child(3) { width: 20%; }

.facility-page th:nth-child(4),
.facility-page td:nth-child(4) { width: 9.5%; }

.facility-page th:nth-child(5),
.facility-page td:nth-child(5) { width: 9.5%; }

.facility-page th:nth-child(6),
.facility-page td:nth-child(6) { width: 9.75%; }

.facility-page th:nth-child(7),
.facility-page td:nth-child(7) { width: 6%; }


.facility-row {
    display: grid;
    grid-template-columns:
        21%
        21%
        21%
        9%
        9%
        9%
        4%;
    gap: 12px;
    align-items: end;
}

/* ================= ACTION BUTTONS ================= */


.actions {
    display: flex;
    align-items: center;
    gap: 6px;
}


.actions button {
    color: white;
    border: 1px solid transparent;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
}


.actions button:hover {
    background: #a80000;
}

/* ✅ EDIT = neutral gray */
.actions .btn-edit {
    background-color: #6c757d;
    color: white;
}

.actions .btn-edit:hover {
    background-color: #5a6268;
}

/* ✅ DELETE = keep red */
.actions .btn-delete {
    background-color: #dc3545;
}

.actions .btn-delete:hover {
    background-color: #c82333;
}


.actions .btn-save {
    background-color: #27457a; /* matches your main blue */
    color: white;
}

.actions .btn-save:hover {
    background-color: #1e3560;
}


.actions .pw-field {
    margin-left: 12px;   /* ✅ creates space from Cancel button */
}


/* ================= ADD / DELETE ================= */
.add-btn {
    background: #4CAF50;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    border: none;
    width: 120px;
    margin: 8px 0;
}


.add-row {
    display: flex;
    justify-content: flex-start; /* ✅ left align */
}


.delete-btn {
    background: #c0392b;
    color: white;

    border: none;
    border-radius: 4px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    align-self: center;   /* ✅ THIS FIXES YOUR ISSUE */

    cursor: pointer;
}

.delete-btn:hover {
    background: #a93226;
}

/* ================= PHOTO PANEL ================= */

.photo-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 2in;

    margin-left: 30px; /* ✅ moves it LEFT ~100px */
}


.photo-panel button {
    width: 100%;  /* now matches panel perfectly */
    margin-top: 10px; /* tweak: 20–35px depending on your header */
    margin-bottom: 0px;
}


.photo-box {
    width: 2in;
    height: 2in;

    border: 2px dashed #bbb;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fafafa;
    color: #666;
    font-size: 13px;

    text-align: center;

    transition: all 0.2s ease;
}


.photo-box:hover {
    border-color: #27457a;
    background: #f0f4fb;
}


.photo-box.dragover {
    border-color: #27457a;
    background: #eaf1fb;
}



.photo-box.disabled {
    background: #e0e0e0;
    border-color: #ccc;
    color: #999;
    pointer-events: none; /* ✅ prevents drag/drop */
    opacity: 0.7;
}

.photo-panel input[type="file"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}



/* ================= CLIENT PHONE SECTION ================= */

.phone-row {
    display: grid;
    grid-template-columns:
        2fr
        3fr
        1fr
        auto;
    gap: 10px;
    align-items: end;
}



.phone-row input,
.phone-row select {
    height: 36px;
}



.add-mini-btn {
    background: #4CAF50;
    color: white;

    border: none;
    border-radius: 4px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;
}


.add-mini-btn:hover {
    background: #3e9442;
}


input:invalid {
    border: 2px solid red;
}


/* ================= ADD NEW CASE ================= */
.header-row {
    display: flex;
    justify-content: space-between; /* puts them on same line with space */
    max-width: 1100px; /* adjust to match your form width */
}


.disco-header {
    margin-left: 420px; /* adjust this value until it lines up with Create */
}




.packet-row {
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr 1fr;
    gap: 20px;
}


select:invalid {
    border: 2px solid red ;
}


.field.disabled {
    opacity: 0.5;
}

.field.disabled label {
    color: #777;
}

.field.disabled input,
.field.disabled select {
    background-color: #f5f5f5;
    cursor: not-allowed;
}


.create-btn {
    position: relative;
    right: auto;
    top: auto;
    z-index: 1;
    pointer-events: auto;
    min-width: 140px;
}



#special_instructions {
    width: 100%;
    min-height: 120px;

    height: auto;          /* ✅ allows expansion */
    overflow: hidden;      /* ✅ no scroll */
    resize: none;
}


#budget-field.hidden {
    display: none ;
}


/* ✅ OPEN FOLDER LINK */
a {
    color: #6a0dad;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


.hidden-instructions {
    display: none;
}

/* ================= BACK SIDEBAR ================= */


.back-btn:hover {
    background: rgba(255,255,255,0.3);
}

/* ================= CASE ASSIGNMENT PREVIEW ================= */
.email-title {
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.email-title label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.email-title input[type="checkbox"] {
    transform: scale(1.2);
}


/* ================= SIDEBAR (FINAL CLEAN VERSION) ================= */

/* ✅ MATCH PAGE TITLE TO BRAND */
.page-title {
    font-size: 26px;          /* 🔥 matches visual scale */
    font-weight: 600;         /* matches "Hart 2 Hart" */
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 2px solid #bbb;
    padding-bottom: 8px;
    position: fixed;
    left: 0;
    top: 0;
}



/* MAIN CONTENT */
.main {
    margin-left: 260px;
    padding: 25px;
    width: calc(100% - 260px);
}


/* PAGE TITLE */
.page-title {
    margin-top: 0;
}

/* REMOVE STRAY LINKS */
body > a {
    display: none;
}



/* ✅ FORCE ALL MAIN CONTENT RIGHT OF SIDEBAR */
body {
    display: block;
}

/* ✅ ENSURE EVERYTHING AFTER SIDEBAR SHIFTS RIGHT */

/* ✅ FIX TITLE POSITION (THIS IS YOUR MAIN PROBLEM) */
.page-title {
    margin-left: 260px;
    padding-top: 10px;
    margin-top: 0;
}

/* ================= SIDEBAR (MASTER STYLE) ================= */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;

    width: 260px;
    height: 100vh;

    background: #3b5687;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.sidebar-save-indicator {
    position: fixed;
    left: 16px;
    bottom: 14px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 228px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    background: #f5f7fa;
    color: #344155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.sidebar-save-indicator.saving,
.sidebar-save-indicator.saved,
.sidebar-save-indicator.error {
    opacity: 1;
}

.sidebar-save-indicator.saving {
    background: #ecf5ff;
    border-color: #9ac5f5;
    color: #1f5f97;
}

.sidebar-save-indicator.saved {
    background: #ecf9f0;
    border-color: #92d2a1;
    color: #1f6f3d;
}

.sidebar-save-indicator.error {
    background: #fff0f0;
    border-color: #e7a9a9;
    color: #9d2c2c;
}

.case-menu-toggle,
.case-sidebar-backdrop {
    display: none;
}

@media screen and (max-width: 760px) {
    .sidebar-save-indicator {
        display: none !important;
    }
}

/* LOGO */
.sidebar img {
    width: 75px;
    display: block;
    margin: 12px auto 8px auto;
}

/* ================= GLOBAL PRINT BUTTON STANDARD ================= */
.print-btn {
    position: relative !important;
    top: 40px !important;
    right: auto !important;
    left: -120px !important;
    z-index: auto !important;
    background: #fff3cd !important;
    color: #000 !important;
    border: 1px solid #ffeeba !important;
    border-radius: 4px !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.print-btn:hover {
    background: #ffe8a1 !important;
}

.email-btn {
    position: relative !important;
    top: 40px !important;
    left: -100px !important;
}
.sidebar .brand-title {
    font-size: 17px;
    font-weight: 600;
    color: white;
    margin: 4px 0 2px 0;
}

/* SUBTITLE */
.sidebar .brand-sub {
    font-size: 12px;
    color: white;
    margin-bottom: 10px;
}

/* DIVIDER */
.sidebar .divider {
    border: none;
    border-top: 1px solid white;
    width: 80%;
    margin: 12px auto;
}

/* MENU */
.sidebar a {
    display: block;
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    padding: 12px 0;
    text-decoration: none;
}

.sidebar a.sidebar-active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.sidebar .sidebar-disabled {
    display: block;
    padding: 12px 0;
    color: #999;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    cursor: not-allowed;
}

/* HOVER */
.sidebar a:hover {
    background: #4a6594;
}

/* SIDEBAR GROUPS */
.sidebar-group {
    margin: 0;
    padding: 0;
}

.sidebar-group summary {
    color: #999;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    padding: 12px 0;
    cursor: pointer;
    user-select: none;
}

.sidebar-group summary:hover {
    background: #4a6594;
}

/* Sections with data = bright white, without data = gray */
.sidebar-group:not(.sidebar-section-has-data) summary {
    color: #999 !important;
}

.sidebar-group.sidebar-section-has-data summary {
    color: #fff !important;
}

.sidebar-group.sidebar-section-enabled summary {
    color: #fff !important;
}

.sidebar-group.sidebar-section-enabled:not(.sidebar-section-has-data) summary {
    color: #fff !important;
}

#client-worksheet-group > summary {
    position: relative;
}

#client-worksheet-group > summary .sidebar-client-worksheet-notice {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    padding: 0;
    transform: translateY(-50%);
    border: 2px solid #c25b00;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

/* Active sidebar items = bright white */
.sidebar a.sidebar-active,
.sidebar .sidebar-submenu a.sidebar-active {
    color: #fff !important;
}

/* Submenu items: gray by default, white if parent has data */
.sidebar-group:not(.sidebar-section-has-data) .sidebar-submenu a {
    color: #999 !important;
}

.sidebar-group:not(.sidebar-section-has-data) .sidebar-submenu a.sidebar-active {
    color: #fff !important;
}

.sidebar-group.sidebar-section-has-data .sidebar-submenu a {
    color: #fff !important;
}

.sidebar-group.sidebar-section-has-data .sidebar-submenu a:hover {
    color: #fff !important;
}

.sidebar-group.sidebar-section-has-data .sidebar-submenu a.sidebar-active {
    color: #fff !important;
}

/* Printed forms: items without data are gray, items with data are bright white */
.sidebar-group.sidebar-section-has-data .sidebar-submenu a:not(.form-has-data) {
    color: #999 !important;
}

.sidebar-group.sidebar-section-has-data .sidebar-submenu a.form-has-data {
    color: #fff !important;
}

/* BLANK REPORTS items active = bright white */
.sidebar-submenu a.blank-report-item.sidebar-active {
    color: #fff !important;
}

/* SIDEBAR SUBMENU */
.sidebar-submenu {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.sidebar-submenu a {
    color: white;
    font-weight: normal;
    font-size: 14px;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: center;
}

.sidebar-submenu a:hover {
    background: #4a6594;
}

/* BLANK REPORTS SUBMENU - Items without data appear gray */
#blank-reports-group .sidebar-submenu a {
    color: #999 !important;
}

#blank-reports-group .sidebar-submenu a:hover {
    color: white !important;
    background: #4a6594 !important;
}



/* ================= CASE TRACKER ================= */

.dataTables_wrapper .dataTables_filter {
    float: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
}

.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1f2937;
}

.dataTables_wrapper .dataTables_filter input {
    width: 280px;
    height: 38px;
    margin-left: 0;
    padding: 6px 10px;
    border: 2px solid #3b5687;
    border-radius: 5px;
    background: #fff;
    color: #111827;
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.15);
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: 3px solid rgba(59, 86, 135, 0.25);
    outline-offset: 1px;
    border-color: #1f3d70;
}

table.dataTable {
    width: 100% !important;
    table-layout: auto;
}


#caseTable th:nth-child(1),
#caseTable td:nth-child(1) {
    width: 12%;   /* Attorney */
}

#caseTable th:nth-child(2),
#caseTable td:nth-child(2) {
    width: 10%;   /* Client */
}

#caseTable th:nth-child(3),
#caseTable td:nth-child(3) {
    width: 12%;   /* Case # */
}

#caseTable th:nth-child(4),
#caseTable td:nth-child(4) {
    width: 15%;   /* Jurisdiction */
}

#caseTable th:nth-child(5),
#caseTable td:nth-child(5) {
    width: 22%;   /* Next hearing info (bigger) */
}

#caseTable th:nth-child(6),
#caseTable td:nth-child(6) {
    width: 12%;
}

#caseTable th:nth-child(7),
#caseTable td:nth-child(7) {
    width: 12%;
}

#caseTable th:nth-child(8),
#caseTable td:nth-child(8) {
    width: 8%;
}

#caseTable th:nth-child(9),
#caseTable td:nth-child(9) {
    width: 8%;
}

#caseTable th:nth-child(10),
#caseTable td:nth-child(10) {
    width: 10%;
}


#caseTable td {
    white-space: nowrap;   /* keep numbers clean */
}

#caseTable td:nth-child(5) {
    white-space: normal;   /* allow hearing info to wrap */
}

/* ================= HEARING EDIT UI ================= */

.edit-mode input,
.edit-mode select {
    margin-right: 5px;
}

/* ================= BUTTONS ================= */

/* ✅ EDIT BUTTON (secondary) */
.edit-btn {
    margin-left: 10px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
}

.edit-btn:hover {
    background: #e0e0e0;
}

/* ✅ SAVE BUTTON (primary) */
.save-hearing {
    padding: 5px 10px;
    font-size: 12px;
    background: #3b5687;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-hearing:hover {
    background: #2f456e;
}

/* ✅ OPTIONAL CANCEL */
.cancel-edit {
    padding: 5px 10px;
    font-size: 12px;
    background: #888;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cancel-edit:hover {
    background: #666;
}



.exp-red {
    background: #ffd6d6;
    color: #a70000;
    padding: 2px 6px;
    border-radius: 4px;
}


.exp-orange {
    color: orange;
    font-weight: bold;
}


.case-row {
    cursor: pointer;
}

.case-row:hover {
    background: #eef3ff;
}


#caseTable tbody tr:hover {
    background: #eef3ff;
}


.hearing-cell {
    display: flex;
    align-items: center;
    width: 100%;
}

.edit-btn {
    margin-left: auto;
}

.hearing-edit input,
.hearing-edit select {
    height: 26px;
}

/* ✅ applies to BOTH modes (THIS FIXES YOUR ISSUE) */
.hearing-row {
    display: flex;
    align-items: center;
    width: 100%;
}

/* ✅ text takes all available space */
.hearing-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✅ push buttons right */
.hearing-row button {
    margin-left: auto;
}

/* ✅ for grouped buttons (save + cancel) */
.hearing-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}


/*---------CASE TRACKER-------------*/

.hearing-text {
    flex: 1;
    white-space: nowrap;
}

.edit-btn {
    margin-left: auto;
}

.hearing-actions {
    margin-left: auto;
    display: flex;
    gap: 5px;
}


.hearing-edit input,
.hearing-edit button {
    margin-right: 6px;
}



.case-link {
    color: #3b5687;
    font-weight: bold;
    cursor: pointer;
}

.case-link:hover {
    text-decoration: underline;
}



/* ✅ Custody highlight */
.row-custody {
    background-color: #fff3cd !important;
    border-left: 5px solid #ffc107;
}


/* Optional stronger hover */
.row-custody:hover {
    background-color: #ffe69c !important;
}



#caseTable tbody tr.row-custody {
    background-color: #fff176 !important;
    border-left: 4px solid #fbc02d;
}

/* Final small-screen layout guardrails. Keep wide data usable by scrolling the
   data surface instead of allowing it to push the whole page off-screen. */
@media screen and (max-width: 760px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: auto !important;
    }

    .sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .sidebar .logo-block {
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .sidebar .logo-block .divider {
        display: none;
    }

    .sidebar a,
    .sidebar .sidebar-disabled {
        flex: 1 1 135px !important;
        width: auto !important;
        min-height: 36px;
        padding: 8px 6px !important;
        white-space: normal !important;
    }

    .main,
    .main-content,
    .form-container {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding: 12px !important;
    }

    .app-topbar {
        position: static !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .header-bar,
    .header-row,
    .action-row,
    .row {
        width: 100% !important;
        max-width: 100% !important;
    }

    .header-bar,
    .header-row {
        flex-wrap: wrap !important;
    }

    .dataTables_wrapper,
    div.dataTables_wrapper,
    .table-responsive,
    .table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #caseTable {
        min-width: 900px;
    }

    input,
    select,
    textarea,
    button {
        min-width: 0;
    }
}





/* ================= TABLE SPACING ================= */

#caseTable {
    border-collapse: separate;
    border-spacing: 0 6px; /* vertical spacing between rows ✅ */
}

/* ✅ cells */
#caseTable th,
#caseTable td {
    padding: 10px 16px !important;
    white-space: nowrap;
    vertical-align: middle;
}

/* ✅ header styling */
#caseTable th {
    font-weight: 600;
    text-align: left;
}

/* ================= COLUMN WIDTH CONTROL ================= */

/* Attorney */
#caseTable th:nth-child(1),
#caseTable td:nth-child(1) {
    width: 300px;
}

/* Client */
#caseTable th:nth-child(2),
#caseTable td:nth-child(2) {
    width: 300px;
}

/* Case # */
#caseTable th:nth-child(3),
#caseTable td:nth-child(3) {
    width: 100px;
}

/* Jurisdiction */
#caseTable th:nth-child(4),
#caseTable td:nth-child(4) {
    width: 250px;
}

/* Hearing */
#caseTable th:nth-child(5),
#caseTable td:nth-child(5) {
    width: 400px;
}

/* Investigator */
#caseTable th:nth-child(6),
#caseTable td:nth-child(6) {
    width: 200px;
}

/* Case Manager */
#caseTable th:nth-child(7),
#caseTable td:nth-child(7) {
    width: 200px;
}

/* PAE */
#caseTable th:nth-child(8),
#caseTable td:nth-child(8) {
    width: 220px;
}

/* Budget */
#caseTable th:nth-child(9),
#caseTable td:nth-child(9) {
    width: 60px;
    text-align: center;
}

/* Actions */
#caseTable th:nth-child(10),
#caseTable td:nth-child(10) {
    width: 60px;
    text-align: center;
}


#caseTable tbody tr.row-custody td {
    background-color: #fff176 !important;
}


/* ================= HEARING CELL CLEANUP ================= */

.hearing-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hearing-actions {
    display: flex;
    gap: 8px;
}


/* ================= CLICKABLE CASE ================= */

.case-link {
    color: #3b5687;
    font-weight: bold;
    cursor: pointer;
}

.case-link:hover {
    text-decoration: underline;
}


/* ================= CUSTODY ROW ================= */

#caseTable tbody tr.row-custody {
    background-color: #fff176 !important;
    border-left: 4px solid #fbc02d;
}


/* ================= ROW HOVER ================= */

#caseTable tbody tr:hover {
    background-color: #f5f8ff;
}



/* ================= TABLE HEADER ================= */


/* ✅ Safe header styling for DataTables */

/* ✅ Safe header styling for DataTables */
table.dataTable thead th {
    font-size: 18px;
    font-weight: 700;
    color: #3b5687;
    background-color: #f5f7fa;
}


/* ✅ KEEP DataTables sorting arrows */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    top: 50%;
    transform: translateY(-50%);
}


/*----------------ecourts--------*/

.court-link-btn {
    padding: 5px 10px;
    font-size: 12px;
    background: #2c6fbb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.court-link-btn:hover {
    background: #245a97;
}


.external-links {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.court-link-btn,
.ecourts-btn {
    padding: 5px 10px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
}

.ecourts-btn {
    display: inline-block;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    line-height: 0;
}

.ecourts-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ecourts-btn:hover {
    background: transparent;
}

/* ✅ header layout */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.case-tracker-title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


#ecourts-global-btn {
    padding: 10px 18px;      /* bigger like Create Case */
    font-size: 14px;         /* slightly larger text */
    font-weight: 600;        /* bold like primary buttons */
    background: #1b5e20;     /* DarkGreen */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    min-width: 140px;
    text-align: center;
}


/* hover */
#ecourts-global-btn:hover {
    background: #1e3560;
}



/* ✅ past hearing = gray ONLY that cell */
#caseTable td.hearing-past {
    background-color: #e0e0e0 !important;
    color: #777;
}

/* optional hover tweak */
#caseTable td.hearing-past:hover {
    background-color: #d6d6d6 !important;
}


.fta-btn {
    padding: 6px 10px;
    font-size: 12px;
    background: #f39c12;   /* orange */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 6px;
}

.fta-btn:hover {
    background: #d68910;
}


#caseTable tbody tr.row-custody {
    background-color: #fff176;
}


/* ✅ highlight all cells EXCEPT last column */
#caseTable tbody tr.row-custody td:not(:last-child) {
    background-color: #fff176 !important;
}

/* ✅ keep action column clean */
#caseTable tbody tr.row-custody td:last-child {
    background-color: white !important;
}



/* ✅ FTA ROW = ORANGE (same feel as button) */
#caseTable tbody tr.row-fta td:not(:last-child) {
    background-color: #f5a623 !important;  /* orange */
    color: #000;
}

/* ✅ Keep action column clean */
#caseTable tbody tr.row-fta td:last-child {
    background-color: white !important;
}


/*------ADDRESS-------*/
.address-input {
    width: 350px;              /* ✅ wider (adjust 250–320 as needed) */

    /* ✅ LOCK HEIGHT */
    height: 60px;
    min-height: 60px;
    max-height: 60px;

    line-height: 1.3;
    padding: 6px;

    /* ✅ REMOVE ALL BEHAVIOR */
    resize: none;
    overflow: hidden;

    display: block;
    box-sizing: border-box;
}


/* ✅ Toggle container */
/* ✅ Layout */
.status-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ✅ Labels */
.label-bad {
    font-size: 12px;
    color: #c0392b;
    font-weight: bold;
}

.label-good {
    font-size: 12px;
    color: #2e7d32;
    font-weight: bold;
}

/* ✅ Toggle container */
.status-toggle {
    display: inline-flex;   /* ✅ key fix */
    align-items: center;
    gap: 6px;
}


.status-text {
    font-size: 12px;
    font-weight: bold;
    color: #c0392b; /* default = Bad */
}


/* TOGGLE SIZE (small now) */
.confirm-box {
  display: flex;
  align-items: center;
  justify-content: center;
}


.confirm-box input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}


.confirm-box span {
  margin-left: 4px;
  font-size: 14px;
  color: green;
}

#address-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#address-container .dynamic-row {
    align-items: center;   /* ✅ ONLY address rows centered */
}


#address-container .big-checkbox {
    align-items: center;
}


.add-mini-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}


/* DEFAULT (GRAY) */
.big-checkbox span {
    width: 36px;
    height: 36px;
    border: 2px solid #aaa;
    border-radius: 4px;
    background: #e0e0e0;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* RED */
.big-checkbox.red span {
    background: #d64545;
    border-color: #b03a3a;
}
.big-checkbox.red span::after {
    content: "✖";
    color: white;
    font-size: 18px;
}

/* GREEN */
.big-checkbox.green span {
    background: #4CAF50;
    border-color: #3e9442;
}
.big-checkbox.green span::after {
    content: "✔";
    color: white;
    font-size: 18px;
}


/* ✅ GREEN = Good */
.dynamic-row:has(.big-checkbox.green) textarea,
.dynamic-row:has(.big-checkbox.green) input {
    border: 2px solid #2e7d32;
    background: #f3faf3;
}

/* ✅ RED = Bad */
.dynamic-row:has(.big-checkbox.red) textarea,
.dynamic-row:has(.big-checkbox.red) input {
    border: 2px solid #c0392b;
    background: #fdecea;
}

/* ✅ GRAY = Unconfirmed */
.dynamic-row:has(.big-checkbox[data-state="0"]) textarea,
.dynamic-row:has(.big-checkbox[data-state="0"]) input {
    border: 1px solid #ccc;
    background: #fff;
}


/* ✅ GRAY = unconfirmed */
.dynamic-row:has(.big-checkbox[data-state="0"]) textarea {
    border: 1px solid #ccc;
    background: #fff;
}


.big-checkbox.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media screen and (max-width: 760px) {
    .case-menu-toggle {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1300;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 4px;
        background: #3b5687;
        color: #fff;
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .case-sidebar-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: block;
        background: rgba(0, 0, 0, 0.45);
    }

    .sidebar {
        z-index: 1200;
        width: min(82vw, 300px);
        max-width: 100%;
        transform: translateX(-100%);
        transition: transform 180ms ease;
    }

    .sidebar.sidebar-mobile-open {
        transform: translateX(0);
    }

    body.case-menu-open {
        overflow: hidden;
    }

    .main,
    .page-title {
        width: 100%;
        margin-left: 0;
    }

    .main {
        padding: 64px 12px 16px;
    }
}

@media print {
    select {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: none !important;
        padding-right: 0 !important;
    }

    select::-ms-expand {
        display: none !important;
    }

    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"] {
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: none !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="month"]::-webkit-calendar-picker-indicator {
        display: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}