/* ============================================================
   Stavo Adventures Office — Theme
   Palette: deep acacia green, savanna ochre accent, warm stone bg
   ============================================================ */

:root {
    --sa-ink: #20261F;
    --sa-forest: #26362B;
    --sa-forest-dark: #1B281E;
    --sa-ochre: #C97C2A;
    --sa-ochre-dark: #A8621B;
    --sa-stone: #F6F4EF;
    --sa-stone-dark: #E9E5DA;
    --sa-muted: #6E6A5E;
    --sa-danger: #B4432E;
    --sa-success: #4C7A4F;
    --font-display: 'Sora', sans-serif;
    --font-body: 'Work Sans', sans-serif;
}

body {
    font-family: var(--font-body);
    background: var(--sa-stone);
    color: var(--sa-ink);
}

h1, h2, h3, h4, h5, h6, .sidebar-brand, .btn {
    font-family: var(--font-display);
}

.app-wrapper { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.app-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--sa-forest);
    color: #EDEAE0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-brand {
    padding: 1.25rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sidebar-brand i { color: var(--sa-ochre); }

.sidebar-nav { padding: 0.75rem 0; overflow-y: auto; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.25rem;
    color: #C9C6BA;
    text-decoration: none;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-nav a.active {
    background: rgba(201,124,42,0.15);
    color: #fff;
    border-left-color: var(--sa-ochre);
}
.sidebar-nav a i { width: 1.1rem; text-align: center; }
.sidebar-divider {
    margin: 0.75rem 1.25rem 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8A8676;
}

/* ---------- Main content ---------- */
.app-content { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    background: #fff;
    border-bottom: 1px solid var(--sa-stone-dark);
    padding: 0.85rem 1.5rem;
}
.app-main { padding: 1.5rem; flex-grow: 1; }

/* ---------- Components ---------- */
.card { border: 1px solid var(--sa-stone-dark); border-radius: 10px; }
.card-stat {
    background: #fff;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--sa-stone-dark);
}
.card-stat .stat-label { font-size: 0.78rem; color: var(--sa-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.card-stat .stat-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--sa-forest-dark); }

.btn-primary { background: var(--sa-ochre); border-color: var(--sa-ochre); }
.btn-primary:hover { background: var(--sa-ochre-dark); border-color: var(--sa-ochre-dark); }
.btn-outline-primary { color: var(--sa-ochre-dark); border-color: var(--sa-ochre); }
.btn-outline-primary:hover { background: var(--sa-ochre); border-color: var(--sa-ochre); }

.badge-stage-new { background: #D9D6C8; color: #4A4736; }
.badge-stage-contacted { background: #CFE0D6; color: #2E5138; }
.badge-stage-quote_sent { background: #D8E3EE; color: #2C4A66; }
.badge-stage-negotiation { background: #F0DDBB; color: #7A5217; }
.badge-stage-won { background: #C9E2C4; color: #2C5E28; }
.badge-stage-lost { background: #E7CFCB; color: #7A3227; }

table.table thead { background: var(--sa-stone-dark); }
table.table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sa-muted); }

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--sa-forest) 0%, var(--sa-forest-dark) 100%);
}
.login-card {
    background: #fff;
    border-radius: 14px;
    padding: 2.5rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.login-card .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--sa-forest-dark); margin-bottom: 0.25rem; }
.login-card .brand i { color: var(--sa-ochre); }

@media (max-width: 991px) {
    .app-sidebar { position: fixed; left: -260px; z-index: 1050; transition: left 0.2s; }
    .app-sidebar.open { left: 0; }
}