/* One look across every module.
 *
 * The skin in app.css (square, cut-corner panels with a blue top rule, square
 * cut-corner badges, uppercase muted table heads) is the house style, and the
 * Service Desk runtime uses the same shapes. Module stylesheets written later
 * (change, performance, lifecycle, my actions, projects, service desk ports)
 * brought their own rounded cards, pill chips, pill tabs, dashed empty states,
 * heading sizes and traffic-light colours. This file maps all of those back
 * onto the skin. It is loaded after every module stylesheet (base.html, after
 * head_extra) and every rule starts with .app-body so it also wins over the one
 * partial that links its stylesheet inside the page body.
 *
 * Kept round on purpose: status dots, avatars, progress bars and timeline
 * nodes. Kept dashed on purpose: "add new" drop zones.
 */

/* ---- 1. One status palette (the skin's pill-status tones) -------------- */
.app-body {
    --ui-ok: #166534;
    --ui-ok-bg: rgba(22, 163, 74, 0.11);
    --ui-warn: #9a3412;
    --ui-warn-bg: rgba(217, 119, 6, 0.12);
    --ui-bad: #991b1b;
    --ui-bad-bg: rgba(220, 38, 38, 0.10);
    --ui-info: #244e79;
    --ui-info-bg: rgba(47, 110, 168, 0.08);

    --pf-ok: var(--ui-ok); --pf-ok-bg: var(--ui-ok-bg);
    --pf-warn: var(--ui-warn); --pf-warn-bg: var(--ui-warn-bg);
    --pf-bad: var(--ui-bad); --pf-bad-bg: var(--ui-bad-bg);
    --pf-info: var(--ui-info); --pf-info-bg: var(--ui-info-bg);

    --prj-ok: var(--ui-ok); --prj-ok-soft: var(--ui-ok-bg);
    --prj-warn: var(--ui-warn); --prj-warn-soft: var(--ui-warn-bg);
    --prj-bad: var(--ui-bad); --prj-bad-soft: var(--ui-bad-bg);

    --tk-ok: var(--ui-ok); --tk-ok-soft: var(--ui-ok-bg);
    --tk-warn: var(--ui-warn); --tk-warn-soft: var(--ui-warn-bg);
    --tk-bad: var(--ui-bad); --tk-bad-soft: var(--ui-bad-bg);
    --tk-primary-soft: var(--ui-info-bg);

    --wf-tone-pending: var(--ui-warn);
    --wf-tone-resolved: var(--ui-ok);
}

.app-body .chg-hero,
.app-body .chg-section,
.app-body .chg-decision,
.app-body .chg-facts-card {
    --chg-ok: var(--ui-ok); --chg-ok-bg: var(--ui-ok-bg);
    --chg-warn: var(--ui-warn); --chg-warn-bg: var(--ui-warn-bg);
    --chg-bad: var(--ui-bad); --chg-bad-bg: var(--ui-bad-bg);
}

/* ---- 2. Cards, banners and form blocks: square with the cut corner ------ */
.app-body .chg-hero,
.app-body .chg-nav,
.app-body .chg-decide-banner,
.app-body .chg-block,
.app-body .chg-approval,
.app-body .ma-card,
.app-body .ma-others,
.app-body .ma-bulk,
.app-body .ma-reset-form,
.app-body .lc-alert,
.app-body .lc-dates > div,
.app-body .lc-activity,
.app-body .lc-form-section,
.app-body .pf-stat,
.app-body .pm-tile,
.app-body .pm-month,
.app-body .pf-banner,
.app-body .pf-form-card,
.app-body .pf-builder-head,
.app-body .pf-kpi-row,
.app-body .pf-assess-head,
.app-body .pf-score,
.app-body .pf-party,
.app-body .pf-actionbar,
.app-body .pf-card,
.app-body .pf-deploy-step,
.app-body .pf-checklist,
.app-body .sdt-summary,
.app-body .sdt-transition-form,
.app-body .sdl-filters,
.app-body .master-row,
.app-body .hd-kpi {
    border-radius: 0;
    clip-path: var(--clip);
}

/* Halves of a composed card, and the dashed "start a new cycle" drop zone:
   square, but no cut, so the pieces still meet cleanly. */
.app-body .pf-section-head,
.app-body .pf-kpi:last-child,
.app-body .pf-new-cycle,
.app-body .chg-quote,
.app-body .pf-comment,
.app-body .pm-disclaimer {
    border-radius: 0;
}

/* Raised tiles get the same surface as .metric-card. Their own border colours
   are left alone: they carry state (overdue, unassigned). */
