/* ===========================================================================
   Portfolio Control Center - admin shell + dashboard
   Sharp-cornered design system, light and dark.
   Loaded AFTER portfolio-admin.css so it wins on ties.
   =========================================================================== */

/* :root[...] keeps these above portfolio-admin.css's html[data-theme="dark"] block,
   which Django's own theme.js activates. */
:root,
:root[data-cc-theme="light"] {
    --cc-bg: #f3f5fa;
    --cc-panel: #ffffff;
    --cc-panel-2: #f8fafc;
    --cc-panel-3: #eef2f9;
    --cc-border: #e2e8f2;
    --cc-border-strong: #cbd5e6;
    --cc-text: #111827;
    --cc-text-2: #384155;
    --cc-muted: #6b7280;
    --cc-accent: #3355ff;
    --cc-accent-text: #2a48e0;
    --cc-accent-soft: #e8edff;
    --cc-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);

    --cc-blue-fg: #2a5bd7;
    --cc-blue-bg: #e6edfd;
    --cc-violet-fg: #6d4bd8;
    --cc-violet-bg: #efe9fd;
    --cc-green-fg: #17845a;
    --cc-green-bg: #e2f6ec;
    --cc-amber-fg: #a5670a;
    --cc-amber-bg: #fdf0da;
    --cc-red-fg: #c0392f;
    --cc-red-bg: #fdeaea;

    --cc-sidebar-w: 262px;
    --cc-topbar-h: 60px;

    /* Re-theme portfolio-admin.css and Django admin via their own variables,
       so their !important colour rules follow the active theme. */
    --pc-bg: var(--cc-bg);
    --pc-surface: var(--cc-panel);
    --pc-surface-soft: var(--cc-panel-2);
    --pc-border: var(--cc-border);
    --pc-text: var(--cc-text);
    --pc-muted: var(--cc-muted);
    --pc-accent: var(--cc-accent-text);
    --pc-accent-strong: var(--cc-accent);
    --pc-accent-soft: var(--cc-accent-soft);
    --pc-shadow: var(--cc-shadow);

    --body-bg: var(--cc-bg);
    --body-fg: var(--cc-text);
    --header-bg: var(--cc-panel);
    --header-color: var(--cc-text);
    --breadcrumbs-bg: var(--cc-panel-2);
    --breadcrumbs-fg: var(--cc-muted);
    --breadcrumbs-link-fg: var(--cc-accent-text);
    --link-fg: var(--cc-accent-text);
    --link-hover-color: var(--cc-accent);
    --hairline-color: var(--cc-border);
    --border-color: var(--cc-border);
    --darkened-bg: var(--cc-panel-2);
    --selected-bg: var(--cc-accent-soft);
    --selected-row: var(--cc-accent-soft);
    --close-button-bg: var(--cc-panel-3);
    --close-button-hover-bg: var(--cc-border);
}

:root[data-cc-theme="dark"] {
    --cc-bg: #080d18;
    --cc-panel: #0f1728;
    --cc-panel-2: #131d31;
    --cc-panel-3: #18233a;
    --cc-border: #1e2b45;
    --cc-border-strong: #2b3b5c;
    --cc-text: #e8eefb;
    --cc-text-2: #c2cee4;
    --cc-muted: #8896b2;
    --cc-accent: #5b8cff;
    --cc-accent-text: #8fb0ff;
    --cc-accent-soft: #16233d;
    --cc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    --cc-blue-fg: #7aa2ff;
    --cc-blue-bg: #14213c;
    --cc-violet-fg: #b193f5;
    --cc-violet-bg: #241b3f;
    --cc-green-fg: #4fd39a;
    --cc-green-bg: #0e2c22;
    --cc-amber-fg: #f0b357;
    --cc-amber-bg: #33240d;
    --cc-red-fg: #ff8d84;
    --cc-red-bg: #331616;

    /* Re-theme portfolio-admin.css and Django admin via their own variables,
       so their !important colour rules follow the active theme. */
    --pc-bg: var(--cc-bg);
    --pc-surface: var(--cc-panel);
    --pc-surface-soft: var(--cc-panel-2);
    --pc-border: var(--cc-border);
    --pc-text: var(--cc-text);
    --pc-muted: var(--cc-muted);
    --pc-accent: var(--cc-accent-text);
    --pc-accent-strong: var(--cc-accent);
    --pc-accent-soft: var(--cc-accent-soft);
    --pc-shadow: var(--cc-shadow);

    --body-bg: var(--cc-bg);
    --body-fg: var(--cc-text);
    --header-bg: var(--cc-panel);
    --header-color: var(--cc-text);
    --breadcrumbs-bg: var(--cc-panel-2);
    --breadcrumbs-fg: var(--cc-muted);
    --breadcrumbs-link-fg: var(--cc-accent-text);
    --link-fg: var(--cc-accent-text);
    --link-hover-color: var(--cc-accent);
    --hairline-color: var(--cc-border);
    --border-color: var(--cc-border);
    --darkened-bg: var(--cc-panel-2);
    --selected-bg: var(--cc-accent-soft);
    --selected-row: var(--cc-accent-soft);
    --close-button-bg: var(--cc-panel-3);
    --close-button-hover-bg: var(--cc-border);
}

/* ---------------------------------------------------------- sharp corners */

body.cc-admin,
body.cc-admin *,
body.cc-admin *::before,
body.cc-admin *::after {
    border-radius: 0 !important;
}

/* ------------------------------------------------------------- base reset */

body.cc-admin {
    background: var(--cc-bg) !important;
    color: var(--cc-text) !important;
    margin: 0;
}

body.cc-admin,
body.cc-admin input,
body.cc-admin select,
body.cc-admin textarea,
body.cc-admin button {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Django chrome we replace with our own shell. */
body.cc-admin #header,
body.cc-admin #nav-sidebar,
body.cc-admin .main > #nav-sidebar,
body.cc-admin #toggle-nav-sidebar,
body.cc-admin #site-name,
body.cc-admin #user-tools,
body.cc-admin .pc-admin-footer {
    display: none !important;
}

body.cc-admin #container {
    display: block !important;
    margin: 0 !important;
    background: transparent !important;
}

body.cc-admin .main {
    display: block !important;
    padding: 0 !important;
}

body.cc-admin .skip-to-content-link {
    position: absolute;
    left: -9999px;
}

/* --------------------------------------------------------------- the shell */

/* The sidebar is position:fixed, so instead of restructuring Django's DOM we
   simply inset #container by the sidebar width. Topbar and content both shift. */
body.cc-admin #container {
    /* Django's #container is width:100% with content-box sizing, so the
       sidebar inset would otherwise push the page wider than the viewport. */
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--cc-sidebar-w) !important;
    min-height: 100vh;
    overflow-x: hidden;
    transition: padding-left 0.22s ease;
}

body.cc-admin main.content {
    display: block !important;
    padding: 0 !important;
    max-width: none !important;
}

body.cc-admin #content {
    padding: 22px !important;
    background: transparent !important;
}

body.cc-admin #footer {
    display: none !important;
}

/* ----------------------------------------------------------------- sidebar */

.cc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--cc-sidebar-w);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--cc-panel);
    border-right: 1px solid var(--cc-border);
    transition: width 0.22s ease;
}

.cc-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cc-border);
    min-height: var(--cc-topbar-h);
}

.cc-brand-mark {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-accent);
    color: #fff;
}

.cc-brand-text {
    min-width: 0;
    flex: 1;
}

