/*
 * IHouse Design System — Global Theme
 * =====================================================================
 * Para personalizar la paleta de un cliente, modificar SOLO las
 * variables CSS en :root desde la UI de Settings o este archivo.
 * Todos los componentes y overrides referencian estas variables.
 * =====================================================================
 */

/* ─── Default palette (Indigo) ──────────────────────────────────────── */
:root {
    --color-primary:        #4f46e5;
    --color-primary-hover:  #4338ca;
    --color-primary-light:  #6366f1;
    --color-primary-rgb:    79, 70, 229;

    --color-success:        #10b981;
    --color-success-bg:     #ecfdf5;
    --color-success-text:   #065f46;
    --color-success-border: #6ee7b7;

    --color-warning:        #f59e0b;
    --color-warning-bg:     #fffbeb;
    --color-warning-text:   #92400e;
    --color-warning-border: #fcd34d;

    --color-danger:         #f43f5e;
    --color-danger-bg:      #fff1f2;
    --color-danger-text:    #9f1239;
    --color-danger-border:  #fda4af;

    --color-info:           #0ea5e9;
    --color-info-bg:        #f0f9ff;
    --color-info-text:      #075985;
    --color-info-border:    #7dd3fc;

    /* Backward compat with existing --theme-color vars */
    --theme-color:          var(--color-primary);
    --theme-color-hover:    var(--color-primary-hover);
    --theme-color-rgb:      var(--color-primary-rgb);
}

