/* ============================================================================
   ERP → FolksPMS bridge
   Re-skins the shared legacy CRUD vocabulary (CommonHeader `.header`,
   CollapsiblePanel `.panel-*`, Bootstrap `.form-control`/`.btn`/`.table`,
   `.search-box`, `.custom-pagination`) to the FolksPMS V5 design tokens.
   Loaded AFTER folkspms-ui.css so it wins; converts the bulk of ERP list/
   form pages to the reference look WITHOUT editing each page's markup.
   Uses `!important` only where the legacy rules it overrides also do.
   ============================================================================ */

/* ---- CommonHeader (.header / .title / .smllhead / .linkhead) → page header ---- */
.header {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    padding: 16px 20px !important;
    text-transform: none !important;
}
.header .title {
    font-family: inherit !important;
    color: var(--ink) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}
.header .smllhead, .header .discrib {
    font-family: inherit !important;
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
}
.linkhead a { color: var(--ink-3) !important; }
.linkhead a:hover { color: var(--ink) !important; }
.header .fa-expand, .header .fa-compress { background: transparent !important; color: var(--ink-4) !important; }

/* ---- CollapsiblePanel (.panel-head / .panel-title-inside / .panel-body / divider) → card ---- */
.panel-body {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-1);
}
.panel-head, .panel-title-inside, .panel-head label.head {
    font-family: inherit !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
.panel-title-inside { font-size: 14px !important; }
.panel-divider { border-top: 1px solid var(--line) !important; }
/* neutralize the coloured top-accents used on some panels */
.hpblue, .hpred, .hpgreen, .hpyellow { border-top: 1px solid var(--line) !important; }

/* keep CommonHeader's inner `.content` div from becoming a nested scroll surface */
.main-container .content { overflow: visible; background: transparent; }

/* ---- Form controls (.form-control / .form-select) → folkspms .input/.select ---- */
.form-control, .form-select {
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-size: 12.5px !important;
    box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
    outline: 2px solid oklch(0.85 0.05 60) !important;
    border-color: var(--amber-2) !important;
    box-shadow: none !important;
}
.form-group label, .form-label {
    font-size: 11px !important;
    font-weight: 600;
    color: var(--ink-3) !important;
    letter-spacing: .02em;
    margin-bottom: 4px;
}

/* ---- Buttons (.btn-primary / .btn-rounded / gradients) → folkspms amber accent ---- */
.btn-primary, .btn-rounded, .btn-primary-pink {
    background: var(--amber) !important;
    background-image: none !important;
    color: oklch(0.2 0.05 60) !important;
    border: 1px solid var(--amber-2) !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.btn-primary:hover, .btn-rounded:hover, .btn-primary-pink:hover {
    background: oklch(0.66 0.16 55) !important;
    color: oklch(0.2 0.05 60) !important;
}
.btn-secondary {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
.btn-secondary:hover { background: var(--surface-2) !important; border-color: var(--line-2) !important; }

/* ---- Tables (.table / -striped / -bordered) → folkspms table.t ---- */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 12.5px !important;
    color: var(--ink-2);
}
.table > thead > tr > th, .table thead th {
    background: var(--surface-2) !important;
    color: var(--ink-3) !important;
    text-transform: uppercase;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line) !important;
    border-top: 0 !important;
}
.table > tbody > tr > td, .table tbody td {
    border-top: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    vertical-align: middle;
}
.table.table-bordered, .table.table-bordered > * > tr > * {
    border-color: var(--line) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: transparent !important;
}
.table > tbody > tr:hover > td { background: var(--surface-2) !important; }
/* action icons in table cells */
.edit-icon, .delete-icon, .table td .fa-edit, .table td .fa-trash { color: var(--ink-3) !important; }
.edit-icon:hover, .table td .fa-edit:hover { color: var(--indigo) !important; }
.delete-icon:hover, .table td .fa-trash:hover { color: var(--crit) !important; }

/* ---- Search box (.search-box / .search-input / .search-icon) → folkspms .search ---- */
.search-box {
    display: flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px 0 28px;
    background: var(--surface-3); border-radius: 6px;
    border: 1px solid transparent; position: relative;
}
.search-input {
    border: 0 !important; background: transparent !important;
    height: 26px !important; padding: 0 !important;
    font-size: 12.5px !important; color: var(--ink) !important; box-shadow: none !important;
}
.search-input:focus { border: 0 !important; box-shadow: none !important; }
.search-icon { color: var(--ink-3) !important; font-size: 11px !important; }

/* ---- Pagination (.custom-pagination / .page-btn / .page-info) → folkspms buttons ---- */
.page-btn {
    min-width: 28px !important; height: 28px !important;
    border: 1px solid var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink-2) !important;
    border-radius: 6px !important;
    font-size: 12px !important; font-weight: 500 !important;
}
.page-btn:hover { background: var(--surface-2) !important; border-color: var(--line-2) !important; }
.page-btn.active, .page-btn.active:hover {
    background: var(--amber) !important;
    color: oklch(0.2 0.05 60) !important;
    border-color: var(--amber-2) !important;
}
.page-info { color: var(--ink-3) !important; font-size: 12px !important; }

