/**
 * SweetFactory ERP - SAP Fiori Design System
 * A modern ERP UI inspired by SAP Fiori design language
 */

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
    /* SAP Brand Colors */
    --sap-blue:          #0a6ed1;
    --sap-blue-hover:    #085caf;
    --sap-blue-light:    #e8f1fb;
    --sap-blue-active:   #0654a0;

    --sap-shell-bg:      #1d2d3e;
    --sap-shell-item:    #c0cbd8;
    --sap-shell-hover:   rgba(255,255,255,0.10);
    --sap-shell-active:  rgba(255,255,255,0.15);

    --sap-bg:            #f5f6f7;
    --sap-surface:       #ffffff;
    --sap-surface-2:     #f7f7f7;

    --sap-border:        #d9d9d9;
    --sap-border-light:  #ebebeb;

    --sap-text:          #32363a;
    --sap-text-2:        #6a6d70;
    --sap-text-3:        #89919a;
    --sap-text-inv:      #ffffff;

    --sap-success:       #107e3e;
    --sap-success-bg:    #f1fdf6;
    --sap-warning:       #e9730c;
    --sap-warning-bg:    #fef7f1;
    --sap-error:         #bb0000;
    --sap-error-bg:      #fff0f0;
    --sap-info:          #0a6ed1;
    --sap-info-bg:       #e8f1fb;

    --sap-sidebar-width: 256px;
    --sap-sidebar-rail:  64px;
    --sap-control-h:     36px;
    --sap-shell-height:  44px;

    --sap-radius:        4px;
    --sap-radius-md:     6px;
    --sap-radius-lg:     8px;

    --sap-shadow-sm:     0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --sap-shadow:        0 2px 6px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
    --sap-shadow-md:     0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);

    --sap-transition:    all 0.15s ease;
}

