/* ============================================================
   Customer Dashboard — Main Stylesheet
   Color scheme: Yellow Pages (#ffe600) + Black
   ============================================================ */

:root {
    --yellow:        #ffe600;
    --yellow-hover:  #e6cf00;
    --yellow-dark:   #b8a400;
    --black:         #0a0a0a;
    --black-soft:    #1a1a1a;
    --black-mid:     #2c2c2c;
    --white:         #ffffff;
    --grey-100:      #f7f7f7;
    --grey-200:      #ebebeb;
    --grey-400:      #aaaaaa;
    --grey-600:      #666666;

    --success:       #1a7a3c;
    --success-bg:    #d6f0e0;
    --error:         #c0392b;
    --error-bg:      #fde8e6;
    --warning:       #856404;
    --warning-bg:    #fff3cd;
    --info:          #0c5460;
    --info-bg:       #d1ecf1;

    --font-display:  'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;

    --radius-sm:     4px;
    --radius:        8px;
    --radius-lg:     12px;

    --shadow-sm:     0 1px 3px rgba(0,0,0,0.12);
    --shadow:        0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:     0 8px 28px rgba(0,0,0,0.15);

    --header-height: 68px;
    --transition:    0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--grey-100);
    color: var(--black);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
h3 { font-size: 1.25rem; }

/* ---- Header ---------------------------------------------- */
.site-header {
    background: var(--black);
    color: var(--yellow);
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.header-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-img   { height: 44px; width: auto; }

/* ---- Navigation ------------------------------------------ */
.main-nav { flex: 1; }
.nav-list { display: flex; gap: 0.25rem; align-items: center; }
.nav-link {
    display: block;
    padding: 0.45rem 1rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--yellow);
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
    transition: background var(--transition), color var(--transition);
}
.nav-link:hover         { background: rgba(255,230,0,0.15); }
.nav-link--active       { background: var(--yellow); color: var(--black); }
.nav-link--active:hover { background: var(--yellow-hover); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: var(--yellow);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}
.header-user__name {
    font-size: 0.85rem;
    color: var(--grey-400);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Main / Footer --------------------------------------- */
.site-main {
    flex: 1;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.site-footer {
    background: var(--black);
    color: var(--yellow);
    padding: 1rem 1.5rem;
    margin-top: auto;
}
.footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0.75;
}

/* ---- Buttons --------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
    text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn--primary     { background: var(--yellow);  color: var(--black); border-color: var(--yellow); }
.btn--primary:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.btn--black       { background: var(--black);   color: var(--yellow); border-color: var(--black); }
.btn--black:hover { background: var(--black-mid); border-color: var(--black-mid); }
.btn--outline     { background: transparent; color: var(--black); border-color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--yellow); }
.btn--outline-yellow { background: transparent; color: var(--yellow); border-color: var(--yellow); }
.btn--outline-yellow:hover { background: var(--yellow); color: var(--black); }
.btn--danger      { background: var(--error);   color: var(--white); border-color: var(--error); }
.btn--danger:hover { background: #a93226; border-color: #a93226; }
.btn--sm  { padding: 0.35rem 0.85rem; font-size: 0.8rem; }
.btn--lg  { padding: 0.8rem 1.75rem;  font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; }

/* ---- Cards ----------------------------------------------- */
.card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.card__header {
    background: var(--black);
    color: var(--yellow);
    padding: 1.1rem 1.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.card__body { padding: 1.5rem; }
.card__footer {
    padding: 1rem 1.5rem;
    background: var(--grey-100);
    border-top: 1px solid var(--grey-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ---- Forms ----------------------------------------------- */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--black-soft); }
.form-label .required { color: var(--error); margin-left: 2px; }
.form-control {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--black);
    background: var(--white);
    border: 2px solid var(--grey-200);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    appearance: none;
}
.form-control:focus { border-color: var(--yellow-dark); box-shadow: 0 0 0 3px rgba(255,230,0,0.25); }
.form-control:disabled { background: var(--grey-100); cursor: not-allowed; opacity: 0.7; }
.form-control.is-invalid { border-color: var(--error); }
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230a0a0a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.5rem;
}
.form-hint  { font-size: 0.78rem; color: var(--grey-600); margin-top: 0.3rem; }
.form-error { font-size: 0.78rem; color: var(--error);    margin-top: 0.3rem; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-section-title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grey-600);
    border-bottom: 2px solid var(--grey-200);
    padding-bottom: 0.5rem;
    margin: 1.5rem 0 1rem;
}
.form-section-title:first-child { margin-top: 0; }

