* {
    box-sizing: border-box;
}

:root {
    --app-bg: #07111d;
    --app-bg-2: #0b1a2b;
    --surface: #0f2136;
    --surface-soft: #132a45;
    --surface-muted: #0b1828;
    --line: #203a59;
    --line-strong: #2f577e;
    --text: #eaf2ff;
    --text-soft: #c5d3e6;
    --text-muted: #8ea3bd;
    --heading: #ffffff;
    --sidebar-bg: #06111f;
    --sidebar-hover: #10243c;
    --sidebar-active: #0f3b6d;
    --button-bg: #12395f;
    --button-bg-hover: #185083;
    --button-secondary: #0b1828;
    --button-secondary-hover: #10243c;
    --danger: #e03131;
    --success: #16a34a;
    --warning: #f59e0b;
    --search-blue: #56b6ff;
    --reset-red: #ff4d4d;
    --dark-blue: #12395f;
    --dark-blue-2: #0d2a47;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.30);
    --shadow-card: 0 12px 26px rgba(0, 0, 0, 0.24);
}

html {
    min-height: 100%;
    background: var(--app-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    background: linear-gradient(135deg, var(--app-bg) 0%, #ffffff 45%, #f2f2ef 100%);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

.app-wrapper {
    display: flex;
    min-height: 100vh;
    background: transparent;
}

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

.sidebar {
    width: 280px;
    height: 100vh !important;
    max-height: 100vh !important;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.96);
    border-right: 1px solid var(--line);
    box-shadow: 8px 0 28px rgba(17, 24, 39, 0.04);
    padding: 22px 16px 110px;
    z-index: 1000;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.sidebar::-webkit-scrollbar {
    width: 7px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #c9c9c5;
    border-radius: 999px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}

.brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 900;
    color: var(--heading);
    background: #eeeeeb;
    border: 1px solid var(--line-strong);
}

.sidebar-brand h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.12;
    color: var(--heading);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.sidebar-brand p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 120px !important;
}

.menu-title {
    margin: 19px 11px 7px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar-menu a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 15px;
    text-decoration: none;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 800;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sidebar-menu a:hover {
    color: var(--heading);
    background: var(--sidebar-hover);
    border-color: var(--line);
    transform: translateX(2px);
}

.sidebar-menu a.active {
    color: var(--heading);
    background: var(--sidebar-active);
    border-color: var(--line-strong);
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.02);
}

.sidebar-menu a.active::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    border-radius: 999px;
    background: #757575;
}

/* Optional support if you later add a sidebar toggle */
.sidebar.collapsed {
    width: 82px;
    padding-left: 12px;
    padding-right: 12px;
}

.sidebar.collapsed .sidebar-brand h2,
.sidebar.collapsed .sidebar-brand p,
.sidebar.collapsed .menu-title,
.sidebar.collapsed .sidebar-menu a span {
    display: none;
}

.main-content.sidebar-collapsed,
.app-wrapper.sidebar-collapsed .main-content {
    margin-left: 82px;
    width: calc(100% - 82px);
}

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

.main-content {
    margin-left: 280px;
    width: calc(100% - 280px);
    min-height: 100vh;
    background: transparent;
}

.topbar {
    margin: 20px 22px 0;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.topbar h1 {
    margin: 0;
    color: var(--heading);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.topbar p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.topbar-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 126px;
    padding: 11px 15px;
    border-radius: 15px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

.topbar-user span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.topbar-user strong {
    color: var(--heading);
    font-size: 14px;
}

.content {
    padding: 22px;
}

/* =========================
   PANELS / CARDS
========================= */

.panel,
.card,
.box,
.form-card,
.table-card,
.search-panel,
.page-title-simple,
.hero-box,
.pack-hero,
.simple-panel,
.report-white-panel {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-soft) !important;
}

.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3,
.box h1,
.box h2,
.box h3,
.form-card h1,
.form-card h2,
.form-card h3,
.table-card h1,
.table-card h2,
.table-card h3,
.search-panel h1,
.search-panel h2,
.search-panel h3,
.page-title-simple h1,
.page-title-simple h2,
.page-title-simple h3,
.hero-box h1,
.hero-box h2,
.hero-box h3,
.pack-hero h1,
.pack-hero h2,
.pack-hero h3 {
    margin-top: 0;
    color: var(--heading) !important;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.panel p,
.card p,
.box p,
.search-panel p,
.hero-box p,
.pack-hero p,
.soft-note,
.bundle-note,
.helper-text {
    color: var(--text-muted) !important;
    font-weight: 650;
    line-height: 1.55;
}

.cards,
.stats-grid,
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.card,
.stat-card,
.mini-card,
.summary-card,
.small-info-button,
.big-info-box {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    padding: 18px !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text) !important;
}

.card h3,
.stat-card .label,
.mini-card .label,
.summary-card span,
.small-info-button span,
.big-info-box span,
.label {
    margin: 0 0 7px;
    color: var(--text-muted) !important;
    font-size: 13px;
    font-weight: 850;
}

.card .number,
.stat-card .number,
.mini-card .number,
.summary-card strong,
.small-info-button strong,
.big-info-box strong,
.number {
    color: var(--heading) !important;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

/* =========================
   FORMS
========================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label,
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 900;
    color: var(--heading) !important;
    font-size: 14px;
}

.form-control,
input,
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line-strong) !important;
    border-radius: 14px !important;
    font-size: 15px;
    background: #ffffff !important;
    color: var(--text) !important;
    outline: none;
    box-shadow: none !important;
}

textarea {
    height: auto;
    min-height: 110px;
    padding-top: 13px;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #9aa0a8 !important;
    opacity: 1;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #a9abae !important;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.06) !important;
}

select option {
    background: #ffffff;
    color: var(--text);
}

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

.action-buttons,
.form-actions,
.filter-actions,
.search-actions,
.quick-actions,
.panel-actions,
.clean-actions,
.hero-actions,
.bundle-action-buttons,
.staff-login-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.btn,
button,
input[type="submit"],
input[type="button"],
a.btn,
.pack-btn,
.tab-btn,
.view-mode-btn,
.fabric-search-btn,
.choice-btn {
    min-width: 145px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    color: #ffffff !important;
    background: var(--button-bg) !important;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12) !important;
    transition: background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    line-height: 1;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover,
.pack-btn:hover,
.tab-btn:hover,
.view-mode-btn:hover,
.fabric-search-btn:hover,
.choice-btn:hover {
    transform: translateY(-2px);
    background: var(--button-bg-hover) !important;
    box-shadow: 0 12px 22px rgba(17, 24, 39, 0.15) !important;
}

.btn.secondary,
.btn-secondary,
a.btn.secondary,
button.secondary,
.pack-btn.secondary,
.tab-btn,
.view-mode-btn,
.reset-btn,
.clear-btn {
    background: var(--button-secondary) !important;
    color: var(--heading) !important;
    border-color: var(--line-strong) !important;
    box-shadow: none !important;
}

.btn.secondary:hover,
.btn-secondary:hover,
a.btn.secondary:hover,
button.secondary:hover,
.pack-btn.secondary:hover,
.tab-btn:hover,
.view-mode-btn:hover,
.reset-btn:hover,
.clear-btn:hover {
    background: var(--button-secondary-hover) !important;
}

.btn.add,
.btn-add,
.new-btn,
.add-btn,
.btn-save-bundle,
.pack-btn:not(.secondary):not(.danger),
.fabric-search-btn.search,
.fabric-search-btn.fabric-in {
    background: var(--button-bg) !important;
    color: #ffffff !important;
}

.btn.edit,
.btn-edit,
.edit-btn,
.fabric-search-btn.ledger {
    background: #55585e !important;
    color: #ffffff !important;
}

.btn.delete,
.btn-danger,
.btn-delete,
.delete-btn,
.btn.danger,
.pack-btn.danger {
    background: var(--danger) !important;
    color: #ffffff !important;
}

.btn.warning,
.btn-warning,
.warning-btn {
    background: var(--warning) !important;
    color: #ffffff !important;
}

td .btn,
td button,
.table-wrap .btn,
table .btn {
    min-width: 82px;
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px !important;
    font-size: 12px;
}

.search-box,
.filter-box,
.filters,
.search-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
}

.search-box .form-group,
.filter-box .form-group,
.filters .form-group,
.search-form .form-group {
    margin-bottom: 0;
}

/* =========================
   TABLES
========================= */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    background: transparent !important;
    border-radius: var(--radius-md);
}

table,
.attendance-table,
.fabric-list-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-md);
    overflow: hidden;
}

th,
td,
.attendance-table th,
.attendance-table td,
.fabric-list-table th,
.fabric-list-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--line) !important;
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
    color: var(--text) !important;
    background: #ffffff !important;
}

th,
.attendance-table th,
.fabric-list-table th {
    background: #f3f3f1 !important;
    color: var(--heading) !important;
    font-weight: 950;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

tr:last-child td {
    border-bottom: 0 !important;
}

tr:hover td,
.attendance-table tr:hover td,
.fabric-list-table tr:hover td {
    background: #fafafa !important;
}

table img,
.table-wrap table img,
.fabric-photo {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--line) !important;
    background: #f3f3f1 !important;
    box-shadow: none !important;
}

/* =========================
   BADGES / NUMBER BOXES
========================= */

.badge,
.status-pill,
.done-badge,
.not-done-badge,
.size-chip,
.fabric-count-pill,
.selected-pill,
.small-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    background: #f1f1ef !important;
    color: var(--heading) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: none !important;
}

.badge.green,
.status-present,
.status-closed,
.status-ready,
.status-delivered,
.done-badge,
.selected-pill {
    background: #edf2ef !important;
    color: #315943 !important;
    border-color: #d9e4dd !important;
}

.badge.red,
.status-absent,
.status-no-work {
    background: #f3eeee !important;
    color: #6f3333 !important;
    border-color: #e6d8d8 !important;
}

.badge.orange,
.status-working {
    background: #f4f1eb !important;
    color: #6b5830 !important;
    border-color: #e7dfcf !important;
}

.fabric-batch-box,
.cutting-no-pill,
.bundle-no,
.next-batch-box strong,
.this-bundle-number-card strong,
.next-bundle-box strong,
.available-box strong,
.batch-no,
.value {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #eeeeeb !important;
    color: var(--heading) !important;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
    border: 1px solid var(--line-strong) !important;
    box-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.next-batch-box,
.next-bundle-box,
.available-box,
.this-bundle-number-card,
.staff-login-card,
.staff-bar,
.selected-box,
.selected-cutting-mini,
.quick-selected,
.active-summary {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
}

.next-batch-box,
.next-bundle-box,
.available-box,
.this-bundle-number-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.selected-box .label,
.selected-box .value,
.selected-box div,
.selected-box strong,
.staff-bar div,
.staff-bar strong,
.selected-cutting-mini .mini-label,
.selected-cutting-mini .mini-number {
    color: var(--text) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* =========================
   BUTTON/CARD GRIDS
========================= */

.bundle-button-grid,
.cutting-card-grid,
.cutting-button-grid,
.batch-button-grid,
.tailor-button-grid,
.bundle-card-grid,
.created-card-grid,
.app-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.bundle-choice,
.cutting-card,
.cutting-btn,
.batch-btn,
.tailor-choice,
.bundle-card,
.created-bundle-card,
.app-button {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    text-decoration: none;
}

.bundle-choice,
.cutting-card,
.cutting-btn,
.batch-btn,
.tailor-choice {
    padding: 14px !important;
    cursor: pointer;
    text-align: left;
}

.bundle-choice:hover,
.cutting-card:hover,
.cutting-btn:hover,
.batch-btn:hover,
.tailor-choice:hover,
.app-button:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong) !important;
}

.bundle-choice.active,
.cutting-card.active,
.cutting-btn.active,
.batch-btn.active,
.tailor-choice.active,
.choice-btn.active {
    background: #f1f1ef !important;
    border-color: #bdbdb8 !important;
    color: var(--heading) !important;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.04), var(--shadow-card) !important;
}

.bundle-choice .bundle-info,
.cutting-info,
.batch-info,
.tailor-choice small,
.info-line,
.details,
.fabric-sub-text,
.app-sub {
    color: var(--text-muted) !important;
    line-height: 1.6;
    font-weight: 700;
}

.bundle-choice strong,
.cutting-info strong,
.batch-info strong,
.info-line strong,
.details strong,
.fabric-name-main,
.fabric-date-cell,
.fabric-meters-cell,
.fabric-location-cell,
.pcs-number,
.app-name {
    color: var(--heading) !important;
    font-weight: 900;
}

.bundle-photo,
.created-bundle-photo,
.cutting-card img,
.bundle-choice img,
.bundle-card img,
.fabric-photo {
    background: #f3f3f1 !important;
}

/* =========================
   ALERTS
========================= */

.alert,
.success-big,
.give-success-box,
.success-done-box {
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 18px;
    font-weight: 850;
    background: #f5f5f3 !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-card) !important;
}

.alert.success,
.success-big,
.give-success-box,
.success-done-box {
    background: #edf2ef !important;
    color: #315943 !important;
    border-color: #d9e4dd !important;
}

.alert.error {
    background: #f3eeee !important;
    color: #6f3333 !important;
    border-color: #e6d8d8 !important;
}

/* =========================
   FABRIC PAGE SPECIFIC FIXES
========================= */

.fabric-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fabric-page-title h2 {
    margin: 0;
    color: var(--heading) !important;
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.fabric-search-grid {
    grid-template-columns: 1fr auto !important;
    align-items: end;
}

.fabric-search-btn-group {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fabric-list-table th {
    white-space: nowrap;
    font-size: 12px;
    color: var(--heading) !important;
}

.fabric-list-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.fabric-details-main {
    min-width: 190px;
    white-space: normal;
}

.fabric-no-photo {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.meters-toggle,
.meters-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 145px;
    height: 42px;
    padding: 0 18px !important;
    margin-top: 12px !important;
    border-radius: 14px;
    border: 1px solid var(--line-strong) !important;
    background: #ffffff !important;
    color: var(--text) !important;
    font-size: 13px;
    font-weight: 900 !important;
    cursor: pointer;
    user-select: none;
}

.meters-toggle input,
.meters-check input {
    width: 16px !important;
    height: 16px !important;
}

.meters-toggle input:checked + .meters-toggle-button,
.meters-check:has(input:checked) {
    background: #edf2ef !important;
    border-color: #d9e4dd !important;
    color: #315943 !important;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .app-wrapper {
        display: block;
    }

    .sidebar {
        position: relative;
        width: 100%;
        height: 42vh !important;
        max-height: 42vh !important;
        min-height: 260px !important;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-bottom: 120px !important;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .topbar-user {
        align-items: flex-start;
        width: 100%;
    }

    .cards,
    .form-grid,
    .bundle-summary-row,
    .small-button-row {
        grid-template-columns: 1fr !important;
    }

    .fabric-search-grid {
        grid-template-columns: 1fr !important;
    }

    .fabric-search-btn-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .fabric-search-btn {
        width: 100%;
        min-width: 100%;
        min-height: 48px;
    }

    .bundle-button-grid,
    .cutting-card-grid,
    .cutting-button-grid,
    .batch-button-grid,
    .tailor-button-grid,
    .bundle-card-grid,
    .created-card-grid,
    .app-buttons-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
}

@media (max-width: 700px) {
    .action-buttons,
    .form-actions,
    .filter-actions,
    .search-actions,
    .panel-actions,
    .search-box,
    .filter-box,
    .filters,
    .search-form,
    .clean-actions,
    .bundle-action-buttons,
    .staff-login-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    a.btn,
    .pack-btn,
    .tab-btn,
    .view-mode-btn,
    .fabric-search-btn,
    .choice-btn {
        width: 100%;
        min-width: 100%;
        min-height: 48px;
    }

    td .btn,
    td button,
    .table-wrap .btn,
    table .btn {
        width: auto;
        min-width: 78px;
        min-height: 34px;
    }
}

@media (max-width: 520px) {
    .content {
        padding: 16px;
    }

    .topbar {
        margin: 16px 16px 0;
    }

    .panel,
    .card,
    .box,
    .form-card,
    .table-card,
    .search-panel,
    .page-title-simple,
    .hero-box,
    .pack-hero,
    .simple-panel {
        padding: 16px;
        border-radius: 18px !important;
    }

    .bundle-button-grid,
    .cutting-card-grid,
    .cutting-button-grid,
    .batch-button-grid,
    .tailor-button-grid,
    .bundle-card-grid,
    .created-card-grid,
    .app-buttons-grid {
        grid-template-columns: 1fr;
    }

    .fabric-search-btn-group {
        grid-template-columns: 1fr;
    }

    .fabric-batch-box,
    .cutting-no-pill,
    .bundle-no,
    .next-batch-box strong,
    .this-bundle-number-card strong,
    .next-bundle-box strong,
    .available-box strong {
        min-width: 74px;
        font-size: 16px;
        padding: 8px 10px;
    }
}


/* =========================================================
   FINAL LIGHT MODE OVERRIDE
   Light mode must be fully light: light sidebar, light cards,
   gray input boxes, no dark blue cards/backgrounds.
   Dark mode remains the current dark factory UI.
   ========================================================= */
body.theme-light {
    --app-bg: #e7ebf0;
    --app-bg-2: #f4f6f8;
    --surface: #ffffff;
    --surface-soft: #f5f7fa;
    --surface-muted: #edf1f5;
    --line: #d5dce5;
    --line-strong: #b7c2cf;
    --text: #1f2937;
    --text-soft: #374151;
    --text-muted: #6b7280;
    --heading: #111827;
    --sidebar-bg: #f7f9fc;
    --sidebar-hover: #edf2f7;
    --sidebar-active: #dbeafe;
    --button-bg: #e8eef5;
    --button-bg-hover: #dce5ef;
    --button-secondary: #eef2f6;
    --button-secondary-hover: #dde5ee;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
    --search-blue: #56b6ff;
    --reset-red: #dc2626;
    --dark-blue: #e8eef5;
    --dark-blue-2: #dce5ef;
    --input-bg: #d9dee6;
    --input-border: #aeb8c5;
    --input-text: #111827;
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 8px 20px rgba(15, 23, 42, 0.06);
    background: linear-gradient(135deg, #e7ebf0 0%, #f8fafc 52%, #dfe5ec 100%) !important;
    color: var(--text) !important;
}

body.theme-light .app-wrapper,
body.theme-light .main-content {
    background: transparent !important;
    color: var(--text) !important;
}

body.theme-light .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f2f5f9 100%) !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.06) !important;
}

body.theme-light .sidebar-brand,
body.theme-light .topbar,
body.theme-light .panel,
body.theme-light .card,
body.theme-light .box,
body.theme-light .form-card,
body.theme-light .table-card,
body.theme-light .search-panel,
body.theme-light .page-title-simple,
body.theme-light .hero-box,
body.theme-light .pack-hero,
body.theme-light .simple-panel,
body.theme-light .report-white-panel,
body.theme-light .app-button,
body.theme-light .bundle-card,
body.theme-light .created-bundle-card,
body.theme-light .batch-card,
body.theme-light .theme-card,
body.theme-light .stat-card,
body.theme-light .mini-card,
body.theme-light .summary-card,
body.theme-light .small-info-button,
body.theme-light .big-info-box,
body.theme-light .bundle-choice,
body.theme-light .cutting-card,
body.theme-light .cutting-btn,
body.theme-light .batch-btn,
body.theme-light .tailor-choice,
body.theme-light .next-batch-box,
body.theme-light .next-bundle-box,
body.theme-light .available-box,
body.theme-light .this-bundle-number-card,
body.theme-light .staff-login-card,
body.theme-light .staff-bar,
body.theme-light .selected-box,
body.theme-light .selected-cutting-mini,
body.theme-light .quick-selected,
body.theme-light .active-summary {
    background: #ffffff !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-card) !important;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light label,
body.theme-light strong,
body.theme-light .app-name,
body.theme-light .sidebar-brand h2,
body.theme-light .topbar h1,
body.theme-light .panel h1,
body.theme-light .panel h2,
body.theme-light .panel h3,
body.theme-light .fabric-page-title h2,
body.theme-light .page-title,
body.theme-light .title,
body.theme-light .number,
body.theme-light .value,
body.theme-light .pcs-number,
body.theme-light .fabric-name-main,
body.theme-light .fabric-date-cell,
body.theme-light .fabric-meters-cell,
body.theme-light .fabric-location-cell {
    color: var(--heading) !important;
    -webkit-text-fill-color: var(--heading) !important;
}

body.theme-light p,
body.theme-light small,
body.theme-light .app-sub,
body.theme-light .text-muted,
body.theme-light .helper-text,
body.theme-light .sidebar-brand p,
body.theme-light .topbar p,
body.theme-light .soft-note,
body.theme-light .bundle-note,
body.theme-light .details,
body.theme-light .fabric-sub-text,
body.theme-light .info-line,
body.theme-light .list-help,
body.theme-light .delivery-note {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
}

body.theme-light .sidebar-menu a {
    background: transparent !important;
    color: var(--text-soft) !important;
    border-color: transparent !important;
}

body.theme-light .sidebar-menu a:hover {
    background: #eef3f8 !important;
    color: var(--heading) !important;
    border-color: var(--line) !important;
}

body.theme-light .sidebar-menu a.active {
    background: #dbeafe !important;
    color: #0f172a !important;
    border-color: #93c5fd !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08) !important;
}

body.theme-light .sidebar-menu a.active::before {
    background: #3b82f6 !important;
    box-shadow: none !important;
}

body.theme-light .brand-logo {
    background: #e5eaf0 !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Light mode inputs: gray boxes */
body.theme-light .form-control,
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
    background: #d9dee6 !important;
    color: #111827 !important;
    border-color: #aeb8c5 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55) !important;
    -webkit-text-fill-color: #111827 !important;
}

body.theme-light .form-control::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
    color: #5f6b7a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #5f6b7a !important;
}

body.theme-light .form-control:focus,
body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
    border-color: #56b6ff !important;
    box-shadow: 0 0 0 4px rgba(86, 182, 255, 0.22) !important;
}

/* Light mode normal buttons: no dark colors */
body.theme-light .btn,
body.theme-light button,
body.theme-light input[type="submit"],
body.theme-light input[type="button"],
body.theme-light a.btn,
body.theme-light .pack-btn,
body.theme-light .tab-btn,
body.theme-light .view-mode-btn,
body.theme-light .fabric-search-btn,
body.theme-light .choice-btn,
body.theme-light .btn-mini,
body.theme-light .app-button {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    -webkit-text-fill-color: #111827 !important;
}