.app-body .pf-stat,
.app-body .hd-kpi {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 255, 0.98) 100%);
    box-shadow: var(--app-shadow), inset 1px 1px 0 rgba(255, 255, 255, 0.22), inset -1px -1px 0 rgba(24, 49, 76, 0.04);
}
/* .pf-stat already has its own coloured top bar; .hd-kpi gets the skin's. */
.app-body .hd-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(126, 162, 197, 0.2), rgba(47, 110, 168, 0.82), rgba(126, 162, 197, 0.2));
}

/* An open dropdown must never be cut off by a clipped card (the 2026-09-28
   invisible-list bug): lift the clipping while a list or menu is open. */
.app-body :is(.chg-hero, .chg-nav, .chg-block, .chg-approval, .ma-card, .ma-others,
    .ma-bulk, .ma-reset-form, .lc-activity, .lc-form-section, .pf-form-card,
    .pf-builder-head, .pf-kpi-row, .pf-assess-head, .pf-party, .pf-actionbar,
    .pf-card, .pf-deploy-step, .pf-checklist, .sdt-summary, .sdt-transition-form,
    .sdl-filters, .master-row, form.hd-toolbar, .hd-filterbar):has(.ts-wrapper.dropdown-active, .dropdown-menu.show) {
    clip-path: none;
    overflow: visible;
    position: relative;
    z-index: 20;
}

/* ---- 3. Chips, tags, counts and status labels: the skin's badge shape --- */
.app-body .settings-card-status,
.app-body .access-status,
.app-body .access-role-perms code,
.app-body .amd-badge,
.app-body .amd-chips a,
.app-body .ast-chip,
.app-body .chg-status,
.app-body .chg-chip,
.app-body .chg-pill,
.app-body .chg-duration,
.app-body .chg-hidden-note,
.app-body .chg-reason-label,
.app-body .chg-rev-num,
.app-body .crm-type-tag,
.app-body .lc-pill,
.app-body .ma-age,
.app-body .ma-person,
.app-body .pf-status,
.app-body .pf-chip,
.app-body .pf-weight,
.app-body .pf-rating,
.app-body .pf-threshold,
.app-body .pm-code,
.app-body .state-chip,
.app-body .prj-priority,
.app-body .rag-badge,
.app-body .health-badge,
.app-body .prj-waiting-chip,
.app-body .prj-file-owner,
.app-body .prj-mine-note,
.app-body .prj-list-overdue,
.app-body .runtime-pill,
.app-body .runtime-empty-meta span,
.app-body .prio-chip,
.app-body .sla-chip,
.app-body .hd-msg-tag,
.app-body .hd-pipeline-badge,
.app-body .hd-edge-tag,
.app-body .hd-edge-effect,
.app-body .hd-chip,
.app-body .hd-queue-chip,
.app-body .hd-tag,
.app-body .canned-cat-chip,
.app-body .mfa-status-badge,
.app-body .task-chip,
.app-body .wf-key,
.app-body .wf-flag,
.app-body .wf-status {
    border-radius: 0;
    clip-path: var(--clip);
}

/* Count bubbles are tiny, so they get a proportionally smaller cut. */
.app-body .ast-count,
.app-body .ma-count,
.app-body .pf-count,
.app-body .prj-board-count,
.app-body .prj-count-badge,
.app-body .sdt-fold-count:not(:empty),
.app-body .sdl-count,
.app-body .hd-tab-count,
.app-body .hd-searchgroup-count,
.app-body .nav-count-badge {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

/* ---- 4. Tabs and segmented switches: one square control ---------------- */
.app-body .hd-tabs,
.app-body .hd-tab,
.app-body .hd-composer-tabs,
.app-body .hd-composer-tab,
.app-body .ma-seg,
.app-body .ma-tab,
.app-body .pf-seg,
.app-body .pf-seg a,
.app-body .sdl-tab,
.app-body .sdl-quick-link,
.app-body .settings-nav a,
.app-body .hd-savedview,
.app-body .hd-saveview > summary,
.app-body .crm-stepper li {
    border-radius: 0;
    clip-path: var(--clip);
}

/* ---- 5. Numbered steps and icon tiles: square like .document-step-number */
.app-body .chg-approval-num,
.app-body .chg-event-icon,
.app-body .chg-decision-icon,
.app-body .pf-step-num,
.app-body .nr-step-no,
.app-body .nr-preset-icon,
.app-body .help-cat-icon,
.app-body .hd-kpi-icon,
.app-body .ma-icon,
.app-body .ma-empty-icon {
    border-radius: 0;
    clip-path: var(--clip);
}

.app-body .hd-globalsearch .form-control {
    border-radius: 0;
}

/* ---- 6. Empty states: the skin's solid .empty-state panel --------------- */
.app-body .runtime-empty,
.app-body .ma-empty {
    border: 1px solid var(--app-border);
    border-radius: 0;
    clip-path: var(--clip);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 255, 0.98) 100%);
    box-shadow: var(--app-shadow);
}
/* Same spacing as .empty-state: the Service Desk version was 360px tall. */
.app-body .runtime-empty {
    min-height: 0;
    padding: 2.2rem 1.25rem;
    gap: 0.35rem;
    align-content: center;
}
.app-body .runtime-empty h3 {
    margin: 0.5rem 0 0.25rem;
}
.app-body .runtime-empty p {
    margin: 0;
}
/* An empty state already sitting inside a card needs no second frame. */
.app-body .panel-card .runtime-empty {
    border: 0;
    clip-path: none;
    background: transparent;
    box-shadow: none;
}

/* ---- 7. Headings: one size per role ------------------------------------ */
/* Card and section titles = .panel-card h3. */
.app-body .hd-tile-head h3,
.app-body .runtime-card-heading h3,
.app-body .nr-step-head h3,
.app-body .chg-section-head h3,
.app-body .chg-decision-head h3,
.app-body .pf-kpa-head h3,
.app-body .pf-section-head h3,
.app-body .settings-outbox-copy h3,
.app-body .auto-section-head h3,
.app-body .settings-variables > h3,
.app-body .wf-workflow-head h3,
.app-body .panel-card-head > h2,
.app-body .rail-note h3,
.app-body .runtime-empty h3,
.app-body .ma-empty h3,
.app-body .empty-state h3 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--app-text);
}

/* Record headers = .detail-hero h2. */
.app-body .chg-title,
.app-body .ast-hero-title,
.app-body .pf-assess-head h2 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--app-text);
}
.app-body .profile-identity-copy h2 {
    font-weight: 800;
}

/* Page introductions = .document-settings-hero h2. */
.app-body .runtime-page-intro h2,
.app-body .hd-hero-copy h2 {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--app-text);
}

/* Small uppercase group labels = the skin's eyebrow (.hero-kicker). */
.app-body .pf-subhead,
.app-body .pf-list-title,
.app-body .lc-group-title,
.app-body .chg-block h4,
.app-body .chg-eyebrow {
    font-family: var(--app-font);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted);
}

/* ---- 8. Page heroes: light, like every other page intro ----------------- */
/* The Service Desk overview was the only page with a dark banner. */
.app-body .hd-hero {
    color: var(--app-text);
    border: 1px solid var(--app-border);
    clip-path: var(--clip);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 255, 0.98) 100%);
    box-shadow: var(--app-shadow);
    padding: 1.25rem 1.35rem;
}
.app-body .hd-hero-copy p {
    color: var(--app-muted);
}
/* Identity & access intro: same scale as the other page intros. */
.app-body .runtime-page-intro p {
    color: var(--app-muted);
}

/* ---- 9. Tables: every data table gets the .app-table head --------------- */
.app-body .content-wrap table.table:not(.app-table) {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: rgba(197, 216, 234, 0.9);
}
.app-body .content-wrap table.table:not(.app-table) > thead > tr > th {
    padding: 0.7rem 0.75rem;
    color: var(--app-muted);
    font-family: var(--app-font);
    font-size: 0.77rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--app-border);
    background: rgba(47, 110, 168, 0.04);
}

/* ---- 10. Buttons: no Bootstrap defaults leaking through ----------------- */
.app-body .btn-primary:disabled,
.app-body .btn-primary.disabled {
    color: #ffffff;
    background: linear-gradient(135deg, #3d86cb 0%, #275f94 100%);
    border-color: #275f94;
    box-shadow: none;
    opacity: 0.55;
}
.app-body .btn-check:checked + .btn-outline-secondary,
.app-body .btn-outline-secondary.active,
.app-body .btn-outline-secondary:active {
    color: #ffffff;
    background: var(--app-primary);
    border-color: var(--app-primary);
}

/* ---- 11. Layout fixes found during the crawl --------------------------- */
/* Risk and SoA dashboards: four fixed columns in the narrow side rail cut the
   figures off ("15(" for 150). Fit as many tiles as there is room for. */
.app-body .metric-row {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.app-body .metric-row .metric-card {
    min-width: 0;
    padding: 0.9rem 1rem;
}

/* Filter bars: Projects reuses the Service Desk toolbar but does not load
   servicedesk.css, so its search and filters floated on the page. Every
   filter form sits in the same framed bar as Tickets and Change. */
.app-body form.hd-toolbar,
.app-body .hd-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.8rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0;
    clip-path: var(--clip);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 255, 0.98) 100%);
    box-shadow: var(--app-shadow);
}