/* ========================================
   BASE STYLES
   ======================================== */

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: 'Varela', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #f2f2f2;
}

body.no-scroll {
    overflow: hidden;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 400;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

hr {
    margin: 30px 0;
    height: 10px;
    background: #e8e8e8;
    border: 0;
}


/* ========================================
   CONTAINER & LAYOUT
   ======================================== */

.container {
    width: 100%;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
}

.clear-after::after {
    content: "";
    clear: both;
    display: block;
}

.flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}


/* ========================================
   WIDTH UTILITIES
   ======================================== */

.width-25 {
    width: 22.75%;
    margin-right: 3%;
    float: left;
}

.width-25:last-child {
    margin-right: 0;
}

.width-33 {
    width: 31.333%;
    margin-right: 3%;
    float: left;
}

.width-33:last-child {
    margin-right: 0;
}

.width-50 {
    float: left;
    width: 48.5%;
    margin-right: 3%;
}

.width-50:last-child {
    margin-right: 0;
}

.stretch {
    width: 100%;
}


/* ========================================
   SPACING UTILITIES
   ======================================== */

.margin-vert-30 {
    margin: 30px 0;
}

.margin-bot-30 {
    margin-bottom: 30px;
}

.border-bottom {
    border-bottom: 1px solid #ccc;
}

.small-txt {
    font-size: .8em;
}


/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-section-title {
    background: #0A2240;
    color: #fff;
    font-size: 24px;
    padding: 20px;
    margin-bottom: 0;
}

.form-section-content {
    border: 1px solid #0A2240;
    padding: 30px;
    margin-bottom: 30px;
}

.form-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.form-title-sm {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    margin-top: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
}

.form-item {
    margin-bottom: 20px;
}

.form-item label {
    margin-bottom: 8px;
    display: block;
}

.form-item label.cb {
    display: inline-block;
}

.form-item label.cb-fw {
    display: block;
}

.form-item.required label::before {
    content: "*";
    display: inline-block;
    margin-right: 3px;
    color: red;
}

.form-item.required label.cb::before,
.form-item.required label.cb-fw::before {
    display: none !important;
}

input[type=text],
input[type=date],
input[type=time],
input[type=number],
input[type=email],
input[type=password],
input[type=datetime-local],
select {
    font-size: 1em;
    padding: 10px;
    width: 100%;
    border: 1px solid #ccc;
}

input[readonly],
textarea[readonly] {
    background: #fff5f3;
}

textarea {
    font-size: 1em;
    padding: 10px;
    width: 100%;
    height: 125px;
    border: 1px solid #ccc;
}

.form-container input[type=text],
.form-container input[type=number],
.form-container input[type=email],
.form-container input[type=password],
.form-container input[type=time],
.form-container input[type=datetime-local],
.form-container select,
.form-container textarea {
    border: 1px solid #ccc;
    background: #f5f6f7;
    -webkit-box-shadow: inset 5px 5px 10px 0 rgba(0, 0, 0, .05);
    box-shadow: inset 5px 5px 10px 0 rgba(0, 0, 0, .05);
}

.form-lnk-list a {
    border: 3px solid #a8363a;
    color: #a8363a;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin-right: 5px;
    padding: 10px 15px;
}

.btn {
    display: inline-block;
    background: #de6326;
    color: #fff;
    text-align: center;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 1em;
    border-radius: 5px;
}

.btn:hover {
    background: #c7571f;
}

.btn-secondary {
    background: #546e7a;
    margin-left: 10px;
}

.btn-secondary:hover {
    background: #455a64;
}

.btn-danger {
    background: #c62828;
    margin-left: 10px;
}

.btn-danger:hover {
    background: #b71c1c;
}


/* ACTION NOTICE BANNER */
.action-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff5f0;
    border-left: 4px solid #de6326;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #4e3b00;
    line-height: 1.5;
}
.action-notice-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #de6326;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='5.5' r='1.5' fill='white'/%3E%3Crect x='8' y='8.5' width='2' height='5.5' rx='1' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 2px;
}

.action-notice-icon-warn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='8' y='4' width='2' height='7' rx='1' fill='white'/%3E%3Ccircle cx='9' cy='13.5' r='1.5' fill='white'/%3E%3C/svg%3E");
}

.action-notice-info {
    background: #eff6ff;
    border-left-color: #60a5fa;
    color: #1e40af;
}
.action-notice-info .action-notice-icon {
    background-color: #60a5fa;
}

/* Optional yield fields - info icon + hover/focus tooltip */
.form-item label.form-item-label-with-hint {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.field-info-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.field-info-hint-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: #de6326;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
    transition: opacity 0.15s ease;
    vertical-align: middle;
    flex-shrink: 0;
}

.field-info-hint-btn svg {
    display: block;
    width: 15px;
    height: 15px;
}

.field-info-hint-btn:hover,
.field-info-hint-btn:focus {
    opacity: 1;
    outline: none;
}

.field-info-hint-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(-50%);
    background: #2b2b2b;
    color: #fff;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 300;
    max-width: 230px;
    width: max-content;
    text-align: center;
    border-top: 3px solid #de6326;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.field-info-hint-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2b2b2b;
}

.field-info-hint:hover .field-info-hint-tooltip,
.field-info-hint:focus-within .field-info-hint-tooltip {
    display: block;
}

.action-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fdecea;
    border-left: 4px solid #c62828;
    border-radius: 4px;
    padding: 10px 14px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 13px;
    color: #7f1a1a;
    line-height: 1.5;
}
.action-error-icon {
    font-size: 17px;
    color: #c62828;
    flex-shrink: 0;
    margin-top: 1px;
}



/* ========================================
   HEADER STYLES (BASE)
   ======================================== */

header {
    background: #fff;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.header-col-1 {
    margin-right: 30px;
    padding: 15px 30px;
    border-right: 1px solid #ccc;
}

