/* =============================================================
   Standard Oil ERP — Global Theme Override
   Load this LAST in layouts/app.blade.php, after all other CSS.

   <link rel="stylesheet" href="{{ asset('assets/css/erp-theme.css') }}">

   Targets:
   - Bootstrap 5 components (tables, buttons, forms, badges, cards)
   - DataTables default classes
   - Sidebar + layout shell (app-wrapper, app-content)
   - Toastr notifications
   Do NOT edit individual blade files for cosmetic changes.
   All brand changes live here.
   ============================================================= */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
    --so-cream:          #fdf6e3;
    --so-cream-2:        #f9edd0;
    --so-cream-3:        #f0e0b0;
    --so-white:          #ffffff;
    --so-green:          #2e7d32;
    --so-green-hover:    #1b5e20;
    --so-green-light:    #e8f5e9;
    --so-green-mid:      #4caf50;
    --so-green-border:   #a5d6a7;
    --so-orange:         #d84315;
    --so-orange-soft:    #fff3e0;
    --so-orange-border:  #ffcc80;
    --so-brown:          #5d4037;
    --so-brown-light:    #8d6e63;
    --so-text-main:      #2c1a0e;
    --so-text-sub:       #5d4037;
    --so-text-muted:     #a1887f;
    --so-border:         #e0d9cc;
    --so-border-strong:  #c8bba8;
    --so-row-hover:      #fdf6e3;
    --so-row-alt:        #fafaf7;
    --so-radius:         10px;
    --so-radius-sm:      7px;
    --so-shadow:         0 2px 12px rgba(93, 64, 55, 0.08);
    --so-font:           'Nunito', 'Segoe UI', sans-serif;
}

/* ── 2. Base & Body ────────────────────────────────────────── */
body.app {
    background-color: var(--so-cream) !important;
    background-image: radial-gradient(circle, rgba(93,64,55,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    font-family: var(--so-font) !important;
    color: var(--so-text-main) !important;
}

/* ── 3. Layout Shell ───────────────────────────────────────── */
.app-wrapper {
    background: transparent !important;
}

.app-content {
    background: transparent !important;
}

/* ── 4. Page Title (header breadcrumb area) ────────────────── */
.app-page-title,
.page-title,
h1.page-heading {
    font-family: var(--so-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--so-text-main);
    letter-spacing: -0.01em;
}

/* ── 5. Cards & Panels ─────────────────────────────────────── */
.app-card,
.card {
    background: var(--so-white) !important;
    border: 1px solid var(--so-border) !important;
    border-radius: var(--so-radius) !important;
    box-shadow: var(--so-shadow) !important;
}

.app-card .app-card-header,
.card-header {
    background: var(--so-cream-2) !important;
    border-bottom: 1px solid var(--so-border) !important;
    border-radius: var(--so-radius) var(--so-radius) 0 0 !important;
    font-weight: 700;
    color: var(--so-text-main);
    padding: 14px 20px;
}

.app-card-body,
.card-body {
    padding: 20px !important;
}

/* ── 6. Buttons ────────────────────────────────────────────── */

/* Primary — brand green */
.btn-primary,
.btn-success {
    background-color: var(--so-green) !important;
    border-color: var(--so-green) !important;
    color: #fff !important;
    font-family: var(--so-font);
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--so-radius-sm) !important;
    padding: 8px 18px !important;
    letter-spacing: 0.01em;
    transition: background 0.15s, transform 0.1s !important;
}

.btn-primary:hover,
.btn-success:hover {
    background-color: var(--so-green-hover) !important;
    border-color: var(--so-green-hover) !important;
}

.btn-primary:active,
.btn-success:active {
    transform: scale(0.97) !important;
}

/* Secondary — outlined warm */
.btn-secondary,
.btn-outline-secondary {
    background: transparent !important;
    border: 1.5px solid var(--so-border-strong) !important;
    color: var(--so-brown) !important;
    font-family: var(--so-font);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--so-radius-sm) !important;
    padding: 8px 16px !important;
    transition: background 0.15s !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--so-cream-2) !important;
    color: var(--so-text-main) !important;
}

/* Danger */
.btn-danger {
    background-color: #c62828 !important;
    border-color: #c62828 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--so-radius-sm) !important;
}

