/* ============================================================
   SULTAN LOGISTICS — Brand Override CSS
   Journey Management System
   Primary: Deep Navy #1C3C6E | Accent: Amber Gold #D4890A
   ============================================================ */

/* ============================
   1. BRAND COLOR VARIABLES
   ============================ */
:root {
    /* Primary: Deep Navy Blue */
    --primary-rgb:              28, 60, 110;
    --primary-color:            rgb(28, 60, 110);
    --primary-border:           rgb(28, 60, 110);
    --primary01:                rgba(28, 60, 110, 0.1);
    --primary02:                rgba(28, 60, 110, 0.2);
    --primary03:                rgba(28, 60, 110, 0.3);
    --primary04:                rgba(28, 60, 110, 0.4);
    --primary05:                rgba(28, 60, 110, 0.5);
    --primary06:                rgba(28, 60, 110, 0.6);
    --primary07:                rgba(28, 60, 110, 0.7);
    --primary08:                rgba(28, 60, 110, 0.8);
    --primary09:                rgba(28, 60, 110, 0.9);
    --primary005:               rgba(28, 60, 110, 0.05);

    /* Secondary: Amber Gold */
    --secondary-rgb:            212, 137, 10;

    /* Body / Background */
    --body-bg-rgb:              240, 243, 250;
    --default-background:       #eaecf5;

    /* Text */
    --default-text-color:       #2c3148;
    --text-muted:               #7a87a5;

    /* Menu (sidebar) - overridden separately below */
    --menu-bg:                  #0d2347;
    --menu-prime-color:         rgba(255,255,255,0.68);
    --menu-border-color:        rgba(255,255,255,0.07);

    /* Header */
    --header-bg:                #ffffff;
    --header-prime-color:       #536485;
    --header-border-color:      #e5e9f5;

    /* Cards / Borders */
    --bootstrap-card-border:    #e5e9f5;
    --default-border:           #e5e9f5;
    --input-border:             #d8ddee;

    /* Sultan brand extras */
    --sl-navy:                  #1C3C6E;
    --sl-navy-dark:             #0d2347;
    --sl-navy-mid:              #2B5291;
    --sl-gold:                  #D4890A;
    --sl-gold-light:            #be1d2c;
    --sl-sidebar-item-active:   rgba(28,60,110,0.85);
    --sl-shadow:                0 2px 8px rgba(28,60,110,0.08);
}

/* ============================
   2. BODY / LAYOUT
   ============================ */
body {
    background-color: rgb(var(--body-bg-rgb)) !important;
    color: var(--default-text-color) !important;
}

.main-content.app-content {
    background-color: rgb(var(--body-bg-rgb)) !important;
}

.page {
    background-color: rgb(var(--body-bg-rgb)) !important;
}

/* ============================
   3. SIDEBAR — Sultan Navy
   ============================ */
.app-sidebar {
    background-color: var(--sl-navy-dark) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}

.main-sidebar-header {
    background-color: var(--sl-navy-dark) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.main-sidebar {
    background-color: var(--sl-navy-dark) !important;
}

/* Category labels */
.app-sidebar .slide__category .category-name {
    color: rgba(255,255,255,0.32) !important;
    font-size: 0.67rem !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Menu items */
.app-sidebar .side-menu__item {
    color: rgba(255,255,255,0.68) !important;
    border-radius: 7px !important;
    margin: 2px 10px !important;
    padding: 9px 14px !important;
    transition: background-color 0.16s ease, color 0.16s ease !important;
}

.app-sidebar .side-menu__icon {
    color: rgba(255,255,255,0.50) !important;
    font-size: 1.1rem !important;
    margin-right: 10px !important;
}

.app-sidebar .side-menu__label {
    font-size: 0.835rem !important;
    font-weight: 500 !important;
}

/* Hover */
.app-sidebar .side-menu__item:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

.app-sidebar .side-menu__item:hover .side-menu__icon {
    color: var(--sl-gold-light) !important;
}

.app-sidebar .side-menu__item:hover .side-menu__label {
    color: #fff !important;
}

/* Active */
.app-sidebar .slide.active > .side-menu__item {
    background-color: var(--sl-navy-mid) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(28,60,110,0.35) !important;
}

.app-sidebar .slide.active > .side-menu__item .side-menu__icon {
    color: var(--sl-gold-light) !important;
}

.app-sidebar .slide.active > .side-menu__item .side-menu__label {
    color: #fff !important;
}

/* Submenu */
.app-sidebar .slide-menu {
    background-color: rgba(0,0,0,0.22) !important;
    padding: 4px 0 !important;
}

.app-sidebar .slide-menu .side-menu__item {
    color: rgba(255,255,255,0.58) !important;
    margin: 1px 6px !important;
    padding: 7px 14px 7px 32px !important;
    font-size: 0.815rem !important;
    border-radius: 5px !important;
}

.app-sidebar .slide-menu .side-menu__item:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,0.07) !important;
}

.app-sidebar .slide-menu .slide.active .side-menu__item {
    color: var(--sl-gold-light) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

/* Chevron icon */
.app-sidebar .side-menu__angle {
    color: rgba(255,255,255,0.4) !important;
}

/* Sidebar logo area brand text */
.main-sidebar-header .header-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* ============================
   4. HEADER — White / Clean
   ============================ */
.app-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--header-border-color) !important;
    box-shadow: 0 1px 6px rgba(28,60,110,0.06) !important;
}

.app-header .header-link-icon {
    color: #536485 !important;
}

.app-header .header-link:hover .header-link-icon {
    color: var(--sl-navy) !important;
}

.header-icon-badge {
    background-color: var(--sl-gold) !important;
    color: #fff !important;
}

/* ============================
   5. CARDS
   ============================ */
.custom-card,
.card.custom-card {
    border: 1px solid #e5e9f5 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 6px rgba(28,60,110,0.06) !important;
    background-color: #ffffff !important;
}

.card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #edf0f8 !important;
    padding: 0.85rem 1.25rem !important;
}

.card-title {
    font-weight: 600 !important;
    color: var(--sl-navy) !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Stat cards with left border */
.card.border-start {
    border-left-width: 4px !important;
}

/* ============================
   6. BUTTONS
   ============================ */
.btn-primary {
    background-color: var(--sl-navy) !important;
    border-color: var(--sl-navy) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #16305a !important;
    border-color: #16305a !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--sl-navy) !important;
    border-color: var(--sl-navy) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
    background-color: var(--sl-navy) !important;
    border-color: var(--sl-navy) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--sl-gold) !important;
    border-color: var(--sl-gold) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--sl-gold) !important;
    border-color: var(--sl-gold) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary.active {
    background-color: var(--sl-gold) !important;
    color: #fff !important;
}

/* ============================
   7. STATUS BADGES
   ============================ */
.badge {
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    padding: 0.33em 0.7em !important;
    border-radius: 5px !important;
    font-size: 0.75rem !important;
}

.badge.bg-primary,
.bg-primary {
    background-color: var(--sl-navy) !important;
}

.badge.bg-secondary,
.bg-secondary {
    background-color: var(--sl-gold) !important;
}

/* Soft / subtle variants */
.bg-primary-subtle {
    background-color: rgba(28,60,110,0.1) !important;
    color: var(--sl-navy) !important;
}

.text-primary {
    color: var(--sl-navy) !important;
}

/* Journey status-specific badges */
.sl-badge-pending {
    background-color: #fff8e1 !important;
    color: #8a5e00 !important;
    border: 1px solid #ffe082 !important;
}

.sl-badge-confirmed {
    background-color: #e8f5e9 !important;
    color: #1b5e20 !important;
    border: 1px solid #a5d6a7 !important;
}

.sl-badge-ongoing {
    background-color: #e3f2fd !important;
    color: #0d47a1 !important;
    border: 1px solid #90caf9 !important;
}

.sl-badge-cancelled,
.sl-badge-terminated {
    background-color: #fce4ec !important;
    color: #880e4f !important;
    border: 1px solid #f48fb1 !important;
}

.sl-badge-completed {
    background-color: #e8f5e9 !important;
    color: #1b5e20 !important;
    border: 1px solid #a5d6a7 !important;
}

.sl-badge-underprocess {
    background-color: #fff3e0 !important;
    color: #bf360c !important;
    border: 1px solid #ffcc80 !important;
}

.sl-badge-rejected {
    background-color: #fce4ec !important;
    color: #880e4f !important;
    border: 1px solid #f48fb1 !important;
}

/* ============================
   8. TABLES
   ============================ */
.table {
    font-size: 0.825rem !important;
}

.table thead th {
    background-color: #f2f5fb !important;
    color: var(--sl-navy) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #dce2f0 !important;
    white-space: nowrap;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.8rem !important;
}

