/*
 * D-068 UI kit (2026-10-28). Loaded after adminlte.min.css and custom.css.
 * 1. Tokens  2. Global polish of AdminLTE cards / forms / tables / buttons  3. Kit components
 * 4. Sidebar  5. Phone and tablet  6. Print
 */

/* 1. Tokens ---------------------------------------------------------------------------------- */
:root {
    --ui-primary: #0d6efd;
    --ui-primary-soft: #eef4ff;
    --ui-text: #1f2937;
    --ui-muted: #64748b;
    --ui-border: #e5e7eb;
    --ui-surface: #ffffff;
    --ui-page: #f4f6f9;
    --ui-radius: .6rem;
    --ui-radius-sm: .4rem;
    --ui-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .05);
    --ui-gap: 1rem;
}

/* 2. Global polish ------------------------------------------------------------------------- */
.content-wrapper { background: var(--ui-page); }

.content-wrapper > .container-fluid > .card,
.content-wrapper .container-fluid > .card.card-outline {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    border-top-width: 3px;
}

.card > .card-header {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    padding: .85rem 1.15rem;
}

.card-title { font-weight: 700; color: var(--ui-text); }
.card-body { padding: .95rem; }

/* Compact forms (owner request 2026-10-29, U14b): tighter labels, fields and sections. */
.form-group { margin-bottom: .7rem; }
.form-group > label,
.ui-field > label {
    font-weight: 600;
    font-size: .84rem;
    color: #374151;
    margin-bottom: .2rem;
}
.ui-section .form-control:not(textarea):not([multiple]),
.ui-section .custom-select,
.ui-section .input-group-text { height: calc(1.95rem + 2px); padding-top: .25rem; padding-bottom: .25rem; font-size: .9rem; }
.ui-section .input-group-text { padding-left: .6rem; padding-right: .6rem; }
.ui-section textarea.form-control { padding: .35rem .65rem; font-size: .9rem; }

.form-control,
.input-group-text,
.custom-select {
    border-color: #d8dee8;
}

.form-control { border-radius: var(--ui-radius-sm); }
.form-control:focus { border-color: #86b7fe; box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .15); }

.input-group-prepend .input-group-text {
    background: #f6f8fc;
    color: #5b6b85;
    min-width: 2.5rem;
    justify-content: center;
}

.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-group-prepend > .input-group-text { border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); }

.btn { border-radius: var(--ui-radius-sm); font-weight: 600; }
.btn-sm { padding: .3rem .65rem; }

.table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom-width: 1px;
    vertical-align: middle;
}