.btn-danger:hover {
    background-color: #b71c1c !important;
    border-color: #b71c1c !important;
}

/* Warning */
.btn-warning {
    background-color: #f9a825 !important;
    border-color: #f9a825 !important;
    color: var(--so-text-main) !important;
    font-weight: 700;
    border-radius: var(--so-radius-sm) !important;
}

/* Small icon-action buttons in tables */
.btn-sm {
    padding: 5px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* ── 7. Form Controls ──────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--so-white) !important;
    border: 1.5px solid var(--so-border-strong) !important;
    border-radius: var(--so-radius-sm) !important;
    font-family: var(--so-font) !important;
    font-size: 15px !important;
    color: var(--so-text-main) !important;
    padding: 8px 12px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--so-green) !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.12) !important;
    outline: none !important;
}

.form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--so-brown);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

/* Select2 */
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--so-border-strong) !important;
    border-radius: var(--so-radius-sm) !important;
    height: 38px !important;
    font-family: var(--so-font) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    color: var(--so-text-main) !important;
    font-size: 13px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--so-green) !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.12) !important;
}

.select2-dropdown {
    border: 1.5px solid var(--so-green-border) !important;
    border-radius: var(--so-radius-sm) !important;
    font-family: var(--so-font) !important;
    font-size: 13px !important;
}


/* ── 8. Tables ─────────────────────────────────────────────── */
.table-responsive {
    border-radius: var(--so-radius) !important;
}

table.dataTable,
.table {
    font-family: var(--so-font) !important;
    font-size: 15px !important;
    color: var(--so-text-main) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: var(--so-white) !important;
}

/* Header */
table.dataTable thead th,
.table thead th {
    background-color: #f5f0e8 !important;
    color: var(--so-brown) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    border-bottom: 2px solid var(--so-border) !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
}

/* Body rows */
table.dataTable tbody tr,
.table tbody tr {
    border-bottom: 1px solid var(--so-border) !important;
    transition: background 0.12s !important;
}

table.dataTable tbody tr td,
.table tbody tr td {
    padding: 11px 14px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-bottom: 1px solid var(--so-border) !important;
    color: var(--so-text-main) !important;
}

/* Hover */
table.dataTable tbody tr:hover,
.table tbody tr:hover {
    background-color: var(--so-row-hover) !important;
}

/* Zebra */
table.dataTable tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
    background-color: var(--so-row-alt) !important;
}

table.dataTable tbody tr:nth-child(even):hover,
.table tbody tr:nth-child(even):hover {
    background-color: var(--so-row-hover) !important;
}

/* DataTables sort icons — subdue them */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc {
    cursor: pointer !important;
}

table.dataTable thead th.dt-ordering-asc span.dt-column-order::after,
table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
    color: var(--so-green) !important;
}

/* ── 9. DataTables Controls ────────────────────────────────── */

/* Wrapper that holds length + search */
div.dt-container {
    font-family: var(--so-font) !important;
    font-size: 15px !important;
    color: var(--so-text-main) !important;
}

div.dt-container .dt-length select,
div.dt-container .dt-search input {
    border: 1.5px solid var(--so-border-strong) !important;
    border-radius: var(--so-radius-sm) !important;
    font-family: var(--so-font) !important;
    font-size: 13px !important;
    color: var(--so-text-main) !important;
    padding: 6px 10px !important;
    background: var(--so-white) !important;
}

div.dt-container .dt-length select:focus,
div.dt-container .dt-search input:focus {
    border-color: var(--so-green) !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.10) !important;
    outline: none !important;
}

div.dt-container .dt-length label,
div.dt-container .dt-search label {
    font-size: 12px;
    font-weight: 600;
    color: var(--so-brown);
    gap: 8px;
    display: flex;
    align-items: center;
}

/* DataTables pagination */
div.dt-container .dt-paging .dt-paging-button {
    border: 1px solid var(--so-border) !important;
    border-radius: 6px !important;
    background: var(--so-white) !important;
    color: var(--so-text-main) !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--so-cream-2) !important;
    border-color: var(--so-green-border) !important;
}

