/* styles.css */
:root {
    --brand: #0d6efd;
}

.navbar-brand {
    font-weight: 600;
    letter-spacing: .2px;
}

a.nav-link.active {
    color: var(--brand) !important;
}

.theme-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.theme-icon i {
    font-size: 18px;
    line-height: 1;
}

@media (min-width: 768px) {
    .modal .col-form-label {
        margin-bottom: 0;
    }
}

/* Keep modal body scrollable and visible on small screens */
@media (max-width: 576px) {
    .modal-dialog.modal-dialog-scrollable .modal-body {
        max-height: calc(100vh - 9rem);
        /* header+footer space */
        overflow-y: auto;
    }
}

/* Make table header feel like part of the rounded card */
.table thead th {
    vertical-align: middle;
}

/* By default (mobile): edge-to-edge table with horizontal scroll */
.table-shell .table-responsive {
    overflow-x: auto;
    /* reinforce Bootstrap’s default */
}

/* Small screens: flat, edge-to-edge with scroll */
.table-shell .table-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* md+ : rounded "card" look with proper clipping */
@media (min-width: 768px) {
    .table-shell .table-card {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius-lg);
        box-shadow: var(--bs-box-shadow-sm);
        overflow: hidden;
        /* ensures the table corners clip inside the card */
    }

    /* Let the table respect the parent's rounding */
    .table-shell .table-card .table {
        border-collapse: separate;
        /* required for cell corner rounding */
        border-spacing: 0;
        /* no gaps between cells */
    }

    /* Make zebra backgrounds clip to rounded corners */
    .table-shell .table-card .table> :not(caption)>*>* {
        background-clip: padding-box;
    }

    /* Round the top corners on the first/last header cells */
    .table-shell .table-card thead tr:first-child th:first-child {
        border-top-left-radius: var(--bs-border-radius-lg);
    }

    .table-shell .table-card thead tr:first-child th:last-child {
        border-top-right-radius: var(--bs-border-radius-lg);
    }

    /* Round the bottom corners on the last row cells */
    .table-shell .table-card tbody tr:last-child td:first-child {
        border-bottom-left-radius: var(--bs-border-radius-lg);
    }

    .table-shell .table-card tbody tr:last-child td:last-child {
        border-bottom-right-radius: var(--bs-border-radius-lg);
    }

    /* On wide screens we generally don't need horizontal scroll */
    .table-shell .table-card .table-responsive {
        overflow: visible;
    }
}

/* Stronger, theme-aware table header */
.table-head-colored th {
    /* Use a darker bg token that Bootstrap adapts per theme */
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    letter-spacing: .02em;
}

/* If you want an even stronger contrast, uncomment this "accent" override: */
/*
[data-bs-theme="light"] .table-head-colored th {
  background-color: #e9ecef;   /* light gray */
}

[data-bs-theme="dark"] .table-head-colored th {
    background-color: #1f2937;
    /* deep slate */
    color: #e2e8f0;
    border-bottom-color: #354052;
}

*/
/* Keep corners clean on md+ with your card wrapper */
@media (min-width: 768px) {
    .table-shell .table-card thead tr:first-child th:first-child {
        border-top-left-radius: var(--bs-border-radius-lg);
    }

    .table-shell .table-card thead tr:first-child th:last-child {
        border-top-right-radius: var(--bs-border-radius-lg);
    }
}

/* Optional: sticky header while scrolling */
.table-head-colored th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Shared row-action layout and semantic colors */
.table td .actions,
.table td .row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.table td .actions .btn,
.table td .row-actions .btn {
    margin: 0;
}

.table td .actions .btn i,
.table td .row-actions .btn i {
    line-height: 1;
}