/* Dark mode */
[data-theme="dark"] {
    --sap-bg:           #1a1f26;
    --sap-surface:      #22272e;
    --sap-surface-2:    #2d333b;
    --sap-border:       #383e47;
    --sap-border-light: #2d333b;
    --sap-text:         #e6edf3;
    --sap-text-2:       #8b949e;
    --sap-text-3:       #6e7681;
    --sap-blue-light:   rgba(10,110,209,0.15);
    --sap-success-bg:   rgba(16,126,62,0.12);
    --sap-error-bg:     rgba(187,0,0,0.12);
    --sap-warning-bg:   rgba(233,115,12,0.12);
    --sap-info-bg:      rgba(10,110,209,0.12);
    --sap-shell-bg:     #0d1117;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body, input, textarea, select, button, label, p, span, div, h1, h2, h3, h4, h5, h6, a, li, td, th {
    font-family: 'Inter', '72', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html { font-size: 14px; }

body {
    background-color: var(--sap-bg) !important;
    color: var(--sap-text) !important;
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--sap-blue); text-decoration: none; }
a:hover { color: var(--sap-blue-hover); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    color: var(--sap-text);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* ==========================================================================
   Layout Scaffold
   ========================================================================== */
.wrapper {
    background-color: var(--sap-bg) !important;
    min-height: 100vh;
}

.content-wrapper {
    background-color: var(--sap-bg) !important;
    margin-left: var(--sap-sidebar-width) !important;
    margin-top: var(--sap-shell-height) !important;
    padding: 24px !important;
    min-height: calc(100vh - var(--sap-shell-height) - 44px) !important;
}

.main-footer {
    margin-left: var(--sap-sidebar-width) !important;
    background-color: var(--sap-surface) !important;
    border-top: 1px solid var(--sap-border) !important;
    color: var(--sap-text-2) !important;
    font-size: 12px !important;
    padding: 10px 24px !important;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-footer a { color: var(--sap-blue); }
.main-footer strong { font-weight: 500; }

/* ==========================================================================
   Shell Bar (Top Navigation)
   ========================================================================== */
.main-header.navbar {
    background-color: var(--sap-shell-bg) !important;
    border-bottom: none !important;
    height: var(--sap-shell-height) !important;
    min-height: var(--sap-shell-height) !important;
    padding: 0 16px !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1040 !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

/* Shell product name / logo area */
.shell-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0 16px 0 0;
    margin-right: 8px;
    border-right: 1px solid rgba(255,255,255,0.15);
    text-decoration: none;
    white-space: nowrap;
}
.shell-brand:hover { color: #ffffff; text-decoration: none; }
.shell-brand .shell-logo {
    width: 28px;
    height: 28px;
    background: var(--sap-blue);
    border-radius: var(--sap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.shell-brand .shell-title { color: #ffffff; font-size: 14px; font-weight: 600; }
.shell-brand .shell-subtitle {
    color: var(--sap-shell-item);
    font-size: 11px;
    font-weight: 400;
    display: block;
    line-height: 1.2;
}

/* Shell menu toggle */
.shell-menu-btn {
    background: none;
    border: none;
    color: var(--sap-shell-item);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--sap-radius);
    cursor: pointer;
    transition: var(--sap-transition);
    font-size: 16px;
    margin-right: 8px;
}
.shell-menu-btn:hover { background: var(--sap-shell-hover); color: #fff; }

/* Shell right actions */
.shell-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* Theme toggle */
.theme-toggle {
    background: none;
    border: none;
    color: var(--sap-shell-item);
    width: 36px; height: 36px;
    border-radius: var(--sap-radius);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: var(--sap-transition);
    font-size: 15px;
}
.theme-toggle:hover { background: var(--sap-shell-hover); color: #fff; }

/* Profile dropdown */
.profile-dropdown { position: relative; }

.profile-trigger {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none;
    padding: 4px 8px; border-radius: var(--sap-radius);
    cursor: pointer; transition: var(--sap-transition);
    color: #fff;
}
.profile-trigger:hover { background: var(--sap-shell-hover); }
.profile-trigger img {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    object-fit: cover;
}
.profile-trigger .profile-avatar-initials {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--sap-blue);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 12px;
    border: 2px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.profile-trigger .profile-info { text-align: left; }
.profile-trigger .profile-name {
    color: #ffffff;
    font-size: 13px; font-weight: 500;
    line-height: 1.2;
}
.profile-trigger .profile-role {
    color: var(--sap-shell-item);
    font-size: 11px; line-height: 1;
}
.profile-trigger .chevron {
    color: var(--sap-shell-item);
    font-size: 10px;
    transition: transform 0.15s;
}
.profile-trigger.active .chevron { transform: rotate(180deg); }

.profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px); right: 0;
    width: 220px;
    background: var(--sap-surface);
    border: 1px solid var(--sap-border);
    border-radius: var(--sap-radius-lg);
    box-shadow: var(--sap-shadow-md);
    z-index: 1060;
    overflow: hidden;
}
.profile-menu.show { display: block; }
.profile-menu-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--sap-border-light);
    background: var(--sap-surface-2);
}
.profile-menu-header .name {
    font-size: 13px; font-weight: 600; color: var(--sap-text);
}
.profile-menu-header .email {
    font-size: 11px; color: var(--sap-text-2); margin-top: 2px;
}
.profile-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    color: var(--sap-text);
    font-size: 13px;
    transition: background 0.12s;
    text-decoration: none;
}
.profile-menu-item:hover { background: var(--sap-blue-light); color: var(--sap-blue); }
.profile-menu-item i { width: 16px; text-align: center; color: var(--sap-text-2); font-size: 13px; }
.profile-menu-item:hover i { color: var(--sap-blue); }
.profile-menu-item.logout { color: var(--sap-error); }
.profile-menu-item.logout:hover { background: var(--sap-error-bg); color: var(--sap-error); }
.profile-menu-item.logout i { color: var(--sap-error); }
.profile-menu-divider { height: 1px; background: var(--sap-border-light); margin: 4px 0; }

/* Shell logout button */
.shell-logout-btn {
    display: flex; align-items: center; gap: 6px;
    background: rgba(187,0,0,0.15);
    border: 1px solid rgba(187,0,0,0.3);
    color: #ff8080;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: var(--sap-transition);
    text-decoration: none;
    margin-left: 8px;
}
.shell-logout-btn:hover {
    background: #bb0000; color: #fff; border-color: #bb0000;
    text-decoration: none;
}

/* ==========================================================================
   Left Navigation Panel
   ========================================================================== */
.main-sidebar {
    background-color: var(--sap-surface) !important;
    border-right: 1px solid var(--sap-border) !important;
    box-shadow: none !important;
    width: var(--sap-sidebar-width) !important;
    position: fixed !important;
    top: var(--sap-shell-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1035 !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 44px;
}

/* Remove AdminLTE elevation */
.main-sidebar.elevation-4 {
    box-shadow: none !important;
}

/* Hide brand-link in sidebar (we show it in shell bar) */
.main-sidebar .brand-link {
    display: none !important;
}

/* User panel */
.sidebar .user-panel {
    padding: 16px;
    border-bottom: 1px solid var(--sap-border-light);
    margin: 0;
    background: var(--sap-surface-2);
}
.sidebar .user-panel .image img {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid var(--sap-border);
    object-fit: cover;
}
.sidebar .user-panel .info a {
    color: var(--sap-text) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.sidebar .user-panel .info a:hover { color: var(--sap-blue) !important; }

/* Sidebar scrollbar */
.main-sidebar::-webkit-scrollbar { width: 4px; }
.main-sidebar::-webkit-scrollbar-track { background: transparent; }
.main-sidebar::-webkit-scrollbar-thumb { background: var(--sap-border); border-radius: 4px; }

/* Section headers */
.nav-sidebar .nav-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sap-text-3) !important;
    padding: 20px 16px 6px !important;
    margin: 0;
    line-height: 1.4;
}

/* Nav items */
.nav-sidebar > .nav-item { margin: 1px 8px; }

.nav-sidebar .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: var(--sap-radius-md) !important;
    color: var(--sap-text-2) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: var(--sap-transition) !important;
    white-space: nowrap;
    overflow: hidden;
}
.nav-sidebar .nav-link:hover {
    background-color: var(--sap-blue-light) !important;
    color: var(--sap-blue) !important;
}
.nav-sidebar .nav-link.active {
    background-color: var(--sap-blue-light) !important;
    color: var(--sap-blue) !important;
    font-weight: 500 !important;
}
.nav-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background: var(--sap-blue);
    border-radius: 0 3px 3px 0;
    margin-left: -8px;
}
.nav-sidebar > .nav-item { position: relative; }