.table td { vertical-align: middle; }
.table-hover tbody tr:hover,
.ui-page .table tbody tr:hover { background: #f8fbff; }

.badge { font-weight: 600; padding: .35em .6em; border-radius: .35rem; }

/* 3. Kit components ------------------------------------------------------------------------- */

/* Page header: title + subtitle left, actions right; wraps on small screens. */
.ui-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.ui-page-header::after { display: none; }
.ui-page-header .card-title { float: none; margin: 0; font-size: 1.12rem; }
.ui-page-title { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.ui-page-icon {
    width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .55rem; background: var(--ui-primary-soft); color: var(--ui-primary); font-size: 1.05rem;
}
.ui-page-subtitle { color: var(--ui-muted); font-size: .84rem; margin-top: .1rem; }
.ui-page-actions { float: none; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ui-page-actions .btn { margin: 0; }

/* Form sections. */
.ui-section {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: .65rem .85rem .05rem;
    margin-bottom: .7rem;
    background: var(--ui-surface);
}
.ui-section-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; padding-bottom: .4rem; border-bottom: 1px dashed var(--ui-border); }
.ui-section-icon {
    width: 1.6rem; height: 1.6rem; flex: 0 0 1.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .4rem; background: #f1f5f9; color: #475569; font-size: .8rem;
}
.ui-section-title { font-size: .92rem; font-weight: 700; margin: 0; color: var(--ui-text); }
.ui-section-description { margin: .05rem 0 0; color: var(--ui-muted); font-size: .78rem; }
/* Fields sit in tighter columns: 15px gutters become 8px inside sections. */
.ui-section > .row { margin-left: -.5rem; margin-right: -.5rem; }
.ui-section > .row > [class*="col"] { padding-left: .5rem; padding-right: .5rem; }

.ui-field { margin-bottom: .6rem; }
.ui-field .form-text { margin-top: .15rem; font-size: .75rem; line-height: 1.3; }

/* Form action bar: sticky at the bottom while the form is long. */
.ui-form-actions {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
    margin: .6rem -.95rem -.95rem; padding: .55rem .95rem;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--ui-border);
    border-radius: 0 0 var(--ui-radius) var(--ui-radius);
    backdrop-filter: blur(4px);
}
.ui-form-actions-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

/* List header: quick search + chips + empty state. */
.ui-quick-search { min-width: 230px; max-width: 320px; }
.ui-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .7rem 1.15rem; border-bottom: 1px solid var(--ui-border); background: #fbfcfe; }
.ui-filter-chips-label { color: var(--ui-muted); font-size: .8rem; font-weight: 600; margin-right: .2rem; }
.ui-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .22rem .6rem; border-radius: 999px;
    background: var(--ui-primary-soft); color: #1d4ed8; font-size: .8rem; font-weight: 600;
    border: 1px solid #d6e4ff; text-decoration: none;
}
.ui-chip:hover { background: #dbe7ff; color: #1e40af; text-decoration: none; }
.ui-chip-label { color: #475569; font-weight: 500; }
.ui-chip-clear { background: #fff; color: #b91c1c; border-color: #fecaca; }
.ui-chip-clear:hover { background: #fef2f2; color: #991b1b; }

.ui-empty-state { text-align: center; padding: 2.4rem 1rem; color: var(--ui-muted); }
.ui-empty-icon {
    width: 3.6rem; height: 3.6rem; margin: 0 auto .8rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #f1f5f9; color: #94a3b8; font-size: 1.5rem;
}
.ui-empty-title { color: var(--ui-text); font-weight: 700; margin-bottom: .3rem; }
.ui-empty-text { max-width: 420px; margin: 0 auto .9rem; }
.ui-empty-actions { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }

/* Detail pages: quick actions and info tiles. */
.ui-quick-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.ui-quick-actions .btn { display: inline-flex; align-items: center; }
.ui-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ui-info-tile { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); padding: .65rem .8rem; background: #fbfcfe; min-width: 0; }
.ui-info-tile span { display: block; color: var(--ui-muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ui-info-tile strong { display: block; color: var(--ui-text); font-size: .95rem; margin-top: .15rem; word-break: break-word; }

/* Row actions: icon buttons in one line. */
.ui-row-actions { display: inline-flex; flex-wrap: nowrap; gap: .3rem; }
.ui-row-actions .btn, .ui-row-actions form { margin: 0 !important; }

/* 4. Sidebar --------------------------------------------------------------------------------- */
/* D-068 U13: the sidebar class (sidebar-primary-primary) is not an AdminLTE theme, so the sidebar had no
   background of its own: fine over the white page, but see-through when the collapsed sidebar opens on hover
   over the content. A solid light theme for every state (open, collapsed, hover-expanded, phone off-canvas). */
.main-sidebar,
.main-sidebar .sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar:hover,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused {
    background-color: #ffffff;
}
.main-sidebar { border-right: 1px solid var(--ui-border); box-shadow: 0 0 18px rgba(15, 23, 42, .06) !important; }
.main-sidebar .user-panel { border-bottom: 1px solid var(--ui-border); background: #ffffff; }
.main-sidebar .nav-sidebar .nav-link { color: #334155; border-radius: .45rem; margin: 1px .5rem; width: calc(100% - 1rem); }
.main-sidebar .nav-sidebar .nav-link .nav-icon { color: #64748b; }
.main-sidebar .nav-sidebar .nav-link:hover { background: #f1f5f9; color: #0f172a; }
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview .nav-link.active {
    background: var(--ui-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(13, 110, 253, .25);
}
.main-sidebar .nav-sidebar .nav-link.active .nav-icon { color: #ffffff; }
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) { background: #eef4ff; color: #1d4ed8; }
.main-sidebar .nav-treeview { padding-left: .35rem; }
.main-sidebar .nav-treeview .nav-link { font-size: .9rem; }
.main-sidebar .nav-treeview .nav-treeview .nav-link { font-size: .86rem; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link { width: calc(100% - 1rem); }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-header.ui-nav-group { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .app-menu-search { display: none; }

.nav-sidebar .nav-header.ui-nav-group { cursor: default; }
.nav-sidebar .badge-new { font-size: .62rem; padding: .2em .45em; margin-left: .3rem; vertical-align: middle; }

/* Document lines and summary (D-068 U17, sales invoice). */
.ui-lines { margin: 0 -.85rem; padding: 0 .85rem; }
.ui-lines .table { font-size: .88rem; }
.ui-lines .table thead th { background: #f6f8fc; color: #475569; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: .45rem .5rem; vertical-align: middle; white-space: nowrap; border-bottom-width: 1px; }
.ui-lines .table td { padding: .3rem .35rem; vertical-align: top; }
.ui-lines .form-control { height: calc(1.9rem + 2px); padding: .2rem .45rem; font-size: .88rem; }
.ui-lines .form-control[readonly] { background: #f8fafc; font-weight: 600; }
.ui-lines .form-text { font-size: .72rem; margin-top: .15rem; line-height: 1.25; }
.ui-lines .btn-sm { padding: .2rem .45rem; }
.ui-sales-summary .ui-summary-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; }
.ui-sales-summary .ui-summary-row > label { margin: 0; font-size: .84rem; font-weight: 600; color: #475569; flex: 0 0 auto; }
.ui-sales-summary .ui-summary-row > .form-control,
.ui-sales-summary .ui-summary-row > .d-flex { max-width: 60%; }
.ui-sales-summary .ui-summary-row > .form-control { text-align: right; font-variant-numeric: tabular-nums; }
.ui-sales-summary .ui-summary-row .form-control[readonly] { background: #f8fafc; border-color: transparent; font-weight: 600; }
.ui-sales-summary .ui-summary-row.is-net { border-top: 2px solid #e2e8f0; padding-top: .45rem; }
.ui-sales-summary .ui-summary-row.is-net > label { color: #0f172a; font-size: .95rem; }
.ui-sales-summary .ui-summary-row.is-net .form-control { font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.ui-sales-summary .ui-summary-discount .d-flex select { flex: 0 0 48%; }

/* Older forms with their own inner cards, shown inside a kit page (D-068 U19, sales return): cards look like sections. */
.ui-page .card-body .card { box-shadow: none; border: 1px solid var(--ui-border); border-top: 1px solid var(--ui-border); border-radius: var(--ui-radius); margin-bottom: .7rem; }
.ui-page .card-body .card > .card-header { background: #fafbfd; padding: .5rem .85rem; border-bottom: 1px dashed var(--ui-border); }
.ui-page .card-body .card > .card-header .card-title { font-size: .92rem; font-weight: 700; }
.ui-page .card-body .card > .card-body { padding: .7rem .85rem; }
.ui-page .card-body .card .form-control { height: calc(1.95rem + 2px); padding-top: .25rem; padding-bottom: .25rem; font-size: .9rem; }
.ui-page .card-body .card textarea.form-control { height: auto; }

/* Report screens (D-068 U22): inline filters, figure tiles, compact table. */
.ui-report-filters { background: #f7f9fc; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: .55rem .75rem .6rem; margin-bottom: .7rem; }
.ui-report-filters label { font-size: .72rem; font-weight: 700; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .15rem; }
.ui-report-filters .row > [class*="col"] { margin-bottom: .35rem; }
.ui-report-filter-buttons { display: flex; gap: .35rem; justify-content: flex-end; }
.ui-report-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .7rem; }
.ui-report-tile { background: #fff; border: 1px solid var(--ui-border); border-left: 3px solid #2563eb; border-radius: .55rem; padding: .5rem .7rem; }
.ui-report-tile span { display: block; font-size: .72rem; font-weight: 700; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .03em; }
.ui-report-tile strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.ui-report-table { font-size: .84rem; }
.ui-report-table thead th { background: #f6f8fc; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; color: #475569; white-space: nowrap; }
.ui-report-table td { font-variant-numeric: tabular-nums; }
.ui-report-table tfoot td { font-weight: 700; background: #fafbfd; }
.ui-report-subtitle { font-size: .95rem; font-weight: 700; margin: 1rem 0 .4rem; }

/* D-073: the older reports on the kit - filter panel (was a popup), coloured tiles, blocks below. */
.ui-report-filter-panel { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: #f7f9fc; margin-bottom: .7rem; }
.ui-report-filter-panel > summary { cursor: pointer; padding: .5rem .75rem; font-weight: 600; font-size: .88rem; color: var(--ui-text); list-style: none; display: flex; align-items: center; }
.ui-report-filter-panel > summary::-webkit-details-marker { display: none; }
.ui-report-filter-panel > summary::after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; color: var(--ui-muted); transition: transform .15s; }
.ui-report-filter-panel[open] > summary::after { transform: rotate(180deg); }
.ui-report-filter-panel[open] > summary { border-bottom: 1px solid var(--ui-border); }
.ui-report-filter-panel > .ui-report-filters { border: 0; border-radius: 0 0 var(--ui-radius) var(--ui-radius); margin: 0; padding-top: .65rem; }
.ui-report-tile { position: relative; }
.ui-report-tile-icon { position: absolute; top: .55rem; right: .65rem; font-size: 1rem; opacity: .35; }
.ui-report-tile strong { display: block; padding-right: 1.4rem; overflow-wrap: anywhere; }
.ui-report-tile.is-primary { border-left-color: #2563eb; } .ui-report-tile.is-primary .ui-report-tile-icon { color: #2563eb; }
.ui-report-tile.is-info { border-left-color: #0891b2; } .ui-report-tile.is-info .ui-report-tile-icon { color: #0891b2; }
.ui-report-tile.is-success { border-left-color: #16a34a; } .ui-report-tile.is-success .ui-report-tile-icon { color: #16a34a; }
.ui-report-tile.is-warning { border-left-color: #d97706; } .ui-report-tile.is-warning .ui-report-tile-icon { color: #d97706; }
.ui-report-tile.is-danger { border-left-color: #dc2626; } .ui-report-tile.is-danger .ui-report-tile-icon { color: #dc2626; }
.ui-report-tile.is-secondary { border-left-color: #64748b; } .ui-report-tile.is-secondary .ui-report-tile-icon { color: #64748b; }
.ui-report-block { margin-top: .75rem; }
.ui-classic-report .table-responsive { border-radius: var(--ui-radius-sm); }
.ui-classic-report .card.card-body { box-shadow: none; border: 1px solid var(--ui-border); }
.ui-classic-report .alert-light { background: #f8fafc; font-size: .86rem; }
.ui-report-pagination { display: flex; justify-content: flex-end; }
@media (max-width: 575.98px) {
    .ui-report-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-report-tile strong { font-size: .98rem; }
}

/* 5. Phone and tablet ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .card-body { padding: .75rem; }
    .card > .card-header { padding: .75rem .9rem; }
    .ui-page-header { align-items: flex-start; }
    .ui-page-actions { width: 100%; }
    .ui-page-actions .btn { flex: 1 1 auto; }
    .ui-quick-search { max-width: none; width: 100%; min-width: 0; }
    .ui-form-actions { margin: .6rem -.75rem -.75rem; padding: .55rem .75rem; }
    .ui-form-actions-buttons { width: 100%; }
    .ui-form-actions-buttons .btn { flex: 1 1 100%; }
    .ui-section { padding: .6rem .65rem .05rem; }

    /* Lists marked .ui-table-stack turn each row into a card; labels come from the header (ui-kit.js). */
    table.ui-table-stack thead { display: none; }
    table.ui-table-stack, table.ui-table-stack tbody, table.ui-table-stack tr, table.ui-table-stack td { display: block; width: 100%; }
    table.ui-table-stack tr { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); margin-bottom: .7rem; padding: .35rem .2rem; background: #fff; }
    table.ui-table-stack td { border: 0; padding: .3rem .7rem; text-align: right; display: flex; justify-content: space-between; gap: .8rem; }
    table.ui-table-stack td::before { content: attr(data-label); font-weight: 700; color: var(--ui-muted); font-size: .76rem; text-transform: uppercase; text-align: left; flex: 0 0 38%; }
    table.ui-table-stack td[data-label=""]::before { content: none; }
    table.ui-table-stack td.ui-cell-wide { display: block; text-align: left; }
    table.ui-table-stack td.ui-cell-wide::before { display: block; margin-bottom: .2rem; }
    table.ui-table-stack tfoot { display: block; }
}

/* 6. Print ----------------------------------------------------------------------------------- */
@media print {
    .ui-form-actions, .ui-quick-search, .ui-filter-chips, .ui-page-actions { display: none !important; }
}

/* D-071: quick status tabs above document lists. */
.ui-status-tabs { display: flex; flex-wrap: wrap; gap: .3rem; padding: .55rem 1.15rem; border-bottom: 1px solid var(--ui-border); background: #fff; }
.ui-status-tab { padding: .22rem .75rem; border-radius: 999px; border: 1px solid var(--ui-border); color: #475569; font-size: .82rem; font-weight: 600; background: #fff; }
.ui-status-tab:hover { background: #f1f5ff; color: #1e40af; text-decoration: none; }
.ui-status-tab.is-active { background: var(--ui-primary, #0d6efd); border-color: var(--ui-primary, #0d6efd); color: #fff; }
.ui-card-actions { margin: 0; border-radius: 0 0 var(--ui-radius) var(--ui-radius); }