/* =============================================================
   PLAYSTATION – Dashboard Custom Styles
   Complementa Tailwind CSS con stili specifici per componenti
   ============================================================= */

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: #080812; }
::-webkit-scrollbar-thumb  { background: #1e1e3a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a4a; }

/* ── Sidebar nav links ─────────────────────────────────────── */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;          /* gray-500  */
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    position: relative;
}
.nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e5e7eb;          /* gray-200 */
}
.nav-link.active {
    background: rgba(0, 112, 209, 0.15);
    color: #00A8FF;          /* ps-blue-lt */
    border-left: 3px solid #0070D1;
    padding-left: calc(0.75rem - 3px);
}
.nav-icon {
    width: 1.1rem;
    text-align: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── Badges sidebar ────────────────────────────────────────── */
.badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    line-height: 1.4;
}
.badge-blue   { background: #0070D1; color: #fff; }
.badge-yellow { background: #eab308; color: #000; }

/* ── DB status card ────────────────────────────────────────── */
.db-status-card {
    background: rgba(0, 112, 209, 0.08);
    border: 1px solid rgba(0, 112, 209, 0.25);
}

/* ── Stat cards ────────────────────────────────────────────── */
.stat-card {
    background: #14142a;
    border: 1px solid #1e1e3a;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    border-left-width: 3px;
    transition: border-color 200ms;
}
.stat-card.border-l-ps-blue { border-left-color: #0070D1; }
.stat-card.border-l-yellow  { border-left-color: #eab308; }
.stat-card.border-l-green   { border-left-color: #22c55e; }
.stat-card.border-l-purple  { border-left-color: #a855f7; }

.stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}
.stat-value {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-top: 0.2rem;
}
.stat-trend {
    font-size: 0.7rem;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
}
.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Legenda calendario ────────────────────────────────────── */
.cal-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: #9ca3af;
}
.legend-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
}

/* =============================================================
   FullCalendar – dark theme overrides
   ============================================================= */
#calendar .fc {
    --fc-border-color:              #1e1e3a;
    --fc-page-bg-color:             transparent;
    --fc-neutral-bg-color:          #10101f;
    --fc-today-bg-color:            rgba(0, 112, 209, 0.08);
    --fc-event-bg-color:            #0070D1;
    --fc-event-border-color:        #00439C;
    --fc-event-text-color:          #ffffff;
    --fc-list-event-hover-bg-color: rgba(0, 112, 209, 0.12);
    --fc-highlight-color:           rgba(0, 112, 209, 0.15);
    --fc-now-indicator-color:       #00A8FF;
    color: #d1d5db;
    font-family: inherit;
}

/* Toolbar */
#calendar .fc .fc-toolbar-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}
#calendar .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.2rem;
}

/* Buttons */
#calendar .fc .fc-button {
    background-color: #14142a !important;
    border: 1px solid #1e1e3a !important;
    color: #9ca3af !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 0.4rem !important;
    box-shadow: none !important;
    transition: background 150ms, color 150ms;
}
#calendar .fc .fc-button:hover {
    background-color: #1e1e3a !important;
    color: #ffffff !important;
}
#calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc .fc-button-primary:not(:disabled):active {
    background-color: #0070D1 !important;
    border-color: #0070D1 !important;
    color: #ffffff !important;
}
#calendar .fc .fc-button-group > .fc-button {
    border-radius: 0 !important;
}
#calendar .fc .fc-button-group > .fc-button:first-child {
    border-radius: 0.4rem 0 0 0.4rem !important;
}
#calendar .fc .fc-button-group > .fc-button:last-child {
    border-radius: 0 0.4rem 0.4rem 0 !important;
}

/* Column headers (Mon, Tue …) */
#calendar .fc .fc-col-header-cell-cushion {
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.6rem 0;
    text-decoration: none;
}

/* Day numbers */
#calendar .fc .fc-daygrid-day-number {
    color: #9ca3af;
    font-size: 0.8rem;
    text-decoration: none;
    padding: 0.3rem 0.5rem;
}
#calendar .fc .fc-day-today .fc-daygrid-day-number {
    color: #00A8FF;
    font-weight: 700;
}

/* Table borders */
#calendar .fc th,
#calendar .fc td { border-color: #1e1e3a !important; }
#calendar .fc .fc-scrollgrid { border-color: #1e1e3a !important; }

/* Events */
#calendar .fc .fc-event {
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    border: none;
    padding: 2px 5px;
    cursor: pointer;
}
#calendar .fc .fc-event:hover { opacity: 0.85; }

/* "more events" link */
#calendar .fc .fc-daygrid-more-link {
    color: #00A8FF;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Popover */
#calendar .fc .fc-popover {
    background: #14142a;
    border: 1px solid #1e1e3a;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#calendar .fc .fc-popover-header {
    background: #10101f;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* List view */
#calendar .fc .fc-list-event:hover td {
    background: rgba(0, 112, 209, 0.08);
}
#calendar .fc .fc-list-day-cushion {
    background: #10101f;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
#calendar .fc .fc-list-empty {
    background: #10101f;
    color: #4b5563;
}

/* Now indicator line */
#calendar .fc .fc-timegrid-now-indicator-line {
    border-color: #00A8FF;
}
#calendar .fc .fc-timegrid-now-indicator-arrow {
    border-top-color: #00A8FF;
    border-bottom-color: #00A8FF;
}