/* =========================================================================
   Alcove CRM — Clean Corporate Theme
   Loaded AFTER Bootstrap and each page's inline <style>, so it refines the
   whole app from one place (colors, cards, tables, buttons, forms, login).
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Refined corporate palette (overrides the inline page variables) */
    --primary-color: #14b8a6;      /* teal-500 (light accent)      */
    --primary-hover: #0d9488;      /* teal-600                     */
    --secondary-color: #0f766e;    /* teal-700                     */
    --accent-color: #2dd4bf;       /* teal-400                     */
    --text-color: #1e293b;         /* slate-800                    */
    --muted-color: #64748b;        /* slate-500                    */
    --light-bg: #f4f6fb;           /* app background               */
    --surface: #ffffff;            /* cards / panels               */
    --border-color: #e6e9f0;
    --ring: rgba(20, 184, 166, .18);
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
}

/* ---- Base ------------------------------------------------------------- */
body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    color: var(--text-color);
    background-color: var(--light-bg);
    -webkit-font-smoothing: antialiased;
    letter-spacing: .1px;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text-color); }
a { color: var(--primary-color); }
a:hover { color: var(--primary-hover); }

/* ---- Cards ------------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: .5rem 1rem;
    transition: all .15s ease;
}
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 4px 10px var(--ring);
}
.btn-sm { padding: .3rem .65rem; }
.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary:hover { background-color: var(--primary-color); border-color: var(--primary-color); }

/* ---- Tables ----------------------------------------------------------- */
.table { color: var(--text-color); }
.table > thead th,
.table thead th {
    background-color: #f8fafc;
    color: var(--muted-color);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    vertical-align: middle;
}
.table > tbody > tr > td { vertical-align: middle; border-color: #eef1f6; }
.table-hover > tbody > tr:hover > * { background-color: #f5f8ff; }
.table-responsive { border-radius: var(--radius); }

/* ---- Forms ------------------------------------------------------------ */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid #d7dce5;
    padding: .55rem .85rem;
    color: var(--text-color);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--ring);
}
.form-label { font-weight: 500; color: #475569; margin-bottom: .35rem; }
.input-group-text { background: #f8fafc; border-color: #d7dce5; color: var(--muted-color); }

/* ---- Badges ----------------------------------------------------------- */
.badge { font-weight: 600; padding: .4em .65em; border-radius: 6px; }

/* ---- Summary / stat cards (dashboards) -------------------------------- */
.summary-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.summary-value { font-weight: 700; color: var(--text-color); }
.summary-title { color: var(--muted-color); font-size: .85rem; font-weight: 500; }

/* =========================================================================
   APP SHELL — dark navy sidebar + modern topbar (reference design)
   ========================================================================= */
.sidebar {
    background: #2a3654 !important;            /* softer slate-navy (lighter) */
    background-image: linear-gradient(180deg, #303d5e 0%, #232e49 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 2px 0 16px rgba(8, 15, 40, .18) !important;
}
/* Alcove logo — transparent (no chip), compact */
.sidebar-logo-chip {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border-radius: 0; padding: 0;
    box-shadow: none;
    width: 130px; max-width: 100%;
}
/* Render the full-colour logo as a clean white silhouette for the dark sidebar */
.sidebar-logo-chip img { width: 100%; height: auto; display: block; filter: brightness(0) invert(1); }
.sidebar.collapsed .sidebar-logo-chip { display: none; }
.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    padding: 1.25rem 1.25rem !important;
}
/* Brand block */
.sidebar-brand { display: flex; align-items: center; gap: .75rem; }
.sidebar-brand .brand-icon {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), #1e3a8a);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.35rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .45);
}
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar-brand .brand-name { color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .3px; }
.sidebar-brand .brand-sub { color: #8a97c2; font-size: .72rem; font-weight: 500; }
.sidebar-header h3 { color: #fff !important; font-style: normal !important; }
.sidebar .toggle-sidebar { color: #8a97c2; }

.sidebar-menu { padding: .75rem .5rem !important; }
.sidebar .nav-item { margin: .15rem .5rem !important; font-weight: 500 !important; }
.sidebar .nav-link {
    color: #aab4d4;
    border-radius: 10px;
    padding: .7rem .9rem;
    font-weight: 500;
    font-size: .95rem;
}
.sidebar .nav-link i { color: inherit; opacity: .9; }
.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}
.sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--primary-color), #0d9488);
    color: #fff;
    box-shadow: 0 6px 16px rgba(20, 184, 166, .4);
}
.sidebar .nav-link.active i { opacity: 1; }
.sidebar-footer { background-color: transparent !important; border-top-color: rgba(255,255,255,.07) !important; }
.sidebar .company-name { color: #fff !important; }
.sidebar .company-tagline { color: #8a97c2 !important; }

/* ---- Topbar ----------------------------------------------------------- */
.navbar {
    background: var(--surface) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: .65rem 1rem !important;
}
.topbar-search {
    position: relative; max-width: 420px; width: 100%;
}
.topbar-search input {
    border-radius: 999px;
    background: #f4f6fb;
    border: 1px solid var(--border-color);
    padding: .55rem 1rem .55rem 2.5rem;
    width: 100%;
    font-size: .9rem;
}
.topbar-search input:focus { background: #fff; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.topbar-search .search-icon {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-color);
}
.topbar-icon-btn {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: #475569;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    transition: all .15s ease;
}
.topbar-icon-btn:hover { background: #e0f5f1; color: var(--primary-color); border-color: #9fe5da; }
.topbar-icon-btn .dot-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #ef4444; color: #fff;
    font-size: .68rem; font-weight: 700;
    border-radius: 999px; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.user-profile-btn {
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}
.user-profile-btn .user-role { display:block; font-size:.72rem; color: var(--muted-color); font-weight: 500; text-align:left; }

/* ---- Stat tiles (dashboard) ------------------------------------------ */
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-tile .stat-ico {
    width: 54px; height: 54px; flex: 0 0 54px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.stat-ico.blue   { background: #d7f5f0; color: #0d9488; }
.stat-ico.green  { background: #e6f7ee; color: #16a34a; }
.stat-ico.purple { background: #f0eaff; color: #7c3aed; }
.stat-ico.orange { background: #fff1e0; color: #ea8a0b; }
.stat-ico.red    { background: #ffe9e9; color: #dc2626; }
.stat-tile .stat-label { color: var(--muted-color); font-size: .85rem; font-weight: 500; margin-bottom: .15rem; }
.stat-tile .stat-num { font-size: 1.7rem; font-weight: 700; color: var(--text-color); line-height: 1.1; }
.chart-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); }
.chart-card .card-title { font-weight: 600; font-size: 1.05rem; }

/* ---- Alerts / flash --------------------------------------------------- */
.alert { border: 1px solid transparent; border-radius: var(--radius-sm); }

/* ---- Subtle scrollbars ------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Login / auth pages ---------------------------------------------- */
body.auth-page,
.login-page {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #2dd4bf 100%) !important;
    background-image: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #2dd4bf 100%) !important;
}
.login-card, .auth-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(2, 8, 40, .25);
}