/* ── RGS Brand Palette ─────────────────────────────────────── */
:root {
    --rgs-grey:        #585C63;
    --rgs-grey-dark:   #484B52;
    --rgs-grey-tint:   #EEEEF0;
    --rgs-yellow:      #CAB028;
    --rgs-yellow-tint: #FBF5DC;
    --rgs-red:         #D63B3B;
    --rgs-red-tint:    #FDECEC;
    --rgs-teal:        #1B9E82;
    --rgs-teal-light:  #33B297;
    --rgs-teal-tint:   #E3F4F0;
}

/* ── Navbar brand logo ─────────────────────────────────────── */
.crm-navbar .brand-logo.crm-brand-logo {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    height: 64px;        /* match navbar so flex centering works */
    line-height: 1 !important; /* override Materialize's line-height:64px */
}

.crm-brand-block {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.crm-brand-rgs {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 4px;
    line-height: 1;
}

.crm-brand-pills {
    display: flex;
    gap: 3px;
    margin-top: 5px;
}

.crm-brand-pills span {
    flex: 1;
    height: 4px;
    border-radius: 2px;
}

.pill-y { background: var(--rgs-yellow); }
.pill-r { background: var(--rgs-red); }
.pill-t { background: var(--rgs-teal); }

.crm-brand-label {
    color: rgba(255,255,255,.7);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: .5px;
}

/* ── Materialize indigo → RGS brand ────────────────────────── */
/* plain .indigo (no darken/lighten) → teal */
.indigo:not(.darken-1):not(.darken-2):not(.darken-3):not(.darken-4):not(.lighten-1):not(.lighten-2):not(.lighten-3):not(.lighten-4):not(.lighten-5) {
    background-color: var(--rgs-teal) !important;
}
.indigo.darken-1  { background-color: var(--rgs-grey) !important; }
.indigo.darken-2  { background-color: var(--rgs-grey) !important; }
.indigo.darken-3  { background-color: var(--rgs-grey-dark) !important; }
.indigo.lighten-1 { background-color: var(--rgs-teal-light) !important; }

/* indigo text → teal */
.indigo-text,
.indigo-text.text-darken-2 { color: var(--rgs-teal) !important; }

/* Brand colour utility classes (for stat cards, chips, etc.) */
.rgs-grey   { background-color: var(--rgs-grey)   !important; color: #fff !important; }
.rgs-teal   { background-color: var(--rgs-teal)   !important; color: #fff !important; }
.rgs-yellow { background-color: var(--rgs-yellow) !important; color: #fff !important; }
.rgs-red    { background-color: var(--rgs-red)    !important; color: #fff !important; }

/* ── Base ──────────────────────────────────────────────────── */
body { font-family: 'Roboto', sans-serif; background: #f5f5f5; }

/* ── Navbar ────────────────────────────────────────────────── */
.crm-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }

/* Colour bar under brand name in sidenav */
.brand-bar {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    height: 4px;
}
.brand-bar span {
    flex: 1;
    border-radius: 2px;
}
.brand-bar .bb-y { background: var(--rgs-yellow); }
.brand-bar .bb-r { background: var(--rgs-red); }
.brand-bar .bb-t { background: var(--rgs-teal); }

/* ── Sidebar (desktop) ─────────────────────────────────────── */
.crm-sidebar {
    position: fixed; top: 64px; left: 0;
    width: 240px; height: calc(100vh - 64px);
    background: #fff; box-shadow: 2px 0 4px rgba(0,0,0,.08);
    z-index: 998; overflow-y: auto;
}

.crm-nav { list-style: none; padding: 8px 0; margin: 0; }

.crm-nav-section {
    padding: 20px 20px 8px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 1.5px; color: #bdbdbd;
    text-transform: uppercase;
}

.crm-nav-item a {
    display: flex; align-items: center; gap: 16px;
    padding: 11px 16px 11px 24px;
    margin-right: 8px;
    border-radius: 0 24px 24px 0;
    color: #424242; font-size: 14px; font-weight: 400;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.crm-nav-item a .material-icons { font-size: 20px; color: #9e9e9e; transition: color .15s; }

.crm-nav-item a:hover {
    background: var(--rgs-teal-tint);
    color: var(--rgs-teal);
}
.crm-nav-item a:hover .material-icons { color: var(--rgs-teal); }

.crm-nav-item.crm-nav-active a {
    background: var(--rgs-teal-tint);
    color: var(--rgs-teal);
    font-weight: 500;
}
.crm-nav-item.crm-nav-active a .material-icons { color: var(--rgs-teal); }

/* ── Layout ────────────────────────────────────────────────── */
.crm-main { margin-left: 240px; padding-top: 64px; min-height: 100vh; }
.crm-main-full { padding-top: 64px; min-height: 100vh; }
.crm-content { padding: 32px 28px; max-width: 1200px; margin: 0 auto; }

/* Grid pages: stretch table card to fill remaining viewport */
main.crm-grid-main {
    display: flex; flex-direction: column;
    height: calc(100vh - 64px); overflow: hidden;
}
main.crm-grid-main .crm-content {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; padding-bottom: 0; width: 100%;
}
.crm-fill { flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0; }
.crm-table-scroll { flex: 1; overflow-y: auto; overflow-x: auto; min-height: 0; }
.crm-pager {
    flex-shrink: 0; display: flex; align-items: center;
    justify-content: flex-end; gap: 4px;
    padding: 8px 12px; border-top: 1px solid #f0f0f0;
    font-size: 13px; color: #757575;
}
.crm-pager a { display: inline-flex; align-items: center; padding: 4px 6px;
               border-radius: 4px; color: #757575; text-decoration: none; }
.crm-pager a:hover { background: #f5f5f5; color: var(--rgs-teal); }
.crm-pager .pager-info { padding: 0 8px; }

@media (max-width: 992px) {
    .crm-main { margin-left: 0; }
    .crm-content { padding: 24px 16px; }
}

/* ── Page header ───────────────────────────────────────────── */
.crm-page-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.crm-page-title { font-size: 22px; font-weight: 400; color: #212121; margin: 0; }
.crm-breadcrumb { font-size: 13px; color: #9e9e9e; margin-bottom: 4px; }

/* ── Cards ─────────────────────────────────────────────────── */
.crm-card {
    background: #fff; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    overflow: hidden;
}

/* ── Data tables ───────────────────────────────────────────── */
.crm-table { width: 100%; border-collapse: collapse; }

.crm-table thead th {
    padding: 12px 16px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .8px;
    color: #9e9e9e; border-bottom: 1px solid #eeeeee;
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
    background: #fff;
    box-shadow: inset 0 -1px 0 #eeeeee;
}

.crm-table tbody td {
    padding: 10px 16px; color: #424242;
    border-bottom: 1px solid #fafafa;
    vertical-align: middle; font-size: 14px;
    white-space: nowrap;
}

.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr:hover td { background: #fafafa; }
.crm-table .col-actions { width: 80px; min-width: 80px; text-align: right; white-space: nowrap; }

/* ── Icon buttons ──────────────────────────────────────────── */
.btn-icon {
    width: 36px; height: 36px; border-radius: 50%;
    border: none; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s; color: #9e9e9e; text-decoration: none;
}
.btn-icon:hover { background: #f5f5f5; }
.btn-icon.btn-edit:hover   { color: var(--rgs-teal);   background: var(--rgs-teal-tint); }
.btn-icon.btn-email:hover  { color: var(--rgs-teal);   background: var(--rgs-teal-tint); }
.btn-icon.btn-delete:hover { color: var(--rgs-red);    background: var(--rgs-red-tint); }
.btn-icon .material-icons { font-size: 20px; }

/* ── Sortable column headers ───────────────────────────────── */
.sort-link { display:inline-flex; align-items:center; gap:3px; text-decoration:none; color:inherit; white-space:nowrap; }
.sort-link:hover { color:var(--rgs-teal); }
.sort-link .sort-icon { font-size:14px; color:#d0d0d0; }
.sort-link:hover .sort-icon { color:var(--rgs-teal); }
.sort-link.sort-active { color:var(--rgs-teal); }
.sort-link.sort-active .sort-icon { color:var(--rgs-teal); }

/* ── Filter tabs ───────────────────────────────────────────── */
.crm-filter-tabs { display:flex; gap:2px; background:#eeeeee; padding:2px; border-radius:6px; }
.crm-filter-tab  { padding:4px 12px; border-radius:4px; font-size:13px; color:#757575; text-decoration:none; white-space:nowrap; }
.crm-filter-tab.active { background:#fff; color:#424242; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.crm-filter-tab:hover:not(.active) { background:rgba(255,255,255,.5); color:#424242; }

/* ── Search box ────────────────────────────────────────────── */
.crm-search-form { display:flex; align-items:center; }
.crm-search-box {
    display: flex; align-items: center; gap: 6px;
    background: #f5f5f5; border: 1px solid transparent;
    border-radius: 24px; padding: 5px 14px;
    transition: background .15s, border-color .15s;
}
.crm-search-box:focus-within { background: #fff; border-color: var(--rgs-teal); }
.crm-search-box .material-icons { font-size: 18px; color: #9e9e9e; flex-shrink: 0; }
.crm-search-input {
    border: none; background: transparent; outline: none;
    font-size: 14px; color: #424242; width: 220px;
    font-family: inherit;
}
.crm-search-input::placeholder { color: #bdbdbd; }
.crm-search-clear {
    display: flex; align-items: center; color: #9e9e9e;
    text-decoration: none; flex-shrink: 0;
}
.crm-search-clear:hover { color: var(--rgs-red); }
.crm-search-clear .material-icons { font-size: 18px; }

/* ── Stat cards (dashboard) ────────────────────────────────── */
.stat-card {
    border-radius: 8px; padding: 24px; color: #fff;
    display: flex; align-items: center; gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    margin-bottom: 0;
}
.stat-card .stat-icon  { font-size: 40px; opacity: .8; }
.stat-card .stat-value { font-size: 36px; font-weight: 300; line-height: 1; }
.stat-card .stat-label { font-size: 13px; opacity: .9; margin-top: 4px; }

/* ── Forms ─────────────────────────────────────────────────── */
.crm-form-card {
    background: #fff; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    padding: 32px; max-width: 640px;
}

.crm-form-actions {
    display: flex; gap: 12px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid #f5f5f5;
}

/* Auth */
.auth-wrapper { display: flex; justify-content: center; padding: 40px 16px; }
.auth-card {
    background: #fff; border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    padding: 40px; width: 100%; max-width: 420px;
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo h5 { font-size: 16px; font-weight: 400; color: #757575; margin: 8px 0 0; }

/* ── Chips ─────────────────────────────────────────────────── */
.crm-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 12px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
}
.chip-pending   { background: var(--rgs-red-tint);    color: var(--rgs-red); }
.chip-completed { background: var(--rgs-teal-tint);   color: var(--rgs-teal); }
.chip-dismissed { background: #f5f5f5;                color: #9e9e9e; }
.chip-followon  { background: var(--rgs-yellow-tint); color: var(--rgs-yellow); }
.type-chip      { background: var(--rgs-teal-tint);   color: var(--rgs-teal); }

/* ── Alerts ─────────────────────────────────────────────────── */
.crm-alert-success {
    background: var(--rgs-teal-tint); border-radius: 6px;
    padding: 12px 16px; color: var(--rgs-teal); font-size: 14px;
    display: flex; align-items: center;
}

/* Admin: admin-on shield button */
.btn-icon.btn-admin-on { color: var(--rgs-yellow); }
.btn-icon.btn-admin-on:hover { background: var(--rgs-yellow-tint); color: #8a7318; }

/* ── Empty state ───────────────────────────────────────────── */
.crm-empty { text-align: center; padding: 64px 24px; color: #bdbdbd; }
.crm-empty .material-icons { font-size: 64px; display: block; margin-bottom: 12px; }
.crm-empty p { font-size: 15px; }

/* ── Validation errors ─────────────────────────────────────── */
.crm-errors {
    background: var(--rgs-red-tint); border-radius: 6px;
    padding: 12px 16px; margin-bottom: 20px;
    color: var(--rgs-red); font-size: 14px;
}
.crm-errors ul { margin: 0; padding-left: 18px; }