/* ============================================================
   Filament v5 Custom Theme (WITHOUT replacing default theme)
   File: public/css/filament-theme.css
   ============================================================ */


/* ============================================================
   0) GLOBAL VARIABLES + ANIMATION DEFAULTS
   ============================================================ */

:root {
    --ally-sidebar-1: #1a307e; /* indigo navy */
    --ally-sidebar-2: #2f63d7; /* blue-600 */
}

/* Smooth transitions (keep it light + consistent) */
.fi-btn,
.fi-ac-btn,
.fi-icon-btn,
.fi-ac-icon-btn,
.fi-input,
.fi-select-input,
.fi-fo-field-wrp input,
.fi-fo-field-wrp textarea,
.fi-fo-field-wrp select,
.fi-dropdown-panel,
.fi-modal,
.fi-section,
.fi-card,
.fi-ta-table tbody tr {
    transition: all 160ms ease;
}

/* Accessibility: Reduce motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   1) SIDEBAR: BLUE GRADIENT + WHITE TEXT + ACTIVE WHITE ITEM
   ============================================================ */

/* Sidebar container */
.fi-sidebar {
    background: linear-gradient(
        180deg,
        var(--ally-sidebar-1) 0%,
        var(--ally-sidebar-2) 100%
    ) !important;

    color: #fff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.20);
    position: relative;
}

/* Premium glow on top */
.fi-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        900px 500px at 20% 0%,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.00) 55%
    );
}

/* Sidebar header (logo/title) */
.fi-sidebar-header,
.fi-sidebar-header * {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Make sidebar labels / text white */
.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-nav-item-label,
.fi-sidebar a,
.fi-sidebar button,
.fi-sidebar span {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: bold;
}

/* Make sidebar icons white */
.fi-sidebar svg,
.fi-sidebar svg * {
    color: rgba(255, 255, 255, 0.95) !important;
    fill: currentColor !important;
}

/* Sidebar item hover */
.fi-sidebar a:hover,
.fi-sidebar button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    transform: translateX(2px);
}

/* Sidebar collapsed state (no sideways movement) */
.fi-sidebar[data-collapsed="true"] a:hover,
.fi-sidebar[data-collapsed="true"] button:hover {
    transform: none;
}

/* ACTIVE menu item: white background + black text */
.fi-sidebar a[aria-current="page"],
.fi-sidebar .fi-active > a {
    background: #ffffff !important;
    color: #000000 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* ACTIVE item children (label + icon) should also be black */
.fi-sidebar a[aria-current="page"] *,
.fi-sidebar .fi-active > a * {
    color: #000000 !important;
}

/* ACTIVE icon color black */
.fi-sidebar a[aria-current="page"] svg,
.fi-sidebar a[aria-current="page"] svg *,
.fi-sidebar .fi-active > a svg,
.fi-sidebar .fi-active > a svg * {
    color: #000000 !important;
    fill: currentColor !important;
}

/* Keep active hover clean */
.fi-sidebar a[aria-current="page"]:hover,
.fi-sidebar .fi-active > a:hover {
    background: #ffffff !important;
}


/* ============================================================
   1.1) SIDEBAR SPACING + ITEM PADDING
   ============================================================ */

/* Space between each menu item */
.fi-sidebar .fi-sidebar-nav li,
.fi-sidebar .fi-sidebar-nav-item {
    margin-bottom: 10px !important; /* change to what you like */
}

/* Make the clickable item nicer */
.fi-sidebar a,
.fi-sidebar button {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
}

/* Space between icon and label */
.fi-sidebar svg {
    margin-right: 10px !important;
}


/* ============================================================
   2) BUTTONS (PRIMARY BLUE) + ACTION ANIMATIONS
   ============================================================ */

/* Primary buttons (Create / Continue / Save / Submit etc.) */
.fi-btn-color-primary,
.fi-ac-btn-color-primary {
    background: rgb(var(--ally-primary)) !important;
    border-color: rgb(var(--ally-primary)) !important;
    color: #fff !important;
}

/* Hover */
.fi-btn-color-primary:hover,
.fi-ac-btn-color-primary:hover {
    background: rgb(var(--ally-primary-dark)) !important;
    border-color: rgb(var(--ally-primary-dark)) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

/* Active press */
.fi-btn-color-primary:active,
.fi-ac-btn-color-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Icon buttons (table edit/delete etc.) animation */
.fi-icon-btn:hover,
.fi-ac-icon-btn:hover {
    transform: translateY(-1px);
}

/* Disabled buttons */
.fi-btn[disabled],
.fi-ac-btn[disabled] {
    opacity: 0.3 !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ============================================================
   3) FORMS - INPUT FOCUS BLUE GLOW
   ============================================================ */

.fi-input,
.fi-select-input,
.fi-fo-field-wrp input,
.fi-fo-field-wrp textarea,
.fi-fo-field-wrp select {
    border-color: rgba(0, 0, 0, 0.12);
}

/* Focus ring */
.fi-input:focus,
.fi-select-input:focus,
.fi-fo-field-wrp input:focus,
.fi-fo-field-wrp textarea:focus,
.fi-fo-field-wrp select:focus {
    border-color: rgb(59, 130, 246) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18) !important;
}


/* ============================================================
   4) TABLE HEADER BACKGROUND + ROW HOVER
   ============================================================ */

.fi-ta-table thead th,
.fi-ta-header {
    position: relative;
    background: rgba(59, 130, 246, 0.07) !important;
}

/* Thin blue separator line under header */
.fi-ta-table thead th::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(59, 130, 246, 0.18);
    pointer-events: none;
}