.cc-brand-text a {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cc-accent-text) !important;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-brand-text span {
    display: block;
    font-size: 0.66rem;
    color: var(--cc-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-collapse {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--cc-border);
    background: var(--cc-panel-2);
    color: var(--cc-muted) !important;
    font-size: 13px;
    line-height: 1;
}

.cc-collapse:hover {
    border-color: var(--cc-accent);
    color: var(--cc-accent-text) !important;
}

.cc-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 10px 8px;
}

.cc-nav-group + .cc-nav-group {
    margin-top: 16px;
}

.cc-nav-group > h3 {
    margin: 0 0 6px;
    padding: 0 8px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
}

.cc-nav-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-nav-group a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--cc-text-2) !important;
    text-decoration: none;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.cc-nav-group a .icon {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--cc-muted);
}

.cc-nav-group a:hover {
    background: var(--cc-panel-3);
    color: var(--cc-text) !important;
}

.cc-nav-group a.is-current {
    background: var(--cc-accent-soft);
    border-left-color: var(--cc-accent);
    color: var(--cc-accent-text) !important;
    font-weight: 600;
}

.cc-nav-group a.is-current .icon {
    color: var(--cc-accent-text);
}

.cc-sidebar-foot {
    padding: 10px;
    border-top: 1px solid var(--cc-border);
}

.cc-viewsite {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cc-border);
    background: var(--cc-panel-2);
    color: var(--cc-text) !important;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}

.cc-viewsite:hover {
    border-color: var(--cc-accent);
    color: var(--cc-accent-text) !important;
}

.cc-viewsite .cc-viewsite-arrow {
    margin-left: auto;
    color: var(--cc-muted);
}

/* collapsed state */

html.cc-collapsed {
    --cc-sidebar-w: 62px;
}

html.cc-collapsed .cc-brand-text,
html.cc-collapsed .cc-nav-group > h3,
html.cc-collapsed .cc-nav-group a span,
html.cc-collapsed .cc-viewsite span,
html.cc-collapsed .cc-viewsite-arrow {
    display: none;
}

html.cc-collapsed .cc-brand,
html.cc-collapsed .cc-nav-group a,
html.cc-collapsed .cc-viewsite {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

html.cc-collapsed .cc-collapse {
    transform: rotate(180deg);
}

/* ------------------------------------------------------------------ topbar */

.cc-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--cc-topbar-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 22px;
    background: var(--cc-panel);
    border-bottom: 1px solid var(--cc-border);
}

.cc-search {
    position: relative;
    flex: 1;
    max-width: 520px;
}

.cc-search .icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--cc-muted);
    pointer-events: none;
}

.cc-search input {
    width: 100%;
    padding: 8px 52px 8px 34px;
    font-size: 0.86rem;
    color: var(--cc-text) !important;
    background: var(--cc-panel-2) !important;
    border: 1px solid var(--cc-border) !important;
}

.cc-search input::placeholder {
    color: var(--cc-muted);
}

.cc-search input:focus {
    outline: none;
    border-color: var(--cc-accent) !important;
    background: var(--cc-panel) !important;
}

.cc-search kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    font-size: 0.68rem;
    font-family: inherit;
    color: var(--cc-muted);
    background: var(--cc-panel-3);
    border: 1px solid var(--cc-border);
}

.cc-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
}

[data-cc-theme="dark"] .cc-search-results {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.cc-search-results a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 0.85rem;
    color: var(--cc-text-2) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--cc-border);
}

.cc-search-results a:last-child {
    border-bottom: 0;
}

.cc-search-results a:hover,
.cc-search-results a.is-active {
    background: var(--cc-accent-soft);
    color: var(--cc-accent-text) !important;
}

.cc-search-results .cc-search-group {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--cc-muted);
}

.cc-search-empty {
    padding: 12px;
    font-size: 0.83rem;
    color: var(--cc-muted);
}

.cc-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: var(--cc-muted) !important;
}

.cc-icon-btn:hover {
    background: var(--cc-panel-3);
    color: var(--cc-text) !important;
    border-color: var(--cc-border);
}

.cc-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 12px;
    border-left: 1px solid var(--cc-border);
}

.cc-user-avatar {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff !important;
    background: var(--cc-accent);
}

.cc-user-meta strong {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--cc-text) !important;
    line-height: 1.25;
}

.cc-user-meta span {
    display: block;
    font-size: 0.71rem;
    color: var(--cc-muted) !important;
    line-height: 1.25;
}

.cc-user-menu {
    position: relative;
}

.cc-user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
    padding: 5px;
}

[data-cc-theme="dark"] .cc-user-dropdown {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.cc-user-dropdown a,
.cc-user-dropdown button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    font-size: 0.85rem;
    text-align: left;
    color: var(--cc-text-2) !important;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.cc-user-dropdown a:hover,
.cc-user-dropdown button:hover {
    background: var(--cc-panel-3);
    color: var(--cc-text) !important;
}

/* ------------------------------------------------------------- page canvas */

.cc-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.cc-greeting {
    margin: 0 0 2px;
    font-size: 0.85rem;
    color: var(--cc-muted) !important;
}

.cc-page-head h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cc-text) !important;
}

.cc-page-head p.cc-sub {
    margin: 5px 0 0;
    font-size: 0.9rem;
    color: var(--cc-muted) !important;
}

.cc-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: var(--cc-muted) !important;
}

/* --------------------------------------------------------------- stat grid */

.cc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.cc-stat {
    position: relative;
    display: block;
    padding: 16px;
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    box-shadow: var(--cc-shadow);
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.cc-stat:hover {
    border-color: var(--cc-accent);
    transform: translateY(-1px);
}

.cc-stat-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.cc-stat-value {
    display: block;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cc-text) !important;
}

.cc-stat-label {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--cc-muted) !important;
}

.cc-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cc-green-fg) !important;
}

.cc-stat-trend.is-flat {
    color: var(--cc-muted) !important;
}

.cc-stat-go {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--cc-muted);
}

.cc-stat:hover .cc-stat-go {
    color: var(--cc-accent-text);
}

/* tone helpers */

.cc-tone-blue { background: var(--cc-blue-bg); color: var(--cc-blue-fg) !important; }
.cc-tone-violet { background: var(--cc-violet-bg); color: var(--cc-violet-fg) !important; }
.cc-tone-green { background: var(--cc-green-bg); color: var(--cc-green-fg) !important; }
.cc-tone-amber { background: var(--cc-amber-bg); color: var(--cc-amber-fg) !important; }
.cc-tone-red { background: var(--cc-red-bg); color: var(--cc-red-fg) !important; }

/* ------------------------------------------------------------------ panels */

.cc-row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.cc-row.cc-row-2 {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.cc-panel {
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    box-shadow: var(--cc-shadow);
    display: flex;
    flex-direction: column;
}

.cc-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--cc-border);
}

.cc-panel-head .cc-panel-icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cc-panel-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cc-text) !important;
}

.cc-panel-head p {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--cc-muted) !important;
}

.cc-panel-head .cc-panel-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cc-accent-text) !important;
    text-decoration: none;
    white-space: nowrap;
}

.cc-panel-head .cc-panel-link:hover {
    text-decoration: underline;
}

.cc-panel-body {
    padding: 16px 17px;
}

/* ----------------------------------------------------------- quick actions */

.cc-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 12px;
}

.cc-action {
    position: relative;
    display: block;
    padding: 14px;
    border: 1px solid var(--cc-border);
    background: var(--cc-panel-2);
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.cc-action:hover {
    border-color: var(--cc-accent);
    transform: translateY(-1px);
}

.cc-action .cc-action-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

.cc-action strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cc-text) !important;
}

.cc-action span {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--cc-muted) !important;
}