.table td .actions .btn-icon-only,
.table td .row-actions .btn-icon-only {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table td .actions .row-action-count,
.table td .row-actions .row-action-count {
    align-self: center;
}

.table td .actions .action-attachments,
.table td .actions .action-notes,
.table td .actions .js-emp-docs,
.table td .actions .js-est-docs,
.table td .row-actions .action-attachments,
.table td .row-actions .action-notes,
.table td .row-actions .js-emp-docs,
.table td .row-actions .js-est-docs {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: rgba(var(--bs-info-rgb), .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
}

.table td .actions .action-open,
.table td .actions .action-view,
.table td .actions .action-schedule,
.table td .actions .action-logs,
.table td .actions .action-import,
.table td .actions .btn-import-estimate,
.table td .row-actions .action-open,
.table td .row-actions .action-view,
.table td .row-actions .action-schedule,
.table td .row-actions .action-logs,
.table td .row-actions .action-import,
.table td .row-actions .btn-import-estimate {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: rgba(var(--bs-primary-rgb), .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.table td .actions .action-edit,
.table td .actions .js-edit-user,
.table td .actions .js-edit-role,
.table td .row-actions .action-edit,
.table td .row-actions .js-edit-user,
.table td .row-actions .js-edit-role {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: rgba(var(--bs-primary-rgb), .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.table td .actions .action-complete,
.table td .row-actions .action-complete {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: rgba(var(--bs-success-rgb), .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
}

.table td .actions .action-toggle,
.table td .actions .js-toggle-user,
.table td .actions .js-toggle-role,
.table td .row-actions .action-toggle,
.table td .row-actions .js-toggle-user,
.table td .row-actions .js-toggle-role {
    --bs-btn-color: var(--bs-warning-text-emphasis);
    --bs-btn-border-color: rgba(var(--bs-warning-rgb), .5);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
}

.table td .actions .action-delete,
.table td .actions .js-del-user,
.table td .actions .js-del-role,
.table td .row-actions .action-delete,
.table td .row-actions .js-del-user,
.table td .row-actions .js-del-role {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: rgba(var(--bs-danger-rgb), .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
}

.table td .actions .action-attachments,
.table td .actions .js-emp-docs,
.table td .actions .js-est-docs,
.table td .row-actions .action-attachments,
.table td .row-actions .js-emp-docs,
.table td .row-actions .js-est-docs {
    order: 10;
}

.table td .actions .action-notes,
.table td .row-actions .action-notes {
    order: 15;
}

.table td .actions .action-open,
.table td .actions .action-view,
.table td .actions .action-schedule,
.table td .actions .action-logs,
.table td .actions .action-import,
.table td .actions .btn-import-estimate,
.table td .row-actions .action-open,
.table td .row-actions .action-view,
.table td .row-actions .action-schedule,
.table td .row-actions .action-logs,
.table td .row-actions .action-import,
.table td .row-actions .btn-import-estimate {
    order: 20;
}

.table td .actions .action-complete,
.table td .row-actions .action-complete {
    order: 25;
}

.table td .actions .action-edit,
.table td .actions .js-edit-user,
.table td .actions .js-edit-role,
.table td .row-actions .action-edit,
.table td .row-actions .js-edit-user,
.table td .row-actions .js-edit-role {
    order: 30;
}

.table td .actions .action-toggle,
.table td .actions .js-toggle-user,
.table td .actions .js-toggle-role,
.table td .row-actions .action-toggle,
.table td .row-actions .js-toggle-user,
.table td .row-actions .js-toggle-role {
    order: 40;
}

.table td .actions .action-delete,
.table td .actions .js-del-user,
.table td .actions .js-del-role,
.table td .row-actions .action-delete,
.table td .row-actions .js-del-user,
.table td .row-actions .js-del-role {
    order: 50;
}

/* Truncate long names nicely */
.truncate-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Default widths (mobile first) – let it flow; horizontal scroll handles overflow */
.col-name {
    width: auto;
}

.col-actions {
    width: auto;
}

/* Tablet/desktop: tighten Name, widen Actions, keep buttons inline */
@media (min-width: 768px) {
    .col-name {
        width: 24%;
        /* adjust as you like (20–30%) */
        max-width: 28rem;
        /* safety for ultra-wide */
    }

    .col-actions {
        width: 320px;
        /* room for 3 buttons */
    }

    /* Prevent wrapping inside actions on md+ */
    td.text-end .actions {
        white-space: nowrap;
    }
}

/* Optional: slightly narrower data columns on md+ to free room for actions */
@media (min-width: 768px) {

    .col-pay,
    .col-regular,
    .col-overtime,
    .col-vacation,
    .col-status {
        width: 12%;
    }
}

/* Base: keep everything single-line by default inside table-nowrap */
.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

/* Exception: allow wrapping only where we add .cell-wrap */
.table-nowrap td.cell-wrap {
    white-space: normal !important;
    /* <- force it to win */
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Truncate long names nicely */
.truncate-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile-first: let table be flexible + scroll horizontally */
#empTypesTable {
    table-layout: auto;
}

/* Desktop (md+): fix column layout and widths */
@media (min-width: 768px) {
    #empTypesTable {
        table-layout: fixed;
    }

    /* makes colgroup widths effective */

    /* Tighten the Name column hard */
    .col-name {
        width: 18%;
        max-width: 22rem;
    }

    /* Keep these fairly compact */
    .col-pay {
        width: 12%;
    }

    .col-regular {
        width: 18%;
    }

    .col-overtime {
        width: 18%;
    }

    .col-vacation {
        width: 18%;
    }

    .col-status {
        width: 8%;
    }

    /* Give Actions real room so buttons stay inline */
    .col-actions {
        width: 160px;
    }

    /* bump to 440–460px if you still see wrapping */

    /* Keep action buttons on one line */
    td.text-end .actions {
        white-space: nowrap;
    }
}

/* Compact buttons (only our action buttons, not global .btn-sm) */
.btn-compact {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .9rem;
}

/* Slight gap when wrapping on very narrow widths */
.actions .btn {
    margin: .125rem;
}

@media (min-width: 576px) {
    .actions .btn {
        margin: 0;
    }
}

.table-empty {
    text-align: center;
    color: var(--bs-secondary-color);
}

.table-empty .lead {
    font-weight: 500;
}

.btn-no-wrap {
    white-space: nowrap;
}

.admin-card {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    cursor: pointer;
}

.admin-card:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.admin-card .stretched-link {
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .admin-card {
        transition: none;
    }

    .admin-card:hover {
        transform: none;
    }
}

/* Page size + margins for print */
@page {
    size: letter portrait;
}

/* Screen-only tweaks */
@media screen {
    .print-summary {
        display: none;
    }

    .approved-print {
        display: none;
    }
}

/* Print rules */
@media print {

    /* Force light palette even when site is in dark mode */
    :root,
    [data-bs-theme="dark"] {
        color-scheme: light !important;
    }

    /* Always print dark text on white paper, remove fills */
    * {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide chrome / anything you tag as print-hide */
    .navbar,
    header,
    .app-header,
    .site-header,
    .page-header,
    .print-hide {
        display: none !important;
    }

    /* Use the full printable width; kill gutters/padding */
    html,
    body,
    main.container {
        margin: 0 !important;
        padding: 0 !important;
    }

    .container,
    .container-fluid {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Your main layout uses py-4; neutralize it on print */
    main.container.py-4 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .row {
        margin: 0 !important;
    }

    [class*="col-"] {
        padding: 0 !important;
    }

    .card {
        margin: 0 !important;
    }

    .card-body {
        padding: 0 !important;
    }

    /* Ensure responsive wrapper doesn't clip on print */
    .report-print .table-responsive {
        overflow: visible !important;
    }

    /* Table: fixed layout so columns compress and fit page */
    .report-print table.table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 11px !important;
    }

    .report-print th,
    .report-print td {
        padding: 2px 4px !important;
        vertical-align: top !important;
        border-color: #000 !important;
        /* keep borders visible in B&W */
    }

    .report-print th .small,
    .report-print td .small {
        font-size: 10px !important;
    }

    /* Optional column sizing helpers used by your report */
    .col-employee {
        width: 160px !important;
    }

    .col-approved {
        width: 70px !important;
        text-align: center !important;
    }

    /* Pills/buttons: outline only, readable in B&W */
    .badge,
    .btn {
        border: 1px solid #000 !important;
        border-radius: 999px !important;
        padding: .1rem .4rem !important;
    }

    /* Hide table footer on every page; we show a single summary at end */
    .report-print tfoot {
        display: none !important;
    }

    /* Print summary block: no extra bottom space */
    .print-summary {
        margin-top: .25rem !important;
        margin-bottom: 0 !important;
        page-break-inside: avoid !important;
    }

    .print-summary table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .print-summary th,
    .print-summary td {
        padding: 2px 4px !important;
    }

    /* Hide interactive bits on paper; show text icons instead */
    .screen-only {
        display: none !important;
    }

    .approved-print {
        display: inline !important;
        font-weight: 700;
    }

    /* Badges (W/V): black outline, no fill, black text */
    .badge,
    .badge[class*="text-bg-"] {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }

    /* Make the 3rd line (W/V + hours + p) behave like centered inline text */
    .ln-meta {
        display: block !important;
        /* stop flex from spacing items */
        text-align: center !important;
        /* center the whole line */
        white-space: nowrap !important;
        /* keep on one line */
        font-size: 10px !important;
        line-height: 1.1 !important;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
        /* optional: consistent spacing */
    }

    .ln-meta .badge {
        /* Compact pill so it doesn't force wrap */
        padding: 0.05rem 0.3rem !important;
        border: 1px solid #000 !important;
        /* your print B/W style */
        background: transparent !important;
        color: #000 !important;
    }

    .ln-meta .hours,
    .ln-meta .pd-flag {
        display: inline !important;
        /* inline pieces */
        margin: 0 !important;
        /* remove Bootstrap gaps/margins */
        padding: 0 !important;
        /* compact */
        vertical-align: baseline !important;
    }

    /* Scale-to-fit trick; apply .print-fit to the table container if needed */
    .print-fit {
        --print-scale: 0.92;
        /* adjust 0.90–0.95 to taste */
        transform: scale(var(--print-scale));
        transform-origin: top left;
        width: calc(100% / var(--print-scale)) !important;
    }
}

/* On-screen: ensure item code matches other text color */
.item-code {
    color: inherit !important;
    opacity: 1 !important;
}