body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #efefef;
    color: #000;
}

.topbar {
    height: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid #000;
    padding: 0 8px;
    background: #f8f8f8;
}

.btn, button {
    border: 1px solid #777;
    background: #e8f2fb;
    padding: 12px 18px;
    font-size: 18px;
    text-decoration: none;
    color: #000;
    border-radius: 4px;
    cursor: pointer;
}

.btn.red {
    background: #d90000;
    color: #fff;
    font-weight: bold;
}

.search {
    display: flex;
    gap: 8px;
    flex: 1;
}

.search input {
    width: 100%;
    font-size: 22px;
    padding: 10px;
}

.title {
    flex: 1;
    font-size: 24px;
    font-weight: bold;
}

.count, .record-count {
    padding: 8px 15px;
    font-size: 18px;
    font-weight: bold;
}

.list-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.list-table th {
    background: #ddd;
    text-align: left;
    padding: 10px;
    border: 1px solid #aaa;
}

.list-table td {
    padding: 10px;
    border: 1px solid #ccc;
}

.list-table tr:hover {
    background: #dff0ff;
    cursor: pointer;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #000;
    background: #eee;
}

.tab {
    background: #f7f7f7;
    border: 1px solid #777;
    border-bottom: none;
    padding: 8px 22px;
    font-size: 16px;
}

.tab.active {
    background: #fff;
    font-weight: bold;
}

.tab-panel {
    display: none;
    padding: 22px;
}

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

.fm-layout {
    display: grid;
    grid-template-columns: 34% 34% 28%;
    gap: 30px;
}

.column {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px 12px;
    align-items: center;
}

.column label {
    text-align: right;
    font-weight: bold;
}

input, textarea {
    font-size: 18px;
    padding: 7px;
    border: 1px solid #777;
    background: #fff;
    border-radius: 3px;
}

textarea {
    min-height: 100px;
}

.section-title {
    grid-column: 1 / -1;
    background: #000;
    color: #fff;
    padding: 8px;
    font-weight: bold;
    font-size: 18px;
}

.small-btn {
    grid-column: 2;
    width: 90px;
    padding: 8px;
}

.right {
    grid-template-columns: 120px 1fr;
}

.notes-title {
    grid-column: 1 / -1;
    background: #000;
    color: #ff4b4b;
    font-weight: bold;
    padding: 8px;
}

.big-notes {
    grid-column: 1 / -1;
    min-height: 380px;
    border: 2px solid red;
}
.typeahead-wrap {
    position: relative;
    flex: 1;
}

.typeahead-wrap input {
    width: 100%;
    box-sizing: border-box;
}

.suggestions {
    display: none;
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #777;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 1000;
    max-height: 420px;
    overflow-y: auto;
}

.suggestion-item {
    display: grid;
    grid-template-columns: 2fr 90px 140px 160px;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    font-size: 15px;
}

.suggestion-item:hover {
    background: #dff0ff;
}

.suggestion-item span {
    color: #333;
}
.login-box {
    max-width: 420px;
    margin: 90px auto;
    background: #fff;
    border: 1px solid #999;
    padding: 25px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.login-box h2 {
    margin-top: 0;
}

.login-box label {
    display: block;
    font-weight: bold;
    margin-top: 14px;
}

.login-box input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
}

.login-box button {
    margin-top: 18px;
    width: 100%;
}

.login-error {
    background: #ffdada;
    border: 1px solid #cc0000;
    padding: 10px;
    margin-bottom: 12px;
}
.app-header {
    background: #1f2933;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 14px;
    border-bottom: 3px solid #111;
}

.app-title {
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
}

.app-nav {
    display: flex;
    gap: 8px;
    flex: 1;
}

.app-nav a {
    color: #fff;
    text-decoration: none;
    background: #34495e;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 15px;
}

.app-nav a:hover {
    background: #4d6b88;
}

.userbox {
    text-align: right;
    font-size: 14px;
}

.userbox span {
    display: block;
    color: #cbd5e1;
    font-size: 12px;
}

.userbox a {
    color: #fff;
    margin-left: 10px;
}
/* ================================
   Staff List - compact sticky top
   ================================ */

.staff-list-wrap {
    background: #fff;
    padding: 8px 12px 10px 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
}

/* everything above the table stays visible */
.staff-sticky-panel {
    position: sticky;
    top: 72px; /* height of your dark app header */
    z-index: 50;
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 6px 0 4px 0;
}

/* tighten toolbar */
.staff-toolbar.compact {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    min-height: 44px;
}

.staff-count {
    font-size: 17px;
    font-weight: bold;
    white-space: nowrap;
    margin-right: 8px;
}

.toolbar-btn,
.detail-btn {
    height: 42px;
    min-width: 54px;
    border: 1px solid #2b8fc8;
    background: linear-gradient(#f8fbff, #d9e7f5);
    border-radius: 4px;
    font-size: 24px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.detail-btn {
    font-size: 16px;
    padding: 0 24px;
    margin-left: 80px;
}

/* filters are now close to toolbar */
.staff-filters.compact {
    display: flex;
    gap: 42px;
    margin: 0;
    padding-left: 135px;
    align-items: center;
}

.staff-filters.compact a {
    color: #0070c0;
    font-weight: bold;
    text-decoration: underline;
    font-size: 15px;
    white-space: nowrap;
}

/* table starts immediately under sticky panel */
.staff-table-scroll {
    width: 100%;
    overflow: auto;
    border-bottom: 3px solid #000;
    padding-bottom: 8px;
    max-height: calc(100vh - 160px);
}

/* make only the table column header sticky inside the scroll area */
.staff-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
	text-align: left;
}

/* vertical headers also stay sticky and black */
.staff-table thead th.vertical-head {
    background: #000;
    color: #fff !important;
    z-index: 25;
}

.staff-table thead th.blue-head {
    background: #0b7895;
    color: #fff !important;
}

/* reduce extra top spacing caused by tall vertical headers */
.staff-table th {
    padding-top: 1px;
    padding-bottom: 1px;
    vertical-align: bottom;
}

/* keep vertical headers compact */
.vertical-head {
    height: 112px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 3px 1px !important;
    font-size: 11px !important;
    white-space: nowrap;
}

/* compact rows */
.staff-table td {
    padding: 1px 2px;
    height: 22px;
}

.staff-table td input:not([type="checkbox"]) {
    height: 21px;
    font-size: 13px;
    padding: 1px 3px;
}
.view-btn {
    background: #008bd2;
    color: #fff;
    border-radius: 3px;
    padding: 5px 9px;
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
}
.email-icon-cell {
    text-align: center;
}

.email-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
}

.email-icon:hover {
    background: #dff0ff;
    border-radius: 3px;
}
.lock-cell {
    color: #09a8dd;
    font-size: 17px;
    text-align: center;
    width: 28px;
}