.cc-action .cc-action-go {
    position: absolute;
    top: 16px;
    right: 13px;
    color: var(--cc-muted);
}

.cc-action:hover .cc-action-go {
    color: var(--cc-accent-text);
}

/* ------------------------------------------------------------------- chart */

.cc-chart {
    padding: 16px 17px 12px;
}

.cc-chart-grid {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 8px;
}

.cc-chart-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
    font-size: 0.7rem;
    color: var(--cc-muted);
    text-align: right;
}

.cc-chart-plot {
    position: relative;
    height: 150px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border-bottom: 1px solid var(--cc-border);
    background-image: repeating-linear-gradient(
        to top,
        transparent 0,
        transparent 36px,
        var(--cc-border) 36px,
        var(--cc-border) 37px
    );
}

.cc-bar {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.cc-bar i {
    display: block;
    width: 100%;
    min-height: 2px;
    background: var(--cc-accent);
    opacity: 0.9;
    transition: opacity 0.18s ease;
}

.cc-bar.is-zero i {
    background: var(--cc-border-strong);
}

.cc-bar:hover i {
    opacity: 1;
}

.cc-bar-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 9px;
    white-space: nowrap;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--cc-text) !important;
    background: var(--cc-panel);
    border: 1px solid var(--cc-border-strong);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.16);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.cc-bar:hover .cc-bar-tip {
    opacity: 1;
}

.cc-bar-tip b {
    display: block;
    color: var(--cc-text) !important;
}

.cc-bar-tip span {
    color: var(--cc-muted) !important;
}

.cc-chart-xaxis {
    display: flex;
    gap: 6px;
    margin-top: 7px;
    padding-left: 34px;
}

.cc-chart-xaxis span {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.68rem;
    color: var(--cc-muted);
    overflow: hidden;
}

.cc-chart-empty {
    padding: 30px 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--cc-muted);
}

/* --------------------------------------------------------- content models */

.cc-table-wrap {
    overflow-x: auto;
}

table.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

table.cc-table th {
    padding: 9px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
    background: var(--cc-panel-2);
    border-bottom: 1px solid var(--cc-border);
    white-space: nowrap;
}

table.cc-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cc-border);
    color: var(--cc-text-2) !important;
    vertical-align: middle;
}

table.cc-table tbody tr:last-child td {
    border-bottom: 0;
}

table.cc-table tbody tr:hover td {
    background: var(--cc-panel-2);
}

.cc-model-name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    color: var(--cc-text) !important;
    white-space: nowrap;
}

.cc-model-name .icon {
    width: 16px;
    height: 16px;
    color: var(--cc-muted);
}

.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.cc-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
}

.cc-pill-active {
    color: var(--cc-green-fg) !important;
    background: var(--cc-green-bg);
}

.cc-pill-empty {
    color: var(--cc-muted) !important;
    background: var(--cc-panel-3);
}

.cc-tbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 0.79rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--cc-text) !important;
    background: var(--cc-panel-2);
    border: 1px solid var(--cc-border);
}

.cc-tbtn:hover {
    border-color: var(--cc-accent);
    color: var(--cc-accent-text) !important;
}

.cc-tbtn + .cc-tbtn {
    margin-left: 6px;
}

/* ----------------------------------------------------------------- activity */

.cc-activity {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.cc-activity li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 17px;
}

.cc-activity li + li {
    border-top: 1px solid var(--cc-border);
}

.cc-activity-icon {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cc-activity-body {
    min-width: 0;
    flex: 1;
}

.cc-activity-body strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cc-text) !important;
}

.cc-activity-body strong a {
    color: inherit !important;
    text-decoration: none;
}

.cc-activity-body strong a:hover {
    color: var(--cc-accent-text) !important;
}

.cc-activity-body span {
    display: block;
    font-size: 0.79rem;
    color: var(--cc-muted) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-activity-time {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--cc-muted) !important;
    white-space: nowrap;
}

.cc-activity-time::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--cc-accent);
}

.cc-empty {
    padding: 26px 17px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--cc-muted) !important;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
    .cc-row.cc-row-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .cc-sidebar {
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }

    body.cc-nav-open .cc-sidebar {
        transform: translateX(0);
    }

    body.cc-admin #container {
        padding-left: 0 !important;
    }

    .cc-mobile-toggle {
        display: inline-flex !important;
    }

    .cc-user-meta {
        display: none;
    }

    .cc-search kbd {
        display: none;
    }

    body.cc-admin #content {
        padding: 14px !important;
    }

    .cc-page-head h1 {
        font-size: 1.55rem;
    }
}

.cc-mobile-toggle {
    display: none;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--cc-panel-2);
    border: 1px solid var(--cc-border);
    color: var(--cc-text) !important;
}

.cc-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(8, 13, 24, 0.5);
}

body:not(.cc-nav-open) .cc-scrim {
    display: none;
}

@media (min-width: 901px) {
    .cc-scrim {
        display: none !important;
    }
}

/* Django's dashboard.css pins .dashboard #content to a 600px column, and
   base.css caps #content-main; the Control Center layout is full-width. */
body.cc-admin.dashboard #content,
body.cc-admin #content {
    width: auto !important;
    max-width: none !important;
    float: none !important;
}

body.cc-admin #content-main,
body.cc-admin #content > .colM,
body.cc-admin .colM {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
}

/* Django zebra-stripes every table via tr:nth-child(); the Control Center
   panels manage their own row styling. */
body.cc-admin .cc-table tbody tr,
body.cc-admin .cc-table tbody tr:nth-child(odd),
body.cc-admin .cc-table tbody tr:nth-child(even) {
    background: transparent !important;
}

body.cc-admin .cc-table tbody tr:hover,
body.cc-admin .cc-table tbody tr:hover td {
    background: var(--cc-panel-2) !important;
}

/* Keep the row actions on one line. */
body.cc-admin .cc-table td:last-child {
    white-space: nowrap;
}

/* =========================================================================
   Changelist: thumbnails, badges, compact filters
   ========================================================================= */

.cc-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    background: var(--cc-panel-3);
    border: 1px solid var(--cc-border);
}

.cc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-thumb.is-empty {
    color: var(--cc-muted) !important;
    font-size: 15px;
}

.cc-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
}

.cc-badge-green { color: var(--cc-green-fg) !important; background: var(--cc-green-bg); }
.cc-badge-amber { color: var(--cc-amber-fg) !important; background: var(--cc-amber-bg); }
.cc-badge-violet { color: var(--cc-violet-fg) !important; background: var(--cc-violet-bg); }
.cc-badge-blue { color: var(--cc-blue-fg) !important; background: var(--cc-blue-bg); }
.cc-badge-grey { color: var(--cc-muted) !important; background: var(--cc-panel-3); }

.cc-chip {
    display: inline-block;
    padding: 1px 7px;
    margin-right: 3px;
    font-size: 0.71rem;
    color: var(--cc-text-2) !important;
    background: var(--cc-panel-3);
    border: 1px solid var(--cc-border);
    white-space: nowrap;
}

.cc-dim {
    color: var(--cc-muted) !important;
}

/* Results table can be wide - scroll it rather than overflowing the page. */
body.cc-admin #changelist .results {
    overflow-x: auto;
}

body.cc-admin #changelist-form .results table,
body.cc-admin #result_list {
    min-width: 100%;
}

/* --- compact, collapsible filters --- */

body.cc-admin #changelist-filter {
    padding-bottom: 8px;
}

body.cc-admin .cc-filter {
    border-bottom: 1px solid var(--cc-border);
}

body.cc-admin .cc-filter > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cc-text) !important;
}

body.cc-admin .cc-filter > summary::-webkit-details-marker {
    display: none;
}

