/*
 * SKND custom dashboard widgets (stat cards, quick actions, recent
 * activity) — these widgets render their own Blade views (see
 * resources/views/filament/widgets/*) rather than Filament's default
 * StatsOverviewWidget markup, specifically so they can have the icon-box +
 * left-accent-border layout the brand design calls for. This file styles
 * those custom classes (all prefixed skn- so they can never collide with
 * Filament's own fi-* classes), loaded via the same STYLES_AFTER render
 * hook as the rest of the admin theme (see AdminPanelProvider).
 */

/* ---------- Shared card base ---------- */

.skn-section-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 0.75rem;
}

/* ---------- Stat cards ---------- */

.skn-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1024px) {
    .skn-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .skn-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.skn-stat-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #4F46E5;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 21, 43, 0.06), 0 1px 2px rgba(16, 21, 43, 0.04);
    padding: 1.1rem 1.25rem;
}

.skn-stat-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.12);
    color: #4F46E5;
}

.skn-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: #111827;
}

.skn-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748B;
    margin-top: 0.125rem;
}

/* ---------- Quick actions ---------- */

.skn-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1024px) {
    .skn-quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .skn-quick-actions-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.skn-quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.skn-quick-action-card:hover {
    border-color: #4F46E5;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.12);
}

.skn-quick-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 7px;
    background: #4F46E5;
    color: #fff;
}

.skn-quick-action-title {
    font-size: 0.925rem;
    font-weight: 600;
    color: #111827;
}

.skn-quick-action-subtitle {
    font-size: 0.8125rem;
    color: #64748B;
}

/* ---------- Recently updated ---------- */

.skn-recent-activity-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 21, 43, 0.06), 0 1px 2px rgba(16, 21, 43, 0.04);
    padding: 0.25rem 1.25rem;
}

.skn-recent-activity-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid #F1F2F7;
}

.skn-recent-activity-row:last-child {
    border-bottom: none;
}

.skn-recent-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #4F46E5;
}

.skn-recent-activity-text {
    flex: 1;
    min-width: 0;
}

.skn-recent-activity-title {
    font-size: 0.925rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skn-recent-activity-type {
    font-size: 0.75rem;
    color: #64748B;
}

.skn-recent-activity-time {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: #64748B;
    white-space: nowrap;
}

.skn-recent-activity-empty {
    padding: 1.25rem 0;
    font-size: 0.875rem;
    color: #64748B;
}

/* Topbar name/role + chevron styling now lives in filament-admin.css,
   alongside the rest of the shell (sidebar/topbar) theme — the previous
   "name | Sign out" link version was superseded by the current design
   (name + "Admin" role, no separate visible sign-out link; see
   resources/views/filament/partials/topbar-user-extra.blade.php). */

/* ---------- Clients list page: stat cards (see
   App\Filament\Resources\ClientResource\Widgets\ClientsStatsOverview) ----------
   Own classes, not the dashboard's skn-stat-* — label sits above the value
   here, and each card gets its own chip color instead of a uniform left
   accent border. */

.skn-client-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 768px) {
    .skn-client-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.skn-client-stat-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 21, 43, 0.06), 0 1px 2px rgba(16, 21, 43, 0.04);
    padding: 1.1rem 1.25rem;
}

.skn-client-stat-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
}

.skn-client-stat-icon.skn-chip-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3B82F6;
}

.skn-client-stat-icon.skn-chip-green {
    background: rgba(22, 163, 74, 0.12);
    color: #16A34A;
}

.skn-client-stat-icon.skn-chip-red {
    background: rgba(220, 38, 38, 0.12);
    color: #DC2626;
}

.skn-client-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
}

.skn-client-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
    margin-top: 0.125rem;
}