.staff-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    display: block;
}

.vertical-head {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: #000;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;
    width: 42px;
    height: 132px;
    padding: 6px 2px !important;
    font-size: 13px !important;
    border-left: 3px solid #fff;
}

.blue-head {
    background: #00749b;
}

.blue-check {
    background: #d5edf6;
}

/* Staff table column widths - compact version */

.staff-table th:nth-child(1),
.staff-table td:nth-child(1) {
    width: 42px; /* View */
}

.staff-table th:nth-child(2),
.staff-table td:nth-child(2) {
    width: 75px; /* First Name */
}

.staff-table th:nth-child(3),
.staff-table td:nth-child(3) {
    width: 80px; /* Last Name */
}

.staff-table th:nth-child(4),
.staff-table td:nth-child(4) {
    width: 78px; /* Cell */
}

.staff-table th:nth-child(5),
.staff-table td:nth-child(5) {
    width: 38px; /* Ext */
}

.staff-table th:nth-child(6),
.staff-table td:nth-child(6) {
    width: 75px; /* Intellishift ID */
}

.staff-table th:nth-child(7),
.staff-table td:nth-child(7) {
    width: 34px; /* Email icon */
    text-align: center;
}

.staff-table th:nth-child(8),
.staff-table td:nth-child(8) {
    width: 105px; /* Job Title */
}

.staff-table th:nth-child(9),
.staff-table td:nth-child(9) {
    width: 90px; /* Department */
}

/* Compact checkbox columns */
.staff-table th:nth-child(n+10),
.staff-table td:nth-child(n+10) {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding-left: 4px !important;
    padding-right: 1px !important;
    text-align: left;
	vertical-align: middle;
}

/* Compact vertical headers */
.vertical-head {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: #000;
    color: #fff !important;
    text-decoration: none !important;
    text-align: left !important;
	font-weight: 500;

    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 132px;

    padding-left: 7px !important;
    font-size: 14px !important;
	font-stretch: expanded;
    border-left: 2px solid #fff;
    white-space: nowrap;
}

/* Blue checkbox columns */
.staff-table th.blue-head,
.staff-table td.blue-check {
    background: #0b7895;
}

.staff-table td.blue-check {
    background: #d5edf6;
}

/* Smaller checkboxes */
.staff-table input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0 auto;
    display: block;
}
/* =====================================
   Staff list: high-contrast checkboxes
   ===================================== */

.staff-table input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 auto !important;

    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;

    display: block;
    position: relative;
    opacity: 1 !important;
}

/* unchecked box */
.staff-table input[type="checkbox"]:not(:checked) {
    background: #fff !important;
}

/* checked box */
.staff-table input[type="checkbox"]:checked {
    background: #fff !important;
    border: 2px solid #000 !important;
}

/* big black check mark */
.staff-table input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    left: 1px;
    top: -5px;

    color: #000 !important;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

/* remove faded disabled look */
.staff-table input[type="checkbox"]:disabled {
    opacity: 1 !important;
    filter: none !important;
    cursor: default;
}

/* make checkbox cells cleaner */
.staff-table td:nth-child(n+10) {
    background: #fff !important;
    text-align: center;
}

/* keep blue columns visible but not washed out */
.staff-table td.blue-check {
    background: #d6eef8 !important;
}

/* optional: darker checked boxes inside blue columns */
.staff-table td.blue-check input[type="checkbox"]:checked::after {
    color: #000 !important;
}
.staff-edit.save-ok,
.staff-check.save-ok {
    outline: 2px solid #008000 !important;
}

.staff-edit.save-error,
.staff-check.save-error {
    outline: 2px solid #cc0000 !important;
}

.staff-edit.saving,
.staff-check.saving {
    outline: 2px solid #f0a000 !important;
}
/* subtle AJAX save indicators */
.staff-edit,
.staff-check {
    transition: background-color 0.25s ease, outline-color 0.25s ease;
}

.staff-edit.saving,
.staff-check.saving {
    outline: 1px solid #d6a100 !important;
    background-color: #fff8d8 !important;
}

.staff-edit.save-ok,
.staff-check.save-ok {
    outline: 1px solid #008000 !important;
    background-color: #eefbea !important;
}

.staff-edit.save-error,
.staff-check.save-error {
    outline: 2px solid #cc0000 !important;
    background-color: #ffe3e3 !important;
}

.staff-save-tick {
    position: fixed;
    z-index: 9999;
    background: #008000;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.staff-save-tick.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
   Staff Detail FileMaker look
   CLEAN VERSION
   =========================== */

.staff-detail-page {
    padding: 0 8px 30px 8px;
    background: #f3f3f3;
    color: #000;
}

.staff-detail-compact .detail-tabs {
    display: flex;
    margin-top: 0;
    height: 30px;
    background: #efefef;
}

.staff-detail-compact .detail-tab {
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 6px 16px;
    font-size: 16px;
}

.staff-detail-compact .staff-detail-card {
    background: #f7f7f7;
   
    min-height: 720px;
    padding: 14px 22px 18px 22px;
    overflow-x: hidden;
}

/* =========================================================
   STAFF DETAIL TOP BOX - ONE ROW USING FULL WIDTH
   ========================================================= */

.staff-detail-compact .staff-top-fields {
    display: grid !important;

    grid-template-columns:
        minmax(145px, 1.1fr)   /* First */
        minmax(150px, 1.1fr)   /* Last */
        minmax(230px, 1.8fr)   /* Title */
        minmax(185px, 1.4fr)   /* Dept */
        minmax(76px, .55fr)    /* Proj Mgr */
        minmax(78px, .55fr)    /* Comm */
        minmax(130px, .9fr)    /* Hire */
        minmax(130px, .9fr)    /* Term */
        minmax(64px, .45fr)    /* Office */
        minmax(64px, .45fr)    /* Gmail */
        minmax(70px, .5fr)     /* WO Rep */
        minmax(76px, .55fr)    /* Calendar */
        minmax(64px, .45fr)    /* Web */
        minmax(64px, .45fr)    /* SMS */
        minmax(70px, .5fr)     /* WO Cat */
        minmax(70px, .5fr) !important; /* Freeze Web */

    column-gap: 8px !important;
    row-gap: 0 !important;
    align-items: end !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;

    border: 2px solid #000 !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin: 0 0 18px 0 !important;
    background: #fff !important;
}

/* force every top item onto row 1 */
.staff-detail-compact .staff-top-fields > div {
    grid-row: 1 !important;
    min-width: 0 !important;
}

/* field blocks */
.staff-detail-compact .staff-top-fields .top-field {
    display: grid !important;
    grid-template-rows: 15px 28px !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.staff-detail-compact .staff-top-fields .top-field label {
    text-align: left !important;
    font-weight: bold !important;
    font-size: 13px !important;
    line-height: 13px !important;
    white-space: nowrap !important;
    color: #000 !important;
}

/* fields use their whole assigned column */
.staff-detail-compact .staff-top-fields input:not([type="checkbox"]),
.staff-detail-compact .staff-top-fields select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 28px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    padding: 2px 4px !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
}

/* IMPORTANT: remove old forced Title/Dept widths */
.staff-detail-compact .staff-top-fields .top-title select,
.staff-detail-compact .staff-top-fields .top-dept select {
    width: 100% !important;
}

/* date fields fill their wider columns */
.staff-detail-compact .staff-top-fields input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 12px !important;
    padding-left: 2px !important;
    padding-right: 0 !important;
}

