/*!
 * LW Design System — foundation layer (light mode / default tokens)
 *
 * Purely additive: loaded after argon.min.css / app.css, so it only extends and
 * gently re-skins existing Bootstrap/Argon classes via CSS custom properties —
 * it never removes or renames anything the rest of the app already relies on.
 * New premium components (KPI cards, channel badges, empty states, skeletons,
 * drawers) live under the `lw-ds-*` class namespace so they never collide with
 * existing `lw-*` classes used elsewhere in the app.
 *
 * Dark-mode equivalents live in design-system-dark.css, loaded the same way
 * dark-theme.css already is (see layouts/app.blade.php).
 */

:root {
    /* ---- Brand ---- */
    --lw-ds-primary: #6366f1;
    --lw-ds-primary-dark: #4f46e5;
    --lw-ds-primary-light: #818cf8;
    --lw-ds-primary-soft: rgba(99, 102, 241, .1);
    --lw-ds-secondary: #ec4899;
    --lw-ds-secondary-soft: rgba(236, 72, 153, .1);

    /* ---- Status ---- */
    --lw-ds-success: #16a34a;
    --lw-ds-success-soft: rgba(22, 163, 74, .12);
    --lw-ds-warning: #d97706;
    --lw-ds-warning-soft: rgba(217, 119, 6, .12);
    --lw-ds-danger: #e11d48;
    --lw-ds-danger-soft: rgba(225, 29, 72, .12);
    --lw-ds-info: #0ea5e9;
    --lw-ds-info-soft: rgba(14, 165, 233, .12);

    /* ---- Channels (kept identical to the Unified Inbox page so badges match everywhere) ---- */
    --lw-ds-whatsapp: #25D366;
    --lw-ds-facebook: #1877F2;
    --lw-ds-instagram: #d6249f;

    /* ---- Surfaces & text ---- */
    --lw-ds-bg: #f8fafc;
    --lw-ds-surface: #ffffff;
    --lw-ds-surface-alt: #f1f5f9;
    --lw-ds-border: #e7eaf3;
    --lw-ds-text: #0f172a;
    --lw-ds-text-muted: #64748b;
    --lw-ds-text-light: #99a1b3;

    /* ---- Radius ---- */
    --lw-ds-radius-sm: 8px;
    --lw-ds-radius-md: 12px;
    --lw-ds-radius-lg: 16px;
    --lw-ds-radius-pill: 999px;

    /* ---- Shadow ---- */
    --lw-ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --lw-ds-shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
    --lw-ds-shadow-lg: 0 20px 60px rgba(15, 23, 42, .15);

    /* ---- Motion ---- */
    --lw-ds-transition: all .15s ease;
}

/* ==========================================================================
   Gentle re-skin of existing Bootstrap/Argon primitives via the tokens above.
   No markup changes required anywhere else in the app to benefit from these.
   ========================================================================== */

.btn-primary {
    background-color: var(--lw-ds-primary) !important;
    border-color: var(--lw-ds-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--lw-ds-primary-dark) !important;
    border-color: var(--lw-ds-primary-dark) !important;
}

.text-primary,
a.text-primary:hover {
    color: var(--lw-ds-primary) !important;
}

.badge-primary,
.badge.bg-primary {
    background-color: var(--lw-ds-primary) !important;
}

.card {
    border-radius: var(--lw-ds-radius-lg);
    box-shadow: var(--lw-ds-shadow-sm);
    border: 1px solid var(--lw-ds-border);
}

/* ==========================================================================
   lw-ds-card — premium card wrapper (<x-lw.ui.card>)
   ========================================================================== */

.lw-ds-card {
    background: var(--lw-ds-surface);
    border: 1px solid var(--lw-ds-border);
    border-radius: var(--lw-ds-radius-lg);
    box-shadow: var(--lw-ds-shadow-sm);
    transition: var(--lw-ds-transition);
}

.lw-ds-card.lw-ds-card-hoverable:hover {
    box-shadow: var(--lw-ds-shadow-md);
    transform: translateY(-2px);
}

.lw-ds-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--lw-ds-border);
}

.lw-ds-card-header-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--lw-ds-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lw-ds-primary-soft);
    color: var(--lw-ds-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.lw-ds-card-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--lw-ds-text);
    margin: 0;
}

.lw-ds-card-subtitle {
    font-size: .78rem;
    color: var(--lw-ds-text-muted);
    margin: 2px 0 0;
}

.lw-ds-card-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lw-ds-card-body {
    padding: 20px;
}

/* ==========================================================================
   lw-ds-kpi — KPI / stat intelligence card (<x-lw.ui.kpi-card>)
   ========================================================================== */

.lw-ds-kpi {
    background: var(--lw-ds-surface);
    border: 1px solid var(--lw-ds-border);
    border-radius: var(--lw-ds-radius-lg);
    box-shadow: var(--lw-ds-shadow-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--lw-ds-transition);
}

.lw-ds-kpi:hover {
    box-shadow: var(--lw-ds-shadow-md);
    transform: translateY(-2px);
}

