/*
 * Mafilo CRM — Global Admin Theme
 * Overrides Filament's default appearance to match the design system.
 * Design tokens are defined here so they apply to ALL pages (forms + views).
 */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS (global scope — available everywhere)
═══════════════════════════════════════════════════════════ */
:root {
    --ds-bg:             #f1f5f9;
    --ds-surface:        #ffffff;
    --ds-surface-2:      #f8fafc;
    --ds-surface-3:      #f1f5f9;
    --ds-border:         #e2e8f0;
    --ds-border-2:       #cbd5e1;
    --ds-text:           #0f172a;
    --ds-text-2:         #475569;
    --ds-text-3:         #94a3b8;
    --ds-blue:           #3b82f6;
    --ds-blue-dark:      #1d4ed8;
    --ds-blue-bg:        #eff6ff;
    --ds-green:          #10b981;
    --ds-green-dark:     #059669;
    --ds-green-bg:       #ecfdf5;
    --ds-amber:          #f59e0b;
    --ds-amber-dark:     #d97706;
    --ds-red:            #ef4444;
    --ds-red-dark:       #dc2626;
    --ds-red-bg:         #fef2f2;
    --ds-purple:         #8b5cf6;
    --ds-mafilo:         #10b981;
    --ds-mafilo-bg:      #dcfce7;
    --ds-mafilo-text:    #065f46;
    --ds-layree:         #3b82f6;
    --ds-layree-bg:      #dbeafe;
    --ds-layree-text:    #1e40af;
    --ds-shadow-xs:      0 1px 2px rgba(15,23,42,.05);
    --ds-shadow-sm:      0 1px 4px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
    --ds-shadow:         0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --ds-radius-xs:      4px;
    --ds-radius-sm:      8px;
    --ds-radius:         12px;
    --ds-radius-lg:      16px;
    --ds-radius-full:    9999px;
    --ds-sidebar-width:  288px;
    --ds-ease:           cubic-bezier(.4,0,.2,1);
    --ds-duration:       .16s;
}

/* ═══════════════════════════════════════════════════════════
   PAGE BACKGROUND
═══════════════════════════════════════════════════════════ */
.fi-main-ctn,
.fi-page-main,
.fi-page-content,
.fi-main {
    background-color: var(--ds-bg) !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════════════════════ */
.fi-page-header-main-ctn {
    background: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 16px 24px !important;
    box-shadow: var(--ds-shadow-xs) !important;
}

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

.fi-header-subheading {
    font-size: 0.8rem !important;
    color: var(--ds-text-3) !important;
    margin-top: 1px !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS — the main card containers
═══════════════════════════════════════════════════════════ */
.fi-section {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius) !important;
    box-shadow: var(--ds-shadow-xs) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* Gradient top accent bar on each section */
.fi-section::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--ds-blue) 0%, #60a5fa 100%);
    border-radius: var(--ds-radius) var(--ds-radius) 0 0;
}

.fi-section-header {
    background: var(--ds-surface-2) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 12px 18px !important;
}

.fi-section-header-heading {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ds-text-2) !important;
}

.fi-section-header-description {
    font-size: 0.75rem !important;
    color: var(--ds-text-3) !important;
    margin-top: 1px !important;
}

.fi-section-content-ctn {
    padding: 18px 18px 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   FORM FIELD LABELS
═══════════════════════════════════════════════════════════ */
.fi-fo-field-label label,
.fi-fo-field-label-content,
.fi-input-wrp-label,
label.fi-fo-field-label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--ds-text-3) !important;
    margin-bottom: 5px !important;
}

.fi-fo-field-label-required-mark {
    color: var(--ds-red) !important;
}

/* Helper text */
.fi-fo-field-hint-content {
    font-size: 0.7rem !important;
    color: var(--ds-text-3) !important;
}

/* ═══════════════════════════════════════════════════════════
   INPUTS, SELECTS, TEXTAREAS
═══════════════════════════════════════════════════════════ */
.fi-input,
.fi-fo-select-wrp input,
.fi-fo-textarea-wrp textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"] {
    border-radius: var(--ds-radius-sm) !important;
    border-color: var(--ds-border-2) !important;
    background: var(--ds-surface) !important;
    color: var(--ds-text) !important;
    font-size: 0.875rem !important;
    transition: border-color var(--ds-duration) var(--ds-ease),
                box-shadow var(--ds-duration) var(--ds-ease) !important;
}