.header-col-1 img {
    display: block;
    width: 250px;
    height: auto;
}

.header-col-3 {
    width: 100%;
}

.header-col-3 input {
    padding: 20px;
    border: 1px solid #ccc;
    background: url(../images/search.png) #f2f2f2;
    background-repeat: no-repeat;
    background-size: auto 40%;
    background-position: 96% center;
    width: 100%;
}

.header-col-3 select {
    padding: 20px;
    border: 1px solid #ccc;
    background: #f2f2f2;
    width: 100%;
    font-size: 1em;
    font-weight: 700;
    color: #333;
}

.header-col-3 select:focus {
    outline: none;
    border-color: #d24629;
    background: #fff;
}

.header-col-4 {
    text-align: right;
    width: 100%;
    padding-right: 30px;
}



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

.main-nav {
    background: #d24629;
    padding: 15px;
    border-bottom: 5px solid #a8363a;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    display: inline-block;
    position: relative;
}

.main-nav ul li a {
    padding: 7px 15px;
    text-decoration: none;
    font-size: 1em;
    color: #fff;
    display: block;
    border-radius: 5px;
}

.main-nav ul li a:hover {
    color: #d24629;
    background: #fff;
}

.main-nav>ul>li:last-child {
    border-left: 1px solid #a8363a;
    padding-left: 15px;
}

.main-nav>ul>li:last-child>a {
    background: #a8363a;
    color: #fff;
}

.sub-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #a8363a;
    padding: 6px;
    width: 240px;
    border-radius: 6px;
    border: 2px solid #a8363a;
    z-index: 1000;
}

.sub-nav li {
    display: block;
    width: 100%;
}

.sub-nav li a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 1em;
    border-radius: 4px;
    background: none;
    color: #fff;
}

.has-sub:hover>.sub-nav {
    display: block;
}


/* ========================================
   PAGE TITLE
   ======================================== */

.page-title {
    background: url(../images/title-bg.png);
    background-size: cover;
    background-position: left center;
    padding: 30px;
    color: #fff;
    font-size: 30px;
}

.page-title-subinfo {
    font-size: .5em;
}

.room-type-container {
    background: #f2f2f2;
    padding: 7px 30px;
    font-size: .8em;
    position: relative;
}



/* ========================================
   LOGIN STYLES
   ======================================== */

.login-container {
    max-width: 500px;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
}

.login-container header {
    background: #fff;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.login-container .header-col-1 {
    display: inline-block;
    width: 100%;
    height: 120px;
    margin: 0 auto;
    padding: 30px 30px 0 30px;
    border-right: 0 solid #ccc;
    text-align: center;
}

.login-container .header-col-1 img {
    width: auto;
    height: 100%;
}


/* ========================================
   DASHBOARD ITEMS
   ======================================== */

.dash-item-container {
    display: flex;
    width: 100%;
}

.dash-item {
    flex: 1;
    min-width: 0;
    background: #fff;
    font-size: 30px;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 30px;
    text-align: left;
}

.dash-item:last-child {
    border-right: 0;
}

.dash-item span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.dash-item-20 {
    width: 20%;
    padding: 30px;
}

.dash-item-25 {
    width: 25%;
    padding: 30px;
}

.dash-item-33 {
    width: 33.333%;
    padding: 30px;
}



/* ========================================
   FILTERS
   ======================================== */

.grid-filters {
    margin: 25px 0;
}

.filter-container {
    background: #f2f2f2;
    padding: 5px;
}

.filter-container div {
    margin-right: 10px;
}

.filter-container div select {
    min-width: 200px;
}

.lab-toolbar-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    white-space: nowrap;
}

/* ========================================
   ADMIN DASHBOARD - FILTER BAR
   ======================================== */

.admin-filter-bar {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-filter-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-filter-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-filter-right input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #f2f2f2;
    min-width: 200px;
}

.admin-filter-right input[type="text"]:focus {
    outline: none;
    border-color: #d24629;
    background: #fff;
}

.filter-inline-label {
    font-weight: 600;
    font-size: .92em;
    white-space: nowrap;
    color: #444;
}

/* ========================================
   ADMIN DASHBOARD - GENETICS STATUS BADGES
   ======================================== */

.genetics-status {
    display: inline-block;
    font-size: .82em;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: .02em;
}