/* Nav icons */
.nav-sidebar .nav-icon {
    width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: var(--sap-text-3) !important;
    flex-shrink: 0 !important;
    transition: color 0.15s !important;
    margin: 0 !important;
}
.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link.active .nav-icon {
    color: var(--sap-blue) !important;
}

/* Treeview caret */
.nav-sidebar .nav-link > p { margin: 0 !important; display: flex; align-items: center; flex: 1; }
.nav-sidebar .nav-link > p .right {
    margin-left: auto !important;
    font-size: 10px !important;
    transition: transform 0.2s !important;
}
.nav-sidebar .menu-open > .nav-link > p .right { transform: rotate(-90deg) !important; }

/* Treeview submenu */
.nav-treeview {
    padding: 2px 0 4px 28px !important;
}
.nav-treeview > .nav-item { margin: 1px 8px 1px 0; }
.nav-treeview .nav-link {
    font-size: 12.5px !important;
    padding: 6px 10px !important;
    color: var(--sap-text-2) !important;
    border-radius: var(--sap-radius) !important;
}
.nav-treeview .nav-link:hover { background: var(--sap-blue-light) !important; color: var(--sap-blue) !important; }
.nav-treeview .nav-link.active { background: var(--sap-blue-light) !important; color: var(--sap-blue) !important; font-weight: 500 !important; }
.nav-treeview .nav-icon { font-size: 12px !important; color: var(--sap-text-3) !important; }
.nav-treeview .nav-link.active .nav-icon,
.nav-treeview .nav-link:hover .nav-icon { color: var(--sap-blue) !important; }