.table tbody td {
    padding: 0.55rem 0.8rem !important;
    vertical-align: middle !important;
    border-color: #eef1f9 !important;
    color: #3a4263 !important;
}

.table-hover tbody tr:hover {
    background-color: #f7f9fe !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfe !important;
}

/* ============================
   9. FORMS
   ============================ */
.form-control:focus,
.form-select:focus {
    border-color: rgba(28,60,110,0.45) !important;
    box-shadow: 0 0 0 3px rgba(28,60,110,0.1) !important;
}

.form-label {
    font-weight: 500 !important;
    color: #3a4878 !important;
    font-size: 0.825rem !important;
    margin-bottom: 0.3rem !important;
}

/* ============================
   10. QUICK ACTION BUTTONS (Dashboard)
   ============================ */
.sl-quick-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.1rem 0.5rem !important;
    border-radius: 10px !important;
    background-color: #f5f8ff !important;
    border: 1px solid #dce5f5 !important;
    text-decoration: none !important;
    color: var(--sl-navy) !important;
    transition: all 0.18s ease !important;
    text-align: center !important;
    min-height: 84px !important;
}

.sl-quick-action:hover {
    background-color: var(--sl-navy) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(28,60,110,0.22) !important;
    text-decoration: none !important;
}

.sl-quick-action:hover i {
    color: var(--sl-gold-light) !important;
}

.sl-quick-action:hover .sl-qa-label {
    color: #fff !important;
}

.sl-quick-action i {
    font-size: 1.55rem !important;
    margin-bottom: 0.45rem !important;
    color: var(--sl-navy) !important;
    display: block !important;
    transition: color 0.16s ease !important;
}

.sl-qa-label {
    font-size: 0.77rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--sl-navy) !important;
    transition: color 0.16s ease !important;
}

/* ============================
   11. PAGE HEADER
   ============================ */
.page-header-breadcrumb h3,
.page-header-breadcrumb h4,
.page-header-breadcrumb h5 {
    color: var(--sl-navy) !important;
    font-weight: 700 !important;
}

.page-header-breadcrumb .text-muted {
    color: #7a87a5 !important;
}

/* ============================
   12. FOOTER
   ============================ */
footer.footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e5e9f5 !important;
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
}

/* ============================
   13. SCROLLBAR
   ============================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: #f0f3fa;
}
::-webkit-scrollbar-thumb {
    background: rgba(28,60,110,0.22);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(28,60,110,0.42);
}

/* ============================
   14. APPROVAL ACTION BUTTONS
   ============================ */
.btn-approve {
    background-color: #1a9e68 !important;
    border-color: #1a9e68 !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    padding: 0.25rem 0.8rem !important;
    border-radius: 5px !important;
}

.btn-approve:hover {
    background-color: #158054 !important;
}

.btn-reject {
    background-color: #e05533 !important;
    border-color: #e05533 !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    padding: 0.25rem 0.8rem !important;
    border-radius: 5px !important;
}

.btn-reject:hover {
    background-color: #b33a20 !important;
}

/* ============================
   15. DASHBOARD STAT ICON BOXES
   ============================ */
.sl-stat-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
}

