/* ============================================================
   SPPD - Travel Management System Dashboard
   Color theme matched to INTECS App Portal
   ============================================================ */

/* === CSS VARIABLES — mirror of portal/resources/views/layouts/app.blade.php === */
:root {
    /* Brand */
    --p-primary:       #3b82f6;
    --p-primary-dark:  #2563eb;
    --p-primary-bg:    #eff6ff;
    --p-primary-muted: #93c5fd;
    --p-primary-glow:  rgba(59,130,246,.5);

    /* Sidebar */
    --p-sidebar-bg:    #0b1120;
    --p-navy:          #0f172a;
    --p-navy-mid:      #1e3a5f;

    /* Status */
    --p-success:       #16a34a;
    --p-success-bg:    #dcfce7;
    --p-danger:        #dc2626;
    --p-danger-bg:     #fee2e2;
    --p-warning:       #d97706;
    --p-warning-bg:    #fef3c7;

    /* Neutral */
    --p-text:          #0f172a;
    --p-text-sec:      #475569;
    --p-text-muted:    #94a3b8;
    --p-border:        #e2e8f0;
    --p-surface:       #f8fafc;
    --p-bg:            #f1f5f9;

    /* Cards */
    --p-card-radius:   14px;
    --p-card-shadow:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --p-card-shadow-hover: 0 8px 24px rgba(0,0,0,.1);
}

/* ============================================================
   SIDEBAR — Portal style: #0b1120 + radial gradient
   ============================================================ */

.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--p-sidebar-bg) !important;
}

.fi-sidebar {
    background-image: radial-gradient(ellipse 200% 120% at 50% 0%, rgba(30,58,95,.55) 0%, transparent 65%) !important;
}

@media (min-width: 1024px) {
    .fi-sidebar {
        background-color: var(--p-sidebar-bg) !important;
        background-image: radial-gradient(ellipse 200% 120% at 50% 0%, rgba(30,58,95,.55) 0%, transparent 65%) !important;
    }
}

.fi-sidebar-header {
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    box-shadow: none !important;
}

/* Collapse/expand icon button */
.fi-sidebar-header .fi-icon-btn {
    color: #4a7fa8 !important;
}

.fi-sidebar-header .fi-icon-btn:hover {
    background-color: rgba(59,130,246,.1) !important;
    color: #93c5fd !important;
}

/* Nav scroll area */
.fi-sidebar-nav {
    background-color: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.08) transparent;
}

.fi-sidebar-nav::-webkit-scrollbar { width: 3px; }
.fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.08);
    border-radius: 10px;
}

/* Section / group labels */
.fi-sidebar-group-label {
    font-size: .59rem !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

/* Separator line after group label */
.fi-sidebar-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.06);
    margin-left: .5rem;
    display: inline-block;
    vertical-align: middle;
}

/* Default nav item — target button + all children */
.fi-sidebar-item-button,
.fi-sidebar-item-button *,
.fi-sidebar-item-label,
.fi-sidebar-item-button .fi-sidebar-item-label {
    color: rgba(255,255,255,.82) !important;
    border-radius: 9px !important;
    font-size: .84rem !important;
    transition: all .18s !important;
}

/* Hover */
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:hover *,
.fi-sidebar-item-button:hover .fi-sidebar-item-label {
    background-color: rgba(59,130,246,.1) !important;
    color: #ffffff !important;
}

/* Active — blue highlight + left bar + glow (matches portal exactly) */
.fi-sidebar-item-button.fi-active,
.fi-active > .fi-sidebar-item-button {
    background-color: rgba(59,130,246,.14) !important;
    color: #93c5fd !important;
    font-weight: 600 !important;
    /* left accent bar via box-shadow (no ::before on button easily) */
    box-shadow: inset 3px 0 0 #3b82f6, 0 0 8px rgba(59,130,246,.2) !important;
}

/* Icon */
.fi-sidebar-item-icon {
    color: inherit !important;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(59,130,246,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
    transition: all .18s;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    background: rgba(59,130,246,.15) !important;
    color: #93c5fd !important;
}

.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon,
.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    background: rgba(59,130,246,.22) !important;
    color: #60a5fa !important;
}