body.cc-admin .cc-filter > summary::after {
    content: "+";
    margin-left: auto;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--cc-muted);
}

body.cc-admin .cc-filter[open] > summary::after {
    content: "\2212";
}

body.cc-admin .cc-filter .cc-filter-current {
    font-weight: 500;
    color: var(--cc-accent-text) !important;
}

body.cc-admin .cc-filter ul {
    margin: 0;
    padding: 0 12px 10px;
    list-style: none;
}

body.cc-admin .cc-filter li {
    padding: 0;
}

body.cc-admin .cc-filter li a {
    display: block;
    padding: 4px 6px;
    font-size: 0.82rem;
    color: var(--cc-text-2) !important;
    text-decoration: none;
}

body.cc-admin .cc-filter li a:hover {
    background: var(--cc-panel-3);
    color: var(--cc-text) !important;
}

body.cc-admin .cc-filter li.selected a {
    background: var(--cc-accent-soft);
    color: var(--cc-accent-text) !important;
    font-weight: 600;
}

/* --- drag to reorder --- */

body.cc-admin .cc-drag-col {
    width: 26px;
    text-align: center;
}

body.cc-admin .cc-drag-handle {
    display: inline-block;
    width: 18px;
    cursor: grab;
    color: var(--cc-muted);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

body.cc-admin tr.cc-dragging {
    opacity: 0.45;
}

body.cc-admin tr.cc-drop-target td {
    box-shadow: inset 0 2px 0 var(--cc-accent);
}

body.cc-admin .cc-reorder-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--cc-muted) !important;
    background: var(--cc-panel-2);
    border: 1px solid var(--cc-border);
}

body.cc-admin .cc-reorder-hint.is-dirty {
    color: var(--cc-amber-fg) !important;
    background: var(--cc-amber-bg);
    border-color: transparent;
}

/* =========================================================================
   Dark-mode fixes
   ========================================================================= */

/* 1. Native widgets (checkboxes, selects, spinners, scrollbars) must follow
      the theme, otherwise they paint white in dark mode. */
:root[data-cc-theme="light"] { color-scheme: light; }
:root[data-cc-theme="dark"] { color-scheme: dark; }

/* 2. Django's base.css sets `list-style-type: square` on admin <li>, which
      showed up as small squares beside every sidebar link. */
body.cc-admin .cc-nav-group ul,
body.cc-admin .cc-nav-group li,
body.cc-admin .cc-activity,
body.cc-admin .cc-activity li,
body.cc-admin .cc-filter ul,
body.cc-admin .cc-filter li {
    list-style: none !important;
    list-style-type: none !important;
}

/* 3. Form controls: portfolio-admin.css paints these white for its light
      theme, which left white boxes with near-white text in dark mode. */
body.cc-admin input[type="text"],
body.cc-admin input[type="password"],
body.cc-admin input[type="email"],
body.cc-admin input[type="url"],
body.cc-admin input[type="number"],
body.cc-admin input[type="tel"],
body.cc-admin input[type="search"],
body.cc-admin input[type="date"],
body.cc-admin input[type="time"],
body.cc-admin input[type="datetime-local"],
body.cc-admin select,
body.cc-admin textarea,
body.cc-admin .vTextField,
body.cc-admin .vLargeTextField {
    background: var(--cc-panel-2) !important;
    color: var(--cc-text) !important;
    border: 1px solid var(--cc-border) !important;
}

body.cc-admin input::placeholder,
body.cc-admin textarea::placeholder {
    color: var(--cc-muted) !important;
}

body.cc-admin input:focus,
body.cc-admin select:focus,
body.cc-admin textarea:focus {
    outline: none !important;
    border-color: var(--cc-accent) !important;
    background: var(--cc-panel) !important;
}

body.cc-admin select option {
    background: var(--cc-panel) !important;
    color: var(--cc-text) !important;
}

/* Buttons: Django's .button/.default plus the changelist Go/Search/Save. */
body.cc-admin .button,
body.cc-admin input[type="submit"],
body.cc-admin input[type="button"],
body.cc-admin button:not(.cc-icon-btn):not(.cc-collapse):not(.cc-mobile-toggle):not([data-cc-user-toggle]),
body.cc-admin .submit-row input,
body.cc-admin #changelist-search input[type="submit"] {
    background: var(--cc-panel-2) !important;
    color: var(--cc-text) !important;
    border: 1px solid var(--cc-border) !important;
    padding: 7px 14px;
    font-weight: 600;
    cursor: pointer;
}

body.cc-admin .button:hover,
body.cc-admin input[type="submit"]:hover,
body.cc-admin button:not(.cc-icon-btn):hover,
body.cc-admin .submit-row input:hover {
    border-color: var(--cc-accent) !important;
    color: var(--cc-accent-text) !important;
}

/* Primary actions stay solid. */
body.cc-admin .button.default,
body.cc-admin input[type="submit"].default,
body.cc-admin .submit-row input.default,
body.cc-admin .object-tools a,
body.cc-admin a.addlink {
    background: var(--cc-accent) !important;
    color: #ffffff !important;
    border-color: var(--cc-accent) !important;
}

body.cc-admin .button.default:hover,
body.cc-admin input[type="submit"].default:hover,
body.cc-admin .submit-row input.default:hover,
body.cc-admin .object-tools a:hover,
body.cc-admin a.addlink:hover {
    filter: brightness(1.1);
    color: #ffffff !important;
}

/* Panels Django draws around the changelist / forms. */
body.cc-admin .module,
body.cc-admin #changelist,
body.cc-admin #changelist-form,
body.cc-admin #changelist-filter,
body.cc-admin #changelist-search,
body.cc-admin .inline-group,
body.cc-admin fieldset.module,
body.cc-admin .submit-row,
body.cc-admin .paginator,
body.cc-admin .actions {
    background: var(--cc-panel) !important;
    border: 1px solid var(--cc-border) !important;
    color: var(--cc-text) !important;
}

body.cc-admin #changelist table thead th,
body.cc-admin .results table thead th,
body.cc-admin #result_list thead th {
    background: var(--cc-panel-2) !important;
    color: var(--cc-muted) !important;
    border-bottom: 1px solid var(--cc-border) !important;
}

body.cc-admin #result_list tbody tr,
body.cc-admin #changelist-form .results tbody tr {
    background: var(--cc-panel) !important;
}

body.cc-admin #result_list tbody tr:nth-child(even),
body.cc-admin #changelist-form .results tbody tr:nth-child(even) {
    background: var(--cc-panel-2) !important;
}

body.cc-admin #result_list tbody tr:hover,
body.cc-admin #changelist-form .results tbody tr:hover {
    background: var(--cc-accent-soft) !important;
}

body.cc-admin #result_list tbody td,
body.cc-admin #result_list tbody th,
body.cc-admin #changelist-form .results tbody td,
body.cc-admin #changelist-form .results tbody th {
    color: var(--cc-text-2) !important;
    border-top: 1px solid var(--cc-border) !important;
}

body.cc-admin .breadcrumbs,
body.cc-admin div.breadcrumbs {
    background: transparent !important;
    border: 0 !important;
    padding: 16px 22px 0 !important;
    color: var(--cc-muted) !important;
}

body.cc-admin .help,
body.cc-admin .helptext,
body.cc-admin .quiet {
    color: var(--cc-muted) !important;
}

/* Page heading inside changelists / change forms. */
body.cc-admin #content > h1,
body.cc-admin #content-main > h1 {
    color: var(--cc-text) !important;
    font-weight: 700;
}

/* =========================================================================
   Consistent control sizing
   Django + portfolio-admin.css left inputs at 25px, selects at 24px and
   buttons at 33px sitting side by side. One height for all of them.
   ========================================================================= */