.status-pending  { background: #fff3cd; color: #856404; }
.status-opened   { background: #d1ecf1; color: #0c5460; }
.status-approved { background: #d4edda; color: #155724; }
.status-rejected { background: #f8d7da; color: #721c24; }

/* ========================================
   ADMIN DASHBOARD - TABLE PAGINATION
   ======================================== */

.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 4px;
    font-size: .9em;
}

.pagination-left,
.pagination-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-btn {
    padding: 4px 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #444;
    text-decoration: none;
    background: #f5f5f5;
}

.pagination-btn:hover {
    background: #e8e8e8;
    border-color: #aaa;
}

.pagination-btn.disabled {
    color: #aaa;
    pointer-events: none;
    border-color: #e0e0e0;
    background: #fafafa;
}

.pagination-page {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    min-width: 28px;
    text-align: center;
}

.pagination-page.active {
    border-color: #d24629;
    color: #d24629;
    font-weight: 700;
    background: #fff;
}


/* ========================================
   TESTING LAB - ACTION SECTION HELPERS
   ======================================== */

.tl-test-category-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.tl-test-category-row label {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.tl-test-category-row select {
    flex: 1;
    max-width: 340px;
}

.tl-qa-tests-box {
    border: 1px solid #d8d4d0;
    border-radius: 4px;
    background: #f9f8f7;
    padding: 16px 18px 18px;
    margin-bottom: 20px;
}

.tl-qa-tests-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #444;
    margin-bottom: 6px;
}

.tl-qa-tests-desc {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px;
}

.tl-qa-tests-box label.cb-fw {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-qa-tests-box label.cb-fw:last-child {
    margin-bottom: 0;
}

.tl-qa-tests-box input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
    accent-color: #2563eb;
}

/* ---- Wizard step indicator ---- */
.tl-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    row-gap: 8px;
    margin-bottom: 22px;
}

.tl-wizard-step {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: #ebebeb;
    color: #999;
    cursor: pointer;
    user-select: none;
}

.tl-wizard-step:hover {
    background: #dedede;
    color: #666;
}

.tl-wizard-step.active {
    background: #de6326;
    color: #fff;
    cursor: default;
}

.tl-wizard-step.active:hover {
    background: #de6326;
    color: #fff;
}

.tl-wizard-step-arrow {
    color: #ccc;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

/* ---- Potency panel ---- */
.tl-panel-section {
    margin-bottom: 20px;
}

.tl-panel-heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: underline;
    margin-bottom: 14px;
    color: #444;
}

.tl-potency-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.tl-potency-table-wrap {
    flex: 1;
    min-width: 0;
}

/* Compact cell padding for the potency table */
.tl-potency-table th,
.tl-potency-table td {
    padding: 8px 10px !important;
    white-space: nowrap;
}

/* LOQ column - narrow, centered, muted */
.tl-potency-table th.tl-col-loq,
.tl-potency-table td.tl-col-loq {
    width: 58px;
    text-align: center;
    color: #777;
    font-size: .88em;
}

/* Result input cells */
.tl-potency-table td input[type="text"] {
    width: 80px;
    padding: 4px 7px;
    font-size: .92em;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: right;
}

.tl-potency-totals {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid #e8e4e0;
}

.tl-potency-totals .form-title-sm {
    margin-bottom: 14px;
}

/* 3-column override for the step-2 sample summary */
.tl-sample-summary-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* ---- Current Weight highlight ---- */
.tl-weight-highlight {
    background: #fffde7 !important;
    border-color: #d4a800 !important;
}

/* ---- Analysis block - notice stacked above table ---- */
.tl-analysis-block {
    margin-bottom: 20px;
}

/* ---- Analysis table - compact, no sticky first col ---- */
.tl-analysis-table th,
.tl-analysis-table td {
    padding: 8px 10px !important;
    white-space: normal;
    font-size: .88em;
}

.tl-analysis-table th:first-child,
.tl-analysis-table td:first-child {
    position: static;
    box-shadow: none;
    background: transparent;
}

.tl-analysis-table tbody tr:hover td:first-child {
    background: #f2f2f2;
}

/* ---- Analysis status badges ---- */
.tl-status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 3px;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
}

.tl-status-completed {
    background: #d4edda;
    color: #155724;
    border: 1px solid #b8ddc8;
}

.tl-status-pass {
    background: #d4edda;
    color: #155724;
    border: 1px solid #b8ddc8;
}

.tl-status-fail {
    background: #fdecea;
    color: #7f1a1a;
    border: 1px solid #e8b4b4;
}

.tl-status-incomplete {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.tl-status-pending-dash {
    color: #aaa;
    font-size: .9em;
}

/* ---- In-table section divider row (e.g. Visual Inspection A / B) ---- */
.tl-table-section-row td {
    background: #f0eeec !important;
    font-size: .78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #555;
    padding: 6px 10px !important;
    border-top: 2px solid #ddd;
}

.tl-table-section-row:first-child td {
    border-top: none;
}

/* ---- Microbiological panel table - wider result/limit inputs ---- */
.tl-micro-table td input[type="text"],
.tl-micro-table td input[type="number"],
.tl-micro-table td select {
    width: 110px;
    padding: 4px 7px;
    font-size: .92em;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Solvent panel: wider select and matching value input */
.solvent-result-select {
    width: 160px !important;
}

.tl-micro-table td .solvent-result-value {
    width: 160px;
    display: block;
}


/* ---- Step footer layout ---- */
.tl-etr-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tl-etr-footer--split {
    justify-content: space-between;
}

.tl-etr-footer--split > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tl-etr-footer .btn-secondary {
    margin-left: 0;
}


/* "Test Type Requested" row inside recv-manifest-details */
.recv-route {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e8e4e0;
    font-size: .9em;
}

.tl-potency-table th,
.tl-potency-table td {
    white-space: nowrap;
    padding: 8px 10px;
}

.tl-potency-table td input[type="text"] {
    padding: 5px 7px;
    font-size: 0.9em;
    width: 90px;
}


/* Transfers - search + actions row (inner tabs) */
.transfers-toolbar {
    margin-bottom: 12px;
    padding: 10px 12px;
}

.transfers-toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.transfers-toolbar-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    flex: 1 1 auto;
    min-width: min(100%, 14rem);
}

.transfers-toolbar-search label {
    font-size: 0.85em;
    font-weight: 600;
    color: #0e0d1b;
    letter-spacing: 0.02em;
}

.transfers-toolbar-search input[type="search"] {
    flex: 1 1 12rem;
    max-width: 28rem;
    min-width: 10rem;
    padding: 8px 10px;
    font-size: 0.95em;
    border: 1px solid #ccc;
    background: #fff;
}

.transfers-toolbar-search input[type="search"]::placeholder {
    color: #888;
}

.transfers-toolbar-actions {
    flex: 0 0 auto;
}

a.transfers-actions-btn {
    white-space: nowrap;
}

/* Create Manifest tab - readonly vs user field grouping */
.manifest-create-tab .manifest-readonly-block {
    margin: 12px 0 18px;
    padding: 14px 16px 16px;
    border: 1px solid #e0dcd8;
    border-radius: 6px;
    background: #faf8f6;
}

.manifest-create-tab .manifest-readonly-block .form-title-sm {
    margin-top: 0;
    margin-bottom: 12px;
    color: #4a4540;
}

.manifest-create-tab .manifest-user-block {
    margin: 12px 0 18px;
}

.manifest-create-tab .manifest-field-hint {
    font-size: 0.85em;
    color: #555;
    margin: -6px 0 12px;
    line-height: 1.45;
}

.manifest-create-tab .manifest-helper {
    font-size: 0.85em;
    color: #555;
    margin: 0 0 10px;
    line-height: 1.45;
}

.manifest-create-tab .manifest-dest-combo {
    margin: 12px 0 18px;
    padding: 14px 16px 16px;
    border: 1px dashed #b8b3ad;
    border-radius: 6px;
    background: #fff;
}

.manifest-create-tab .manifest-dest-combo-header {
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6a635c;
    margin: 0 0 12px;
}

.manifest-create-tab .manifest-dest-combo-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.manifest-create-tab .manifest-dest-combo-inner .form-item {
    flex: 1 1 220px;
    margin-bottom: 0;
}

.manifest-create-tab .manifest-dest-combo-connector {
    flex: 0 0 auto;
    align-self: center;
    padding-bottom: 8px;
    font-size: 0.85em;
    color: #888;
    white-space: nowrap;
}

.manifest-create-tab .manifest-schedule-optional {
    margin: 16px 0 0;
    padding: 14px 16px 16px;
    border: 1px solid #d9d4cf;
    border-radius: 6px;
    background: #fcfcfb;
}

.manifest-create-tab .manifest-schedule-optional .form-title-sm {
    margin-top: 0;
    margin-bottom: 6px;
    color: #5c574f;
}

.manifest-create-tab .manifest-optional-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6a635c;
    background: #ebe8e4;
    border-radius: 4px;
    vertical-align: middle;
}

.manifest-create-tab .manifest-create-actions {
    margin-top: 8px;
}

.manifest-create-tab .manifest-next-step-callout {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-left: 4px solid #7a6fa8;
    background: #f5f3fa;
    font-size: 0.92em;
    line-height: 1.5;
    color: #3a3540;
}


/* ========================================
   DRIVERS & VEHICLES TAB
   ======================================== */

.dv-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px 22px 18px;
    margin-bottom: 20px;
    background: #fff;
}

