/*
 * SupportKit frontend v2 theme.
 * Loaded after resources/assets/frontend/css/main.min.css: it retunes the default theme's CSS variables (so views that
 * fall back to the default template follow the new palette) and adds the v2 layout/components (sk-* classes).
 * The brand colour still comes from --color-primary-* (Brand::colourSchemeCss); --color-primary-800 is the brand colour.
 */

/* ---------- Tokens ---------- */
/* Declared on body: css-vars-ponyfill (general/js/main.js) writes the default theme variables inline on <html>. */
body.sk-body {
    --font-body: 'URW DIN', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: var(--font-body);
    --font-code: 'IBM Plex Mono', SFMono-Regular, Menlo, Consolas, monospace;

    /* Surfaces and text come from the configured theme (config/template.php themes + brand colour); never redefined here */

    --sk-accent: var(--color-primary-800);
    --sk-accent-hover: var(--color-primary-900);
    --sk-accent-soft: var(--color-primary-100);
    --sk-accent-solid: var(--color-primary-800);      /* backgrounds under white text */
    --sk-accent-solid-hover: var(--color-primary-900);
    --sk-ink: #17212f;
    --sk-ink-2: #243245;
    --sk-ink-text: #c9d2de;
    --sk-surface: var(--color-background-primary);
    --sk-ground: var(--color-background-secondary);
    --sk-border: var(--color-background-tertiary);
    --sk-border-strong: #c9d0da;
    --sk-subtle: #f7f8fa;
    --sk-text: var(--color-text-primary);
    --sk-muted: var(--color-text-secondary);
    --sk-shadow: 0 4px 14px rgba(23, 33, 47, .08);
    --sk-radius: 6px;
    --sk-radius-lg: 10px;
    --sk-container: 1200px;
    --sk-gutter: 24px;

    --sk-info-bg: #e3edfc;   --sk-info-fg: #134a9e;   --sk-info-bd: #a9c3ee;
    --sk-progress-bg: #ede7fb; --sk-progress-fg: #4a2d99;
    --sk-warn-bg: #fdebd3;   --sk-warn-fg: #8a4b00;   --sk-warn-bd: #f2c48a;
    --sk-ok-bg: #ddf3e6;     --sk-ok-fg: #0b5d35;     --sk-ok-bd: #a6ddbe;
    --sk-err-bg: #fee4e2;    --sk-err-fg: #a1170f;    --sk-err-bd: #f8b4ae;
    --sk-note-bg: #fff8e1;   --sk-note-fg: #6b4e00;   --sk-note-bd: #f2d58a;
    --sk-operator-bg: #f5f9ff; --sk-operator-bd: #c9dbf5;
}

body.sk-body.sp-theme-dark {

    --sk-accent: var(--color-primary-400);
    --sk-accent-hover: var(--color-primary-300);
    --sk-accent-soft: #1d3357;
    --sk-ink: #0b111a;
    --sk-ink-2: #1b2636;
    --sk-border-strong: #3a4859;
    --sk-subtle: #141c28;
    --sk-shadow: 0 4px 14px rgba(0, 0, 0, .35);

    --sk-info-bg: #1d3357;   --sk-info-fg: #b9d2fa;   --sk-info-bd: #2c4a7a;
    --sk-progress-bg: #2c2350; --sk-progress-fg: #d3c6fb;
    --sk-warn-bg: #43300f;   --sk-warn-fg: #f8d49a;   --sk-warn-bd: #6b4e1a;
    --sk-ok-bg: #12382a;     --sk-ok-fg: #9fe0bd;     --sk-ok-bd: #1f5a41;
    --sk-err-bg: #4a1a16;    --sk-err-fg: #ffb4ab;    --sk-err-bd: #7a2a23;
    --sk-note-bg: #3a3014;   --sk-note-fg: #f5dc95;   --sk-note-bd: #5e4d1d;
    --sk-operator-bg: #16233a; --sk-operator-bd: #26406a;
}

/* ---------- Base ---------- */
body.sk-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--sk-ground);
    color: var(--sk-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.sk-body h1, .sk-body h2, .sk-body h3, .sk-body h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.3; }