.fi-input:focus,
.fi-fo-select-wrp input:focus,
.fi-fo-textarea-wrp textarea:focus {
    border-color: var(--ds-blue) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12) !important;
    outline: none !important;
}

/* Input wrapper */
.fi-input-wrp {
    border-radius: var(--ds-radius-sm) !important;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

/* Select component */
.fi-fo-select-wrp {
    border-radius: var(--ds-radius-sm) !important;
}

/* Date picker */
.fi-fo-date-time-picker-input-wrp {
    border-radius: var(--ds-radius-sm) !important;
}

/* Textarea */
.fi-fo-textarea-wrp textarea {
    border-radius: var(--ds-radius-sm) !important;
}

/* Disabled inputs */
.fi-input[disabled],
input[disabled] {
    background: var(--ds-surface-3) !important;
    color: var(--ds-text-3) !important;
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════
   REPEATER — line items
═══════════════════════════════════════════════════════════ */
.fi-fo-repeater-item {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: var(--ds-shadow-xs) !important;
    overflow: hidden !important;
    transition: box-shadow var(--ds-duration) var(--ds-ease) !important;
}

.fi-fo-repeater-item:hover {
    box-shadow: var(--ds-shadow-sm) !important;
}

.fi-fo-repeater-item-header {
    background: var(--ds-surface-2) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 10px 14px !important;
}

.fi-fo-repeater-item-header-collapse-action,
.fi-fo-repeater-item-header-expand-action {
    color: var(--ds-text-3) !important;
}

.fi-fo-repeater-item-content {
    padding: 16px !important;
}

/* Add item button */
.fi-fo-repeater-add-between-items,
button[wire\:click*="create"] {
    border-radius: var(--ds-radius-sm) !important;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — primary save/action buttons
═══════════════════════════════════════════════════════════ */
.fi-btn-color-primary {
    background: linear-gradient(135deg, var(--ds-blue) 0%, var(--ds-blue-dark) 100%) !important;
    border: none !important;
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: transform var(--ds-duration) var(--ds-ease),
                box-shadow var(--ds-duration) var(--ds-ease) !important;
}

.fi-btn-color-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(59,130,246,0.35) !important;
}

.fi-btn-color-success {
    background: linear-gradient(135deg, var(--ds-green) 0%, var(--ds-green-dark) 100%) !important;
    border: none !important;
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important;
    font-weight: 600 !important;
}

.fi-btn-color-danger {
    border-radius: var(--ds-radius-sm) !important;
}

.fi-btn-color-gray,
.fi-btn-color-secondary {
    border-radius: var(--ds-radius-sm) !important;
    border-color: var(--ds-border-2) !important;
    background: var(--ds-surface) !important;
    color: var(--ds-text-2) !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGES (status indicators in forms)
═══════════════════════════════════════════════════════════ */
.fi-badge {
    border-radius: var(--ds-radius-full) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 3px 10px !important;
}

/* ═══════════════════════════════════════════════════════════
   TABLES inside forms / relation managers
═══════════════════════════════════════════════════════════ */
.fi-ta-table {
    border-radius: var(--ds-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: var(--ds-shadow-xs) !important;
}

.fi-ta-header-cell {
    background: var(--ds-surface-2) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--ds-text-3) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 10px 14px !important;
}

.fi-ta-row {
    border-bottom: 1px solid var(--ds-border) !important;
    transition: background var(--ds-duration) var(--ds-ease) !important;
}

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

.fi-ta-row:hover .fi-ta-cell {
    background: var(--ds-surface-2) !important;
}

.fi-ta-cell {
    padding: 11px 14px !important;
    font-size: 0.83rem !important;
    color: var(--ds-text-2) !important;
    border-bottom: none !important;
}

/* Filter/search bar */
.fi-ta-filters-ctn,
.fi-ta-search-field-ctn {
    background: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 10px 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMBS
═══════════════════════════════════════════════════════════ */
.fi-breadcrumbs-item-label {
    font-size: 0.78rem !important;
    color: var(--ds-text-3) !important;
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--ds-text-2) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   FILE UPLOAD
═══════════════════════════════════════════════════════════ */
.fi-fo-file-upload-input-ctn {
    border-radius: var(--ds-radius-sm) !important;
    border: 2px dashed var(--ds-border-2) !important;
    background: var(--ds-surface-2) !important;
    transition: border-color var(--ds-duration) var(--ds-ease) !important;
}

.fi-fo-file-upload-input-ctn:hover {
    border-color: var(--ds-blue) !important;
    background: var(--ds-blue-bg) !important;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS / ALERTS
═══════════════════════════════════════════════════════════ */
.fi-no-ctn {
    border-radius: var(--ds-radius) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}

.fi-no {
    border-radius: var(--ds-radius) !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL / SLIDE-OVERS
═══════════════════════════════════════════════════════════ */
.fi-modal-window {
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow-xl, 0 25px 50px rgba(15,23,42,.15)) !important;
}

.fi-modal-header {
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 16px 20px !important;
}

.fi-modal-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--ds-text) !important;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATES
═══════════════════════════════════════════════════════════ */
.fi-empty-state-content {
    padding: 40px 24px !important;
}

.fi-empty-state-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--ds-text-2) !important;
}

.fi-empty-state-description {
    font-size: 0.83rem !important;
    color: var(--ds-text-3) !important;
}

/* ═══════════════════════════════════════════════════════════
   COMPACT FORM DENSITY — targeted measurements applied
   Key findings:
     [role="tabpanel"]    → was 24px padding
     .fi-section-content  → was 16px padding + 24px gap (main offender)
     .fi-section-content-ctn → outer wrapper
═══════════════════════════════════════════════════════════ */

/* Tab panel: reduce outer padding */
[role="tabpanel"] {
    padding: 10px !important;
}

/* Section-to-section gap */
.fi-section + .fi-section,
.fi-page-content .fi-section + .fi-section {
    margin-top: 8px !important;
}

/* Section outer wrapper */
.fi-section-content-ctn {
    padding: 0 !important;
}

/* Section inner: THE BIG FIX — gap was 24px between every row */
.fi-section-content {
    padding: 6px 14px 10px !important;
    gap: 8px !important;
}

/* Legacy component container */
.fi-fo-component-ctn {
    gap: 8px !important;
}

/* Field internal layout: reduce gap between label row and input row.
   fi-fo-field is a flex/grid column — row-gap was 8px, label had 5px margin-bottom = 13px total.
   Bring it down to ~3px total. */
.fi-fo-field {
    gap: 2px !important;
    row-gap: 2px !important;
}
.fi-fo-field-label {
    margin-bottom: 0 !important;
}
.fi-fo-field-label-col {
    gap: 2px !important;
    row-gap: 2px !important;
}

/* Label: tighter gap to input below it */
.fi-fo-field-label {
    margin-bottom: 2px !important;
}

/* Input height — compact (from ~40px to ~34px) */
.fi-input-wrp input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="search"],
input[type="tel"] {
    height: 34px !important;
    min-height: 34px !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    font-size: 0.8rem !important;
}

/* Select fields */
.fi-fo-select-wrp [role="combobox"],
.fi-fo-select-wrp input {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.8rem !important;
}

/* Date picker */
.fi-fo-date-time-picker-input-wrp input {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.8rem !important;
}

/* Textarea: compact font, natural height */
.fi-fo-textarea-wrp textarea {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.65rem !important;
    min-height: 56px !important;
}

/* Prefix / suffix inside inputs */
.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    font-size: 0.75rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    height: 34px !important;
    display: flex;
    align-items: center;
}