/* Table row hover */
.fi-ta-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.04) !important;
}

/* Table action icons smoother */
.fi-ta-actions .fi-icon-btn,
.fi-ta-actions .fi-ac-icon-btn {
    transition: transform 140ms ease, opacity 140ms ease;
}

.fi-ta-actions .fi-icon-btn:hover,
.fi-ta-actions .fi-ac-icon-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}


/* ============================================================
   5) CARDS / SECTIONS / MODALS - LIGHT FADE ANIMATION
   ============================================================ */

@keyframes allyFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page + sections fade in */
.fi-main,
.fi-page,
.fi-section,
.fi-card {
    animation: allyFadeIn 180ms ease-out;
}


/* ============================================================
   6) DROPDOWNS / POPUPS - SMOOTH OPEN
   ============================================================ */

.fi-dropdown-panel,
.fi-modal {
    animation: allyFadeIn 140ms ease-out;
}


/* ============================================================
   7) SECONDARY BUTTONS - SLIGHT HOVER ELEVATION
   ============================================================ */

.fi-btn:not(.fi-btn-color-primary):hover,
.fi-ac-btn:not(.fi-ac-btn-color-primary):hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}


/* ============================================================
   8) FOOTER: CENTER + BOLD + CLEAN
   ============================================================ */

.ally-footer {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
}

.ally-footer__inner {
    text-align: center;
    font-weight: 500; /* all normal text */
    color: #000000;
    font-size: 14px;
    letter-spacing: 0.2px;
}

/* Only the link bold */
.ally-footer__inner a {
    font-weight: 700;
    color: #2f63d7;
    text-decoration: underline;
}

.ally-footer__inner a:hover {
    text-decoration: underline;
}


.fi-body-has-topbar .fi-sidebar {
    top: 0;
}

.fi-ac-btn-action {
    background: #1a307e !important;
    border-color: #1a307e !important;
    color: #ffffff !important;
}


.ally-sidebar-logout{
    padding: 14px 12px;
    display: flex;
    justify-content: center;
}

.ally-logout-btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;  
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;

    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.20);
    color: #000;
}

.ally-logout-btn:hover{
    background: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}

/* When collapsed: show only icon centered */
.fi-sidebar[data-collapsed="true"] .ally-logout-label{
    display: none !important;
}