div.dt-container .dt-paging .dt-paging-button.current {
    background: var(--so-green) !important;
    border-color: var(--so-green) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled {
    opacity: 0.35 !important;
    cursor: default !important;
}

/* DataTables info text */
div.dt-container .dt-info {
    font-size: 12px !important;
    color: var(--so-text-muted) !important;
}

/* DataTables export buttons (Print / Excel / CSV / PDF) */
div.dt-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

div.dt-buttons .dt-button {
    background: transparent !important;
    border: 1.5px solid var(--so-border-strong) !important;
    border-radius: var(--so-radius-sm) !important;
    color: var(--so-brown) !important;
    font-family: var(--so-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
    box-shadow: none !important;
}

div.dt-buttons .dt-button:hover {
    background: var(--so-cream-2) !important;
    border-color: var(--so-green-border) !important;
    color: var(--so-green) !important;
}

/* ── 10. Badges ────────────────────────────────────────────── */
.badge,
.badge.bg-success,
span.badge-success {
    font-family: var(--so-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 100px !important;
}

.badge.bg-success,
.badge-success {
    background-color: var(--so-green-light) !important;
    color: var(--so-green) !important;
    border: 1px solid var(--so-green-border) !important;
}

.badge.bg-danger,
.badge-danger {
    background-color: #ffebee !important;
    color: #c62828 !important;
    border: 1px solid #ef9a9a !important;
}

.badge.bg-warning,
.badge-warning {
    background-color: #fff8e1 !important;
    color: #e65100 !important;
    border: 1px solid #ffe082 !important;
}

.badge.bg-secondary,
.badge-secondary {
    background-color: #f5f0e8 !important;
    color: var(--so-brown) !important;
    border: 1px solid var(--so-border) !important;
}

/* InStock / OutOfStock text badges in tables */
td .text-success,
td span.instock {
    display: inline-block;
    background: var(--so-green-light);
    color: var(--so-green) !important;
    border: 1px solid var(--so-green-border);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
}

td .text-danger,
td span.outofstock {
    display: inline-block;
    background: #ffebee;
    color: #c62828 !important;
    border: 1px solid #ef9a9a;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
}

/* ── 11. Toggle / Form-Switch ──────────────────────────────── */
.form-check-input[type="checkbox"] {
    border-color: var(--so-border-strong) !important;
    border-radius: 100px !important;
}

.form-check-input:checked {
    background-color: var(--so-green) !important;
    border-color: var(--so-green) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(46,125,50,0.15) !important;
}

/* ── 12. Alerts ────────────────────────────────────────────── */
.alert-success {
    background-color: var(--so-green-light) !important;
    border-color: var(--so-green-border) !important;
    color: var(--so-green) !important;
    border-radius: var(--so-radius) !important;
}

.alert-danger {
    background-color: #ffebee !important;
    border-color: #ef9a9a !important;
    color: #c62828 !important;
    border-radius: var(--so-radius) !important;
}

.alert-warning {
    background-color: var(--so-orange-soft) !important;
    border-color: var(--so-orange-border) !important;
    color: var(--so-orange) !important;
    border-radius: var(--so-radius) !important;
}

/* ── 13. Modals ────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--so-border) !important;
    border-radius: var(--so-radius) !important;
    box-shadow: 0 8px 40px rgba(93,64,55,0.15) !important;
    font-family: var(--so-font) !important;
}

.modal-header {
    background: var(--so-cream-2) !important;
    border-bottom: 1px solid var(--so-border) !important;
    border-radius: var(--so-radius) var(--so-radius) 0 0 !important;
}

.modal-title {
    font-weight: 700 !important;
    color: var(--so-text-main) !important;
    font-size: 15px !important;
}

.modal-footer {
    background: #fafaf7 !important;
    border-top: 1px solid var(--so-border) !important;
    border-radius: 0 0 var(--so-radius) var(--so-radius) !important;
}

/* ── 14. Toastr Notifications ──────────────────────────────── */
#toast-container > div {
    border-radius: var(--so-radius) !important;
    font-family: var(--so-font) !important;
    font-size: 13px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    opacity: 1 !important;
}

#toast-container > .toast-success {
    background-color: var(--so-green) !important;
}

#toast-container > .toast-error {
    background-color: #c62828 !important;
}

#toast-container > .toast-warning {
    background-color: var(--so-orange) !important;
}