.dv-card-title {
    font-weight: 700;
    font-size: .95em;
    color: #333;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 2px solid #f0f0f0;
}

.dv-card-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 16px;
    color: #888;
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.dv-card-divider::before,
.dv-card-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}

.dv-mode-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.dv-mode-bar .btn {
    margin-left: 0;
}

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

.main-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    background: #fff;
}

.main-item {
    padding: 30px;
    border-right: 1px solid #ccc;
}

.main-item:last-child {
    border-right: 0;
}

.main-item-25 {
    width: 25%;
}

.main-item-75 {
    width: 75%;
}

.main-item-100 {
    width: 100%;
}



/* ========================================
   BREADCRUMBS & PROFILE META
   ======================================== */

.breadcrumbs {
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 30px;
}

.breadcrumbs a {
    font-size: .8em;
    text-transform: uppercase;
    color: #0e0d1b;
    text-decoration: none;
}

.profile-meta {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.profile-meta li {
    display: inline-block;
    margin-right: 10px;
    border-right: 1px solid #ccc;
    padding-right: 10px;
}

.profile-meta li:last-child {
    border-right: 0;
}



/* ========================================
   SUB NAVIGATION
   ======================================== */

.side-title {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
}

.side-title span {
    display: inline-block;
    border-bottom: 3px solid #de6326;
    padding-bottom: 5px;
}

.sub-navigation {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-navigation li {
    border-bottom: 1px solid #ccc;
}

.sub-navigation li a {
    padding: 15px 0;
    display: block;
    text-decoration: none;
    color: #2c65b9;
}

.sub-navigation li a:hover {
    background: #f2f2f2;
    padding: 15px;
}



/* ========================================
   TABLE STYLES
   ======================================== */

.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.main-table {
    width: 100%;
    border-collapse: collapse;
}

.main-table th {
    text-align: left;
    font-size: .8em;
    padding: 10px;
    border-bottom: 3px solid #0e0d1b;
    white-space: nowrap;
}

.main-table tbody tr:hover {
    background: #f2f2f2;
}

.main-table.small td {
    padding: 10px 5px;
}

.main-table td {
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
}

.main-table th:first-child,
.main-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}

.col-checkbox {
    width: 45px;
    min-width: 45px;
    max-width: 45px;
}

.main-table thead th:first-child {
    z-index: 2;
}

.main-table tbody tr:hover td:first-child {
    background: #f2f2f2;
}

/* Tables that need two sticky columns - opt-in with this class */
.main-table.sticky-cols-2 th:nth-child(2),
.main-table.sticky-cols-2 td:nth-child(2) {
    position: sticky;
    left: 45px;
    z-index: 1;
    background: #fff;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
}

.main-table.sticky-cols-2 thead th:nth-child(2) {
    z-index: 2;
}

.main-table.sticky-cols-2 tbody tr:hover td:nth-child(2) {
    background: #f2f2f2;
}

.main-table-action-bar {
    background: #f2f2f2;
    padding: 5px;
    margin: 15px 0;
}

/* Hint icons/tooltips inside the horizontally-scrollable table wrapper */
.table-scroll-wrapper .field-info-hint {
    margin-left: 5px;
    vertical-align: -2px;
}

.table-scroll-wrapper .field-info-hint-tooltip {
    max-width: none;
}

/* Column-header tooltips render below the header so they don't get clipped
   by the table-scroll-wrapper's top edge (overflow-x: auto coerces
   overflow-y to auto, which would otherwise hide the tooltip body).
   Also cap the width so the text wraps instead of overflowing the page
   container on the right when the column sits near the right edge. */
.table-scroll-wrapper thead .field-info-hint-tooltip {
    bottom: auto;
    top: calc(100% + 9px);
    max-width: 280px;
    white-space: normal;
}

.table-scroll-wrapper thead .field-info-hint-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #2b2b2b;
}

