/* =========================================================
   FormPO Custom Theme
   Primary: #cc3399 | Accent: White & Black
   ========================================================= */

/* --- Font & Global --- */
*, body {
    font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    line-height: 1.4 !important;
}

/* =========================================================
   SIDEBAR — Dark Background
   ========================================================= */
nav.fi-sidebar,
.fi-sidebar {
    background-color: #111827 !important;
    border-right-color: #1f2937 !important;
}

.fi-sidebar-header {
    background-color: #0f172a !important;
    border-bottom: 1px solid #1e2d47 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) !important;
    padding: 0.6rem 1rem !important;
}

.fi-logo {
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.3px !important;
    background: linear-gradient(135deg, #cc3399, #ff77cc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.fi-sidebar-nav {
    background-color: #111827 !important;
    padding: 0.4rem 0.5rem !important;
}

/* Nav Group Labels */
.fi-sidebar-group > div > span,
.fi-sidebar-group-label {
    color: #4b5563 !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 0.4rem 0.5rem 0.2rem !important;
}

/* Nav Item */
.fi-sidebar-item-button {
    color: #9ca3af !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    font-weight: 500 !important;
    padding: 0.38rem 0.65rem !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(204, 51, 153, 0.12) !important;
    color: #fff !important;
}

.fi-sidebar-item-icon {
    color: #6b7280 !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #cc3399 !important;
}

.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(135deg, #cc3399 0%, #d93fa5 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(204, 51, 153, 0.35) !important;
}

.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #fff !important;
}

.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #fff !important;
    font-weight: 600 !important;
}

.fi-sidebar-item-label {
    color: #9ca3af !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    transition: color 0.15s !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #fff !important;
}