body.theme-light .btn:hover,
body.theme-light button:hover,
body.theme-light input[type="submit"]:hover,
body.theme-light input[type="button"]:hover,
body.theme-light a.btn:hover,
body.theme-light .pack-btn:hover,
body.theme-light .tab-btn:hover,
body.theme-light .view-mode-btn:hover,
body.theme-light .fabric-search-btn:hover,
body.theme-light .choice-btn:hover,
body.theme-light .btn-mini:hover,
body.theme-light .app-button:hover {
    background: linear-gradient(135deg, #ffffff 0%, #dbe3ec 100%) !important;
    color: #111827 !important;
    border-color: #94a3b8 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Keep only required action colors in light mode */
body.theme-light a[href$="/attendance/start_work.php"],
body.theme-light .btn-start,
body.theme-light .start-work,
body.theme-light .continue,
body.theme-light .btn-continue {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border-color: #4ade80 !important;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.22) !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.theme-light a[href$="/attendance/end_work.php"],
body.theme-light .btn-stop,
body.theme-light .stop-work,
body.theme-light .btn-end,
body.theme-light .btn-danger,
body.theme-light .btn.delete,
body.theme-light .btn.danger,
body.theme-light .delete-btn,
body.theme-light .btn-delete {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.22) !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.theme-light .fabric-search-btn.search,
body.theme-light .ledger-btn.search,
body.theme-light .btn-delivered-search,
body.theme-light .search-actions button[type="submit"],
body.theme-light .filter-actions button[type="submit"],
body.theme-light button.search,
body.theme-light .btn-search {
    background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    border-color: #bae6fd !important;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.22) !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.theme-light .fabric-search-btn.reset,
body.theme-light .ledger-btn.reset,
body.theme-light .reset-btn,
body.theme-light .clear-btn,
body.theme-light a[href*="reset"],
body.theme-light .btn-reset {
    background: transparent !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #dc2626 !important;
}

/* Light mode tables must be light */
body.theme-light table,
body.theme-light .attendance-table,
body.theme-light .fabric-list-table,
body.theme-light .delivery-table,
body.theme-light .delivered-table,
body.theme-light .ledger-table {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: var(--line) !important;
}

body.theme-light th,
body.theme-light td,
body.theme-light .attendance-table th,
body.theme-light .attendance-table td,
body.theme-light .fabric-list-table th,
body.theme-light .fabric-list-table td,
body.theme-light .delivery-table th,
body.theme-light .delivery-table td,
body.theme-light .delivered-table th,
body.theme-light .delivered-table td,
body.theme-light .ledger-table th,
body.theme-light .ledger-table td {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: var(--line) !important;
    -webkit-text-fill-color: #1f2937 !important;
}

body.theme-light th,
body.theme-light .attendance-table th,
body.theme-light .fabric-list-table th,
body.theme-light .delivery-table th,
body.theme-light .delivered-table th,
body.theme-light .ledger-table th {
    background: #edf2f7 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body.theme-light tr:hover td,
body.theme-light .attendance-table tr:hover td,
body.theme-light .fabric-list-table tr:hover td,
body.theme-light .delivery-table tr:hover td,
body.theme-light .delivered-table tr:hover td,
body.theme-light .ledger-table tr:hover td {
    background: #f8fafc !important;
}

body.theme-light .badge,
body.theme-light .status-pill,
body.theme-light .done-badge,
body.theme-light .not-done-badge,
body.theme-light .size-chip,
body.theme-light .fabric-count-pill,
body.theme-light .selected-pill,
body.theme-light .small-status-pill,
body.theme-light .fabric-batch-box,
body.theme-light .cutting-no-pill,
body.theme-light .bundle-no,
body.theme-light .next-batch-box strong,
body.theme-light .this-bundle-number-card strong,
body.theme-light .next-bundle-box strong,
body.theme-light .available-box strong,
body.theme-light .batch-no,
body.theme-light .value {
    background: #eef2f6 !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #111827 !important;
}

body.theme-light .alert,
body.theme-light .success-big,
body.theme-light .give-success-box,
body.theme-light .success-done-box {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-card) !important;
}

body.theme-light .alert.success,
body.theme-light .success-big,
body.theme-light .give-success-box,
body.theme-light .success-done-box {
    background: #ecfdf5 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
    -webkit-text-fill-color: #166534 !important;
}

body.theme-light .alert.error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
    -webkit-text-fill-color: #991b1b !important;
}

/* =========================================================
   FINAL DASHBOARD UI FIX
   Works only when dashboard uses header.php + sidebar.php.
   ========================================================= */
body.theme-dark {
    background: linear-gradient(135deg, #07111d 0%, #0b1a2b 48%, #030812 100%) !important;
}

body.theme-light {
    background: linear-gradient(135deg, #d9dde3 0%, #eef1f5 48%, #cfd5dd 100%) !important;
}

.dashboard-page {
    min-height: calc(100vh - 20px);
}

.dashboard-title-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}

body.theme-dark .dashboard-title-card {
    background: linear-gradient(145deg, #0f2136 0%, #0b1828 100%) !important;
    color: #ffffff !important;
}

body.theme-light .dashboard-title-card {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.dashboard-title-card h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.dashboard-title-card p {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 750;
}

.dashboard-app-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 16px !important;
}

.dashboard-page .app-button {
    min-height: 136px;
    padding: 20px 18px !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

body.theme-dark .dashboard-page .app-button {
    background: linear-gradient(145deg, #12395f 0%, #0d2a47 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(86, 182, 255, 0.22) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

body.theme-light .dashboard-page .app-button {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

.dashboard-page .app-button:hover {
    transform: translateY(-3px) !important;
}

.dashboard-page .app-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
}

body.theme-dark .dashboard-page .app-icon {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

body.theme-light .dashboard-page .app-icon {
    background: #eef2f6 !important;
    color: #111827 !important;
}

.dashboard-page .app-name {
    font-size: 18px;
    line-height: 1.15;
    font-weight: 950;
}

.dashboard-page .app-sub {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 750;
}

body.theme-dark .dashboard-page .app-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.theme-dark .dashboard-page .app-sub {
    color: #aebed0 !important;
    -webkit-text-fill-color: #aebed0 !important;
}

body.theme-light .dashboard-page .app-name {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body.theme-light .dashboard-page .app-sub {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* Start Work must always be green */
body.theme-dark .dashboard-page .app-button.start-work,
body.theme-light .dashboard-page .app-button.start-work,
body.theme-dark .dashboard-page a[href$="/attendance/start_work.php"],
body.theme-light .dashboard-page a[href$="/attendance/start_work.php"] {
    background: linear-gradient(145deg, #22c55e 0%, #087a2e 100%) !important;
    color: #ffffff !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    box-shadow: 0 14px 30px rgba(22, 163, 74, 0.28) !important;
}

/* Stop Work must always be red */
body.theme-dark .dashboard-page .app-button.stop-work,
body.theme-light .dashboard-page .app-button.stop-work,
body.theme-dark .dashboard-page a[href$="/attendance/end_work.php"],
body.theme-light .dashboard-page a[href$="/attendance/end_work.php"] {
    background: linear-gradient(145deg, #ef4444 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    box-shadow: 0 14px 30px rgba(220, 38, 38, 0.28) !important;
}

body.theme-dark .dashboard-page .app-button.start-work .app-icon,
body.theme-light .dashboard-page .app-button.start-work .app-icon,
body.theme-dark .dashboard-page .app-button.stop-work .app-icon,
body.theme-light .dashboard-page .app-button.stop-work .app-icon {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
}

body.theme-dark .dashboard-page .app-button.start-work .app-name,
body.theme-dark .dashboard-page .app-button.start-work .app-sub,
body.theme-dark .dashboard-page .app-button.stop-work .app-name,
body.theme-dark .dashboard-page .app-button.stop-work .app-sub,
body.theme-light .dashboard-page .app-button.start-work .app-name,
body.theme-light .dashboard-page .app-button.start-work .app-sub,
body.theme-light .dashboard-page .app-button.stop-work .app-name,
body.theme-light .dashboard-page .app-button.stop-work .app-sub {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 900px) {
    .dashboard-app-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    }

    .dashboard-page .app-button {
        min-height: 122px;
    }
}

@media (max-width: 520px) {
    .dashboard-app-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .dashboard-page .app-button {
        min-height: 118px;
        padding: 16px 14px !important;
        border-radius: 20px !important;
    }

    .dashboard-page .app-icon {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .dashboard-page .app-name {
        font-size: 15px;
    }

    .dashboard-page .app-sub {
        font-size: 12px;
    }
}


/* =========================================================
   FINAL APP-WIDE LIGHT MODE FIXES - 20260618-light-status1
   Requested changes:
   - Light mode inputs/selects = light gray
   - Light mode statuses: working/done/delivered = light green
   - Light mode absent/pending/no-work = light red
   - No Photo = text only, no dark box
   - Cutting Entry fabric cards/photos = compact card style
   - Selected fabric/category/size = green
   - Save Cutting = green
   ========================================================= */

/* Light mode must be truly light everywhere */
body.theme-light {
    --app-bg: #e7ebf0;
    --app-bg-2: #f5f7fa;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #eef2f6;
    --line: #d6dde7;
    --line-strong: #b8c2cf;
    --text: #1f2937;
    --text-soft: #374151;
    --text-muted: #64748b;
    --heading: #111827;
    --input-bg: #e2e8f0;
    --input-border: #b6c0ce;
    --input-text: #111827;
    background: #e7ebf0 !important;
    color: #1f2937 !important;
}

body.theme-light .app-wrapper,
body.theme-light .main-content {
    background: #e7ebf0 !important;
    color: #1f2937 !important;
}

body.theme-light .sidebar {
    background: #ffffff !important;
    color: #111827 !important;
    border-right: 1px solid #d6dde7 !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.06) !important;
}

body.theme-light .sidebar-brand,
body.theme-light .panel,
body.theme-light .card,
body.theme-light .box,
body.theme-light .form-card,
body.theme-light .table-card,
body.theme-light .search-panel,
body.theme-light .page-title-simple,
body.theme-light .hero-box,
body.theme-light .pack-hero,
body.theme-light .simple-panel,
body.theme-light .report-white-panel,
body.theme-light .stat-card,
body.theme-light .mini-card,
body.theme-light .summary-card,
body.theme-light .small-info-button,
body.theme-light .big-info-box,
body.theme-light .app-button,
body.theme-light .bundle-card,
body.theme-light .created-bundle-card,
body.theme-light .batch-card,
body.theme-light .theme-card,
body.theme-light .bundle-choice,
body.theme-light .cutting-card,
body.theme-light .cutting-btn,
body.theme-light .batch-btn,
body.theme-light .tailor-choice,
body.theme-light .selected-fabric-box,
body.theme-light .review-box,
body.theme-light .staff-section-title,
body.theme-light .delivery-hero,
body.theme-light .delivery-search-panel,
body.theme-light .delivery-list-panel,
body.theme-light .make-delivery-panel {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d6dde7 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

/* All typing boxes/select boxes/textarea in light mode must be light gray */
body.theme-light .form-control,
body.theme-light input:not([type="checkbox"]):not([type="radio"]),
body.theme-light select,
body.theme-light textarea,
body.theme-light .flatpickr-input.form-control {
    background: #e2e8f0 !important;
    color: #111827 !important;
    border: 1px solid #b6c0ce !important;
    -webkit-text-fill-color: #111827 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

body.theme-light .form-control::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}

body.theme-light .form-control:focus,
body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
    background: #edf2f7 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.20) !important;
}

/* Search boxes specifically */
body.theme-light .fabric-search-grid .form-control,
body.theme-light .cutting-search-grid .form-control,
body.theme-light .delivery-search-panel .form-control,
body.theme-light .ledger-search-grid .form-control,
body.theme-light .search-panel .form-control,
body.theme-light .filter-box .form-control,
body.theme-light .search-box .form-control {
    background: #e2e8f0 !important;
    color: #111827 !important;
}

/* Text color fixes in light mode */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light label,
body.theme-light strong,
body.theme-light .app-name,
body.theme-light .sidebar-brand h2,
body.theme-light .panel h1,
body.theme-light .panel h2,
body.theme-light .panel h3,
body.theme-light .fabric-page-title h2,
body.theme-light .page-title,
body.theme-light .title,
body.theme-light .number,
body.theme-light .value,
body.theme-light .pcs-number,
body.theme-light .fabric-name-main,
body.theme-light .fabric-date-cell,
body.theme-light .fabric-meters-cell,
body.theme-light .fabric-location-cell {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body.theme-light p,
body.theme-light small,
body.theme-light .app-sub,
body.theme-light .text-muted,
body.theme-light .helper-text,
body.theme-light .sidebar-brand p,
body.theme-light .soft-note,
body.theme-light .bundle-note,
body.theme-light .details,
body.theme-light .fabric-sub-text,
body.theme-light .info-line,
body.theme-light .list-help,
body.theme-light .delivery-note,
body.theme-light .cutting-note,
body.theme-light .ledger-no-photo,
body.theme-light .fabric-no-photo {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* Attendance/status colors: green = working/done/delivered, red = absent/pending */
body.theme-light .status-working,
body.theme-light .status-present,
body.theme-light .status-closed,
body.theme-light .status-ready,
body.theme-light .status-delivered,
body.theme-light .status-done,
body.theme-light .done-badge,
body.theme-light .selected-pill,
body.theme-light .badge.green,
body.theme-light .ledger-status.green,
body.theme-light .summary-card.green,
body.theme-light .small-status-pill.green {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
    -webkit-text-fill-color: #166534 !important;
    box-shadow: none !important;
}

body.theme-light .status-absent,
body.theme-light .status-no-work,
body.theme-light .status-pending,
body.theme-light .not-done-badge,
body.theme-light .pending-badge,
body.theme-light .badge.red,
body.theme-light .badge.pending,
body.theme-light .summary-card.red,
body.theme-light .small-status-pill.red {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    -webkit-text-fill-color: #991b1b !important;
    box-shadow: none !important;
}

/* If page only says Pending inside generic badge/card, show light red */
body.theme-light span[class*="pending"],
body.theme-light div[class*="pending"] {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
    -webkit-text-fill-color: #991b1b !important;
}

body.theme-light span[class*="done"],
body.theme-light div[class*="done"],
body.theme-light span[class*="delivered"],
body.theme-light div[class*="delivered"],
body.theme-light span[class*="ready"],
body.theme-light div[class*="ready"] {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
    -webkit-text-fill-color: #166534 !important;
}

/* No Photo must be only text, never a dark box */
body.theme-light .no-photo-box,
body.theme-light .fabric-no-photo,
body.theme-light .ledger-no-photo,
body.theme-light .start-help-box,
body.theme-light .no-photo,
body.theme-dark .no-photo-box,
body.theme-dark .fabric-no-photo,
body.theme-dark .ledger-no-photo,
body.theme-dark .start-help-box,
body.theme-dark .no-photo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: inline !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-weight: 800 !important;
}

body.theme-dark .no-photo-box,
body.theme-dark .fabric-no-photo,
body.theme-dark .ledger-no-photo,
body.theme-dark .start-help-box,
body.theme-dark .no-photo {
    color: #9fb0c6 !important;
    -webkit-text-fill-color: #9fb0c6 !important;
}

/* Light mode table should stay light */
body.theme-light table,
body.theme-light .attendance-table,
body.theme-light .fabric-list-table,
body.theme-light .delivery-table,
body.theme-light .delivered-table,
body.theme-light .ledger-table {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d6dde7 !important;
}

body.theme-light th,
body.theme-light td,
body.theme-light .attendance-table th,
body.theme-light .attendance-table td,
body.theme-light .fabric-list-table th,
body.theme-light .fabric-list-table td,
body.theme-light .delivery-table th,
body.theme-light .delivery-table td,
body.theme-light .delivered-table th,
body.theme-light .delivered-table td,
body.theme-light .ledger-table th,
body.theme-light .ledger-table td {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d6dde7 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

body.theme-light th,
body.theme-light .attendance-table th,
body.theme-light .fabric-list-table th,
body.theme-light .delivery-table th,
body.theme-light .delivered-table th,
body.theme-light .ledger-table th {
    background: #edf2f7 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body.theme-light tr:hover td,
body.theme-light .attendance-table tr:hover td,
body.theme-light .fabric-list-table tr:hover td,
body.theme-light .delivery-table tr:hover td,
body.theme-light .delivered-table tr:hover td,
body.theme-light .ledger-table tr:hover td {
    background: #f8fafc !important;
}

/* Cutting Entry fabric buttons: compact card style with 2x2 inch photo */
.fabric-button-grid,
.cutting-card-grid,
.cutting-button-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important;
    gap: 16px !important;
}

.fabric-btn,
body.theme-light .fabric-btn,
body.theme-dark .fabric-btn {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: 128px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-card) !important;
}

.fabric-btn img,
body.theme-light .fabric-btn img,
body.theme-dark .fabric-btn img,
.selected-fabric-box img,
body.theme-light .selected-fabric-box img,
body.theme-dark .selected-fabric-box img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    border: 1px solid var(--line) !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
}

/* Text info inside fabric cards */
.fabric-btn .fabric-no,
.fabric-btn .fabric-info {
    grid-column: 2 !important;
}

.fabric-btn img + .fabric-no,
.fabric-btn img + .fabric-no + .fabric-info {
    grid-column: 2 !important;
}

.fabric-btn:not(:has(img)) {
    grid-template-columns: 1fr !important;
}

.fabric-btn:not(:has(img)) .fabric-no,
.fabric-btn:not(:has(img)) .fabric-info {
    grid-column: 1 !important;
}

/* Selected fabric/card/category/size must turn green */
.fabric-btn.active,
.cutting-card.active,
.cutting-btn.active,
.batch-btn.active,
.choice-btn.active,
.group-btn.active,
.size-btn.active,
body.theme-light .fabric-btn.active,
body.theme-light .cutting-card.active,
body.theme-light .cutting-btn.active,
body.theme-light .batch-btn.active,
body.theme-light .choice-btn.active,
body.theme-light .group-btn.active,
body.theme-light .size-btn.active,
body.theme-dark .fabric-btn.active,
body.theme-dark .cutting-card.active,
body.theme-dark .cutting-btn.active,
body.theme-dark .batch-btn.active,
body.theme-dark .choice-btn.active,
body.theme-dark .group-btn.active,
body.theme-dark .size-btn.active {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border-color: #86efac !important;
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.22) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.fabric-btn.active *,
.choice-btn.active *,
.group-btn.active *,
.size-btn.active *,
body.theme-light .fabric-btn.active *,
body.theme-light .choice-btn.active *,
body.theme-light .group-btn.active *,
body.theme-light .size-btn.active *,
body.theme-dark .fabric-btn.active *,
body.theme-dark .choice-btn.active *,
body.theme-dark .group-btn.active *,
body.theme-dark .size-btn.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Save Cutting button green */
.btn-save-cutting,
body.theme-light .btn-save-cutting,
body.theme-dark .btn-save-cutting,
button[name="save_cutting"],
button[type="submit"].btn-save-cutting {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border-color: #86efac !important;
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.24) !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Dashboard/work buttons remain correct */
a[href$="/attendance/start_work.php"],
.start-work,
.btn-start,
.btn-continue,
.continue {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border-color: #86efac !important;
    -webkit-text-fill-color: #ffffff !important;
}

a[href$="/attendance/end_work.php"],
.stop-work,
.btn-stop,
.btn-end {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border-color: #fca5a5 !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Search light blue and reset text red */
.btn-cut-search,
.fabric-search-btn.search,
.ledger-btn.search,
.btn-delivered-search,
.search-actions button[type="submit"],
.filter-actions button[type="submit"],
button.search,
.btn-search {
    background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    border-color: #bae6fd !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-cut-reset,
.fabric-search-btn.reset,
.ledger-btn.reset,
.reset-btn,
.clear-btn,
a[href*="reset"],
.btn-reset {
    background: transparent !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #dc2626 !important;
}

@media (max-width: 700px) {
    .fabric-btn,
    body.theme-light .fabric-btn,
    body.theme-dark .fabric-btn {
        grid-template-columns: 84px 1fr !important;
        min-height: 112px !important;
    }

    .fabric-btn img,
    body.theme-light .fabric-btn img,
    body.theme-dark .fabric-btn img,
    .selected-fabric-box img,
    body.theme-light .selected-fabric-box img,
    body.theme-dark .selected-fabric-box img {
        width: 84px !important;
        height: 84px !important;
        max-width: 84px !important;
        max-height: 84px !important;
    }
}


/* =========================================================
   ABSOLUTE FINAL LIGHT MODE INPUT FIX - 20260618-lightinput2
   This block is intentionally at the very end so no old page CSS
   can keep text boxes dark in Light Mode.
   ========================================================= */
body.theme-light,
body.light-mode,
body.light,
.theme-light body,
html.theme-light body {
    --input-bg: #f1f5f9 !important;
    --input-border: #cbd5e1 !important;
    --input-text: #111827 !important;
}

body.theme-light .form-control,
body.theme-light input[type="text"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input[type="email"],
body.theme-light input[type="tel"],
body.theme-light input[type="date"],
body.theme-light input[type="time"],
body.theme-light input[type="datetime-local"],
body.theme-light input[type="search"],
body.theme-light input[type="file"],
body.theme-light select,
body.theme-light textarea,
body.theme-light .modern-date,
body.theme-light .flatpickr-input,
body.theme-light .flatpickr-input.form-control,
body.theme-light .select-box,
body.theme-light .search-input,
body.theme-light .filter-input,
body.light-mode .form-control,
body.light-mode input[type="text"],
body.light-mode input[type="password"],
body.light-mode input[type="number"],
body.light-mode input[type="email"],
body.light-mode input[type="tel"],
body.light-mode input[type="date"],
body.light-mode input[type="time"],
body.light-mode input[type="datetime-local"],
body.light-mode input[type="search"],
body.light-mode input[type="file"],
body.light-mode select,
body.light-mode textarea,
html.theme-light body .form-control,
html.theme-light body input[type="text"],
html.theme-light body input[type="password"],
html.theme-light body input[type="number"],
html.theme-light body input[type="email"],
html.theme-light body input[type="tel"],
html.theme-light body input[type="date"],
html.theme-light body input[type="time"],
html.theme-light body input[type="datetime-local"],
html.theme-light body input[type="search"],
html.theme-light body input[type="file"],
html.theme-light body select,
html.theme-light body textarea {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85) !important;
    caret-color: #111827 !important;
    outline: none !important;
}

body.theme-light .form-control:hover,
body.theme-light input[type="text"]:hover,
body.theme-light input[type="password"]:hover,
body.theme-light input[type="number"]:hover,
body.theme-light input[type="email"]:hover,
body.theme-light input[type="tel"]:hover,
body.theme-light input[type="date"]:hover,
body.theme-light input[type="time"]:hover,
body.theme-light input[type="datetime-local"]:hover,
body.theme-light input[type="search"]:hover,
body.theme-light select:hover,
body.theme-light textarea:hover {
    background: #eef2f7 !important;
    background-color: #eef2f7 !important;
    border-color: #94a3b8 !important;
}

body.theme-light .form-control:focus,
body.theme-light input[type="text"]:focus,
body.theme-light input[type="password"]:focus,
body.theme-light input[type="number"]:focus,
body.theme-light input[type="email"]:focus,
body.theme-light input[type="tel"]:focus,
body.theme-light input[type="date"]:focus,
body.theme-light input[type="time"]:focus,
body.theme-light input[type="datetime-local"]:focus,
body.theme-light input[type="search"]:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 4px rgba(56,189,248,0.22) !important;
}

body.theme-light .form-control::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}

body.theme-light select option {
    background: #f1f5f9 !important;
    color: #111827 !important;
}

body.theme-light input:-webkit-autofill,
body.theme-light input:-webkit-autofill:hover,
body.theme-light input:-webkit-autofill:focus,
body.theme-light textarea:-webkit-autofill,
body.theme-light textarea:-webkit-autofill:hover,
body.theme-light textarea:-webkit-autofill:focus,
body.theme-light select:-webkit-autofill,
body.theme-light select:-webkit-autofill:hover,
body.theme-light select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f1f5f9 inset !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
}

/* File input button also light in light mode */
body.theme-light input[type="file"]::file-selector-button {
    background: #e2e8f0 !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-weight: 900 !important;
}

/* Keep checkboxes and radio buttons normal, not full gray boxes */
body.theme-light input[type="checkbox"],
body.theme-light input[type="radio"] {
    background: initial !important;
    background-color: initial !important;
    color: initial !important;
    -webkit-text-fill-color: initial !important;
    border: initial !important;
    box-shadow: none !important;
    accent-color: #22c55e !important;
}

/* =========================================================
   FINAL LIGHT MODE FIELD COLOR FIX - 20260618-lightinput3
   Makes every typing/select/date/file/search box the same light gray
   as remarks textarea in LIGHT MODE only.
   ========================================================= */
body.theme-light,
body.light-mode,
body.ui-light,
body[data-ui-mode="light"],
html.theme-light body,
html.light-mode body {
    --field-bg-light: #eef2f7 !important;
    --field-bg-focus-light: #ffffff !important;
    --field-border-light: #cbd5e1 !important;
    --field-text-light: #111827 !important;
    --field-placeholder-light: #6b7280 !important;
}

body.theme-light .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.theme-light .content select,
body.theme-light .content textarea,
body.theme-light .content .form-control,
body.theme-light .content .modern-date,
body.theme-light .content .flatpickr-input,
body.theme-light .content .flatpickr-input.form-control,
body.theme-light .panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.theme-light .panel select,
body.theme-light .panel textarea,
body.theme-light .panel .form-control,
body.theme-light .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.theme-light .form-group select,
body.theme-light .form-group textarea,
body.theme-light .form-group .form-control,
body.theme-light input[type="text"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input[type="email"],
body.theme-light input[type="tel"],
body.theme-light input[type="date"],
body.theme-light input[type="time"],
body.theme-light input[type="datetime-local"],
body.theme-light input[type="search"],
body.theme-light input[type="file"],
body.light-mode .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.light-mode .content select,
body.light-mode .content textarea,
body.light-mode .content .form-control,
body.light-mode .content .modern-date,
body.light-mode .content .flatpickr-input,
body.light-mode .content .flatpickr-input.form-control,
body.light-mode .panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.light-mode .panel select,
body.light-mode .panel textarea,
body.light-mode .panel .form-control,
body.light-mode .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.light-mode .form-group select,
body.light-mode .form-group textarea,
body.light-mode .form-group .form-control,
body.light-mode input[type="text"],
body.light-mode input[type="password"],
body.light-mode input[type="number"],
body.light-mode input[type="email"],
body.light-mode input[type="tel"],
body.light-mode input[type="date"],
body.light-mode input[type="time"],
body.light-mode input[type="datetime-local"],
body.light-mode input[type="search"],
body.light-mode input[type="file"],
body.ui-light .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.ui-light .content select,
body.ui-light .content textarea,
body.ui-light .content .form-control,
body.ui-light .content .modern-date,
body.ui-light .content .flatpickr-input,
body.ui-light .content .flatpickr-input.form-control,
body.ui-light .panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.ui-light .panel select,
body.ui-light .panel textarea,
body.ui-light .panel .form-control,
body.ui-light input[type="text"],
body.ui-light input[type="password"],
body.ui-light input[type="number"],
body.ui-light input[type="email"],
body.ui-light input[type="tel"],
body.ui-light input[type="date"],
body.ui-light input[type="time"],
body.ui-light input[type="datetime-local"],
body.ui-light input[type="search"],
body.ui-light input[type="file"],
body[data-ui-mode="light"] .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body[data-ui-mode="light"] .content select,
body[data-ui-mode="light"] .content textarea,
body[data-ui-mode="light"] .content .form-control,
body[data-ui-mode="light"] .content .modern-date,
body[data-ui-mode="light"] .content .flatpickr-input,
body[data-ui-mode="light"] .content .flatpickr-input.form-control,
body[data-ui-mode="light"] .panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body[data-ui-mode="light"] .panel select,
body[data-ui-mode="light"] .panel textarea,
body[data-ui-mode="light"] .panel .form-control {
    background: #eef2f7 !important;
    background-color: #eef2f7 !important;
    background-image: none !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92) !important;
    caret-color: #111827 !important;
    outline: none !important;
}

body.theme-light .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.theme-light .content select:focus,
body.theme-light .content textarea:focus,
body.theme-light .content .form-control:focus,
body.light-mode .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.light-mode .content select:focus,
body.light-mode .content textarea:focus,
body.light-mode .content .form-control:focus,
body.ui-light .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.ui-light .content select:focus,
body.ui-light .content textarea:focus,
body.ui-light .content .form-control:focus,
body[data-ui-mode="light"] .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body[data-ui-mode="light"] .content select:focus,
body[data-ui-mode="light"] .content textarea:focus,
body[data-ui-mode="light"] .content .form-control:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.20) !important;
}

body.theme-light .content input::placeholder,
body.theme-light .content textarea::placeholder,
body.light-mode .content input::placeholder,
body.light-mode .content textarea::placeholder,
body.ui-light .content input::placeholder,
body.ui-light .content textarea::placeholder,
body[data-ui-mode="light"] .content input::placeholder,
body[data-ui-mode="light"] .content textarea::placeholder {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    opacity: 1 !important;
}

body.theme-light .content input:-webkit-autofill,
body.theme-light .content input:-webkit-autofill:hover,
body.theme-light .content input:-webkit-autofill:focus,
body.theme-light .content textarea:-webkit-autofill,
body.theme-light .content textarea:-webkit-autofill:hover,
body.theme-light .content textarea:-webkit-autofill:focus,
body.theme-light .content select:-webkit-autofill,
body.theme-light .content select:-webkit-autofill:hover,
body.theme-light .content select:-webkit-autofill:focus,
body.light-mode .content input:-webkit-autofill,
body.light-mode .content input:-webkit-autofill:hover,
body.light-mode .content input:-webkit-autofill:focus,
body.light-mode .content textarea:-webkit-autofill,
body.light-mode .content textarea:-webkit-autofill:hover,
body.light-mode .content textarea:-webkit-autofill:focus,
body.light-mode .content select:-webkit-autofill,
body.light-mode .content select:-webkit-autofill:hover,
body.light-mode .content select:-webkit-autofill:focus,
body.ui-light .content input:-webkit-autofill,
body.ui-light .content input:-webkit-autofill:hover,
body.ui-light .content input:-webkit-autofill:focus,
body.ui-light .content textarea:-webkit-autofill,
body.ui-light .content textarea:-webkit-autofill:hover,
body.ui-light .content textarea:-webkit-autofill:focus,
body.ui-light .content select:-webkit-autofill,
body.ui-light .content select:-webkit-autofill:hover,
body.ui-light .content select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #eef2f7 inset !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
}

body.theme-light input[type="file"]::file-selector-button,
body.light-mode input[type="file"]::file-selector-button,
body.ui-light input[type="file"]::file-selector-button,
body[data-ui-mode="light"] input[type="file"]::file-selector-button {
    background: #e2e8f0 !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-weight: 900 !important;
}

body.theme-light input[type="checkbox"],
body.theme-light input[type="radio"],
body.light-mode input[type="checkbox"],
body.light-mode input[type="radio"],
body.ui-light input[type="checkbox"],
body.ui-light input[type="radio"],
body[data-ui-mode="light"] input[type="checkbox"],
body[data-ui-mode="light"] input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    background: initial !important;
    background-color: initial !important;
    background-image: initial !important;
    color: initial !important;
    -webkit-text-fill-color: initial !important;
    border: initial !important;
    box-shadow: none !important;
    accent-color: #22c55e !important;
}



/* =========================================================
   FINAL LIGHT MODE FIX: Fabric Meters Known toggle
   Removes dark/black box and keeps clean light/green button.
========================================================= */
body.theme-light .meters-toggle,
body.theme-light .meters-check,
body.light-mode .meters-toggle,
body.light-mode .meters-check,
body.ui-light .meters-toggle,
body.ui-light .meters-check,
body[data-ui-mode="light"] .meters-toggle,
body[data-ui-mode="light"] .meters-check {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 10px !important;
    min-width: 0 !important;
    height: auto !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body.theme-light .meters-toggle input[type="checkbox"],
body.theme-light .meters-check input[type="checkbox"],
body.light-mode .meters-toggle input[type="checkbox"],
body.light-mode .meters-check input[type="checkbox"],
body.ui-light .meters-toggle input[type="checkbox"],
body.ui-light .meters-check input[type="checkbox"],
body[data-ui-mode="light"] .meters-toggle input[type="checkbox"],
body[data-ui-mode="light"] .meters-check input[type="checkbox"] {
    display: none !important;
}

body.theme-light .meters-toggle-button,
body.theme-light .meters-check,
body.light-mode .meters-toggle-button,
body.light-mode .meters-check,
body.ui-light .meters-toggle-button,
body.ui-light .meters-check,
body[data-ui-mode="light"] .meters-toggle-button,
body[data-ui-mode="light"] .meters-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 155px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    background: #eef2f7 !important;
    background-color: #eef2f7 !important;
    background-image: none !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    font-weight: 900 !important;
}

body.theme-light .meters-toggle input[type="checkbox"]:checked + .meters-toggle-button,
body.theme-light .meters-check:has(input[type="checkbox"]:checked),
body.light-mode .meters-toggle input[type="checkbox"]:checked + .meters-toggle-button,
body.light-mode .meters-check:has(input[type="checkbox"]:checked),
body.ui-light .meters-toggle input[type="checkbox"]:checked + .meters-toggle-button,
body.ui-light .meters-check:has(input[type="checkbox"]:checked),
body[data-ui-mode="light"] .meters-toggle input[type="checkbox"]:checked + .meters-toggle-button,
body[data-ui-mode="light"] .meters-check:has(input[type="checkbox"]:checked) {
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    background-image: none !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border: 1px solid #86efac !important;
    box-shadow: none !important;
}

/* =========================================================
   FABRIC IN CAMERA / SAVE BUTTON FINAL FIX
   ========================================================= */
.fabric-photo-upload-group {
    position: relative;
}

.camera-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.camera-upload-button {
    width: 100%;
    min-height: 58px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.55);
    background: #122a4a;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 950 !important;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20);
}

.camera-upload-icon {
    font-size: 26px;
    line-height: 1;
}

.camera-upload-button:hover {
    transform: translateY(-1px);
    border-color: #60a5fa;
}

.photo-preview-box {
    margin-top: 12px;
}

.photo-preview-box img {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    background: #f1f5f9 !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12) !important;
}

.staff-section-title {
    grid-column: 1 / -1;
    display: block;
    margin-top: 4px;
    margin-bottom: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.4;
}

.btn-save-fabric,
button.btn-save-fabric,
.fabric-action-buttons .btn-save-fabric {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.22) !important;
}

.btn-save-fabric:hover,
button.btn-save-fabric:hover,
.fabric-action-buttons .btn-save-fabric:hover {
    background: linear-gradient(135deg, #16a34a, #166534) !important;
    color: #ffffff !important;
}

.theme-light .camera-upload-button,
.light-mode .camera-upload-button,
.ui-light .camera-upload-button {
    background: #e9edf3 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.theme-light .camera-upload-button:hover,
.light-mode .camera-upload-button:hover,
.ui-light .camera-upload-button:hover {
    background: #dde7f2 !important;
    border-color: #93c5fd !important;
}

.theme-light .staff-section-title,
.light-mode .staff-section-title,
.ui-light .staff-section-title {
    color: #0f172a !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.theme-light .photo-preview-box img,
.light-mode .photo-preview-box img,
.ui-light .photo-preview-box img {
    background: #e9edf3 !important;
    border-color: #cbd5e1 !important;
}

/* =========================================================
   FINAL FIX: Fabric In staff verification + green save button
   Makes Staff Verification look like a proper section divider
   and forces Save Fabric Batch to stay green in both modes.
========================================================= */
.content .staff-section-title,
.panel .staff-section-title,
.fabric-in-page .staff-section-title,
body .staff-section-title {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    margin: 14px 0 2px !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

body.theme-dark .staff-section-title,
body.dark-mode .staff-section-title,
body.ui-dark .staff-section-title,
body[data-ui-mode="dark"] .staff-section-title {
    background: #132846 !important;
    background-color: #132846 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #24476e !important;
}

body.theme-light .staff-section-title,
body.light-mode .staff-section-title,
body.ui-light .staff-section-title,
body[data-ui-mode="light"] .staff-section-title {
    background: #eef2f7 !important;
    background-color: #eef2f7 !important;
    background-image: none !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

.content .fabric-action-buttons,
.panel .fabric-action-buttons,
.fabric-in-page .fabric-action-buttons {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.content .fabric-action-buttons button.btn-save-fabric,
.content .fabric-action-buttons .btn.btn-save-fabric,
.panel .fabric-action-buttons button.btn-save-fabric,
.panel .fabric-action-buttons .btn.btn-save-fabric,
.fabric-in-page button.btn-save-fabric,
body button.btn.btn-save-fabric[type="submit"],
body .btn.btn-save-fabric {
    background: #16a34a !important;
    background-color: #16a34a !important;
    background-image: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #15803d !important;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.24) !important;
    min-width: 210px !important;
    min-height: 54px !important;
    font-weight: 950 !important;
}

.content .fabric-action-buttons button.btn-save-fabric:hover,
.content .fabric-action-buttons .btn.btn-save-fabric:hover,
.panel .fabric-action-buttons button.btn-save-fabric:hover,
.panel .fabric-action-buttons .btn.btn-save-fabric:hover,
.fabric-in-page button.btn-save-fabric:hover,
body button.btn.btn-save-fabric[type="submit"]:hover,
body .btn.btn-save-fabric:hover {
    background: #15803d !important;
    background-color: #15803d !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #166534 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   FABRIC LIST: YARDS + PDF + STATUS COLORS FIX
   ========================================================= */
.fabric-list-page .fabric-search-btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-end !important;
}

.fabric-list-page .fabric-search-btn.pdf,
body .fabric-search-btn.pdf {
    background: #0f2f5f !important;
    background-color: #0f2f5f !important;
    background-image: linear-gradient(135deg, #123f7a 0%, #0b2345 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #214d84 !important;
}

.fabric-list-page .fabric-list-table,
.fabric-list-page table.fabric-list-table {
    min-width: 1580px !important;
}

.fabric-list-page .fabric-yards-cell,
.fabric-list-page .fabric-location-cell,
.fabric-list-page .fabric-date-cell,
.fabric-list-page .pcs-number {
    font-weight: 900 !important;
    color: var(--heading, #0f172a) !important;
    -webkit-text-fill-color: currentColor !important;
}

.fabric-list-page .fabric-no-photo,
body.theme-light .fabric-no-photo,
body.light-mode .fabric-no-photo,
body.ui-light .fabric-no-photo,
body[data-ui-mode="light"] .fabric-no-photo {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

/* Done / Ready / Delivered = light green, Pending / No Work = light red */
.done-badge,
.status-done,
.status-ready,
.status-delivered,
.badge.green,
body .ledger-status.green,
body .status-present,
body .status-closed {
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    background-image: none !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border: 1px solid #86efac !important;
    box-shadow: none !important;
}

.not-done-badge,
.status-pending,
.status-absent,
.status-no-work,
.badge.red,
body .ledger-status.red {
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
    background-image: none !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    border: 1px solid #fecaca !important;
    box-shadow: none !important;
}

/* Attendance specific soft colors */
.attendance-table .status-absent,
.attendance-table .status-no-work,
.attendance-table .not-done-badge,
body .status-absent,
body .status-no-work {
    background: #fee2e2 !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    border-color: #fecaca !important;
}

.attendance-table .status-working,
.attendance-table .status-present,
body .status-working,
body .status-present {
    background: #dcfce7 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border-color: #86efac !important;
}

/* Fabric List edit button must be red */
.fabric-list-page .fabric-edit-btn,
body .fabric-edit-btn,
table .fabric-edit-btn,
.table-wrap .fabric-edit-btn {
    background: #dc2626 !important;
    background-color: #dc2626 !important;
    background-image: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #b91c1c !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.18) !important;
}

.fabric-list-page .fabric-edit-btn:hover,
body .fabric-edit-btn:hover {
    background: #b91c1c !important;
    background-color: #b91c1c !important;
    background-image: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
}

/* PDF / print */
.print-report-header {
    display: none;
}

@media print {
    body,
    html {
        background: #ffffff !important;
        color: #111827 !important;
    }

    .sidebar,
    .topbar,
    .no-print,
    .alert,
    .fabric-list-page .panel.no-print {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
    }

    .content {
        padding: 0 !important;
    }

    .print-report-header {
        display: block !important;
        text-align: center !important;
        margin-bottom: 14px !important;
        color: #111827 !important;
    }

    .print-report-header h1 {
        margin: 0 0 4px !important;
        font-size: 22px !important;
        color: #111827 !important;
    }

    .print-report-header p {
        margin: 2px 0 !important;
        font-size: 12px !important;
        color: #334155 !important;
    }

    .panel,
    .card,
    .box {
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    .fabric-list-page .fabric-page-title h2 {
        color: #111827 !important;
    }

    .fabric-list-page .table-wrap {
        overflow: visible !important;
    }

    .fabric-list-page table.fabric-list-table {
        min-width: 100% !important;
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 10px !important;
    }

    .fabric-list-page th,
    .fabric-list-page td {
        padding: 5px 4px !important;
        font-size: 9px !important;
        color: #111827 !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        -webkit-text-fill-color: #111827 !important;
    }

    .fabric-list-page .fabric-photo {
        width: 34px !important;
        height: 34px !important;
    }

    .fabric-list-page .fabric-batch-box,
    .fabric-list-page .done-badge,
    .fabric-list-page .not-done-badge {
        padding: 3px 5px !important;
        min-width: auto !important;
        font-size: 9px !important;
        box-shadow: none !important;
    }

    @page {
        size: A4 landscape;
        margin: 8mm;
    }
}


/* =========================================================
   FABRIC LIST STATUS FINAL FIX - 20260618-fabriclist2
   Only Done/Delivered green. All other fabric statuses red.
   Edit button is strong red.
========================================================= */
.fabric-list-page .done-badge {
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    background-image: none !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border: 1px solid #86efac !important;
    box-shadow: none !important;
}

.fabric-list-page .not-done-badge,
.fabric-list-page .status-pending,
.fabric-list-page .status-ready,
.fabric-list-page .status-working,
.fabric-list-page .status-alteration,
.fabric-list-page .status-given,
.fabric-list-page .status-received,
.fabric-list-page .status-open,
.fabric-list-page .status-no-work,
.fabric-list-page .status-absent {
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
    background-image: none !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    border: 1px solid #fecaca !important;
    box-shadow: none !important;
}

.fabric-list-page .fabric-edit-btn,
.fabric-list-page a.fabric-edit-btn,
.fabric-list-page table .fabric-edit-btn,
body.theme-light .fabric-list-page .fabric-edit-btn,
body.theme-dark .fabric-list-page .fabric-edit-btn {
    background: #b91c1c !important;
    background-color: #b91c1c !important;
    background-image: linear-gradient(135deg, #ef4444 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 2px solid #7f1d1d !important;
    box-shadow: 0 10px 22px rgba(185, 28, 28, 0.35) !important;
    font-weight: 950 !important;
}

.fabric-list-page .fabric-edit-btn:hover,
.fabric-list-page a.fabric-edit-btn:hover,
body.theme-light .fabric-list-page .fabric-edit-btn:hover,
body.theme-dark .fabric-list-page .fabric-edit-btn:hover {
    background: #991b1b !important;
    background-color: #991b1b !important;
    background-image: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%) !important;
    transform: translateY(-2px);
}


/* =========================================================
   FINAL STATUS COLOR OVERRIDE - 20260618-statusredfinal
   Use independent Fabric List status classes so old badge CSS cannot override.
========================================================= */
.fabric-status-pill,
span.fabric-status-pill,
.fabric-list-page .fabric-status-pill,
.fabric-list-page table span.fabric-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 84px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.fabric-status-pill.fabric-status-green,
span.fabric-status-pill.fabric-status-green,
.fabric-list-page .fabric-status-pill.fabric-status-green,
.fabric-list-page table span.fabric-status-pill.fabric-status-green {
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    background-image: none !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border: 1px solid #86efac !important;
}

.fabric-status-pill.fabric-status-red,
span.fabric-status-pill.fabric-status-red,
.fabric-list-page .fabric-status-pill.fabric-status-red,
.fabric-list-page table span.fabric-status-pill.fabric-status-red {
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
    background-image: none !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

body.theme-light .fabric-list-page .fabric-status-pill.fabric-status-red,
body.theme-dark .fabric-list-page .fabric-status-pill.fabric-status-red {
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    border-color: #fecaca !important;
}

body.theme-light .fabric-list-page .fabric-status-pill.fabric-status-green,
body.theme-dark .fabric-list-page .fabric-status-pill.fabric-status-green {
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border-color: #86efac !important;
}

/* =========================================================
   CUTTING ENTRY FINAL FIX - FABRIC CARDS / REVIEW / BUTTONS
   ========================================================= */

body.ui-light .cutting-page .cutting-note,
body.light-mode .cutting-page .cutting-note,
body[data-theme="light"] .cutting-page .cutting-note {
    color: #5f6875 !important;
}

body.ui-light .cutting-page .btn-cut-search,
body.light-mode .cutting-page .btn-cut-search,
body[data-theme="light"] .cutting-page .btn-cut-search,
.cutting-page .btn-cut-search {
    background: linear-gradient(135deg, #60a5fa, #2563eb) !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22) !important;
}

body.ui-light .cutting-page .btn-cut-reset,
body.light-mode .cutting-page .btn-cut-reset,
body[data-theme="light"] .cutting-page .btn-cut-reset,
.cutting-page .btn-cut-reset {
    background: transparent !important;
    color: #dc2626 !important;
    border: 2px solid #ef4444 !important;
    box-shadow: none !important;
}

.cutting-page .fabric-button-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.cutting-page .fabric-mini-card,
.cutting-page .fabric-btn.fabric-mini-card {
    min-height: 112px !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    text-align: left !important;
    border-radius: 18px !important;
    position: relative !important;
}

.cutting-page .fabric-mini-photo {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef2f7 !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.cutting-page .fabric-mini-photo img,
.cutting-page .fabric-mini-card > img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    margin: 0 !important;
}

.cutting-page .fabric-mini-details {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    color: inherit !important;
}

.cutting-page .fabric-mini-details strong,
.cutting-page .fabric-mini-details span {
    display: block !important;
    line-height: 1.25 !important;
}

.cutting-page .fabric-mini-details .fabric-batch-no-text {
    font-size: 19px !important;
    font-weight: 950 !important;
}

.cutting-page .fabric-mini-details span {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #d8e2f0 !important;
}

body.ui-light .cutting-page .fabric-mini-details span,
body.light-mode .cutting-page .fabric-mini-details span,
body[data-theme="light"] .cutting-page .fabric-mini-details span {
    color: #475569 !important;
}

.cutting-page .fabric-btn.active,
.cutting-page .fabric-mini-card.active,
.cutting-page .choice-btn.active,
.cutting-page .group-btn.active,
.cutting-page .size-btn.active {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(22, 163, 74, 0.28) !important;
}

.cutting-page .fabric-btn.active *,
.cutting-page .fabric-mini-card.active *,
.cutting-page .choice-btn.active,
.cutting-page .choice-btn.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.cutting-page .fabric-mini-card .selected-pill {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    background: #ffffff !important;
    color: #15803d !important;
    border: 1px solid rgba(255,255,255,0.90) !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

.cutting-page .cutting-review-box {
    display: block !important;
    padding: 14px !important;
    border-radius: 18px !important;
}

.cutting-page .review-selected-fabric {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.cutting-page .review-photo {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #eef2f7 !important;
    border: 1px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.cutting-page .review-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.cutting-page .review-info .label {
    margin-bottom: 4px !important;
}

.cutting-page .review-info .value {
    margin-bottom: 4px !important;
}

.cutting-page .review-fabric-name {
    font-size: 13px !important;
    font-weight: 850 !important;
    color: #94a3b8 !important;
}

body.ui-light .cutting-page .review-fabric-name,
body.light-mode .cutting-page .review-fabric-name,
body[data-theme="light"] .cutting-page .review-fabric-name {
    color: #475569 !important;
}

.cutting-page .btn-save-cutting,
body.ui-light .cutting-page .btn-save-cutting,
body.light-mode .cutting-page .btn-save-cutting,
body[data-theme="light"] .cutting-page .btn-save-cutting {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 12px 26px rgba(22, 163, 74, 0.25) !important;
}

.cutting-page .cutting-save-buttons {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

@media (max-width: 700px) {
    .cutting-page .fabric-button-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    }

    .cutting-page .fabric-mini-card,
    .cutting-page .fabric-btn.fabric-mini-card {
        grid-template-columns: 82px 1fr !important;
        min-height: 98px !important;
    }

    .cutting-page .fabric-mini-photo,
    .cutting-page .fabric-mini-photo img,
    .cutting-page .fabric-mini-card > img {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
        min-height: 82px !important;
    }
}

/* =========================================================
   FINAL CUTTING ENTRY FIXES - search blue, readable selected,
   readable review, remove dark color conflicts
========================================================= */

/* Standard blue for ALL search buttons in the factory app */
.btn-cut-search,
.search-btn,
.btn.search,
.ledger-btn.search,
.fabric-search-btn.search,
.btn-delivered-search,
body.theme-light .btn-cut-search,
body.theme-light .search-btn,
body.theme-light .btn.search,
body.theme-light .ledger-btn.search,
body.theme-light .fabric-search-btn.search,
body.theme-light .btn-delivered-search,
body.ui-light .btn-cut-search,
body.ui-light .search-btn,
body.ui-light .btn.search,
body.ui-light .ledger-btn.search,
body.ui-light .fabric-search-btn.search,
body.ui-light .btn-delivered-search,
body.light-mode .btn-cut-search,
body.light-mode .search-btn,
body.light-mode .btn.search,
body.light-mode .ledger-btn.search,
body.light-mode .fabric-search-btn.search,
body.light-mode .btn-delivered-search {
    background: linear-gradient(135deg, #63d4ff 0%, #2f7df3 100%) !important;
    border-color: #2f9bff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(47, 125, 243, 0.25) !important;
}

.btn-cut-search:hover,
.search-btn:hover,
.btn.search:hover,
.ledger-btn.search:hover,
.fabric-search-btn.search:hover,
.btn-delivered-search:hover,
body.theme-light .btn-cut-search:hover,
body.theme-light .search-btn:hover,
body.theme-light .btn.search:hover,
body.theme-light .ledger-btn.search:hover,
body.theme-light .fabric-search-btn.search:hover,
body.theme-light .btn-delivered-search:hover {
    background: linear-gradient(135deg, #76ddff 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Cutting Entry selected fabric card readability */
.cutting-page .fabric-mini-card.active,
.cutting-page .fabric-btn.fabric-mini-card.active,
body.theme-light .cutting-page .fabric-mini-card.active,
body.ui-light .cutting-page .fabric-mini-card.active,
body.light-mode .cutting-page .fabric-mini-card.active {
    background: linear-gradient(135deg, #22c55e 0%, #0f8a3b 100%) !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.cutting-page .fabric-mini-card.active *,
.cutting-page .fabric-btn.fabric-mini-card.active *,
body.theme-light .cutting-page .fabric-mini-card.active *,
body.ui-light .cutting-page .fabric-mini-card.active *,
body.light-mode .cutting-page .fabric-mini-card.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.cutting-page .fabric-mini-card.active .selected-pill,
.cutting-page .fabric-btn.fabric-mini-card.active .selected-pill,
body.theme-light .cutting-page .fabric-mini-card.active .selected-pill,
body.ui-light .cutting-page .fabric-mini-card.active .selected-pill,
body.light-mode .cutting-page .fabric-mini-card.active .selected-pill {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 2px solid #ffffff !important;
    font-weight: 950 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.16) !important;
}

.cutting-page .fabric-mini-card.active .selected-pill *,
.cutting-page .fabric-btn.fabric-mini-card.active .selected-pill *,
body.theme-light .cutting-page .fabric-mini-card.active .selected-pill *,
body.ui-light .cutting-page .fabric-mini-card.active .selected-pill *,
body.light-mode .cutting-page .fabric-mini-card.active .selected-pill * {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Cutting Entry review box readability */
.cutting-page .cutting-review-box,
.cutting-page .review-box.cutting-review-box {
    background: #111827 !important;
    border: 1px solid rgba(148, 163, 184, 0.40) !important;
    color: #ffffff !important;
}

.cutting-page .cutting-review-box *,
.cutting-page .review-box.cutting-review-box *,
.cutting-page .review-details-text,
.cutting-page #reviewDetails {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.cutting-page .cutting-review-box .label {
    color: #93c5fd !important;
    -webkit-text-fill-color: #93c5fd !important;
    font-weight: 950 !important;
}

.cutting-page .cutting-review-box .value,
.cutting-page .cutting-review-box .review-info .value {
    background: rgba(96, 165, 250, 0.16) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.theme-light .cutting-page .cutting-review-box,
body.theme-light .cutting-page .review-box.cutting-review-box,
body.ui-light .cutting-page .cutting-review-box,
body.ui-light .cutting-page .review-box.cutting-review-box,
body.light-mode .cutting-page .cutting-review-box,
body.light-mode .cutting-page .review-box.cutting-review-box {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

body.theme-light .cutting-page .cutting-review-box *,
body.theme-light .cutting-page .review-box.cutting-review-box *,
body.theme-light .cutting-page .review-details-text,
body.theme-light .cutting-page #reviewDetails,
body.ui-light .cutting-page .cutting-review-box *,
body.ui-light .cutting-page .review-box.cutting-review-box *,
body.ui-light .cutting-page .review-details-text,
body.ui-light .cutting-page #reviewDetails,
body.light-mode .cutting-page .cutting-review-box *,
body.light-mode .cutting-page .review-box.cutting-review-box *,
body.light-mode .cutting-page .review-details-text,
body.light-mode .cutting-page #reviewDetails {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

body.theme-light .cutting-page .cutting-review-box .label,
body.ui-light .cutting-page .cutting-review-box .label,
body.light-mode .cutting-page .cutting-review-box .label {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

body.theme-light .cutting-page .cutting-review-box .value,
body.theme-light .cutting-page .cutting-review-box .review-info .value,
body.ui-light .cutting-page .cutting-review-box .value,
body.ui-light .cutting-page .cutting-review-box .review-info .value,
body.light-mode .cutting-page .cutting-review-box .value,
body.light-mode .cutting-page .cutting-review-box .review-info .value {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Staff confirmation cleaner spacing after removing helper notes */
.cutting-page .panel .cutting-header-row h2 {
    margin-bottom: 0 !important;
}

/* Reset stays outlined red */
.btn-cut-reset,
.reset-btn,
body.theme-light .btn-cut-reset,
body.theme-light .reset-btn,
body.ui-light .btn-cut-reset,
body.ui-light .reset-btn,
body.light-mode .btn-cut-reset,
body.light-mode .reset-btn {
    background: transparent !important;
    color: #ef4444 !important;
    -webkit-text-fill-color: #ef4444 !important;
    border: 2px solid #ef4444 !important;
    box-shadow: none !important;
}



/* =========================================================
   CUTTING LIST FIXES - 20260618
   ========================================================= */
.cutting-list-page .cutting-note {
    display: none !important;
}

.cutting-list-page .cutting-title-box span,
.cutting-list-page .cutting-title-box strong,
.cutting-list-page .summary-card span,
.cutting-list-page .summary-card strong {
    font-weight: 950 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.theme-light .cutting-list-page .cutting-title-box,
body.ui-light .cutting-list-page .cutting-title-box,
body.light-mode .cutting-list-page .cutting-title-box {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

body.theme-light .cutting-list-page .cutting-title-box span,
body.theme-light .cutting-list-page .cutting-title-box strong,
body.ui-light .cutting-list-page .cutting-title-box span,
body.ui-light .cutting-list-page .cutting-title-box strong,
body.light-mode .cutting-list-page .cutting-title-box span,
body.light-mode .cutting-list-page .cutting-title-box strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

body.theme-light .cutting-list-page .summary-card,
body.ui-light .cutting-list-page .summary-card,
body.light-mode .cutting-list-page .summary-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

body.theme-light .cutting-list-page .summary-card span,
body.ui-light .cutting-list-page .summary-card span,
body.light-mode .cutting-list-page .summary-card span {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

body.theme-light .cutting-list-page .summary-card strong,
body.ui-light .cutting-list-page .summary-card strong,
body.light-mode .cutting-list-page .summary-card strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 950 !important;
}

/* Same saved blue style for all search buttons */
.btn-search,
.btn-search-cutting,
.btn-cut-search,
.fabric-search-btn.search,
.ledger-btn.search,
.btn-delivered-search,
button[type="submit"].btn-search-cutting,
button[type="submit"].btn-search,
button.search {
    background: linear-gradient(145deg, #67d7ff 0%, #3f8cff 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 12px 26px rgba(63, 140, 255, 0.28) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-search:hover,
.btn-search-cutting:hover,
.btn-cut-search:hover,
.fabric-search-btn.search:hover,
.ledger-btn.search:hover,
.btn-delivered-search:hover,
button[type="submit"].btn-search-cutting:hover,
button[type="submit"].btn-search:hover,
button.search:hover {
    background: linear-gradient(145deg, #79ddff 0%, #2563eb 100%) !important;
}

/* PDF / Print button */
.btn-pdf-cutting,
button.btn-pdf-cutting {
    background: linear-gradient(145deg, #0f2f5f 0%, #123c78 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    box-shadow: 0 10px 22px rgba(15, 47, 95, 0.22) !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.theme-light .btn-pdf-cutting,
body.ui-light .btn-pdf-cutting,
body.light-mode .btn-pdf-cutting {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-color: #1e40af !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* New Cutting button removed from page; keep hidden if old cached page still shows it */
.cutting-list-page .btn-entry-cutting {
    display: none !important;
}

/* No photo must be simple text, not a dark box */
.cutting-list-page .no-photo-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #64748b !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

.cutting-list-page .no-photo-text {
    color: #64748b !important;
    font-weight: 850 !important;
    font-size: 13px !important;
    background: transparent !important;
    border: 0 !important;
}

/* Cutting List print/PDF */
.print-report-header {
    display: none;
    text-align: center;
    margin-bottom: 18px;
}

.print-report-header h1 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 22px;
    font-weight: 950;
}

.print-report-header p {
    margin: 3px 0;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

@media print {
    body,
    html {
        background: #ffffff !important;
        color: #111827 !important;
    }

    .sidebar,
    .topbar,
    .cutting-filter-panel,
    .no-print,
    .alert,
    .btn,
    button,
    .flatpickr-calendar {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
    }

    .content,
    .cutting-list-page {
        padding: 0 !important;
        background: #ffffff !important;
        color: #111827 !important;
    }

    .print-report-header {
        display: block !important;
    }

    .panel,
    .cutting-list-table-panel {
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    table,
    .cutting-table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse !important;
        border: 1px solid #d1d5db !important;
        background: #ffffff !important;
    }

    th,
    td,
    .cutting-table th,
    .cutting-table td {
        color: #111827 !important;
        background: #ffffff !important;
        border: 1px solid #d1d5db !important;
        font-size: 10px !important;
        padding: 6px 5px !important;
        -webkit-text-fill-color: #111827 !important;
    }

    th,
    .cutting-table th {
        background: #f3f4f6 !important;
        font-weight: 950 !important;
    }

    .fabric-thumb,
    table img {
        width: 38px !important;
        height: 38px !important;
        object-fit: cover !important;
    }

    .status-pill,
    .pcs-pill,
    .cutting-no-pill,
    .fabric-no-pill {
        box-shadow: none !important;
        border: 1px solid #9ca3af !important;
        background: #ffffff !important;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
        padding: 3px 5px !important;
        font-size: 10px !important;
        border-radius: 5px !important;
    }

    @page {
        size: A4 landscape;
        margin: 10mm;
    }
}


/* =====================================================
   CREATE BUNDLE - STAFF CARD / CUTTING CARDS / CAMERA
   Added: 20260618-create-bundle-1
===================================================== */
.create-bundle-page .create-bundle-continue,
.create-bundle-page .create-bundle-save,
.create-bundle-page .btn-save-bundle,
.create-bundle-page button[type="submit"].btn-save-bundle {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.28) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.create-bundle-page .create-bundle-continue:hover,
.create-bundle-page .create-bundle-save:hover,
.create-bundle-page .btn-save-bundle:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
}

.create-bundle-page .staff-login-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
    min-width: 0 !important;
    padding: 16px !important;
}

.create-bundle-page .staff-login-card > div:first-child {
    min-width: 0 !important;
    flex: 1 1 280px !important;
}

.create-bundle-page .staff-login-title {
    font-size: 16px !important;
    font-weight: 950 !important;
    margin-bottom: 8px !important;
    color: var(--heading, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
}

.create-bundle-page .staff-login-details {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    color: var(--text, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
}

.create-bundle-page .staff-login-details span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100% !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: normal !important;
    color: var(--text, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
}

.create-bundle-page .staff-detail-name {
    font-size: 15px !important;
    font-weight: 950 !important;
}

.create-bundle-page .staff-login-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

.theme-light .create-bundle-page .staff-login-details span,
.ui-light .create-bundle-page .staff-login-details span {
    background: #eef2f7 !important;
    border: 1px solid #d7dde6 !important;
}

.theme-dark .create-bundle-page .staff-login-details span,
.ui-dark .create-bundle-page .staff-login-details span {
    background: #14233a !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    color: #e5e7eb !important;
}

.create-bundle-page .cutting-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
    gap: 12px !important;
}

.create-bundle-page .cb-cutting-card {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 122px !important;
    padding: 12px !important;
    position: relative !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.create-bundle-page .cb-cutting-photo {
    width: 96px !important;
    height: 96px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 96px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.create-bundle-page .cb-cutting-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.create-bundle-page .cb-cutting-details {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.create-bundle-page .cb-cutting-no {
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    color: var(--heading, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
}

.create-bundle-page .cb-cutting-line {
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
    color: var(--text-soft, #475569) !important;
    -webkit-text-fill-color: currentColor !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.create-bundle-page .cb-cutting-line strong {
    font-weight: 950 !important;
    color: var(--heading, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
}

.theme-light .create-bundle-page .cb-cutting-card,
.ui-light .create-bundle-page .cb-cutting-card {
    background: #ffffff !important;
    border: 1px solid #d7dde6 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
}

.theme-light .create-bundle-page .cb-cutting-photo,
.ui-light .create-bundle-page .cb-cutting-photo {
    background: #eef2f7 !important;
    color: #64748b !important;
    border: 1px solid #d7dde6 !important;
}

.theme-dark .create-bundle-page .cb-cutting-card,
.ui-dark .create-bundle-page .cb-cutting-card {
    background: linear-gradient(135deg, #13233a 0%, #0f1b2e 100%) !important;
    border: 1px solid rgba(99, 160, 235, 0.22) !important;
}

.theme-dark .create-bundle-page .cb-cutting-photo,
.ui-dark .create-bundle-page .cb-cutting-photo {
    background: #0b1220 !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
}

.create-bundle-page .cb-cutting-card.active,
.theme-light .create-bundle-page .cb-cutting-card.active,
.ui-light .create-bundle-page .cb-cutting-card.active,
.theme-dark .create-bundle-page .cb-cutting-card.active,
.ui-dark .create-bundle-page .cb-cutting-card.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: #16a34a !important;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.28) !important;
}

.create-bundle-page .cb-cutting-card.active .cb-cutting-no,
.create-bundle-page .cb-cutting-card.active .cb-cutting-line,
.create-bundle-page .cb-cutting-card.active .cb-cutting-line strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.create-bundle-page .cb-selected-pill {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: #ffffff !important;
    color: #15803d !important;
    border: 1px solid #ffffff !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    border-radius: 999px !important;
    min-width: auto !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16) !important;
    -webkit-text-fill-color: #15803d !important;
}

.create-bundle-page .cb-camera-btn,
.create-bundle-page .camera-upload-btn {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.theme-light .create-bundle-page .cb-camera-btn,
.ui-light .create-bundle-page .cb-camera-btn,
.theme-light .create-bundle-page .camera-upload-btn,
.ui-light .create-bundle-page .camera-upload-btn {
    background: #eef2f7 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    -webkit-text-fill-color: #0f172a !important;
}

.theme-dark .create-bundle-page .cb-camera-btn,
.ui-dark .create-bundle-page .cb-camera-btn,
.theme-dark .create-bundle-page .camera-upload-btn,
.ui-dark .create-bundle-page .camera-upload-btn {
    background: #13233a !important;
    color: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.create-bundle-page .photo-preview-box img,
.create-bundle-page #bundlePhotoPreview {
    width: 96px !important;
    height: 96px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    margin-top: 10px !important;
}

@media (max-width: 700px) {
    .create-bundle-page .staff-login-card {
        align-items: stretch !important;
    }

    .create-bundle-page .staff-login-actions,
    .create-bundle-page .staff-login-actions .btn {
        width: 100% !important;
    }

    .create-bundle-page .cutting-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   CREATE BUNDLE - ADD BUNDLE CARD / SELECTED CUTTING FIX
   Added: 20260618-create-bundle-add-card-2
===================================================== */
.create-bundle-page .selected-cutting-mini {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.theme-light .create-bundle-page .selected-cutting-mini,
.ui-light .create-bundle-page .selected-cutting-mini {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d7dde6 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
}

.theme-dark .create-bundle-page .selected-cutting-mini,
.ui-dark .create-bundle-page .selected-cutting-mini {
    background: #101f35 !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
}

.create-bundle-page .selected-cutting-mini .mini-label {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

.create-bundle-page .selected-cutting-mini .mini-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    border-radius: 14px !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    -webkit-text-fill-color: #166534 !important;
}

.create-bundle-page .mini-change {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    min-width: 132px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    font-weight: 950 !important;
    font-size: 13px !important;
    background: #163a63 !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.22) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.create-bundle-page .panel:has(.bundle-summary-line),
.create-bundle-page .add-bundle-panel {
    overflow: hidden !important;
}

.create-bundle-page .bundle-summary-line {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
    gap: 12px !important;
    margin: 2px 0 18px !important;
    align-items: stretch !important;
}

.create-bundle-page .bundle-summary-box {
    min-height: 88px !important;
    padding: 13px 14px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.theme-light .create-bundle-page .bundle-summary-box,
.ui-light .create-bundle-page .bundle-summary-box {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px solid #d7dde6 !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05) !important;
}

.theme-dark .create-bundle-page .bundle-summary-box,
.ui-dark .create-bundle-page .bundle-summary-box {
    background: #13233a !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
}

.create-bundle-page .bundle-summary-box span {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    -webkit-text-fill-color: #64748b !important;
}

.theme-dark .create-bundle-page .bundle-summary-box span,
.ui-dark .create-bundle-page .bundle-summary-box span {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

.create-bundle-page .bundle-summary-box strong {
    display: block !important;
    color: #111827 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
    -webkit-text-fill-color: #111827 !important;
}

.theme-dark .create-bundle-page .bundle-summary-box strong,
.ui-dark .create-bundle-page .bundle-summary-box strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.create-bundle-page .bundle-summary-box.available {
    border-color: #86efac !important;
    background: #dcfce7 !important;
}

.create-bundle-page .bundle-summary-box.available span,
.create-bundle-page .bundle-summary-box.available strong {
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
}

.create-bundle-page .bundle-number-summary {
    border-color: #93c5fd !important;
    background: #dbeafe !important;
}

.create-bundle-page .bundle-number-summary span,
.create-bundle-page .bundle-number-summary strong {
    color: #1e3a8a !important;
    -webkit-text-fill-color: #1e3a8a !important;
}

.create-bundle-page .bundle-form-grid {
    gap: 16px !important;
    margin-top: 14px !important;
}

.create-bundle-page .bundle-small-form-box {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.create-bundle-page .bundle-small-form-box label {
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.create-bundle-page input[name="pieces"] {
    min-height: 52px !important;
}

.create-bundle-page .choice-buttons {
    gap: 10px !important;
    margin-top: 6px !important;
}

.create-bundle-page .bundle-action-buttons {
    margin-top: 18px !important;
}

.create-bundle-page .cutting-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
    gap: 12px !important;
}

@media (max-width: 900px) {
    .create-bundle-page .bundle-summary-line {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    .create-bundle-page .bundle-summary-line {
        grid-template-columns: 1fr !important;
    }

    .create-bundle-page .selected-cutting-mini,
    .create-bundle-page .mini-change {
        width: 100% !important;
    }
}

/* =========================
   CREATE BUNDLE FINAL FIX
   This Bundle Number red + Change Cutting red
========================= */
.bundle-number-summary,
.bundle-number-summary span,
.bundle-number-summary strong {
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    font-weight: 950 !important;
}

.bundle-number-summary {
    background: #fff1f2 !important;
    border-color: #fecaca !important;
}

.bundle-number-summary strong {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 24px !important;
}

.selected-cutting-mini .mini-change,
.mini-change,
a.mini-change,
button.mini-change {
    background: #dc2626 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #b91c1c !important;
    border-radius: 14px !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.28) !important;
}

.selected-cutting-mini .mini-change:hover,
.mini-change:hover,
a.mini-change:hover,
button.mini-change:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================
   FORCE THIS BUNDLE NUMBER LABEL RED
========================= */
body .bundle-summary-line .bundle-summary-box.bundle-number-summary > span,
body.theme-dark .bundle-summary-line .bundle-summary-box.bundle-number-summary > span,
body.theme-light .bundle-summary-line .bundle-summary-box.bundle-number-summary > span,
body .bundle-number-label-red {
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    font-weight: 950 !important;
}

body .bundle-summary-line .bundle-summary-box.bundle-number-summary > strong,
body.theme-dark .bundle-summary-line .bundle-summary-box.bundle-number-summary > strong,
body.theme-light .bundle-summary-line .bundle-summary-box.bundle-number-summary > strong {
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    font-weight: 950 !important;
}


/* =========================================================
   GIVE BUNDLE FINAL UI FIX
   - saved blue search buttons
   - 1x1 inch cutting/bundle cards
   - red change cutting
   - green selected tailor / selected bundle / give button
========================================================= */
:root {
    --saved-search-blue: #38bdf8;
    --saved-search-blue-dark: #0284c7;
    --strong-red: #dc2626;
    --strong-red-dark: #991b1b;
    --strong-green: #16a34a;
    --strong-green-dark: #15803d;
}

/* This blue is the saved standard for ALL search buttons */
.btn.search-blue-btn,
button.search-blue-btn,
a.search-blue-btn,
.fabric-search-btn.search,
.ledger-btn.search,
.btn-delivered-search,
button[type="submit"].search-blue-btn {
    background: linear-gradient(135deg, var(--saved-search-blue), var(--saved-search-blue-dark)) !important;
    color: #ffffff !important;
    border-color: var(--saved-search-blue-dark) !important;
    box-shadow: 0 10px 22px rgba(2, 132, 199, 0.24) !important;
}

.btn.search-blue-btn:hover,
button.search-blue-btn:hover,
a.search-blue-btn:hover,
.fabric-search-btn.search:hover,
.ledger-btn.search:hover,
.btn-delivered-search:hover {
    background: linear-gradient(135deg, #7dd3fc, #0369a1) !important;
    color: #ffffff !important;
}

.give-page .red-change-btn,
.give-page .change-btn,
.give-page a.change-btn {
    background: linear-gradient(135deg, var(--strong-red), var(--strong-red-dark)) !important;
    color: #ffffff !important;
    border-color: var(--strong-red-dark) !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.24) !important;
}

.give-page .green-submit-btn,
.give-page .give-submit-btn {
    background: linear-gradient(135deg, #22c55e, var(--strong-green-dark)) !important;
    color: #ffffff !important;
    border-color: var(--strong-green-dark) !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.26) !important;
}

.give-page .small-button-grid,
.give-page .bundle-button-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 12px !important;
}

.give-page .give-cutting-mini-card,
.give-page .give-bundle-mini-card {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 12px !important;
    min-height: 116px !important;
    padding: 10px !important;
    align-items: center !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.give-page .give-mini-photo {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: rgba(148, 163, 184, 0.14) !important;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.give-page .give-mini-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.give-page .give-mini-info {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    line-height: 1.25 !important;
}

.give-page .give-mini-number {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    margin-bottom: 2px !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.give-page .give-mini-info span,
.give-page .give-mini-info div {
    font-size: 12px !important;
    font-weight: 850 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Selected bundle/cutting must be readable */
.give-page .bundle-card.active,
.give-page .give-bundle-mini-card.active,
.give-page .cutting-card.active,
.give-page .tailor-card.active {
    background: #dcfce7 !important;
    color: #064e3b !important;
    border-color: #16a34a !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16), 0 12px 24px rgba(22, 163, 74, 0.15) !important;
}

.give-page .bundle-card.active *,
.give-page .give-bundle-mini-card.active *,
.give-page .cutting-card.active *,
.give-page .tailor-card.active *,
.give-page .tailor-card.active .card-small-text,
.give-page .tailor-card.active strong,
.give-page .tailor-card.active span,
.give-page .tailor-card.active div {
    color: #064e3b !important;
    -webkit-text-fill-color: #064e3b !important;
}

.give-page .tailor-card.active .tailor-code-badge,
.give-page .tailor-card.active .tailor-code-badge span {
    background: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #15803d !important;
}

.give-page .selected-bundle-mini,
.give-page #selectedTailorBox,
.give-page .locked-cutting-box {
    color: inherit !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
}

/* Light mode give bundle cards */
body.ui-light .give-page .give-cutting-mini-card,
body.light-mode .give-page .give-cutting-mini-card,
body.theme-light .give-page .give-cutting-mini-card,
body.ui-light .give-page .give-bundle-mini-card,
body.light-mode .give-page .give-bundle-mini-card,
body.theme-light .give-page .give-bundle-mini-card,
body.ui-light .give-page .tailor-card,
body.light-mode .give-page .tailor-card,
body.theme-light .give-page .tailor-card {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

body.ui-light .give-page .give-mini-info span,
body.light-mode .give-page .give-mini-info span,
body.theme-light .give-page .give-mini-info span,
body.ui-light .give-page .card-small-text,
body.light-mode .give-page .card-small-text,
body.theme-light .give-page .card-small-text {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

body.ui-light .give-page .give-mini-number,
body.light-mode .give-page .give-mini-number,
body.theme-light .give-page .give-mini-number,
body.ui-light .give-page .cutting-no-badge span,
body.light-mode .give-page .cutting-no-badge span,
body.theme-light .give-page .cutting-no-badge span,
body.ui-light .give-page .bundle-no-badge span,
body.light-mode .give-page .bundle-no-badge span,
body.theme-light .give-page .bundle-no-badge span {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Dark mode selected cards should still be green and readable */
body.ui-dark .give-page .bundle-card.active,
body.dark-mode .give-page .bundle-card.active,
body.theme-dark .give-page .bundle-card.active,
body.ui-dark .give-page .tailor-card.active,
body.dark-mode .give-page .tailor-card.active,
body.theme-dark .give-page .tailor-card.active {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
}

body.ui-dark .give-page .bundle-card.active *,
body.dark-mode .give-page .bundle-card.active *,
body.theme-dark .give-page .bundle-card.active *,
body.ui-dark .give-page .tailor-card.active *,
body.dark-mode .give-page .tailor-card.active *,
body.theme-dark .give-page .tailor-card.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 700px) {
    .give-page .small-button-grid,
    .give-page .bundle-button-grid {
        grid-template-columns: 1fr !important;
    }

    .give-page .give-cutting-mini-card,
    .give-page .give-bundle-mini-card {
        grid-template-columns: 86px 1fr !important;
    }

    .give-page .give-mini-photo {
        width: 86px !important;
        height: 86px !important;
        min-width: 86px !important;
        min-height: 86px !important;
    }
}


/* =========================================================
   GIVE BUNDLE CLEAN ROW + SELECTED TAILOR FINAL FIX
========================================================= */
.give-page .give-note:empty {
    display: none !important;
}

/* Saved blue for every search button */
.btn.search-blue-btn,
button.search-blue-btn,
a.search-blue-btn,
.give-page .search-blue-btn,
.fabric-search-btn.search,
.ledger-btn.search,
.btn-delivered-search,
button[type="submit"].search-blue-btn {
    background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
    color: #ffffff !important;
    border: 1px solid #0284c7 !important;
    box-shadow: 0 10px 22px rgba(2, 132, 199, 0.26) !important;
}

.btn.search-blue-btn:hover,
button.search-blue-btn:hover,
a.search-blue-btn:hover,
.give-page .search-blue-btn:hover {
    background: linear-gradient(135deg, #7dd3fc, #0369a1) !important;
    color: #ffffff !important;
}

/* Search box + Search Bundle + Show Last 10 in one row */
.give-page .give-bundle-search-row,
.give-page .bundle-search-grid {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 170px 170px !important;
    gap: 12px !important;
    align-items: end !important;
    margin-bottom: 16px !important;
}

.give-page .give-bundle-search-row .form-group,
.give-page .bundle-search-grid .form-group {
    margin-bottom: 0 !important;
}

.give-page .give-bundle-search-row .btn,
.give-page .bundle-search-grid .btn {
    width: 100% !important;
    min-width: 100% !important;
    height: 48px !important;
}

/* Change Cutting must be red */
.give-page .red-change-btn,
.give-page .change-btn,
.give-page a.change-btn {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #ffffff !important;
    border: 1px solid #991b1b !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.28) !important;
}

/* Give Selected Bundle button must be green */
.give-page .give-submit-btn,
.give-page .green-submit-btn,
.give-page button[type="submit"].give-submit-btn {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    border: 1px solid #15803d !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.28) !important;
}

/* Selected tailor must turn FULL green and readable */
.give-page .tailor-card.active,
body.ui-light .give-page .tailor-card.active,
body.light-mode .give-page .tailor-card.active,
body.theme-light .give-page .tailor-card.active,
body.ui-dark .give-page .tailor-card.active,
body.dark-mode .give-page .tailor-card.active,
body.theme-dark .give-page .tailor-card.active {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 14px 26px rgba(21, 128, 61, 0.22) !important;
}

.give-page .tailor-card.active *,
body.ui-light .give-page .tailor-card.active *,
body.light-mode .give-page .tailor-card.active *,
body.theme-light .give-page .tailor-card.active *,
body.ui-dark .give-page .tailor-card.active *,
body.dark-mode .give-page .tailor-card.active *,
body.theme-dark .give-page .tailor-card.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.give-page .tailor-card.active .tailor-code-badge,
.give-page .tailor-card.active .tailor-code-badge span {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.35) !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 800px) {
    .give-page .give-bundle-search-row,
    .give-page .bundle-search-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   GIVE BUNDLE PRECISE FINAL FIX
   - selected cutting details beside red button
   - reset fits in row
   - selected bundle full green
   - tailor card shows code + name only
========================================================= */
.give-page .give-selected-cutting-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.give-page .selected-cutting-inline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 780px !important;
}

.give-page .selected-cutting-inline-details {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: rgba(148, 163, 184, 0.14) !important;
    color: inherit !important;
    overflow: hidden !important;
}

.give-page .selected-cutting-inline-details strong {
    flex: 0 0 auto !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.give-page .selected-cutting-inline-details span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

body.ui-light .give-page .selected-cutting-inline-details,
body.light-mode .give-page .selected-cutting-inline-details,
body.theme-light .give-page .selected-cutting-inline-details {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
}

body.ui-dark .give-page .selected-cutting-inline-details,
body.dark-mode .give-page .selected-cutting-inline-details,
body.theme-dark .give-page .selected-cutting-inline-details {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

.give-page .red-change-btn,
.give-page a.red-change-btn,
.give-page .change-btn,
.give-page a.change-btn {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #ffffff !important;
    border: 1px solid #991b1b !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.28) !important;
    white-space: nowrap !important;
}

/* Bundle search row: input + search + reset all stay inside card */
.give-page .give-bundle-search-row,
.give-page .bundle-search-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 165px) minmax(110px, 135px) !important;
    gap: 10px !important;
    align-items: end !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.give-page .give-bundle-search-row .form-group,
.give-page .bundle-search-grid .form-group {
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

.give-page .give-bundle-search-row .btn,
.give-page .bundle-search-grid .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.give-page .reset-red-btn,
.give-page .bundle-clear-btn.reset-red-btn {
    background: transparent !important;
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
}

.give-page .reset-red-btn:hover,
.give-page .bundle-clear-btn.reset-red-btn:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #b91c1c !important;
    -webkit-text-fill-color: #b91c1c !important;
}

/* Selected bundle must be full green and no separate selected text is shown */
.give-page .give-bundle-mini-card.active,
.give-page .bundle-card.give-bundle-mini-card.active,
body.ui-light .give-page .give-bundle-mini-card.active,
body.light-mode .give-page .give-bundle-mini-card.active,
body.theme-light .give-page .give-bundle-mini-card.active,
body.ui-dark .give-page .give-bundle-mini-card.active,
body.dark-mode .give-page .give-bundle-mini-card.active,
body.theme-dark .give-page .give-bundle-mini-card.active {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 14px 26px rgba(21, 128, 61, 0.22) !important;
}

.give-page .give-bundle-mini-card.active *,
body.ui-light .give-page .give-bundle-mini-card.active *,
body.light-mode .give-page .give-bundle-mini-card.active *,
body.theme-light .give-page .give-bundle-mini-card.active *,
body.ui-dark .give-page .give-bundle-mini-card.active *,
body.dark-mode .give-page .give-bundle-mini-card.active *,
body.theme-dark .give-page .give-bundle-mini-card.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Tailor card should show only: code name, e.g. 1 Babbar */
.give-page .tailor-simple-card,
.give-page .tailor-card.tailor-simple-card {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
}

.give-page .tailor-simple-card strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.give-page .tailor-card.active,
.give-page .tailor-card.tailor-simple-card.active,
body.ui-light .give-page .tailor-card.active,
body.light-mode .give-page .tailor-card.active,
body.theme-light .give-page .tailor-card.active,
body.ui-dark .give-page .tailor-card.active,
body.dark-mode .give-page .tailor-card.active,
body.theme-dark .give-page .tailor-card.active {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

.give-page .tailor-card.active *,
.give-page .tailor-card.tailor-simple-card.active *,
body.ui-light .give-page .tailor-card.active *,
body.light-mode .give-page .tailor-card.active *,
body.theme-light .give-page .tailor-card.active *,
body.ui-dark .give-page .tailor-card.active *,
body.dark-mode .give-page .tailor-card.active *,
body.theme-dark .give-page .tailor-card.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 800px) {
    .give-page .give-selected-cutting-row {
        align-items: flex-start !important;
    }

    .give-page .selected-cutting-inline {
        grid-template-columns: minmax(0, 1fr) auto !important;
        max-width: none !important;
    }

    .give-page .selected-cutting-inline-details span {
        font-size: 12px !important;
    }

    .give-page .give-bundle-search-row,
    .give-page .bundle-search-grid {
        grid-template-columns: minmax(0, 1fr) minmax(110px, 140px) minmax(84px, 100px) !important;
        gap: 8px !important;
    }

    .give-page .give-bundle-search-row label,
    .give-page .bundle-search-grid label {
        font-size: 12px !important;
    }

    .give-page .give-bundle-search-row .btn,
    .give-page .bundle-search-grid .btn {
        font-size: 12px !important;
        min-height: 44px !important;
    }
}


/* FINAL FIX: Give Selected Bundle button text must stay white */
.give-page .give-submit-btn,
.give-page .green-submit-btn,
.give-page button.give-submit-btn,
.give-page button.green-submit-btn,
body.ui-light .give-page .give-submit-btn,
body.light-mode .give-page .give-submit-btn,
body.theme-light .give-page .give-submit-btn,
body.ui-dark .give-page .give-submit-btn,
body.dark-mode .give-page .give-submit-btn,
body.theme-dark .give-page .give-submit-btn {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #15803d !important;
}

.give-page .give-submit-btn *,
.give-page .green-submit-btn * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =====================================================
   FINAL OVERRIDE: GIVE BUNDLE CHANGE CUTTING MUST BE RED
   This is intentionally at the very bottom so no button rule can override it.
===================================================== */
.give-page .give-change-cutting-btn,
.give-page a.give-change-cutting-btn,
.give-page .selected-cutting-inline a[href*="change_cutting"],
.give-page a[href*="change_cutting"].change-btn,
body.ui-light .give-page .give-change-cutting-btn,
body.ui-dark .give-page .give-change-cutting-btn,
body.light-mode .give-page .give-change-cutting-btn,
body.dark-mode .give-page .give-change-cutting-btn {
    background: #dc2626 !important;
    background-image: linear-gradient(135deg, #ef4444 0%, #dc2626 45%, #991b1b 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 2px solid #7f1d1d !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.35) !important;
    font-weight: 950 !important;
}

.give-page .give-change-cutting-btn:hover,
.give-page a.give-change-cutting-btn:hover,
.give-page .selected-cutting-inline a[href*="change_cutting"]:hover {
    background: #b91c1c !important;
    background-image: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.give-page .give-change-cutting-btn *,
.give-page .selected-cutting-inline a[href*="change_cutting"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   RECEIVE BUNDLE FINAL UI FIX
   - compact active bundle cards
   - selected bundle full green
   - receive button green
========================================================= */
.receive-bundle-page .receive-note {
    display: none !important;
}

.receive-bundle-page .receive-search-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: end !important;
}

.receive-bundle-page .receive-search-actions {
    display: flex !important;
    align-items: end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin-bottom: 18px !important;
}

.receive-bundle-page .search-btn,
.receive-bundle-page button[type="submit"].search-btn {
    background: #38bdf8 !important;
    background-image: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 45%, #0284c7 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.26) !important;
}

.receive-bundle-page .reset-btn,
.receive-bundle-page a.reset-btn {
    background: transparent !important;
    color: #ef4444 !important;
    -webkit-text-fill-color: #ef4444 !important;
    border: 2px solid #ef4444 !important;
    box-shadow: none !important;
}

.receive-bundle-page .receive-summary-row,
.receive-bundle-page .active-summary.receive-summary-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.receive-bundle-grid,
.receive-bundle-page .receive-bundle-grid,
.receive-bundle-page .bundle-button-grid.receive-bundle-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 12px !important;
}

.receive-bundle-card,
.receive-bundle-page .receive-bundle-card,
.receive-bundle-page button.receive-bundle-card,
.receive-bundle-page .bundle-choice.receive-bundle-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 118px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    text-align: left !important;
    padding: 11px !important;
    border-radius: 18px !important;
    border: 1px solid var(--line, #334155) !important;
    background: var(--surface, #111827) !important;
    color: var(--text, #f8fafc) !important;
    box-shadow: var(--shadow-card, 0 10px 22px rgba(0,0,0,.18)) !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

.receive-card-photo,
.receive-selected-photo {
    width: 96px !important;
    height: 96px !important;
    border-radius: 14px !important;
    border: 1px solid var(--line-strong, #475569) !important;
    background: var(--input-bg, #f1f5f9) !important;
    color: var(--text-muted, #94a3b8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    flex: 0 0 96px !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

.receive-card-photo img,
.receive-selected-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.receive-card-info {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    color: inherit !important;
    line-height: 1.25 !important;
}

.receive-card-info span,
.receive-card-info b,
.receive-card-info strong,
.receive-card-bundle {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.receive-card-bundle {
    display: block !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    margin-bottom: 2px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.receive-card-info span {
    font-size: 12px !important;
    font-weight: 750 !important;
    opacity: .96 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.receive-card-info b {
    font-weight: 950 !important;
}

.receive-bundle-page .receive-bundle-card.active,
.receive-bundle-page button.receive-bundle-card.active,
.receive-bundle-page .bundle-choice.receive-bundle-card.active {
    background: #16a34a !important;
    background-image: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #15803d 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 2px solid #14532d !important;
    box-shadow: 0 12px 28px rgba(22, 163, 74, 0.32) !important;
}

.receive-bundle-page .receive-bundle-card.active *,
.receive-bundle-page button.receive-bundle-card.active *,
.receive-bundle-page .bundle-choice.receive-bundle-card.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.receive-bundle-page .receive-bundle-card.active .receive-card-photo {
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.55) !important;
}

.receive-selected-card,
.receive-bundle-page .receive-selected-card {
    width: 100% !important;
    border-radius: 20px !important;
    border: 1px solid var(--line, #334155) !important;
    background: var(--surface-soft, #0f172a) !important;
    color: var(--text, #f8fafc) !important;
    box-shadow: var(--shadow-card, 0 10px 22px rgba(0,0,0,.18)) !important;
    padding: 14px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

.receive-selected-empty {
    color: var(--text-muted, #94a3b8) !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

.receive-selected-details {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    max-width: 100% !important;
}

.receive-selected-text {
    min-width: 0 !important;
    max-width: 100% !important;
}

.receive-selected-title {
    color: var(--heading, #ffffff) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    margin-bottom: 10px !important;
    overflow-wrap: anywhere !important;
}

.receive-selected-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: 100% !important;
}

.receive-selected-grid > div {
    min-width: 0 !important;
    background: var(--input-bg, #f1f5f9) !important;
    border: 1px solid var(--line, #334155) !important;
    border-radius: 14px !important;
    padding: 10px !important;
    overflow: hidden !important;
}

.receive-selected-grid span {
    display: block !important;
    color: var(--text-muted, #64748b) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    margin-bottom: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
}

.receive-selected-grid strong {
    display: block !important;
    color: var(--heading, #0f172a) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
}

body.ui-dark .receive-selected-grid > div,
body.dark-mode .receive-selected-grid > div {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
}

body.ui-dark .receive-selected-grid strong,
body.dark-mode .receive-selected-grid strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.receive-bundle-page .receive-submit-btn,
.receive-bundle-page .btn-receive,
.receive-bundle-page button.btn-receive,
.receive-bundle-page button[type="submit"].btn-receive {
    background: #16a34a !important;
    background-image: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #15803d 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 2px solid #14532d !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.32) !important;
    font-weight: 950 !important;
}

.receive-bundle-page .receive-submit-btn *,
.receive-bundle-page .btn-receive * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.receive-bundle-page small {
    color: var(--text-muted, #94a3b8) !important;
    font-weight: 800 !important;
}

@media (max-width: 1100px) {
    .receive-selected-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    .receive-bundle-page .receive-search-row {
        grid-template-columns: 1fr !important;
    }

    .receive-bundle-page .receive-search-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 0 !important;
    }

    .receive-bundle-page .receive-search-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .receive-bundle-page .receive-summary-row,
    .receive-bundle-page .active-summary.receive-summary-row {
        grid-template-columns: 1fr !important;
    }

    .receive-bundle-grid,
    .receive-bundle-page .receive-bundle-grid,
    .receive-bundle-page .bundle-button-grid.receive-bundle-grid {
        grid-template-columns: 1fr !important;
    }

    .receive-selected-details {
        grid-template-columns: 1fr !important;
    }

    .receive-selected-photo {
        width: 96px !important;
        height: 96px !important;
    }

    .receive-selected-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   RECEIVE BUNDLE - SUMMARY CARDS FINAL FIX
   Keeps Total Active Given numbers/text inside the card
========================================================= */
.receive-bundle-page .receive-summary-row,
body .receive-bundle-page .active-summary.receive-summary-row {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

.receive-bundle-page .receive-summary-row .summary-box,
body .receive-bundle-page .active-summary.receive-summary-row .summary-box {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    background: var(--surface-soft, #f1f5f9) !important;
    border: 1px solid var(--line, #d1d5db) !important;
    box-shadow: var(--shadow-card, 0 8px 18px rgba(15, 23, 42, 0.08)) !important;
}

body.theme-dark .receive-bundle-page .receive-summary-row .summary-box,
body.ui-dark .receive-bundle-page .receive-summary-row .summary-box {
    background: #111827 !important;
    border-color: #334155 !important;
}

.receive-bundle-page .receive-summary-row .summary-label,
body .receive-bundle-page .active-summary.receive-summary-row .summary-label {
    width: 100% !important;
    max-width: 100% !important;
    color: var(--text-muted, #64748b) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.receive-bundle-page .receive-summary-row .summary-value,
body .receive-bundle-page .active-summary.receive-summary-row .summary-value {
    width: 100% !important;
    max-width: 100% !important;
    color: var(--heading, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(24px, 5vw, 36px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.theme-dark .receive-bundle-page .receive-summary-row .summary-value,
body.ui-dark .receive-bundle-page .receive-summary-row .summary-value {
    color: #ffffff !important;
}

@media (max-width: 700px) {
    .receive-bundle-page .receive-summary-row,
    body .receive-bundle-page .active-summary.receive-summary-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .receive-bundle-page .receive-summary-row .summary-box,
    body .receive-bundle-page .active-summary.receive-summary-row .summary-box {
        padding: 12px 14px !important;
    }

    .receive-bundle-page .receive-summary-row .summary-value,
    body .receive-bundle-page .active-summary.receive-summary-row .summary-value {
        font-size: 30px !important;
    }
}

/* =========================================================
   BUNDLE LIST UI FINAL
   Compact cards, blue search, readable statuses
========================================================= */
.bundle-list-page .bundle-note {
    display: none !important;
}

.bundle-list-page .bundle-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}

.bundle-list-page .bundle-header-row h2 {
    margin: 0 !important;
    font-weight: 950 !important;
    color: var(--heading, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
}

body.theme-dark .bundle-list-page .bundle-header-row h2,
body.ui-dark .bundle-list-page .bundle-header-row h2 {
    color: #ffffff !important;
}

.bundle-list-page .bundle-form-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.4fr) minmax(160px, .7fr) minmax(150px, .7fr) auto !important;
    gap: 12px !important;
    align-items: end !important;
}

.bundle-list-page .panel:first-of-type .bundle-form-grid {
    grid-template-columns: minmax(260px, 1fr) auto !important;
}

.bundle-list-page .bundle-list-actions,
.bundle-list-page .bundle-search-actions {
    display: flex !important;
    align-items: end !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin-bottom: 18px !important;
    min-width: 0 !important;
}

.bundle-list-page .search-blue-btn,
.bundle-list-page .bundle-list-search-btn,
body .bundle-list-page button[type="submit"].search-blue-btn {
    background: #1ea7ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #1ea7ff !important;
    box-shadow: 0 10px 22px rgba(30, 167, 255, 0.28) !important;
}

.bundle-list-page .reset-red-btn,
.bundle-list-page .bundle-list-reset-btn {
    background: transparent !important;
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
}

.bundle-list-page .bundle-list-pdf-btn {
    background: #0f3a7a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #0f3a7a !important;
    min-width: 125px !important;
}

.bundle-list-page .cutting-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

.bundle-list-page .bundle-list-cutting-card,
.bundle-list-page a.bundle-list-cutting-card {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    text-decoration: none !important;
    background: var(--surface, #ffffff) !important;
    border: 1px solid var(--line, #d7dce5) !important;
    box-shadow: var(--shadow-card, 0 8px 22px rgba(0,0,0,0.08)) !important;
    color: var(--text, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
    min-height: 124px !important;
}

.bundle-list-page .bundle-list-cutting-card.active,
.bundle-list-page a.bundle-list-cutting-card.active {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(22, 163, 74, 0.22) !important;
}

.bundle-list-page .bundle-list-mini-photo,
.bundle-list-page .bundle-list-bundle-card .bundle-photo,
.bundle-list-page .bundle-list-table .bundle-photo {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #eef1f5 !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted, #64748b) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    object-fit: cover !important;
}

.bundle-list-page .bundle-list-mini-photo img,
.bundle-list-page .bundle-list-bundle-card .bundle-photo img,
.bundle-list-page .bundle-list-table .bundle-photo {
    width: 96px !important;
    height: 96px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

.bundle-list-page .bundle-list-mini-info {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.bundle-list-page .bundle-list-mini-info span,
.bundle-list-page .bundle-list-mini-info strong {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    overflow-wrap: anywhere !important;
}

.bundle-list-page .bundle-list-mini-number {
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
}

.bundle-list-page .bundle-list-selected-cutting {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
}

.bundle-list-page .bundle-list-selected-cutting .mini-label {
    color: var(--text-muted, #64748b) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 900 !important;
}

.bundle-list-page .bundle-list-selected-cutting .mini-number {
    color: var(--heading, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 950 !important;
}

.bundle-list-page .change-cutting-red-btn,
body .bundle-list-page .mini-change.change-cutting-red-btn {
    background: #dc2626 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 2px solid #dc2626 !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.22) !important;
}

.bundle-list-page .bundle-list-summary-grid .summary-card,
.bundle-list-page .summary-card {
    min-width: 0 !important;
    overflow: hidden !important;
}

.bundle-list-page .bundle-list-summary-grid .summary-card span,
.bundle-list-page .summary-card span {
    color: var(--heading, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 950 !important;
    opacity: 1 !important;
}

.bundle-list-page .bundle-list-summary-grid .summary-card strong,
.bundle-list-page .summary-card strong {
    color: #1ea7ff !important;
    -webkit-text-fill-color: #1ea7ff !important;
    font-weight: 950 !important;
}

.bundle-list-page .bundle-list-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 14px !important;
}

.bundle-list-page .bundle-list-bundle-card {
    padding: 14px !important;
    border-radius: 18px !important;
    background: var(--surface, #ffffff) !important;
    border: 1px solid var(--line, #d7dce5) !important;
    color: var(--text, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: var(--shadow-card, 0 8px 22px rgba(0,0,0,0.08)) !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.bundle-list-page .bundle-list-bundle-card .top {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.bundle-list-page .bundle-no-pill,
.bundle-list-page .bundle-list-bundle-card .bundle-no-pill,
.bundle-list-page .bundle-list-table .bundle-no-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 95px !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: #eef2ff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid #c7d2fe !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
    box-shadow: none !important;
}

.bundle-list-page .bundle-list-bundle-card .details,
.bundle-list-page .bundle-list-bundle-card .details strong,
.bundle-list-page .bundle-list-table td,
.bundle-list-page .bundle-list-table td strong,
.bundle-list-page .tailor-text,
.bundle-list-page .tailor-code {
    color: var(--text, #111827) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 850 !important;
    overflow-wrap: anywhere !important;
}

.bundle-list-page .no-photo-text {
    color: var(--text-muted, #64748b) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 900 !important;
    font-size: 12px !important;
}

.bundle-list-page .status-pill.status-green,
.bundle-list-page .bundle-list-table .status-pill.status-green {
    background: #dcfce7 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border: 1px solid #86efac !important;
    font-weight: 950 !important;
}

.bundle-list-page .status-pill.status-red,
.bundle-list-page .bundle-list-table .status-pill.status-red,
.bundle-list-page .status-pill.status-created,
.bundle-list-page .status-pill.status-line,
.bundle-list-page .status-pill.status-out,
.bundle-list-page .status-pill.status-alteration {
    background: #fee2e2 !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    border: 1px solid #fecaca !important;
    font-weight: 950 !important;
}

.bundle-list-page .status-pill.status-ready,
.bundle-list-page .status-pill.status-delivered,
.bundle-list-page .status-pill.status-packing {
    background: #dcfce7 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border: 1px solid #86efac !important;
    font-weight: 950 !important;
}

body.theme-dark .bundle-list-page .bundle-list-mini-photo,
body.ui-dark .bundle-list-page .bundle-list-mini-photo,
body.theme-dark .bundle-list-page .bundle-list-bundle-card .bundle-photo,
body.ui-dark .bundle-list-page .bundle-list-bundle-card .bundle-photo {
    background: #1f2937 !important;
    color: #cbd5e1 !important;
}

body.theme-dark .bundle-list-page .bundle-list-bundle-card .details,
body.ui-dark .bundle-list-page .bundle-list-bundle-card .details,
body.theme-dark .bundle-list-page .bundle-list-bundle-card .details strong,
body.ui-dark .bundle-list-page .bundle-list-bundle-card .details strong,
body.theme-dark .bundle-list-page .bundle-list-table td,
body.ui-dark .bundle-list-page .bundle-list-table td,
body.theme-dark .bundle-list-page .bundle-list-table td strong,
body.ui-dark .bundle-list-page .bundle-list-table td strong,
body.theme-dark .bundle-list-page .tailor-text,
body.ui-dark .bundle-list-page .tailor-text,
body.theme-dark .bundle-list-page .tailor-code,
body.ui-dark .bundle-list-page .tailor-code {
    color: #e5e7eb !important;
    -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 1000px) {
    .bundle-list-page .bundle-form-grid,
    .bundle-list-page .panel:first-of-type .bundle-form-grid {
        grid-template-columns: 1fr !important;
    }

    .bundle-list-page .bundle-list-actions,
    .bundle-list-page .bundle-search-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }

    .bundle-list-page .bundle-list-actions .btn,
    .bundle-list-page .bundle-search-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 520px) {
    .bundle-list-page .bundle-list-actions,
    .bundle-list-page .bundle-search-actions {
        grid-template-columns: 1fr !important;
    }

    .bundle-list-page .cutting-card-grid,
    .bundle-list-page .bundle-list-card-grid {
        grid-template-columns: 1fr !important;
    }

    .bundle-list-page .bundle-list-cutting-card,
    .bundle-list-page a.bundle-list-cutting-card,
    .bundle-list-page .bundle-list-bundle-card .top {
        grid-template-columns: 88px minmax(0, 1fr) !important;
    }

    .bundle-list-page .bundle-list-mini-photo,
    .bundle-list-page .bundle-list-bundle-card .bundle-photo,
    .bundle-list-page .bundle-list-table .bundle-photo,
    .bundle-list-page .bundle-list-mini-photo img,
    .bundle-list-page .bundle-list-bundle-card .bundle-photo img,
    .bundle-list-page .bundle-list-table .bundle-photo {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        min-height: 88px !important;
        max-width: 88px !important;
        max-height: 88px !important;
    }
}

@media print {
    .sidebar,
    .topbar,
    .bundle-list-page .panel:first-of-type,
    .bundle-list-page .panel:nth-of-type(2),
    .bundle-list-page .bundle-list-selected-cutting,
    .bundle-list-page .bundle-list-card-grid,
    .alert,
    .no-print {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .bundle-list-page .desktop-table-wrap {
        display: block !important;
    }

    .bundle-list-page .bundle-list-table {
        min-width: 100% !important;
    }
}


/* =========================================================
   Bundle List - Selected Cutting Only + Grid/List View
   ========================================================= */
.bundle-list-page .bundle-list-view-switch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}

.bundle-list-page .bundle-list-view-switch .view-mode-btn {
    min-width: 125px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    background: var(--dark-blue, #153a73) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(21, 58, 115, 0.22) !important;
}

.bundle-list-page .bundle-list-view-switch .view-mode-btn.active {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #15803d !important;
}

body.theme-light .bundle-list-page .bundle-list-view-switch .view-mode-btn,
body.light-mode .bundle-list-page .bundle-list-view-switch .view-mode-btn,
body.ui-light .bundle-list-page .bundle-list-view-switch .view-mode-btn {
    background: #e5e7eb !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

body.theme-light .bundle-list-page .bundle-list-view-switch .view-mode-btn.active,
body.light-mode .bundle-list-page .bundle-list-view-switch .view-mode-btn.active,
body.ui-light .bundle-list-page .bundle-list-view-switch .view-mode-btn.active {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #15803d !important;
}

.bundle-list-page .bundle-list-grid-view {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 14px;
}

.bundle-list-page .bundle-list-list-view {
    display: block !important;
    width: 100%;
    overflow-x: auto;
}

.bundle-list-page .empty-box {
    width: 100%;
    border-radius: 16px;
    padding: 18px;
    font-weight: 900;
    text-align: center;
}

body.theme-light .bundle-list-page .empty-box,
body.light-mode .bundle-list-page .empty-box,
body.ui-light .bundle-list-page .empty-box {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px dashed #cbd5e1 !important;
}

@media (max-width: 700px) {
    .bundle-list-page .bundle-list-view-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
    }

    .bundle-list-page .bundle-list-view-switch .view-mode-btn {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* =========================================================
   PACKING / FOLDING UI FINAL FIX
   ========================================================= */
.packing-folding-page .pack-continue-btn,
.packing-folding-page .pack-save-btn,
.packing-folding-page .pack-ready-btn {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border-color: #15803d !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.25) !important;
}

.packing-folding-page .pack-continue-btn:hover,
.packing-folding-page .pack-save-btn:hover,
.packing-folding-page .pack-ready-btn:hover {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
    color: #ffffff !important;
}

.packing-folding-page .packing-search-btn,
.packing-folding-page button[type="submit"].packing-search-btn {
    background: #38bdf8 !important;
    color: #ffffff !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.25) !important;
}

.packing-folding-page .packing-reset-btn {
    background: transparent !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
}

.packing-folding-page .packing-logout-btn,
.packing-folding-page a.packing-logout-btn,
.packing-folding-page .pack-btn.danger.packing-logout-btn {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #b91c1c !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.26) !important;
}

.packing-folding-page .packing-staff-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    padding: 16px !important;
    overflow: hidden !important;
}

.packing-folding-page .packing-staff-text {
    min-width: 0 !important;
    flex: 1 1 260px !important;
    display: grid !important;
    gap: 4px !important;
    overflow-wrap: anywhere !important;
}

.packing-folding-page .packing-staff-text span {
    color: var(--text-muted) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.packing-folding-page .packing-staff-text strong {
    color: var(--heading) !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
}

.packing-folding-page .packing-staff-text small {
    color: var(--text-soft) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.packing-folding-page .packing-staff-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

.packing-folding-page .packing-search-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}

.packing-folding-page .packing-search-head h2 {
    margin: 0 !important;
}

.packing-folding-page .packing-search-row {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto auto !important;
    gap: 12px !important;
    align-items: end !important;
    width: 100% !important;
}

.packing-folding-page .packing-search-row .form-group {
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

.packing-folding-page .packing-search-row .pack-btn {
    min-width: 120px !important;
    white-space: nowrap !important;
}

.packing-folding-page .pieces-total {
    background: rgba(56, 189, 248, 0.12) !important;
    color: var(--heading) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 14px !important;
    padding: 10px 13px !important;
    font-weight: 950 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.packing-folding-page .packing-section-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}

.packing-folding-page .packing-section-title-row h2 {
    margin: 0 !important;
}

.packing-folding-page .packing-select-actions,
.packing-folding-page .packing-entry-actions,
.packing-folding-page .packing-quick-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.packing-folding-page .packing-bundle-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)) !important;
    gap: 12px !important;
}

.packing-folding-page .packing-bundle-card {
    display: grid !important;
    grid-template-columns: 26px 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-card) !important;
    cursor: pointer !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.packing-folding-page .packing-bundle-card:hover {
    transform: translateY(-2px) !important;
    border-color: #38bdf8 !important;
}

.packing-folding-page .packing-bundle-card.active,
.packing-folding-page .packing-bundle-card.checked {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #15803d !important;
    box-shadow: 0 12px 25px rgba(22, 163, 74, 0.26) !important;
}

.packing-folding-page .packing-bundle-card.active *,
.packing-folding-page .packing-bundle-card.checked * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.packing-folding-page .packing-card-check {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.packing-folding-page .packing-card-check input {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    accent-color: #16a34a !important;
    cursor: pointer !important;
}

.packing-folding-page .packing-bundle-photo,
.packing-folding-page .packing-selected-photo {
    width: 96px !important;
    height: 96px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: var(--surface-muted) !important;
    border: 1px solid var(--line-strong) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 96px !important;
}

.packing-folding-page .packing-bundle-photo img,
.packing-folding-page .packing-selected-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.packing-folding-page .packing-bundle-photo span,
.packing-folding-page .packing-selected-photo span {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: var(--text-muted) !important;
    text-align: center !important;
}

.packing-folding-page .packing-card-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    overflow-wrap: anywhere !important;
}

.packing-folding-page .packing-bundle-no {
    color: var(--heading) !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
}

.packing-folding-page .packing-card-info small {
    color: var(--text-soft) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.packing-folding-page .packing-bulk-bar {
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(130px, 180px)) minmax(220px, auto) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.packing-folding-page .packing-bulk-stat {
    background: var(--surface-soft) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    display: grid !important;
    gap: 4px !important;
}

.packing-folding-page .packing-bulk-stat span {
    color: var(--text-muted) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
}

.packing-folding-page .packing-bulk-stat strong {
    color: var(--heading) !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.packing-folding-page .packing-selected-box {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
    overflow: hidden !important;
}

.packing-folding-page .packing-selected-details {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.55 !important;
    font-weight: 800 !important;
}

.packing-folding-page .packing-selected-details .value,
.packing-folding-page #selectedBundleText {
    color: var(--heading) !important;
    font-weight: 950 !important;
    font-size: 20px !important;
    margin-bottom: 5px !important;
}

.packing-folding-page #selectedBundleDetails,
.packing-folding-page #selectedBundleDetails div {
    color: var(--text-soft) !important;
    font-weight: 800 !important;
    max-width: 100% !important;
}

.packing-folding-page #selectedBundleDetails strong {
    color: var(--heading) !important;
    font-weight: 950 !important;
}

/* Light mode: keep boxes light and clean */
body.ui-light .packing-folding-page .packing-bundle-card,
body.ui-light .packing-folding-page .packing-bulk-stat,
body.ui-light .packing-folding-page .packing-selected-box,
body.ui-light .packing-folding-page .packing-staff-card,
body.ui-light .packing-folding-page .pack-hero,
body.ui-light .packing-folding-page .panel {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d9dce3 !important;
}

body.ui-light .packing-folding-page input.form-control,
body.ui-light .packing-folding-page textarea.form-control,
body.ui-light .packing-folding-page select.form-control {
    background: #f1f3f6 !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

@media (max-width: 900px) {
    .packing-folding-page .packing-search-row {
        grid-template-columns: 1fr !important;
    }

    .packing-folding-page .packing-search-row .pack-btn,
    .packing-folding-page .packing-staff-actions .pack-btn,
    .packing-folding-page .packing-select-actions .pack-btn,
    .packing-folding-page .packing-entry-actions .pack-btn,
    .packing-folding-page .packing-quick-buttons .pack-btn {
        width: 100% !important;
        min-width: 100% !important;
    }

    .packing-folding-page .packing-bulk-bar {
        grid-template-columns: 1fr !important;
    }

    .packing-folding-page .packing-staff-actions,
    .packing-folding-page .packing-select-actions,
    .packing-folding-page .packing-entry-actions,
    .packing-folding-page .packing-quick-buttons {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    .packing-folding-page .packing-bundle-grid {
        grid-template-columns: 1fr !important;
    }

    .packing-folding-page .packing-bundle-card {
        grid-template-columns: 24px 82px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .packing-folding-page .packing-bundle-photo,
    .packing-folding-page .packing-selected-photo {
        width: 82px !important;
        height: 82px !important;
        flex-basis: 82px !important;
    }

    .packing-folding-page .packing-selected-box {
        align-items: flex-start !important;
    }
}


/* =========================================================
   PACKING / FOLDING FINAL FIXES
   - Logout text white
   - Selected bundle summary readable
   - Make Selected Ready button green
   - Selected bundle cards readable
========================================================= */
.packing-folding-page .packing-logout-btn,
.packing-folding-page a.packing-logout-btn,
.packing-folding-page .packing-staff-actions .packing-logout-btn {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 950 !important;
}

.packing-folding-page .pack-ready-btn,
.packing-folding-page button.pack-ready-btn,
.packing-folding-page .packing-bulk-bar .pack-ready-btn {
    background: #16a34a !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.28) !important;
}

.packing-folding-page .pack-ready-btn:hover,
.packing-folding-page button.pack-ready-btn:hover {
    background: #15803d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.packing-folding-page .packing-bulk-bar {
    align-items: stretch !important;
    overflow: visible !important;
}

.packing-folding-page .packing-bulk-stat {
    min-width: 0 !important;
    overflow: visible !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
}

.packing-folding-page .packing-bulk-stat span {
    display: block !important;
    color: var(--heading) !important;
    -webkit-text-fill-color: var(--heading) !important;
    font-weight: 950 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

.packing-folding-page .packing-bulk-stat strong,
.packing-folding-page #bulkBundleCount,
.packing-folding-page #bulkPieceCount {
    display: block !important;
    color: var(--heading) !important;
    -webkit-text-fill-color: var(--heading) !important;
    font-weight: 950 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
}

.packing-folding-page .packing-bundle-card.checked,
.packing-folding-page .packing-bundle-card.active,
.packing-folding-page .packing-bundle-card.checked:hover,
.packing-folding-page .packing-bundle-card.active:hover {
    background: #dcfce7 !important;
    border-color: #16a34a !important;
    color: #052e16 !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14), 0 12px 24px rgba(22, 163, 74, 0.18) !important;
}

.packing-folding-page .packing-bundle-card.checked *,
.packing-folding-page .packing-bundle-card.active * {
    color: #052e16 !important;
    -webkit-text-fill-color: #052e16 !important;
}

.packing-folding-page .packing-bundle-card.checked .packing-bundle-no,
.packing-folding-page .packing-bundle-card.active .packing-bundle-no {
    color: #064e3b !important;
    -webkit-text-fill-color: #064e3b !important;
    font-weight: 950 !important;
}

body.ui-light .packing-folding-page .packing-bulk-stat {
    background: #ffffff !important;
    border-color: #d1d5db !important;
}

body.ui-light .packing-folding-page .packing-bulk-stat span,
body.ui-light .packing-folding-page .packing-bulk-stat strong,
body.ui-light .packing-folding-page #bulkBundleCount,
body.ui-light .packing-folding-page #bulkPieceCount {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

@media (max-width: 900px) {
    .packing-folding-page .packing-bulk-bar {
        grid-template-columns: 1fr !important;
    }
    .packing-folding-page .packing-bulk-bar .pack-ready-btn {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* =========================================================
   PACKING LIST FINAL UI FIX
   Clean aligned cards, grid/list buttons, select buttons,
   green selected bundles, readable summary.
========================================================= */
.packing-list-page {
    width: 100%;
}

.packing-list-page .delivery-hero,
.packing-list-page .delivery-search-panel,
.packing-list-page .delivery-list-panel,
.packing-list-page .make-delivery-panel {
    overflow: hidden !important;
}

.packing-list-page .delivery-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
}

.packing-list-page .delivery-hero h2,
.packing-list-page .delivery-search-panel h2,
.packing-list-page .delivery-list-panel h2,
.packing-list-page .make-delivery-panel h2 {
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}

.packing-list-page .delivery-note,
.packing-list-page .list-help {
    color: var(--text-soft, #cbd5e1) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
}

body.light-mode .packing-list-page .delivery-note,
body.light-mode .packing-list-page .list-help,
body.ui-light .packing-list-page .delivery-note,
body.theme-light .packing-list-page .delivery-note {
    color: #374151 !important;
}

.packing-list-page .delivery-view-toggle {
    display: inline-grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
    border-radius: 18px !important;
    max-width: 100% !important;
    background: rgba(15, 23, 42, 0.70) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

body.light-mode .packing-list-page .delivery-view-toggle,
body.ui-light .packing-list-page .delivery-view-toggle,
body.theme-light .packing-list-page .delivery-view-toggle {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

.packing-list-page .delivery-view-toggle a {
    min-height: 46px !important;
    min-width: 132px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    color: #e5e7eb !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

body.light-mode .packing-list-page .delivery-view-toggle a,
body.ui-light .packing-list-page .delivery-view-toggle a,
body.theme-light .packing-list-page .delivery-view-toggle a {
    color: #111827 !important;
}

.packing-list-page .delivery-view-toggle a.active {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25) !important;
}

.packing-list-page .packing-list-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(260px, 2fr) minmax(160px, 1fr) minmax(160px, 1fr) !important;
    gap: 14px !important;
    align-items: end !important;
}

.packing-list-page .search-actions,
.packing-list-page .select-actions,
.packing-list-page .delivery-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    max-width: 100% !important;
}

.packing-list-page .btn-mini,
.packing-list-page .packing-search-btn,
.packing-list-page .packing-reset-btn,
.packing-list-page .packing-select-btn,
.packing-list-page .packing-unselect-btn,
.packing-list-page .packing-make-delivery-btn {
    min-height: 46px !important;
    min-width: 140px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.packing-list-page .packing-search-btn,
.packing-list-page button[type="submit"].packing-search-btn {
    background: #38bdf8 !important;
    color: #ffffff !important;
    border: 1px solid #0ea5e9 !important;
    box-shadow: 0 8px 18px rgba(56, 189, 248, 0.28) !important;
}

.packing-list-page .packing-reset-btn,
.packing-list-page .packing-unselect-btn {
    background: transparent !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
}

.packing-list-page .packing-select-btn {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border: 1px solid #2563eb !important;
}

.packing-list-page .packing-make-delivery-btn {
    background: #16a34a !important;
    color: #ffffff !important;
    border: 1px solid #15803d !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.28) !important;
}

.packing-list-page .stats-grid,
.packing-list-page .selected-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 12px !important;
}

.packing-list-page .stat-card,
.packing-list-page .selected-summary-box {
    min-width: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

.packing-list-page .stat-card .label,
.packing-list-page .selected-summary-box span {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    word-break: normal !important;
}

.packing-list-page .stat-card .number,
.packing-list-page .selected-summary-box strong {
    color: #ffffff !important;
    font-size: clamp(22px, 4vw, 34px) !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    word-break: break-word !important;
}

body.light-mode .packing-list-page .stat-card .label,
body.light-mode .packing-list-page .selected-summary-box span,
body.ui-light .packing-list-page .stat-card .label,
body.ui-light .packing-list-page .selected-summary-box span,
body.theme-light .packing-list-page .stat-card .label,
body.theme-light .packing-list-page .selected-summary-box span {
    color: #374151 !important;
}

body.light-mode .packing-list-page .stat-card .number,
body.light-mode .packing-list-page .selected-summary-box strong,
body.ui-light .packing-list-page .stat-card .number,
body.ui-light .packing-list-page .selected-summary-box strong,
body.theme-light .packing-list-page .stat-card .number,
body.theme-light .packing-list-page .selected-summary-box strong {
    color: #111827 !important;
}

.packing-list-page .bundle-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.packing-list-page .packing-ready-card {
    cursor: pointer !important;
    overflow: hidden !important;
    border: 2px solid rgba(148, 163, 184, 0.25) !important;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important;
}

.packing-list-page .packing-ready-card:hover {
    transform: translateY(-2px) !important;
}

.packing-list-page .packing-ready-card.is-selected {
    background: #16a34a !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.28) !important;
}

.packing-list-page .packing-ready-card.is-selected *,
.packing-list-page .packing-ready-card.is-selected .info-line,
.packing-list-page .packing-ready-card.is-selected .info-line strong,
.packing-list-page .packing-ready-card.is-selected .bundle-no-pill,
.packing-list-page .packing-ready-card.is-selected .status-pill {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.packing-list-page .packing-ready-card.is-selected .bundle-no-pill,
.packing-list-page .packing-ready-card.is-selected .status-pill {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.packing-list-page .packing-ready-row {
    cursor: pointer !important;
}

.packing-list-page .packing-ready-row.is-selected td {
    background: #16a34a !important;
    color: #ffffff !important;
}

.packing-list-page .packing-ready-row.is-selected td *,
.packing-list-page .packing-ready-row.is-selected .bundle-no-pill {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.packing-list-page .packing-ready-row.is-selected .bundle-no-pill {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.35) !important;
}

.packing-list-page .bundle-card-check {
    max-width: calc(100% - 20px) !important;
    white-space: nowrap !important;
}

.packing-list-page .bundle-photo,
.packing-list-page .table-photo {
    background: #f3f4f6 !important;
}

.packing-list-page .packing-no-photo-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    color: #6b7280 !important;
    font-weight: 900 !important;
    font-size: 12px !important;
}

.packing-list-page .delivery-table-wrap {
    overflow-x: auto !important;
    max-width: 100% !important;
}

.packing-list-page .delivery-table th,
.packing-list-page .delivery-table td {
    white-space: nowrap !important;
}

.packing-list-page .delivery-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.packing-list-page .delivery-form-grid .full {
    grid-column: 1 / -1 !important;
}

@media (max-width: 900px) {
    .packing-list-page .delivery-hero {
        grid-template-columns: 1fr !important;
    }

    .packing-list-page .delivery-view-toggle {
        width: 100% !important;
    }

    .packing-list-page .delivery-view-toggle a {
        min-width: 0 !important;
        width: 100% !important;
    }

    .packing-list-page .packing-list-filter-grid,
    .packing-list-page .delivery-form-grid {
        grid-template-columns: 1fr !important;
    }

    .packing-list-page .search-actions,
    .packing-list-page .select-actions,
    .packing-list-page .delivery-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }

    .packing-list-page .btn-mini,
    .packing-list-page .packing-search-btn,
    .packing-list-page .packing-reset-btn,
    .packing-list-page .packing-select-btn,
    .packing-list-page .packing-unselect-btn,
    .packing-list-page .packing-make-delivery-btn {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    .packing-list-page .search-actions,
    .packing-list-page .select-actions,
    .packing-list-page .delivery-actions {
        grid-template-columns: 1fr !important;
    }

    .packing-list-page .bundle-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   PACKING LIST / ITEMS READY FOR DELIVERY - REBUILT FLOW
   Shows ready bundles from Packing/Folding grouped by cutting.
========================================================= */
.ready-delivery-page,
.ready-delivery-page * {
    box-sizing: border-box;
}

.ready-header-panel,
.ready-search-panel,
.ready-cutting-panel,
.selected-cutting-panel,
.delivery-confirmation-panel {
    overflow: hidden;
}

.ready-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.ready-header-row h2,
.ready-search-panel h2,
.ready-cutting-panel h2,
.selected-cutting-panel h2,
.delivery-confirmation-panel h2 {
    margin: 0 0 10px 0;
    font-weight: 950 !important;
    letter-spacing: -0.03em;
}

.ready-header-row p,
.selected-cutting-top p,
.delivery-confirmation-panel p {
    margin: 0;
    font-weight: 800;
    line-height: 1.5;
}

.ready-stats-grid,
.selected-cutting-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.ready-stat-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line, rgba(148,163,184,.25));
    background: var(--surface, #fff);
    box-shadow: var(--shadow-card, 0 8px 22px rgba(0,0,0,.08));
}

.ready-stat-card span,
.ready-selected-box span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #64748b) !important;
    overflow-wrap: anywhere;
}

.ready-stat-card strong,
.ready-selected-box strong {
    display: block;
    color: var(--heading, #111827) !important;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 950;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.ready-stat-card.wide {
    grid-column: span 2;
}

.ready-stat-card.wide strong {
    font-size: 18px;
    line-height: 1.3;
}

.ready-search-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
}

.ready-search-input-wrap {
    margin-bottom: 0 !important;
}

.ready-search-btn,
button.ready-search-btn,
a.ready-search-btn {
    background: #21a8ff !important;
    color: #ffffff !important;
    border-color: #21a8ff !important;
    box-shadow: 0 10px 22px rgba(33, 168, 255, .28) !important;
}

.ready-reset-btn,
a.ready-reset-btn,
button.ready-reset-btn {
    background: transparent !important;
    color: #e3342f !important;
    border: 2px solid #e3342f !important;
    box-shadow: none !important;
}

.ready-cutting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.ready-cutting-card {
    display: block;
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line, rgba(148,163,184,.25));
    background: var(--surface, #ffffff);
    color: var(--text, #111827) !important;
    text-decoration: none;
    box-shadow: var(--shadow-card, 0 8px 22px rgba(0,0,0,.08));
    overflow: hidden;
}

.ready-cutting-card:hover {
    transform: translateY(-2px);
}

.ready-cutting-card.active {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(22, 163, 74, .28) !important;
}

.ready-cutting-card.active * {
    color: #ffffff !important;
}

.ready-cutting-no {
    font-size: 22px;
    font-weight: 950;
    color: inherit !important;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.ready-cutting-details {
    font-size: 13px;
    line-height: 1.65;
    font-weight: 800;
    color: var(--text-soft, #475569) !important;
    overflow-wrap: anywhere;
}

.ready-cutting-details strong {
    color: var(--heading, #111827) !important;
    font-weight: 950;
}

.selected-cutting-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.selected-cutting-top .btn {
    flex: 0 0 auto;
}

.ready-select-all-btn,
button.ready-select-all-btn {
    background: #1d3f72 !important;
    color: #ffffff !important;
    border-color: #1d3f72 !important;
}

.ready-unselect-btn,
button.ready-unselect-btn {
    background: transparent !important;
    color: #e3342f !important;
    border: 2px solid #e3342f !important;
    box-shadow: none !important;
}

.ready-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.ready-size-chip {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(22, 163, 74, .22);
    background: rgba(22, 163, 74, .10);
    color: var(--heading, #111827) !important;
    overflow: hidden;
}

.ready-size-chip strong {
    display: block;
    font-size: 18px;
    font-weight: 950;
    color: #15803d !important;
    overflow-wrap: anywhere;
}

.ready-size-chip span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 850;
    color: var(--text, #111827) !important;
    overflow-wrap: anywhere;
}

.ready-bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.ready-bundle-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--line, rgba(148,163,184,.25));
    background: var(--surface, #ffffff);
    color: var(--text, #111827) !important;
    box-shadow: var(--shadow-card, 0 8px 22px rgba(0,0,0,.08));
    cursor: pointer;
    overflow: hidden;
}

.ready-bundle-card.is-selected {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(22, 163, 74, .28) !important;
}

.ready-bundle-card.is-selected * {
    color: #ffffff !important;
}

.ready-bundle-check {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    accent-color: #16a34a;
}

.ready-bundle-photo {
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line, rgba(148,163,184,.25));
    background: var(--surface-soft, #f3f4f6);
    color: var(--text-muted, #64748b) !important;
    font-size: 11px;
    font-weight: 950;
    text-align: center;
    flex: 0 0 auto;
}

.ready-bundle-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ready-bundle-info {
    min-width: 0;
    display: block;
    overflow: hidden;
}

.ready-bundle-info b {
    display: block;
    color: var(--heading, #111827) !important;
    font-size: 16px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.ready-bundle-info small {
    display: block;
    color: var(--text-muted, #64748b) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ready-deliver-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(145px, 1fr)) auto;
    gap: 12px;
    align-items: stretch;
    margin-top: 18px;
}

.ready-selected-box {
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line, rgba(148,163,184,.25));
    background: var(--surface-soft, #f8fafc);
    overflow: hidden;
}

.ready-deliver-btn,
button.ready-deliver-btn,
.ready-make-delivery-btn,
button.ready-make-delivery-btn {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 12px 28px rgba(22, 163, 74, .28) !important;
    min-width: 170px;
}

.delivery-confirmation-panel[hidden] {
    display: none !important;
}

.delivery-confirmation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.delivery-confirmation-grid .full {
    grid-column: 1 / -1;
}

.theme-dark .ready-stat-card,
.theme-dark .ready-cutting-card,
.theme-dark .ready-bundle-card,
.theme-dark .ready-selected-box {
    background: #132447 !important;
    border-color: rgba(148, 163, 184, .22) !important;
}

.theme-dark .ready-stat-card span,
.theme-dark .ready-selected-box span,
.theme-dark .ready-bundle-info small,
.theme-dark .ready-cutting-details {
    color: #cbd5e1 !important;
}

.theme-dark .ready-stat-card strong,
.theme-dark .ready-selected-box strong,
.theme-dark .ready-bundle-info b,
.theme-dark .ready-cutting-details strong,
.theme-dark .ready-size-chip span {
    color: #ffffff !important;
}

.theme-light .ready-stat-card,
.theme-light .ready-cutting-card,
.theme-light .ready-bundle-card,
.theme-light .ready-selected-box {
    background: #ffffff !important;
}

.theme-light .ready-search-form input,
.theme-light .delivery-confirmation-grid input,
.theme-light .delivery-confirmation-grid textarea {
    background: #f1f3f5 !important;
    color: #111827 !important;
}

@media (max-width: 900px) {
    .ready-search-form,
    .ready-deliver-row,
    .delivery-confirmation-grid {
        grid-template-columns: 1fr;
    }

    .ready-stat-card.wide {
        grid-column: span 1;
    }

    .selected-cutting-top .btn,
    .ready-deliver-btn,
    .ready-make-delivery-btn {
        width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 520px) {
    .ready-stats-grid,
    .selected-cutting-summary,
    .ready-size-grid,
    .ready-cutting-grid,
    .ready-bundle-grid {
        grid-template-columns: 1fr;
    }

    .ready-bundle-card {
        grid-template-columns: 28px 68px minmax(0, 1fr);
    }

    .ready-bundle-photo {
        width: 68px;
        height: 68px;
    }
}

/* =========================================================
   PACKING LIST - NEW ITEMS READY FOR DELIVERY WORKFLOW
   ========================================================= */
.packing-ready-page,
.packing-ready-page * {
    box-sizing: border-box;
}

.packing-ready-page .panel,
.ready-hero,
.ready-search-panel,
.ready-cutting-panel,
.selected-cutting-panel,
.delivery-confirm-panel {
    overflow: hidden;
}

.ready-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ready-hero h2,
.ready-section-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 950;
    color: var(--heading) !important;
}

.ready-stats-grid,
.selected-cutting-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.ready-stat-card {
    min-width: 0;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    box-shadow: var(--shadow-card) !important;
}

.ready-stat-card span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted) !important;
    font-size: 13px;
    font-weight: 900;
}

.ready-stat-card strong {
    display: block;
    color: var(--heading) !important;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 950;
    word-break: break-word;
}

.ready-stat-card.small strong {
    font-size: 22px;
}

.ready-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 150px;
    gap: 12px;
    align-items: end;
}

.ready-search-input {
    margin-bottom: 0 !important;
    min-width: 0;
}

.ready-search-btn,
.search-btn,
button.search-btn,
a.search-btn,
.btn.search-btn,
button[type="submit"].search,
.fabric-search-btn.search,
.ledger-btn.search {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    font-weight: 950 !important;
}

.ready-reset-btn,
.ready-select-actions .reset-btn,
.reset-btn {
    background: transparent !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
    font-weight: 950 !important;
}

.ready-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ready-cutting-grid,
.ready-bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.ready-cutting-card,
.ready-bundle-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    text-decoration: none;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-card) !important;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ready-cutting-card:hover,
.ready-bundle-card:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong) !important;
}

.ready-cutting-card.active,
.ready-bundle-card.selected {
    background: #dcfce7 !important;
    color: #052e16 !important;
    border-color: #16a34a !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.18) !important;
}

.theme-dark .ready-cutting-card.active,
.theme-dark .ready-bundle-card.selected,
.dark-mode .ready-cutting-card.active,
.dark-mode .ready-bundle-card.selected {
    background: #15803d !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
}

.ready-card-photo {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-muted) !important;
    border: 1px solid var(--line) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.ready-card-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ready-card-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ready-card-info strong {
    color: var(--heading) !important;
    font-size: 17px;
    line-height: 1.15;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.ready-card-info span {
    color: var(--text-soft) !important;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ready-cutting-card.active .ready-card-info strong,
.ready-cutting-card.active .ready-card-info span,
.ready-bundle-card.selected .ready-card-info strong,
.ready-bundle-card.selected .ready-card-info span {
    color: #052e16 !important;
}

.theme-dark .ready-cutting-card.active .ready-card-info strong,
.theme-dark .ready-cutting-card.active .ready-card-info span,
.theme-dark .ready-bundle-card.selected .ready-card-info strong,
.theme-dark .ready-bundle-card.selected .ready-card-info span,
.dark-mode .ready-cutting-card.active .ready-card-info strong,
.dark-mode .ready-cutting-card.active .ready-card-info span,
.dark-mode .ready-bundle-card.selected .ready-card-info strong,
.dark-mode .ready-bundle-card.selected .ready-card-info span {
    color: #ffffff !important;
}

.ready-bundle-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ready-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.ready-size-chip {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px;
    padding: 12px;
    min-width: 0;
}

.ready-size-chip strong {
    display: block;
    color: var(--heading) !important;
    font-size: 16px;
    font-weight: 950;
    margin-bottom: 4px;
}

.ready-size-chip span {
    color: var(--text-soft) !important;
    font-size: 12px;
    font-weight: 850;
}

.ready-select-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.green-btn,
.ready-deliver-btn,
.make-delivery-btn,
.btn.green-btn,
button.green-btn {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    font-weight: 950 !important;
}

.dark-blue-btn,
.btn.dark-blue-btn,
button.dark-blue-btn {
    background: #12355b !important;
    border-color: #12355b !important;
    color: #ffffff !important;
    font-weight: 950 !important;
}

.selected-ready-bar {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: stretch;
    margin-top: 18px;
}

.selected-ready-bar > div {
    min-width: 0;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px;
    padding: 12px 14px;
}

.selected-ready-bar strong {
    display: block;
    color: var(--heading) !important;
    font-size: 23px;
    font-weight: 950;
    line-height: 1.1;
}

.selected-ready-bar span {
    display: block;
    color: var(--text-muted) !important;
    font-size: 12px;
    font-weight: 900;
    margin-top: 4px;
}

.ready-deliver-btn {
    min-width: 170px;
    height: 100%;
}

.delivery-confirm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.delivery-confirm-grid .full {
    grid-column: 1 / -1;
}

.make-delivery-btn {
    margin-top: 14px;
    min-width: 200px;
}

.empty-box {
    padding: 18px;
    border-radius: 16px;
    background: var(--surface-soft) !important;
    color: var(--text-muted) !important;
    border: 1px dashed var(--line-strong) !important;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 900px) {
    .ready-search-row {
        grid-template-columns: 1fr;
    }

    .ready-search-btn,
    .ready-reset-btn {
        width: 100%;
    }

    .selected-ready-bar {
        grid-template-columns: 1fr;
    }

    .ready-deliver-btn {
        width: 100%;
        min-width: 100%;
        min-height: 52px;
    }
}

@media (max-width: 560px) {
    .ready-cutting-grid,
    .ready-bundle-grid {
        grid-template-columns: 1fr;
    }

    .ready-cutting-card,
    .ready-bundle-card {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .ready-card-photo {
        width: 82px;
        height: 82px;
    }

    .delivery-confirm-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PACKING LIST FROM ZERO - ITEMS READY FOR DELIVERY
   Clean workflow only: cutting -> bundles -> confirmation
========================================================= */
.ready-delivery-page {
    --rd-bg: #ffffff;
    --rd-card: #ffffff;
    --rd-soft: #f3f4f6;
    --rd-line: #d9dee8;
    --rd-text: #111827;
    --rd-muted: #4b5563;
    --rd-blue: #22b8ff;
    --rd-blue-dark: #0879c9;
    --rd-green: #16a34a;
    --rd-green-dark: #0f7a36;
    --rd-red: #dc2626;
    --rd-red-soft: #fee2e2;
    --rd-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
}

body.theme-dark .ready-delivery-page,
body.dark-mode .ready-delivery-page,
body.ui-dark .ready-delivery-page {
    --rd-bg: #111827;
    --rd-card: #172033;
    --rd-soft: #243149;
    --rd-line: #334155;
    --rd-text: #ffffff;
    --rd-muted: #cbd5e1;
    --rd-shadow: 0 14px 28px rgba(0, 0, 0, 0.30);
}

.ready-delivery-page .panel,
.ready-delivery-page .rd-summary-card,
.ready-delivery-page .rd-cutting-card,
.ready-delivery-page .rd-bundle-card,
.ready-delivery-page .rd-size-chip {
    background: var(--rd-card) !important;
    color: var(--rd-text) !important;
    border: 1px solid var(--rd-line) !important;
    box-shadow: var(--rd-shadow) !important;
}

.ready-delivery-page h2,
.ready-delivery-page h3,
.ready-delivery-page strong,
.ready-delivery-page label {
    color: var(--rd-text) !important;
    font-weight: 900 !important;
}

.ready-delivery-page span,
.ready-delivery-page p,
.ready-delivery-page div {
    color: inherit;
}

.rd-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.rd-hero h2 {
    margin: 0 !important;
    font-size: 28px !important;
}

.rd-search-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    min-width: min(100%, 620px);
}

.ready-delivery-page .form-control,
.ready-delivery-page input[type="text"],
.ready-delivery-page input[type="password"],
.ready-delivery-page textarea {
    background: #f1f5f9 !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    min-height: 48px !important;
    font-weight: 800 !important;
}

body.theme-dark .ready-delivery-page .form-control,
body.dark-mode .ready-delivery-page .form-control,
body.ui-dark .ready-delivery-page .form-control,
body.theme-dark .ready-delivery-page input[type="text"],
body.dark-mode .ready-delivery-page input[type="text"],
body.ui-dark .ready-delivery-page input[type="text"],
body.theme-dark .ready-delivery-page input[type="password"],
body.dark-mode .ready-delivery-page input[type="password"],
body.ui-dark .ready-delivery-page input[type="password"],
body.theme-dark .ready-delivery-page textarea,
body.dark-mode .ready-delivery-page textarea,
body.ui-dark .ready-delivery-page textarea {
    background: #243149 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

.ready-delivery-page .search-btn,
.ready-delivery-page button.search-btn {
    background: linear-gradient(135deg, var(--rd-blue), var(--rd-blue-dark)) !important;
    color: #ffffff !important;
    border: 0 !important;
    min-width: 120px !important;
}

.ready-delivery-page .reset-btn,
.ready-delivery-page a.reset-btn,
.ready-delivery-page button.reset-btn {
    background: transparent !important;
    color: var(--rd-red) !important;
    border: 2px solid var(--rd-red) !important;
    box-shadow: none !important;
    min-width: 120px !important;
}

.rd-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.rd-summary-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 14px 0 16px;
}

.rd-summary-card {
    border-radius: 18px !important;
    padding: 16px !important;
    min-width: 0;
    overflow: hidden;
}

.rd-summary-card span {
    display: block;
    color: var(--rd-muted) !important;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 7px;
}

.rd-summary-card strong {
    display: block;
    font-size: clamp(20px, 3vw, 30px) !important;
    line-height: 1.15 !important;
    word-break: break-word;
}

.rd-cuttings-panel h2,
.rd-selected-panel h2,
.rd-confirm-panel h2 {
    margin-top: 0 !important;
}

.rd-cutting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.rd-cutting-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 18px !important;
    padding: 14px !important;
    text-decoration: none !important;
    min-width: 0;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.rd-cutting-card:hover {
    transform: translateY(-2px);
    border-color: var(--rd-blue) !important;
}

.rd-cutting-card.active {
    background: #dcfce7 !important;
    border-color: #16a34a !important;
    color: #14532d !important;
}

body.theme-dark .rd-cutting-card.active,
body.dark-mode .rd-cutting-card.active,
body.ui-dark .rd-cutting-card.active {
    background: #14532d !important;
    color: #ffffff !important;
}

.rd-cutting-card strong {
    font-size: 20px !important;
}

.rd-cutting-card span {
    color: var(--rd-muted) !important;
    font-weight: 800;
    font-size: 13px;
}

.rd-cutting-card.active span,
.rd-cutting-card.active strong {
    color: inherit !important;
}

.rd-empty {
    background: var(--rd-soft) !important;
    color: var(--rd-muted) !important;
    border: 1px dashed var(--rd-line) !important;
    border-radius: 16px;
    padding: 18px;
    font-weight: 900;
    text-align: center;
}

.rd-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.rd-selected-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rd-size-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 18px;
}

.rd-size-chip {
    border-radius: 999px !important;
    padding: 10px 13px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rd-size-chip strong {
    font-size: 14px !important;
}

.rd-size-chip span {
    color: var(--rd-muted) !important;
    font-size: 13px;
    font-weight: 800;
}

.rd-bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.rd-bundle-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: start;
    border-radius: 18px !important;
    padding: 12px !important;
    cursor: pointer;
    position: relative;
    min-width: 0;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.rd-bundle-card:hover {
    transform: translateY(-2px);
    border-color: var(--rd-blue) !important;
}

.rd-bundle-card input[type="checkbox"] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px !important;
    height: 22px !important;
    accent-color: var(--rd-green);
}

.rd-bundle-card.selected {
    background: #16a34a !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

.rd-bundle-card.selected * {
    color: #ffffff !important;
}

.rd-bundle-photo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--rd-soft) !important;
    border: 1px solid var(--rd-line) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--rd-muted) !important;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.rd-bundle-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.rd-bundle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-right: 28px;
}

.rd-bundle-info strong {
    font-size: 17px !important;
    line-height: 1.2 !important;
}

.rd-bundle-info span {
    color: var(--rd-muted) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    word-break: break-word;
}

.rd-deliver-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    background: var(--rd-soft) !important;
    border: 1px solid var(--rd-line) !important;
    border-radius: 16px;
    padding: 14px;
    color: var(--rd-text) !important;
    font-weight: 900;
}

.rd-deliver-btn,
.rd-make-delivery-btn,
.ready-delivery-page .rd-deliver-btn,
.ready-delivery-page .rd-make-delivery-btn {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    border: 0 !important;
    min-width: 180px !important;
}

.rd-confirm-panel[hidden] {
    display: none !important;
}

.rd-confirm-panel {
    border-color: #16a34a !important;
}

.rd-confirm-panel .full-width {
    grid-column: 1 / -1;
}

@media print {
    .sidebar,
    .topbar,
    .rd-search-form,
    .rd-selected-actions,
    .rd-deliver-bar,
    .rd-confirm-panel {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .ready-delivery-page .panel,
    .rd-summary-card,
    .rd-bundle-card,
    .rd-cutting-card {
        box-shadow: none !important;
    }
}

@media (max-width: 900px) {
    .rd-hero {
        display: block;
    }

    .rd-search-form {
        grid-template-columns: 1fr;
        margin-top: 14px;
        min-width: 0;
    }

    .rd-summary-grid,
    .rd-summary-grid.compact {
        grid-template-columns: 1fr;
    }

    .rd-selected-head {
        display: block;
    }

    .rd-selected-actions {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .rd-deliver-bar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rd-deliver-btn,
    .rd-make-delivery-btn {
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (max-width: 560px) {
    .rd-cutting-grid,
    .rd-bundle-grid {
        grid-template-columns: 1fr;
    }

    .rd-bundle-card {
        grid-template-columns: 58px 1fr;
    }

    .rd-bundle-photo {
        width: 58px;
        height: 58px;
    }
}
/* =========================================================
   FINAL LIGHT ONLY UI - NO DARK MODE OPTION
   Added by ChatGPT
   Purpose:
   - Force light UI even if body/html has theme-dark/ui-dark classes.
   - Hide dark theme choice card from settings.
   - Keep buttons readable: start green, stop red, search blue, reset red outline.
========================================================= */

:root,
html,
body,
body.theme-dark,
body.theme-light,
body.ui-dark,
body.ui-light,
body.light-mode,
body.dark-mode,
html.theme-dark body,
html.theme-light body,
html.ui-dark body,
html.ui-light body {
    --app-bg: #eef2f7 !important;
    --app-bg-2: #f8fafc !important;
    --surface: #ffffff !important;
    --surface-soft: #f8fafc !important;
    --surface-muted: #eef2f7 !important;
    --line: #d7dde6 !important;
    --line-strong: #cbd5e1 !important;
    --text: #111827 !important;
    --text-soft: #334155 !important;
    --text-muted: #64748b !important;
    --heading: #111827 !important;
    --sidebar-bg: #ffffff !important;
    --sidebar-hover: #eef6ff !important;
    --sidebar-active: #e0f2fe !important;
    --button-bg: #12395f !important;
    --button-bg-hover: #185083 !important;
    --button-secondary: #ffffff !important;
    --button-secondary-hover: #f1f5f9 !important;
    --danger: #dc2626 !important;
    --success: #16a34a !important;
    --warning: #d97706 !important;
    --search-blue: #38bdf8 !important;
    --reset-red: #dc2626 !important;
    --dark-blue: #12395f !important;
    --dark-blue-2: #0d2a47 !important;
    --input-bg: #f1f5f9 !important;
    --input-border: #cbd5e1 !important;
    --input-text: #111827 !important;
    --radius-lg: 22px !important;
    --radius-md: 16px !important;
    --radius-sm: 12px !important;
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    --shadow-card: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
}

html,
body,
body.theme-dark,
body.theme-light,
body.ui-dark,
body.ui-light,
body.dark-mode,
body.light-mode {
    background: linear-gradient(135deg, #eef2f7 0%, #ffffff 48%, #e8edf5 100%) !important;
    background-color: #eef2f7 !important;
    color: #111827 !important;
}

/* Force app layout light */
.app-wrapper,
.main-content,
.content,
body.theme-dark .app-wrapper,
body.theme-dark .main-content,
body.theme-dark .content,
body.ui-dark .app-wrapper,
body.ui-dark .main-content,
body.ui-dark .content {
    background: transparent !important;
    color: #111827 !important;
}

/* Sidebar must stay light */
.sidebar,
body.theme-dark .sidebar,
body.theme-light .sidebar,
body.ui-dark .sidebar,
body.ui-light .sidebar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-right: 1px solid #d7dde6 !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08) !important;
    color: #111827 !important;
}

.sidebar-brand,
body.theme-dark .sidebar-brand,
body.theme-light .sidebar-brand,
body.ui-dark .sidebar-brand,
body.ui-light .sidebar-brand {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    color: #111827 !important;
}

.brand-logo,
body.theme-dark .brand-logo,
body.theme-light .brand-logo,
body.ui-dark .brand-logo,
body.ui-light .brand-logo {
    background: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #16a34a !important;
    box-shadow: none !important;
}

.sidebar-brand h2,
.sidebar-brand p,
body.theme-dark .sidebar-brand h2,
body.theme-dark .sidebar-brand p,
body.ui-dark .sidebar-brand h2,
body.ui-dark .sidebar-brand p {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

.sidebar-menu .menu-title,
body.theme-dark .sidebar-menu .menu-title,
body.theme-light .sidebar-menu .menu-title,
body.ui-dark .sidebar-menu .menu-title,
body.ui-light .sidebar-menu .menu-title {
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid #eef2f7 !important;
    -webkit-text-fill-color: #64748b !important;
}

.sidebar-menu a,
body.theme-dark .sidebar-menu a,
body.theme-light .sidebar-menu a,
body.ui-dark .sidebar-menu a,
body.ui-light .sidebar-menu a {
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid transparent !important;
}

.sidebar-menu a:hover,
body.theme-dark .sidebar-menu a:hover,
body.theme-light .sidebar-menu a:hover,
body.ui-dark .sidebar-menu a:hover,
body.ui-light .sidebar-menu a:hover {
    background: #ecfdf5 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border-color: #bbf7d0 !important;
}

.sidebar-menu a.active,
body.theme-dark .sidebar-menu a.active,
body.theme-light .sidebar-menu a.active,
body.ui-dark .sidebar-menu a.active,
body.ui-light .sidebar-menu a.active {
    background: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: none !important;
}

/* Panels/cards/tables/search boxes light */
.topbar,
.panel,
.card,
.box,
.form-card,
.table-card,
.search-panel,
.page-title-simple,
.hero-box,
.pack-hero,
.simple-panel,
.report-white-panel,
.delivery-hero,
.delivery-search-panel,
.delivery-list-panel,
.make-delivery-panel,
.delivered-items-page .panel,
.ledger-white-panel,
.ledger-summary-card,
.summary-card,
.stat-card,
.mini-card,
.small-info-button,
.big-info-box,
.bundle-card,
.created-bundle-card,
.app-button,
.next-batch-box,
.next-bundle-box,
.available-box,
.this-bundle-number-card,
.staff-login-card,
.staff-bar,
.selected-box,
.selected-cutting-mini,
.quick-selected,
.active-summary,
.delivery-person-box,
.selected-summary-box,
.theme-card,
body.theme-dark .topbar,
body.theme-dark .panel,
body.theme-dark .card,
body.theme-dark .box,
body.theme-dark .form-card,
body.theme-dark .table-card,
body.theme-dark .search-panel,
body.theme-dark .page-title-simple,
body.theme-dark .hero-box,
body.theme-dark .pack-hero,
body.theme-dark .simple-panel,
body.theme-dark .report-white-panel,
body.theme-dark .delivery-hero,
body.theme-dark .delivery-search-panel,
body.theme-dark .delivery-list-panel,
body.theme-dark .make-delivery-panel,
body.theme-dark .summary-card,
body.theme-dark .stat-card,
body.theme-dark .mini-card,
body.theme-dark .bundle-card,
body.theme-dark .created-bundle-card,
body.theme-dark .app-button,
body.theme-dark .theme-card,
body.ui-dark .panel,
body.ui-dark .card,
body.ui-dark .box,
body.ui-dark .form-card,
body.ui-dark .table-card,
body.ui-dark .search-panel,
body.ui-dark .summary-card,
body.ui-dark .stat-card,
body.ui-dark .mini-card,
body.ui-dark .bundle-card,
body.ui-dark .app-button,
body.ui-dark .theme-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d7dde6 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
}

/* Text readable black/dark */
h1, h2, h3, h4, h5, h6,
label,
strong,
.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3,
.box h1,
.box h2,
.box h3,
.form-card h1,
.form-card h2,
.form-card h3,
.table-card h1,
.table-card h2,
.table-card h3,
.search-panel h1,
.search-panel h2,
.search-panel h3,
.page-title-simple h1,
.page-title-simple h2,
.page-title-simple h3,
.hero-box h1,
.hero-box h2,
.hero-box h3,
.pack-hero h1,
.pack-hero h2,
.pack-hero h3,
.fabric-page-title h2,
.delivery-hero h2,
.delivery-search-panel h2,
.delivery-list-panel h2,
.make-delivery-panel h2,
.delivered-header-row h2,
.ledger-title-row h2,
.app-name,
.fabric-name-main,
.info-line strong,
.details strong,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark label,
body.theme-dark strong,
body.theme-dark .app-name,
body.ui-dark h1,
body.ui-dark h2,
body.ui-dark h3,
body.ui-dark label,
body.ui-dark strong,
body.ui-dark .app-name {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

p,
small,
.app-sub,
.text-muted,
.helper-text,
.soft-note,
.bundle-note,
.delivery-note,
.list-help,
.fabric-sub-text,
.info-line,
.details,
.batch-info,
.theme-desc,
body.theme-dark p,
body.theme-dark small,
body.theme-dark .app-sub,
body.theme-dark .helper-text,
body.theme-dark .soft-note,
body.theme-dark .bundle-note,
body.ui-dark p,
body.ui-dark small,
body.ui-dark .app-sub,
body.ui-dark .helper-text {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* Inputs light gray */
.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
select,
textarea,
.flatpickr-input,
body.theme-dark .form-control,
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.theme-dark select,
body.theme-dark textarea,
body.ui-dark .form-control,
body.ui-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.ui-dark select,
body.ui-dark textarea {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

.form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus,
body.theme-dark .form-control:focus,
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 4px rgba(56,189,248,0.18) !important;
}

::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}

select option {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Tables light */
table,
.attendance-table,
.fabric-list-table,
.ledger-table,
.delivered-table,
.delivery-table,
.bundle-table,
.cutting-table,
.packing-list-table,
body.theme-dark table,
body.theme-dark .attendance-table,
body.theme-dark .fabric-list-table,
body.theme-dark .ledger-table,
body.theme-dark .delivered-table,
body.theme-dark .delivery-table,
body.theme-dark .bundle-table,
body.theme-dark .cutting-table,
body.theme-dark .packing-list-table,
body.ui-dark table,
body.ui-dark .attendance-table,
body.ui-dark .fabric-list-table,
body.ui-dark .ledger-table,
body.ui-dark .delivered-table,
body.ui-dark .delivery-table,
body.ui-dark .bundle-table,
body.ui-dark .cutting-table,
body.ui-dark .packing-list-table {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d7dde6 !important;
}

th,
td,
.attendance-table th,
.attendance-table td,
.fabric-list-table th,
.fabric-list-table td,
.ledger-table th,
.ledger-table td,
.delivered-table th,
.delivered-table td,
.delivery-table th,
.delivery-table td,
.bundle-table th,
.bundle-table td,
.cutting-table th,
.cutting-table td,
.packing-list-table th,
.packing-list-table td,
body.theme-dark th,
body.theme-dark td,
body.ui-dark th,
body.ui-dark td {
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

th,
.attendance-table th,
.fabric-list-table th,
.ledger-table th,
.delivered-table th,
.delivery-table th,
.bundle-table th,
.cutting-table th,
.packing-list-table th,
body.theme-dark th,
body.ui-dark th {
    background: #f1f5f9 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-weight: 950 !important;
}

tr:hover td,
body.theme-dark tr:hover td,
body.ui-dark tr:hover td {
    background: #f8fafc !important;
}

/* Default buttons: dark blue accent, not dark UI */
.btn,
button,
input[type="submit"],
input[type="button"],
a.btn,
.pack-btn,
.tab-btn,
.view-mode-btn,
.fabric-search-btn,
.choice-btn,
.btn-mini,
.ledger-btn,
.btn-delivery,
.fabric-edit-btn,
.btn-view-list,
.btn-view-ledger,
body.theme-dark .btn,
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark a.btn,
body.theme-dark .pack-btn,
body.theme-dark .tab-btn,
body.theme-dark .view-mode-btn,
body.theme-dark .fabric-search-btn,
body.theme-dark .choice-btn,
body.theme-dark .btn-mini,
body.theme-dark .ledger-btn,
body.theme-dark .btn-delivery,
body.ui-dark .btn,
body.ui-dark button,
body.ui-dark input[type="submit"],
body.ui-dark input[type="button"],
body.ui-dark a.btn,
body.ui-dark .pack-btn,
body.ui-dark .tab-btn,
body.ui-dark .view-mode-btn,
body.ui-dark .fabric-search-btn,
body.ui-dark .choice-btn,
body.ui-dark .btn-mini {
    background: #12395f !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #12395f !important;
    box-shadow: 0 8px 18px rgba(18, 57, 95, 0.16) !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover,
.pack-btn:hover,
.tab-btn:hover,
.view-mode-btn:hover,
.fabric-search-btn:hover,
.choice-btn:hover,
.btn-mini:hover,
.ledger-btn:hover,
.btn-delivery:hover {
    background: #185083 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Start / continue green */
a[href*="start_work"],
.btn-start,
.btn-start-work,
.start-work,
.start-btn,
button.start-work,
button.btn-start,
.app-button.start,
.app-button.start-work,
.continue,
.btn-continue,
.continue-btn,
.btn-save-bundle,
body.theme-dark a[href*="start_work"],
body.theme-dark .btn-start,
body.theme-dark .btn-start-work,
body.theme-dark .start-work,
body.theme-dark .continue,
body.theme-dark .btn-continue,
body.ui-dark a[href*="start_work"],
body.ui-dark .btn-start,
body.ui-dark .btn-start-work,
body.ui-dark .start-work,
body.ui-dark .continue,
body.ui-dark .btn-continue {
    background: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18) !important;
}

/* Stop / end / delete red */
a[href*="end_work"],
a[href*="stop_work"],
.btn-stop,
.btn-end,
.btn-end-work,
.stop-work,
.end-work,
.stop-btn,
.end-btn,
button.stop-work,
button.end-work,
.app-button.stop,
.app-button.end,
.btn-danger,
.btn.delete,
.btn.danger,
.btn-delete,
.delete-btn,
body.theme-dark a[href*="end_work"],
body.theme-dark a[href*="stop_work"],
body.theme-dark .btn-stop,
body.theme-dark .btn-end,
body.theme-dark .stop-work,
body.theme-dark .end-work,
body.theme-dark .btn-danger,
body.theme-dark .btn.delete,
body.theme-dark .btn.danger,
body.ui-dark a[href*="end_work"],
body.ui-dark a[href*="stop_work"],
body.ui-dark .btn-stop,
body.ui-dark .btn-end,
body.ui-dark .stop-work,
body.ui-dark .end-work,
body.ui-dark .btn-danger {
    background: #dc2626 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #dc2626 !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.18) !important;
}

/* Search blue */
.search-actions button[type="submit"],
.filter-actions button[type="submit"],
.fabric-search-btn.search,
.ledger-btn.search,
.btn-delivered-search,
.btn-search,
.search-btn,
button.search,
.btn.search,
.search-blue-btn,
body.theme-dark .search-actions button[type="submit"],
body.theme-dark .filter-actions button[type="submit"],
body.theme-dark .fabric-search-btn.search,
body.theme-dark .ledger-btn.search,
body.theme-dark .btn-delivered-search,
body.theme-dark .btn-search,
body.theme-dark .search-btn,
body.theme-dark button.search,
body.theme-dark .btn.search,
body.theme-dark .search-blue-btn,
body.ui-dark .search-actions button[type="submit"],
body.ui-dark .filter-actions button[type="submit"],
body.ui-dark .fabric-search-btn.search,
body.ui-dark .ledger-btn.search,
body.ui-dark .btn-search,
body.ui-dark .search-blue-btn {
    background: #38bdf8 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 8px 18px rgba(56, 189, 248, 0.20) !important;
}

/* Reset red outline */
.reset,
.reset-btn,
.btn-reset,
.clear-btn,
.fabric-search-btn.reset,
.ledger-btn.reset,
button.reset,
a.reset,
.reset-red-btn,
body.theme-dark .reset,
body.theme-dark .reset-btn,
body.theme-dark .btn-reset,
body.theme-dark .clear-btn,
body.theme-dark .fabric-search-btn.reset,
body.theme-dark .ledger-btn.reset,
body.theme-dark button.reset,
body.theme-dark a.reset,
body.theme-dark .reset-red-btn,
body.ui-dark .reset,
body.ui-dark .reset-btn,
body.ui-dark .btn-reset,
body.ui-dark .clear-btn,
body.ui-dark .fabric-search-btn.reset,
body.ui-dark .ledger-btn.reset,
body.ui-dark .reset-red-btn {
    background: transparent !important;
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
}

.reset:hover,
.reset-btn:hover,
.btn-reset:hover,
.clear-btn:hover,
.fabric-search-btn.reset:hover,
.ledger-btn.reset:hover,
button.reset:hover,
a.reset:hover,
.reset-red-btn:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    -webkit-text-fill-color: #b91c1c !important;
}

/* Selected/active cards stay green */
.bundle-choice.active,
.cutting-card.active,
.cutting-btn.active,
.batch-btn.active,
.tailor-choice.active,
.choice-btn.active,
.batch-card.active,
.delivery-view-toggle a.active,
.create-bundle-page .cb-cutting-card.active,
body.theme-dark .bundle-choice.active,
body.theme-dark .cutting-card.active,
body.theme-dark .cutting-btn.active,
body.theme-dark .batch-btn.active,
body.theme-dark .tailor-choice.active,
body.theme-dark .choice-btn.active,
body.theme-dark .batch-card.active,
body.theme-dark .delivery-view-toggle a.active,
body.theme-dark .create-bundle-page .cb-cutting-card.active {
    background: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.20) !important;
}

.bundle-choice.active *,
.cutting-card.active *,
.cutting-btn.active *,
.batch-btn.active *,
.tailor-choice.active *,
.choice-btn.active *,
.batch-card.active *,
.delivery-view-toggle a.active *,
.create-bundle-page .cb-cutting-card.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Badges and number pills readable */
.badge,
.status-pill,
.done-badge,
.not-done-badge,
.size-chip,
.fabric-count-pill,
.selected-pill,
.small-status-pill,
.ledger-pill,
.fabric-blue-box,
.batch-number-pill,
.bundle-number-pill,
.fabric-batch-box,
.cutting-no-pill,
.bundle-no,
.next-batch-box strong,
.this-bundle-number-card strong,
.next-bundle-box strong,
.available-box strong,
.batch-no,
.value,
.bundle-no-pill,
.ledger-batch-box {
    background: #e0f2fe !important;
    color: #075985 !important;
    -webkit-text-fill-color: #075985 !important;
    border: 1px solid #bae6fd !important;
    box-shadow: none !important;
}

.done-badge,
.badge.green,
.status-present,
.status-closed,
.status-ready,
.status-delivered,
.selected-pill {
    background: #dcfce7 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border-color: #bbf7d0 !important;
}

.badge.red,
.status-absent,
.status-no-work,
.not-done-badge {
    background: #fee2e2 !important;
    color: #991b1b !important;
    -webkit-text-fill-color: #991b1b !important;
    border-color: #fecaca !important;
}

.badge.orange,
.status-working {
    background: #fef3c7 !important;
    color: #92400e !important;
    -webkit-text-fill-color: #92400e !important;
    border-color: #fde68a !important;
}

/* Images/no photo boxes light */
table img,
.table-wrap table img,
.fabric-photo,
.ledger-photo,
.table-photo,
.delivered-table img,
.bundle-photo,
.created-bundle-photo,
.cutting-card img,
.bundle-choice img,
.bundle-card img,
.no-photo-box,
.ledger-no-photo,
.fabric-no-photo,
.empty-box {
    background: #f1f5f9 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    border: 1px solid #d7dde6 !important;
}

/* Hide dark mode option from settings page */
.theme-choice-grid .theme-card:has(input[value="dark"]),
.theme-choice-grid .theme-card:has(input[value="theme-dark"]),
.theme-choice-grid .theme-card:has(input[value="ui-dark"]),
.theme-choice-grid .theme-card:has(input[value="dark_mode"]),
.theme-choice-grid .theme-card:has(input[value="Dark"]),
.theme-card.dark,
.theme-card.theme-dark,
.theme-card.ui-dark,
.dark-theme-card {
    display: none !important;
}

/* If body still has dark class, light design must win */
body.theme-dark *,
body.ui-dark * {
    text-shadow: none !important;
}

/* Mobile sidebar light */
@media (max-width: 900px) {
    .sidebar,
    body.theme-dark .sidebar,
    body.ui-dark .sidebar {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    .mobile-sidebar-toggle {
        background: #16a34a !important;
        border-color: #16a34a !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.mobile-sidebar-open .mobile-sidebar-overlay {
        background: rgba(15, 23, 42, 0.25) !important;
    }
}

/* Print readable */
@media print {
    body,
    .main-content,
    .content,
    .panel,
    .card,
    .box,
    table,
    th,
    td {
        background: #ffffff !important;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
        box-shadow: none !important;
    }

    th {
        background: #f3f4f6 !important;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
    }
}

/* =========================================================
   FORCE LIGHT UI FOR ALL USERS INCLUDING HELPERS
   This must stay at the very bottom of style.css
========================================================= */

html,
body,
body *,
html body,
html body *,
body.theme-dark,
body.theme-dark *,
body.dark-mode,
body.dark-mode *,
body.ui-dark,
body.ui-dark *,
body[class*="dark"],
body[class*="dark"] * {
    text-shadow: none !important;
}

html,
body,
body.theme-dark,
body.dark-mode,
body.ui-dark,
body[class*="dark"] {
    background: #eef2f7 !important;
    background-color: #eef2f7 !important;
    color: #111827 !important;
}

/* Page background */
.app-wrapper,
.main-content,
.content,
body.theme-dark .app-wrapper,
body.theme-dark .main-content,
body.theme-dark .content,
body.dark-mode .app-wrapper,
body.dark-mode .main-content,
body.dark-mode .content,
body.ui-dark .app-wrapper,
body.ui-dark .main-content,
body.ui-dark .content {
    background: #eef2f7 !important;
    background-color: #eef2f7 !important;
    color: #111827 !important;
}

/* Sidebar light for helper login */
.sidebar,
body.theme-dark .sidebar,
body.dark-mode .sidebar,
body.ui-dark .sidebar,
body[class*="dark"] .sidebar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-right: 1px solid #d7dde6 !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08) !important;
}

.sidebar *,
body.theme-dark .sidebar *,
body.dark-mode .sidebar *,
body.ui-dark .sidebar *,
body[class*="dark"] .sidebar * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

.sidebar .brand-logo,
.sidebar .brand-logo *,
.sidebar-menu a.active,
.sidebar-menu a.active *,
.mobile-sidebar-toggle,
.mobile-sidebar-toggle * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.sidebar-brand,
.sidebar-user-box,
body.theme-dark .sidebar-brand,
body.theme-dark .sidebar-user-box,
body.dark-mode .sidebar-brand,
body.dark-mode .sidebar-user-box,
body.ui-dark .sidebar-brand,
body.ui-dark .sidebar-user-box {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

.sidebar-menu a,
body.theme-dark .sidebar-menu a,
body.dark-mode .sidebar-menu a,
body.ui-dark .sidebar-menu a {
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid transparent !important;
}

.sidebar-menu a:hover,
body.theme-dark .sidebar-menu a:hover,
body.dark-mode .sidebar-menu a:hover,
body.ui-dark .sidebar-menu a:hover {
    background: #ecfdf5 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    border-color: #bbf7d0 !important;
}

.sidebar-menu a.active,
body.theme-dark .sidebar-menu a.active,
body.dark-mode .sidebar-menu a.active,
body.ui-dark .sidebar-menu a.active {
    background: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #16a34a !important;
}

/* All cards/panels light */
.topbar,
.panel,
.card,
.box,
.form-card,
.table-card,
.search-panel,
.page-title-simple,
.hero-box,
.pack-hero,
.simple-panel,
.report-white-panel,
.delivery-hero,
.delivery-search-panel,
.delivery-list-panel,
.make-delivery-panel,
.ledger-white-panel,
.ledger-summary-card,
.summary-card,
.stat-card,
.mini-card,
.small-info-button,
.big-info-box,
.bundle-card,
.created-bundle-card,
.app-button,
.next-batch-box,
.next-bundle-box,
.available-box,
.this-bundle-number-card,
.staff-login-card,
.staff-bar,
.selected-box,
.selected-cutting-mini,
.quick-selected,
.active-summary,
.delivery-person-box,
.selected-summary-box,
.theme-card,
body.theme-dark .topbar,
body.theme-dark .panel,
body.theme-dark .card,
body.theme-dark .box,
body.theme-dark .form-card,
body.theme-dark .table-card,
body.theme-dark .search-panel,
body.theme-dark .page-title-simple,
body.theme-dark .hero-box,
body.theme-dark .pack-hero,
body.theme-dark .simple-panel,
body.theme-dark .report-white-panel,
body.theme-dark .delivery-hero,
body.theme-dark .delivery-search-panel,
body.theme-dark .delivery-list-panel,
body.theme-dark .make-delivery-panel,
body.theme-dark .ledger-white-panel,
body.theme-dark .ledger-summary-card,
body.theme-dark .summary-card,
body.theme-dark .stat-card,
body.theme-dark .mini-card,
body.theme-dark .small-info-button,
body.theme-dark .big-info-box,
body.theme-dark .bundle-card,
body.theme-dark .created-bundle-card,
body.theme-dark .app-button,
body.theme-dark .staff-login-card,
body.dark-mode .panel,
body.dark-mode .card,
body.dark-mode .box,
body.dark-mode .form-card,
body.dark-mode .table-card,
body.dark-mode .search-panel,
body.dark-mode .app-button,
body.ui-dark .panel,
body.ui-dark .card,
body.ui-dark .box,
body.ui-dark .form-card,
body.ui-dark .table-card,
body.ui-dark .search-panel,
body.ui-dark .app-button {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d7dde6 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
}

/* Black readable text */
h1, h2, h3, h4, h5, h6,
label,
strong,
p,
small,
span,
div,
td,
th,
.app-name,
.app-sub,
.helper-text,
.soft-note,
.bundle-note,
.info-line,
.details,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark label,
body.theme-dark strong,
body.theme-dark p,
body.theme-dark small,
body.theme-dark span,
body.theme-dark div,
body.theme-dark td,
body.theme-dark th,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode label,
body.dark-mode strong,
body.dark-mode p,
body.dark-mode small,
body.dark-mode span,
body.dark-mode div,
body.dark-mode td,
body.dark-mode th {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Muted text */
.app-sub,
.helper-text,
.soft-note,
.bundle-note,
.text-muted,
.sidebar-user-box span,
.sidebar-user-box small,
.menu-title,
small {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* Inputs light gray */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
select,
textarea,
.form-control,
.flatpickr-input,
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .form-control,
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control,
body.ui-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.ui-dark select,
body.ui-dark textarea,
body.ui-dark .form-control {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

select option {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Tables light */
table,
thead,
tbody,
tr,
th,
td,
.attendance-table,
.fabric-list-table,
.ledger-table,
.delivered-table,
.delivery-table,
.bundle-table,
.cutting-table,
.packing-list-table,
body.theme-dark table,
body.theme-dark thead,
body.theme-dark tbody,
body.theme-dark tr,
body.theme-dark th,
body.theme-dark td,
body.dark-mode table,
body.dark-mode thead,
body.dark-mode tbody,
body.dark-mode tr,
body.dark-mode th,
body.dark-mode td,
body.ui-dark table,
body.ui-dark thead,
body.ui-dark tbody,
body.ui-dark tr,
body.ui-dark th,
body.ui-dark td {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border-color: #e5e7eb !important;
}

th,
body.theme-dark th,
body.dark-mode th,
body.ui-dark th {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    font-weight: 950 !important;
}

/* Buttons must keep correct colors */
.btn,
button,
input[type="submit"],
input[type="button"],
a.btn,
.pack-btn,
.tab-btn,
.view-mode-btn,
.fabric-search-btn,
.choice-btn,
.btn-mini,
.ledger-btn,
.btn-delivery {
    background: #12395f !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #12395f !important;
}

a[href*="start_work"],
.btn-start,
.btn-start-work,
.start-work,
.start-btn,
.continue,
.btn-continue,
.continue-btn,
.btn-save-bundle {
    background: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #16a34a !important;
}

a[href*="end_work"],
a[href*="stop_work"],
.btn-stop,
.btn-end,
.btn-end-work,
.stop-work,
.end-work,
.stop-btn,
.end-btn,
.btn-danger,
.btn.delete,
.btn.danger,
.btn-delete,
.delete-btn {
    background: #dc2626 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #dc2626 !important;
}

.search-actions button[type="submit"],
.filter-actions button[type="submit"],
.fabric-search-btn.search,
.ledger-btn.search,
.btn-delivered-search,
.btn-search,
.search-btn,
button.search,
.btn.search {
    background: #38bdf8 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #38bdf8 !important;
}

.reset,
.reset-btn,
.btn-reset,
.clear-btn,
.fabric-search-btn.reset,
.ledger-btn.reset,
button.reset,
a.reset {
    background: transparent !important;
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    box-shadow: none !important;
}

/* Dashboard helper buttons should not be black */
.dashboard-page .app-button,
body.theme-dark .dashboard-page .app-button,
body.dark-mode .dashboard-page .app-button,
body.ui-dark .dashboard-page .app-button {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border: 1px solid #d7dde6 !important;
}

.dashboard-page .app-button *,
body.theme-dark .dashboard-page .app-button *,
body.dark-mode .dashboard-page .app-button *,
body.ui-dark .dashboard-page .app-button * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

.dashboard-page .app-button.start-work,
.dashboard-page .app-button.start-work *,
body.theme-dark .dashboard-page .app-button.start-work,
body.theme-dark .dashboard-page .app-button.start-work * {
    background: #16a34a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.dashboard-page .app-button.stop-work,
.dashboard-page .app-button.stop-work *,
body.theme-dark .dashboard-page .app-button.stop-work,
body.theme-dark .dashboard-page .app-button.stop-work * {
    background: #dc2626 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Hide dark option/cards */
.theme-card.dark,
.theme-card.theme-dark,
.theme-card.ui-dark,
.dark-theme-card,
.theme-choice-grid .theme-card:has(input[value="dark"]),
.theme-choice-grid .theme-card:has(input[value="theme-dark"]),
.theme-choice-grid .theme-card:has(input[value="ui-dark"]),
.theme-choice-grid .theme-card:has(input[value="dark_mode"]) {
    display: none !important;
}

/* =========================================================
   FINAL PHONE / MOBILE LIGHT FIX
   Keep this at the VERY BOTTOM of style.css
   Fixes phone dark mode, helpers/manager/master dark UI.
========================================================= */

html,
body {
    color-scheme: light !important;
}

@media (prefers-color-scheme: dark) {
    html,
    body,
    body.login-page,
    body.theme-dark,
    body.dark-mode,
    body.ui-dark,
    body[data-theme="dark"] {
        color-scheme: light !important;
        background: #eef2f7 !important;
        background-color: #eef2f7 !important;
        background-image: linear-gradient(135deg, #eef2f7 0%, #ffffff 50%, #e8edf5 100%) !important;
        color: #111827 !important;
    }
}

@media (max-width: 1200px) {
    html,
    body,
    body.login-page,
    body.theme-dark,
    body.dark-mode,
    body.ui-dark,
    body[data-theme="dark"],
    body[class*="dark"] {
        color-scheme: light !important;
        background: #eef2f7 !important;
        background-color: #eef2f7 !important;
        background-image: linear-gradient(135deg, #eef2f7 0%, #ffffff 50%, #e8edf5 100%) !important;
        color: #111827 !important;
    }

    .app-wrapper,
    .main-content,
    .content,
    body.theme-dark .app-wrapper,
    body.theme-dark .main-content,
    body.theme-dark .content,
    body.dark-mode .app-wrapper,
    body.dark-mode .main-content,
    body.dark-mode .content,
    body.ui-dark .app-wrapper,
    body.ui-dark .main-content,
    body.ui-dark .content,
    body[data-theme="dark"] .app-wrapper,
    body[data-theme="dark"] .main-content,
    body[data-theme="dark"] .content {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: #111827 !important;
    }

    .sidebar,
    body.theme-dark .sidebar,
    body.dark-mode .sidebar,
    body.ui-dark .sidebar,
    body[data-theme="dark"] .sidebar,
    body[class*="dark"] .sidebar {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #111827 !important;
        border-right: 1px solid #d7dde6 !important;
        border-bottom: 1px solid #d7dde6 !important;
        box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08) !important;
    }

    .sidebar-brand,
    .sidebar-user-box,
    body.theme-dark .sidebar-brand,
    body.theme-dark .sidebar-user-box,
    body.dark-mode .sidebar-brand,
    body.dark-mode .sidebar-user-box,
    body.ui-dark .sidebar-brand,
    body.ui-dark .sidebar-user-box,
    body[data-theme="dark"] .sidebar-brand,
    body[data-theme="dark"] .sidebar-user-box {
        background: #f8fafc !important;
        background-color: #f8fafc !important;
        background-image: none !important;
        border: 1px solid #e2e8f0 !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    .sidebar-brand h2,
    .sidebar-brand p,
    .sidebar-user-box,
    .sidebar-user-box span,
    .sidebar-user-box strong,
    .sidebar-menu a,
    .sidebar-menu .menu-title,
    body.theme-dark .sidebar-brand h2,
    body.theme-dark .sidebar-brand p,
    body.theme-dark .sidebar-user-box,
    body.theme-dark .sidebar-user-box span,
    body.theme-dark .sidebar-user-box strong,
    body.theme-dark .sidebar-menu a,
    body.theme-dark .sidebar-menu .menu-title,
    body.dark-mode .sidebar-brand h2,
    body.dark-mode .sidebar-brand p,
    body.dark-mode .sidebar-user-box,
    body.dark-mode .sidebar-user-box span,
    body.dark-mode .sidebar-user-box strong,
    body.dark-mode .sidebar-menu a,
    body.dark-mode .sidebar-menu .menu-title {
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
    }

    .sidebar-menu a,
    body.theme-dark .sidebar-menu a,
    body.dark-mode .sidebar-menu a,
    body.ui-dark .sidebar-menu a {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        border: 1px solid transparent !important;
    }

    .sidebar-menu a:hover,
    body.theme-dark .sidebar-menu a:hover,
    body.dark-mode .sidebar-menu a:hover,
    body.ui-dark .sidebar-menu a:hover {
        background: #ecfdf5 !important;
        color: #166534 !important;
        -webkit-text-fill-color: #166534 !important;
        border-color: #bbf7d0 !important;
    }

    .sidebar-menu a.active,
    .sidebar-menu a.active *,
    .mobile-sidebar-toggle,
    .mobile-sidebar-toggle *,
    .brand-logo,
    .brand-logo *,
    body.theme-dark .sidebar-menu a.active,
    body.theme-dark .sidebar-menu a.active *,
    body.theme-dark .mobile-sidebar-toggle,
    body.theme-dark .mobile-sidebar-toggle *,
    body.theme-dark .brand-logo,
    body.theme-dark .brand-logo *,
    body.dark-mode .sidebar-menu a.active,
    body.dark-mode .sidebar-menu a.active *,
    body.dark-mode .mobile-sidebar-toggle,
    body.dark-mode .mobile-sidebar-toggle *,
    body.dark-mode .brand-logo,
    body.dark-mode .brand-logo * {
        background: #16a34a !important;
        background-color: #16a34a !important;
        background-image: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: #16a34a !important;
    }

    .panel,
    .card,
    .box,
    .form-card,
    .table-card,
    .search-panel,
    .page-title-simple,
    .hero-box,
    .pack-hero,
    .simple-panel,
    .report-white-panel,
    .delivery-hero,
    .delivery-search-panel,
    .delivery-list-panel,
    .make-delivery-panel,
    .ledger-white-panel,
    .ledger-summary-card,
    .summary-card,
    .stat-card,
    .mini-card,
    .small-info-button,
    .big-info-box,
    .bundle-card,
    .created-bundle-card,
    .app-button,
    .batch-card,
    .cutting-card,
    .staff-login-card,
    .staff-bar,
    .selected-box,
    .selected-cutting-mini,
    .quick-selected,
    .active-summary,
    body.theme-dark .panel,
    body.theme-dark .card,
    body.theme-dark .box,
    body.theme-dark .form-card,
    body.theme-dark .table-card,
    body.theme-dark .search-panel,
    body.theme-dark .summary-card,
    body.theme-dark .stat-card,
    body.theme-dark .mini-card,
    body.theme-dark .app-button,
    body.dark-mode .panel,
    body.dark-mode .card,
    body.dark-mode .box,
    body.dark-mode .form-card,
    body.dark-mode .table-card,
    body.dark-mode .search-panel,
    body.dark-mode .summary-card,
    body.dark-mode .stat-card,
    body.dark-mode .mini-card,
    body.dark-mode .app-button {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #111827 !important;
        border: 1px solid #d7dde6 !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
    }

    h1, h2, h3, h4, h5, h6,
    label,
    strong,
    p,
    small,
    span,
    div,
    td,
    th,
    .app-name,
    .app-sub,
    .helper-text,
    .soft-note,
    .bundle-note,
    .info-line,
    .details,
    body.theme-dark h1,
    body.theme-dark h2,
    body.theme-dark h3,
    body.theme-dark h4,
    body.theme-dark h5,
    body.theme-dark h6,
    body.theme-dark label,
    body.theme-dark strong,
    body.theme-dark p,
    body.theme-dark small,
    body.theme-dark span,
    body.theme-dark div,
    body.theme-dark td,
    body.theme-dark th,
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode h6,
    body.dark-mode label,
    body.dark-mode strong,
    body.dark-mode p,
    body.dark-mode small,
    body.dark-mode span,
    body.dark-mode div,
    body.dark-mode td,
    body.dark-mode th {
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
        text-shadow: none !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    select,
    textarea,
    .form-control,
    .flatpickr-input,
    body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    body.theme-dark select,
    body.theme-dark textarea,
    body.theme-dark .form-control,
    body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    body.dark-mode select,
    body.dark-mode textarea,
    body.dark-mode .form-control {
        background: #f1f5f9 !important;
        background-color: #f1f5f9 !important;
        background-image: none !important;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
    }

    select option {
        background: #ffffff !important;
        color: #111827 !important;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td,
    .attendance-table,
    .fabric-list-table,
    .ledger-table,
    .delivered-table,
    .delivery-table,
    .bundle-table,
    .cutting-table,
    .packing-list-table,
    body.theme-dark table,
    body.theme-dark thead,
    body.theme-dark tbody,
    body.theme-dark tr,
    body.theme-dark th,
    body.theme-dark td,
    body.dark-mode table,
    body.dark-mode thead,
    body.dark-mode tbody,
    body.dark-mode tr,
    body.dark-mode th,
    body.dark-mode td {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
        border-color: #e5e7eb !important;
    }

    th,
    body.theme-dark th,
    body.dark-mode th {
        background: #f1f5f9 !important;
        background-color: #f1f5f9 !important;
    }

    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    a.btn,
    .pack-btn,
    .tab-btn,
    .view-mode-btn,
    .fabric-search-btn,
    .choice-btn,
    .btn-mini,
    .ledger-btn,
    .btn-delivery,
    body.theme-dark .btn,
    body.theme-dark button,
    body.theme-dark input[type="submit"],
    body.theme-dark input[type="button"],
    body.theme-dark a.btn,
    body.theme-dark .pack-btn,
    body.theme-dark .tab-btn,
    body.theme-dark .view-mode-btn,
    body.theme-dark .fabric-search-btn,
    body.theme-dark .choice-btn,
    body.theme-dark .btn-mini,
    body.theme-dark .ledger-btn,
    body.theme-dark .btn-delivery {
        background: #12395f !important;
        background-color: #12395f !important;
        background-image: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: #12395f !important;
    }

    a[href*="start_work"],
    .btn-start,
    .btn-start-work,
    .start-work,
    .start-btn,
    .continue,
    .btn-continue,
    .continue-btn,
    .btn-save-bundle {
        background: #16a34a !important;
        background-color: #16a34a !important;
        background-image: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: #16a34a !important;
    }

    a[href*="end_work"],
    a[href*="stop_work"],
    .btn-stop,
    .btn-end,
    .btn-end-work,
    .stop-work,
    .end-work,
    .stop-btn,
    .end-btn,
    .btn-danger,
    .btn.delete,
    .btn.danger,
    .btn-delete,
    .delete-btn {
        background: #dc2626 !important;
        background-color: #dc2626 !important;
        background-image: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: #dc2626 !important;
    }

    .search-actions button[type="submit"],
    .filter-actions button[type="submit"],
    .fabric-search-btn.search,
    .ledger-btn.search,
    .btn-delivered-search,
    .btn-search,
    .search-btn,
    button.search,
    .btn.search {
        background: #38bdf8 !important;
        background-color: #38bdf8 !important;
        background-image: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: #38bdf8 !important;
    }

    .reset,
    .reset-btn,
    .btn-reset,
    .clear-btn,
    .fabric-search-btn.reset,
    .ledger-btn.reset,
    button.reset,
    a.reset {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: #dc2626 !important;
        -webkit-text-fill-color: #dc2626 !important;
        border: 2px solid #dc2626 !important;
        box-shadow: none !important;
    }
}

/* iPhone/Safari extra fix */
@supports (-webkit-touch-callout: none) {
    html,
    body,
    body.theme-dark,
    body.dark-mode,
    body.ui-dark {
        color-scheme: light !important;
        background: #eef2f7 !important;
        background-color: #eef2f7 !important;
        color: #111827 !important;
    }

    .sidebar,
    .panel,
    .card,
    .box,
    .form-card,
    .table-card,
    .search-panel,
    .app-button,
    body.theme-dark .sidebar,
    body.theme-dark .panel,
    body.theme-dark .card,
    body.theme-dark .box,
    body.theme-dark .form-card,
    body.theme-dark .table-card,
    body.theme-dark .search-panel,
    body.theme-dark .app-button {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #111827 !important;
    }
/* Put this at the bottom of /assets/css/style.css */
.fabric-thumb,
.current-photo-img,
.bundle-photo,
.cutting-photo,
.sample-photo,
.delivery-photo,
.emb-photo,
.photo-2x2 {
    width: 2in !important;
    height: 2in !important;
    max-width: 160px !important;
    max-height: 160px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

@media (max-width: 600px) {
    .fabric-thumb,
    .current-photo-img,
    .bundle-photo,
    .cutting-photo,
    .sample-photo,
    .delivery-photo,
    .emb-photo,
    .photo-2x2 {
        width: 120px !important;
        height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
    }
}