.dollar-wrap { position: relative; }
.dollar-wrap .dollar-sign {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--grey-600);
    pointer-events: none;
}
.dollar-wrap .form-control { padding-left: 1.75rem; }

/* Password */
.password-wrapper { position: relative; }
.password-wrapper .form-control { padding-right: 3rem; }
.password-toggle {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--grey-600);
    font-size: 1.1rem; line-height: 1; padding: 0.2rem;
}
.password-toggle:hover { color: var(--black); }
.password-strength { margin-top: 0.5rem; }
.password-strength__bar { height: 4px; border-radius: 2px; background: var(--grey-200); overflow: hidden; }
.password-strength__fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }
.password-strength__label { font-size: 0.72rem; margin-top: 0.25rem; color: var(--grey-600); }

/* ---- Remember Me checkbox -------------------------------- */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
}
.checkbox-label input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--black);
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Alerts ---------------------------------------------- */
.alert {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm);
    margin-bottom: 1rem; font-size: 0.9rem; border-left: 4px solid transparent;
}
.alert--success { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.alert--error   { background: var(--error-bg);   color: var(--error);   border-color: var(--error); }
.alert--warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.alert--info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info); }
.alert__close { background: none; border: none; cursor: pointer; font-size: 1.2rem; line-height: 1; opacity: 0.6; color: inherit; flex-shrink: 0; padding: 0; }
.alert__close:hover { opacity: 1; }

/* ---- Tables ---------------------------------------------- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table thead { background: var(--black); color: var(--yellow); }
.data-table thead th {
    padding: 0.8rem 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--grey-200); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255,230,0,0.06); }
.data-table td { padding: 0.75rem 1rem; vertical-align: middle; }
.data-table .actions { display: flex; gap: 0.5rem; }

/* Clickable company name */
.client-name-link {
    color: var(--black);
    font-weight: 700;
    border-bottom: 2px solid var(--yellow);
    padding-bottom: 1px;
    transition: color var(--transition), border-color var(--transition);
}
.client-name-link:hover { color: var(--grey-600); border-color: var(--grey-400); }

/* Contract link */
.contract-link {
    color: var(--black);
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 2px solid var(--yellow);
    padding-bottom: 1px;
    transition: opacity var(--transition);
}
.contract-link:hover { opacity: 0.65; }

/* ---- Badges ---------------------------------------------- */
.badge {
    display: inline-block; padding: 0.2rem 0.6rem;
    font-size: 0.72rem; font-weight: 700; border-radius: 20px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.badge--active   { background: var(--success-bg); color: var(--success); }
.badge--inactive { background: var(--grey-200);   color: var(--grey-600); }
.badge--admin    { background: var(--black);       color: var(--yellow); }
.badge--user     { background: var(--grey-200);    color: var(--black); }

/* ---- Page title ------------------------------------------ */
.page-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.page-title h1 { color: var(--black); }

/* Breadcrumb */
.breadcrumb {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--grey-600);
    margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--grey-600); border-bottom: 1px solid var(--grey-400); }
.breadcrumb a:hover { color: var(--black); }
.breadcrumb__sep { opacity: 0.4; }

/* ---- Dashboard stat cards -------------------------------- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}
.stat-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    border-left: 5px solid var(--yellow);
}
.stat-card__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-600); font-weight: 600; }
.stat-card__value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-top: 0.25rem; }
.stat-card__value--md { font-size: 1.5rem; }

/* ---- Welcome hero ---------------------------------------- */
.welcome-hero {
    background: var(--black);
    color: var(--yellow);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.welcome-hero::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 260px; height: 260px; border-radius: 50%;
    background: rgba(255,230,0,0.08); pointer-events: none;
}
.welcome-hero::after {
    content: ''; position: absolute; bottom: -80px; left: -40px;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(255,230,0,0.05); pointer-events: none;
}
.welcome-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.75rem; }
.welcome-hero p  { font-size: 1.05rem; opacity: 0.8; max-width: 540px; }

/* ---- Client detail page ---------------------------------- */
.client-detail-header {
    background: var(--black);
    color: var(--yellow);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 1.5rem;
}
.client-detail-header h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.35rem; }
.client-detail-header p  { font-size: 0.9rem; opacity: 0.65; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.detail-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.5rem;
    border-top: 4px solid var(--yellow);
}
.detail-card__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grey-600);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.detail-card__value {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    word-break: break-word;
}
.detail-card__value--lg { font-size: 1.65rem; }
.detail-card__value a {
    color: var(--black);
    border-bottom: 2px solid var(--yellow);
}
.detail-card__value a:hover { opacity: 0.65; }

.info-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.info-section__header {
    background: var(--black);
    color: var(--yellow);
    padding: 0.85rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.info-section__body { padding: 1.25rem 1.5rem; }

.info-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--grey-200);
}
.info-row:last-child { border-bottom: none; }
.info-row__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--grey-600);
    flex: 0 0 220px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.info-row__value { font-size: 0.95rem; flex: 1; }

/* Renewal date colour coding */
.renewal--overdue  { color: var(--error);   font-weight: 600; }
.renewal--upcoming { color: var(--warning); font-weight: 600; }
.renewal--ok       { color: var(--success); font-weight: 600; }

/* ---- Modal ----------------------------------------------- */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.55); z-index: 1000;
    align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.is-open { display: flex; }
.modal {
    background: var(--white); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto;
    animation: modalIn 0.2s ease;
}
@keyframes modalIn {
    from { opacity:0; transform: scale(0.94) translateY(-12px); }
    to   { opacity:1; transform: scale(1)    translateY(0); }
}
.modal__header {
    background: var(--black); color: var(--yellow);
    padding: 1rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-display); font-weight: 700;
}
.modal__close { background: none; border: none; color: var(--yellow); font-size: 1.4rem; cursor: pointer; line-height: 1; opacity: 0.7; }
.modal__close:hover { opacity: 1; }
.modal__body   { padding: 1.5rem; }
.modal__footer { padding: 1rem 1.5rem; background: var(--grey-100); border-top: 1px solid var(--grey-200); display: flex; justify-content: flex-end; gap: 0.75rem; }

/* ---- Search bar ------------------------------------------ */
.search-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; }
.search-bar .form-control { max-width: 320px; }

/* ---- Login page ------------------------------------------ */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--black); }
.login-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.login-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; overflow: hidden; }
.login-card__header { background: var(--black); padding: 2rem 2rem 1.5rem; text-align: center; border-bottom: 4px solid var(--yellow); }
.login-card__header img { height: 52px; margin: 0 auto 1rem; }
.login-card__header h1 { font-size: 1.2rem; color: var(--yellow); font-family: var(--font-display); font-weight: 700; }
.login-card__body   { padding: 2rem; }
.login-card__footer { padding: 0.75rem 2rem 1.5rem; text-align: center; font-size: 0.85rem; }
.login-footer { background: var(--black-soft); color: rgba(255,255,255,0.3); text-align: center; padding: 0.75rem; font-size: 0.75rem; }
.login-link { color: var(--black); font-weight: 600; border-bottom: 2px solid var(--yellow); }
.login-link:hover { color: var(--grey-600); }

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

/* ---- Danger zone ----------------------------------------- */
.danger-zone .card__header { background: var(--error); color: var(--white); }

/* ---- Utilities ------------------------------------------- */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--grey-600); }
.text-sm      { font-size: 0.85rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.d-flex { display: flex; }
.gap-2  { gap: 0.75rem; }
.align-center { align-items: center; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-list {
        display: none; flex-direction: column;
        position: absolute; top: var(--header-height); left: 0; right: 0;
        background: var(--black-soft); padding: 1rem; gap: 0.25rem;
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }
    .nav-list.is-open { display: flex; }
    .site-header { position: relative; }
    .main-nav { position: static; }
    .header-user__name { display: none; }
    .page-title { flex-direction: column; align-items: flex-start; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .info-row { flex-direction: column; gap: 0.15rem; }
    .info-row__label { flex: none; }
    .data-table thead { display: none; }
    .data-table tbody tr { display: block; margin-bottom: 1rem; border: 1px solid var(--grey-200); border-radius: var(--radius); }
    .data-table td { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--grey-200); }
    .data-table td:last-child { border-bottom: none; }
    .data-table td::before { content: attr(data-label); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey-600); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Service badges (v2.1) -------------------------------- */
.service-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.badge--smb        { background: #dbeafe; color: #1e40af; }
.badge--web        { background: #dcfce7; color: #166534; }
.badge--marketing  { background: #fef9c3; color: #854d0e; }
.badge--software   { background: #f3e8ff; color: #6b21a8; }

/* Non-profit checkmark */
.np-check { font-size: 1.1rem; text-align: center; }
.np-check--yes { color: var(--success); }

/* Checkbox group */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0.25rem 0; }
.checkbox-group .checkbox-label {
    background: var(--grey-100);
    border: 2px solid var(--grey-200);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.85rem;
    font-size: 0.88rem;
    transition: border-color var(--transition), background var(--transition);
}
.checkbox-group .checkbox-label:hover { border-color: var(--yellow-dark); }
.checkbox-group .checkbox-label input:checked + span { font-weight: 700; }
.checkbox-group .checkbox-label:has(input:checked) {
    border-color: var(--black);
    background: var(--yellow);
}

/* Filter bar (Contracts page) */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
.filter-bar .form-control { max-width: 240px; }
.filter-btn {
    padding: 0.4rem 0.9rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
    border: 2px solid var(--grey-200);
    background: var(--white);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.filter-btn:hover        { border-color: var(--black); }
.filter-btn.is-active    { background: var(--black); color: var(--yellow); border-color: var(--black); }

/* ---- v2.1.1 additions ------------------------------------ */

/* Filter checkbox style */
.filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--grey-600);
    margin-left: 0.25rem;
    white-space: nowrap;
}
.filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--grey-200);
    border-radius: 20px;
    background: var(--white);
    transition: border-color var(--transition), background var(--transition);
    user-select: none;
}
.filter-check:hover { border-color: var(--black); }
.filter-check:has(input:checked) { background: var(--black); color: var(--yellow); border-color: var(--black); }
.filter-check input[type="checkbox"] { display: none; }

/* Contracts table: continuation rows */
.contracts-table tr.client-cont-row td.company-cell { border-top: none; }
.contracts-table tr.client-first-row { border-top: 2px solid var(--grey-200); }
.contracts-table tr.client-first-row:first-child { border-top: none; }

/* Service card toggle */
.service-card .card__header {
    user-select: none;
    gap: 1rem;
    align-items: center;
}
.service-card__title {
    display: flex;
    align-items: center;
    font-size: 1rem;
}

/* ---- v2.1.3 additions ------------------------------------ */

/* Sub-section label (Device & Employee, Contacts headers) */
.subsection-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grey-600);
    margin-bottom: 0.5rem;
}

/* Contact display cards (client-view) */
.contact-card {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--grey-200);
}
.contact-card:last-child { border-bottom: none; }
.contact-card__name {
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 140px;
}
.contact-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.85rem;
}
.contact-link {
    color: var(--black);
    border-bottom: 1px solid var(--grey-400);
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
}
.contact-link:hover { color: var(--grey-600); border-color: var(--grey-400); }

/* Contact edit rows */
.contact-row {
    background: var(--grey-100);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--grey-200);
}

/* 3-column grid for contact fields */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .form-grid-3 { grid-template-columns: 1fr; }
    .contact-card { flex-direction: column; gap: 0.25rem; }
}

/* ---- v2.1.4 additions ------------------------------------ */
.contact-card__svcs {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
    align-items: center;
}
.contact-row__fields {
    flex: 1;
}

/* ---- v2.1.5 additions ------------------------------------ */

/* Website link in client hero */
.website-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: rgba(255,230,0,0.85);
    border-bottom: 1px solid rgba(255,230,0,0.4);
    padding-bottom: 1px;
    transition: color var(--transition), border-color var(--transition);
    text-decoration: none;
}
.website-link:hover { color: var(--yellow); border-color: var(--yellow); }
.external-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.75;
}

/* ---- v2.2.0 additions ------------------------------------ */

/* Web Portal service badge */
.badge--web-portal { background: #ffe600; color: #2c2c2c; }

/* Badge used as an anchor link */
.badge--link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    display: inline-block;
}
.badge--link:hover {
    opacity: 0.82;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Sortable column headers */
.data-table thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table thead th.sortable:hover { background: rgba(255,230,0,0.15); }
.sort-icon { font-size: 0.75em; opacity: 0.5; margin-left: 0.25rem; }

/* Portal instance card */
.portal-instance {
    background: var(--grey-100);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.portal-instance__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ---- v2.2.2 additions ------------------------------------ */

/* Nav dropdown */
.nav-item--dropdown {
    position: relative;
}
.nav-link--dropdown {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--yellow);
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.nav-link--dropdown:hover         { background: rgba(255,230,0,0.15); }
.nav-link--dropdown.nav-link--active { background: var(--yellow); color: var(--black); }
.dropdown-caret { font-size: 0.65rem; opacity: 0.75; transition: transform var(--transition); }
.nav-item--dropdown.is-open .dropdown-caret { transform: rotate(180deg); }

.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--black-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 950;
    padding: 0.35rem 0;
    list-style: none;
}
.nav-item--dropdown.is-open .nav-dropdown { display: block; }

.nav-dropdown__link {
    display: block;
    padding: 0.55rem 1rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--yellow);
    letter-spacing: 0.02em;
    transition: background var(--transition);
    text-decoration: none;
}
.nav-dropdown__link:hover          { background: rgba(255,230,0,0.12); }
.nav-dropdown__link--active        { background: var(--yellow); color: var(--black); }
.nav-dropdown__link--active:hover  { background: var(--yellow-hover); }

/* Mobile: dropdown becomes inline */
@media (max-width: 768px) {
    .nav-dropdown {
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,0.06);
        border-radius: 0;
        padding: 0;
    }
    .nav-item--dropdown.is-open .nav-dropdown { display: block; }
    .nav-dropdown__link { padding-left: 2rem; }
}

/* Web Client Summary — service type cell colours */
.wtype--hosting-maintenance { background: #d1fae5; color: #065f46; font-weight: 600; }
.wtype--hosting-only        { background: #fef9c3; color: #854d0e; font-weight: 600; }
.wtype--placeholder         { background: #fee2e2; color: #991b1b; font-weight: 600; }

/* Website link inside a table (black text context) */
.website-link-table {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--black);
    font-size: 0.85rem;
    border-bottom: 2px solid var(--yellow);
    padding-bottom: 1px;
    text-decoration: none;
    transition: opacity var(--transition);
}
.website-link-table:hover { opacity: 0.65; }

/* ---- v2.2.3 additions ------------------------------------ */

/* Service type inline highlight (in note text) */
.wtype-inline {
    display: inline;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-weight: 600;
}

/* Section title bar (heading + action button side by side) */
.section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.section-title-bar h2 { margin: 0; }

/* Update note rows — summary page */
.updates-list { padding: 0; }
.update-note {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--grey-200);
    flex-wrap: wrap;
}
.update-note:last-child { border-bottom: none; }
.update-note__date {
    flex-shrink: 0;
    min-width: 130px;
    font-size: 0.85rem;
    color: var(--grey-600);
}
.update-note__date strong { color: var(--black); }
.update-note__text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.5;
    min-width: 200px;
}
.update-note__edit {
    flex-shrink: 0;
    font-size: 0.9rem;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity var(--transition);
}
.update-note__edit:hover { opacity: 1; }

/* Inline variant inside client view */
.update-note--inline {
    background: var(--grey-100);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    border-bottom: none;
    margin-bottom: 0.4rem;
}
.update-note--inline:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .update-note { flex-direction: column; gap: 0.25rem; }
    .update-note__date { min-width: auto; }
}

/* ---- v2.2.4 additions ------------------------------------ */