/* checkbox blocks */
.staff-detail-compact .staff-top-fields .top-check {
    display: grid !important;
    grid-template-rows: 22px 14px !important;
    justify-items: center !important;
    align-items: center !important;
    min-width: 0 !important;
}

.staff-detail-compact .staff-top-fields .top-check label {
    text-align: center !important;
    font-weight: bold !important;
    font-size: 10px !important;
    line-height: 10px !important;
    white-space: nowrap !important;
    color: #000 !important;
}

.staff-detail-compact .staff-top-fields .top-check input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
}

.staff-detail-compact .staff-top-fields .top-check input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    left: 1px;
    top: -6px;
    font-size: 24px;
    font-weight: 900;
    color: #000;
}

/* MAIN BODY */
.staff-detail-compact .detail-grid {
    display: grid !important;
    grid-template-columns: 510px 790px ;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
}

.staff-detail-compact .left-panel {
    width: 510px !important;
}

.staff-detail-compact .form-row {
    display: grid !important;
    grid-template-columns: 125px;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 7px !important;
}

.staff-detail-compact .form-row label {
    text-align: right !important;
    font-weight: bold !important;
    color: #000 !important;
    white-space: nowrap !important;
}

.staff-detail-compact .red-label label {
    color: red !important;
}

.staff-detail-compact .city-row {
    grid-template-columns: 125px 150px 48px 76px !important;
}

.staff-detail-compact .direct-line-row {
    grid-template-columns: 125px 150px 82px 90px !important;
}

.staff-detail-compact .direct-line-row label:first-child {
    color: #0080c0 !important;
    font-weight: normal !important;
}

.staff-detail-compact .direct-line-input {
    background: #fff !important;
    color: #000 !important;
}

.staff-detail-compact input,
.staff-detail-compact textarea,
.staff-detail-compact select {
    font-size: 15px;
    padding: 3px 6px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    border-radius: 0;
    box-sizing: border-box;
}

.staff-detail-compact .email-card {
    margin: 16px 0 0 125px !important;
    width: 360px !important;
    display: grid !important;
    grid-template-columns: 55px;
    align-items: center !important;
}

.staff-detail-compact .email-card-title {
    grid-column: 1 / -1 !important;
    background: #0080c0 !important;
    color: #fff !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
}

.staff-detail-compact .email-card label {
    text-align: right !important;
    font-weight: bold !important;
    padding-right: 7px !important;
}

.staff-detail-compact .checkbox-stack {
    margin: 34px 0 46px 125px !important;
    display: grid !important;
    gap: 18px !important;
}

.staff-detail-compact .checkbox-stack label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
}

.staff-detail-compact .web-access-box {
    width: 230px !important;
    margin-left: 125px !important;
}

.staff-detail-compact .web-access-box .box-title {
    background: #000 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 6px !important;
    font-size: 14px !important;
	margin-top:25px;
}

.staff-detail-compact .web-access-box .form-row {
    grid-template-columns: 85px ;
    margin-bottom: 0 !important;
}

/* EMERGENCY BOX */
.staff-detail-compact .middle-panel {
    width: 790px !important;
}

.staff-detail-compact .emergency-box {
    border: 3px solid red !important;
    border-radius: 5px !important;
    padding: 22px 30px 30px 30px !important;
    background: #f8f8f8 !important;
    width: 730px !important;
    max-width: 730px !important;
    margin: 0 !important;
}

.staff-detail-compact .emergency-title {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
    font-size: 19px !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
}

.staff-detail-compact .red-cross {
    color: #e80000 !important;
    font-size: 50px !important;
    line-height: 1 !important;
}

.staff-detail-compact .emergency-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr ;
    gap: 8px !important;
}

.staff-detail-compact .emergency-grid label {
    font-size: 13px !important;
    font-weight: bold !important;
}

.staff-detail-compact .emergency-grid input {
    width: 100% !important;
}

.staff-detail-compact .emergency-notes {
    margin-top: 14px !important;
}

.staff-detail-compact .emergency-notes label {
    display: block !important;
    font-size: 13px !important;
    font-weight: bold !important;
    margin-bottom: 4px !important;
}

.staff-detail-compact .emergency-notes textarea {
    width: 100% !important;
    min-height: 132px !important;
}

/* AUDIT BOX */
.staff-detail-compact .right-panel {
    min-width: 320px !important;
}

.staff-detail-compact .audit-box {
    margin-top: 600px !important;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 58px 140px 72px 145px !important;
    gap: 8px !important;
    align-items: center !important;
}

.staff-detail-compact .audit-box label {
    color: #666 !important;
    font-size: 12px !important;
    text-align: right !important;
    font-weight: bold !important;
}

.staff-detail-compact .small-ext {
    width: 90px !important;
}

.staff-detail-compact .state-field {
    width: 48px !important;
}

.staff-detail-compact .zip-field {
    width: 76px !important;
}

.staff-detail-compact .tiny-field {
    width: 55px !important;
}

/* Save indicator */
.staff-save-tick {
    position: fixed;
    z-index: 9999;
    background: #008000;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s;
}

.staff-save-tick.show {
    opacity: 1;
    transform: translateY(0);
}

.staff-detail-edit.saving,
.staff-detail-check.saving {
    outline: 1px solid #d6a100 !important;
    background-color: #fff8d8 !important;
}

.staff-detail-edit.save-ok,
.staff-detail-check.save-ok {
    outline: 1px solid #008000 !important;
    background-color: #eefbea !important;
}

.staff-detail-edit.save-error,
.staff-detail-check.save-error {
    outline: 2px solid #cc0000 !important;
    background-color: #ffe3e3 !important;
}
/* =========================================================
   STAFF DETAIL TOP BOX - FLEX FULL WIDTH FINAL
   ========================================================= */

.staff-detail-compact .staff-top-fields {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;

    border: 2px solid #000 !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin: 0 0 18px 0 !important;
    background: #fff !important;
}

/* field blocks */
.staff-detail-compact .staff-top-fields .top-field {
    display: grid !important;
    grid-template-rows: 15px 28px !important;
    gap: 2px !important;
    min-width: 0 !important;
}

/* exact field widths / grow behavior */
.staff-detail-compact .staff-top-fields .top-first {
    flex: 1.05 1 130px !important;
}

.staff-detail-compact .staff-top-fields .top-last {
    flex: 1.05 1 135px !important;
}

.staff-detail-compact .staff-top-fields .top-title {
    flex: 1.7 1 180px !important;
}

.staff-detail-compact .staff-top-fields .top-dept {
    flex: 1.35 1 145px !important;
}

.staff-detail-compact .staff-top-fields .top-comm {
    flex: 0 0 62px !important;
}

.staff-detail-compact .staff-top-fields .top-hire {
    flex: 0 0 122px !important;
}

.staff-detail-compact .staff-top-fields .top-term {
    flex: 0 0 122px !important;
}

/* checkbox blocks */
.staff-detail-compact .staff-top-fields .top-check {
    flex: 0 0 54px !important;
    display: grid !important;
    grid-template-rows: 22px 14px !important;
    justify-items: center !important;
    align-items: center !important;
    min-width: 0 !important;
}

/* slightly wider checkbox labels */
.staff-detail-compact .staff-top-fields .top-project {
    flex-basis: 62px !important;
}

.staff-detail-compact .staff-top-fields .top-wo-report {
    flex-basis: 60px !important;
}

.staff-detail-compact .staff-top-fields .top-calendar {
    flex-basis: 68px !important;
}

.staff-detail-compact .staff-top-fields .top-wo-cat {
    flex-basis: 60px !important;
}

.staff-detail-compact .staff-top-fields .top-freeze {
    flex-basis: 58px !important;
}

/* labels */
.staff-detail-compact .staff-top-fields .top-field label {
    text-align: left !important;
    font-weight: bold !important;
    font-size: 13px !important;
    line-height: 13px !important;
    white-space: nowrap !important;
    color: #000 !important;
}

.staff-detail-compact .staff-top-fields .top-check label {
    text-align: center !important;
    font-weight: bold !important;
    font-size: 10px !important;
    line-height: 10px !important;
    white-space: nowrap !important;
    color: #000 !important;
}

/* inputs/selects fill their block */
.staff-detail-compact .staff-top-fields input:not([type="checkbox"]),
.staff-detail-compact .staff-top-fields select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 28px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    padding: 2px 4px !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
}

/* date fields */
.staff-detail-compact .staff-top-fields input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 12px !important;
    padding-left: 2px !important;
    padding-right: 0 !important;
}

/* checkboxes */
.staff-detail-compact .staff-top-fields .top-check input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #000 !important;
    background: #fff !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
}

.staff-detail-compact .staff-top-fields .top-check input[type="checkbox"]:checked::after {
    content: "✓" !important;
    position: absolute !important;
    left: 1px !important;
    top: -6px !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #000 !important;
}

/* =========================================================
   STAFF DETAIL BODY FIX - restore bottom layout
   ========================================================= */

/* Main body: left info, emergency box, right audit */
.staff-detail-compact .detail-grid {
    display: grid !important;
    grid-template-columns: 520px 820px 1fr !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Left panel */
.staff-detail-compact .left-panel {
    width: 520px !important;
}

/* Normal label + field rows */
.staff-detail-compact .form-row {
    display: grid !important;
    grid-template-columns: 125px 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 7px !important;
}

.staff-detail-compact .form-row label {
    text-align: right !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}

/* Make normal left-side inputs usable width */
.staff-detail-compact .left-panel .form-row input:not([type="checkbox"]),
.staff-detail-compact .left-panel .form-row select {
    width: 100% !important;
}

/* City / State / Zip row */
.staff-detail-compact .city-row {
    grid-template-columns: 125px 150px 48px 76px !important;
}

.staff-detail-compact .city-row input {
    width: 100% !important;
}

/* Direct line + ext row */
.staff-detail-compact .direct-line-row {
    grid-template-columns: 125px 150px 82px 90px !important;
}

.staff-detail-compact .direct-line-row input {
    width: 100% !important;
}

/* Personal email card */
.staff-detail-compact .email-card {
    margin: 16px 0 0 125px !important;
    width: 360px !important;
    display: grid !important;
    grid-template-columns: 55px 1fr !important;
    align-items: center !important;
}

.staff-detail-compact .email-card-title {
    grid-column: 1 / -1 !important;
    background: #0080c0 !important;
    color: #fff !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
}

.staff-detail-compact .email-card input {
    width: 100% !important;
}

/* Checkbox stack under email */
.staff-detail-compact .checkbox-stack {
    margin: 34px 0 46px 125px !important;
    display: grid !important;
    gap: 18px !important;
}

.staff-detail-compact .checkbox-stack label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
}

/* Web access box */
.staff-detail-compact .web-access-box {
    width: 300px !important;
    margin-left: 125px !important;
}

.staff-detail-compact .web-access-box .box-title {
    background: #000 !important;
    color: #fff !important;
    text-align: left !important;
    padding: 6px !important;
    font-size: 14px !important;
}

.staff-detail-compact .web-access-box .form-row {
    grid-template-columns: 85px 1fr !important;
    margin-bottom: 0 !important;
}

.staff-detail-compact .web-access-box input {
    width: 100% !important;
}

/* Emergency box larger and centered better */
.staff-detail-compact .middle-panel {
    width: 820px !important;
}

.staff-detail-compact .emergency-box {
    width: 760px !important;
    max-width: 760px !important;
    margin: 0 !important;
    padding: 24px 34px 34px 34px !important;
}

.staff-detail-compact .emergency-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
}

.staff-detail-compact .emergency-grid input {
    width: 100% !important;
}

.staff-detail-compact .emergency-notes textarea {
    width: 100% !important;
    min-height: 135px !important;
}

/* Audit box: move back up and right, not bottom-left */
.staff-detail-compact .right-panel {
    min-width: 360px !important;
    position: relative !important;
}

.staff-detail-compact .audit-box {
    margin-top: 500px !important;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 58px 140px 72px 145px !important;
    gap: 4px !important;
    align-items: center !important;
}

.staff-detail-compact .audit-box input {
    width: 100% !important;
}

/* =========================================================
   Move audit box beside emergency box, not at bottom
   ========================================================= */

.staff-detail-compact .right-panel {
    min-width: 360px !important;
    position: relative !important;
    padding-top: 250px !important; /* adjust this up/down */
}

.staff-detail-compact .audit-box {
    margin-top: 0 !important;
    margin-left: 0 !important;
	padding-top:42px;

    display: grid !important;
    grid-template-columns: 58px 140px 72px 145px !important;
    gap: 4px !important;
    align-items: center !important;
}

