/* ==========================================================================
   TCI — shared UI layer
   Loaded after bootstrap (app.css) from resources/views/layouts/head.blade.php,
   so it can override framework defaults without touching 80+ blade files.
   ========================================================================== */

:root {
    --tci-bg:            #f4f6f8;
    --tci-surface:       #ffffff;
    --tci-border:        #dde3ea;
    --tci-border-strong: #c3ccd8;

    --tci-text:          #1f2933;
    --tci-text-soft:     #5b6875;
    --tci-text-faint:    #939ea9;

    --tci-primary:       #1d4ed8;
    --tci-primary-dark:  #1739a8;
    --tci-primary-soft:  #eaf0fe;

    --tci-nav:           #16202b;
    --tci-nav-hover:     #24313f;

    --tci-success:       #0f7a44;
    --tci-danger:        #c0392b;
    --tci-warning:       #b7791f;

    --tci-radius:        6px;
    --tci-radius-lg:     10px;
    --tci-shadow:        0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --tci-shadow-lg:     0 4px 12px rgba(16,24,40,.08);

    --tci-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--tci-font);
    background: var(--tci-bg);
    color: var(--tci-text);
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--tci-text); }
h5 { font-size: 1.05rem; }
h6 { font-size: .8rem; letter-spacing: .04em; }

a { color: var(--tci-primary); }
a:hover { color: var(--tci-primary-dark); }

/* Numbers line up column-to-column */
td, th, input, .tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Layout — use the whole screen, not a 1140px column
   Most pages hardcode .container; widening it here fixes them all at once.
   -------------------------------------------------------------------------- */

.container,
.container-fluid {
    width: 100%;
    max-width: 1860px;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
}

/* layouts/app.blade.php (login, register, password reset) wraps everything in
   #app. Those are single-card screens, so keep them at normal reading width. */
#app .container { max-width: 1140px; }

.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 14px;
}
.page-head h5, .page-head h1 { margin: 0; }
.page-head .page-sub { color: var(--tci-text-soft); font-size: .82rem; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.navbar.bg-dark {
    background: var(--tci-nav) !important;
    box-shadow: var(--tci-shadow);
    padding: .4rem 24px;
    flex-wrap: wrap;
}
.navbar-dark .navbar-brand {
    font-weight: 700;
    letter-spacing: .04em;
    margin-right: 1.25rem;
}
.navbar-dark .navbar-nav { flex-wrap: wrap; }
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav li > a {
    color: #cbd5e1 !important;
    padding: .4rem .7rem;
    border-radius: var(--tci-radius);
    font-size: .86rem;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav li > a:hover {
    color: #fff !important;
    background: var(--tci-nav-hover);
}

/* --------------------------------------------------------------------------
   Panels / cards
   -------------------------------------------------------------------------- */

.tci-card {
    background: var(--tci-surface);
    border: 1px solid var(--tci-border);
    border-radius: var(--tci-radius-lg);
    box-shadow: var(--tci-shadow);
    margin-bottom: 18px;
}
.tci-card > .tci-card-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--tci-border);
    background: #fbfcfd;
    border-radius: var(--tci-radius-lg) var(--tci-radius-lg) 0 0;
}
.tci-card > .tci-card-body { padding: 16px; }
.tci-card > .table-wrap,
.tci-card > table { margin-bottom: 0; }

/* The app uses `.alert-success` as a section heading in many places.
   Make that read as a title bar rather than a success message. */
h5.alert-success,
h5.alert.alert-success {
    background: var(--tci-surface);
    border: 1px solid var(--tci-border);
    border-left: 3px solid var(--tci-primary);
    color: var(--tci-text);
    border-radius: var(--tci-radius);
    padding: .6rem .9rem;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: var(--tci-shadow);
}

.alert { border-radius: var(--tci-radius); border-width: 1px; font-size: .88rem; }

/* --------------------------------------------------------------------------
   Tables — the core of this app
   -------------------------------------------------------------------------- */

.table-wrap {
    width: 100%;
    overflow: auto;
    /* Bounded so the sticky header below actually engages on long listings. */
    max-height: calc(100vh - 230px);
    min-height: 120px;
    background: var(--tci-surface);
    border: 1px solid var(--tci-border);
    border-radius: var(--tci-radius-lg);
    box-shadow: var(--tci-shadow);
    -webkit-overflow-scrolling: touch;
}
.table-wrap > .table { margin-bottom: 0; }
/* Short tables should not be padded out to min-height */
.table-wrap.is-short { min-height: 0; max-height: none; }

.table {
    background: var(--tci-surface);
    border-collapse: separate;
    border-spacing: 0;
    font-size: .855rem;
    color: var(--tci-text);
}

.table thead th {
    background: #eef2f6;
    color: var(--tci-text-soft);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .045em;
    white-space: nowrap;
    border: 0;
    border-bottom: 1px solid var(--tci-border-strong);
    padding: 9px 12px;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 3;
}

.table tbody td {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: #f7f9fc; }
.table-striped tbody tr:nth-of-type(odd) { background: #fbfcfd; }
.table-bordered, .table-bordered td, .table-bordered th { border: 0; }

/* Long free-text columns wrap instead of being clipped */
.table td.col-text, .table th.col-text { white-space: normal; min-width: 240px; }
/* min-width leaves room for negative / decimal values, which used to clip */
.table td.col-num,  .table th.col-num  { text-align: right; white-space: nowrap; width: 1%; min-width: 92px; }
.table td.col-tight,.table th.col-tight{ white-space: nowrap; width: 1%; }
.table td.col-num .form-control { min-width: 84px; }

/* Action cells keep their buttons on one line */
.table td.col-tight .btn-row { flex-wrap: nowrap; }

.table .text-right { text-align: right; }
.muted-row td { color: var(--tci-text-faint); }
.empty-state { padding: 34px 16px; text-align: center; color: var(--tci-text-soft); }
.empty-state h1, .empty-state h3 { font-size: 1rem; font-weight: 600; color: var(--tci-text-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control, .custom-select, select.form-control {
    font-size: .86rem;
    height: auto;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid var(--tci-border-strong);
    border-radius: var(--tci-radius);
    color: var(--tci-text);
    background-color: #fff;
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--tci-primary);
    box-shadow: 0 0 0 3px rgba(29,78,216,.14);
    outline: 0;
}
.form-control[readonly] {
    background-color: #f2f5f8;
    color: var(--tci-text-soft);
    border-color: var(--tci-border);
    cursor: default;
}
.form-control::placeholder { color: var(--tci-text-faint); }

label, .form-group > label {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tci-text-soft);
    margin-bottom: 3px;
}
/* In bootstrap's .form-inline the label sits beside its control, so it needs
   horizontal separation rather than the stacked bottom margin above. */
.form-inline label, .filter-bar label { margin-bottom: 0; margin-right: 7px; }
.form-inline .form-group { margin-right: 4px; }

/* Toolbar of filters above a listing */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    background: var(--tci-surface);
    border: 1px solid var(--tci-border);
    border-radius: var(--tci-radius-lg);
    box-shadow: var(--tci-shadow);
    padding: 12px 14px;
    margin-bottom: 16px;
}
.filter-bar .form-group { margin-bottom: 0; }
.filter-bar .form-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

/* Inputs sitting inside a data grid should fill their cell */
.table .form-control, .grid .form-control { width: 100%; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    font-size: .84rem;
    font-weight: 500;
    border-radius: var(--tci-radius);
    padding: .38rem .8rem;
    border-width: 1px;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:focus { box-shadow: 0 0 0 3px rgba(29,78,216,.16); }
.btn-sm { padding: .25rem .55rem; font-size: .78rem; }

.btn-primary { background: var(--tci-primary); border-color: var(--tci-primary); }
.btn-primary:hover { background: var(--tci-primary-dark); border-color: var(--tci-primary-dark); }

.btn-warning { background: #f0b429; border-color: #f0b429; color: #4a3208; }
.btn-warning:hover { background: #de9b0c; border-color: #de9b0c; color: #4a3208; }

.btn-success { background: #157347; border-color: #157347; }
.btn-success:hover { background: #10603a; border-color: #10603a; }

.btn-danger { background: var(--tci-danger); border-color: var(--tci-danger); }
.btn-danger:hover { background: #a5301f; border-color: #a5301f; }

.btn-outline-secondary { color: var(--tci-text-soft); border-color: var(--tci-border-strong); }
.btn-outline-secondary:hover { background: #eef2f6; color: var(--tci-text); border-color: var(--tci-border-strong); }

.btn i.fa { margin-right: 4px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* --------------------------------------------------------------------------
   Status pills
   -------------------------------------------------------------------------- */

.pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pill-accepted { background: #e3f5ec; color: #0f6b45; border-color: #b8e5cf; }
.pill-pending  { background: #fdf3dc; color: #8a5d0b; border-color: #f3ddab; }
.pill-partial  { background: var(--tci-primary-soft); color: var(--tci-primary-dark); border-color: #c5d6fb; }
.pill-rejected { background: #fdecea; color: #a5301f; border-color: #f6c9c2; }
.pill-muted    { background: #eef1f4; color: var(--tci-text-soft); border-color: #e0e5ea; }
.pill-critical { background: #fdecea; color: #a5301f; border-color: #f1b7ae; }
.pill-low      { background: #fdf3dc; color: #8a5d0b; border-color: #eccf8f; }

/* --------------------------------------------------------------------------
   Stock severity — threshold listing
   -------------------------------------------------------------------------- */

/* Nothing left: needs ordering now */
.table tbody tr.row-critical            { background: #fdecea; }
.table-hover tbody tr.row-critical:hover{ background: #fbdcd7; }
.table tbody tr.row-critical td.stock-cell {
    background: #c0392b; color: #fff; font-weight: 700; text-align: right;
}

/* Below threshold but not empty: order soon */
.table tbody tr.row-low                 { background: #fdf7e8; }
.table-hover tbody tr.row-low:hover     { background: #fbeecd; }
.table tbody tr.row-low td.stock-cell {
    background: #f0b429; color: #4a3208; font-weight: 700; text-align: right;
}

.legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: .8rem; color: var(--tci-text-soft); }
.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .swatch-critical { background: #c0392b; }
.legend .swatch-low      { background: #f0b429; }

@media print {
    .table tbody tr.row-critical,
    .table tbody tr.row-low,
    .table tbody tr.row-critical td.stock-cell,
    .table tbody tr.row-low td.stock-cell {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination { margin: 16px 0 4px; flex-wrap: wrap; gap: 3px; }
.page-link {
    border: 1px solid var(--tci-border);
    color: var(--tci-text-soft);
    border-radius: var(--tci-radius) !important;
    padding: .32rem .62rem;
    font-size: .82rem;
}
.page-link:hover { background: #eef2f6; color: var(--tci-text); }
.page-item.active .page-link { background: var(--tci-primary); border-color: var(--tci-primary); color: #fff; }
.page-item.disabled .page-link { color: var(--tci-text-faint); background: #f7f9fb; }

/* --------------------------------------------------------------------------
   select2 — align with the form controls above
   -------------------------------------------------------------------------- */

.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
    height: 34px;
    border: 1px solid var(--tci-border-strong);
    border-radius: var(--tci-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    font-size: .86rem;
    color: var(--tci-text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }

/* --------------------------------------------------------------------------
   Print — drop chrome, keep the data
   -------------------------------------------------------------------------- */

@media print {
    /* Readable on paper. Tables inherit this instead of keeping their smaller
       screen size, which is in rem and would otherwise ignore the body size. */
    body { background: #fff; font-size: 12.5px; }
    .table { font-size: 1em; }
    .table thead th { font-size: .82em; }
    .navbar, .filter-bar, .pagination, .no-print,
    .btn, #filter-row, #filter, #btn, #print, #search, #date, #dateTo { display: none !important; }
    .container, .container-fluid { max-width: 100%; padding: 0; }
    .table-wrap, .tci-card {
        overflow: visible !important;
        max-height: none !important;
        min-height: 0 !important;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .table thead th {
        position: static;
        background: #eee !important;
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .table td, .table th { padding: 4px 6px; }
    tr, .receipt-card { page-break-inside: avoid; }
    a[href]:after { content: ""; }

    @page { size: A4; margin: 14mm; }

    /* ---- Purchase order document (.po-doc) -------------------------------
       A formal document rather than a data listing, so it sets a larger type
       scale. Shared by generatePurchaseOrder and generateDeletedPurchaseOrder
       instead of being duplicated in each template. */
    .po-doc { font-size: 13.5px; line-height: 1.45; color: #000; }
    .po-doc .po-company { font-size: 21px; font-weight: 700; margin: 0; }
    .po-doc .po-title   { font-size: 19px; font-weight: 600; margin: 0; }
    .po-doc .po-number  { font-size: 20px; font-weight: 700; margin: 0; }
    .po-doc .po-meta    { font-size: 13px; }
    .po-doc .po-meta strong { font-weight: 600; }
    .po-doc .po-sign    { font-size: 13px; }
    .po-doc hr { border-top: 1px solid #000; margin: 8px 0; }

    .po-doc .table { font-size: 13.5px; }
    .po-doc .table thead th {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        border-bottom: 1.5px solid #000;
        background: transparent;
        color: #000;
    }
    .po-doc .table td, .po-doc .table th { padding: 7px 8px; vertical-align: top; }
    .po-doc .table td { border-bottom: 1px solid #bbb; }
    .po-doc .col-qty { width: 9%; }
    .po-doc .col-unit { width: 9%; }
    .po-doc .col-name { width: 41%; }
    .po-doc .col-desc { width: 41%; }

    /* Bootstrap's grid collapses in print; keep the two-column header intact. */
    .po-doc .row { display: flex; flex-wrap: wrap; width: 100%; margin: 0; page-break-inside: avoid; }
    .po-doc .col-md-8 { width: 66.66%; }
    .po-doc .col-md-6 { width: 50%; }
    .po-doc .col-md-4 { width: 33.33%; }
    .po-doc .col-md-2 { width: 16.66%; }
    .po-doc .col-md-12 { width: 100%; }
    .po-doc.card { border: none; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    .navbar.bg-dark { padding: .4rem 12px; }
    .page-head { align-items: flex-start; flex-direction: column; }
    .filter-bar { padding: 10px; }
}