/* ─────────────────────────────────────────────────────────────────────────────
   Mode Marketing CRM — Main Stylesheet
   Dark theme · Exo font · Mode brand palette
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Variables ───────────────────────────────────────────────────────────────── */
:root {
    --void:       #0A0A0A;
    --carbon:     #141414;
    --gunmetal:   #1E1E1E;
    --smoke:      #666666;
    --dark-grey:  #404041;
    --chalk:      #F0F0F0;
    --white:      #FFFFFF;
    --volt:       #C8FF00;
    --volt-hover: #DFFF00;

    /* Ticket colour states */
    --col-new:      #00C853;
    --col-warning:  #FF9800;
    --col-alert:    #F44336;
    --col-payment:  #FFD600;
    --col-baseline: transparent;

    --radius:     2px;
    --nav-h:      120px;
    --sidebar-w:  220px;
    --tk-sidebar: 280px;
    --gap:        24px;
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: 'Exo', sans-serif;
    background: var(--void);
    color: var(--chalk);
    line-height: 1.6;
    min-height: 100vh;
}
a { color: var(--volt); text-decoration: none; }
a:hover { color: var(--volt-hover); }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }

/* ── Typography ──────────────────────────────────────────────────────────────── */
h1 { font-size: 24px; font-weight: 600; color: var(--white); }
h2 { font-size: 18px; font-weight: 600; color: var(--white); }
h3 { font-size: 14px; font-weight: 500; color: var(--chalk); }
p  { font-size: 14px; color: var(--chalk); }

/* ── Nav ─────────────────────────────────────────────────────────────────────── */
.crm-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    background: rgba(10,10,10,0.96);
    border-bottom: 0.5px solid var(--gunmetal);
    backdrop-filter: blur(8px);
    z-index: 100;
}
.crm-nav__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.crm-nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.crm-nav__logo-img {
    height: 88px;
    width: auto;
    display: block;
}
.crm-nav__logo-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--smoke);
    text-transform: uppercase;
    border-left: 0.5px solid var(--gunmetal);
    padding-left: 10px;
}
.crm-nav__links {
    display: flex;
    align-items: center;
    gap: 24px;
}
.crm-nav__link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smoke);
    transition: color 200ms ease-out;
}
.crm-nav__link:hover { color: var(--chalk); }
.crm-nav__user {
    font-size: 12px;
    color: var(--smoke);
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-nav__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--gunmetal);
    flex-shrink: 0;
}
.crm-nav__role {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--gunmetal);
    color: var(--smoke);
    padding: 2px 6px;
    border-radius: var(--radius);
}

.crm-nav__link--portal {
    color: var(--volt) !important;
    opacity: 0.8;
}
.crm-nav__link--portal:hover { opacity: 1; }

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.crm-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    padding-top: var(--nav-h);
}
.crm-layout--ticket {
    grid-template-columns: 1fr var(--tk-sidebar);
}
.crm-sidebar {
    background: var(--carbon);
    border-right: 0.5px solid var(--gunmetal);
    padding: 24px 0;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
}
.crm-main {
    padding: 24px;
    max-width: 100%;
    overflow-x: hidden;
}
.crm-main--ticket {
    padding: 0;
    display: flex;
    flex-direction: column;
}
.tk-sidebar {
    background: var(--carbon);
    border-left: 0.5px solid var(--gunmetal);
    padding: 24px 20px;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
}

/* ── Sidebar nav ─────────────────────────────────────────────────────────────── */
.crm-sidebar__section {
    margin-bottom: 32px;
    padding: 0 16px;
}
.crm-sidebar__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--smoke);
    margin-bottom: 8px;
    padding: 0 4px;
}
.crm-sidebar__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 400;
    color: var(--smoke);
    border-radius: var(--radius);
    transition: all 200ms ease-out;
    margin-bottom: 2px;
    text-decoration: none;
}
.crm-sidebar__item:hover  { background: var(--gunmetal); color: var(--chalk); }
.crm-sidebar__item.is-active { background: var(--gunmetal); color: var(--white); }
.crm-sidebar__count {
    font-size: 11px;
    background: var(--gunmetal);
    color: var(--smoke);
    padding: 1px 6px;
    border-radius: 10px;
}