.staff-detail-compact .audit-box label {
    font-size: 12px !important;
    color: #666 !important;
    text-align: right !important;
    font-weight: bold !important;
}

.staff-detail-compact .audit-box input {
    width: 100% !important;
    height: 25px !important;
    font-size: 13px !important;
    padding: 2px 4px !important;
}

.staff-detail-compact .staff-detail-card {
    min-height: 640px !important;
    padding-bottom: 10px !important;
}

.staff-detail-page {
    padding-bottom: 8px !important;
}

/* =========================================================
   STAFF DETAIL TOP SPACING ADJUSTMENTS
   ========================================================= */

/* Push Search / Plus / List View Staff buttons lower */
.staff-detail-compact .detail-action-bar {
    height: 74px !important;
    align-items: flex-end !important;
    padding: 10px 12px 2px 12px !important;
}

/* Keep List View Staff centered but lower */
.staff-detail-compact .detail-action-bar .detail-btn {
    bottom: 10px !important;
    top: auto !important;
}

/* Give Profile tab some space below toolbar */
.staff-detail-compact .detail-tabs {
    margin-top: 2px !important;
    height: 34px !important;
    align-items: flex-end !important;
}

/* Push the actual card/top box lower below the Profile tab */
.staff-detail-compact .staff-detail-card {
    padding-top: 22px !important;
}

/* Add more gap between Profile tab and top bordered field box */
.staff-detail-compact .staff-top-fields {
    margin-top: 8px !important;
}

.staff-table .find-row td {
    background: #fff9d6 !important;
}

.staff-table .find-row input,
.staff-table .find-row select {
    border: 2px solid #000 !important;
    background: #fff !important;
}

.staff-table .find-row .view-btn {
    background: #008bd2;
    color: #fff;
    font-weight: bold;
}

.staff-table .find-row td {
    background: #fff7bf !important;
    border-top: 3px solid #d0a000 !important;
    border-bottom: 3px solid #d0a000 !important;
}

.staff-table .find-row input,
.staff-table .find-row select {
    background: #fff !important;
    border: 2px solid #000 !important;
    height: 24px !important;
    font-size: 13px !important;
}

.staff-table .find-row .view-btn {
    background: #d99a00 !important;
    color: #000 !important;
    font-weight: bold !important;
}
/* =========================================================
   Detail Find Mode - darker FileMaker-style input outlines
   ========================================================= */

.staff-detail-compact .staff-detail-find,
.staff-detail-compact .staff-detail-find-check,
.staff-detail-compact select.staff-detail-find,
.staff-detail-compact textarea.staff-detail-find {
    border: 2px solid #000 !important;
    background: #fffdf0 !important;
    color: #000 !important;
}

/* make text/date/select fields stand out */
.staff-detail-compact input.staff-detail-find,
.staff-detail-compact select.staff-detail-find,
.staff-detail-compact textarea.staff-detail-find {
    box-shadow: inset 0 0 0 1px #333 !important;
}

/* date picker fields in find mode */
.staff-detail-compact input[type="date"].staff-detail-find {
    border: 2px solid #000 !important;
    background: #fffdf0 !important;
}

/* checkbox fields in find mode */
.staff-detail-compact .staff-detail-find-check {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #000 !important;
    background: #fffdf0 !important;
    position: relative !important;
    margin: 0 auto !important;
}

/* checked checkbox in find mode */
.staff-detail-compact .staff-detail-find-check:checked::after {
    content: "✓" !important;
    position: absolute !important;
    left: 1px !important;
    top: -6px !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    color: #000 !important;
}

/* optional: tint the full top box while in find mode */
.staff-detail-compact .staff-detail-find,
.staff-detail-compact .staff-detail-find-check {
    outline: none !important;
}
/* =========================================================
   Detail Find Mode - gold FileMaker-style outline
   ========================================================= */

.staff-detail-compact input.staff-detail-find,
.staff-detail-compact select.staff-detail-find,
.staff-detail-compact textarea.staff-detail-find {
    border: 1px solid #777 !important;
    background: #fffdf0 !important;
    color: #000 !important;

    outline: 3px solid #d6a100 !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* date fields */
.staff-detail-compact input[type="date"].staff-detail-find {
    border: 1px solid #777 !important;
    outline: 3px solid #d6a100 !important;
    outline-offset: 1px !important;
    background: #fffdf0 !important;
}

/* find mode checkboxes */
.staff-detail-compact .staff-detail-find-check {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 22px !important;
    height: 22px !important;

    border: 1px solid #777 !important;
    outline: 3px solid #d6a100 !important;
    outline-offset: 1px !important;

    background: #fffdf0 !important;
    position: relative !important;
    margin: 0 auto !important;
}

/* checked checkbox mark */
.staff-detail-compact .staff-detail-find-check:checked::after {
    content: "✓" !important;
    position: absolute !important;
    left: 1px !important;
    top: -6px !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    color: #000 !important;
}

/* =========================================================
   Staff Detail Find Mode - No Records Modal
   ========================================================= */

.staff-find-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-find-modal {
    width: 380px;
    background: #fff;
    border: 3px solid #d6a100;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    border-radius: 6px;
    padding: 18px;
    text-align: center;
}

.staff-find-modal-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #000;
}

.staff-find-modal-body {
    font-size: 16px;
    margin-bottom: 18px;
}

.staff-find-modal button {
    background: #d6a100;
    border: 1px solid #000;
    color: #000;
    font-weight: bold;
    padding: 8px 28px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}
/* =========================================================
   Staff Detail New Record Mode
   ========================================================= */