/* ── 15. Breadcrumbs ───────────────────────────────────────── */
.breadcrumb {
    background: transparent !important;
    font-size: 12px !important;
    font-family: var(--so-font) !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

.breadcrumb-item a {
    color: var(--so-green) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.breadcrumb-item.active {
    color: var(--so-text-muted) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--so-text-muted) !important;
}

/* ── 16. Dropdowns ─────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--so-border) !important;
    border-radius: var(--so-radius-sm) !important;
    box-shadow: 0 4px 20px rgba(93,64,55,0.12) !important;
    font-family: var(--so-font) !important;
    font-size: 13px !important;
    background: var(--so-white) !important;
}

.dropdown-item {
    color: var(--so-text-main) !important;
    padding: 8px 16px !important;
    transition: background 0.1s !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--so-cream-2) !important;
    color: var(--so-green) !important;
}

.dropdown-divider {
    border-color: var(--so-border) !important;
}

/* ── 17. Tabs ──────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--so-border) !important;
    gap: 4px !important;
}

.nav-tabs .nav-link {
    font-family: var(--so-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--so-brown-light) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    margin-bottom: -2px !important;
    background: transparent !important;
    transition: color 0.12s !important;
}

.nav-tabs .nav-link:hover {
    color: var(--so-green) !important;
    border-bottom-color: var(--so-green-border) !important;
}

.nav-tabs .nav-link.active {
    color: var(--so-green) !important;
    border-bottom: 2px solid var(--so-green) !important;
    background: transparent !important;
}

/* ── 18. Pill / Filter Toggles ─────────────────────────────── */
.so-pill-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--so-white);
    border: 1.5px solid var(--so-border-strong);
    border-radius: 100px;
    padding: 4px;
    gap: 4px;
}

.so-pill-toggle label {
    font-size: 12px;
    font-weight: 700;
    color: var(--so-brown);
    padding: 5px 16px;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: 0;
    user-select: none;
}

.so-pill-toggle input[type="radio"] {
    display: none;
}

.so-pill-toggle input[type="radio"]:checked + label {
    background: var(--so-green);
    color: #fff;
}

/* ── 19. Page-level wrapper card (wraps .container-fluid content) */
.container-fluid {
    padding-top: 8px !important;
}

/* Table action icon buttons — consistent sizing */
a.btn-icon,
button.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--so-border);
    background: var(--so-white);
    color: var(--so-brown);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-decoration: none;
    font-size: 13px;
}

a.btn-icon:hover {
    background: var(--so-green-light);
    border-color: var(--so-green-border);
    color: var(--so-green);
}

a.btn-icon.btn-icon-danger:hover {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #c62828;
}
.select2-container--default .select2-selection--multiple {
    background: #fff !important;
    border: 1.5px solid #c8bba8 !important;
    border-radius: 7px !important;
    min-height: 40px !important;
    padding: 4px 6px !important;
    cursor: text !important;
}

.select2-container--default .select2-selection--multiple:focus-within {
    border-color: #2e7d32 !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.12) !important;
}

/* Each selected tag pill */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e8f5e9 !important;
    border: 1px solid #a5d6a7 !important;
    border-radius: 100px !important;
    color: #2e7d32 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 3px 10px 3px 8px !important;
    margin: 2px 4px 2px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1.4 !important;
}

/* Remove (×) button on each tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #4caf50 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-right: 0 !important;
    order: 2 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #c62828 !important;
    background: none !important;
}

/* The search input inside the box */
.select2-container--default .select2-selection--multiple .select2-search__field {
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    color: #2c1a0e !important;
    margin-top: 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: #a1887f !important;
}

/* Dropdown panel */
.select2-dropdown {
    border: 1.5px solid #a5d6a7 !important;
    border-radius: 7px !important;
    box-shadow: 0 4px 16px rgba(93,64,55,0.10) !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    overflow: hidden !important;
}

.select2-container--default .select2-results__option {
    padding: 8px 14px !important;
    color: #2c1a0e !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
}

/* Already selected options in dropdown — show with a checkmark tint */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f1f8e9 !important;
    color: #388e3c !important;
    font-weight: 700 !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #c8bba8 !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #2e7d32 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.10) !important;
}