/* ── Toolbar / search ────────────────────────────────────────────────────────── */
.crm-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.crm-search {
    display: flex;
    flex: 1;
    gap: 8px;
}
.crm-search__input {
    flex: 1;
    background: var(--carbon);
    border: 0.5px solid var(--gunmetal);
    color: var(--chalk);
    font-family: inherit;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius);
    outline: none;
    transition: border-color 200ms ease-out;
}
.crm-search__input:focus { border-color: var(--smoke); }
.crm-search__btn {
    background: var(--gunmetal);
    border: none;
    color: var(--chalk);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: var(--radius);
    transition: background 200ms ease-out;
}
.crm-search__btn:hover { background: var(--smoke); }
.crm-toolbar__count {
    font-size: 12px;
    color: var(--smoke);
    white-space: nowrap;
}

/* ── Colour key ──────────────────────────────────────────────────────────────── */
.crm-colour-key {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.key-item {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 3px 10px 3px 18px;
    border-radius: var(--radius);
    position: relative;
    background: var(--carbon);
    color: var(--smoke);
}
.key-item::before {
    content: '';
    position: absolute;
    left: 6px; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
}
.key-item--new::before     { background: var(--col-new); }
.key-item--warning::before { background: var(--col-warning); }
.key-item--alert::before   { background: var(--col-alert); }
.key-item--payment::before { background: var(--col-payment); }
.key-item--baseline::before { background: var(--gunmetal); }

/* ── Ticket card ─────────────────────────────────────────────────────────────── */
.ticket-list { display: flex; flex-direction: column; gap: 2px; }

.ticket {
    background: var(--carbon);
    border: 0.5px solid var(--gunmetal);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    transition: border-color 200ms ease-out, background 200ms ease-out;
}
.ticket--new     { border-left-color: var(--col-new); }
.ticket--warning { border-left-color: var(--col-warning); }
.ticket--alert   { border-left-color: var(--col-alert); }
.ticket--payment { border-left-color: var(--col-payment); background: rgba(255,214,0,0.04); }
.ticket--baseline{ border-left-color: var(--gunmetal); }

/* Direct-link ticket row */
.ticket--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background 200ms ease-out, border-color 200ms ease-out;
}
.ticket--row:hover { background: #181818; }
.ticket--row:hover .ticket__name { color: var(--white); }
.ticket__arrow {
    font-size: 14px;
    color: var(--smoke);
    transition: color 200ms ease-out, transform 200ms ease-out;
    flex-shrink: 0;
}
.ticket--row:hover .ticket__arrow { color: var(--chalk); transform: translateX(3px); }
.ticket__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.ticket__colour-bar {
    width: 4px;
    height: 32px;
    border-radius: 2px;
    flex-shrink: 0;
    background: inherit;
}
.ticket--new     .ticket__colour-bar { background: var(--col-new); }
.ticket--warning .ticket__colour-bar { background: var(--col-warning); }
.ticket--alert   .ticket__colour-bar { background: var(--col-alert); }
.ticket--payment .ticket__colour-bar { background: var(--col-payment); }
.ticket--baseline .ticket__colour-bar { background: var(--gunmetal); }

.ticket__meta { display: flex; flex-direction: column; gap: 1px; }
.ticket__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--chalk);
    transition: color 200ms ease-out;
}
.ticket__ref {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--smoke);
    font-variant-numeric: tabular-nums;
}
.ticket__company {
    font-size: 13px;
    color: var(--smoke);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.ticket__header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ticket__date {
    font-size: 11px;
    color: var(--smoke);
    white-space: nowrap;
}
.ticket__last-activity { font-size: 11px; color: var(--smoke); }

/* ── Status badges ───────────────────────────────────────────────────────────── */
.ticket__status-badge,
.ticket__payment-badge {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius);
    white-space: nowrap;
}
.status--in_progress      { background: rgba(200,255,0,0.1);  color: var(--volt); }
.status--waiting_customer { background: rgba(255,152,0,0.12); color: #FF9800; }
.status--customer_updated { background: rgba(0,200,83,0.12);  color: var(--col-new); }
.status--with_staff       { background: rgba(33,150,243,0.12);color: #64B5F6; }
.status--admin_approval   { background: rgba(156,39,176,0.12);color: #CE93D8; }
.status--on_hold          { background: rgba(102,102,102,0.2);color: var(--smoke); }
.status--complete         { background: rgba(102,102,102,0.12);color: var(--dark-grey); }

.payment--unpaid   { background: rgba(244,67,54,0.1);  color: #EF9A9A; }
.payment--pending  { background: rgba(255,214,0,0.12); color: var(--col-payment); }
.payment--paid     { background: rgba(0,200,83,0.12);  color: var(--col-new); }
.payment--refunded { background: rgba(102,102,102,0.1);color: var(--smoke); }

/* ── Ticket detail header ────────────────────────────────────────────────────── */
.tk-header {
    padding: 24px 28px;
    border-bottom: 0.5px solid var(--gunmetal);
    border-left: 3px solid transparent;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.tk-header--new     { border-left-color: var(--col-new); }
.tk-header--warning { border-left-color: var(--col-warning); }
.tk-header--alert   { border-left-color: var(--col-alert); }
.tk-header--payment { border-left-color: var(--col-payment); background: rgba(255,214,0,0.03); }
.tk-header--baseline{ border-left-color: var(--gunmetal); }
.tk-header__ref {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--volt);
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
.tk-header__name {
    font-size: 22px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
}
.tk-header__company { font-size: 16px; font-weight: 400; color: var(--smoke); }
.tk-header__subject {
    font-size: 13px;
    color: var(--smoke);
    margin-top: 6px;
    font-family: monospace;
    letter-spacing: 0.02em;
}
.tk-header__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.tk-header__date { font-size: 11px; color: var(--smoke); }

/* ── Notes feed ──────────────────────────────────────────────────────────────── */
.notes-feed {
    flex: 1;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.notes-empty { font-size: 13px; color: var(--smoke); padding: 20px 0; }

.note {
    background: var(--carbon);
    border: 0.5px solid var(--gunmetal);
    border-radius: var(--radius);
    overflow: hidden;
}
.note--internal {
    border-color: rgba(33,150,243,0.3);
    background: rgba(33,150,243,0.04);
}
.note--customer {
    border-color: rgba(200,255,0,0.2);
    background: rgba(200,255,0,0.03);
}
.note--system {
    border-color: var(--gunmetal);
    background: var(--void);
}
.note--payment {
    border-color: rgba(255,214,0,0.4);
    background: rgba(255,214,0,0.04);
}

.note__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--gunmetal);
    gap: 12px;
}
.note__meta { display: flex; align-items: center; gap: 8px; }
.note__type-tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(33,150,243,0.15);
    color: #64B5F6;
    padding: 2px 6px;
    border-radius: var(--radius);
}
.note__type-tag--system   { background: rgba(102,102,102,0.15); color: var(--smoke); }
.note__type-tag--customer { background: rgba(200,255,0,0.1);    color: var(--volt); }

.note__author { font-size: 13px; font-weight: 500; color: var(--chalk); }
.note__date   { font-size: 11px; color: var(--smoke); }

.note__visibility { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vis-badge {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: var(--radius);
}
.vis-badge--customer { background: rgba(200,255,0,0.1);    color: var(--volt); }
.vis-badge--staff    { background: rgba(33,150,243,0.12);  color: #64B5F6; }
.vis-badge--sent     { background: rgba(0,200,83,0.1);     color: var(--col-new); }

.note__body {
    padding: 14px;
    font-size: 14px;
    font-weight: 300;
    color: var(--chalk);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.note--system .note__body { font-size: 12px; color: var(--smoke); }

.note__payment-action,
.note__quick-send {
    padding: 10px 14px;
    border-top: 0.5px solid var(--gunmetal);
    display: flex;
    gap: 8px;
}

/* ── Note composer ───────────────────────────────────────────────────────────── */
.note-composer {
    border-top: 0.5px solid var(--gunmetal);
    background: var(--carbon);
    flex-shrink: 0;
}
.composer-tabs {
    display: flex;
    border-bottom: 0.5px solid var(--gunmetal);
}
.composer-tab {
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smoke);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 200ms ease-out;
}
.composer-tab:hover { color: var(--chalk); }
.composer-tab.is-active { color: var(--volt); border-bottom-color: var(--volt); }

.composer-panel { display: none; padding: 16px 20px; }
.composer-panel.is-active { display: block; }

.note-form__textarea {
    width: 100%;
    background: var(--void);
    border: 0.5px solid var(--gunmetal);
    color: var(--chalk);
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    padding: 12px;
    border-radius: var(--radius);
    resize: vertical;
    outline: none;
    transition: border-color 200ms ease-out;
    margin-bottom: 12px;
}
.note-form__textarea:focus { border-color: var(--smoke); }
.note-form__textarea::placeholder { color: var(--smoke); }

.note-form__visibility,
.note-form__send-to {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.note-form__vis-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--smoke);
    min-width: 60px;
}
.vis-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--smoke);
    cursor: pointer;
}
.vis-check input[type="checkbox"] {
    accent-color: var(--volt);
    width: 14px; height: 14px;
}
.vis-check input:disabled { opacity: 0.4; cursor: not-allowed; }
.send-manual { display: flex; align-items: center; gap: 8px; }

.note-form__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Ticket sidebar panels ───────────────────────────────────────────────────── */
.tk-panel {
    padding: 16px 0;
    border-bottom: 0.5px solid var(--gunmetal);
}
.tk-panel:last-child { border-bottom: none; }
.tk-panel__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--smoke);
    margin-bottom: 8px;
}
.tk-panel__value { font-size: 13px; color: var(--chalk); margin-bottom: 4px; }
.tk-panel__value a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }
.tk-panel__note  { font-size: 12px; color: var(--smoke); margin-bottom: 4px; }
.tk-panel__ref {
    font-size: 18px;
    font-weight: 600;
    color: var(--volt);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

/* Staff list */
.staff-list { margin-bottom: 12px; }
.staff-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--chalk);
    padding: 4px 0;
    border-bottom: 0.5px solid var(--gunmetal);
}
.assign-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 20px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 200ms ease-out;
    white-space: nowrap;
    outline: none;
}
.btn:focus-visible { outline: 1px solid var(--volt); outline-offset: 2px; }
.btn--primary {
    background: var(--volt);
    color: var(--void);
}
.btn--primary:hover { background: var(--volt-hover); color: var(--void); }