.staff-detail-compact input.staff-detail-new,
.staff-detail-compact select.staff-detail-new,
.staff-detail-compact textarea.staff-detail-new {
    border: 1px solid #777 !important;
    background: #f4fff4 !important;
    color: #000 !important;
    outline: 3px solid #008000 !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

.staff-detail-compact .staff-detail-new-check {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 1px solid #777 !important;
    outline: 3px solid #008000 !important;
    outline-offset: 1px !important;
    background: #f4fff4 !important;
    position: relative !important;
    margin: 0 auto !important;
}

.staff-detail-compact .staff-detail-new-check:checked::after {
    content: "✓" !important;
    position: absolute !important;
    left: 1px !important;
    top: -6px !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    color: #000 !important;
}

.handbook-box {
    border: 2px solid #2b8fc8;
    background: #f7fbff;
    padding: 10px;
    margin-bottom: 18px;
	margin-left:12px;
    width: 360px;
    box-sizing: border-box;
}

.handbook-title {
    background: #0073b7;
    color: #fff;
    font-weight: bold;
    padding: 6px 8px;
    margin: -10px -10px 10px -10px;
    font-size: 13px;
}

.handbook-status-row {
    font-size: 13px;
    margin-bottom: 6px;
}

.handbook-small {
    font-size: 12px;
    margin-bottom: 4px;
    color: #333;
}

.handbook-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.handbook-btn {
    display: inline-block;
    padding: 6px 8px;
    background: linear-gradient(#f8fbff, #d9e7f5);
    border: 1px solid #2b8fc8;
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
}

.handbook-btn.view {
    background: #e8f3ff;
}

.handbook-btn.download {
    background: #e8f7e8;
    border-color: #2f8f2f;
}

.handbook-btn.log {
    background: #fff7df;
    border-color: #b77b00;
}

.handbook-msg {
    padding: 6px 8px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: bold;
}

.handbook-msg.success {
    background: #e8f7e8;
    border: 1px solid #2f8f2f;
    color: #155d15;
}

.handbook-msg.info {
    background: #fff7df;
    border: 1px solid #b77b00;
    color: #664400;
}
/* Move handbook/audit panel higher */
.staff-detail-compact .compact-detail-grid {
    align-items: start !important;
}

.staff-detail-compact .right-panel {
    align-self: start !important;
    padding-top: 0 !important;
	padding-left:12px;
    margin-top: 6px !important;
}

.staff-detail-compact .handbook-box {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}
/* =========================================================
   Staff Index Top Layout
   ========================================================= */

.staff-page-title {
    margin: 10px 0 4px 12px;
    font-size: 22px;
    font-weight: bold;
    color: #111;
    letter-spacing: .5px;
}

.staff-top-action-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 12px 8px 12px;
}

.staff-record-count {
    font-size: 16px;
    font-weight: bold;
    margin-right: 8px;
    white-space: nowrap;
}

.staff-top-rule {
    border: 0;
    border-top: 2px solid #111;
    margin: 0 12px 0 12px;
}

.staff-find-links-row {
    display: flex;
    align-items: center;
    gap: 42px;
    padding: 6px 12px 5px 145px;
    font-size: 14px;
    font-weight: bold;
    background: #fff;
}

.staff-find-links-row a {
    color: #0071bc;
    text-decoration: underline;
    white-space: nowrap;
}

.staff-find-links-row a:hover {
    color: #004f85;
}
/* =========================================================
   Staff Index Title + Toolbar Inline
   ========================================================= */

.staff-title-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 7px 12px;
    background: #fff;
}

.staff-page-title {
    margin: 0 18px 0 0;
    padding: 0;
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    color: #000;
    letter-spacing: .5px;
    white-space: nowrap;
}

.staff-title-toolbar .staff-count {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    margin-right: 4px;
}

.staff-title-toolbar .toolbar-btn {
    margin: 0;
}

.staff-title-toolbar .detail-btn {
    margin-left: 14px;
}

.staff-toolbar-rule {
    border: 0;
    border-top: 1px solid #aaa;
    margin: 0 12px;
}

.staff-find-links-under-rule {
    display: flex;
    align-items: center;
    gap: 42px;
    padding: 6px 12px 5px 145px;
    background: #fff;
    font-size: 14px;
    font-weight: bold;
}

.staff-find-links-under-rule a {
    color: #0071bc;
    text-decoration: underline;
    white-space: nowrap;
}

.staff-find-links-under-rule a:hover {
    color: #004f85;
}
/* =========================================================
   Staff Detail Title + Toolbar Inline
   ========================================================= */

.detail-title-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 7px 12px;
    background: #f4f4f4;
    border-bottom: 1px solid #c9c9c9;
}

.staff-detail-page-title {
    margin: 0 18px 0 0;
    padding: 0;
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    color: #000;
    letter-spacing: .5px;
    white-space: nowrap;
}

.detail-title-toolbar .toolbar-btn {
    margin: 0;
}

.detail-title-toolbar .detail-btn {
    margin-left: 12px;
}

.detail-tab-inline {
    margin: 0 8px 0 0;
    min-width: 58px;
    height: 28px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.staff-detail-toolbar-rule {
    border: 0;
    border-top: 1px solid #aaa;
    margin: 0 12px 8px 12px;
}

/* Hide old tab row if one remains somewhere */
.detail-tabs:empty {
    display: none;
}


/* =========================================================
   Customer Detail Emergency Layout Fix
   Keep here until confirmed, then move to assets/style.css
   ========================================================= */

.customer-detail-page {
    background: #eef3f8;
    min-height: calc(100vh - 96px);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #111;
}

.customer-detail-sticky-panel {
    position: sticky;
    top: 0;
    z-index: 3000;
    background: #dfeaf5;
    border-bottom: 1px solid #9fb6cc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.14);
}

.customer-detail-title-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: linear-gradient(#edf5fc, #d7e6f5);
    border-bottom: 1px solid #b5c7d8;
}

.customer-detail-page-title {
    margin: 0 12px 0 0;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: #000;
    letter-spacing: .5px;
    white-space: nowrap;
}

.customer-detail-current {
    margin-left: 12px;
    color: #25394f;
    font-size: 13px;
    white-space: nowrap;
}

.customer-detail-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 8px 0 8px;
    background: #eef3f8;
    border-top: 1px solid #d5e1ed;
}

.customer-tab {
    min-height: 25px;
    padding: 4px 10px;
    border: 1px solid #9fb6cc;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(#f7fafc, #d7e6f5);
    color: #16395b;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.customer-tab.active {
    background: #ffffff;
    color: #000;
    position: relative;
    top: 1px;
}

.customer-tab-panel {
    display: none;
    padding: 10px;
}

.customer-tab-panel.active {
    display: block;
}

.customer-detail-card {
    border: 1px solid #9fb6cc;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.10);
    padding: 10px;
}

.customer-detail-grid {
    display: grid !important;
    grid-template-columns: 410px 430px 1fr;
    gap: 16px;
    align-items: start;
}

.customer-detail-column {
    min-width: 0;
}

.customer-section-title {
    padding: 5px 8px;
    margin-bottom: 8px;
    border: 1px solid #9fb6cc;
    background: linear-gradient(#d9e9f8, #bdd4ea);
    color: #1c3954;
    font-size: 13px;
    font-weight: bold;
}

.service-title {
    margin-top: 16px;
}

.customer-form-row {
    display: grid !important;
    grid-template-columns: 115px 1fr;
    gap: 5px;
    align-items: center;
    margin-bottom: 5px;
}

.customer-form-row label {
    text-align: right;
    font-weight: bold;
    color: #111;
    white-space: nowrap;
}

.customer-form-row.short-row {
    grid-template-columns: 115px 70px 110px !important;
}

.customer-form-row.textarea-row {
    align-items: start;
}

.customer-detail-field-shell {
    position: relative;
    display: block;
    width: 100%;
}

.customer-detail-edit,
.customer-readonly {
    width: 100%;
    height: 24px;
    box-sizing: border-box;
    border: 1px solid #7998b7;
    border-radius: 2px;
    background: #ffffff;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 2px 5px;
}

.customer-detail-edit:focus {
    outline: none;
    border-color: #2f70aa;
    box-shadow: 0 0 0 2px rgba(47,112,170,0.16);
}

.customer-readonly {
    background: #f4f4f4;
    color: #333;
}

.customer-detail-edit.saving {
    background: #fff8d7;
    border-color: #d6b656;
}

.customer-detail-edit.save-ok {
    border-color: #2f8f3a;
}

.customer-detail-edit.save-error {
    background: #ffe3e3;
    border-color: #b94a48;
}

.state-field {
    width: 60px !important;
}

.zip-field {
    width: 100px !important;
}

.access-textarea {
    height: 82px !important;
    resize: vertical;
}

.customer-small-btn {
    width: 58px;
    min-height: 23px;
    border: 1px solid #2f5f93;
    border-radius: 3px;
    background: linear-gradient(#3f7fbd, #28649c);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.customer-detail-right {
    min-width: 330px;
}

.customer-audit-grid {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 5px;
    align-items: center;
    margin-bottom: 12px;
}

.customer-audit-grid label {
    text-align: right;
    font-weight: bold;
    color: #526170;
    font-size: 11px;
}

.customer-notes-title {
    margin: 8px 0 4px 0;
    padding: 5px 8px;
    background: #000;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
}

.customer-big-notes {
    width: 100% !important;
    height: 230px !important;
    box-sizing: border-box;
    border: 2px solid #c99500;
    background: #fffdf2;
    resize: vertical;
}

/* This is the key fix for all those visible "Saved" words */
.customer-detail-saved-bubble {
    position: absolute;
    right: 4px;
    top: -21px;
    z-index: 7000;
    display: none !important;
    padding: 3px 8px;
    border-radius: 10px;
    background: #eaf7df;
    border: 1px solid #7aa35a;
    color: #2e6b1f;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.22);
    pointer-events: none;
}

.customer-detail-field-shell.show-saved .customer-detail-saved-bubble {
    display: inline-block !important;
}

.customer-placeholder-panel {
    min-height: 260px;
    border: 1px solid #d4dce5;
    background: #f9fbfd;
    padding: 18px;
}

.customer-placeholder-panel h2 {
    margin: 0 0 8px 0;
    color: #16395b;
}
/* =========================================================
   Customer Detail Tightening Overrides
   ========================================================= */

.customer-detail-page {
    background: #eef3f8;
}

.customer-detail-title-toolbar {
    min-height: 38px;
    padding: 7px 10px;
}

.customer-detail-page-title {
    font-size: 26px;
    margin-right: 14px;
}

.customer-detail-current {
    margin-left: 12px;
    font-size: 12px;
}

.customer-detail-tabs {
    padding: 4px 8px 0 8px;
}

.customer-tab {
    min-height: 22px;
    padding: 3px 9px;
    font-size: 11px;
}

.customer-tab-panel {
    padding: 8px;
}

.customer-detail-card {
    padding: 9px 10px;
}

.customer-detail-grid {
    grid-template-columns: 420px 440px 1fr !important;
    gap: 14px;
}

.customer-section-title {
    padding: 4px 8px;
    margin-bottom: 7px;
    font-size: 12px;
}

.customer-form-row {
    grid-template-columns: 120px 1fr !important;
    gap: 5px;
    margin-bottom: 4px;
}

.customer-form-row label {
    font-size: 12px;
}

.customer-detail-edit,
.customer-readonly {
    height: 23px;
    font-size: 12px;
    padding: 2px 5px;
}

.customer-form-row.short-row {
    grid-template-columns: 120px 60px 105px !important;
}

.customer-small-btn {
    width: 54px;
    min-height: 25px;
    font-size: 11px;
}

.access-textarea {
    height: 82px !important;
}

.customer-audit-grid {
    grid-template-columns: 66px 1fr;
    gap: 5px;
}

.customer-audit-grid label {
    font-size: 11px;
}

.customer-notes-title {
    margin-top: 8px;
    padding: 4px 7px;
    font-size: 12px;
}

.customer-big-notes {
    height: 210px !important;
}

/* Make the top toolbar buttons match the compact index page */
.customer-detail-title-toolbar .fm-btn {
    min-height: 23px;
    padding: 3px 10px;
    font-size: 11px;
}

/* Keep saved bubbles hidden until triggered */
.customer-detail-saved-bubble {
    display: none !important;
}

.customer-detail-field-shell.show-saved .customer-detail-saved-bubble {
    display: inline-block !important;
}

/* Keep form from floating too far left on very wide monitors */
.customer-detail-card {
    max-width: 1880px;
}
/* =========================================================
   Global FileMaker-style app buttons
   Used by Customer list/detail and future pages
   ========================================================= */

a.fm-btn,
button.fm-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 23px !important;
    height: 23px !important;
    padding: 3px 10px !important;

    border: 1px solid #2f5f93 !important;
    border-radius: 3px !important;

    background: linear-gradient(#3f7fbd, #28649c) !important;
    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 1 !important;

    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;
}

a.fm-btn:visited {
    color: #ffffff !important;
}

a.fm-btn:hover,
button.fm-btn:hover {
    background: linear-gradient(#4d8dca, #2f70aa) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

a.fm-btn.green,
button.fm-btn.green {
    border-color: #2f7a43 !important;
    background: linear-gradient(#4fa764, #34864a) !important;
}

a.fm-btn.green:hover,
button.fm-btn.green:hover {
    background: linear-gradient(#5eb975, #3a9754) !important;
}

a.fm-btn.gray,
button.fm-btn.gray {
    border-color: #7d8791 !important;
    background: linear-gradient(#a7b0ba, #818b96) !important;
}

a.fm-btn.gray:hover,
button.fm-btn.gray:hover {
    background: linear-gradient(#b6bec7, #909aa5) !important;
}

a.fm-btn.red,
button.fm-btn.red {
    border-color: #9a3434 !important;
    background: linear-gradient(#c65555, #a53b3b) !important;
}

a.fm-btn.red:hover,
button.fm-btn.red:hover {
    background: linear-gradient(#d86666, #b44646) !important;
}

/* Customer detail toolbar should stay compact */
.customer-detail-title-toolbar .fm-btn {
    min-width: 48px !important;
    margin: 0 !important;
}

/* =========================================================
   Customer Index / List Page Restore
   ========================================================= */

.customers-page {
    background: #eef3f8 !important;
    color: #111 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    padding: 0 8px 42px 8px !important;
}

.customer-sticky-panel {
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    background: #dfeaf5 !important;
    border-bottom: 1px solid #9fb6cc !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.14) !important;
}

.customer-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    background: linear-gradient(#edf5fc, #d7e6f5) !important;
    border-bottom: 1px solid #b5c7d8 !important;
}

.toolbar-title {
    margin-right: 12px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.search-form {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 1 !important;
    margin: 0 0 0 12px !important;
    min-width: 340px !important;
}

.typeahead-wrap {
    position: relative !important;
    flex: 1 !important;
    max-width: 620px !important;
}

.customer-search-input {
    width: 100% !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: 1px solid #7998b7 !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.customer-count-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 23px !important;
    padding: 3px 8px !important;
    background: #f7fafc !important;
    border-bottom: 1px solid #c6d3df !important;
    color: #25394f !important;
    font-size: 12px !important;
}

.customer-count-main {
    font-weight: bold !important;
}

.customer-count-sub {
    color: #25394f !important;
    white-space: nowrap !important;
}

/* Find panel */
.customer-find-panel {
    background: #fff8dc !important;
    border-bottom: 1px solid #d4b35f !important;
    padding: 7px 8px !important;
}

.customer-find-title {
    font-size: 13px !important;
    font-weight: bold !important;
    color: #5f4400 !important;
    margin-bottom: 5px !important;
}

.customer-find-grid {
    display: grid !important;
    grid-template-columns: 110px 180px 180px 140px 140px 190px 220px 130px 60px 90px auto !important;
    gap: 5px !important;
    align-items: end !important;
}

.find-field label {
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #5f4400 !important;
}

.customer-find-input {
    width: 100% !important;
    height: 23px !important;
    box-sizing: border-box !important;
    border: 2px solid #d6a100 !important;
    border-radius: 2px !important;
    background: #fffdf2 !important;
    color: #111 !important;
    font-size: 12px !important;
    padding: 2px 5px !important;
}

.find-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Table */
.customer-table-wrap {
    width: 100% !important;
    overflow: auto !important;
}

.customer-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    background: #fff !important;
    font-size: 12px !important;
}

.customer-table thead th {
    position: sticky !important;
    top: var(--customerStickyTop, 64px) !important;
    z-index: 2500 !important;
    padding: 4px 5px !important;
    border: 1px solid #9fb6cc !important;
    background: linear-gradient(#d9e9f8, #bdd4ea) !important;
    color: #1c3954 !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}

.customer-table tbody td {
    padding: 2px 4px !important;
    border: 1px solid #d4dce5 !important;
    color: #111 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    height: 24px !important;
}

.customer-table tbody tr:nth-child(even) {
    background: #f6f9fc !important;
}

.customer-table tbody tr:hover {
    background: #dcecff !important;
}

.col-open {
    width: 54px !important;
}

.col-id {
    width: 72px !important;
}

.col-customer {
    width: 250px !important;
}

.col-company {
    width: 250px !important;
}

.col-phone {
    width: 150px !important;
}

.col-email {
    width: 250px !important;
}

.col-address {
    width: 260px !important;
}

.col-city {
    width: 180px !important;
}

.col-state {
    width: 52px !important;
}

.col-zip {
    width: 82px !important;
}

.open-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 20px !important;
    padding: 2px 7px !important;
    border: 1px solid #2f5f93 !important;
    border-radius: 3px !important;
    background: linear-gradient(#3f7fbd, #28649c) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.open-link:visited,
.open-link:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* Inline edit fields */
.field-shell {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
}

.customer-list-edit {
    width: 100% !important;
    height: 22px !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #111 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    padding: 2px 4px !important;
}

.customer-list-edit:hover {
    border-color: #b8c7d9 !important;
    background: #ffffff !important;
}

.customer-list-edit:focus {
    outline: none !important;
    border-color: #2f70aa !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(47,112,170,0.16) !important;
}

.customer-list-edit.saving {
    background: #fff8d7 !important;
    border-color: #d6b656 !important;
}

.customer-list-edit.save-error {
    background: #ffe3e3 !important;
    border-color: #b94a48 !important;
}

/* This fixes the visible "Saved" text on every row */
.saved-bubble {
    position: absolute !important;
    right: 4px !important;
    top: -21px !important;
    z-index: 7000 !important;
    display: none !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    background: #eaf7df !important;
    border: 1px solid #7aa35a !important;
    color: #2e6b1f !important;
    font-size: 10px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.22) !important;
    pointer-events: none !important;
}

.field-shell.show-saved .saved-bubble {
    display: inline-block !important;
}

/* Sticky bottom footer */
.customer-bottom-spacer {
    height: 54px !important;
}

.customer-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3500 !important;
    background: linear-gradient(#edf5fc, #d7e6f5) !important;
    border-top: 1px solid #9fb6cc !important;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.16) !important;
    padding: 6px 12px !important;
}

.customer-footer-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 30px !important;
}

.customer-footer-count,
.customer-footer-sub {
    font-size: 12px !important;
    color: #25394f !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}

@media (max-width: 1000px) {
    .customer-toolbar {
        flex-wrap: wrap !important;
    }

    .search-form {
        flex-basis: 100% !important;
        margin-left: 0 !important;
    }

    .typeahead-wrap {
        max-width: none !important;
    }
}
/* =========================================================
   Customer Index Sticky Header Final Fix
   ========================================================= */

/* The table wrapper must NOT be the vertical scroll container.
   Otherwise sticky table headers float down inside the table. */
.customer-table-wrap {
    overflow: visible !important;
    width: 100% !important;
}

/* Main customer toolbar stays at top while scrolling */
.customer-sticky-panel {
    position: sticky !important;
    top: 0 !important;
    z-index: 5000 !important;
    background: #dfeaf5 !important;
}

/* Compact title inside the toolbar */
.customer-toolbar .toolbar-title {
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Keep toolbar compact and lined up */
.customer-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
}

/* Table header sticks under the customer toolbar/count strip */
.customer-table thead th {
    position: sticky !important;
    top: var(--customerStickyTop, 68px) !important;
    z-index: 4000 !important;
    background: linear-gradient(#d9e9f8, #bdd4ea) !important;
    border: 1px solid #9fb6cc !important;
}

/* Prevent a ghost/blank-looking header row */
.customer-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Keep table rows compact */
.customer-table tbody td {
    height: 24px !important;
    padding: 2px 4px !important;
    vertical-align: middle !important;
}

/* Keep editable fields compact */
.customer-table .customer-list-edit {
    height: 22px !important;
    font-size: 12px !important;
    padding: 2px 4px !important;
}

/* Stop the old global input rule from making list fields too tall */
.customer-table input,
.customer-table textarea,
.customer-table select {
    font-size: 12px !important;
    padding: 2px 4px !important;
}