/* =====================================================================
   THEME-SAAS  —  Global "pro SaaS" polish layer
   ---------------------------------------------------------------------
   Loaded LAST, after Bootstrap + the template styles, so it refines the
   existing look without changing any markup or behaviour.

   Design principles (safe by construction):
   • Only cosmetic properties: font, radius, shadow, spacing, transitions,
     hover/focus accents. No layout (width/position/display/float).
   • Colours come from Bootstrap CSS variables (var(--bs-*)) so the app's
     native light / dark (data-bs-theme="dark") modes keep working.
   • A single brand accent (--brand) drives focus rings & active states.
   ===================================================================== */

:root {
    --brand:        #10b981;
    --brand-2:      #2f6bff;
    --brand-accent: #7c3aed;
    --brand-rgb:    16, 185, 129;

    --saas-radius:      .7rem;
    --saas-radius-sm:   .5rem;
    --saas-radius-lg:   1rem;

    --saas-shadow-sm:   0 1px 2px rgba(16, 24, 40, .06);
    --saas-shadow:      0 4px 18px rgba(16, 24, 40, .07);
    --saas-shadow-lg:   0 18px 50px rgba(16, 24, 40, .14);

    --saas-transition:  .18s ease;
}

[data-bs-theme="dark"] {
    --saas-shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --saas-shadow:      0 4px 18px rgba(0, 0, 0, .45);
    --saas-shadow-lg:   0 18px 50px rgba(0, 0, 0, .6);
}

/* ---------- Typography ------------------------------------------------ */
body {
    font-family: 'Inter', 'Nunito Sans', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.text-muted { opacity: .92; }

/* ---------- Cards ----------------------------------------------------- */
.card {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--saas-radius-lg);
    box-shadow: var(--saas-shadow);
    transition: box-shadow var(--saas-transition), transform var(--saas-transition);
}
.card:hover { box-shadow: var(--saas-shadow-lg); }

.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    font-weight: 600;
}

/* The inbox chat-list items are <a class="card"> — keep them flat & snappy */
.chat-list .card,
.chat-list-item.card {
    box-shadow: none;
    border-radius: var(--saas-radius-sm);
}
.chat-list .card:hover { box-shadow: var(--saas-shadow-sm); transform: none; }

/* ---------- Buttons --------------------------------------------------- */
.btn {
    border-radius: var(--saas-radius);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform var(--saas-transition), box-shadow var(--saas-transition),
        background-color var(--saas-transition), border-color var(--saas-transition);
}
.btn:active { transform: translateY(1px); }
.btn-success,
.btn-primary { box-shadow: 0 2px 8px rgba(var(--brand-rgb), .18); }
.btn-success:hover,
.btn-primary:hover { box-shadow: 0 6px 16px rgba(var(--brand-rgb), .26); }
.btn-sm  { border-radius: var(--saas-radius-sm); }
.btn-lg  { border-radius: var(--saas-radius-lg); }

/* keep pill buttons pill-shaped */
.rounded-5, .rounded-pill { border-radius: 50rem !important; }

/* ---------- Forms ----------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--saas-radius);
    transition: border-color var(--saas-transition), box-shadow var(--saas-transition);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15);
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15);
}
.input-group-text {
    border-radius: var(--saas-radius);
    background: var(--bs-tertiary-bg);
}

/* ---------- Badges ---------------------------------------------------- */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--saas-radius-sm);
    padding: .4em .6em;
}
.badge.rounded-pill { border-radius: 50rem; }

/* ---------- Tables ---------------------------------------------------- */
.table > :not(caption) > * > * { padding: .8rem .9rem; }
.table thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--bs-secondary-color);
    border-bottom-width: 1px;
}
.table-hover > tbody > tr { transition: background-color var(--saas-transition); }

/* ---------- Dropdowns & modals --------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--saas-radius);
    box-shadow: var(--saas-shadow-lg);
    padding: .35rem;
}
.dropdown-item {
    border-radius: var(--saas-radius-sm);
    transition: background-color var(--saas-transition);
}
.modal-content {
    border: 0;
    border-radius: var(--saas-radius-lg);
    box-shadow: var(--saas-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--bs-border-color-translucent); }

/* ---------- Alerts ---------------------------------------------------- */
.alert { border: 0; border-radius: var(--saas-radius); }

/* ---------- Sidebar / topbar accents (cosmetic only) ----------------- */
.sidebar-nav-link {
    border-radius: var(--saas-radius);
    transition: background-color var(--saas-transition), color var(--saas-transition);
}
.btn-toggle, .btn-actions { transition: background-color var(--saas-transition); }

/* ---------- Scrollbars (subtle, modern) ------------------------------ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 50rem;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--bs-secondary-color); background-clip: content-box; }

/* ---------- Toastify (lightweight toast) themed to brand ------------- */
.toastify {
    border-radius: var(--saas-radius);
    box-shadow: var(--saas-shadow-lg);
    font-family: inherit;
    font-weight: 600;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.toastify .toast-close { opacity: .8; padding-left: 6px; }
.toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.toast-error   { background: linear-gradient(135deg, #e23b3b, #ff5f6d); }
.toast-warning { background: linear-gradient(135deg, #e8920a, #f7b733); }
.toast-info    { background: linear-gradient(135deg, #2a6df0, #00c6ff); }