/* ==========================================================
   ERP Experience Framework V3
   Forms + DataTable + Cards + Status Foundation
   POS dashboard inspired global component layer.
   Safe: does not override existing business logic or routes.
   ========================================================== */
:root {
    --exf-control-height: 34px;
    --exf-control-radius: 6px;
    --exf-control-font-size: 13px;
    --exf-label-color: #25324b;
    --exf-muted: #718096;
    --exf-border: #d7dde8;
    --exf-border-focus: #3f7afc;
    --exf-bg-soft: #f7f9fc;
    --exf-card-border: #e4e9f2;
    --exf-card-shadow: 0 8px 22px rgba(23, 35, 59, .08);
    --exf-success: #16a34a;
    --exf-warning: #d97706;
    --exf-danger: #dc2626;
    --exf-info: #0ea5e9;
    --exf-primary: #2457e6;
    --exf-secondary: #64748b;
}
.exf-card, .erp-card {
    background: #fff;
    border: 1px solid var(--exf-card-border);
    border-radius: 10px;
    box-shadow: var(--exf-card-shadow);
    margin-bottom: 16px;
}
.exf-card__header, .erp-card-header {
    padding: 11px 14px;
    border-bottom: 1px solid var(--exf-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.exf-card__title, .erp-card-title {
    margin: 0;
    font-weight: 700;
    color: #17233b;
    font-size: 15px;
}
.exf-card__body, .erp-card-body { padding: 14px; }
.exf-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.exf-col-12 { grid-column: span 12; }
.exf-col-9 { grid-column: span 9; }
.exf-col-8 { grid-column: span 8; }
.exf-col-6 { grid-column: span 6; }
.exf-col-4 { grid-column: span 4; }
.exf-col-3 { grid-column: span 3; }
.exf-col-2 { grid-column: span 2; }
@media (max-width: 991px) { .exf-col-2,.exf-col-3,.exf-col-4,.exf-col-6,.exf-col-8,.exf-col-9 { grid-column: span 12; } }
.exf-field { margin-bottom: 12px; }
.exf-label {
    display: block;
    font-size: 12px;
    color: var(--exf-label-color);
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
}
.exf-required { color: var(--exf-danger); margin-left: 2px; }
.exf-help { display:block; color: var(--exf-muted); font-size: 11px; margin-top: 4px; }
.exf-control,
.exf-field .form-control,
.exf-field select,
.exf-field textarea,
.exf-field .select2-container .select2-selection--single {
    border: 1px solid var(--exf-border) !important;
    border-radius: var(--exf-control-radius) !important;
    min-height: var(--exf-control-height) !important;
    height: var(--exf-control-height);
    font-size: var(--exf-control-font-size) !important;
    box-shadow: none !important;
    background-color: #fff;
}
.exf-field textarea.form-control, textarea.exf-control { height: auto !important; min-height: 82px !important; }
.exf-control:focus,
.exf-field .form-control:focus,
.exf-field select:focus,
.exf-field textarea:focus {
    border-color: var(--exf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(63,122,252,.12) !important;
}
.exf-input-group { display: flex; align-items: stretch; }
.exf-input-prefix, .exf-input-suffix {
    min-height: var(--exf-control-height);
    display:flex; align-items:center;
    padding: 0 9px;
    background: var(--exf-bg-soft);
    border: 1px solid var(--exf-border);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}
.exf-input-prefix { border-right: 0; border-radius: var(--exf-control-radius) 0 0 var(--exf-control-radius); }
.exf-input-suffix { border-left: 0; border-radius: 0 var(--exf-control-radius) var(--exf-control-radius) 0; }
.exf-input-group .exf-control { border-radius: 0 !important; flex:1; }
.exf-input-group .exf-control:first-child { border-radius: var(--exf-control-radius) 0 0 var(--exf-control-radius) !important; }
.exf-input-group .exf-control:last-child { border-radius: 0 var(--exf-control-radius) var(--exf-control-radius) 0 !important; }
.exf-invalid .exf-control, .exf-invalid .form-control { border-color: var(--exf-danger) !important; }
.exf-error { display:block; color: var(--exf-danger); font-size: 11px; font-weight: 600; margin-top: 4px; }
.exf-filter-panel {
    background: #fff;
    border: 1px solid var(--exf-card-border);
    border-radius: 10px;
    box-shadow: var(--exf-card-shadow);
    padding: 12px;
    margin-bottom: 14px;
}
.exf-toolbar, .erp-toolbar {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
    margin-bottom: 10px;
}
.exf-toolbar__left, .exf-toolbar__right { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.exf-btn {
    min-height: var(--exf-control-height);
    border-radius: var(--exf-control-radius);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border: 0;
    display:inline-flex;
    align-items:center;
    gap:5px;
    line-height:1.2;
}
.exf-btn-primary { background: linear-gradient(135deg,#2457e6,#3f7afc); color:#fff !important; }
.exf-btn-success { background: linear-gradient(135deg,#159447,#20c764); color:#fff !important; }
.exf-btn-danger { background: linear-gradient(135deg,#e73626,#ff761b); color:#fff !important; }
.exf-btn-dark { background:#17233b; color:#fff !important; }
.exf-datatable-wrap {
    background:#fff;
    border:1px solid var(--exf-card-border);
    border-radius:10px;
    box-shadow:var(--exf-card-shadow);
    padding:12px;
    overflow-x:auto;
}
.exf-datatable-wrap table.dataTable thead th,
.exf-table thead th {
    background:#17233b !important;
    color:#fff !important;
    font-weight:700;
    font-size:12px;
    white-space:nowrap;
    padding:8px 8px !important;
}
.exf-datatable-wrap table.dataTable tbody td,
.exf-table tbody td {
    font-size:12px;
    padding:7px 8px !important;
    vertical-align:middle;
}
.exf-status, .exf-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:22px;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.01em;
}
.exf-status-draft,.exf-badge-secondary { background:#e2e8f0; color:#334155; }
.exf-status-pending,.exf-badge-warning { background:#fff3cd; color:#92400e; }
.exf-status-approved,.exf-badge-success { background:#dcfce7; color:#166534; }
.exf-status-rejected,.exf-badge-danger { background:#fee2e2; color:#991b1b; }
.exf-status-completed,.exf-badge-primary { background:#dbeafe; color:#1d4ed8; }
.exf-status-processing,.exf-badge-info { background:#cffafe; color:#0e7490; }
.exf-empty-state {
    text-align:center;
    padding:30px 18px;
    background:#fff;
    border:1px dashed #cbd5e1;
    border-radius:10px;
    color:#64748b;
}
.exf-empty-state i { font-size:34px; color:#94a3b8; margin-bottom:8px; }
.exf-empty-state__title { font-size:16px; font-weight:800; color:#334155; margin-bottom:4px; }
.exf-loading-overlay { position:relative; }
.exf-loading-overlay:after {
    content:''; position:absolute; inset:0; background:rgba(255,255,255,.72); z-index:5;
    border-radius:inherit; display:none;
}
.exf-loading-overlay.is-loading:after { display:block; }
.exf-skeleton { border-radius: 6px; background: linear-gradient(90deg,#eef2f7 25%,#f8fafc 50%,#eef2f7 75%); background-size:200% 100%; animation:exfSkeleton 1.3s infinite; min-height:14px; }
@keyframes exfSkeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }