/* ===========================================================================
   Opytex CRM Suite — base theme
   Light/Dark mode via [data-bs-theme] + glassmorphism cards
   =========================================================================== */

:root {
    --opytex-primary: #5b5fef;
    --opytex-primary-dark: #4347c4;
    --opytex-radius: 16px;
    --opytex-sidebar-width: 260px;
}

[data-bs-theme="light"] {
    --opytex-bg: #f3f4fb;
    --opytex-surface: rgba(255, 255, 255, 0.65);
    --opytex-surface-solid: #ffffff;
    --opytex-border: rgba(15, 23, 42, 0.08);
    --opytex-text-muted: #64748b;
}

[data-bs-theme="dark"] {
    --opytex-bg: #0f1222;
    --opytex-surface: rgba(30, 34, 58, 0.55);
    --opytex-surface-solid: #1a1e36;
    --opytex-border: rgba(255, 255, 255, 0.08);
    --opytex-text-muted: #97a0c3;
}

body {
    background: var(--opytex-bg);
    min-height: 100vh;
    transition: background-color .3s ease, color .3s ease;
}

/* --- Glassmorphism card ------------------------------------------------- */
.glass-card {
    background: var(--opytex-surface);
    border: 1px solid var(--opytex-border);
    border-radius: var(--opytex-radius);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
}

/* --- Layout shell -------------------------------------------------------- */
.opytex-shell {
    display: flex;
    min-height: 100vh;
}

.opytex-sidebar {
    width: var(--opytex-sidebar-width);
    flex-shrink: 0;
    background: var(--opytex-surface-solid);
    border-right: 1px solid var(--opytex-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    transition: transform .25s ease;
}

.opytex-main {
    margin-left: var(--opytex-sidebar-width);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.opytex-brand {
    font-weight: 800;
    letter-spacing: .5px;
    background: linear-gradient(135deg, var(--opytex-primary), #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.opytex-nav .nav-link {
    color: var(--opytex-text-muted);
    border-radius: 12px;
    margin: 2px 8px;
    font-weight: 500;
    transition: all .15s ease;
}

.opytex-nav .nav-link:hover {
    background: rgba(91, 95, 239, 0.1);
    color: var(--opytex-primary);
}

.opytex-nav .nav-link.active {
    background: linear-gradient(135deg, var(--opytex-primary), #8b5cf6);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(91, 95, 239, 0.35);
}

.opytex-topbar {
    background: var(--opytex-surface);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--opytex-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

@media (max-width: 991.98px) {
    .opytex-sidebar {
        transform: translateX(-100%);
    }
    .opytex-sidebar.show {
        transform: translateX(0);
    }
    .opytex-main {
        margin-left: 0;
    }
}

/* --- Stat widget --------------------------------------------------------- */
.stat-widget .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.stat-widget .stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.1;
}

/* --- Login -------------------------------------------------------------- */
.opytex-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 20%, rgba(91, 95, 239, 0.25), transparent 45%),
                radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.25), transparent 45%),
                var(--opytex-bg);
}

.opytex-login-card {
    width: 100%;
    max-width: 420px;
}

/* --- Skeleton loading ---------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, var(--opytex-border) 25%, rgba(255,255,255,0.25) 37%, var(--opytex-border) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: 8px;
}

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

/* --- Misc ---------------------------------------------------------------- */
.bg-purple-subtle { background-color: rgba(139, 92, 246, .15); }
.text-purple-emphasis { color: #7c3aed; }

.cursor-pointer { cursor: pointer; }

.timeline-item {
    border-left: 2px solid var(--opytex-border);
    padding-left: 1rem;
    margin-left: .4rem;
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--opytex-primary);
}