:root {
    --cc-control-h: 34px;
}

body.cc-admin input[type="text"],
body.cc-admin input[type="password"],
body.cc-admin input[type="email"],
body.cc-admin input[type="url"],
body.cc-admin input[type="number"],
body.cc-admin input[type="tel"],
body.cc-admin input[type="search"],
body.cc-admin input[type="date"],
body.cc-admin input[type="time"],
body.cc-admin select,
body.cc-admin .vTextField,
body.cc-admin .button,
body.cc-admin input[type="submit"],
body.cc-admin input[type="button"],
body.cc-admin .submit-row input,
body.cc-admin .object-tools a,
body.cc-admin a.addlink,
body.cc-admin .actions button {
    height: var(--cc-control-h) !important;
    min-height: var(--cc-control-h) !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    font-size: 0.85rem !important;
    line-height: calc(var(--cc-control-h) - 2px) !important;
    vertical-align: middle;
}

body.cc-admin textarea,
body.cc-admin .vLargeTextField {
    padding: 9px 12px !important;
    line-height: 1.55 !important;
    height: auto !important;
    min-height: 90px !important;
}

body.cc-admin select {
    padding-right: 26px !important;
}

/* Search toolbar: one flex row, input fills the space. */
body.cc-admin #toolbar,
body.cc-admin #changelist-search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}

body.cc-admin #changelist-search form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
}

body.cc-admin #changelist-search label {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

body.cc-admin #searchbar,
body.cc-admin #changelist-search input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.cc-admin #changelist-search input[type="submit"],
body.cc-admin #changelist-search .button {
    flex: none !important;
}

/* Action bar: keep the select a sensible width next to Go. */
body.cc-admin .actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px !important;
    margin-bottom: 0 !important;
}

body.cc-admin .actions label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.cc-admin .actions select {
    width: auto !important;
    min-width: 190px !important;
    max-width: 260px !important;
}

body.cc-admin .actions .action-counter,
body.cc-admin .actions span {
    margin: 0 !important;
    font-size: 0.83rem !important;
}

/* Inline editable numbers in the results table. */
body.cc-admin #result_list input[type="number"] {
    width: 78px !important;
}

body.cc-admin #result_list td,
body.cc-admin #result_list th {
    vertical-align: middle !important;
}

/* Object tools ("Add ...", "History").
   Django floats these right with a negative top margin, which collides with
   the floated #changelist-filter and produces a phantom third column. Take
   them out of flow and anchor them to the top-right of the content area. */
body.cc-admin #content {
    position: relative !important;
}

body.cc-admin .object-tools {
    position: absolute !important;
    top: 24px !important;
    right: 22px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3;
}

body.cc-admin .object-tools li {
    display: inline-block;
    margin-left: 8px;
}

body.cc-admin .object-tools a,
body.cc-admin a.addlink {
    display: inline-flex !important;
    align-items: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}

/* The topbar search keeps room for its leading icon and the Ctrl-K hint,
   so it opts out of the shared control padding. */
body.cc-admin .cc-search input[type="search"],
body.cc-admin .cc-search input {
    padding: 0 54px 0 34px !important;
    height: var(--cc-control-h) !important;
    line-height: var(--cc-control-h) !important;
}

/* Give the main text column room so titles stop wrapping one word per line. */
body.cc-admin #result_list .field-title,
body.cc-admin #result_list .field-name,
body.cc-admin #result_list .field-label,
body.cc-admin #result_list .field-__str__ {
    min-width: 230px;
}

/* =========================================================================
   Blog editor: two-column writing surface + sticky settings rail
   ========================================================================= */

.cc-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.cc-editor-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cc-editor-rail {
    position: sticky;
    top: calc(var(--cc-topbar-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - var(--cc-topbar-h) - 32px);
    overflow-y: auto;
    padding-right: 2px;
}

.cc-rail-head {
    padding: 12px 14px;
    background: var(--cc-panel-2);
    border: 1px solid var(--cc-border);
}

.cc-rail-eyebrow {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
}

.cc-rail-head strong {
    display: block;
    margin-top: 2px;
    font-size: 0.92rem;
    color: var(--cc-text) !important;
}

/* --- cards --- */

body.cc-admin .cc-editor-grid fieldset.module {
    margin: 0 !important;
    padding: 0 0 14px !important;
    background: var(--cc-panel) !important;
    border: 1px solid var(--cc-border) !important;
}

body.cc-admin .cc-editor-grid fieldset.module > .fieldset-heading {
    margin: 0 0 12px !important;
    padding: 11px 16px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
    background: var(--cc-panel-2) !important;
    border-bottom: 1px solid var(--cc-border) !important;
}

body.cc-admin .cc-editor-grid fieldset.module > .description {
    margin: -4px 16px 10px !important;
    padding: 0 !important;
    font-size: 0.8rem;
    color: var(--cc-muted) !important;
    background: transparent !important;
    border: 0 !important;
}

/* --- rows: label above field --- */

body.cc-admin .cc-editor-grid .form-row {
    padding: 0 16px !important;
    margin: 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
}

body.cc-admin .cc-editor-grid .form-row:last-child {
    margin-bottom: 0 !important;
}

/* Stack label over field, but leave multi-field lines and checkbox rows
   to their own display rules below. */
body.cc-admin .cc-editor-grid .form-row > div,
body.cc-admin .cc-editor-grid .form-row .flex-container:not(.form-multiline):not(.checkbox-row) {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.cc-admin .cc-editor-grid .form-row label {
    display: block !important;
    width: auto !important;
    float: none !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
    text-align: left !important;
}

body.cc-admin .cc-editor-grid .form-row input[type="text"],
body.cc-admin .cc-editor-grid .form-row input[type="url"],
body.cc-admin .cc-editor-grid .form-row input[type="number"],
body.cc-admin .cc-editor-grid .form-row select,
body.cc-admin .cc-editor-grid .form-row textarea {
    width: 100% !important;
    max-width: none !important;
}

body.cc-admin .cc-editor-grid .form-row .help,
body.cc-admin .cc-editor-grid .form-row .helptext {
    margin: 5px 0 0 !important;
    padding: 0 !important;
    font-size: 0.75rem !important;
    color: var(--cc-muted) !important;
    background: transparent !important;
}

/* Multi-field lines (topic + slug) sit side by side. */
body.cc-admin .cc-editor-grid .form-row .flex-container.form-multiline {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

body.cc-admin .cc-editor-grid .form-multiline .fieldBox {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

/* Checkbox rows read as toggles. */
body.cc-admin .cc-editor-grid .form-row .flex-container.checkbox-row,
body.cc-admin .cc-editor-grid .checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

body.cc-admin .cc-editor-grid .checkbox-row label {
    margin: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cc-text) !important;
}

body.cc-admin .cc-editor-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--cc-accent);
}

/* The title is the headline - give it presence. */
body.cc-admin .cc-editor-grid .field-title input[type="text"] {
    height: 46px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}

/* --- file inputs --- */

body.cc-admin .cc-editor-grid input[type="file"] {
    width: 100%;
    padding: 9px !important;
    font-size: 0.8rem;
    color: var(--cc-text-2) !important;
    background: var(--cc-panel-2) !important;
    border: 1px dashed var(--cc-border-strong) !important;
}

body.cc-admin .cc-editor-grid input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    font-weight: 600;
    color: var(--cc-text) !important;
    background: var(--cc-panel-3);
    border: 1px solid var(--cc-border);
    cursor: pointer;
}

body.cc-admin .cc-editor-grid .form-row p.file-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px !important;
    font-size: 0.8rem;
    color: var(--cc-muted) !important;
}

/* --- tags selector (filter_horizontal) --- */

body.cc-admin .cc-editor-rail .selector {
    display: block !important;
    width: 100% !important;
}

body.cc-admin .cc-editor-rail .selector .selector-available,
body.cc-admin .cc-editor-rail .selector .selector-chosen {
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px !important;
    background: var(--cc-panel-2) !important;
    border: 1px solid var(--cc-border) !important;
}

body.cc-admin .cc-editor-rail .selector h2 {
    padding: 8px 10px !important;
    font-size: 0.72rem !important;
    background: var(--cc-panel-3) !important;
    color: var(--cc-muted) !important;
    border: 0 !important;
}

body.cc-admin .cc-editor-rail .selector select {
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    line-height: 1.6 !important;
    padding: 6px !important;
}

body.cc-admin .cc-editor-rail .selector-filter {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 6px 8px !important;
    border-top: 1px solid var(--cc-border) !important;
    border-bottom: 1px solid var(--cc-border) !important;
}

body.cc-admin .cc-editor-rail .selector-filter input {
    height: 30px !important;
    flex: 1;
}

body.cc-admin .cc-editor-rail ul.selector-chooser {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    float: none !important;
}

/* --- TinyMCE --- */

body.cc-admin .cc-content .form-row {
    padding: 0 !important;
}

body.cc-admin .cc-content .form-row label,
body.cc-admin .cc-content .help {
    padding: 0 16px !important;
}

body.cc-admin .tox.tox-tinymce {
    border: 0 !important;
    border-top: 1px solid var(--cc-border) !important;
    width: 100% !important;
}

body.cc-admin .tox .tox-editor-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--cc-border) !important;
}

/* Django renders the raw textarea until TinyMCE boots; keep it themed. */
body.cc-admin textarea.tinymce {
    width: 100% !important;
    min-height: 320px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* --- submit row --- */

body.cc-admin .submit-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px !important;
    padding: 12px 16px !important;
}

body.cc-admin .submit-row a.deletelink {
    margin-left: auto !important;
    display: inline-flex;
    align-items: center;
    height: var(--cc-control-h);
    padding: 0 14px;
    color: #fff !important;
    background: var(--cc-red-fg) !important;
    border: 1px solid var(--cc-red-fg) !important;
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 1250px) {
    .cc-editor-grid {
        grid-template-columns: 1fr;
    }

    .cc-editor-rail {
        position: static;
        max-height: none;
    }
}

/* --- editor refinements --- */

/* Native file button follows the theme everywhere in the admin. */
body.cc-admin input[type="file"] {
    color: var(--cc-text-2) !important;
    background: var(--cc-panel-2) !important;
    border: 1px dashed var(--cc-border-strong) !important;
    padding: 8px !important;
    height: auto !important;
    line-height: normal !important;
}

body.cc-admin input[type="file"]::file-selector-button {
    margin-right: 10px !important;
    padding: 6px 12px !important;
    font: inherit !important;
    font-weight: 600 !important;
    color: var(--cc-text) !important;
    background: var(--cc-panel-3) !important;
    border: 1px solid var(--cc-border) !important;
    cursor: pointer !important;
}

body.cc-admin input[type="file"]::file-selector-button:hover {
    border-color: var(--cc-accent) !important;
    color: var(--cc-accent-text) !important;
}

/* The Content card heading already says "Content" - drop the field label. */
body.cc-admin .cc-content .form-row > div > .flex-container > label,
body.cc-admin .cc-content .form-row > div > label {
    display: none !important;
}

/* Django's add/change/view icons next to a related select belong on the
   same line as the select, not stacked underneath it. */
body.cc-admin .cc-editor-grid .related-widget-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 8px;
    width: 100% !important;
}

body.cc-admin .cc-editor-grid .related-widget-wrapper > select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.cc-admin .cc-editor-grid .related-widget-wrapper-link {
    flex: none;
    margin: 0 !important;
    opacity: 0.75;
}

body.cc-admin .cc-editor-grid .related-widget-wrapper-link:hover {
    opacity: 1;
}

body.cc-admin .cc-editor-grid .related-widget-wrapper img {
    width: 15px;
    height: 15px;
}

/* Excerpt does not need to be a half-page tall. */
body.cc-admin .cc-editor-grid .field-excerpt textarea {
    min-height: 110px !important;
    height: 110px !important;
}

/* Date/time shortcuts in the rail wrap tidily. */
body.cc-admin .cc-editor-rail .datetime {
    display: block;
}

body.cc-admin .cc-editor-rail .datetime input {
    width: 100% !important;
    margin-bottom: 4px;
}

body.cc-admin .cc-editor-rail .datetime .datetimeshortcuts {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    margin-bottom: 8px;
}

/* =========================================================================
   Admin login: two-panel, sharp-cornered, theme-aware.
   The login page has no .cc-admin body class (it is unauthenticated), so
   these rules stand on their own rather than inheriting the shell's resets.
   ========================================================================= */

body.cc-login-page {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--cc-bg) !important;
    color: var(--cc-text) !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.cc-login-page #container,
body.cc-login-page .main,
body.cc-login-page main.content,
body.cc-login-page #content,
body.cc-login-page #content-main {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cc-login-page #header,
body.cc-login-page #footer,
body.cc-login-page .breadcrumbs,
body.cc-login-page #nav-sidebar,
body.cc-login-page .pc-admin-footer {
    display: none !important;
}

body.cc-login-page *,
body.cc-login-page *::before,
body.cc-login-page *::after {
    border-radius: 0 !important;
    box-sizing: border-box;
}

.cc-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

/* ------------------------------------------------------------ brand panel */

.cc-login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 44px;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--cc-accent) 22%, transparent), transparent 46%),
        radial-gradient(circle at 82% 88%, color-mix(in srgb, var(--cc-violet-fg) 16%, transparent), transparent 46%),
        var(--cc-panel);
    border-right: 1px solid var(--cc-border);
}

.cc-login-rings {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.cc-login-rings i {
    position: absolute;
    border: 1px solid var(--cc-text);
    border-radius: 50% !important;
    opacity: 0.05;
}

.cc-login-rings i:nth-child(1) { width: 460px; height: 460px; }
.cc-login-rings i:nth-child(2) { width: 760px; height: 760px; }

.cc-login-brand-inner {
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-bottom: auto;
    max-width: 30rem;
}

.cc-login-mark {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 30px;
}

.cc-login-mark-rs {
    display: block;
    font-family: "Audiowide", "Saira", system-ui, sans-serif;
    font-size: 2.7rem;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--cc-text) !important;
}

.cc-login-mark-rule {
    display: block;
    width: 58px;
    height: 3px;
    margin-top: 10px;
    background: var(--cc-accent);
}

.cc-login-brand h1 {
    margin: 0;
    font-size: clamp(1.7rem, 2.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cc-text) !important;
}

.cc-login-brand > .cc-login-brand-inner > p {
    margin: 14px 0 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--cc-muted) !important;
}

.cc-login-points {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.cc-login-points li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.9rem;
    color: var(--cc-text-2) !important;
}

.cc-login-points .icon {
    width: 17px;
    height: 17px;
    color: var(--cc-accent-text);
    flex: none;
}

.cc-login-back {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 9px 15px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--cc-text-2) !important;
    background: color-mix(in srgb, var(--cc-panel-2) 70%, transparent);
    border: 1px solid var(--cc-border);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.cc-login-back:hover {
    border-color: var(--cc-accent);
    color: var(--cc-accent-text) !important;
}