/* ==========================================================================
   Content Area
   ========================================================================== */
.content-header {
    padding: 0 0 16px 0 !important;
    background: transparent !important;
}
.content-header h1 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--sap-text) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
}
.breadcrumb-item a { color: var(--sap-blue); }
.breadcrumb-item.active { color: var(--sap-text-2); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sap-text-3); content: "/"; }

/* ==========================================================================
   Cards / Panels
   ========================================================================== */
.card {
    background-color: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius-lg) !important;
    box-shadow: var(--sap-shadow-sm) !important;
    margin-bottom: 20px !important;
}
.card-header {
    background-color: var(--sap-surface) !important;
    border-bottom: 1px solid var(--sap-border) !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
}
.card-header .card-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sap-text) !important;
    margin: 0 !important;
}
.card-body { padding: 20px !important; }
.card-footer {
    background-color: var(--sap-surface-2) !important;
    border-top: 1px solid var(--sap-border) !important;
    padding: 12px 20px !important;
}

/* Info/stat cards */
.info-box {
    background: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius-lg) !important;
    box-shadow: var(--sap-shadow-sm) !important;
    padding: 20px !important;
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}
.info-box-icon {
    width: 48px; height: 48px;
    border-radius: var(--sap-radius-md) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}
.info-box-content { flex: 1 !important; padding: 0 !important; }
.info-box-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--sap-text-2) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
}
.info-box-number {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--sap-text) !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    color: var(--sap-text) !important;
    font-size: 13px !important;
    border-collapse: collapse !important;
    width: 100% !important;
}
.table thead th {
    background-color: var(--sap-surface-2) !important;
    border-bottom: 2px solid var(--sap-border) !important;
    border-top: none !important;
    color: var(--sap-text-2) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
}
.table tbody td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--sap-border-light) !important;
    border-top: none !important;
    color: var(--sap-text) !important;
    vertical-align: middle !important;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover td { background-color: var(--sap-blue-light) !important; }
.table-bordered td, .table-bordered th { border: 1px solid var(--sap-border) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius) !important;
    color: var(--sap-text) !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--sap-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--sap-blue-light) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--sap-text-2) !important;
    font-size: 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--sap-radius) !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    color: var(--sap-text-2) !important;
    border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--sap-blue-light) !important;
    color: var(--sap-blue) !important;
    border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--sap-blue) !important;
    color: #fff !important;
    border-color: var(--sap-blue) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--sap-text-3) !important;
    background: transparent !important;
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */
.form-group { margin-bottom: 16px; }

.form-label,
label.sap-label,
label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--sap-text-2) !important;
    margin-bottom: 5px !important;
    display: block !important;
}
/* SweetAlert hides its unused checkbox/radio labels with an inline display:none,
   which the blanket rule above would otherwise override into view. */
.swal2-popup label[style*="display: none"],
.swal2-popup label[style*="display:none"] { display: none !important; }

.form-control,
.sap-input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
textarea,
select {
    background-color: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius) !important;
    color: var(--sap-text) !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    height: var(--sap-control-h) !important;
    line-height: calc(var(--sap-control-h) - 2px) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    width: 100%;
}
/* Textareas are the one control that must keep growing with their content. */
textarea,
textarea.form-control,
textarea.sap-input {
    height: auto !important;
    padding: 7px 10px !important;
    line-height: 1.5 !important;
}
.form-control:focus,
.sap-input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--sap-blue) !important;
    box-shadow: 0 0 0 2px var(--sap-blue-light) !important;
    outline: none !important;
}
.form-control::placeholder { color: var(--sap-text-3) !important; }