.fi-sidebar-close-overlay-btn,
.fi-icon-btn {
    color: #6b7280 !important;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.fi-topbar {
    background-color: #fff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}

.fi-topbar-breadcrumbs ol li a,
.fi-topbar-breadcrumbs ol li span {
    color: #64748b !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

.fi-topbar-breadcrumbs ol li:last-child span {
    color: #111 !important;
    font-weight: 600 !important;
}

.fi-topbar-open-sidebar-btn {
    color: #cc3399 !important;
}

/* =========================================================
   MAIN CONTENT AREA
   ========================================================= */
.fi-main-ctn {
    background-color: #f8fafc !important;
}

.fi-main {
    background-color: #f8fafc !important;
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
}

/* Page header */
.fi-header {
    margin-bottom: 0.75rem !important;
}

.fi-header-heading {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
}

.fi-header-subheading {
    color: #64748b !important;
    font-size: 0.8rem !important;
}

/* Page content spacing */
.fi-page-content {
    gap: 0.875rem !important;
}

/* =========================================================
   SECTIONS & CARDS
   ========================================================= */
.fi-section {
    background-color: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
}

.fi-section-header {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 0.6rem 1rem !important;
}

.fi-section-header-heading {
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    color: #1e293b !important;
}

.fi-section-content {
    padding: 0.875rem 1rem !important;
}

.fi-section-content-ctn {
    gap: 0.875rem !important;
}

/* Form field gap */
.fi-fo-component-ctn {
    gap: 1rem !important;
}

/* =========================================================
   STATS WIDGETS
   ========================================================= */
.fi-wi-stats-overview-stat {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    padding: 1rem !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(204, 51, 153, 0.1) !important;
    border-color: #e9b3d5 !important;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-top: 1px !important;
}

/* =========================================================
   TABLES
   ========================================================= */
.fi-ta-header-cell {
    background-color: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 0.45rem 0.75rem !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.fi-ta-row {
    transition: background 0.1s ease !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.fi-ta-row:hover td {
    background-color: #fdf4fb !important;
}

.fi-ta-cell {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.83rem !important;
    color: #1e293b !important;
    vertical-align: middle !important;
}

.fi-ta-text {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Table toolbar (search + filters) */
.fi-ta-header {
    padding: 0.6rem 0.875rem !important;
}

/* Search bar */
.fi-ta-search-field input {
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    font-size: 0.83rem !important;
    padding: 0.35rem 0.6rem !important;
}

.fi-ta-search-field input:focus {
    border-color: #cc3399 !important;
    box-shadow: 0 0 0 3px rgba(204, 51, 153, 0.1) !important;
}

/* Pagination */
.fi-ta-footer {
    padding: 0.5rem 0.875rem !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.fi-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: all 0.15s ease !important;
    padding: 0.38rem 0.875rem !important;
}

.fi-btn-size-sm {
    padding: 0.28rem 0.625rem !important;
    font-size: 0.75rem !important;
}

.fi-btn-size-xs {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.72rem !important;
}

.fi-btn.fi-btn-color-primary,
.fi-btn[class*="primary"] {
    background: linear-gradient(135deg, #cc3399 0%, #d93fa5 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(204, 51, 153, 0.3) !important;
}

.fi-btn.fi-btn-color-primary:hover,
.fi-btn[class*="primary"]:hover {
    background: linear-gradient(135deg, #b52d88 0%, #cc3399 100%) !important;
    box-shadow: 0 3px 12px rgba(204, 51, 153, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* =========================================================
   FORM INPUTS
   ========================================================= */
.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea,
[data-field-wrapper] input,
[data-field-wrapper] select,
[data-field-wrapper] textarea {
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    font-size: 0.85rem !important;
    color: #1e293b !important;
    padding: 0.38rem 0.625rem !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.fi-input-wrp input:focus,
.fi-input-wrp select:focus,
.fi-input-wrp textarea:focus {
    border-color: #cc3399 !important;
    box-shadow: 0 0 0 3px rgba(204, 51, 153, 0.12) !important;
    outline: none !important;
}

/* Form labels */
.fi-fo-field-wrp > div > label,
label.fi-fo-field-wrp-label {
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    color: #374151 !important;
    margin-bottom: 0.2rem !important;
}

/* Helper text */
.fi-fo-field-wrp-helper-text {
    font-size: 0.72rem !important;
    margin-top: 0.2rem !important;
}

/* Toggle */
.fi-fo-toggle-wrapper {
    accent-color: #cc3399 !important;
}

/* =========================================================
   BADGES
   ========================================================= */
.fi-badge {
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.68rem !important;
    padding: 0.12rem 0.5rem !important;
    letter-spacing: 0.2px !important;
}

/* =========================================================
   REPEATER
   ========================================================= */
.fi-fo-repeater-item {
    border: 1.5px solid #f0e6f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: border-color 0.15s !important;
}

.fi-fo-repeater-item:hover {
    border-color: rgba(204, 51, 153, 0.3) !important;
}

/* =========================================================
   DROPDOWN MENUS
   ========================================================= */
.fi-dropdown-panel {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
    padding: 0.25rem !important;
}

.fi-dropdown-list-item-btn {
    border-radius: 7px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 0.38rem 0.625rem !important;
}

.fi-dropdown-list-item-btn:hover {
    background-color: #fdf4fb !important;
    color: #cc3399 !important;
}

/* =========================================================
   MODALS
   ========================================================= */
.fi-modal-window {
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.16) !important;
}

.fi-modal-header {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 0.7rem 1.25rem !important;
}

.fi-modal-content {
    padding: 0.875rem 1.25rem !important;
}

.fi-modal-footer {
    padding: 0.6rem 1.25rem !important;
    border-top: 1px solid #f1f5f9 !important;
}

.fi-modal-heading {
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
}

/* =========================================================
   NOTIFICATIONS / TOAST
   ========================================================= */
.fi-no-notification {
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
    border: 1px solid #f0f0f0 !important;
    padding: 0.75rem 1rem !important;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
.fi-simple-layout {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a0a14 60%, #0d0d0d 100%) !important;
    position: relative !important;
}

.fi-simple-layout::before {
    content: '' !important;
    position: absolute !important;
    top: 20% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(204,51,153,0.15) 0%, transparent 70%) !important;
    pointer-events: none !important;
    border-radius: 50% !important;
}

.fi-simple-main {
    border-radius: 18px !important;
    box-shadow: 0 20px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(204,51,153,0.15) !important;
    background: #fff !important;
    overflow: hidden !important;
}

.fi-simple-header {
    padding-bottom: 0.4rem !important;
}

.fi-simple-header .fi-logo {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #cc3399, #ff77cc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 0.2rem !important;
}

.fi-simple-header-heading {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

.fi-simple-header-subheading {
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.fi-pagination {
    padding: 0.4rem 0 !important;
}

.fi-pagination button[aria-current="page"],
.fi-pagination .fi-active {
    background-color: #cc3399 !important;
    border-color: #cc3399 !important;
    color: #fff !important;
    border-radius: 7px !important;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: rgba(204,51,153,0.35); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #cc3399; }

/* =========================================================
   MOBILE OVERLAY (sidebar)
   ========================================================= */
.fi-sidebar-overlay {
    background-color: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(3px) !important;
}

/* =========================================================
   WIDGET TABLE / CHART
   ========================================================= */
.fi-wi-table .fi-section,
.fi-wi-chart .fi-section {
    border-radius: 12px !important;
}

/* =========================================================
   ACCOUNT WIDGET
   ========================================================= */
.fi-account-name {
    font-weight: 700 !important;
    color: #fff !important;
    font-size: 0.83rem !important;
}

.fi-account-email {
    color: #6b7280 !important;
    font-size: 0.73rem !important;
}

.fi-user-avatar {
    background: linear-gradient(135deg, #cc3399, #e040a8) !important;
}

/* =========================================================
   RESPONSIVE — MOBILE (max 768px)
   ========================================================= */
@media (max-width: 768px) {
    .fi-main {
        padding: 0.75rem !important;
    }

    .fi-header-heading {
        font-size: 1.05rem !important;
    }

    .fi-wi-stats-overview-stat {
        padding: 1rem !important;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.15rem !important;
    }

    /* Tables → card layout on mobile */
    .fi-ta-ctn {
        overflow-x: visible !important;
    }

    .fi-ta-table {
        display: block !important;
    }

    .fi-ta-table thead {
        display: none !important;
    }

    .fi-ta-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem !important;
        padding: 0.5rem !important;
    }

    .fi-ta-row {
        display: block !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .fi-ta-row:hover td {
        background-color: transparent !important;
    }

    .fi-ta-cell {
        display: flex !important;
        align-items: stretch !important;
        padding: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        vertical-align: unset !important;
        font-size: 0.8rem !important;
    }

    .fi-ta-cell:last-child {
        border-bottom: none !important;
    }

    .fi-ta-cell[data-label]:not([data-label=""])::before {
        content: attr(data-label) !important;
        min-width: 36% !important;
        max-width: 36% !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6rem !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        background: #f8fafc !important;
        border-right: 1px solid #e8edf3 !important;
        display: flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
    }

    .fi-ta-col-wrp {
        padding: 0.25rem 0.5rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
    }

    .fi-ta-cell:not([data-label]) .fi-ta-col-wrp,
    .fi-ta-cell[data-label=""] .fi-ta-col-wrp {
        padding: 0.25rem 0.5rem !important;
        justify-content: flex-end !important;
    }

    .fi-section-content {
        padding: 0.625rem 0.75rem !important;
    }

    .fi-section-header {
        padding: 0.5rem 0.75rem !important;
    }

    .fi-modal-header {
        padding: 0.6rem 1rem !important;
    }

    .fi-modal-content {
        padding: 0.75rem 1rem !important;
    }

    .fi-modal-footer {
        padding: 0.5rem 1rem !important;
    }

    /* Inputs: no zoom on iOS (16px min) */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Login page full screen on mobile */
    .fi-simple-main {
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 1.5rem 1.25rem !important;
    }

    .fi-simple-main-ctn {
        align-items: stretch !important;
    }
}

/* =========================================================
   VIEW-ORDER CUSTOM TABLES — MOBILE CARD LAYOUT
   Uses .vo-table class on custom blade tables (view-order)
   data-label attributes written directly in blade HTML
   ========================================================= */
@media (max-width: 639px) {
    .vo-table {
        display: block !important;
        width: 100% !important;
    }

    .vo-table thead {
        display: none !important;
    }

    .vo-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem !important;
        padding: 0.35rem 0 !important;
    }

    .vo-table tbody tr {
        display: block !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }

    .vo-table tbody td {
        display: flex !important;
        align-items: stretch !important;
        padding: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 0.8rem !important;
        color: #1e293b !important;
    }

    .vo-table tbody td:last-child {
        border-bottom: none !important;
    }

    .vo-table tbody td[data-label]::before {
        content: attr(data-label) !important;
        min-width: 36% !important;
        max-width: 36% !important;
        padding: 0.28rem 0.5rem !important;
        font-size: 0.6rem !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        background: #f8fafc !important;
        border-right: 1px solid #e8edf3 !important;
        display: flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
        flex-shrink: 0 !important;
    }

    .vo-table tbody td > div {
        padding: 0.28rem 0.5rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        align-self: center !important;
    }

    .vo-table tfoot {
        display: block !important;
    }

    .vo-table tfoot tr {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.35rem 0.6rem !important;
        font-size: 0.8rem !important;
        border-top: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
    }

    .vo-table tfoot td {
        font-size: 0.8rem !important;
        padding: 0.25rem 0 !important;
    }

    .vo-table tfoot td:first-child {
        flex: 1 !important;
        text-align: left !important;
    }

    .vo-table tfoot td:last-child {
        flex-shrink: 0 !important;
        text-align: right !important;
    }

    .vo-table thead th.vo-hide-mobile,
    .vo-table tbody td.vo-hide-mobile {
        display: none !important;
    }
}

/* =========================================================
   RESPONSIVE — TABLET (769px - 1024px)
   ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    .fi-main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .fi-header-heading {
        font-size: 1.15rem !important;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.25rem !important;
    }
}