/* ------------------------------------------------------------- form panel */

.cc-login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    padding: 44px;
    background: var(--cc-bg);
}

.cc-login-form-wrap {
    width: 100%;
    max-width: 27rem;
    margin: auto;
}

.cc-login-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cc-accent-text) !important;
}

.cc-login-panel h2 {
    margin: 10px 0 0;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cc-text) !important;
}

.cc-login-sub {
    margin: 6px 0 26px;
    font-size: 0.92rem;
    color: var(--cc-muted) !important;
}

.cc-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 11px 13px;
    font-size: 0.87rem;
    color: var(--cc-red-fg) !important;
    background: var(--cc-red-bg);
    border-left: 3px solid var(--cc-red-fg);
}

.cc-login-alert .icon {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
}

.cc-login-label {
    display: block;
    margin: 0 0 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
}

.cc-login-field {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-login-field:focus-within {
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent) 18%, transparent);
}

.cc-login-field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex: none;
    color: var(--cc-muted);
}

.cc-login-field input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 12px 0 0;
    font-size: 0.95rem;
    color: var(--cc-text) !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
}

.cc-login-field input::placeholder {
    color: var(--cc-muted);
}

.cc-login-reveal {
    flex: none;
    width: 44px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--cc-border);
    color: var(--cc-muted) !important;
}

.cc-login-reveal:hover,
.cc-login-reveal[aria-pressed="true"] {
    color: var(--cc-accent-text) !important;
}

.cc-login-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 22px;
}

.cc-login-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--cc-text-2) !important;
    cursor: pointer;
}

.cc-login-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--cc-accent);
    cursor: pointer;
}

.cc-login-meta a {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cc-accent-text) !important;
    text-decoration: none;
}

.cc-login-meta a:hover {
    text-decoration: underline;
}

.cc-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 50px;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    color: #ffffff !important;
    background: var(--cc-accent);
    border: 1px solid var(--cc-accent);
    transition: filter 0.2s ease, transform 0.15s ease;
}

.cc-login-submit:hover {
    filter: brightness(1.08);
}

.cc-login-submit:active {
    transform: translateY(1px);
}

.cc-login-submit .icon {
    transition: transform 0.2s ease;
}

.cc-login-submit:hover .icon {
    transform: translateX(3px);
}

.cc-login-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--cc-border);
    font-size: 0.83rem;
    color: var(--cc-muted) !important;
}

.cc-login-note .icon {
    width: 15px;
    height: 15px;
    flex: none;
}

.cc-login-copyright {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--cc-muted) !important;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .cc-login {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .cc-login-brand {
        border-right: 0;
        border-bottom: 1px solid var(--cc-border);
        padding: 32px 24px;
        gap: 22px;
    }

    .cc-login-brand h1 {
        font-size: 1.5rem;
    }

    .cc-login-points {
        display: none;
    }

    .cc-login-panel {
        padding: 32px 24px 26px;
    }
}

/* Custom sharp checkbox - the native control renders as a light block that
   ignores the dark palette. */
.cc-login-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex: none;
    display: inline-grid;
    place-content: center;
    background: var(--cc-panel);
    border: 1px solid var(--cc-border-strong);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.cc-login-check input[type="checkbox"]::before {
    content: "";
    width: 9px;
    height: 9px;
    transform: scale(0);
    background: var(--cc-accent);
    transition: transform 0.14s ease;
}

.cc-login-check input[type="checkbox"]:checked {
    border-color: var(--cc-accent);
}

.cc-login-check input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.cc-login-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

/* =========================================================================
   TinyMCE isolation
   The editor builds its toolbar from real <button>, <input> and <select>
   elements. The global admin control rules above (fixed 34px height, forced
   padding, borders and backgrounds) were being applied to them, which
   collapsed the toolbar icons into empty boxes in both themes. Hand those
   elements back to the TinyMCE skin.
   ========================================================================= */

body.cc-admin .tox button,
body.cc-admin .tox input,
body.cc-admin .tox select,
body.cc-admin .tox textarea,
body.cc-admin .tox .tox-tbtn,
body.cc-admin .tox .tox-mbtn,
body.cc-admin .tox .tox-listbox,
body.cc-admin .tox .tox-textfield,
body.cc-admin .tox .tox-button {
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: revert !important;
    margin: revert !important;
    background: revert !important;
    color: revert !important;
    border: revert !important;
    box-shadow: revert !important;
    width: revert !important;
    vertical-align: revert !important;
}

/* TinyMCE sizes its own controls; restore the skin's own metrics. */
body.cc-admin .tox .tox-tbtn {
    height: 34px !important;
    width: 34px !important;
}

body.cc-admin .tox .tox-tbtn--select {
    width: auto !important;
    padding: 0 4px !important;
}

body.cc-admin .tox .tox-split-button {
    height: 34px !important;
}

body.cc-admin .tox .tox-mbtn {
    height: 30px !important;
    width: auto !important;
    padding: 0 5px !important;
}

body.cc-admin .tox .tox-tbtn svg,
body.cc-admin .tox .tox-mbtn svg {
    display: block !important;
    fill: currentColor !important;
}

/* The editor chrome should not inherit the admin's sharp-corner override in a
   way that breaks its internal layout, but square corners are still wanted. */
body.cc-admin .tox,
body.cc-admin .tox * {
    border-radius: 0 !important;
}

/* Dialogs (link, image, table) sit outside .cc-editor-grid at body level. */
body.cc-admin .tox-dialog-wrap button,
body.cc-admin .tox-dialog-wrap input,
body.cc-admin .tox-dialog-wrap select,
body.cc-admin .tox-dialog-wrap textarea {
    height: auto !important;
    min-height: 0 !important;
    padding: revert !important;
    background: revert !important;
    color: revert !important;
    border: revert !important;
    line-height: normal !important;
}

/* =========================================================================
   Select2 (autocomplete_fields) - width and theming
   Select2 copies the width of the original <select>, which is tiny inside the
   340px settings rail, and its default skin is light-only.
   ========================================================================= */

body.cc-admin .select2-container {
    width: 100% !important;
    min-width: 0 !important;
}

body.cc-admin .cc-editor-rail .related-widget-wrapper,
body.cc-admin .cc-editor-grid .related-widget-wrapper {
    align-items: flex-start !important;
}

body.cc-admin .select2-container--admin-autocomplete .select2-selection {
    min-height: 38px !important;
    padding: 3px 4px !important;
    background: var(--cc-panel-2) !important;
    border: 1px solid var(--cc-border) !important;
    color: var(--cc-text) !important;
}

body.cc-admin .select2-container--admin-autocomplete.select2-container--focus .select2-selection,
body.cc-admin .select2-container--admin-autocomplete.select2-container--open .select2-selection {
    border-color: var(--cc-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent) 16%, transparent) !important;
}

body.cc-admin .select2-container--admin-autocomplete .select2-selection__rendered,
body.cc-admin .select2-container--admin-autocomplete .select2-selection__placeholder {
    color: var(--cc-text) !important;
    line-height: 1.5 !important;
    padding: 0 !important;
}

body.cc-admin .select2-container--admin-autocomplete .select2-selection__placeholder {
    color: var(--cc-muted) !important;
}

/* Chosen tag chips */
body.cc-admin .select2-container--admin-autocomplete .select2-selection__choice {
    margin: 3px 4px 3px 0 !important;
    padding: 3px 8px !important;
    font-size: 0.8rem !important;
    color: var(--cc-accent-text) !important;
    background: var(--cc-accent-soft) !important;
    border: 1px solid color-mix(in srgb, var(--cc-accent) 40%, transparent) !important;
}