.input-group-text {
    background: var(--sap-surface-2) !important;
    border: 1px solid var(--sap-border) !important;
    color: var(--sap-text-2) !important;
    font-size: 13px !important;
}

/* Select2 */
.select2-container--bootstrap4 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius) !important;
    height: var(--sap-control-h) !important;
    min-height: var(--sap-control-h) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--sap-text) !important;
    font-size: 13px !important;
    line-height: calc(var(--sap-control-h) - 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: calc(var(--sap-control-h) - 2px) !important;
    top: 0 !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--sap-blue) !important;
    box-shadow: 0 0 0 2px var(--sap-blue-light) !important;
}
.select2-dropdown {
    background: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius-md) !important;
    box-shadow: var(--sap-shadow-md) !important;
}
.select2-container--default .select2-results__option {
    color: var(--sap-text) !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
}
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--sap-blue-light) !important;
    color: var(--sap-blue) !important;
}
.select2-container--default .select2-results__option--selected {
    background-color: var(--sap-blue) !important;
    color: #fff !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius) !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: var(--sap-text) !important;
    background: var(--sap-surface) !important;
}

/* ==========================================================================
   Buttons — SAP Fiori style
   ========================================================================== */

/* Base button reset */
.btn, button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: var(--sap-radius) !important;
    padding: 7px 16px !important;
    transition: var(--sap-transition) !important;
    cursor: pointer !important;
    border-width: 1px !important;
    border-style: solid !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

/* SAP Emphasized (primary action) */
.btn-primary, .btn-sap, .btn-sap-primary {
    background-color: var(--sap-blue) !important;
    border-color: var(--sap-blue) !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-sap:hover, .btn-sap-primary:hover {
    background-color: var(--sap-blue-hover) !important;
    border-color: var(--sap-blue-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(10,110,209,.25) !important;
}

/* SAP Secondary */
.btn-secondary, .btn-sap-secondary, .btn-default, .btn-outline-primary {
    background-color: var(--sap-surface) !important;
    border-color: var(--sap-border) !important;
    color: var(--sap-text) !important;
}
.btn-secondary:hover, .btn-sap-secondary:hover, .btn-default:hover, .btn-outline-primary:hover {
    background-color: var(--sap-blue-light) !important;
    border-color: var(--sap-blue) !important;
    color: var(--sap-blue) !important;
}

/* SAP Negative (destructive) */
.btn-danger, .btn-sap-danger {
    background-color: var(--sap-error) !important;
    border-color: var(--sap-error) !important;
    color: #ffffff !important;
}
.btn-danger:hover, .btn-sap-danger:hover {
    background-color: #990000 !important;
    border-color: #990000 !important;
    color: #ffffff !important;
}

/* SAP Success */
.btn-success, .btn-sap-success {
    background-color: var(--sap-success) !important;
    border-color: var(--sap-success) !important;
    color: #ffffff !important;
}
.btn-success:hover, .btn-sap-success:hover {
    background-color: #0a6330 !important;
    border-color: #0a6330 !important;
}

/* SAP Warning */
.btn-warning, .btn-sap-warning {
    background-color: var(--sap-warning) !important;
    border-color: var(--sap-warning) !important;
    color: #ffffff !important;
}

/* SAP Ghost / icon-only */
.btn-icon-only, .btn-ghost {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--sap-text-2) !important;
    padding: 5px 8px !important;
    width: 30px; height: 30px;
    justify-content: center;
}
.btn-icon-only:hover, .btn-ghost:hover {
    background: var(--sap-blue-light) !important;
    color: var(--sap-blue) !important;
    border-color: transparent !important;
}
.btn-icon-only.text-success { color: var(--sap-success) !important; }
.btn-icon-only.text-success:hover { background: var(--sap-success-bg) !important; color: var(--sap-success) !important; }
.btn-icon-only.text-info { color: var(--sap-info) !important; }
.btn-icon-only.text-info:hover { background: var(--sap-info-bg) !important; color: var(--sap-info) !important; }
.btn-icon-only.text-danger { color: var(--sap-error) !important; }
.btn-icon-only.text-danger:hover { background: var(--sap-error-bg) !important; color: var(--sap-error) !important; }
.btn-icon-only.text-warning { color: var(--sap-warning) !important; }
.btn-icon-only.text-warning:hover { background: var(--sap-warning-bg) !important; color: var(--sap-warning) !important; }

/* Button sizes */
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }
.btn-lg { padding: 10px 20px !important; font-size: 14px !important; }

