/* ==========================================================================
   Lipslay Board Skin — shared dashboard / board visual system
   Loaded LAST in both layouts (admin + site) so it wins the cascade.
   Uses design tokens from lipslay-tokens.css (with fallbacks).
   ========================================================================== */

/* ---- Color guards: fix white-on-white & green-on-dark ---- */
.btn-light,
.btn-outline-light {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #cbd5e1 !important;
}
.btn-light:hover,
.btn-outline-light:hover {
    color: #0f172a !important;
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}
/* Green backgrounds must always render white text */
.bg-success,
.btn-success,
.badge-success,
.badge.bg-success {
    color: #fff !important;
}
.bg-success a {
    color: #fff !important;
}

/* ---- KPI / stat tile ---- */
.ls-dash-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--ls-radius-lg, 16px);
    border: 1px solid var(--ls-border, #e2e8f0);
    background: var(--ls-surface, #fff);
    box-shadow: var(--ls-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    padding: 1.05rem 1.15rem;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.ls-dash-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}
.ls-dash-tile .ls-dash-tile-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ls-muted, #64748b);
}
.ls-dash-tile .ls-dash-tile-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ls-ink, #0f172a);
    line-height: 1.2;
    margin-top: 0.15rem;
}
.ls-dash-tile .ls-dash-tile-foot {
    font-size: 0.74rem;
    color: var(--ls-muted, #64748b);
    margin-top: 0.25rem;
}
.ls-dash-tile i {
    font-size: 1.75rem;
    opacity: 0.85;
    flex-shrink: 0;
}

/* Top row: label + icon */
.ls-dash-tile-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.ls-dash-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    flex-shrink: 0;
}
.ls-dash-tile-icon svg { width: 20px; height: 20px; }

/* Soft sheen in the corner of colored tiles */
.ls-dash-tile--navy::after,
.ls-dash-tile--blue::after,
.ls-dash-tile--green::after,
.ls-dash-tile--coral::after,
.ls-dash-tile--amber::after,
.ls-dash-tile--violet::after,
.ls-dash-tile--pink::after {
    content: '';
    position: absolute;
    top: -45%;
    right: -22%;
    width: 72%;
    height: 72%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 62%);
    pointer-events: none;
}