/* ---- Extra button variants (btn-sm / btn-default / btn-danger / btn-success) ---- */
.btn-default {
    background: var(--surface) !important; color: var(--ink) !important;
    border: 1px solid var(--line) !important; border-radius: 6px !important; box-shadow: none !important;
}
.btn-default:hover { background: var(--surface-2) !important; border-color: var(--line-2) !important; }
.btn-danger {
    background: var(--crit) !important; background-image: none !important; color: #fff !important;
    border: 1px solid var(--crit) !important; border-radius: 6px !important; box-shadow: none !important;
}
.btn-success {
    background: var(--ok) !important; background-image: none !important; color: #fff !important;
    border: 1px solid var(--ok) !important; border-radius: 6px !important; box-shadow: none !important;
}
.btn-sm { padding: 0 8px !important; font-size: 11px !important; }
/* keep icon-only action buttons inside table cells flat (matches existing legacy override) */

/* ---- Text utilities ---- */
.text-muted { color: var(--ink-3) !important; }
.text-danger { color: var(--crit) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: oklch(0.45 0.12 70) !important; }

/* ---- Bootstrap alerts → folkspms callout tint ---- */
.alert {
    border-radius: 8px !important; border: 1px solid var(--line) !important;
    font-size: 13px !important; padding: 10px 12px !important;
}
.alert-info    { background: var(--indigo-tint) !important; color: var(--indigo) !important; border-color: oklch(0.9 0.04 265) !important; }
.alert-warning { background: oklch(0.97 0.04 75) !important;  color: oklch(0.45 0.12 70) !important; border-color: oklch(0.86 0.07 75) !important; }
.alert-danger  { background: var(--mag-tint) !important;      color: var(--crit) !important;  border-color: oklch(0.86 0.08 20) !important; }
.alert-success { background: oklch(0.96 0.025 155) !important; color: var(--ok) !important;   border-color: oklch(0.88 0.05 155) !important; }

/* ---- Bootstrap badges → folkspms chip ---- */
.badge {
    border-radius: 999px !important; font-weight: 600 !important; font-size: 10.5px !important;
    padding: 3px 8px !important;
}
.badge.bg-primary,   .badge.text-bg-primary   { background: var(--indigo-tint) !important; color: var(--indigo) !important; }
.badge.bg-success,   .badge.text-bg-success   { background: oklch(0.96 0.025 155) !important; color: var(--ok) !important; }
.badge.bg-danger,    .badge.text-bg-danger    { background: var(--mag-tint) !important; color: var(--crit) !important; }
.badge.bg-warning,   .badge.text-bg-warning   { background: oklch(0.97 0.04 75) !important; color: oklch(0.45 0.12 70) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--surface-3) !important; color: var(--ink-3) !important; }

/* ---- Bootstrap card → folkspms card ---- */
.card:not(.login-card) {
    background: var(--surface) !important; border: 1px solid var(--line) !important;
    border-radius: 10px !important; box-shadow: var(--shadow-1) !important;
}
.card-header {
    background: var(--surface-2) !important; border-bottom: 1px solid var(--line) !important;
    font-weight: 600; color: var(--ink);
}
.card-footer { background: var(--surface-2) !important; border-top: 1px solid var(--line) !important; }

/* ---- Table hover / light header variants ---- */
.table-hover > tbody > tr:hover > * { background: var(--surface-2) !important; }
.table-light, .table-light > * > tr > * { background: var(--surface-2) !important; color: var(--ink-3) !important; }

/* ---- Tabs (Bootstrap nav-tabs) → folkspms tabs ---- */
.nav-tabs { border-bottom: 1px solid var(--line) !important; }
.nav-tabs .nav-link {
    border: 0 !important; border-bottom: 2px solid transparent !important;
    color: var(--ink-2) !important; font-size: 12.5px !important; padding: 10px 12px !important;
    background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--ink) !important; }
.nav-tabs .nav-link.active {
    color: var(--ink) !important; font-weight: 500 !important;
    border-bottom-color: var(--amber) !important; background: transparent !important;
}

/* ---- Modals → folkspms surface ---- */
.modal-content {
    border: 1px solid var(--line) !important; border-radius: 12px !important;
    box-shadow: var(--shadow-pop) !important;
}
.modal-header { border-bottom: 1px solid var(--line) !important; }
.modal-footer { border-top: 1px solid var(--line) !important; }
.modal-title { font-weight: 600 !important; color: var(--ink) !important; }

/* ---- Bootstrap spinner → amber ---- */
.spinner-border { color: var(--amber-2) !important; }

/* ---- Form check (checkbox/radio) accent ---- */
.form-check-input:checked { background-color: var(--amber) !important; border-color: var(--amber-2) !important; }