/* ==========================================================================
   Badges & Tags
   ========================================================================== */
.badge {
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.badge-primary, .badge-info   { background: var(--sap-info-bg)    !important; color: var(--sap-blue)    !important; border: 1px solid rgba(10,110,209,.2)    !important; }
.badge-success                 { background: var(--sap-success-bg) !important; color: var(--sap-success) !important; border: 1px solid rgba(16,126,62,.2)     !important; }
.badge-warning                 { background: var(--sap-warning-bg) !important; color: var(--sap-warning) !important; border: 1px solid rgba(233,115,12,.2)    !important; }
.badge-danger                  { background: var(--sap-error-bg)   !important; color: var(--sap-error)   !important; border: 1px solid rgba(187,0,0,.2)       !important; }
.badge-secondary, .badge-light { background: var(--sap-surface-2)  !important; color: var(--sap-text-2)  !important; border: 1px solid var(--sap-border)      !important; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-content {
    background-color: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius-lg) !important;
    box-shadow: var(--sap-shadow-md) !important;
}
.modal-header {
    background-color: var(--sap-surface) !important;
    border-bottom: 1px solid var(--sap-border) !important;
    padding: 16px 20px !important;
}
.modal-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--sap-text) !important;
}
.modal-body { padding: 20px !important; }
.modal-footer {
    border-top: 1px solid var(--sap-border) !important;
    padding: 12px 20px !important;
    background: var(--sap-surface-2) !important;
    border-radius: 0 0 var(--sap-radius-lg) var(--sap-radius-lg) !important;
}
.close {
    color: var(--sap-text-2) !important;
    opacity: 0.7 !important;
    font-size: 20px !important;
}
.close:hover { opacity: 1 !important; color: var(--sap-text) !important; }
.modal-backdrop { background-color: rgba(0,0,0,0.4) !important; }
.modal-backdrop.show { opacity: 1 !important; }

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
    border-radius: var(--sap-radius-md) !important;
    border-width: 1px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
}
.alert-success { background: var(--sap-success-bg) !important; border-color: rgba(16,126,62,.25) !important; color: var(--sap-success) !important; }
.alert-danger   { background: var(--sap-error-bg)   !important; border-color: rgba(187,0,0,.25)   !important; color: var(--sap-error)   !important; }
.alert-warning  { background: var(--sap-warning-bg) !important; border-color: rgba(233,115,12,.25) !important; color: var(--sap-warning) !important; }
.alert-info     { background: var(--sap-info-bg)    !important; border-color: rgba(10,110,209,.25) !important; color: var(--sap-blue)    !important; }

/* ==========================================================================
   Toastr
   ========================================================================== */
.toast-success { background-color: var(--sap-success) !important; }
.toast-error   { background-color: var(--sap-error)   !important; }
.toast-warning { background-color: var(--sap-warning) !important; }
.toast-info    { background-color: var(--sap-blue)    !important; }
#toast-container > div {
    border-radius: var(--sap-radius-md) !important;
    box-shadow: var(--sap-shadow-md) !important;
    font-size: 13px !important;
}