/* Tables inside action sections - no sticky columns, no forced nowrap */
.action-section .main-table th,
.action-section .main-table td {
    white-space: normal;
}

.action-section .main-table th:first-child,
.action-section .main-table td:first-child {
    position: static;
    box-shadow: none;
}

/* Transfers - manifest list (multi-line cells + manifest links) */
.transfers-manifest-table td.cell-multiline {
    white-space: normal;
    vertical-align: top;
    max-width: 18rem;
    line-height: 1.35;
}

.transfers-manifest-table .license-sub {
    font-size: 0.85em;
    color: #555;
}


.grid-currency,
th.grid-currency {
    text-align: right;
}

td.grid-currency {
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.status-lnk {
    display: block;
    width: 70px;
    border: 3px solid #ccc;
    background: #ccc;
    position: relative;
    height: 30px;
    border-radius: 50px;
}

.status-active {
    background: limegreen;
    border: 3px solid limegreen;
}

.status-active::before {
    width: 60%;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    position: absolute;
    content: "";
    display: block;
    border-radius: 50px;
}

.status-inactive::before {
    width: 60%;
    top: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    position: absolute;
    content: "";
    display: block;
    border-radius: 50px;
}


/* ========================================
   TABS
   ======================================== */

.tab-container {
    background: #f2f2f2;
    padding: 0 30px;
    border-bottom: 1px solid #ccc;
    position: relative;
}

.tabs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tabs li {
    display: inline-block;
}

.tabs li a {
    display: block;
    padding: 15px 0;
    color: #333;
    margin-right: 15px;
    text-decoration: none;
    font-size: 1em;
    border-bottom: 5px solid rgba(0, 102, 191, 0);
}

.tabs li a.active {
    border-bottom: 5px solid #d24629;
    color: #d24629;
}

.tab-content {
    display: none;
}

.tab-content-1 {
    display: block;
}

.tab-search {
    position: absolute;
    top: 5px;
    right: 30px;
}

.tab-search input {
    width: 300px;
}



/* ========================================
   MODAL STYLES
   ======================================== */

.modal {
    background: #0e0d1ba7;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 100;
}

.modal-content {
    background: #fff;
    width: 1000px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1000px;
    padding: 30px;
    -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
    overflow: auto;
}

.modal-content-narrow {
    width: 540px;
    right: -540px;
}

.modal-content-1 {
    display: block;
}

.manifest-details-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}


.dv-driver-new-affiliation-step .dv-driver-new-intro {
    margin-bottom: 14px;
    font-size: 0.95em;
}

.dv-driver-new-form-fields {
    border-top: 1px solid #ddd;
    margin-top: 20px;
    padding-top: 20px;
}

/* ========================================
   LIFECYCLE EVENTS (TABLE)
   ======================================== */

.lc-events {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    cursor: default;
}

.lc-event {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.3;
}

.lc-destruction {
    background: #fff5f0;
    border: 1px solid #de6326;
    color: #92400e;
}

a.lc-destruction:hover {
    background: #ffe8dc;
}

.lc-partial-harvest {
    background: #f5f3ff;
    border: 1px solid #a78bfa;
    color: #5b21b6;
}

a.lc-partial-harvest:hover {
    background: #ede9fe;
}

.lc-partial-fresh-frozen {
    background: #eff6ff;
    border: 1px solid #60a5fa;
    color: #1e40af;
}

a.lc-partial-fresh-frozen:hover {
    background: #dbeafe;
}

.lc-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #2b2b2b;
    color: #fff;
    border-radius: 4px;
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
    z-index: 200;
    pointer-events: none;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.lc-tooltip strong {
    display: block;
    font-size: 12px;
    margin-bottom: 2px;
}

.lc-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2b2b2b;
}

.lc-event:hover .lc-tooltip {
    display: flex;
}


/* ========================================
   ITEM STATUS BADGES (MODAL)
   ======================================== */

.item-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.item-status-badge {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.item-status-destruction {
    background: #fff5f0;
    border: 1px solid #de6326;
    color: #92400e;
}

.item-status-partial-harvest {
    background: #f5f3ff;
    border: 1px solid #a78bfa;
    color: #5b21b6;
}

.item-status-partial-fresh-frozen {
    background: #eff6ff;
    border: 1px solid #60a5fa;
    color: #1e40af;
}


.modal-subtitle {
    margin: -5px 0 15px;
    font-size: 17px;
    color: #777;
    padding: 5px 0;
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    line-height: 1;
    color: #666;
    text-decoration: none;
}

/* Manufacturing confirmation overlay (stacked above inventory drawer modal) */
.mfg-extraction-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 250;
    background: #0e0d1ba7;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mfg-extraction-confirm-overlay.mfg-extraction-confirm-overlay-open {
    display: flex;
}