.fi-ta-actions a[href*="edit"] svg,
.fi-ta-actions button[title*="Edit"] svg,
.fi-ta-actions button[aria-label*="Edit"] svg {
    color: rgb(37, 99, 235) !important;   /* blue */
}

/* Hover darker */
.fi-ta-actions a[href*="edit"]:hover svg,
.fi-ta-actions button[title*="Edit"]:hover svg,
.fi-ta-actions button[aria-label*="Edit"]:hover svg {
    color: rgb(29, 78, 216) !important;   /* darker blue */
}

.fi-notifications .fi-notification-icon,
.fi-notifications .fi-notification-icon svg {
    color: rgb(37, 99, 235) !important;   /* blue */
}

/* If Filament sets background ring/circle */
.fi-notifications .fi-notification-icon {
    background: rgba(37, 99, 235, 0.12) !important; /* light blue */
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
}

/* ============================================================
   AUTH LOGIN PAGE: Split screen
   LEFT = image
   RIGHT = login box
   ============================================================ */

.fi-simple-layout {
    position: relative !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: stretch !important;
}

/* LEFT side background image */
.fi-simple-layout::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100% !important;
    opacity: 0.5;
    background: url("/images/login.jpg") center / cover no-repeat !important;
    pointer-events: none !important;
}

/* RIGHT side login area */
.fi-simple-main {
    width: 40% !important;
    min-width: 520px;               /* reduce if you want */
    position: relative !important;
    z-index: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #f8fafc !important; /* right side background */
    padding: 40px 24px !important;
}

/* Login card width */
.fi-simple-page {
    width: 100% !important;
    max-width: 420px !important;
}

/* Responsive: on mobile/tablet hide image and center login */
@media (max-width: 1024px) {
    .fi-simple-layout::before {
        display: none !important;
    }

    .fi-simple-main {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding: 24px 16px !important;
    }

    .fi-simple-page {
        max-width: 420px !important;
    }
}


.fi-page-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(0.95 0 0));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* GRID */
.utc-grid{
    display:grid;
    gap:24px;
    grid-template-columns:repeat(1,minmax(0,1fr));
}

/* 2 columns on md */
@media (min-width: 768px){
    .utc-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* 4 columns on lg (reduces each card width) */
@media (min-width: 1024px){
    .utc-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

/* Optional: keep grid from stretching too wide */
@media (min-width: 1280px){
    .utc-grid{
        margin: 0 auto;
    }
}

/* CARD */
.utc-card{
    display:block;
    border:1px solid;
    border-radius:16px;
    padding:18px;              /* reduced from 24px */
    box-shadow:0 1px 2px rgba(0,0,0,.06);
    transition:box-shadow .15s ease, transform .15s ease;
}
.utc-card:hover{
    box-shadow:0 10px 24px rgba(0,0,0,.10);
    transform: translateY(-1px);
}

.utc-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;                  /* reduced from 24px */
}

.utc-label{
    font-size:16px;
    font-weight:600;
    color:#111827;
}

.utc-value{
    margin-top:10px;
    font-size:34px;            /* reduced from 40px */
    font-weight:800;
    line-height:1;
    color:#030712;
}

.utc-link{
    margin-top:10px;
    font-size:14px;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:4px;
}

/* ICON */
.utc-icon{
    width:44px;                /* reduced from 48px */
    height:44px;               /* reduced from 48px */
    border-radius:9999px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff; /* svg uses currentColor */
    flex:0 0 auto;
}
.utc-icon svg{
    width:22px;                /* reduced from 24px */
    height:22px;               /* reduced from 24px */
}

/* dark mode */
.dark .utc-label{ color:#e5e7eb; }
.dark .utc-value{ color:#ffffff; }
.dark .utc-card{ box-shadow:none; }


@media (min-width: 1024px) {
    .fi-sidebar {
        min-height: 100vh !important;
        height: 100vh !important;
        position: sticky;
        top: 0;
    }
}

.fi-btn:not(.fi-outlined).fi-color:not(label)>.fi-icon {
    color: #fff!important;
}