/* ==========================================================================
   SweetAlert2
   ========================================================================== */
.swal2-popup {
    border-radius: var(--sap-radius-lg) !important;
    font-family: inherit !important;
    font-size: 14px !important;
}
.swal2-title { font-size: 18px !important; color: var(--sap-text) !important; font-weight: 600 !important; }
.swal2-html-container { color: var(--sap-text-2) !important; font-size: 13px !important; }
.swal2-confirm {
    background-color: var(--sap-blue) !important;
    border-radius: var(--sap-radius) !important;
    font-size: 13px !important;
}
.swal2-cancel {
    background-color: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    color: var(--sap-text) !important;
    border-radius: var(--sap-radius) !important;
    font-size: 13px !important;
}

/* ==========================================================================
   Dropdown menus
   ========================================================================== */
.dropdown-menu {
    background: var(--sap-surface) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: var(--sap-radius-md) !important;
    box-shadow: var(--sap-shadow-md) !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
}
.dropdown-item {
    color: var(--sap-text) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}
.dropdown-item:hover { background: var(--sap-blue-light) !important; color: var(--sap-blue) !important; }
.dropdown-divider { border-top-color: var(--sap-border-light) !important; }
.dropdown-header { color: var(--sap-text-3) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }

/* ==========================================================================
   Status / Object Markers
   ========================================================================== */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.status-dot.active    { background: var(--sap-success); }
.status-dot.inactive  { background: var(--sap-text-3); }
.status-dot.warning   { background: var(--sap-warning); }
.status-dot.error     { background: var(--sap-error); }

/* Amount / currency display */
.amount-badge {
    font-size: 13px;
    font-weight: 600;
    color: var(--sap-text);
    font-variant-numeric: tabular-nums;
}
.amount-positive { color: var(--sap-success) !important; }
.amount-negative { color: var(--sap-error) !important; }

/* ==========================================================================
   Dashboard Tiles (KPI Cards)
   ========================================================================== */
.kpi-tile {
    background: var(--sap-surface);
    border: 1px solid var(--sap-border);
    border-radius: var(--sap-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--sap-shadow-sm);
    transition: var(--sap-transition);
}
.kpi-tile:hover { box-shadow: var(--sap-shadow); border-color: var(--sap-blue); }
.kpi-tile-icon {
    width: 40px; height: 40px;
    border-radius: var(--sap-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.kpi-tile-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sap-text-2);
}
.kpi-tile-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--sap-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-tile-sub {
    font-size: 12px;
    color: var(--sap-text-2);
}

/* ==========================================================================
   Page Section Headers
   ========================================================================== */
.page-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sap-border-light);
}
.page-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sap-text);
}

/* ==========================================================================
   Object Lists (supplier icon, bank icon etc.)
   ========================================================================== */
