/* =========================================================================
   Kaaya Glow Admin — retheme pass.
   Brought the admin shell onto the same visual language as the public
   site (assets/css/base.css): deep-forest green / sage, Cormorant
   Garamond headings + Poppins body copy, pill buttons, soft rounded
   panels. Layout structure (fixed sidebar + navbar + content) is
   untouched on purpose — only the colors, type and a few spacing/roundness
   details changed, plus a couple of new components (contract sidebar,
   website-images sidebar) added at the bottom.
   ========================================================================= */

:root {
    --kg-primary: #235347;      /* deep forest green — matches site --primary */
    --kg-primary-dark: #163a30;
    --kg-sage: #8EB69B;         /* sage/gold accent — matches site --gold */
    --kg-sage-dark: #6d9a80;
    --kg-bg: #F2F8F4;           /* soft mint-tinted admin background */
    --kg-panel: #ffffff;
    --kg-dark: #0B2B26;         /* near-black green — matches site --dark */
    --kg-border: #E1ECE6;
    --kg-muted: #6b7d75;
    --kg-heading-font: 'Cormorant Garamond', Georgia, serif;
    --kg-body-font: 'Poppins', Arial, sans-serif;
}

/* Global styles */
* {
    box-sizing: border-box;
}
body {
    font-family: var(--kg-body-font);
    margin: 0;
    padding: 0;
    background: var(--kg-bg);
    color: var(--kg-dark);
}
h1, h2, h3 {
    font-family: var(--kg-heading-font);
}
a {
    text-decoration: none;
    color: var(--kg-primary);
}
.btn-primary {
    display: inline-block;
    background: var(--kg-primary);
    color: #fff;
    padding: 8px 14px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-primary:hover {
    background: var(--kg-sage);
    color: var(--kg-dark);
}
.btn-secondary {
    display: inline-block;
    background: #eef4f0;
    color: var(--kg-primary);
    padding: 8px 14px;
    border: 1px solid var(--kg-border);
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-secondary:hover {
    background: #e2ede6;
}

/* ================= LAYOUT ================= */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: var(--kg-dark);
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.25s ease;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: var(--kg-heading-font);
    color: #fff;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
}
.sidebar-brand span.mark {
    font-size: 1.2rem;
}
.sidebar-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    flex-shrink: 0;
}
.sidebar-brand-text {
    line-height: 1.1;
}
.sidebar-group-label {
    padding: 16px 24px 6px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
}
.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 8px 0 24px;
}
.sidebar li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    color: rgba(255,255,255,0.72);
    font-size: 0.92rem;
    border-left: 3px solid transparent;
}
.sidebar li a .ico { width: 1.1em; display: inline-block; text-align: center; }
.sidebar li a:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border-left-color: var(--kg-sage);
}
.sidebar li a.active {
    background: rgba(142,182,155,0.16);
    color: #fff;
    border-left-color: var(--kg-sage);
    font-weight: 600;
}

.navbar {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    height: 64px;
    background: #fff;
    border-bottom: 1px solid var(--kg-border);
    box-shadow: 0 1px 4px rgba(11,43,38,0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    z-index: 90;
}
.navbar h2 {
    font-size: 1.15rem;
    margin: 0;
    font-family: var(--kg-heading-font);
    color: var(--kg-primary);
    font-weight: 600;
}
.navbar .nav-right {
    display: flex;
    align-items: center;
    gap: 22px;
}
.navbar .nav-right a {
    color: var(--kg-dark);
    font-size: 0.88rem;
}
.navbar .nav-right a:hover {
    color: var(--kg-primary);
}
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    margin-right: 12px;
    color: var(--kg-dark);
}

main, .content-wrapper {
    margin-left: 240px;
    padding: 94px 32px 40px;
}

.sidebar ~ section {
    margin-left: 240px;
    padding-top: 94px;
}

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.active {
        transform: translateX(0);
    }
    .navbar {
        left: 0;
    }
    .sidebar-toggle {
        display: inline-block;
    }
    main, .content-wrapper,
    .sidebar ~ section {
        margin-left: 0;
    }
}

/* ================= CONTENT ================= */
h1 {
    font-size: 1.7rem;
    margin-bottom: 20px;
    font-weight: 600;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--kg-panel);
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    border-radius: 12px;
    overflow: hidden;
}
table th, table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--kg-border);
}
table th {
    background: #eef6f1;
    font-weight: 600;
    color: var(--kg-primary);
}

.dashboard .cards,
.admin-home .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.card {
    background: var(--kg-panel);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    font-weight: 600;
    color: var(--kg-primary);
    border-top: 3px solid var(--kg-sage);
}

.loader {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

footer {
    padding: 20px 32px;
    color: var(--kg-muted);
    font-size: 0.85rem;
}
.sidebar ~ footer {
    margin-left: 240px;
}
@media (max-width: 900px) {
    .sidebar ~ footer { margin-left: 0; }
}

/* ================= LOGIN PAGE ================= */
.login-page {
    max-width: 380px;
    margin: 80px auto;
    background: var(--kg-panel);
    padding: 40px 34px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11,43,38,0.12);
    border-top: 4px solid var(--kg-primary);
}
.login-page h1 {
    text-align: center;
    font-size: 1.6rem;
    color: var(--kg-primary);
    font-family: var(--kg-heading-font);
}
.login-page form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-page label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kg-dark);
}
.login-page input {
    padding: 10px 12px;
    border: 1px solid var(--kg-border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: var(--kg-body-font);
}
.login-page button {
    margin-top: 10px;
    padding: 11px;
    background: var(--kg-primary);
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
}
.login-page button:hover {
    background: var(--kg-sage);
    color: var(--kg-dark);
}
.login-page .form-error {
    background: #fdecea;
    color: #b3261e;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    display: none;
}
.login-page .form-error.active {
    display: block;
}

/* =========================================================================
   MODERN ADMIN COMPONENTS — dashboard head, stat cards, panels, calendar,
   upcoming list, status pills. Shared across dashboard + appointments so
   they work regardless of which $pageCss module file is also loaded.
   ========================================================================= */
.dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.dashboard-head h1 { margin-bottom: 6px; color: var(--kg-primary); }
.dashboard-sub { color: var(--kg-muted); font-size: 0.92rem; margin: 0; }

.btn-admin-primary {
    display: inline-block;
    background: var(--kg-primary);
    color: #fff;
    padding: 11px 22px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-admin-primary:hover { background: var(--kg-sage); color: var(--kg-dark); }

.btn-admin-sm { padding: 7px 16px; font-size: 0.8rem; border-radius: 20px; }

.btn-admin-secondary {
    display: inline-block;
    background: #fff;
    color: var(--kg-primary);
    border: 1px solid var(--kg-border);
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-admin-secondary:hover { background: #eef6f1; border-color: var(--kg-sage); }

.btn-admin-danger {
    display: inline-block;
    background: #9a2f2f;
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-admin-danger:hover { background: #7f1d1d; }

.dashboard-alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}
.dashboard-alert--ok { background: #e2f4e8; color: #235347; }
.dashboard-alert--error { background: #fbe7e7; color: #8a2c2c; }

.customer-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.customer-subnav .panel-link {
    background: #fff;
    border: 1px solid var(--kg-border);
    border-radius: 30px;
    padding: 10px 18px;
    color: var(--kg-primary);
    font-weight: 500;
}
.customer-subnav .panel-link:hover { background: #eef6f1; border-color: var(--kg-sage); }

.consent-record { margin-bottom: 20px; }
.consent-record-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--kg-border);
}
.consent-record-meta { color: var(--kg-muted); font-size: 0.85rem; flex: 1; }
.consent-record-body ul { margin: 4px 0 14px 20px; }
.consent-signatures { display: flex; gap: 24px; flex-wrap: wrap; margin: 14px 0; }
.consent-signatures figure { margin: 0; text-align: center; }
.signature-image {
    max-width: 220px;
    max-height: 110px;
    border: 1px solid var(--kg-border);
    border-radius: 8px;
    background: #fafafa;
    padding: 6px;
}
.sig-missing { display: inline-block; max-width: 260px; padding: 8px 10px; border: 1px dashed #b91c1c; color: #b91c1c; font-size: 0.8rem; line-height: 1.3; }
.consent-signatures figcaption { font-size: 0.8rem; color: var(--kg-muted); margin-top: 4px; }
.consent-record-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.consent-danger-zone { border: 1px solid #f3c9c9; background: #fdf6f6; }

.admin-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.admin-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--kg-dark); }
.admin-form input[type="text"],
.admin-form input[type="url"],
.admin-form input[type="date"],
.admin-form input[type="number"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
    font-weight: 400;
    padding: 9px 12px;
    border: 1px solid var(--kg-border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--kg-body-font);
}
.admin-form fieldset { border: 1px solid var(--kg-border); border-radius: 10px; padding: 12px 14px; }
.admin-form legend { font-weight: 600; padding: 0 6px; font-size: 0.85rem; color: var(--kg-primary); }
.checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; }
.inline-form { display: inline-block; }

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--kg-panel);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    border-top: 3px solid var(--kg-sage);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kg-muted);
    font-weight: 600;
}
.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kg-primary);
    font-family: var(--kg-heading-font);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

.dashboard-panel {
    background: var(--kg-panel);
    border-radius: 12px;
    padding: 22px 24px 26px;
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    margin-bottom: 22px;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.panel-head h2 { font-size: 1.15rem; margin: 0; color: var(--kg-primary); font-family: var(--kg-heading-font); }
.panel-link { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.dashboard-empty { color: #9aa79f; font-size: 0.9rem; padding: 12px 0; }

/* -- Upcoming appointments list -- */
.upcoming-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.upcoming-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--kg-border);
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #eef6f1;
    color: var(--kg-primary);
    flex-shrink: 0;
}
.upcoming-day { font-weight: 700; font-size: 1rem; line-height: 1.1; }
.upcoming-mon { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kg-muted); }
.upcoming-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.upcoming-info strong { font-size: 0.92rem; color: var(--kg-dark); }
.upcoming-info span { font-size: 0.82rem; color: var(--kg-muted); }

.status-pill {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
    background: #eee;
    color: #555;
}
.status-pill--pending { background: #fbeecb; color: #8a5b12; }
.status-pill--approved { background: #dcefe3; color: #1f5c40; }
.status-pill--completed { background: #dcfce7; color: #166534; }
.status-pill--cancelled { background: #fbe2e2; color: #8a2c2c; }
.status-pill--rescheduled { background: #ece5f9; color: #5b21b6; }
.status-pill--success { background: #dcfce7; color: #166534; }
.status-pill--warning { background: #fbeecb; color: #8a5b12; }
.status-pill--danger { background: #fbe2e2; color: #8a2c2c; }

/* -- Admin data table -- */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--kg-border); font-size: 0.88rem; }
.admin-table th { color: var(--kg-primary); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; }

/* -- Monthly calendar grid (dashboard preview + full calendar page) -- */
.dashboard-calendar-panel .panel-head { justify-content: space-between; }
.dashboard-calendar-panel--full .panel-head { justify-content: space-between; }
.kg-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa79f;
    margin-bottom: 8px;
}
.kg-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.kg-cal-cell {
    min-height: 64px;
    border-radius: 8px;
    background: #f7faf8;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.kg-cal-cell--empty { background: transparent; }
.kg-cal-cell--today { background: #eef6f1; box-shadow: inset 0 0 0 1.5px var(--kg-primary); }
.kg-cal-cell--has-appts { background: #fff; box-shadow: 0 1px 3px rgba(11,43,38,0.08); }
.kg-cal-daynum { font-size: 0.78rem; font-weight: 600; color: var(--kg-dark); }
.kg-cal-appts { display: flex; flex-direction: column; gap: 2px; }
.kg-cal-appt-pill {
    font-size: 0.64rem;
    background: #eef6f1;
    color: var(--kg-primary);
    border-radius: 3px;
    padding: 2px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kg-cal-more { font-size: 0.62rem; color: #9aa79f; }

@media (max-width: 700px) {
    .kg-cal-cell { min-height: 44px; }
    .kg-cal-appt-pill, .kg-cal-more { display: none; }
}

/* =========================================================================
   NEW — customer profile two-column layout + Contract Details sidebar.
   Used by admin/customers/view.php: main profile/subnav on the left,
   this aside on the right summarising the latest signed agreement so
   staff can see contract status without clicking into the full
   Consent & Signatures tab.
   ========================================================================= */
.customer-profile-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1000px) {
    .customer-profile-grid { grid-template-columns: 1fr; }
}
.contract-sidebar {
    background: var(--kg-panel);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    border-top: 3px solid var(--kg-sage);
    padding: 20px 20px 22px;
}
.contract-sidebar h3 {
    font-size: 1.05rem;
    margin: 0 0 14px;
    color: var(--kg-primary);
}
.contract-sidebar dl {
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    font-size: 0.85rem;
}
.contract-sidebar dt { color: var(--kg-muted); font-weight: 600; }
.contract-sidebar dd { margin: 0; color: var(--kg-dark); text-align: right; }
.contract-sidebar ul.contract-doc-list { margin: 0 0 16px; padding-left: 18px; font-size: 0.83rem; color: var(--kg-dark); }
.contract-sidebar ul.contract-doc-list li { margin-bottom: 4px; }
.contract-sidebar .contract-empty { font-size: 0.86rem; color: var(--kg-muted); margin-bottom: 16px; }
.contract-sidebar .contract-actions { display: flex; flex-direction: column; gap: 8px; }
.contract-sidebar .contract-actions a { text-align: center; }
.contract-sidebar hr { border: none; border-top: 1px solid var(--kg-border); margin: 16px 0; }

/* =========================================================================
   NEW — "All Website Images" sidebar (admin/gallery/index.php).
   Lists every photo actually wired up on the public site (hero banners,
   packages, gallery grid, blog, service fallbacks, …) grouped by the
   section it appears on, so staff can see at a glance what's live on the
   front end without opening every page.
   ========================================================================= */
.gallery-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1000px) {
    .gallery-layout { grid-template-columns: 1fr; }
}
.site-images-sidebar {
    background: var(--kg-panel);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    border-top: 3px solid var(--kg-sage);
    padding: 18px 18px 4px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    position: sticky;
    top: 94px;
}
.site-images-sidebar h3 {
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: var(--kg-primary);
}
.site-images-sidebar .dashboard-sub { margin-bottom: 14px; }
.image-group { margin-bottom: 18px; }
.image-group-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kg-muted);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.image-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}
.image-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: #eef6f1;
    border: 1px solid var(--kg-border);
}
.image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-thumb .image-thumb-tag {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(11,43,38,0.72);
    color: #fff;
    font-size: 0.55rem;
    padding: 2px 4px;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.15s ease;
    word-break: break-word;
}
.image-thumb:hover .image-thumb-tag { opacity: 1; }
.image-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #b3261e;
    text-align: center;
    padding: 2px;
}

/* =========================================================================
   UI CARDS + BUTTON PLACEMENT PASS
   One shared component set so every module's dashboard header, filter/tab
   bar and add/edit form look and behave the same way:
     - .dashboard-head-actions groups the header's buttons/links so the
       primary action always lands top-right, consistently spaced.
     - .filter-card turns tab-style sub-navigation (e.g. payments'
       All/Pending/Cash/Card/Refunds) and any search/filter inputs into
       their own bordered card sitting above the data table, instead of
       being crammed inline into the page header.
     - .form-card wraps every add/edit form in the same raised panel used
       elsewhere (dashboard-panel), and .form-actions pins Save/Cancel to
       a separated bar at the bottom of the card, right-aligned, so
       buttons no longer just trail off after the last field.
   ========================================================================= */
.dashboard-head-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: flex-end;
}

.filter-card {
    background: var(--kg-panel);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tabs a {
    padding: 8px 16px;
    border-radius: 20px;
    background: #eef6f1;
    color: var(--kg-primary);
    font-size: 0.84rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.filter-tabs a:hover { background: #e2ede6; }
.filter-tabs a.active { background: var(--kg-primary); color: #fff; }
.filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.filter-search input[type="search"],
.filter-search input[type="text"] {
    padding: 8px 14px;
    border: 1px solid var(--kg-border);
    border-radius: 20px;
    font-size: 0.85rem;
    font-family: var(--kg-body-font);
    min-width: 200px;
}
.filter-search .btn-admin-secondary,
.filter-search .btn-admin-primary { padding: 8px 16px; font-size: 0.84rem; }

.form-card {
    background: var(--kg-panel);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    border-top: 3px solid var(--kg-sage);
    padding: 26px 28px 24px;
    max-width: 640px;
}
.form-card.form-card--wide { max-width: 860px; }
.form-card .admin-form { max-width: none; }
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--kg-border);
}
.form-actions--between { justify-content: space-between; }
.form-actions .form-actions-hint { color: var(--kg-muted); font-size: 0.82rem; margin-right: auto; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.settings-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--kg-panel);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(11,43,38,0.06);
    border-top: 3px solid var(--kg-sage);
    padding: 20px 22px;
    color: var(--kg-dark);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.settings-card:hover { box-shadow: 0 6px 16px rgba(11,43,38,0.12); transform: translateY(-2px); }
.settings-card strong { color: var(--kg-primary); font-size: 1rem; }
.settings-card span { color: var(--kg-muted); font-size: 0.82rem; }

/* -- Service name shown next to the GoDaddy "Pay" button on the Manage
      Payments table (admin/payments/index.php). -- */
.pay-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pay-cell .pay-service-name { font-size: 0.72rem; color: var(--kg-muted); }


/* ================= LOGO IN TOP NAVBAR ================= */
.navbar-brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.navbar-brand-logo {
    height: 42px;
    width: 42px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ROUND 42 - wordmark in the admin sidebar */
.sidebar-wordmark { display: block; width: 100%; max-width: 190px; height: auto; }

/* Phones/small tablets: wide tables scroll inside themselves instead of widening the whole page. */
@media (max-width: 900px) {
  .admin-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table th, .admin-table td { white-space: nowrap; }
  .panel-link { white-space: normal; overflow-wrap: anywhere; }
}

/* long file paths / URLs in <code> wrap on phones instead of widening the page */
@media (max-width: 720px) { code { overflow-wrap: anywhere; word-break: break-word; } }

/* ===== Round 88: easier admin (search, filters, quick actions, flash, phone use) ===== */
.kg-nav-search { flex: 1 1 260px; max-width: 360px; margin: 0 16px; }
.kg-nav-search input { width: 100%; box-sizing: border-box; padding: 9px 14px; border: 1px solid var(--kg-border, #dfe7e3); border-radius: 999px; font: inherit; font-size: .9rem; background: #f7faf8; }
.kg-nav-search input:focus { outline: 2px solid #14503f; background: #fff; }
.kg-search-big { display: flex; gap: 10px; margin: 0 0 18px; }
.kg-search-big input { flex: 1; padding: 12px 16px; font: inherit; border: 1px solid var(--kg-border, #dfe7e3); border-radius: 10px; }
.kg-flash { position: fixed; top: 76px; right: 24px; z-index: 95; max-width: 420px; padding: 12px 16px; border-radius: 10px; font-size: .92rem; box-shadow: 0 6px 20px rgba(11,43,38,.15); transition: opacity .4s; }
.kg-flash--ok { background: #e6f3ec; color: #14503f; border: 1px solid #b9dcc8; }
.kg-flash--error { background: #fbeaea; color: #8a2a2a; border: 1px solid #efc2c2; }
.kg-filterbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.kg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid #14503f; color: #14503f; background: #fff; text-decoration: none; font-size: .85rem; }
.kg-chip.is-active, .kg-chip:hover { background: #14503f; color: #fff; }
.kg-filter-search { display: flex; gap: 8px; }
.kg-filter-search input { padding: 8px 12px; border: 1px solid var(--kg-border, #dfe7e3); border-radius: 8px; font: inherit; font-size: .9rem; }
.kg-inline { display: inline; margin: 0; }
.kg-row-actions { white-space: nowrap; }
.kg-btn-quiet { background: #fff; color: #14503f; border: 1px solid #14503f; border-radius: 8px; padding: 6px 12px; cursor: pointer; text-decoration: none; font: inherit; font-size: .82rem; display: inline-block; }
.kg-btn-quiet:hover { background: #14503f; color: #fff; }
.kg-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kg-todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--kg-border, #dfe7e3); border-radius: 10px; background: #fff; }
.kg-todo--plain li { border-style: dashed; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 900px) {
    .kg-nav-search { display: none; } /* phone: use Search in the menu */
    .kg-flash { left: 14px; right: 14px; max-width: none; }
    .admin-table { min-width: 560px; }
    .btn-admin-primary, .btn-admin-sm, .kg-btn-quiet, .panel-link { min-height: 40px; }
    .btn-admin-primary, .kg-btn-quiet { padding-top: 10px; padding-bottom: 10px; }
    .admin-form input, .admin-form select, .admin-form textarea { font-size: 16px; } /* stops iOS zooming on focus */
    .dashboard-head { flex-wrap: wrap; gap: 10px; }
    .kg-todo li { flex-wrap: wrap; }
    .kg-filterbar { flex-direction: column; align-items: stretch; }
}
.kg-help { display: block; margin: 6px 0 0; font-size: .82rem; line-height: 1.45; color: var(--kg-muted, #5b6b64); font-weight: 400; max-width: 62ch; }
.kg-list-filter { padding: 8px 12px; border: 1px solid var(--kg-border, #dfe7e3); border-radius: 8px; font: inherit; font-size: .9rem; min-width: 240px; }