/* Placeholder computed value fields (fi-fo-placeholder-ctn = old API) */
.fi-fo-placeholder-ctn {
    padding: 0.35rem 0.65rem !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--ds-surface-2) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--ds-text) !important;
}

/* Filament v5: Placeholder renders as fi-in-entry (infolist-style) inside forms.
   Style the content area as a read-only input box. */
.fi-in-entry-content-ctn {
    background: var(--ds-surface-2) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 6px !important;
    padding: 0.35rem 0.65rem !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
}
.fi-in-text-item,
.fi-in-text-item .fi-in-text {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--ds-text) !important;
}
/* Label alignment for inline Placeholder fields */
.fi-in-entry {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
.fi-in-entry-label {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    color: var(--ds-text-2) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Section header: tight — reduces gap between title and first field */
.fi-section-header {
    padding: 7px 14px !important;
}

/* Tabs: compact */
[role="tablist"] {
    gap: 2px !important;
    padding: 3px !important;
    margin-bottom: 12px !important;
}
[role="tab"] {
    padding: 5px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    color: var(--ds-text-3) !important;
}
[role="tab"][aria-selected="true"] {
    background: var(--ds-surface) !important;
    color: var(--ds-text) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}

/* Repeater items: tighter */
.fi-fo-repeater-item-content {
    padding: 10px 12px !important;
}
.fi-fo-repeater-item-header {
    padding: 8px 12px !important;
}

/* Grid row gaps */
.fi-fo-grid {
    gap: 10px !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-text-3); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE TABLES — applies to every list page globally
═══════════════════════════════════════════════════════════ */

/* Page content padding — tighter on small screens */
.fi-page-content {
    padding: 14px 20px !important;
}
@media (max-width: 768px) {
    .fi-page-content { padding: 10px 12px !important; }
}

/* Table container: always scroll horizontally, never clip */
.fi-ta {
    border-radius: 10px !important;
    overflow: hidden !important;
}
.fi-ta-ctn,
.fi-ta > div,
.fi-ta-wrp {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Table itself: enforce a minimum so columns don't collapse */
.fi-ta-table {
    min-width: 700px;
}

/* ── Table header ─────────────────────────────────────── */
.fi-ta-table thead tr > th {
    white-space: nowrap;
    font-size: .62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280 !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 8px 12px !important;
}

/* ── Table rows ───────────────────────────────────────── */
.fi-ta-table tbody tr {
    transition: background-color .08s;
}
.fi-ta-table tbody tr:hover {
    background: #f0f7ff !important;
}
.fi-ta-table tbody tr:hover td {
    background: transparent !important;
}

/* ── Default cell density ─────────────────────────────── */
.fi-ta-table tbody tr > td {
    padding: 6px 12px !important;
    font-size: .8rem !important;
    vertical-align: middle;
}

/* ── Pagination: larger per-page picker ───────────────── */
.fi-ta-pagination { padding: 10px 14px !important; }
.fi-ta-pagination .fi-input-wrp { min-width: 68px; }

/* ── Responsive breakpoints ───────────────────────────── */
@media (max-width: 1024px) {
    .fi-ta-table thead tr > th { padding: 7px 10px !important; }
    .fi-ta-table tbody tr > td { padding: 5px 10px !important; font-size: .77rem !important; }
}
@media (max-width: 768px) {
    .fi-ta-table thead tr > th { padding: 6px 8px !important; font-size: .6rem !important; }
    .fi-ta-table tbody tr > td { padding: 4px 8px !important; font-size: .74rem !important; }
}

/* ── Record actions column: don't let it stretch ─────── */
.fi-ta-table td:last-child,
.fi-ta-table th:last-child {
    width: 1%;
    white-space: nowrap;
}

/* ── Page header: tighter on small screens ───────────── */
@media (max-width: 768px) {
    .fi-page-header-main-ctn { padding: 12px 16px !important; }
    .fi-header-heading { font-size: .95rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   SELECT DROPDOWN — global fix for the whole site

   Problems:
   1. Filament theme.css has max-width: 14rem !important (~224px)
   2. JS sets width = trigger button width (narrow in narrow columns)
   3. No max-height set — panel grows past viewport, can't scroll to bottom

   Fixes applied here (all use !important to beat Filament's own !important):
   - min-width: at least 340px, grows with content
   - max-width: capped at 700px or 94vw so it never bleeds off screen
   - max-height + overflow-y: scrollable within viewport
═══════════════════════════════════════════════════════════ */

.fi-dropdown-panel {
    min-width: 340px !important;
    max-width: min(700px, 94vw) !important;
    max-height: min(60vh, 520px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* All option rows — wrap text so long labels are fully readable */
.fi-dropdown-panel [role="option"],
.fi-dropdown-list [role="option"],
.fi-select-input-options-ctn [role="option"],
.fi-dropdown-panel .fi-select-input-option {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Search input inside dropdown — stretch to full panel width */
.fi-select-input-search-ctn {
    width: 100% !important;
    box-sizing: border-box !important;
}
.fi-select-input-search-ctn .fi-input {
    width: 100% !important;
    box-sizing: border-box !important;
}