/* Joke of the day card */
.joke-card .card__header {
    background: var(--black);
    color: var(--yellow);
    font-size: 1rem;
}
.joke-card__body {
    padding: 1.5rem;
}
.joke-card__setup {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.joke-card__punchline {
    font-size: 1.05rem;
    color: var(--black-soft);
    background: var(--yellow);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-style: italic;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* section-title-bar (kept for backward compat) */
.section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 1rem;
}
.section-title-bar h2 { margin: 0; }

/* wtype inline (for text highlighting in notes) */
.wtype-inline { padding: 0 4px; border-radius: 3px; }

/* ---- v2.2.5 additions ------------------------------------ */
.wtype--not-active { background: #f3f4f6; color: #6b7280; font-weight: 600; }

/* ---- v2.2.6 additions ------------------------------------ */

/* Inactive client banner */
.inactive-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #991b1b;
    color: #fff;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.inactive-notice__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.inactive-notice strong {
    display: block;
    font-size: 1rem;
    font-family: var(--font-display);
}
.inactive-notice span {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Documentation editor */
.doc-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    background: var(--grey-100);
    border-bottom: 1px solid var(--grey-200);
    flex-wrap: wrap;
}
.doc-toolbar button {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: background var(--transition), border-color var(--transition);
    min-width: 2rem;
    text-align: center;
}
.doc-toolbar button:hover { background: var(--yellow); border-color: var(--yellow-dark); }
.doc-toolbar__sep {
    width: 1px;
    height: 1.4rem;
    background: var(--grey-200);
    margin: 0 0.2rem;
}

.doc-editor {
    min-height: 280px;
    max-height: 600px;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
}
.doc-editor:focus {
    box-shadow: inset 0 0 0 2px rgba(255,230,0,0.4);
}
.doc-editor p     { margin: 0 0 0.75rem; }
.doc-editor ul,
.doc-editor ol    { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.doc-editor a     { color: var(--black); border-bottom: 2px solid var(--yellow); text-decoration: none; }
.doc-editor a:hover { opacity: 0.7; }

/* Documentation view content */
.doc-content {
    font-size: 0.95rem;
    line-height: 1.8;
    padding: 1.5rem;
}
.doc-content p     { margin: 0 0 0.75rem; }
.doc-content ul,
.doc-content ol    { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.doc-content a     { color: var(--black); border-bottom: 2px solid var(--yellow); text-decoration: none; }
.doc-content a:hover { opacity: 0.7; }

/* ---- v2.3.0 additions ------------------------------------ */

/* Quarterly check-ins table */
.quarterly-table th,
.quarterly-table td { vertical-align: top; }
.quarterly-table .qci-contact { margin-bottom: 0.35rem; font-size: 0.83rem; line-height: 1.4; }
.quarterly-table .qci-contact:last-child { margin-bottom: 0; }
.quarterly-table .qci-contact__name  { display: block; font-weight: 600; }
.quarterly-table .qci-contact__email { display: block; color: var(--grey-600); }
.quarterly-table .qci-contact__email:hover { color: var(--black); }

.notes-indicator {
    display: inline-block;
    background: var(--black);
    color: var(--yellow);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-sm);
}

.edit-icon-link {
    text-decoration: none;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity var(--transition);
}
.edit-icon-link:hover { opacity: 1; }

/* ---- v2.3.1 additions ------------------------------------ */

/* Quarterly row status colours (item 1) */
.qci-row--completed   { background: #dcfce7; }
.qci-row--completed td { background: transparent; }
.qci-row--scheduled   { background: #fefce8; }
.qci-row--scheduled td { background: transparent; }
.qci-row--declined    { background: #fee2e2; }
.qci-row--declined td { background: transparent; }
/* no-response rows keep default table background */

/* Quarter summary cards (item 2) */
.qci-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
@media (max-width: 640px) { .qci-summary { grid-template-columns: repeat(2,1fr); } }

.qci-summary__card {
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    border: 1px solid transparent;
}
.qci-summary__num   { font-size: 2rem; font-weight: 700; font-family: var(--font-display); line-height: 1.1; }
.qci-summary__label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.25rem; opacity: 0.75; }

.qci-summary--completed  { background: #dcfce7; border-color: #86efac; color: #14532d; }
.qci-summary--scheduled  { background: #fefce8; border-color: #fde047; color: #713f12; }
.qci-summary--declined   { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.qci-summary--no-response{ background: var(--grey-100); border-color: var(--grey-200); color: var(--grey-600); }

/* Footer split layout (item 4) */
.footer-inner--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Expandable section toggle (item 5) */
.expandable-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    margin-bottom: 0.5rem;
}
.expandable-toggle:hover .subsection-label { color: var(--black); }
.expandable-caret {
    font-size: 0.75rem;
    color: var(--grey-500);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.expandable-body { padding-top: 0.25rem; }

/* Quarterly check-in entries on client page (item 5) */
.qci-client-entry {
    background: var(--grey-100);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.qci-client-entry:last-child { margin-bottom: 0; }
.qci-client-entry__title {
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
    color: var(--grey-700);
}
.qci-client-entry__row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.2rem;
    line-height: 1.5;
}
.qci-client-entry__label {
    font-weight: 600;
    min-width: 90px;
    flex-shrink: 0;
    color: var(--grey-600);
    font-size: 0.8rem;
}

/* ---- v2.3.2 additions ------------------------------------ */

/* Notes indicator as a link */
.notes-indicator--link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition), transform var(--transition);
}
.notes-indicator--link:hover {
    opacity: 0.75;
    transform: translateY(-1px);
}

/* Scroll margin for qci-client-entry anchors */
.qci-client-entry {
    scroll-margin-top: 100px;
}

/* ---- v2.3.3 additions ------------------------------------ */

/* Industry manager rows */
.industry-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.industry-row__drag {
    cursor: grab;
    color: var(--grey-400);
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
    padding: 0.2rem 0.1rem;
}
.industry-row__drag:active { cursor: grabbing; }
.industry-row[draggable="true"] { border-radius: var(--radius-sm); }

/* ---- v2.4.0 additions ------------------------------------ */

/* Revenue year block */
.revenue-year-block {
    border-bottom: 3px solid var(--grey-200);
    padding-bottom: 0;
}
.revenue-year-block:last-child { border-bottom: none; }

.revenue-year-label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.85rem 1.25rem 0.25rem;
    color: var(--grey-700);
    letter-spacing: 0.03em;
}

/* Revenue table */
.revenue-table { margin: 0; }
.revenue-table th,
.revenue-table td { padding: 0.55rem 1rem; }
.revenue-table th { background: var(--grey-100); }

.revenue-month { font-weight: 500; white-space: nowrap; }
.revenue-row--empty td { color: var(--grey-400); }

.revenue-cell { position: relative; min-width: 110px; }

.revenue-display {
    display: inline-block;
    width: 100%;
    text-align: right;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.35rem;
    transition: background var(--transition);
}
.revenue-display:hover { background: rgba(255,230,0,0.25); }

.revenue-input {
    width: 100%;
    text-align: right;
    padding: 0.2rem 0.4rem;
    font-size: 0.9rem;
    height: auto;
}

.revenue-row-total { font-weight: 600; white-space: nowrap; }

.revenue-totals-row {
    background: var(--black);
    color: var(--yellow);
}
.revenue-totals-row td { padding: 0.65rem 1rem; }

.text-right { text-align: right; }

/* ---- v2.4.1 additions ------------------------------------ */

/* Revenue table: Total <th> uses body text colour, not the default header colour */
.revenue-table thead th.revenue-total-header {
    color: var(--black);
    font-weight: 600;
    text-align: right;
}
/* Revenue table: year <th> overrides default header background, centred */
.revenue-table thead th.revenue-year-label {
    background: transparent;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.85rem 1rem 0.25rem;
    border-bottom: none;
    color: var(--grey-700);
    text-align: center;
}
/* Right-align all revenue header cells except the year label */
.revenue-table thead th:not(.revenue-year-label) {
    text-align: right;
}

/* ---- v2.5.3 Bitdefender ---------------------------------- */
/* Client view: pale green when the client is a user, pale red when not */
.bd-section {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    border: 1px solid;
    scroll-margin-top: 80px;
}
.bd-section--user { background: #dcfce7; border-color: #86efac; }
.bd-section--none { background: #fee2e2; border-color: #fca5a5; }
.bd-section .info-row { border-bottom-color: rgba(0,0,0,0.08); }
.bd-section__none { margin: 0; font-size: 0.95rem; }

/* Client edit form */
.bd-edit {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--grey-200);
    scroll-margin-top: 80px;
}
.bd-edit__fields {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.bd-edit__fields .form-group { margin-bottom: 0; }
.bd-edit__num { width: 4.5rem; text-align: right; }
.bd-edit__total {
    display: block;
    min-width: 4.5rem;
    padding: 0.6rem 0.75rem;
    text-align: right;
    font-weight: 700;
    background: var(--grey-100, #f5f5f5);
    border: 1px solid var(--grey-200);
    border-radius: 6px;
}

/* Bitdefender summary page */
.bd-table thead th.num,
.bd-table td.num,
.bd-table tfoot td.num { text-align: right; }
.bd-table tfoot td {
    padding: 0.75rem 1rem;
    font-weight: 700;
    border-top: 2px solid var(--black);
    background: var(--grey-100, #f5f5f5);
}