.obj-icon {
    width: 32px; height: 32px;
    border-radius: var(--sap-radius);
    background: var(--sap-blue-light);
    color: var(--sap-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

/* ==========================================================================
   Misc Overrides
   ========================================================================== */

/* Progress bars */
.progress {
    background-color: var(--sap-border-light) !important;
    border-radius: 20px !important;
    height: 6px !important;
}
.progress-bar { border-radius: 20px !important; }
.progress-bar.bg-primary, .bg-primary { background-color: var(--sap-blue) !important; }
.progress-bar.bg-success, .bg-success { background-color: var(--sap-success) !important; }
.progress-bar.bg-danger,  .bg-danger  { background-color: var(--sap-error) !important; }
.progress-bar.bg-warning, .bg-warning { background-color: var(--sap-warning) !important; }
.progress-bar.bg-info,    .bg-info    { background-color: var(--sap-blue) !important; }

/* Text utilities */
.text-primary { color: var(--sap-blue) !important; }
.text-success { color: var(--sap-success) !important; }
.text-danger  { color: var(--sap-error) !important; }
.text-warning { color: var(--sap-warning) !important; }
.text-info    { color: var(--sap-blue) !important; }
.text-muted   { color: var(--sap-text-2) !important; }
.text-secondary { color: var(--sap-text-2) !important; }

/* Dividers */
hr { border-color: var(--sap-border-light) !important; }

/* Scrollbars (global) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sap-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sap-text-3); }

/* Overlay scrollbars */
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: var(--sap-border) !important; }

/* AdminLTE wrapper overrides */
.wrapper > .control-sidebar { display: none !important; }

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */
[data-theme="dark"] body { background-color: var(--sap-bg) !important; color: var(--sap-text) !important; }
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu { background-color: var(--sap-surface) !important; border-color: var(--sap-border) !important; }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { background-color: var(--sap-surface-2) !important; border-color: var(--sap-border) !important; }
[data-theme="dark"] .table thead th { background-color: var(--sap-surface-2) !important; }
[data-theme="dark"] .main-sidebar { background-color: var(--sap-surface) !important; border-color: var(--sap-border) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .sap-input,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background-color: var(--sap-surface-2) !important; border-color: var(--sap-border) !important; color: var(--sap-text) !important; }
[data-theme="dark"] .sidebar .user-panel { background: var(--sap-surface-2) !important; }
[data-theme="dark"] .main-footer { background-color: var(--sap-surface) !important; border-color: var(--sap-border) !important; }
[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--sap-surface) !important; border-color: var(--sap-border) !important; }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sap-text) !important; }
[data-theme="dark"] .select2-container--default .select2-results__option { background-color: var(--sap-surface) !important; color: var(--sap-text) !important; }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted { background-color: var(--sap-blue-light) !important; color: var(--sap-blue) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: var(--sap-surface-2) !important; border-color: var(--sap-border) !important; color: var(--sap-text) !important; }
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-sap-secondary { background-color: var(--sap-surface-2) !important; border-color: var(--sap-border) !important; color: var(--sap-text) !important; }

/* ==========================================================================
   Collapsed Sidebar (icon rail)
   ========================================================================== */
/* AdminLTE injects #sidebar-overlay at z-index 1037, which would sit on top of
   the sidebar (1035). Drop it below so the drawer stays clickable. */
#sidebar-overlay { z-index: 1034 !important; }

@media (min-width: 992px) {
    .main-sidebar { transition: width 0.2s ease; }

    body.sidebar-collapse .main-sidebar { width: var(--sap-sidebar-rail) !important; }
    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-footer { margin-left: var(--sap-sidebar-rail) !important; }

    /* Hovering the rail overlays the full panel without shifting content */
    body.sidebar-collapse .main-sidebar:hover,
    body.sidebar-collapse .main-sidebar.sidebar-focused {
        width: var(--sap-sidebar-width) !important;
        box-shadow: var(--sap-shadow-md) !important;
    }

    /* Rail state: centre the icons and drop the label gap. Everything is scoped
       to :not(:hover) so the hover-expanded panel keeps its normal layout. */
    body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link {
        justify-content: center !important;
        gap: 0 !important;
        padding: 9px 0 !important;
    }
    body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > p {
        display: none !important;
    }
    body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-icon {
        margin: 0 !important;
    }
    body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .user-panel {
        justify-content: center;
        padding: 16px 8px;
    }
    body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .user-panel .info {
        display: none !important;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .content-wrapper { margin-left: 0 !important; padding: 16px !important; }
    .main-footer { margin-left: 0 !important; }
    .main-sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
    .sidebar-open .main-sidebar { transform: translateX(0); }
    /* Below the breakpoint the sidebar is a drawer, never an icon rail */
    body.sidebar-collapse .main-sidebar { width: var(--sap-sidebar-width) !important; }
}