/* Badge in sidebar */
.fi-sidebar-item-badge {
    background-color: #3b82f6 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* ============================================================
   TOPBAR — portal: white + border
   ============================================================ */

.fi-topbar nav {
    background-color: #fff !important;
    border-bottom: 1px solid var(--p-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

/* ============================================================
   MAIN CONTENT BACKGROUND — portal: #f1f5f9
   ============================================================ */

.fi-body,
.fi-layout,
.fi-simple-layout {
    background-color: var(--p-bg) !important;
}

.fi-main,
.fi-dashboard-page {
    background-color: var(--p-bg) !important;
}

/* ============================================================
   ACCOUNT WIDGET — Welcome Banner
   Uses portal navy tones + blue accents
   ============================================================ */

/* Strip ALL Filament section/card wrappers inside account widget */
.fi-account-widget,
.fi-account-widget .fi-section,
.fi-account-widget .fi-section-header,
.fi-account-widget .fi-section-content-ctn,
.fi-account-widget .fi-section-content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    gap: 0 !important;
}

/* Remove the widget wrapper card itself */
.fi-account-widget > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Banner card */
.sppd-welcome-card {
    background-color: var(--p-sidebar-bg);
    background-image: radial-gradient(ellipse 200% 140% at 60% -10%, rgba(30,58,95,.75) 0%, transparent 70%),
                      linear-gradient(160deg, #0b1120 0%, #0f172a 55%, #1e3a5f 100%);
    border-radius: 16px;
    padding: 1.75rem 2.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    min-height: 110px;
}

/* Decorative blobs */
.sppd-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.sppd-deco-1 {
    width: 300px; height: 300px;
    background: rgba(59,130,246,.06);
    top: -110px; right: -50px;
}

.sppd-deco-2 {
    width: 160px; height: 160px;
    background: rgba(255,255,255,.03);
    bottom: -70px; left: 45%;
}

.sppd-deco-plane {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    font-size: 6rem;
    line-height: 1;
    opacity: 0.035;
    pointer-events: none;
    user-select: none;
}

/* Inner row */
.sppd-welcome-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Left: user info */
.sppd-user-section {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.sppd-avatar-wrapper { flex-shrink: 0; }

/* Blue ring on avatar — matches portal user-avatar gradient */
.sppd-avatar-wrapper .fi-avatar,
.sppd-avatar-wrapper span[class*="rounded-full"],
.sppd-avatar-wrapper img[class*="rounded-full"] {
    border: 2.5px solid rgba(59,130,246,.55) !important;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(59,130,246,.35) !important;
}

.sppd-user-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sppd-greeting {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    font-weight: 500;
    letter-spacing: .02em;
}

.sppd-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.sppd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .3rem;
    align-items: center;
}

.sppd-badge {
    font-size: .68rem;
    font-weight: 600;
    padding: .18rem .6rem;
    border-radius: 20px;
    letter-spacing: .025em;
    white-space: nowrap;
}

/* Primary badge — blue (matches portal active link) */
.sppd-badge-role {
    background: rgba(59,130,246,.2);
    border: 1px solid rgba(59,130,246,.4);
    color: #93c5fd;
}

.sppd-badge-dept {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.65);
}

.sppd-location {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .71rem;
    color: rgba(255,255,255,.35);
    margin-top: .15rem;
}

/* Right: date + logout */
.sppd-right-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    flex-shrink: 0;
}

.sppd-date-box { text-align: right; line-height: 1.35; }

.sppd-date-day {
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,.32);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.sppd-date-full {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
}

/* Sign out button — mirrors portal .btn-logout style */
.sppd-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem 1rem;
    background: rgba(239,68,68,.07);
    color: rgba(252,165,165,.75);
    border: 1px solid rgba(239,68,68,.14);
    border-radius: 8px;
    font-size: .77rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.sppd-logout-btn:hover {
    background: rgba(239,68,68,.16);
    color: #fca5a5;
    border-color: rgba(239,68,68,.28);
}

/* Responsive */
@media (max-width: 640px) {
    .sppd-welcome-inner { flex-direction: column; align-items: flex-start; }
    .sppd-right-section { align-items: flex-start; width: 100%; flex-direction: row; justify-content: space-between; }
    .sppd-deco-1 { display: none; }
    .sppd-welcome-card { padding: 1.25rem 1.5rem; }
}

/* ============================================================
   STATS OVERVIEW WIDGET
   ============================================================ */

/* Container for all stat cards */
.fi-wi-stats-overview {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 1rem !important;
}

.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    border-radius: var(--p-card-radius) !important;
    border: 1px solid #d1d9e6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
    position: relative;
    overflow: hidden;
    min-height: 110px;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* Top colour stripe — default gray */
.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--p-card-radius) var(--p-card-radius) 0 0;
    background: var(--p-border);
}