/* Zero-specificity scope: original colour classes (sp-text-*) and component colours win */
:where(.sk-body) a { color: var(--sk-accent); }
:where(.sk-body) a:hover { color: var(--sk-accent-hover); }
.sk-body code, .sk-body pre, .sk-body kbd { font-family: var(--font-code); }
.sk-body :focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }

.sk-container { width: 100%; max-width: var(--sk-container); margin: 0 auto; padding: 0 var(--sk-gutter); box-sizing: border-box; }
.sk-icon { display: inline-block; flex: none; vertical-align: -0.2em; }
.sk-icon--muted { color: var(--sk-muted); }
.sk-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sk-mono { font-family: var(--font-code); }
.sk-print-only { display: none; }

/* ---------- Buttons ---------- */
.sk-btn, .sk-body .sk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 38px; padding: 0 16px; box-sizing: border-box;
    border: 1px solid transparent; border-radius: var(--sk-radius);
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
    box-shadow: none; cursor: pointer;
}
.sk-btn--primary, .sk-body .sk-btn--primary { background: var(--sk-accent-solid); color: #fff; }
.sk-btn--primary:hover, .sk-body .sk-btn--primary:hover { background: var(--sk-accent-solid-hover); color: #fff; }
.sk-btn--secondary, .sk-body .sk-btn--secondary { background: var(--sk-surface); border-color: var(--sk-border-strong); color: var(--sk-text); }
.sk-btn--secondary:hover, .sk-body .sk-btn--secondary:hover { background: var(--sk-subtle); color: var(--sk-text); }
.sk-btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.sk-btn--block { width: 100%; }
.sk-icon-btn, .sk-body .sk-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--sk-radius);
    background: transparent; color: var(--sk-muted); box-shadow: none; cursor: pointer;
}
.sk-icon-btn:hover, .sk-body .sk-icon-btn:not([disabled]):hover { background: var(--sk-ground); color: var(--sk-text); }

/* ---------- Header ---------- */
.sk-header { position: sticky; top: 0; z-index: 10002; background: var(--sk-surface); border-bottom: 1px solid var(--sk-border); box-shadow: 0 1px 6px rgba(23, 33, 47, .06); }
.sk-header__inner { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; min-height: 64px; }
.sk-brand { display: inline-flex; align-items: center; flex: none; }
.sk-brand__logo { display: block; max-height: 40px; width: auto; }
.sk-nav { flex: 1 1 auto; min-width: 0; }
.sk-nav__list { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; }
.sk-body .sk-nav__list a { display: inline-block; padding: 6px 0; color: var(--sk-text); font-size: 16px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; }
.sk-body .sk-nav__list a:hover { color: var(--sk-accent); }
.sk-body .sk-nav__list a.current { color: var(--sk-accent); font-weight: 700; border-bottom-color: var(--sk-accent); }
.sk-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sk-body .sk-header__link { color: var(--sk-text); font-weight: 500; }
.sk-header__search { position: absolute; inset: 0 var(--sk-gutter); z-index: 10; display: flex; align-items: center; gap: 8px; background: var(--sk-surface); }
.sk-header__search.sp-hidden { display: none; }
.sk-header__search-form { flex: 1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius); }
.sk-body .sk-header__search-form input[type=search] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font-size: 15px; }

.sk-account { position: relative; }
.sk-body .sk-account__toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--sk-radius);
    background: transparent; box-shadow: none; color: var(--sk-text); font-weight: 500;
}
.sk-body .sk-account__toggle:not([disabled]):hover { background: var(--sk-ground); color: var(--sk-text); }
.sk-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sk-account__menu { right: 0; top: calc(100% + 6px); }
.sk-body .sp-dropdown-container .sk-account__menu > ul { width: 15rem; padding: 6px; border-color: var(--sk-border); border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow); text-align: left; }
.sk-body .sp-dropdown-container .sk-account__menu ul li a { border-radius: var(--sk-radius); color: var(--sk-text); }

.sk-mobile-nav { position: fixed; inset: 64px 0 auto; z-index: 10001; max-height: calc(100vh - 64px); overflow-y: auto; background: var(--sk-ink); color: #fff; }
.sk-mobile-nav .sk-container { padding-top: 16px; padding-bottom: 24px; }
.sk-mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.sk-mobile-nav a { display: block; padding: 10px 0; color: #fff; font-weight: 500; }
.sk-mobile-nav a.current { color: var(--color-primary-200); }
.sk-mobile-nav hr { border-color: var(--sk-ink-2); margin: 12px 0; }

/* ---------- Hero (home) ---------- */
.sk-hero { background: var(--sk-ink); color: #fff; }
.sk-hero__inner { padding-top: 56px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sk-hero__title { margin: 0; font-size: 36px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.sk-hero__form { width: 100%; max-width: 680px; display: flex; gap: 8px; }
.sk-body .sk-hero__form input[type=search] {
    flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 0; border-radius: 8px;
    background: #fff; color: #1a2230; font-size: 16px;
}
.sk-body .sk-hero__form .sk-btn { min-height: 52px; padding: 0 22px; border-radius: 8px; font-size: 15px; }

/* ---------- Page ---------- */
.sk-main { flex: 1 0 auto; padding: 24px 0 48px; }
.sk-page-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.sk-breadcrumb { font-size: 14px; color: var(--sk-muted); }
.sk-breadcrumb a { color: var(--sk-muted); }
.sk-breadcrumb a:hover { color: var(--sk-accent); }
.sk-body .sk-page-title { margin: 0; font-size: 26px; color: var(--sk-text); }
.sk-page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sk-page-status { display: inline-block; padding: 4px 12px; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }
.sk-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.sk-layout__content { flex: 999 1 560px; min-width: 0; }
.sk-sidebar { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }

.sk-panel { padding: 24px; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); overflow-wrap: anywhere; }
.sk-panel--bare { padding: 0; background: transparent; border: 0; border-radius: 0; }
.sk-card { padding: 18px; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); }
.sk-card__title { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.sk-section { display: flex; flex-direction: column; gap: 16px; }
.sk-section + .sk-section { margin-top: 40px; }
.sk-section__head { display: flex; align-items: baseline; gap: 12px; }
.sk-section__title { margin: 0; font-size: 22px; }
.sk-section__more { margin-left: auto; font-size: 14px; }

/* Generic building blocks shared by every v2 page */
.sk-stack { display: flex; flex-direction: column; gap: 16px; }
.sk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sk-narrow { max-width: 560px; margin: 0 auto; }
.sk-muted { color: var(--sk-muted); }
.sk-divider { height: 0; margin: 20px 0; border: 0; border-top: 1px solid var(--sk-border); }
.sk-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.sk-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 18px; }
.sk-panel__title { margin: 0; font-size: 18px; font-weight: 600; }
.sk-panel__actions { margin-left: auto; display: flex; gap: 8px; }
.sk-table-wrap { overflow-x: auto; border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); background: var(--sk-surface); }
.sk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sk-table th { padding: 10px 12px; background: var(--sk-subtle); border-bottom: 1px solid var(--sk-border); color: var(--sk-muted); font-size: 12.5px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .03em; }
.sk-table td { padding: 12px; border-bottom: 1px solid var(--sk-border); vertical-align: middle; }
.sk-table tr:last-child td { border-bottom: 0; }

.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sk-tile {
    display: flex; gap: 14px; padding: 20px; background: var(--sk-surface); border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow); color: var(--sk-text); text-decoration: none;
}
.sk-body a.sk-tile, .sk-body a.sk-tile:hover { color: var(--sk-text); }
.sk-body a.sk-tile:hover { border-color: var(--sk-accent); }
.sk-tile__icon {
    flex: none; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--sk-info-bg); color: var(--sk-info-fg); font-size: 20px;
}
.sk-tile__title { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.sk-tile__desc { margin: 0; font-size: 14px; color: var(--sk-muted); }
.sk-content-title, .sk-body .sp-content-inner > h2 { margin: 0 0 14px; font-size: 18px; }

/* ---------- Home ---------- */
.sk-hero + .sk-main { padding-top: 0; }
.sk-hero__inner { padding-bottom: 96px; }
.sk-dashboard-actions { position: relative; margin: -56px 0 32px; }
.sk-dashboard-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; align-items: start; }
.sk-type-card { display: flex; flex-direction: column; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); }
.sk-type-card__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 14px; }
.sk-type-card__icon { flex: none; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; background: var(--sk-info-bg); color: var(--sk-info-fg); font-size: 20px; }
.sk-body a.sk-type-card__icon:hover { color: var(--sk-info-fg); }
.sk-type-card__text { flex: 1 1 auto; min-width: 0; }
.sk-body .sk-type-card__title { margin: 0 0 2px; font-size: 19px; font-weight: 700; }
.sk-body .sk-type-card__title a { color: var(--sk-text); }
.sk-body .sk-type-card__title a:hover { color: var(--sk-accent); }
.sk-type-card__desc { margin: 0; font-size: 14px; color: var(--sk-muted); }
.sk-type-card__body { padding: 0 20px; border-top: 1px solid var(--sk-border); }
.sk-body .sk-type-card .sk-article-card__title { font-size: 16px; font-weight: 500; }
.sk-body .sk-type-card .sk-article-card__excerpt { display: none; }
.sk-body .sk-type-card .sk-pagination { display: none; }
.sk-type-card__more { margin-top: auto; padding: 12px 20px 16px; border-top: 1px solid var(--sk-border); font-size: 14px; font-weight: 500; }

/* ---------- Self-service ---------- */
/* Article lists: cards on the page ground; inside a panel they become a divided list. */
.sk-body ul.sk-article-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sk-body .sk-article-card { position: relative; padding: 18px 20px; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); transition: border-color .15s, box-shadow .15s; }
.sk-body .sk-article-card:hover { border-color: var(--sk-accent); box-shadow: var(--sk-shadow); }
.sk-body .sk-article-card__link { display: block; color: var(--sk-text); text-decoration: none; }
.sk-body .sk-article-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.sk-body .sk-article-card .sp-article-details { position: relative; z-index: 1; }
.sk-body .sk-article-card__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--sk-text); }
.sk-body .sk-article-card__link:hover .sk-article-card__title { color: var(--sk-accent); }
.sk-article-card__pin { margin-right: 6px; color: var(--sk-warn-fg); font-size: 14px; }
.sk-body .sk-article-card__excerpt { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-body .sk-panel .sk-article-list, .sk-body .sk-type-card .sk-article-list { gap: 0; }
.sk-body .sk-panel .sk-article-card, .sk-body .sk-type-card .sk-article-card { padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--sk-border); border-radius: 0; box-shadow: none; }
.sk-body .sk-panel .sk-article-card:last-child, .sk-body .sk-type-card .sk-article-card:last-child { border-bottom: 0; }
.sk-article-list__feed { margin-top: 16px; }
.sk-rss-icon { color: var(--sk-warn-fg); }
.sk-empty { padding: 32px 20px; text-align: center; color: var(--sk-muted); background: var(--sk-surface); border: 1px dashed var(--sk-border-strong); border-radius: var(--sk-radius-lg); }
.sk-panel .sk-empty { padding: 8px 0; text-align: left; background: transparent; border: 0; }
.sk-pagination:empty { display: none; }
.sk-pagination { margin-top: 16px; font-size: 14px; }
.sk-pagination nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sk-pagination a, .sk-pagination span[aria-current] > span, .sk-pagination li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius); background: var(--sk-surface); color: var(--sk-text); }
.sk-pagination ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sk-pagination .active > span, .sk-pagination span[aria-current] > span { background: var(--sk-accent-solid); border-color: var(--sk-accent-solid); color: #fff; }

.sk-body ul.sp-article-details { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.sk-body ul.sp-article-details > li { display: inline-flex; align-items: baseline; gap: 4px; }
.sk-body ul.sp-article-details a { color: var(--sk-muted); }
.sk-body ul.sp-article-details a:hover { color: var(--sk-accent); }

.sk-category-grid { margin-bottom: 8px; }
.sk-category-card { padding: 16px 18px; border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); background: var(--sk-surface); }
.sk-body .sk-category-card__title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; color: var(--sk-text); font-weight: 600; }
.sk-body .sk-category-card__title:hover { color: var(--sk-accent); }
.sk-category-card__title .fas { color: var(--sk-accent); }
.sk-category-card__count { color: var(--sk-muted); font-weight: 400; font-size: 13px; }
.sk-category-card__list { margin: 0; padding-left: 20px; font-size: 14px; }
.sk-category-card__list li { padding: 3px 0; }

.sk-side-nav, .sk-tag-list { margin: 0; padding: 0; list-style: none; }
.sk-body .sk-side-nav a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: var(--sk-radius); color: var(--sk-text); font-size: 14px; }
.sk-body .sk-side-nav a:hover { background: var(--sk-subtle); }
.sk-body .sk-side-nav a.current { background: var(--sk-info-bg); color: var(--sk-info-fg); font-weight: 600; }
.sk-side-nav__count { color: var(--sk-muted); font-size: 13px; }
.sk-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-body .sk-tag-list a { display: inline-block; padding: 3px 10px; border-radius: 4px; background: var(--sk-ground); color: var(--sk-text); font-size: 13px; }

.sk-body .sp-article { line-height: 1.7; }
.sk-body .sp-article h1, .sk-body .sp-article h2, .sk-body .sp-article h3 { margin: 1.4em 0 .5em; }
.sk-body .sp-article p, .sk-body .sp-article ul, .sk-body .sp-article ol { margin: 0 0 1em; }
.sk-body .sp-article ul { list-style: disc; padding-left: 1.5em; }
.sk-body .sp-article ol { list-style: decimal; padding-left: 1.5em; }
.sk-body .sp-article pre, .sk-body .sp-article code { background: var(--sk-ground); border-radius: 4px; }
.sk-body .sp-article pre { padding: 12px 14px; overflow-x: auto; }
.sk-body .sp-article code { padding: 1px 5px; }
.sk-body .sp-content-inner hr { margin: 20px 0; border-color: var(--sk-border); }

.sk-list { margin: 0; padding: 0; list-style: none; }
.sk-list > li { border-bottom: 1px solid var(--sk-border); }
.sk-list > li:last-child { border-bottom: 0; }
.sk-list__link { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; color: var(--sk-text); }
.sk-body a.sk-list__link { color: var(--sk-text); }
.sk-body a.sk-list__link:hover { color: var(--sk-accent); }
.sk-list__meta { flex: none; font-size: 13px; color: var(--sk-muted); white-space: nowrap; }

.sk-dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 12px; margin: 0; font-size: 14px; }
.sk-dl dt { color: var(--sk-muted); }
.sk-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Status / badges */
.sk-badge { display: inline-block; padding: 2px 10px; border-radius: 4px; background: var(--sk-info-bg); color: var(--sk-info-fg); font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.sk-badge--ok { background: var(--sk-ok-bg); color: var(--sk-ok-fg); }
.sk-badge--warn { background: var(--sk-warn-bg); color: var(--sk-warn-fg); }
.sk-badge--muted { background: var(--sk-ground); color: var(--sk-muted); }

/* Segmented control (e.g. message order) */
.sk-segmented { display: inline-flex; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius); overflow: hidden; background: var(--sk-surface); }
.sk-body .sk-segmented > a, .sk-body .sk-segmented > button {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 0; border-radius: 0; box-shadow: none;
    background: transparent; color: var(--sk-text); font-size: 14px; font-weight: 600; text-decoration: none;
}
.sk-body .sk-segmented > * + * { border-left: 1px solid var(--sk-border-strong); }
.sk-body .sk-segmented > [aria-pressed=true], .sk-body .sk-segmented > [aria-current] { background: var(--sk-accent-solid); color: #fff; }
.sk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; font-size: 14px; color: var(--sk-muted); }

/* Footer */
.sk-footer { flex: none; background: var(--sk-surface); border-top: 1px solid var(--sk-border); font-size: 14px; color: var(--sk-muted); }
.sk-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 22px; padding-bottom: 22px; }
.sk-footer__copyright { flex: 1 1 auto; }
.sk-footer__language { display: inline-flex; align-items: center; gap: 8px; }
.sk-body .sk-footer__language select { min-height: 34px; font-size: 14px; }

/* ---------- Default-theme (sp-*) primitives, restyled ---------- */
.sk-body :where(input:not([type=checkbox], [type=radio], [type=file], [type=submit], [type=button]), select, textarea) {
    min-height: 40px; padding: 8px 12px; box-sizing: border-box;
    background-color: var(--sk-surface); border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius);
    color: var(--sk-text); font: inherit; font-size: 15px;
}
.sk-body select:not([multiple]) { padding-right: 34px; }
.sk-body input:focus, .sk-body select:focus, .sk-body textarea:focus { background-color: var(--sk-surface); border-color: var(--sk-accent); box-shadow: 0 0 0 3px var(--sk-accent-soft); outline: 0; }
.sk-body input[aria-invalid=true], .sk-body .sp-input-error input, .sk-body input.error { border-color: #d92d20; }

.sk-body :where(.sp-button, button:not(.sk-icon-btn, .sk-account__toggle, .sk-segmented__btn, .sk-btn, .as-link, [class*="remove-"]), input[type=button], input[type=submit]) {
    min-height: 38px; padding: 8px 16px; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius);
    background-color: var(--sk-surface); box-shadow: none; color: var(--sk-text); font-weight: 600; font-size: 14px; line-height: 1.4;
}
.sk-body :where(.sp-button, button:not(.sk-icon-btn, .sk-account__toggle, .sk-segmented__btn, .sk-btn, .as-link, [class*="remove-"]), input[type=button]):not([disabled]):hover {
    background-color: var(--sk-subtle); color: var(--sk-text);
}
.sk-body .sp-button-sm, .sk-body button.sp-button-sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.sk-body .sp-button-submit, .sk-body input[type=submit], .sk-body button[type=submit]:not(.sk-icon-btn) { background-color: var(--sk-accent-solid); border-color: var(--sk-accent-solid); color: #fff; }
.sk-body .sp-button-submit:not([disabled]):hover, .sk-body input[type=submit]:not([disabled]):hover, .sk-body button[type=submit]:not(.sk-icon-btn):not([disabled]):hover {
    background-color: var(--sk-accent-solid-hover); border-color: var(--sk-accent-solid-hover); color: #fff;
}
.sk-body .sk-btn--primary { border-color: transparent; }

.sk-body input[type=checkbox], .sk-body input[type=radio] {
    -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
    width: 18px; height: 18px; margin: 0 8px 0 0; background: none; accent-color: #38a169; vertical-align: -3px; /* default theme checked colour */
}
.sk-body input[type=checkbox]:before, .sk-body input[type=radio]:before { display: none; }

.sk-body .sp-form-row { flex-direction: column; align-items: stretch; margin-bottom: 20px; }
.sk-body .sp-form-row > label { display: block; width: auto; margin-bottom: 6px; padding: 0; text-align: left; font-size: 14px; font-weight: 600; }
.sk-body .sp-form-row .sp-input-container { width: 100%; }
.sk-body .sp-form-row input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
.sk-body .sp-form-row select { width: 100%; }
.sk-body .sp-description { color: var(--sk-muted); font-size: 13.5px; }

.sk-body .sp-alert { margin-bottom: 16px; padding: 12px 16px; border-width: 1px; border-radius: var(--sk-radius); box-shadow: none; } /* colours: default theme per alert type */
.sk-body .sp-alert.sp-hidden { display: none; }
.sk-body .sp-alert-sticky { margin: 0; border-radius: 0; border-width: 0 0 1px; }

.sk-body .sp-badge { border-radius: 4px; }
.sk-body .sp-collapsible { padding: 14px 16px; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); box-shadow: none; }
.sk-body .sp-sidebar-box .sp-collapsible { padding: 0; border: 0; background: transparent; }
.sk-body .sp-sidebar-box { padding: 18px; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); }
.sk-body .sp-sidebar-box + .sp-sidebar-box { margin-top: 16px; }
.sk-body .sp-sidebar-box h2 { margin: 0 0 12px; font-size: 15px; }
.sk-body .sp-message { border-radius: var(--sk-radius-lg); }
:where(.sk-body) .sp-message { border-color: var(--sk-border); background-color: var(--sk-surface); } /* original message-type colours win */
.sk-body table.sp-table-grid { background: var(--sk-surface); }
.sk-body table.sp-table-grid thead th { border-bottom-width: 1px; border-color: var(--sk-border); background: var(--sk-subtle); color: var(--sk-muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.sk-body table.sp-table-grid td { border-color: var(--sk-border); }

/* Tabs (sp-tabs, driven by general/js/main.js) */
.sk-body ul.sp-tabs { margin: 0 0 20px; padding: 0; gap: 4px; border-bottom: 1px solid var(--sk-border); }
.sk-body ul.sp-tabs li:first-child, .sk-body ul.sp-tabs li:last-child { padding: 0; }
.sk-body ul.sp-tabs li a { margin-bottom: -1px; padding: 10px 16px; background: transparent; border-bottom: 2px solid transparent; color: var(--sk-muted); font-weight: 600; font-size: 14.5px; }
.sk-body ul.sp-tabs li.sp-active a { background: transparent; border-radius: 0; border-bottom-color: var(--sk-accent); color: var(--sk-accent); }
.sk-body ul.sp-tabs li:not(.sp-active):hover a { color: var(--sk-text); }

/* ---------- Tickets ---------- */
.sk-body .sp-message-block { display: flex; flex-direction: column; gap: 14px; }
.sk-body .sk-message { margin: 0; padding: 0; border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); background: var(--sk-surface); }
.sk-body .sk-message--operator { background: var(--sk-operator-bg); border-color: var(--sk-operator-bd); }
.sk-body .sp-message.sp-new-message { box-shadow: 0 0 0 2px var(--sk-accent-soft); }
.sk-message__header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sk-border); }
.sk-message--operator .sk-message__header { border-bottom-color: var(--sk-operator-bd); }
.sk-message__avatar { width: 36px; height: 36px; }
.sk-message__meta { min-width: 0; }
.sk-message__name { font-weight: 600; }
.sk-message--operator .sk-message__name { color: var(--sk-info-fg); }
.sk-body .sk-message .sp-message-text { margin: 0; padding: 14px 16px; line-height: 1.65; }
.sk-body .sk-message ul.sp-attachments { margin: 0; padding: 0 16px 14px; }
.sk-body .sk-reply-box .sp-message-form { padding: 16px; background: var(--sk-surface); border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius-lg); }
.sk-body .sp-ticket-details .sp-badge, .sk-body .sk-dl .sp-badge { display: inline-block; padding: 2px 10px; border-radius: 4px; color: #fff; font-size: 12.5px; }
.sk-body .sp-custom-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sk-border); }

/* Ticket grid (DataTables) */
.sk-body table.dataTable { width: 100% !important; border-collapse: collapse; background: var(--sk-surface); font-size: 14px; }
.sk-body table.dataTable thead th { padding: 10px 12px; border-bottom: 1px solid var(--sk-border); background: var(--sk-subtle); color: var(--sk-muted); font-size: 12.5px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .03em; }
.sk-body table.dataTable tbody td { padding: 12px; border-bottom: 1px solid var(--sk-border); vertical-align: middle; }
.sk-body table.dataTable tbody tr:hover td { background: var(--sk-subtle); }
/* Selectize (CC recipients, tags, multi-selects) */
.sk-body .selectize-control .selectize-input {
    min-height: 40px; padding: 6px 10px; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius);
    background: var(--sk-surface); box-shadow: none; color: var(--sk-text); font-size: 15px; line-height: 26px;
}
.sk-body .selectize-control .selectize-input.focus { border-color: var(--sk-accent); box-shadow: 0 0 0 3px var(--sk-accent-soft); }
.sk-body .selectize-control .selectize-input input { min-height: 0; height: auto; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 15px; }
.sk-body .selectize-control.multi .selectize-input > div { margin: 2px 6px 2px 0; padding: 0 8px; border: 0; border-radius: 4px; background: var(--sk-info-bg); color: var(--sk-info-fg); }
.sk-body .selectize-dropdown { margin-top: 4px; border: 1px solid var(--sk-border); border-radius: var(--sk-radius); background: var(--sk-surface); box-shadow: var(--sk-shadow); color: var(--sk-text); }
.sk-body .selectize-dropdown .option, .sk-body .selectize-dropdown .create { padding: 8px 12px; }
.sk-body .selectize-dropdown .active { background: var(--sk-subtle); color: var(--sk-text); }

/* DataTables (ticket list, email history, linked accounts): v2 controls, table never wider than its panel */
.sk-body .dataTables_wrapper { overflow-x: visible; }
.sk-body .dataTables_wrapper table.sp-table-grid { width: 100% !important; margin: 0; }
.sk-body .dataTables_wrapper .dataTables_length, .sk-body .dataTables_wrapper .dataTables_filter { margin: 0 0 16px; font-size: 14px; color: var(--sk-muted); }
.sk-body .dataTables_wrapper .dataTables_length { float: left; }
.sk-body .dataTables_wrapper .dataTables_filter { float: right; }
.sk-body .dataTables_wrapper .dataTables_length label, .sk-body .dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.sk-body .dataTables_wrapper .dataTables_length select, .sk-body .dataTables_wrapper .dataTables_filter input {
    height: 40px; min-height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius);
    background-color: var(--sk-surface); color: var(--sk-text); font-size: 14px;
}
.sk-body .dataTables_wrapper .dataTables_length select { padding-right: 34px; }
.sk-body .dataTables_wrapper .dataTables_filter input { width: 260px; max-width: 100%; }
.sk-body .dataTables_wrapper table.dataTable { clear: both; }
.sk-body .dataTables_wrapper .dataTables_info { float: left; padding-top: 6px; }
.sk-body .dataTables_wrapper .dataTables_paginate { float: right; display: inline-flex; align-items: center; gap: 6px; }
.sk-body .dataTables_wrapper .paginate_button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius); background: var(--sk-surface); color: var(--sk-text); cursor: pointer; }
.sk-body .dataTables_wrapper .paginate_button.disabled { opacity: .45; cursor: default; }
.sk-body .dataTables_wrapper .paginate_input { width: 52px; height: 34px; min-height: 34px; padding: 0 8px; text-align: center; }
.sk-body .dataTables_wrapper::after { content: ''; display: block; clear: both; }
@media (max-width: 599px) {
    .sk-body .dataTables_wrapper .dataTables_length, .sk-body .dataTables_wrapper .dataTables_filter { float: none; }
    .sk-body .dataTables_wrapper .dataTables_filter input { width: 100%; }
}
.sk-body .dataTables_wrapper .dataTables_paginate, .sk-body .dataTables_wrapper .dataTables_info { margin-top: 12px; font-size: 14px; color: var(--sk-muted); }

/* ---------- Responsive ---------- */
.sk-body .sk-show-lg { display: none; }
@media (max-width: 1023px) {
    .sk-nav { display: none; }
    .sk-body .sk-show-lg { display: inline-flex; }
}
@media (max-width: 911px) {
    .sk-layout > .sk-sidebar { order: -1; max-width: none; }
}
@media (max-width: 767px) {
    body.sk-body { --sk-gutter: 16px; }
    .sk-body .sk-hide-md { display: none; }
    .sk-hero__title { font-size: 26px; }
    .sk-hero__inner { padding-top: 36px; padding-bottom: 60px; }
    .sk-page-title { font-size: 22px; }
    .sk-panel { padding: 16px; }
    .sk-sidebar { max-width: none; }
}
@media (max-width: 479px) {
    .sk-body .sk-hide-sm { display: none; }
    .sk-hero__form { flex-direction: column; }
}

/* ---------- Print ---------- */
@media print {
    body.sk-body { background: #fff; }
    body.sk-body.sp-theme-dark { --color-background-primary: #fff; --color-background-secondary: #fff; --color-text-primary: #1a2230; --color-text-secondary: #5a6474; }
    .sk-header { position: static; border: 0; }
    .sk-nav, .sk-header__actions, .sk-mobile-nav, .sk-footer, .sk-print-hidden { display: none !important; }
    .sk-print-only { display: inline; }
    .sk-panel { padding: 0; border: 0; }
    .sk-container { max-width: none; padding: 0; }
}