/* Accent gradient tiles (colored KPIs — always white text) */
.ls-dash-tile--navy,
.ls-dash-tile--blue,
.ls-dash-tile--green,
.ls-dash-tile--coral,
.ls-dash-tile--amber,
.ls-dash-tile--violet,
.ls-dash-tile--pink {
    color: #fff;
    border: 0;
}
.ls-dash-tile--navy   { background: linear-gradient(135deg, #0f2a43, #1e3a5f); }
.ls-dash-tile--blue   { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.ls-dash-tile--green  { background: linear-gradient(135deg, #10b981, #059669); }
.ls-dash-tile--coral  { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.ls-dash-tile--amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ls-dash-tile--violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.ls-dash-tile--pink   { background: linear-gradient(135deg, #ec4899, #be185d); }
.ls-dash-tile--navy   .ls-dash-tile-label,
.ls-dash-tile--blue   .ls-dash-tile-label,
.ls-dash-tile--green  .ls-dash-tile-label,
.ls-dash-tile--coral  .ls-dash-tile-label,
.ls-dash-tile--amber  .ls-dash-tile-label,
.ls-dash-tile--violet .ls-dash-tile-label,
.ls-dash-tile--pink   .ls-dash-tile-label { color: rgba(255, 255, 255, 0.82); }
.ls-dash-tile--navy   .ls-dash-tile-value,
.ls-dash-tile--blue   .ls-dash-tile-value,
.ls-dash-tile--green  .ls-dash-tile-value,
.ls-dash-tile--coral  .ls-dash-tile-value,
.ls-dash-tile--amber  .ls-dash-tile-value,
.ls-dash-tile--violet .ls-dash-tile-value,
.ls-dash-tile--pink   .ls-dash-tile-value { color: #fff; }
.ls-dash-tile--navy   .ls-dash-tile-foot,
.ls-dash-tile--blue   .ls-dash-tile-foot,
.ls-dash-tile--green  .ls-dash-tile-foot,
.ls-dash-tile--coral  .ls-dash-tile-foot,
.ls-dash-tile--amber  .ls-dash-tile-foot,
.ls-dash-tile--violet .ls-dash-tile-foot,
.ls-dash-tile--pink   .ls-dash-tile-foot { color: rgba(255, 255, 255, 0.82); }
.ls-dash-tile--navy   a,
.ls-dash-tile--blue   a,
.ls-dash-tile--green  a,
.ls-dash-tile--coral  a,
.ls-dash-tile--amber  a,
.ls-dash-tile--violet a,
.ls-dash-tile--pink   a { color: #fff !important; }

/* ---- Section header ---- */
.ls-dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
}
.ls-dash-head h2,
.ls-dash-head .ls-dash-head-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ls-ink, #0f172a);
    margin: 0;
}
.ls-dash-head .ls-dash-head-sub {
    color: var(--ls-muted, #64748b);
    font-size: 0.86rem;
}

/* ---- Card ---- */
.ls-dash-card {
    background: var(--ls-surface, #fff);
    border: 1px solid var(--ls-border, #e2e8f0);
    border-radius: var(--ls-radius-lg, 16px);
    box-shadow: var(--ls-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.ls-dash-card .ls-dash-card-hd {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--ls-border, #e2e8f0);
    font-weight: 700;
    color: var(--ls-ink, #0f172a);
}
.ls-dash-card .ls-dash-card-bd {
    padding: 1.1rem;
}

/* ---- Buttons ---- */
.ls-dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 10px;
    padding: 0.5rem 0.95rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--ls-dur-micro, 150ms) var(--ls-ease, cubic-bezier(0.2, 0, 0, 1)),
        color var(--ls-dur-micro, 150ms) var(--ls-ease, cubic-bezier(0.2, 0, 0, 1)),
        border-color var(--ls-dur-micro, 150ms) var(--ls-ease, cubic-bezier(0.2, 0, 0, 1));
}
.ls-dash-btn--primary { background: var(--ls-brand-blue, #2563eb); color: #fff !important; }
.ls-dash-btn--primary:hover { background: #1d4ed8; }
.ls-dash-btn--green { background: var(--ls-emerald, #10b981); color: #fff !important; }
.ls-dash-btn--green:hover { background: #059669; }
.ls-dash-btn--navy { background: var(--ls-brand-navy, #0f2a43); color: #fff !important; }
.ls-dash-btn--navy:hover { background: #1e3a5f; }
.ls-dash-btn--coral { background: var(--ls-brand-coral, #e11d48); color: #fff !important; }
.ls-dash-btn--coral:hover { background: #be123c; }
.ls-dash-btn--outline { background: #fff; color: #334155 !important; border-color: #cbd5e1; }
.ls-dash-btn--outline:hover { background: #f8fafc; color: #0f172a !important; border-color: #94a3b8; }
.ls-dash-btn--sm { padding: 0.32rem 0.7rem; font-size: 0.78rem; border-radius: 8px; }

/* ---- Badges / pills ---- */
.ls-dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.14rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.ls-dash-badge--green       { background: #ecfdf5; color: #059669; }
.ls-dash-badge--green-solid { background: var(--ls-emerald, #10b981); color: #fff !important; }
.ls-dash-badge--blue        { background: #eff6ff; color: #1d4ed8; }
.ls-dash-badge--blue-solid  { background: var(--ls-brand-blue, #2563eb); color: #fff !important; }
.ls-dash-badge--amber       { background: #fff7ed; color: #c2410c; }
.ls-dash-badge--coral       { background: #fff1f2; color: #be123c; }
.ls-dash-badge--coral-solid { background: var(--ls-brand-coral, #e11d48); color: #fff !important; }
.ls-dash-badge--navy        { background: var(--ls-brand-navy, #0f2a43); color: #fff !important; }
.ls-dash-badge--muted       { background: #f1f5f9; color: #475569; }

/* ==========================================================================
   Admin dashboard (home.blade.php) — premium stat cards
   .stat-card is only used by the admin dashboard, safe to scope globally.
   ========================================================================== */
.stat-card {
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    color: #fff !important;
    transition: transform var(--ls-dur-std, 250ms) var(--ls-ease, cubic-bezier(0.2, 0, 0, 1)),
        box-shadow var(--ls-dur-std, 250ms) var(--ls-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18) !important; }
.stat-card.bg-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; }
.stat-card.bg-success { background: linear-gradient(135deg, #10b981, #059669) !important; }
.stat-card.bg-info    { background: linear-gradient(135deg, #0ea5e9, #0369a1) !important; }
.stat-card .card-body { padding: 1.05rem 1.15rem; }
.stat-card .stat-value { font-size: 1.45rem; font-weight: 800; }
.stat-card .small { color: rgba(255, 255, 255, 0.82) !important; }
.stat-card i { font-size: 1.9rem; opacity: 0.9; }

/* ==========================================================================
   Partner "My Profile" tab nav
   ========================================================================== */
.ls-dash-tabs .nav-link {
    color: #334155;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    margin: 0 0.15rem 0.15rem 0;
    border: 1px solid #e2e8f0;
    background: #fff;
}
.ls-dash-tabs .nav-link.active {
    background: #0f2a43;
    border-color: #0f2a43;
    color: #fff;
}
.ls-dash-tabs .nav-link:hover:not(.active) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}



/* ---- Empty state (standardized, centered) ---- */
.ls-dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: var(--ls-muted, #64748b);
}
.ls-dash-empty .ls-dash-empty__ico {
    font-size: 2rem;
    line-height: 1;
    opacity: 0.35;
}
.ls-dash-empty .ls-dash-empty__hint {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ls-muted, #64748b);
}

/* ---- Premium form (shared by Settings / Growth / Profile) ---- */
.ls-premium-form .form-control,
.ls-premium-form .form-select {
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: none;
    font-size: 0.9rem;
}
.ls-premium-form .form-control:focus,
.ls-premium-form .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ls-premium-form .form-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: #334155;
}
.ls-premium-form .input-group-text {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 10px 0 0 10px;
}
.ls-premium-form .input-group > .form-control {
    border-radius: 0 10px 10px 0;
}

/* ---- Masonry grid (Media / Portfolio) ---- */
.ls-masonry {
    columns: 3;
    column-gap: 1rem;
}
.ls-masonry .ls-masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}
/* Never let an image inside the masonry overflow its column. */
.ls-masonry img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
@media (max-width: 992px) { .ls-masonry { columns: 2; } }
@media (max-width: 576px) { .ls-masonry { columns: 1; } }

/* ---- Media card with hover overlay ---- */
.ls-media-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--ls-border, #e2e8f0);
    background: #fff;
    box-shadow: var(--ls-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ls-media-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.ls-media-card .ls-media-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f1f3f5;
}
.ls-media-card .ls-media-thumb img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}
.ls-media-card .ls-media-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.ls-media-card:hover .ls-media-overlay { opacity: 1; }
.ls-media-card .ls-media-body { padding: 0.7rem 0.8rem; }

/* ---- Skeleton shimmer ---- */
.ls-shimmer {
    position: relative;
    overflow: hidden;
    background: #eef1f5;
}
.ls-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: ls-shimmer 1.4s infinite;
}
@keyframes ls-shimmer { 100% { transform: translateX(100%); } }

/* ---- Notification bell (partner dashboard header) ---- */
.ls-notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    color: var(--ls-brand-navy, #0f2a43);
    border: 1px solid var(--ls-border, #e2e8f0);
    box-shadow: var(--ls-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    text-decoration: none;
}
.ls-notif-bell:hover { color: var(--ls-brand-blue, #2563eb); border-color: var(--ls-brand-blue, #2563eb); text-decoration: none; }
.ls-notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
}

/* ---- Premium dark utility (navy gradient) ---- */
.bg-premium-dark {
    background: linear-gradient(135deg, #0f2a43, #1e3a5f) !important;
    color: #fff !important;
}

/* ---- Luxury data table ---- */
.ls-table { font-size: 0.9rem; }
.ls-table thead th {
    color: #64748b;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 0.85rem;
    background: #f8fafc;
    white-space: nowrap;
}
.ls-table tbody td { padding: 0.85rem; border-color: #f1f5f9; vertical-align: middle; }
.ls-table tbody tr:hover { background: #f8fafc; }

/* ---- Client avatar ---- */
.ls-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ls-brand-navy, #0f2a43);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ---- Notification list items ---- */
.ls-notif-item { display: flex; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid #f1f5f9; align-items: flex-start; }
.ls-notif-item:last-child { border-bottom: 0; }
.ls-notif-item--unread { background: #eff6ff; }
.ls-notif-icon { width: 36px; height: 36px; border-radius: 10px; background: #f8fafc; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; }
.ls-notif-body { flex: 1; min-width: 0; }