/* ─── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body { background-color: #f8fafc; color: #0f172a; }

/* ─── Sidebar ────────────────────────────────────────────────────────── */
.sidebar-item { transition: all .15s ease; border-left: 3px solid transparent; }
.sidebar-item:hover  { background-color: rgba(var(--color-primary-rgb), 0.08); color: #0f172a; }
.sidebar-item.active {
    background-color: rgba(var(--color-primary-rgb), 0.12);
    border-left-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 800;
}

/* ─── Primary semantic utilities ─────────────────────────────────────── */
.bg-primary          { background-color: var(--color-primary)       !important; }
.bg-primary-light    { background-color: rgba(var(--color-primary-rgb), 0.08) !important; }
.text-primary        { color: var(--color-primary)                  !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.border-primary      { border-color: var(--color-primary)           !important; }
.ring-primary        { --tw-ring-color: var(--color-primary)        !important; }
.hover\:bg-primary:hover { background-color: var(--color-primary-hover) !important; }
.hover\:border-primary:hover { border-color: var(--color-primary) !important; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--color-primary) !important;
    color: white !important;
    font-weight: 800;
    transition: background-color .15s ease, transform .1s ease;
}
.btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Variante monocromática del logo del cliente — para fondos oscuros o
   impresión en blanco y negro. Se aplica al <img> del logo donde haga
   falta (ver Fase E para recibos impresos). */
.logo-monochrome {
    filter: grayscale(1) contrast(1.15);
}

.btn-secondary {
    background-color: white !important;
    color: var(--color-primary) !important;
    border: 1.5px solid rgba(var(--color-primary-rgb), 0.3) !important;
    font-weight: 700;
    transition: all .15s ease;
}
.btn-secondary:hover {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}

.btn-danger {
    background-color: var(--color-danger) !important;
    color: white !important;
    font-weight: 800;
    transition: all .15s ease;
}

/* ─── Form inputs ─────────────────────────────────────────────────────── */
.form-input {
    width: 100%;
    padding: .9rem 1.25rem;
    background-color: #f8fafc;
    border: 2px solid transparent;
    border-radius: .875rem;
    font-weight: 700;
    color: #0f172a;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.04);
    transition: border-color .15s ease, background-color .15s ease;
    appearance: none;
}
.form-input:focus {
    outline: none;
    background-color: white;
    border-color: var(--color-primary);
}
.form-input::placeholder { color: #94a3b8; font-weight: 500; }

/* ─── Cards ───────────────────────────────────────────────────────────── */
.card {
    background: white;
    border-radius: 1.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
    padding: 1.75rem;
}
.card-lg { border-radius: 2rem; padding: 2.5rem; }

/* ─── Status badges ───────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .75rem;
    border-radius: 9999px;
    font-size: .625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
}
.badge-success, .badge-paid, .badge-active {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}
.badge-warning, .badge-pending {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}
.badge-danger, .badge-overdue, .badge-inactive, .badge-moroso {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}
.badge-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}
.badge-primary {
    background-color: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
}

/* ─── Flash messages ──────────────────────────────────────────────────── */
.flash-success {
    background-color: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    color: var(--color-success-text);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.flash-error {
    background-color: var(--color-danger-bg);
    border-left: 4px solid var(--color-danger);
    color: var(--color-danger-text);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.flash-warning {
    background-color: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    color: var(--color-warning-text);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.flash-info {
    background-color: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    color: var(--color-info-text);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* ─── Page header standard ────────────────────────────────────────────── */
.page-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.page-icon-primary { background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-hover)); box-shadow: 0 10px 25px rgba(var(--color-primary-rgb), .3); }
.page-icon-success { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 10px 25px rgba(16,185,129,.3); }
.page-icon-warning { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 10px 25px rgba(245,158,11,.3); }
.page-icon-danger  { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 10px 25px rgba(244,63,94,.3); }
.page-icon-info    { background: linear-gradient(135deg, #38bdf8, #0284c7); box-shadow: 0 10px 25px rgba(14,165,233,.3); }

/* ─── Tables ──────────────────────────────────────────────────────────── */
.table-header th {
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: .625rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .15em;
    background-color: #f8fafc;
}
.table-row { transition: background-color .1s ease; }
.table-row:hover { background-color: #f8fafc; }
.table-cell { padding: 1rem 1.5rem; }

/* ─── Section headers (inside forms) ─────────────────────────────────── */
.section-title {
    font-size: .7rem;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .2em;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.section-title::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 2px;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

/* ─── DataTables integration ─────────────────────────────────────────── */

/* Hide default chrome — Blade pagination handles pages */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { display: none !important; }

/* Search wrapper — moved before the overflow-x container by initComplete */
.dataTables_filter {
    float: none !important;
    text-align: left !important;
    padding: .75rem 1rem .5rem;
}
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .65rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* Search input */
.dataTables_filter input {
    padding: .45rem .9rem !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: .875rem !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.04) !important;
    outline: none !important;
    transition: border-color .15s ease !important;
    margin-left: .5rem !important;
    width: 13rem !important;
}
.dataTables_filter input:focus {
    background: white !important;
    border-color: var(--color-primary) !important;
}

/* Row hover */
table.datatable tbody tr:hover td { background: #f8fafc !important; }

/* Sortable headers */
table.datatable thead th.sorting,
table.datatable thead th.sorting_asc,
table.datatable thead th.sorting_desc {
    cursor: pointer;
    user-select: none;
    padding-right: 1.75rem !important;
    position: relative;
    background-image: none !important;
}
table.datatable thead th.sorting::after,
table.datatable thead th.sorting_asc::after,
table.datatable thead th.sorting_desc::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .55rem;
}
table.datatable thead th.sorting::after       { content: '\f0dc'; color: #cbd5e1; }
table.datatable thead th.sorting_asc::after   { content: '\f0de'; color: var(--color-primary); }
table.datatable thead th.sorting_desc::after  { content: '\f0dd'; color: var(--color-primary); }

/* ─── Mobile responsiveness ──────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Tables: reduce heavy padding */
    table th, table td { padding: .6rem .75rem !important; font-size: .75rem; }

    /* Page h1: shrink slightly */
    h1 { font-size: 1.5rem !important; line-height: 1.3; }

    /* Card padding */
    .p-10, .p-14 { padding: 1.25rem !important; }

    /* Large gaps */
    .gap-12 { gap: 1.5rem !important; }
    .gap-8  { gap: 1rem  !important; }

    /* Form inputs */
    .px-8.py-5, .px-6.py-5 { padding: .75rem 1rem !important; }

    /* Page header icons */
    .w-16.h-16 { width: 2.75rem !important; height: 2.75rem !important; }

    /* Section title spacing */
    .section-title { margin-bottom: 1.25rem; font-size: .6rem; }

    /* Flex headers: allow wrap */
    .mb-8.flex.items-center { flex-wrap: wrap; gap: .75rem !important; }
    .mb-10.flex.items-center { flex-wrap: wrap; gap: .75rem !important; }
}

@media (max-width: 480px) {
    /* Stats grids: 2 cols max */
    .grid-cols-4, .grid-cols-3 { grid-template-columns: 1fr 1fr !important; }

    /* Tables: ensure horizontal scroll triggers */
    table { min-width: 480px; }

    /* Badges */
    .badge { font-size: .55rem; padding: .15rem .5rem; }
}

/* ─── Tailwind color overrides → PRIMARY ─────────────────────────────── */
/* INDIGO */
.bg-indigo-600, .bg-indigo-500        { background-color: var(--color-primary)       !important; }
.bg-indigo-700                         { background-color: var(--color-primary-hover) !important; }
.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-600:hover            { background-color: var(--color-primary-hover) !important; }
.text-indigo-600, .text-indigo-500     { color: var(--color-primary)                 !important; }
.hover\:text-indigo-700:hover          { color: var(--color-primary-hover)            !important; }
.bg-indigo-50                          { background-color: rgba(var(--color-primary-rgb), .06) !important; }
.bg-indigo-100                         { background-color: rgba(var(--color-primary-rgb), .12) !important; }
.border-indigo-500, .border-indigo-600 { border-color: var(--color-primary)           !important; }
.focus\:border-indigo-500:focus        { border-color: var(--color-primary)           !important; }
.focus\:ring-indigo-500:focus          { --tw-ring-color: var(--color-primary)        !important; }
.shadow-indigo-100, .shadow-indigo-200 { --tw-shadow-color: rgba(var(--color-primary-rgb), .18) !important; }
.from-indigo-500, .from-indigo-600     { --tw-gradient-from: var(--color-primary)     !important; }
.to-indigo-700, .to-indigo-800         { --tw-gradient-to: var(--color-primary-hover) !important; }

/* BLUE */
.bg-blue-600, .bg-blue-500             { background-color: var(--color-primary)       !important; }
.bg-blue-700                           { background-color: var(--color-primary-hover) !important; }
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover              { background-color: var(--color-primary-hover) !important; }
.text-blue-600, .text-blue-500         { color: var(--color-primary)                 !important; }
.hover\:text-blue-700:hover            { color: var(--color-primary-hover)            !important; }
.bg-blue-50                            { background-color: rgba(var(--color-primary-rgb), .06) !important; }
.bg-blue-100                           { background-color: rgba(var(--color-primary-rgb), .12) !important; }
.border-blue-500                       { border-color: var(--color-primary)           !important; }
.focus\:border-blue-500:focus          { border-color: var(--color-primary)           !important; }
.focus\:ring-blue-500:focus            { --tw-ring-color: var(--color-primary)        !important; }

/* VIOLET / PURPLE (same primary family) */
.bg-violet-600, .bg-purple-600         { background-color: var(--color-primary)       !important; }
.text-violet-600, .text-purple-600     { color: var(--color-primary)                 !important; }

/* TEAL / CYAN (used as primary actions in several modules) */
.bg-teal-600, .bg-teal-500             { background-color: var(--color-primary)       !important; }
.bg-teal-700                           { background-color: var(--color-primary-hover) !important; }
.hover\:bg-teal-700:hover,
.hover\:bg-teal-600:hover              { background-color: var(--color-primary-hover) !important; }
.text-teal-600, .text-teal-500         { color: var(--color-primary)                 !important; }
.bg-teal-50                            { background-color: rgba(var(--color-primary-rgb), .06) !important; }
.bg-teal-100                           { background-color: rgba(var(--color-primary-rgb), .12) !important; }
.border-teal-500                       { border-color: var(--color-primary)           !important; }
.focus\:border-teal-500:focus          { border-color: var(--color-primary)           !important; }
.shadow-teal-100, .shadow-teal-200     { --tw-shadow-color: rgba(var(--color-primary-rgb), .18) !important; }
.from-teal-500, .from-teal-600         { --tw-gradient-from: var(--color-primary)     !important; }
.to-cyan-600, .to-teal-700             { --tw-gradient-to: var(--color-primary-hover) !important; }

/* ─── Status colors — fixed, do NOT override ─────────────────────────── */
/* emerald/green = SUCCESS → keep */
/* amber/yellow  = WARNING → keep */
/* red/rose      = DANGER  → keep */
/* sky           = INFO    → keep */

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}