.lw-ds-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.lw-ds-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--lw-ds-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.lw-ds-kpi-icon.is-primary { background: var(--lw-ds-primary-soft); color: var(--lw-ds-primary); }
.lw-ds-kpi-icon.is-secondary { background: var(--lw-ds-secondary-soft); color: var(--lw-ds-secondary); }
.lw-ds-kpi-icon.is-success { background: var(--lw-ds-success-soft); color: var(--lw-ds-success); }
.lw-ds-kpi-icon.is-warning { background: var(--lw-ds-warning-soft); color: var(--lw-ds-warning); }
.lw-ds-kpi-icon.is-info { background: var(--lw-ds-info-soft); color: var(--lw-ds-info); }

.lw-ds-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .74rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--lw-ds-radius-pill);
}

.lw-ds-kpi-trend.is-up { background: var(--lw-ds-success-soft); color: var(--lw-ds-success); }
.lw-ds-kpi-trend.is-down { background: var(--lw-ds-danger-soft); color: var(--lw-ds-danger); }
.lw-ds-kpi-trend.is-flat { background: var(--lw-ds-surface-alt); color: var(--lw-ds-text-muted); }

.lw-ds-kpi-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--lw-ds-text);
    line-height: 1.1;
}

.lw-ds-kpi-label {
    font-size: .82rem;
    color: var(--lw-ds-text-muted);
    font-weight: 600;
}

.lw-ds-kpi-footer {
    font-size: .74rem;
    color: var(--lw-ds-text-light);
}

/* ==========================================================================
   lw-ds-badge — generic status/tag pill (<x-lw.ui.badge>)
   ========================================================================== */

.lw-ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--lw-ds-radius-pill);
    line-height: 1.4;
    white-space: nowrap;
}

.lw-ds-badge.is-primary { background: var(--lw-ds-primary-soft); color: var(--lw-ds-primary); }
.lw-ds-badge.is-secondary { background: var(--lw-ds-secondary-soft); color: var(--lw-ds-secondary); }
.lw-ds-badge.is-success { background: var(--lw-ds-success-soft); color: var(--lw-ds-success); }
.lw-ds-badge.is-warning { background: var(--lw-ds-warning-soft); color: var(--lw-ds-warning); }
.lw-ds-badge.is-danger { background: var(--lw-ds-danger-soft); color: var(--lw-ds-danger); }
.lw-ds-badge.is-info { background: var(--lw-ds-info-soft); color: var(--lw-ds-info); }
.lw-ds-badge.is-neutral { background: var(--lw-ds-surface-alt); color: var(--lw-ds-text-muted); }

/* Channel badges — icon + text always, per the "never rely on color alone" rule */
.lw-ds-badge.is-whatsapp { background: rgba(37, 211, 102, .12); color: var(--lw-ds-whatsapp); }
.lw-ds-badge.is-facebook { background: rgba(24, 119, 242, .12); color: var(--lw-ds-facebook); }
.lw-ds-badge.is-instagram { background: rgba(214, 36, 159, .12); color: var(--lw-ds-instagram); }

/* ==========================================================================
   lw-ds-empty — empty state (<x-lw.ui.empty-state>)
   ========================================================================== */

.lw-ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    gap: 14px;
}

.lw-ds-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--lw-ds-primary-soft);
    color: var(--lw-ds-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.lw-ds-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lw-ds-text);
    margin: 0;
}

.lw-ds-empty-description {
    font-size: .87rem;
    color: var(--lw-ds-text-muted);
    max-width: 380px;
    margin: 0;
}

/* ==========================================================================
   lw-ds-skeleton — loading skeleton blocks (<x-lw.ui.skeleton>)
   ========================================================================== */

.lw-ds-skeleton {
    background: linear-gradient(90deg, var(--lw-ds-surface-alt) 25%, var(--lw-ds-border) 37%, var(--lw-ds-surface-alt) 63%);
    background-size: 400% 100%;
    animation: lwDsSkeletonShimmer 1.4s ease infinite;
    border-radius: var(--lw-ds-radius-sm);
}

@keyframes lwDsSkeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .lw-ds-skeleton { animation: none; }
}

/* ==========================================================================
   lw-ds-drawer — right-side slide-in drawer (<x-lw.ui.drawer>)
   ========================================================================== */

.lw-ds-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1050;
}

.lw-ds-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--lw-ds-surface);
    box-shadow: var(--lw-ds-shadow-lg);
    z-index: 1051;
    display: flex;
    flex-direction: column;
}

.lw-ds-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--lw-ds-border);
}

.lw-ds-drawer-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--lw-ds-text);
    margin: 0;
}

.lw-ds-drawer-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: var(--lw-ds-radius-sm);
    border: 1px solid var(--lw-ds-border);
    background: var(--lw-ds-surface);
    color: var(--lw-ds-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--lw-ds-transition);
}

.lw-ds-drawer-close:hover {
    color: var(--lw-ds-danger);
    border-color: var(--lw-ds-danger);
}

.lw-ds-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
}

.lw-ds-drawer-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--lw-ds-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 480px) {
    .lw-ds-drawer { width: 100vw; max-width: 100vw; }
}

/* ---- Drawer/overlay transition helpers, driven by Alpine's x-transition:enter/leave ---- */
.lw-ds-transition-200 { transition: all .2s ease; }
.lw-ds-transition-250 { transition: all .25s ease; }
.lw-ds-opacity-0 { opacity: 0; }
.lw-ds-opacity-100 { opacity: 1; }
.lw-ds-drawer-off { transform: translateX(100%); }
.lw-ds-drawer-on { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .lw-ds-transition-200,
    .lw-ds-transition-250 { transition: none; }
}