.btn--secondary {
    background: transparent;
    border: 0.5px solid var(--smoke);
    color: var(--chalk);
}
.btn--secondary:hover { border-color: var(--chalk); color: var(--white); }

.btn--ghost {
    background: var(--gunmetal);
    color: var(--chalk);
}
.btn--ghost:hover { background: #2a2a2a; color: var(--white); }

.btn--danger {
    background: rgba(244,67,54,0.15);
    color: #EF9A9A;
    border: 0.5px solid rgba(244,67,54,0.3);
}
.btn--danger:hover { background: rgba(244,67,54,0.25); }

.btn--payment {
    background: rgba(255,214,0,0.15);
    color: var(--col-payment);
    border: 0.5px solid rgba(255,214,0,0.3);
}
.btn--payment:hover { background: rgba(255,214,0,0.25); }

.btn--sm  { padding: 6px 14px; font-size: 11px; }
.btn--xs  { padding: 3px 8px;  font-size: 10px; }
.btn--full { width: 100%; }

.btn-link {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 500;
    color: var(--smoke);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    cursor: pointer;
}
.btn-link--danger { color: #EF9A9A; }
.btn-link:hover { color: var(--chalk); }

/* ── Form fields ─────────────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field__label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smoke);
    margin-bottom: 6px;
}
.field__input, .field__select {
    width: 100%;
    background: var(--void);
    border: 0.5px solid var(--gunmetal);
    color: var(--chalk);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: var(--radius);
    outline: none;
    transition: border-color 200ms ease-out;
    appearance: none;
}
.field__input:focus,
.field__select:focus { border-color: var(--smoke); }
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0A0A0A inset !important;
    -webkit-text-fill-color: #F0F0F0 !important;
    border-color: #1E1E1E;
    transition: background-color 5000s ease-in-out 0s;
}
.field__input--inline { width: auto; flex: 1; }
.field__select--sm { padding: 6px 10px; font-size: 12px; }
.field__input--sm  { padding: 7px 10px; font-size: 13px; }
.field__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

/* ── Login page ──────────────────────────────────────────────────────────────── */
.crm-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
.login-wrap { width: 100%; max-width: 380px; }
.login-card {
    background: var(--carbon);
    border: 0.5px solid var(--gunmetal);
    border-radius: var(--radius);
    padding: 40px 32px;
}
.login-logo {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}
.login-logo__img {
    height: 88px;
    width: auto;
    display: block;
}
.login-sub {
    font-size: 12px;
    color: var(--smoke);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 32px;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 16px;
}
.alert--error {
    background: rgba(244,67,54,0.12);
    border: 0.5px solid rgba(244,67,54,0.3);
    color: #EF9A9A;
}
.alert--success {
    background: rgba(0,200,83,0.1);
    border: 0.5px solid rgba(0,200,83,0.2);
    color: var(--col-new);
}

/* ── Page header (narrow pages) ─────────────────────────────────────────────── */
.crm-layout--narrow { grid-template-columns: 1fr; }
.page-header { margin-bottom: 32px; }
.page-header__title { font-size: 28px; font-weight: 600; color: var(--white); margin: 0 0 6px; }
.page-header__sub   { font-size: 14px; color: var(--smoke); margin: 0; }

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.alert--success {
    background: rgba(0,200,83,0.1);
    border: 0.5px solid #00C853;
    color: #00C853;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 24px;
    border-radius: var(--radius);
}

/* ── Users table ─────────────────────────────────────────────────────────────── */
.users-table-wrap { overflow-x: auto; margin-bottom: 40px; }
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.users-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smoke);
    padding: 10px 12px;
    border-bottom: 0.5px solid var(--gunmetal);
}
.users-table td {
    padding: 14px 12px;
    border-bottom: 0.5px solid var(--gunmetal);
    color: var(--chalk);
    vertical-align: middle;
}
.users-table__row--inactive td { opacity: 0.45; }
.users-table__name { font-weight: 500; }
.users-table__you {
    display: inline-block;
    font-size: 10px;
    background: var(--gunmetal);
    color: var(--smoke);
    padding: 1px 6px;
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: middle;
}
.users-table__actions { white-space: nowrap; }
.role-badge {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
}
.role-badge--admin { background: rgba(200,255,0,0.12); color: var(--volt); }
.role-badge--staff { background: var(--gunmetal); color: var(--smoke); }
.status-dot {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.status-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.status-dot--active::before   { background: #00C853; }
.status-dot--inactive::before { background: var(--smoke); }

/* ── Password reset inline form ──────────────────────────────────────────────── */
.pw-reset-form { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.field__input--inline { flex: 1; min-width: 200px; }

/* ── CRM form card ───────────────────────────────────────────────────────────── */
.crm-form-card {
    background: var(--carbon);
    border: 0.5px solid var(--gunmetal);
    border-radius: var(--radius);
    padding: 28px 24px;
}
.crm-form-card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 24px;
}

/* ── CRM form ────────────────────────────────────────────────────────────────── */
.crm-form__section { margin-bottom: 32px; }
.crm-form__section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--chalk);
    margin: 0 0 4px;
    letter-spacing: 0.03em;
}
.crm-form__section-opt { font-weight: 400; color: var(--smoke); }
.crm-form__section-desc { font-size: 13px; color: var(--smoke); margin: 0 0 16px; }
.crm-form__row { margin-bottom: 16px; }
.crm-form__row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.crm-form__actions { display: flex; gap: 12px; align-items: center; padding-top: 8px; }

/* ── Btn sizes ───────────────────────────────────────────────────────────────── */
.btn--xs { padding: 4px 10px; font-size: 11px; }
.btn--danger {
    background: transparent;
    border: 0.5px solid #F44336;
    color: #F44336;
}
.btn--danger:hover { background: rgba(244,67,54,0.1); }

/* ── Progress slider (ticket sidebar) ───────────────────────────────────────── */
.tk-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tk-progress-bar {
    flex: 1;
    height: 6px;
    background: #2a2a2a;
    border-radius: 2px;
    overflow: hidden;
}
.tk-progress-bar__fill {
    height: 100%;
    background: var(--volt);
    border-radius: 2px;
    transition: width 200ms ease-out;
}
.tk-progress-pct {
    font-size: 13px;
    font-weight: 500;
    color: var(--chalk);
    min-width: 36px;
    text-align: right;
}
.tk-progress-slider {
    width: 100%;
    appearance: none;
    height: 4px;
    background: #2a2a2a;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.tk-progress-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--volt);
    border-radius: 50%;
    cursor: pointer;
}

/* ── Checklist (ticket sidebar) ──────────────────────────────────────────────── */
.tk-checklist {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tk-checklist__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #1a1a1a;
    border-radius: 2px;
}
.tk-checklist__item.is-done .tk-checklist__text {
    text-decoration: line-through;
    color: #444;
}
.tk-checklist__toggle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--void);
    padding: 0;
}
.tk-checklist__item.is-done .tk-checklist__toggle {
    background: var(--volt);
    border-color: var(--volt);
}
.tk-checklist__circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #444;
    display: block;
}
.tk-checklist__text {
    flex: 1;
    font-size: 12px;
    color: var(--chalk);
    line-height: 1.4;
}
.tk-checklist__delete {
    background: none;
    border: none;
    color: #444;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}
.tk-checklist__delete:hover { color: #F44336; }
.tk-checklist-count {
    font-size: 11px;
    font-weight: 400;
    color: var(--smoke);
    float: right;
}
.tk-checklist-input { margin-top: 6px; }

/* ── Staging URL (ticket sidebar) ────────────────────────────────────────────── */
.tk-staging-link {
    font-size: 11px;
    color: var(--volt);
    text-decoration: none;
    word-break: break-all;
    display: block;
    margin-bottom: 8px;
}
.tk-staging-link:hover { color: var(--volt-hover); }

/* ── Ticket wrap (tabbed layout) ─────────────────────────────────────────────── */
.crm-ticket-wrap {
    padding-top: var(--nav-h);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Tab navigation */
.tk-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tk-tabs__nav {
    display: flex;
    align-items: stretch;
    border-bottom: 0.5px solid var(--gunmetal);
    background: var(--carbon);
    padding: 0 28px;
    gap: 0;
    flex-shrink: 0;
}
.tk-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smoke);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 200ms ease-out, border-color 200ms ease-out;
    margin-bottom: -0.5px;
}
.tk-tabs__tab:hover { color: var(--chalk); }
.tk-tabs__tab.is-active {
    color: var(--volt);
    border-bottom-color: var(--volt);
}
.tk-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    background: var(--gunmetal);
    color: var(--smoke);
    border-radius: 9px;
}
.tk-tabs__tab.is-active .tk-tabs__count {
    background: rgba(200,255,0,0.15);
    color: var(--volt);
}
.tk-tabs__panel {
    flex: 1;
    padding: 28px;
}
.tk-tabs__panel[hidden] { display: none !important; }