/* Danger */
.fi-color-danger .fi-wi-stats-overview-stat::before,
.fi-wi-stats-overview-stat.fi-color-danger::before {
    background: linear-gradient(90deg, #dc2626, #ef4444) !important;
}

/* Success */
.fi-color-success .fi-wi-stats-overview-stat::before,
.fi-wi-stats-overview-stat.fi-color-success::before {
    background: linear-gradient(90deg, #16a34a, #22c55e) !important;
}

/* Warning */
.fi-color-warning .fi-wi-stats-overview-stat::before,
.fi-wi-stats-overview-stat.fi-color-warning::before {
    background: linear-gradient(90deg, #d97706, #f59e0b) !important;
}

/* Primary (blue) */
.fi-color-primary .fi-wi-stats-overview-stat::before,
.fi-wi-stats-overview-stat.fi-color-primary::before {
    background: linear-gradient(90deg, #3b82f6, #6366f1) !important;
}

/* Info */
.fi-color-info .fi-wi-stats-overview-stat::before,
.fi-wi-stats-overview-stat.fi-color-info::before {
    background: linear-gradient(90deg, #3b82f6, #0ea5e9) !important;
}

/* Stat Label */
.fi-wi-stats-overview-stat-label {
    color: var(--p-text-sec) !important;
    font-size: .73rem !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

/* Stat Value */
.fi-wi-stats-overview-stat-value {
    color: var(--p-text) !important;
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
    margin-top: .5rem !important;
}

/* Stat Description */
.fi-wi-stats-overview-stat-description {
    color: var(--p-text-muted) !important;
    font-size: .75rem !important;
    margin-top: .45rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .25rem !important;
}

/* ============================================================
   TABLE WIDGET
   ============================================================ */

.fi-wi-tbl .fi-section-header-heading,
.fi-wi-tbl-heading {
    color: var(--p-text) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.fi-ta-header-cell-label {
    color: var(--p-text-sec) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.fi-ta-header-cell {
    background-color: var(--p-surface) !important;
    border-bottom: 2px solid var(--p-border) !important;
}

.fi-ta-row {
    border-color: var(--p-border-light, #f1f5f9) !important;
    transition: background-color .13s !important;
}

.fi-ta-row:hover td {
    background-color: var(--p-surface) !important;
}

/* ============================================================
   GENERAL SECTIONS / CARDS
   ============================================================ */

.fi-section {
    border-radius: var(--p-card-radius) !important;
    border: 1px solid var(--p-border) !important;
    box-shadow: var(--p-card-shadow) !important;
    background: #fff !important;
}

.fi-section-header-heading {
    color: var(--p-text) !important;
    font-weight: 700 !important;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */

.fi-header-heading {
    color: var(--p-text) !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    letter-spacing: -.01em !important;
}

.fi-breadcrumbs-item {
    color: var(--p-text-muted) !important;
    font-size: .8rem !important;
}

/* ============================================================
   BUTTONS (primary → blue)
   ============================================================ */

.fi-btn.fi-btn-color-primary {
    background: var(--p-primary) !important;
    border-color: var(--p-primary) !important;
    box-shadow: 0 2px 8px rgba(59,130,246,.3) !important;
    transition: all .2s ease !important;
}

.fi-btn.fi-btn-color-primary:hover {
    background: var(--p-primary-dark) !important;
    border-color: var(--p-primary-dark) !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.4) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   BADGES
   ============================================================ */

.fi-badge.fi-color-success {
    background-color: var(--p-success-bg) !important;
    color: #065f46 !important;
}

.fi-badge.fi-color-danger {
    background-color: var(--p-danger-bg) !important;
    color: #991b1b !important;
}

.fi-badge.fi-color-warning {
    background-color: var(--p-warning-bg) !important;
    color: #92400e !important;
}

.fi-badge.fi-color-info {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}

.fi-badge.fi-color-primary {
    background-color: var(--p-primary-bg) !important;
    color: #1d4ed8 !important;
}

/* ============================================================
   MODAL
   ============================================================ */

.fi-modal-content { border-radius: 16px !important; }
.fi-modal-header-heading { font-weight: 700 !important; color: var(--p-text) !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }