/*
    Employee area styles. Everything is scoped under .cc-admin (AdminLayout's root) because this
    stylesheet is loaded on every page, public ones included, and must not touch them.

    Adapted from the admin section of Pathways' app.css. One deliberate difference: Pathways locks
    html/body to the viewport globally; here only the admin layout is pinned, so the public site's
    normal page scrolling is left alone.
*/

/* ── Frame: pinned to the viewport, each page scrolls inside its own region ─────────────────── */
.cc-admin .mud-layout {
    height: 100dvh;
    overflow: hidden;
}

.cc-admin .mud-main-content {
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* The keyed wrapper around each page (AdminLayout): passes the full height through. */
.cc-admin .admin-body {
    height: 100%;
}

.cc-admin .admin-content {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 16px;
}

.cc-admin .admin-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ── Brand mark, matching the public site's header ─────────────────────────────────────────── */
.cc-admin .admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.cc-admin .admin-brand-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.cc-admin .admin-brand-word {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.cc-admin .admin-brand-area {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    padding-left: 10px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* ── Account menu ───────────────────────────────────────────────────────────────────────────── */
/* The account button in the app bar: the person's picture, or their initials (AccountAvatar). */
.cc-admin .admin-avatar-button {
    display: inline-flex;
    padding: 2px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.cc-admin .admin-avatar-button:hover .admin-avatar,
.cc-admin .admin-avatar-button:focus-visible .admin-avatar {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.cc-admin .admin-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    user-select: none;
}

.cc-admin .admin-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-user-card {
    padding: 12px 16px;
    min-width: 220px;
}

.admin-user-name {
    font-weight: 600;
}

.admin-user-email,
.admin-user-roles {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.admin-signout-form {
    margin: 0;
}

.admin-signout-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.admin-signout-button:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* ── Nav ────────────────────────────────────────────────────────────────────────────────────── */
.cc-admin .admin-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
    gap: 4px;
}

.cc-admin .admin-nav-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
}

.cc-admin .admin-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.cc-admin .admin-nav-link.active {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

/* Collapsing moves two things: the drawer's own width and the offset the content leaves for it.
   MudBlazor writes both as inline CSS variables, so a runtime Width change does not take;
   overriding the variables does, with !important to beat the inline values. */
.cc-admin.admin-nav-collapsed .mud-layout {
    --mud-drawer-width-left: 56px !important;
}

.cc-admin.admin-nav-collapsed .mud-drawer-pos-left {
    --mud-drawer-width: 56px !important;
    width: 56px !important;
}

.cc-admin .admin-nav--collapsed {
    padding: 12px 4px;
}

.cc-admin .admin-nav--collapsed .admin-nav-link {
    justify-content: center;
    padding: 8px 0;
}

/* MudTooltip wraps each link; without this the links stop filling the drawer width. */
.cc-admin .admin-nav--collapsed .mud-tooltip-root {
    display: block;
    width: 100%;
}

/* ── Single-body pages (AdminPageShell) ─────────────────────────────────────────────────────── */
.cc-admin .admin-page-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ── Operations manual ────────────────────────────────────────────────────────────────────────
   The document keeps its own white, print-first page inside the dark frame. */
.cc-admin .admin-manual-frame {
    display: block;
    width: 100%;
    height: calc(100dvh - 150px);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: #ffffff;
}

/* ── Search and detail split ────────────────────────────────────────────────────────────────── */
.cc-admin .resizable-split {
    display: flex;
    height: 100%;
    padding-top: 16px;
    box-sizing: border-box;
    position: relative;
}

.cc-admin .resizable-split-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cc-admin .resizable-split-right {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
}

.cc-admin .resizable-split-divider {
    flex: 0 0 6px;
    margin: 0 8px;
    cursor: col-resize;
    border-radius: 3px;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.cc-admin .resizable-split-divider:hover,
.cc-admin .resizable-split-divider.dragging {
    background-color: var(--mud-palette-primary);
}

/* The search side collapsed to a rail (SplitPaneMode.Rail): a search button, the list's name on its
   side, and a button to bring the list back beside the record. */
.cc-admin .split-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 4px 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cc-admin .split-rail:hover {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

.cc-admin .split-rail:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* The window is too narrow for the list beside the record, so only the slide-out is offered. */
.cc-admin .resizable-split[data-no-room="true"] .split-rail-expand {
    display: none;
}

.cc-admin .split-rail-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* The slide-out the rail opens over the detail. Picking a result, the backdrop or Esc closes it. */
.cc-admin .split-overlay-backdrop {
    position: absolute;
    inset: 16px 0 0 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 5;
}

.cc-admin .split-overlay {
    position: absolute;
    top: 16px;
    bottom: 0;
    left: calc(var(--admin-rail-width, 48px) + 4px);
    width: min(440px, calc(100% - 64px));
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    box-shadow: var(--mud-elevation-8);
    z-index: 6;
    overflow: hidden;
}

/* Search results when the search side is narrow (CompactList). */
.cc-admin .admin-compact-list {
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.cc-admin .admin-compact-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-admin .admin-compact-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
}

.cc-admin .admin-compact-item:last-child {
    border-bottom: none;
}

.cc-admin .admin-compact-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.cc-admin .admin-compact-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.cc-admin .admin-compact-primary {
    font-weight: 500;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.cc-admin .admin-compact-secondary {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.cc-admin .admin-compact-empty {
    padding: 12px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.cc-admin .admin-search-divider {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 0 0 16px;
}

.cc-admin .admin-search-filter-narrow {
    flex: 0 0 180px;
}

.cc-admin .admin-search-summary {
    font-size: 0.8rem;
}

.cc-admin .admin-search-sorted-by {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.cc-admin .admin-top-records {
    background: var(--mud-palette-surface);
    color: inherit;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 2px 4px;
    font: inherit;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────────────────────── */
.cc-admin .admin-tab-empty {
    padding: 24px;
    color: var(--mud-palette-text-secondary);
}

/* Open records stay on one row and shrink like browser tabs when the pane narrows: titles end in "…",
   the close button always shows. Scrolls sideways only if even the minimum widths do not fit. */
.cc-admin .admin-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cc-admin .admin-tabs > li {
    flex: 0 1 auto;
    min-width: 72px;
}

.cc-admin .admin-tabs .mud-menu,
.cc-admin .admin-tabs .mud-menu-activator {
    display: flex;
    max-width: 100%;
}

.cc-admin .admin-tab-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-admin .admin-tab {
    max-width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
}

.cc-admin .admin-tab:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.cc-admin .admin-tab.active {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.cc-admin .admin-tab-close {
    display: inline-flex;
    flex: none;
    opacity: 0.6;
}

.cc-admin .admin-tab-close:hover {
    opacity: 1;
}

.cc-admin .admin-tab-content {
    border: 1px solid var(--mud-palette-lines-default);
    border-top: none;
    padding: 16px;
}

/* ── A record's sub-tabs (MudTabs Class="admin-subtabs") ────────────────────────────────────────
   The record's header stays put and only the open sub-tab's content scrolls. The chain from the
   detail pane down fills the pane's height; the sub-tabs start from a basis of 0 and grow into what is
   left, with their panels scrolling inside. When the pane is too short to leave them
   --admin-subtabs-min, they keep that height, the record outgrows the pane, and the pane scrolls as a
   whole instead. Scoped with :has() so records without sub-tabs are untouched. */
.cc-admin {
    --admin-subtabs-min: 300px;
}

.cc-admin .resizable-split-right:has(.admin-subtabs) {
    display: flex;
    flex-direction: column;
}

.cc-admin .admin-detail-panel:has(.admin-subtabs) {
    flex: 1 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.cc-admin .admin-detail-panel:has(.admin-subtabs) > .admin-tabs {
    flex: none;
}

.cc-admin .admin-tab-content:has(.admin-subtabs),
.cc-admin .admin-record:has(.admin-subtabs) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.cc-admin .admin-record:has(.admin-subtabs) > * {
    flex: none;
}

/* A column stretches its children to full width; the field table must stay as wide as its content,
   as it is outside the column, or its values drift to the far side. */
.cc-admin .admin-record:has(.admin-subtabs) > table {
    align-self: flex-start;
}

.cc-admin .admin-record > .mud-tabs.admin-subtabs {
    flex: 1 1 0;
    min-height: var(--admin-subtabs-min);
}

.cc-admin .admin-subtabs > .mud-tabs-tabbar {
    flex: none;
}

.cc-admin .admin-subtabs-panels {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* Sub-tabs as wide as their labels (MinimumTabWidth="0px"), wrapping onto a second row when the pane is
   too narrow rather than scrolling, which hid the open tab behind arrows. MudBlazor's sliding underline
   assumes one row, so the open tab is underlined directly instead. */
.cc-admin .admin-subtabs .mud-tab {
    width: auto;
    white-space: nowrap;
    padding: 6px 12px;
}

.cc-admin .admin-subtabs .mud-tabs-tabbar-wrapper {
    flex-wrap: wrap;
    width: 100%;
    transform: none !important;
}

.cc-admin .admin-subtabs .mud-tabs-scroll-button,
.cc-admin .admin-subtabs .mud-tab-slider {
    display: none !important;
}

.cc-admin .admin-subtabs .mud-tab.mud-tab-active {
    box-shadow: inset 0 -2px 0 var(--mud-palette-primary);
}

/* ── Roles grid (Roles page): features down the side, roles across ─────────────────────────────── */
.cc-admin .admin-roles-grid-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.cc-admin .admin-roles-grid {
    width: auto;
    min-width: 640px;
}

.cc-admin .admin-roles-grid th.admin-roles-role {
    text-align: center;
    white-space: nowrap;
    min-width: 128px;
    vertical-align: bottom;
}

.cc-admin .admin-roles-count {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.cc-admin .admin-roles-feature {
    min-width: 260px;
    max-width: 420px;
}

.cc-admin .admin-roles-description {
    font-size: 0.8rem;
}

.cc-admin .admin-roles-cell {
    text-align: center;
}

.cc-admin .admin-roles-cell .mud-checkbox {
    display: inline-flex;
}

/* ── Results table ──────────────────────────────────────────────────────────────────────────── */
.cc-admin .simple-table-container {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow-y: auto;
}

.cc-admin .simple-table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.cc-admin .simple-table-container th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    padding: 8px;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    user-select: none;
}

.cc-admin .simple-table-container th.sortable {
    cursor: pointer;
}

.cc-admin .simple-table-container td {
    padding: 6px 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.cc-admin .simple-table-container .simple-table-row:hover {
    background-color: var(--mud-palette-action-default-hover);
    cursor: pointer;
}

.cc-admin .simple-table-container .simple-table-row.selected {
    background-color: var(--mud-palette-action-default-hover);
}

.cc-admin .align-text-left { text-align: left; }
.cc-admin .align-text-center { text-align: center; }
.cc-admin .align-text-right { text-align: right; }

/* ── Record detail ──────────────────────────────────────────────────────────────────────────
   Not scoped under .cc-admin: these also render inside dialogs, which MudBlazor mounts outside the
   admin frame. The admin- prefix keeps them from matching anything on the public site. */
.admin-fields {
    border-collapse: collapse;
    font-size: 0.875rem;
}

.admin-fields th {
    text-align: left;
    vertical-align: top;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    padding: 6px 24px 6px 0;
    white-space: nowrap;
}

.admin-fields td {
    padding: 6px 0;
}

/* Scoped to record tables: a bare ".cc-admin a" would also recolour MudButtons rendered as links. */
.admin-fields a {
    color: var(--mud-palette-primary);
}

.cc-admin .admin-brief {
    white-space: pre-wrap;
    line-height: 1.6;
    padding: 12px 16px;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    border-radius: 0 4px 4px 0;
    max-width: 80ch;
}

.admin-muted {
    color: var(--mud-palette-text-secondary);
}

.admin-mono {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    letter-spacing: 0.04em;
}

.admin-overdue {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* ── Simple lists inside a record (contacts, deals, projects) ───────────────────────────────── */
.admin-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.admin-list th {
    text-align: left;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}

.admin-list td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
}

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

.admin-list a {
    color: var(--mud-palette-primary);
}

.admin-list--clickable tbody tr {
    cursor: pointer;
}

.admin-list--clickable tbody tr:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* ── Timeline ───────────────────────────────────────────────────────────────────────────────── */
.admin-timeline-add {
    margin-bottom: 12px;
}

.admin-timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 90ch;
}

.admin-timeline-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.admin-timeline-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
}

/* What people logged reads louder than what the app recorded on its own. */
.admin-timeline-note .admin-timeline-icon,
.admin-timeline-call .admin-timeline-icon,
.admin-timeline-meeting .admin-timeline-icon,
.admin-timeline-email .admin-timeline-icon {
    color: var(--mud-palette-primary);
}

.admin-timeline-content {
    min-width: 0;
    flex: 1 1 auto;
    /* Long email addresses and links break rather than push a narrow timeline sideways. */
    overflow-wrap: anywhere;
}

.admin-timeline-subject {
    font-weight: 500;
}

.admin-timeline-stagechange .admin-timeline-subject,
.admin-timeline-system .admin-timeline-subject {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.admin-timeline-meta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.admin-timeline-body {
    margin-top: 4px;
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.5;
}

.admin-timeline-external {
    margin-top: 2px;
}

/* ── Pipeline board ─────────────────────────────────────────────────────────────────────────── */
.cc-admin .pipeline-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.cc-admin .pipeline-summary-value {
    font-family: "Chakra Petch", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.cc-admin .pipeline-summary-alert,
.cc-admin .pipeline-summary-warn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.cc-admin .pipeline-summary-alert {
    color: var(--mud-palette-error);
}

.cc-admin .pipeline-summary-warn {
    color: var(--mud-palette-warning);
}

/* Columns scroll sideways as one row rather than wrapping, so stages stay in pipeline order. */
.cc-admin .pipeline-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    align-items: stretch;
    min-height: calc(100dvh - 220px);
}

.cc-admin .pipeline-column {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    min-height: 0;
}

/* Won and Lost are destinations more than workspaces, so they take less room. */
.cc-admin .pipeline-column--closed {
    flex-basis: 220px;
    background: transparent;
    border-style: dashed;
}

.cc-admin .pipeline-column-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cc-admin .pipeline-column-title {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cc-admin .pipeline-column--won .pipeline-column-title {
    color: var(--mud-palette-primary);
}

.cc-admin .pipeline-column-count {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cc-admin .pipeline-column-total {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
}

.cc-admin .pipeline-zone {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    min-height: 120px;
    overflow-y: auto;
}

.cc-admin .pipeline-empty {
    padding: 10px 12px 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cc-admin .pipeline-card {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-info);
    cursor: grab;
    font-size: 0.8125rem;
}

.cc-admin .pipeline-card:hover {
    border-color: var(--mud-palette-primary);
}

.cc-admin .pipeline-column--won .pipeline-card {
    border-left-color: var(--mud-palette-primary);
}

.cc-admin .pipeline-column--lost .pipeline-card {
    border-left-color: var(--mud-palette-lines-default);
    opacity: 0.75;
}

.cc-admin .pipeline-card--overdue {
    border-left-color: var(--mud-palette-error);
}

.cc-admin .pipeline-card-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.cc-admin .pipeline-card-client {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.cc-admin .pipeline-card-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.cc-admin .pipeline-card-value {
    font-weight: 600;
}

.cc-admin .pipeline-card-next {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin-top: 6px;
    line-height: 1.3;
}

.cc-admin .pipeline-card-due {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cc-admin .pipeline-card-due.overdue {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.cc-admin .pipeline-card-owner {
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

/* MudBlazor's drag feedback: the zone a card can land in, and the card being dragged. */
.cc-admin .mud-drop-zone-drag-block {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -4px;
}
/* ── Timer in the top bar ───────────────────────────────────────────────────────────────────── */
.cc-admin .admin-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}

.cc-admin .admin-timer-running {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 10px;
    border: 1px solid var(--mud-palette-success);
    border-radius: 999px;
}

/* Pulses so a running timer is noticed out of the corner of an eye. */
.cc-admin .admin-timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    animation: admin-timer-pulse 1.6s ease-in-out infinite;
}

@keyframes admin-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-admin .admin-timer-dot { animation: none; }
}

.cc-admin .admin-timer-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.cc-admin .admin-timer-project {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.cc-admin .admin-timer-elapsed {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── A project's time ───────────────────────────────────────────────────────────────────────── */
.cc-admin .admin-time-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    font-size: 0.8rem;
}

.cc-admin .admin-time-figure {
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cc-admin .admin-time-budget {
    min-width: 240px;
    flex: 1 1 240px;
    max-width: 420px;
}

.admin-time-review td {
    background: rgba(255, 168, 0, 0.08);
}

/* ── Weekly timesheet ───────────────────────────────────────────────────────────────────────────
   Three panels on a raised surface, so the toolbar, the hints and the grid read as separate
   things against the page. The grid has a header band, column lines, an outlined box in every cell
   that can take hours, and today's column marked top to bottom. */
.cc-admin .admin-ts-panel {
    background: var(--mud-palette-surface);
    border: 1px solid #2e2e3c;
    border-radius: 8px;
    padding: 12px 16px;
}

.cc-admin .admin-ts-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.cc-admin .admin-ts-week {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cc-admin .admin-ts-week-label {
    font-size: 1rem;
    font-weight: 600;
    min-width: 190px;
    text-align: center;
}

.cc-admin .admin-ts-stats {
    display: flex;
    gap: 28px;
    margin-left: auto;
}

.cc-admin .admin-ts-stat {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.cc-admin .admin-ts-stat-label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cc-admin .admin-ts-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cc-admin .admin-ts-panel-title .admin-muted {
    font-weight: 400;
    font-size: 0.8rem;
}

.cc-admin .admin-ts-hints td {
    padding: 4px 8px;
}

.cc-admin .admin-ts-hints tr:last-child td {
    border-bottom: none;
}

.cc-admin .admin-ts-hint-day {
    white-space: nowrap;
    font-weight: 500;
    width: 110px;
}

.cc-admin .admin-timesheet-wrap {
    overflow-x: auto;
    padding: 0;
}

.cc-admin .admin-timesheet {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 820px;
}

.cc-admin .admin-timesheet th,
.cc-admin .admin-timesheet td {
    border-bottom: 1px solid #2e2e3c;
    border-left: 1px solid #2e2e3c;
    padding: 8px 6px;
    text-align: center;
    width: 84px;
}

.cc-admin .admin-timesheet th:first-child,
.cc-admin .admin-timesheet td:first-child {
    border-left: none;
}

.cc-admin .admin-timesheet thead th {
    background: rgba(255, 255, 255, 0.04);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.25;
}

.cc-admin .admin-timesheet thead th .admin-muted {
    font-weight: 400;
    font-size: 0.75rem;
}

.cc-admin .admin-timesheet .admin-ts-project {
    text-align: left;
    width: auto;
    min-width: 240px;
    padding-left: 16px;
}

.cc-admin .admin-timesheet tbody tr:not(.admin-ts-add-row):hover td {
    background: rgba(255, 255, 255, 0.025);
}

.cc-admin .admin-timesheet .admin-ts-total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.04);
}

.cc-admin .admin-timesheet tfoot td {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: none;
}

/* Today: tinted down the whole column, with a bar along the top of the header. */
.cc-admin .admin-timesheet .admin-ts-today {
    background: rgba(197, 248, 46, 0.07);
}

.cc-admin .admin-timesheet thead th.admin-ts-today {
    box-shadow: inset 0 3px 0 var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.cc-admin .admin-timesheet .admin-ts-future {
    color: var(--mud-palette-text-disabled);
}

.cc-admin .admin-ts-add-row td {
    border-bottom: 1px solid #2e2e3c;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cc-admin .admin-ts-add-row td + td {
    border-left: none;
}

.cc-admin .admin-ts-input,
.cc-admin .admin-ts-cell {
    width: 64px;
    padding: 5px 6px;
    border: 1px solid #44445a;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font: inherit;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cc-admin .admin-ts-input:hover {
    border-color: #6a6a82;
}

.cc-admin .admin-ts-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    background: rgba(197, 248, 46, 0.06);
}

.cc-admin .admin-ts-input::placeholder {
    color: #5c5c70;
}

.cc-admin .admin-ts-cell {
    cursor: pointer;
    border-style: dashed;
}

.cc-admin .admin-ts-cell.admin-ts-running {
    width: auto;
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
    font-size: 0.75rem;
}

.cc-admin .admin-ts-cell.admin-ts-review {
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}