/* Overview card grid */
.tk-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
}
@media (min-width: 1280px) {
    .tk-overview-grid { grid-template-columns: repeat(3, 1fr); }
}

.tk-card {
    background: var(--carbon);
    border: 0.5px solid var(--gunmetal);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.tk-card--full {
    grid-column: 1 / -1;
}
.tk-card__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--smoke);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tk-card__value {
    font-size: 13px;
    color: var(--chalk);
    margin-bottom: 4px;
    line-height: 1.5;
}
.tk-card__value a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }
.tk-card__value a:hover { color: var(--white); }
.tk-card__note {
    font-size: 12px;
    color: var(--smoke);
    margin-bottom: 4px;
    line-height: 1.5;
}
.tk-card__sub {
    font-size: 11px;
    color: var(--smoke);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px solid var(--gunmetal);
}
.tk-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Messages panel */
.tk-tabs__panel[data-panel="messages"]:not([hidden]) {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.crm-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--smoke);
    font-size: 14px;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--gunmetal); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--smoke); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --tk-sidebar: 240px; }
}

@media (max-width: 768px) {
    .crm-layout {
        grid-template-columns: 1fr;
    }
    .crm-layout--ticket {
        grid-template-columns: 1fr;
    }
    .crm-sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 0.5px solid var(--gunmetal);
    }
    .tk-sidebar {
        position: static;
        height: auto;
        border-left: none;
        border-top: 0.5px solid var(--gunmetal);
    }
    .ticket__company { display: none; }
    .ticket__date    { display: none; }
    .tk-header { flex-direction: column; align-items: flex-start; }
}