body.cc-admin .select2-container--admin-autocomplete .select2-selection__choice__remove {
    margin-right: 6px !important;
    color: var(--cc-accent-text) !important;
    border: 0 !important;
    background: transparent !important;
}

body.cc-admin .select2-container--admin-autocomplete .select2-search--inline .select2-search__field {
    height: 26px !important;
    margin: 3px 0 !important;
    color: var(--cc-text) !important;
    background: transparent !important;
    border: 0 !important;
}

/* Dropdown is appended to <body>, outside .cc-admin scoping in some themes,
   so target it globally under the active theme instead. */
.select2-container--admin-autocomplete .select2-dropdown {
    background: var(--cc-panel) !important;
    border: 1px solid var(--cc-border-strong) !important;
    border-radius: 0 !important;
}

.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
    padding: 8px 10px !important;
    color: var(--cc-text) !important;
    background: var(--cc-panel-2) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: 0 !important;
}

.select2-container--admin-autocomplete .select2-results__option {
    padding: 8px 11px !important;
    font-size: 0.87rem !important;
    color: var(--cc-text-2) !important;
    background: transparent !important;
}

.select2-container--admin-autocomplete .select2-results__option--highlighted,
.select2-container--admin-autocomplete .select2-results__option[aria-selected="true"] {
    color: var(--cc-accent-text) !important;
    background: var(--cc-accent-soft) !important;
}

.select2-container--admin-autocomplete .select2-results__message {
    color: var(--cc-muted) !important;
}

/* =========================================================================
   Change forms, everywhere
   The blog editor got a card layout with labels above fields; every other
   change form was still Django's 1990s label-left table look. Apply the same
   treatment globally. The .cc-editor-grid rules are more specific, so the
   two-column blog editor keeps its own layout.
   ========================================================================= */

body.cc-admin #content-main > form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- fieldsets become cards --- */

body.cc-admin fieldset.module {
    margin: 0 !important;
    padding: 0 0 14px !important;
    background: var(--cc-panel) !important;
    border: 1px solid var(--cc-border) !important;
}

body.cc-admin fieldset.module > .fieldset-heading,
body.cc-admin .inline-group > h2,
body.cc-admin .module > h2 {
    margin: 0 0 12px !important;
    padding: 11px 16px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
    background: var(--cc-panel-2) !important;
    border-bottom: 1px solid var(--cc-border) !important;
}

body.cc-admin fieldset.module > .description {
    margin: -4px 16px 10px !important;
    padding: 0 !important;
    font-size: 0.8rem;
    color: var(--cc-muted) !important;
    background: transparent !important;
    border: 0 !important;
}

/* --- rows: label above field --- */

body.cc-admin #content-main .form-row {
    padding: 0 16px !important;
    margin: 0 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
}

body.cc-admin #content-main .form-row:last-child {
    margin-bottom: 0 !important;
}

body.cc-admin #content-main .form-row > div,
body.cc-admin #content-main .form-row .flex-container:not(.form-multiline):not(.checkbox-row) {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.cc-admin #content-main .form-row label {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left !important;
    color: var(--cc-muted) !important;
}

body.cc-admin #content-main .form-row input[type="text"],
body.cc-admin #content-main .form-row input[type="url"],
body.cc-admin #content-main .form-row input[type="email"],
body.cc-admin #content-main .form-row input[type="number"],
body.cc-admin #content-main .form-row input[type="password"],
body.cc-admin #content-main .form-row select,
body.cc-admin #content-main .form-row textarea {
    width: 100% !important;
    max-width: 46rem !important;
}

body.cc-admin #content-main .form-row .help,
body.cc-admin #content-main .form-row .helptext {
    margin: 5px 0 0 !important;
    padding: 0 !important;
    font-size: 0.75rem !important;
    color: var(--cc-muted) !important;
    background: transparent !important;
}

/* Side-by-side field lines. */
body.cc-admin #content-main .form-row .flex-container.form-multiline {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    max-width: 46rem;
}

body.cc-admin #content-main .form-row .form-multiline .fieldBox {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

/* Checkboxes read as a single line. */
body.cc-admin #content-main .form-row .flex-container.checkbox-row,
body.cc-admin #content-main .form-row .checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

body.cc-admin #content-main .form-row .checkbox-row label {
    margin: 0 !important;
    font-size: 0.87rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cc-text) !important;
}

body.cc-admin #content-main input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--cc-accent);
}

/* Related-object icons belong on the field's line. */
body.cc-admin #content-main .related-widget-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 46rem;
}

body.cc-admin #content-main .related-widget-wrapper > select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.cc-admin #content-main .related-widget-wrapper-link {
    flex: none;
    margin: 0 !important;
    opacity: 0.75;
}

body.cc-admin #content-main .related-widget-wrapper-link:hover {
    opacity: 1;
}

body.cc-admin #content-main .related-widget-wrapper img {
    width: 15px;
    height: 15px;
}

/* Date/time pairs. */
body.cc-admin #content-main .datetime {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.cc-admin #content-main .datetime input {
    width: auto !important;
    min-width: 150px;
}

body.cc-admin #content-main .datetimeshortcuts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* --- inlines --- */

body.cc-admin .inline-group {
    margin: 0 !important;
    padding: 0 0 12px !important;
    background: var(--cc-panel) !important;
    border: 1px solid var(--cc-border) !important;
}

body.cc-admin .inline-related h3 {
    padding: 9px 16px !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
    background: var(--cc-panel-2) !important;
    border-top: 1px solid var(--cc-border) !important;
    border-bottom: 1px solid var(--cc-border) !important;
}

body.cc-admin .inline-group .add-row a {
    display: inline-block;
    margin: 10px 16px 0;
    font-weight: 600;
    color: var(--cc-accent-text) !important;
}

/* Tabular inlines keep their table layout - just theme it. */
body.cc-admin .inline-group table {
    width: 100% !important;
}

body.cc-admin .inline-group table th {
    padding: 9px 12px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cc-muted) !important;
    background: var(--cc-panel-2) !important;
}

body.cc-admin .inline-group table td {
    padding: 8px 12px !important;
    vertical-align: middle !important;
}

body.cc-admin .inline-group table td .form-row,
body.cc-admin .inline-group table td label {
    padding: 0 !important;
    margin: 0 !important;
}

/* --- page heading + object name --- */

body.cc-admin #content-main > h1,
body.cc-admin #content > h1 {
    margin: 0 0 4px !important;
}

body.cc-admin .form-row .errorlist,
body.cc-admin .errornote {
    margin: 0 0 10px !important;
    padding: 9px 12px !important;
    list-style: none;
    font-size: 0.84rem;
    color: var(--cc-red-fg) !important;
    background: var(--cc-red-bg) !important;
    border: 0 !important;
    border-left: 3px solid var(--cc-red-fg) !important;
}

/* Tabular inlines: Django absolutely-positions td.original p (the row's
   object repr) and relies on extra row padding to clear it. The compacted
   rows made it overlap the first field, and it only repeats what the row's
   own fields already show, so drop it. */
body.cc-admin .inline-group .tabular td.original p {
    display: none !important;
}

body.cc-admin .inline-group .tabular tr td.original {
    padding: 0 !important;
    width: 0 !important;
}

/* Keep the delete checkbox column tidy. */
body.cc-admin .inline-group .tabular td.delete,
body.cc-admin .inline-group .tabular th.delete {
    text-align: center !important;
    width: 70px !important;
}

body.cc-admin .inline-group .tabular td input[type="text"],
body.cc-admin .inline-group .tabular td input[type="number"],
body.cc-admin .inline-group .tabular td select {
    max-width: none !important;
}