/* Framework chrome the ported design stylesheet doesn't cover.
   The Blazor error UI must be hidden until the framework reveals it on error. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: 0.7rem 1.25rem;
    background: var(--rcn-gunmetal-700, #181C18);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}

#blazor-error-ui .reload {
    color: var(--rcn-green-300, #4FD699);
    text-decoration: underline;
    margin-left: 8px;
    cursor: pointer;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
}

/* Blazor's <EditForm> renders a <form> between .modal and its body/foot, which
   breaks the modal's flex-column scroll layout: on tall forms the footer
   buttons overflow below the viewport and can't be reached. Make that <form>
   the flex column instead, so the body scrolls and the footer stays pinned. */
.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.modal > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Blazor's <ValidationMessage>/<ValidationSummary> emit .validation-message /
   .validation-errors, which the design system doesn't style — so they render as
   plain black body text. Map them onto the design system's inline field-error
   treatment (small, danger-coloured) and flag the invalid input's border. */
.validation-message,
.validation-errors > li {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--rcn-danger);
}

.validation-errors {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.input.invalid,
.select.invalid,
.textarea.invalid {
    border-color: var(--rcn-danger);
}

/* Required-field marker in form labels. */
.field-label .req {
    color: var(--rcn-danger);
    margin-left: 1px;
}

/* Error variant of the success .notice banner (used for failed sends, etc.). */
.notice.notice-error {
    background: rgba(243, 18, 96, 0.08);
    border-color: rgba(243, 18, 96, 0.25);
    color: var(--rcn-danger);
}

/* Hide the native file input behind the Compose "browse" label. It's rendered by
   the <InputFile> child component, so the page's scoped CSS can't reach it — the
   clickable "browse" label still opens the picker. */
.attach-input {
    display: none;
}

/* Continuous rotation for loading icons (uses the @keyframes spin from app.css). */
.icon.spin {
    animation: spin 0.8s linear infinite;
    transform-origin: center;
}

/* Always-visible inline action button group (e.g. table Edit/Delete, detail-header
   actions) with consistent spacing. Deliberately NOT the design system's
   .row-actions, which is hover-revealed (opacity:0) and only un-hides inside a
   hovered table row — unusable for buttons we want shown at all times. */
.inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* The {{token}} key in the Email detail "Merge values" card. */
.merge-key {
    font-family: var(--rcn-font-mono);
    font-size: 12px;
    color: var(--rcn-fg-2);
    background: rgba(17, 20, 17, 0.04);
    padding: 1px 6px;
    border-radius: 5px;
}

/* Reusable list pager (shared Pager.razor): sits at the foot of a table card. */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(17, 20, 17, 0.06);
    font-size: 13px;
    color: var(--rcn-fg-3);
    flex-wrap: wrap;
}

.pager-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pager-size {
    width: auto;
    height: 32px;
    padding: 0 28px 0 10px;
    font-size: 12px;
    cursor: pointer;
}

.pager-page {
    font-size: 12px;
    font-weight: 600;
    color: var(--rcn-fg-2);
    min-width: 56px;
    text-align: center;
}

/* Booking slot picker: a *selected* slot has white text on a solid green fill, but the
   design system's `.slot:hover:not([disabled])` (3 selectors) outweighs `.slot.selected`
   (2 selectors) and replaces the fill with a pale tint on hover — leaving white-on-near-white,
   i.e. invisible text the moment you click a slot (the cursor is still over it). Keep the
   selected fill on hover/focus with a higher-specificity rule. */
.slot.selected:hover:not([disabled]),
.slot.selected:focus-visible {
    background: var(--rcn-brand-green);
    border-color: var(--rcn-brand-green);
    color: #fff;
}

/* Top bar: dark gunmetal (matching the sidebar) with a realcognita-green gradient glowing out of the
   top-right corner. Title text goes white, the crumb pops in brand-green, and the bell lightens up. */