.sl-stat-icon.primary   { background-color: rgba(28,60,110,0.1) !important; color: var(--sl-navy) !important; }
.sl-stat-icon.secondary { background-color: rgba(212,137,10,0.12) !important; color: var(--sl-gold) !important; }
.sl-stat-icon.success   { background-color: rgba(26,158,104,0.1) !important; color: #1a9e68 !important; }
.sl-stat-icon.warning   { background-color: rgba(245,184,73,0.12) !important; color: #c8851a !important; }
.sl-stat-icon.danger    { background-color: rgba(224,85,51,0.1) !important; color: #e05533 !important; }
.sl-stat-icon.info      { background-color: rgba(73,182,245,0.1) !important; color: #1a78c2 !important; }

/* ============================
   16. ALERT / INFO BANNERS
   ============================ */
.alert-sultan {
    background-color: rgba(28,60,110,0.06) !important;
    border-left: 4px solid var(--sl-navy) !important;
    color: var(--sl-navy) !important;
    border-radius: 7px !important;
}

/* ============================
   17. INPUT GROUPS
   ============================ */
.input-group .btn {
    border-color: var(--input-border) !important;
}

/* ============================
   18. MOBILE RESPONSIVE
   ============================ */
@media (max-width: 767px) {
    .sl-quick-action {
        min-height: 72px !important;
        padding: 0.8rem 0.3rem !important;
    }

    .sl-quick-action i {
        font-size: 1.25rem !important;
    }

    .sl-qa-label {
        font-size: 0.7rem !important;
    }

    .card-body {
        padding: 0.9rem !important;
    }

    .table thead th,
    .table tbody td {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.775rem !important;
    }

    .btn-sm {
        padding: 0.28rem 0.55rem !important;
        font-size: 0.775rem !important;
    }

    .page-header-breadcrumb {
        padding-top: 0.5rem !important;
    }
}

/* ============================
   19. PRINT OVERRIDES
   ============================ */
@media print {
    .app-sidebar,
    .app-header,
    .btn,
    footer {
        display: none !important;
    }

    .main-content.app-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ============================
   20. SIDEBAR BRAND NAME OVERRIDE
   ============================ */
.sl-brand-name {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.55) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* ============================
   21. BTN-DEFAULT (fallback for legacy code)
   ============================ */
.btn-default {
    background-color: #e8ecf5 !important;
    border-color: #d0d6e8 !important;
    color: #3a4878 !important;
}
.btn-default:hover {
    background-color: #d4daef !important;
}

/* ============================
   22. PAGINATION
   ============================ */
.page-link {
    color: var(--sl-navy) !important;
    border-color: #dce2f0 !important;
}
.page-link:hover {
    background-color: rgba(28,60,110,0.07) !important;
    color: var(--sl-navy) !important;
}
.page-item.active .page-link {
    background-color: var(--sl-navy) !important;
    border-color: var(--sl-navy) !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    color: #adb5c9 !important;
}

/* ============================
   23. BREADCRUMB
   ============================ */
.breadcrumb-item a {
    color: var(--sl-navy) !important;
}
.breadcrumb-item.active {
    color: #7a87a5 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #aab3c8 !important;
}

/* ============================
   24. BADGE INFO / WARNING REFINEMENT
   ============================ */
/* Keep semantic colors meaningful, just clean up */
.badge.bg-info    { background-color: #1a78c2 !important; }
.badge.bg-warning { background-color: #c8851a !important; color: #fff !important; }
.badge.bg-success { background-color: #1a9e68 !important; }
.badge.bg-danger  { background-color: #e05533 !important; }
.badge.bg-dark    { background-color: #2c3148 !important; }

/* ============================
   25. STATUS FILTER BUTTON ACTIVE STATES
   ============================ */
.btn-outline-info.active    { background-color: #1a78c2 !important; border-color: #1a78c2 !important; color: #fff !important; }
.btn-outline-warning.active { background-color: #c8851a !important; border-color: #c8851a !important; color: #fff !important; }
.btn-outline-success.active { background-color: #1a9e68 !important; border-color: #1a9e68 !important; color: #fff !important; }
.btn-outline-danger.active  { background-color: #e05533 !important; border-color: #e05533 !important; color: #fff !important; }
.btn-outline-dark.active    { background-color: #2c3148 !important; border-color: #2c3148 !important; color: #fff !important; }

/* ============================
   26. CARD HEADER FLEX (for title + "View All" button)
   ============================ */
.card-header {
    display: flex !important;
    align-items: center !important;
}
.card-header .card-title {
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
}

/* ============================
   27. TABLE EMPTY STATE
   ============================ */
td.text-center.text-muted,
.text-center.text-muted {
    color: #9aa3be !important;
}

/* ============================
   28. BOX-REQUEST CARD IMPROVEMENTS
   ============================ */
.card.custom-card + .card.custom-card {
    margin-top: 0 !important;
}

/* Row highlights in request cards */
.table tr.bg-light > td {
    background-color: #f5f8ff !important;
}
.table tr.bg-danger.bg-opacity-10 > td {
    background-color: rgba(224,85,51,0.06) !important;
}

/* ============================
   29. DROPDOWN MENUS
   ============================ */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(28,60,110,0.07) !important;
    color: var(--sl-navy) !important;
}
.dropdown-item.active {
    background-color: var(--sl-navy) !important;
    color: #fff !important;
}

/* ============================
   30. LOADER / SPINNER
   ============================ */
.loader-wrapper .loader-content {
    border-top-color: var(--sl-navy) !important;
}