.mfg-extraction-confirm-dialog {
    background: #fff;
    max-width: 520px;
    width: 100%;
    padding: 24px 28px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.promote-container,
.new-plant-container,
.plant-modal-content,
.harvest-details-readonly {
    display: none;
}

.plant-modal-content-1 {
    display: block;
}


/* ========================================
   BUSINESS SELECTOR PLACEHOLDER
   ======================================== */

.business-selector-placeholder {
    text-align: center;
    padding: 60px 30px;
    background: #f5f6f7;
    border: 2px dashed #ccc;
    border-radius: 8px;
    margin: 30px 0;
}

.business-selector-placeholder .placeholder-content h3 {
    color: #666;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.business-selector-placeholder .placeholder-content p {
    color: #999;
    font-size: 1.1em;
    margin-bottom: 30px;
}

.business-selector-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

.business-selector-wrapper select {
    padding: 20px;
    border: 1px solid #ccc;
    background: #fff;
    width: 100%;
    font-size: 1em;
    font-weight: 700;
    color: #333;
    border-radius: 4px;
}

.business-selector-wrapper select:focus {
    outline: none;
    border-color: #d24629;
    box-shadow: 0 0 5px rgba(210, 70, 41, 0.3);
}

/* Inline Business Selector */
.business-selector-inline {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.business-selector-inline label {
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    margin: 0;
}

.business-selector-inline select {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 1em;
    font-weight: 600;
    color: #333;
    border-radius: 4px;
    max-width: 400px;
}

.business-selector-inline select:focus {
    outline: none;
    border-color: #d24629;
    box-shadow: 0 0 5px rgba(210, 70, 41, 0.3);
}


/* ========================================
   LABEL PREVIEW
   ======================================== */

.label-preview {
    display: inline-flex;
    flex-direction: column;
    border: 2px solid #333;
    border-radius: 6px;
    padding: 18px 22px;
    background: #fff;
    gap: 14px;
    min-width: 280px;
    max-width: 340px;
}

.label-barcode {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.label-barcode-bars {
    height: 48px;
    background: repeating-linear-gradient(
        90deg,
        #111 0px, #111 2px,
        #fff 2px, #fff 4px,
        #111 4px, #111 5px,
        #fff 5px, #fff 8px,
        #111 8px, #111 11px,
        #fff 11px, #fff 13px,
        #111 13px, #111 14px,
        #fff 14px, #fff 17px,
        #111 17px, #111 20px,
        #fff 20px, #fff 22px,
        #111 22px, #111 23px,
        #fff 23px, #fff 26px,
        #111 26px, #111 28px,
        #fff 28px, #fff 29px,
        #111 29px, #111 32px,
        #fff 32px, #fff 35px,
        #111 35px, #111 37px,
        #fff 37px, #fff 38px,
        #111 38px, #111 40px,
        #fff 40px, #fff 100%
    );
    margin-bottom: 6px;
}

.label-barcode-num {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #333;
}

.label-fields {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.label-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    gap: 20px;
}

.label-key {
    color: #888;
    white-space: nowrap;
}

.label-val {
    font-weight: 600;
    color: #222;
    text-align: right;
}


/* ========================================
   GROUPS LIST
   ======================================== */

.groups-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e0e0e0;
}

.groups-list-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 0;
}

.groups-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.groups-list-info {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.groups-list-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.groups-list-meta {
    font-size: 13px;
    color: #999;
}

.groups-list-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.group-move-select {
    width: auto;
    margin: 0;
    font-size: 13px;
    padding: 5px 8px;
}

.group-delete-lnk {
    color: #c0392b;
}

.group-delete-lnk:hover {
    color: #96281b;
}

.group-add-confirm {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
}

.group-edit-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
}

.group-edit-form input[type=text] {
    flex: 1;
    margin: 0;
}

.back-to-groups-lnk {
    display: inline-block;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
    text-decoration: none;
}

.back-to-groups-lnk:hover {
    color: #333;
}

.manage-group-name-row {
    margin-bottom: 20px;
}

.manage-group-name-display {
    display: flex;
    align-items: center;
    gap: 15px;
}

.manage-group-name-display .form-title {
    margin: 0;
}

.manage-group-reassign {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    font-size: 14px;
}

.manage-group-reassign select {
    width: auto;
    margin: 0;
}

.btn-sm {
    display: inline-block;
    background: #de6326;
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    text-decoration: none;
    font-size: 13px;
    border-radius: 5px;
    white-space: nowrap;
}

.btn-sm:hover {
    background: #c7571f;
}


/* ========================================
   RED FLAG REPORT BUILDER
   ======================================== */

.rf-builder-box {
    border: 1px solid #d8d4d0;
    border-radius: 4px;
    background: #f9f8f7;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.rf-builder-box input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
    accent-color: #2563eb;
}

.rf-tables-box {
    max-height: 300px;
    overflow-y: auto;
}

.rf-tree,
.rf-tree-children {
    list-style: none;
    padding-left: 0;
}

.rf-tree {
    margin: 0;
}

.rf-tree-children {
    margin: 4px 0 0 22px;
}

.rf-tree li {
    padding: 3px 0;
    font-size: 14px;
    color: #333;
}

.rf-tree-toggle {
    display: inline-block;
    width: 14px;
    color: #2563eb;
    text-decoration: none;
}

.rf-fields-box {
    min-height: 70px;
}

.rf-chip {
    display: inline-block;
    background: #fff;
    border: 1px solid #d8d4d0;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 0 6px 6px 0;
    font-size: 14px;
}

.rf-chip-remove {
    margin-left: 6px;
    color: #999;
    font-weight: 700;
    text-decoration: none;
}

.rf-chip-remove:hover {
    color: #c62828;
}

.rf-condition {
    padding: 4px 0;
    font-size: 14px;
    color: #333;
}

.rf-btn-block {
    display: block;
    text-align: center;
    margin: 12px 0 0;
}

.rf-cond-builder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.rf-cond-ctrl {
    flex: 1 1 110px;
}

.rf-cond-ctrl-btn {
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.rf-cond-ctrl-btn .btn-secondary {
    margin-left: 0;
}

.rf-add-btns {
    display: flex;
    gap: 10px;
}

.rf-add-btns .btn {
    flex: 1;
}

.rf-cond-builder label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #444;
}

.rf-param {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 6px 0;
}

.rf-param label {
    display: block;
    font-size: 12px;
    color: #444;
    margin-bottom: 2px;
}

.rf-param input,
.rf-param select {
    width: 140px;
    padding: 6px 8px;
    font-size: 13px;
}

.rf-param-wide input {
    width: 220px;
}

/* Pre-Built Reports table: fit a full row on screen without overflow. */
#rf-prebuilt-table {
    table-layout: fixed;
}