.topbar {
    background:
        radial-gradient(130% 220% at 100% 0%,
            rgba(38, 207, 123, 0.45) 0%,
            rgba(38, 207, 123, 0.14) 32%,
            rgba(38, 207, 123, 0) 62%),
        var(--rcn-gunmetal-700, #181c18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar h1 {
    color: #fff;
}
.topbar-product {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    display: block;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.topbar-parent {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.topbar .crumb {
    color: var(--rcn-green-300, #4fd699);
}

/* Total-count chip next to the title — translucent white so it reads on the dark bar. */
.topbar-count {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Bell sits on the dark bar — make it read as a distinct control: a bright icon in a translucent
   pill with a subtle border, brightening on hover. */
.topbar .notif-bell {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.topbar .notif-bell:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.3);
}

/* The Cards/Table view toggle lives in the dark top-bar Actions, so the default white .seg pill clashes.
   Give the top-bar seg a translucent dark shell with light inactive icons and a white active pill.
   (In-page filter segs sit on the light content area and keep the default styling.) */
.topbar .seg {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}

.topbar .seg > button {
    color: rgba(255, 255, 255, 0.72);
}

.topbar .seg > button.active {
    background: rgba(255, 255, 255, 0.92);
    color: var(--rcn-fg-1);
}

/* Notification bell lives in the top bar; the bell + panel are styled by the design system
   (app.css .notif-*). We only add a transparent click-away catcher behind the open panel and a
   little spacing from the page actions. */
.topbar .notif-wrap {
    margin-left: 4px;
}

.notif-scrim {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* Row of labeled actions at the foot of a card (Sequences · Templates): consistent icon+label buttons. */
.seq-card-actions,
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(17, 20, 17, 0.06);
}

/* ───────────────────────────────────────────────────────────────────────────
   Shared layout utilities + patterns — extracted from repeated inline styles so
   markup stays semantic and the values live in one place (used app-wide).
   ─────────────────────────────────────────────────────────────────────────── */

/* Flex helpers. */
.spacer { flex: 1; }
.min-w-0 { min-width: 0; }
.flex-min { flex: 1; min-width: 0; } /* a flex child that can shrink and truncate */
.clickable { cursor: pointer; }

/* A muted, centred card for loading / not-found / empty-filter states. */
.card-state {
    padding: 40px;
    text-align: center;
    color: var(--rcn-fg-3);
    font-size: 13px;
}

/* Empty-state block: a brand-tinted icon circle over a title + subtitle. */
.empty-state {
    padding: 56px;
    text-align: center;
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(38, 207, 123, 0.12);
    color: var(--rcn-brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.empty-state-sub {
    font-size: 13px;
    color: var(--rcn-fg-3);
}

/* Action cell in a table row, pinned to the right edge. width:1% + nowrap makes the
   column shrink to its buttons so the table's slack goes to the data columns instead of
   padding this cell — keeping the actions anchored hard right across every grid.
   (.cell-right-pad is the Contacts grid's variant — same treatment for consistency.) */
.cell-actions,
.cell-right-pad {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* Modal sizing + a vertical field stack for modal bodies. */
.modal-sm { max-width: 440px; }
.modal-md { max-width: 480px; }
.modal-lg { max-width: 520px; }
.modal-xl { max-width: 580px; }

.modal-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Body copy inside a modal (e.g. a delete-confirmation paragraph). */
.modal-text {
    font-size: 14px;
    color: var(--rcn-fg-2);
    line-height: 1.5;
}

/* Action buttons placed DIRECTLY in a table cell (grid/list row actions) sit flush without a flex
   container — space consecutive buttons. Scoped to direct children so wrapped groups like
   .inline-actions (which already have their own gap) aren't double-spaced. */
.table td > .btn + .btn {
    margin-left: 8px;
}

/* Task-row actions are now labeled buttons — match the 8px action spacing used elsewhere. */
.task-actions {
    gap: 8px;
}

/* Executive report — scorecard delta line + funnel bars. */
.report-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
}

.report-delta.up {
    color: #137548;
}

.report-delta.down {
    color: var(--rcn-danger, #f31260);
}

.funnel-track {
    height: 12px;
    border-radius: 9999px;
    background: rgba(17, 20, 17, 0.06);
    overflow: hidden;
}

.funnel-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--rcn-brand-green, #26cf7b), #1f9d63);
    transition: width 0.4s var(--rcn-ease-standard, ease);
    min-width: 2px;
}

.report-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 980px) {
    .report-two-col {
        grid-template-columns: 1fr;
    }
}

/* Deliverability: health score headline + bar + colour-coded risk stats. */
.health-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.health-score {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.health-bar {
    height: 8px;
    border-radius: 9999px;
    background: rgba(17, 20, 17, 0.08);
    overflow: hidden;
    margin-bottom: 16px;
}

.health-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.4s var(--rcn-ease-standard, ease);
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.health-stat {
    background: rgba(17, 20, 17, 0.03);
    border-radius: 10px;
    padding: 10px 12px;
}

.health-stat .k {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rcn-fg-3);
}

.health-stat .v {
    font-size: 18px;
    font-weight: 600;
    color: var(--rcn-fg-1);
    margin-top: 2px;
}

.health-stat .v.good {
    color: #137548;
}

.health-stat .v.warn {
    color: #9a6700;
}

.health-stat .v.bad {
    color: var(--rcn-danger, #f31260);
}

/* Engagement heatmap (7 days × 24 hours). */
.heatmap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-x: auto;
}

.heatmap-row {
    display: flex;
    gap: 3px;
    align-items: center;
}

.heatmap-day {
    width: 34px;
    flex: 0 0 34px;
    font-size: 11px;
    font-weight: 600;
    color: var(--rcn-fg-3);
}

.heatmap-cell {
    flex: 1 1 0;
    min-width: 11px;
    height: 18px;
    border-radius: 3px;
}

.heatmap-axis .heatmap-hour {
    flex: 1 1 0;
    min-width: 11px;
    font-size: 9px;
    color: var(--rcn-fg-3);
    text-align: left;
}

/* Print / PDF: drop the app chrome and the report's own controls; show only the report cards. */
@media print {
    .sidebar,
    .topbar,
    .report-controls,
    #blazor-error-ui {
        display: none !important;
    }

    .app {
        display: block !important;
    }

    .screen {
        padding: 0 !important;
    }

    .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid rgba(17, 20, 17, 0.12) !important;
    }
}

/* Templates: pin the card grid to 3 per row (the design's auto-fill packs in 4 on wide screens),
   stepping down on narrower viewports. */
.template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .template-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Card/Table view toggle (Sequences, Tasks, Templates): keep the icon-only seg buttons square. */
.view-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Danger-coloured stat figure (e.g. the failed-send count on the Sent screen). Global so it
   works outside the dashboard, whose own .stat-danger is component-scoped. */
.stat-danger {
    color: var(--rcn-danger);
}

/* Loading overlay for paginated grids (shown while reloading after a filter/scope/search change,
   so the data swap isn't silent). The card it sits in must be position:relative. */
.grid-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.62);
    color: var(--rcn-fg-2, #4a4f4a);
    font-size: 13px;
    font-weight: 500;
}