#rf-prebuilt-table th,
#rf-prebuilt-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
}

#rf-prebuilt-table th:nth-child(1),
#rf-prebuilt-table td:nth-child(1) { width: 18%; }

#rf-prebuilt-table th:nth-child(2),
#rf-prebuilt-table td:nth-child(2) { width: 13%; }

#rf-prebuilt-table th:nth-child(3),
#rf-prebuilt-table td:nth-child(3) { width: 29%; }

#rf-prebuilt-table th:nth-child(4),
#rf-prebuilt-table td:nth-child(4) { width: 32%; }

#rf-prebuilt-table th:nth-child(5),
#rf-prebuilt-table td:nth-child(5) { width: 8%; }


/* ========================================
   RESPONSIVE DESIGN - TABLET
   ======================================== */

@media screen and (max-width: 1024px) {
    /* Header adjustments */
    header {
        flex-wrap: wrap;
    }

    .header-col-1 {
        border-right: none;
        border-bottom: 1px solid #ccc;
        width: 100%;
        text-align: center;
        margin-right: 0;
    }

    .header-col-3 {
        order: 3;
        padding: 15px 30px;
    }

    .header-col-4 {
        padding: 15px 30px;
        text-align: center;
    }

    /* Navigation */
    .main-nav {
        padding: 10px;
    }

    .main-nav ul li a {
        padding: 10px 12px;
        font-size: 0.95em;
    }

    /* Dashboard items */
    .dash-item-container {
        flex-wrap: wrap;
    }

    .dash-item-20,
    .dash-item-25,
    .dash-item-33 {
        width: 50%;
        border-right: 1px solid #ccc;
    }

    .dash-item-20:nth-child(2n),
    .dash-item-25:nth-child(2n),
    .dash-item-33:nth-child(2n) {
        border-right: 0;
    }

    /* Main content layout */
    .main-content {
        flex-wrap: wrap;
    }

    .main-item-25,
    .main-item-75 {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #ccc;
    }

    .main-item-25:last-child,
    .main-item-75:last-child {
        border-bottom: 0;
    }

    /* Width utilities */
    .width-25,
    .width-33,
    .width-50 {
        width: 48.5%;
        margin-right: 3%;
    }

    .width-25:nth-child(2n),
    .width-33:nth-child(2n),
    .width-50:nth-child(2n) {
        margin-right: 0;
    }

    /* Tab search */
    .tab-search {
        position: static;
        padding: 10px 0;
    }

    .tab-search input {
        width: 100%;
    }

    .tab-container {
        padding: 0 15px;
    }

    /* Modal */
    .modal-content {
        width: 90%;
        right: -90%;
    }

    .modal-content-narrow {
        width: 90%;
        right: -90%;
    }

    /* Reduce padding */
    .main-item,
    .form-section-content {
        padding: 20px;
    }

    .page-title,
    .room-type-container {
        padding: 20px;
    }
}


/* ========================================
   RESPONSIVE DESIGN - MOBILE
   ======================================== */

@media screen and (max-width: 768px) {
    /* Header */
    .header-col-1 img {
        width: 180px;
    }

    .header-col-3,
    .header-col-4 {
        padding: 10px 15px;
    }

    /* Navigation - hamburger friendly */
    .main-nav {
        padding: 10px;
    }

    .main-nav ul li {
        display: block;
        width: 100%;
    }

    .main-nav ul li a {
        padding: 12px 10px;
        border-radius: 0;
    }

    .main-nav>ul>li:last-child {
        border-left: none;
        border-top: 1px solid #a8363a;
        padding-left: 0;
    }

    .sub-nav {
        position: static;
        width: 100%;
        border-radius: 0;
        margin-top: 5px;
    }

    /* Dashboard items */
    .dash-item-20,
    .dash-item-25,
    .dash-item-33 {
        width: 100%;
        border-right: 0;
        font-size: 24px;
        padding: 20px 15px;
    }

    /* Width utilities - all full width on mobile */
    .width-25,
    .width-33,
    .width-50 {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .width-25:last-child,
    .width-33:last-child,
    .width-50:last-child {
        margin-bottom: 0;
    }

    /* Main content */
    .main-item {
        padding: 15px;
    }

    /* Forms */
    .form-section-title {
        padding: 15px;
        font-size: 20px;
    }

    .form-section-content {
        padding: 15px;
    }

    /* Page title */
    .page-title {
        padding: 20px 15px;
        font-size: 24px;
    }

    /* Filter container */
    .filter-container {
        padding: 10px;
    }

    .filter-container div {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .filter-container div select {
        width: 100%;
        min-width: 100%;
    }

    /* Tabs */
    .tabs li {
        display: block;
        width: 100%;
    }

    .tabs li a {
        margin-right: 0;
        padding: 12px 0;
        border-bottom: 1px solid #ccc;
    }

    .tabs li a.active {
        border-bottom: 1px solid #ccc;
        border-left: 5px solid #d24629;
        padding-left: 10px;
    }

    .tab-container {
        padding: 0 10px;
    }

    /* Tables */
    .main-table th,
    .main-table td {
        padding: 10px 8px;
        font-size: 0.9em;
    }

    /* Modal */
    .modal-content {
        width: 100%;
        right: -100%;
        padding: 20px 15px;
    }

    /* Profile meta - stack on mobile */
    .profile-meta li {
        display: block;
        border-right: none;
        border-bottom: 1px solid #ccc;
        padding-right: 0;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .profile-meta li:last-child {
        border-bottom: none;
    }

    /* Breadcrumbs */
    .breadcrumbs {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    /* Reduce margins */
    hr {
        margin: 20px 0;
    }

    .margin-vert-30 {
        margin: 20px 0;
    }

    .margin-bot-30 {
        margin-bottom: 20px;
    }

    /* Business selector placeholder */
    .business-selector-placeholder {
        padding: 40px 20px;
    }
    
    /* Business selector inline - stack on mobile */
    .business-selector-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .business-selector-inline select {
        max-width: 100%;
        width: 100%;
    }
}


/* ========================================
   RECEIVE TRANSFER MODAL
   ======================================== */

/* Manifest details read-only block */
.recv-manifest-details {
    border: 1px solid #e0dcd8;
    border-radius: 6px;
    background: #faf8f6;
    padding: 16px 18px 18px;
    margin-bottom: 4px;
}

.recv-manifest-details > .form-title-sm {
    margin-top: 0;
    color: #4a4540;
}

.recv-details-group {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e8e4e0;
}

.recv-details-group > .form-title-sm {
    margin-top: 0;
    margin-bottom: 10px;
    color: #6a635c;
}

.recv-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 20px;
}

.recv-details-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.recv-detail-item {
    min-width: 0;
}

.recv-detail-label {
    display: block;
    font-size: .78em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}

.recv-detail-value {
    display: block;
    font-size: .95em;
    font-weight: 600;
    color: #222;
    margin: 0;
    word-break: break-word;
}

.recv-detail-value--route {
    font-weight: 400;
    font-size: .9em;
    color: #444;
    line-height: 1.5;
}

.recv-route {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e8e4e0;
}

/* Status badge in modal subtitle */
.recv-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: .8em;
    font-weight: 600;
    vertical-align: middle;
}

.recv-status-ready {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #15803d;
}

.recv-status-rejected {
    background: #fdecea;
    border: 1px solid #c62828;
    color: #7f1a1a;
}

.recv-status-partial {
    background: #fff5f0;
    border: 1px solid #de6326;
    color: #92400e;
}

.recv-status-draft {
    background: #f1f5f9;
    border: 1px solid #94a3b8;
    color: #475569;
}

/* Items section */
.recv-items-section > .form-title-sm {
    margin-bottom: 12px;
}

/* Override global sticky-first-col for this table */
.recv-items-table th:first-child,
.recv-items-table td:first-child {
    position: static;
    left: auto;
    z-index: auto;
    background: transparent;
}

.recv-items-table tbody tr:hover td:first-child {
    background: transparent;
}

/* Allow text to wrap and tighten up so the table fits without scrolling */
.recv-items-table th,
.recv-items-table td {
    white-space: normal;
    padding: 10px 8px;
    font-size: .875em;
    vertical-align: top;
}

.recv-items-table th {
    vertical-align: bottom;
}

.recv-decision-col {
    width: 160px;
    min-width: 140px;
}

.recv-items-table .recv-decision-select {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    font-size: .9em;
}

/* Detail sub-rows */
.recv-item-detail-row > td {
    padding: 0 !important;
    background: #fafafa !important;
    border-bottom: 2px solid #e0dcd8;
    white-space: normal;
}

.recv-item-detail-row:hover > td {
    background: #fafafa !important;
}

.recv-item-detail-cell {
    padding: 0 !important;
}

.recv-partial-fields,
.recv-reject-fields {
    padding: 12px 16px;
}

.recv-partial-fields {
    border-left: 3px solid #de6326;
    background: #fff8f5;
}

.recv-reject-fields {
    border-left: 3px solid #c62828;
    background: #fef9f9;
}

.recv-conditional-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-start;
}

.recv-conditional-field {
    flex: 0 0 auto;
}

.recv-conditional-field--wide {
    flex: 1 1 240px;
}

.recv-conditional-field label {
    display: block;
    font-size: .85em;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.recv-optional {
    font-weight: 400;
    color: #888;
}

.recv-conditional-field input[type="number"] {
    width: 100px;
    padding: 6px 8px;
    font-size: .9em;
    border: 1px solid #ccc;
}

.recv-conditional-field textarea {
    width: 100%;
    min-width: 200px;
    height: 60px;
    padding: 6px 8px;
    font-size: .9em;
    border: 1px solid #ccc;
    resize: vertical;
}

/* Summary panel */
.recv-summary {
    background: #f9f9f8;
    border: 1px solid #e0dcd8;
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 4px;
}

.recv-summary > .form-title-sm {
    margin-top: 0;
    color: #4a4540;
    margin-bottom: 6px;
}

.recv-summary-hint {
    font-size: .82em;
    color: #888;
    margin: 0 0 10px;
}

.recv-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recv-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .88em;
    font-weight: 600;
}

.recv-badge--received {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #15803d;
}

.recv-badge--partial {
    background: #fff5f0;
    border: 1px solid #de6326;
    color: #92400e;
}

.recv-badge--rejected {
    background: #fdecea;
    border: 1px solid #c62828;
    color: #7f1a1a;
}

.recv-badge--pending {
    background: #f4f4f5;
    border: 1px solid #ccc;
    color: #555;
}

/* Footer actions */
.recv-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.recv-footer .btn {
    margin-left: 0;
}

/* Narrow grid on smaller modal panel widths */
@media screen and (max-width: 700px) {
    .recv-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .recv-details-grid--2col {
        grid-template-columns: 1fr;
    }
}

/* ── Send Transfer modal item tables ──────────────────────────────────── */
.send-items-table th:first-child,
.send-items-table td:first-child {
    position: static;
    left: auto;
    z-index: auto;
    background: transparent;
}

.send-items-table tbody tr:hover td:first-child {
    background: transparent;
}

.send-items-table th,
.send-items-table td {
    white-space: normal;
    padding: 8px 7px;
    font-size: .825em;
    vertical-align: top;
}

.send-items-table th {
    vertical-align: bottom;
}

.send-items-table td.send-item-id {
    word-break: break-all;
    min-width: 80px;
    max-width: 110px;
    font-size: .78em;
    color: #555;
}

.send-items-table td.send-item-exp {
    white-space: nowrap;
}

.send-items-table td:last-child {
    white-space: nowrap;
    text-align: right;
}