/* =============================================
   Design Tokens — Stack2 Brand
   ============================================= */
:root {
    /* Brand palette */
    --brand-dark:   #1a1a1e;   /* Big Shark */
    --brand-green:  #6cf127;   /* Guarana */
    --brand-bg:     #f5f5f5;   /* BG White */

    /* Surfaces */
    --app-bg:             #f5f5f5;
    --app-surface:        #ffffff;
    --app-surface-raised: #f0f0f0;
    --app-border:         rgba(0, 0, 0, 0.08);
    --app-border-subtle:  rgba(0, 0, 0, 0.05);
    --app-shadow:         0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --app-shadow-md:      0 4px 14px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.05);
    --app-radius:         0.6rem;
    --app-radius-sm:      0.4rem;
    --app-radius-lg:      0.75rem;

    /* Typography */
    --app-text:           #1a1a1e;   /* Big Shark — primary text */
    --app-text-secondary: #5a5a64;
    --app-text-muted:     #9a9aa8;
    --app-font-body:      'Petita', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --app-font-heading:   'Scuper', 'Petita', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Accent — Guarana green */
    --app-accent:         #6cf127;           /* vivid brand green — decorative/bg */
    --app-accent-hover:   #56d41a;           /* slightly deeper for hover */
    --app-accent-text:    #1e7200;           /* dark green — readable on white (4.8:1) */
    --app-accent-subtle:  rgba(108, 241, 39, 0.1);
    --app-accent-border:  rgba(108, 241, 39, 0.3);

    /* Status palette */
    --app-status-task-on-hold: #6f42c1;
}

/* =============================================
   Fonts
   ============================================= */
/* @font-face {
    font-family: 'Petita';
    src: url('/fonts/Petita.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Scuper';
    src: url('/fonts/Scuper.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
} */

/* =============================================
   Base
   ============================================= */
html, body {
    font-family: var(--app-font-body);
    font-size: 0.9375rem;
    color: var(--app-text);
    background-color: var(--app-bg);
    -webkit-font-smoothing: antialiased;
}

main {
    background-color: var(--app-bg) !important;
}

.content {
    padding-top: 1.25rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--app-font-heading);
    color: var(--app-text);
    font-weight: 700;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--app-accent-text);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--app-accent-text);
    text-decoration: underline;
}

/* =============================================
   Cards
   ============================================= */

/* Works alongside border-0 shadow-sm pattern used throughout */
.card.border-0 {
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-lg) !important;
}

.card.shadow-sm {
    box-shadow: var(--app-shadow) !important;
}

.card .card-header {
    background-color: var(--app-surface) !important;
    padding-top: 1rem;
    padding-bottom: 0.75rem;
}

.card .card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text);
}

.card .card-header p.text-muted,
.card .card-header small {
    font-size: 0.78rem;
    color: var(--app-text-secondary) !important;
}

/* =============================================
   Buttons
   ============================================= */
.btn {
    border-radius: var(--app-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn-dark {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #f5f5f5;
}

.btn-dark:hover {
    background-color: #2e2e35;
    border-color: #2e2e35;
    color: #f5f5f5;
}

.btn-primary {
    /* Brand green bg with dark text — white on #6cf127 fails WCAG */
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--brand-dark);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.show,
.btn-primary:first-child:active,
:not(.btn-check) + .btn-primary:active {
    background-color: var(--app-accent-hover);
    border-color: var(--app-accent-hover);
    color: var(--brand-dark);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--brand-dark);
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-dark:disabled,
.btn-dark.disabled {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #f5f5f5;
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-outline-secondary {
    border-color: var(--app-border);
    color: var(--app-text-secondary);
}

.btn-outline-secondary:hover {
    background-color: var(--app-surface-raised);
    border-color: rgba(0,0,0,0.12);
    color: var(--app-text);
}

.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(108, 241, 39, 0.22);
    outline: none;
}

/* =============================================
   Badges
   ============================================= */
.badge {
    border-radius: 0.35rem;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}

.badge.rounded-pill {
    border-radius: 100px;
}

.bg-task-on-hold {
    background-color: var(--app-status-task-on-hold) !important;
    color: #fff !important;
}

/* =============================================
   Forms
   ============================================= */
.form-control,
.form-select {
    border-radius: var(--app-radius-sm);
    border-color: rgba(0,0,0,0.12);
    font-size: 0.875rem;
    color: var(--app-text);
    background-color: var(--app-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(108, 241, 39, 0.18);
}

.form-control::placeholder {
    color: var(--app-text-muted);
}

.form-label {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--app-text);
    margin-bottom: 0.35rem;
}

.form-text {
    color: var(--app-text-muted);
    font-size: 0.78rem;
}

.input-group .btn {
    border-color: rgba(0,0,0,0.12);
}

.form-check-input:checked {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* =============================================
   Dropdown menus
   ============================================= */
.dropdown-menu {
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-md);
    padding: 0.3rem;
    font-size: 0.875rem;
    background-color: var(--app-surface);
}

.dropdown-item {
    border-radius: var(--app-radius-sm);
    padding: 0.45rem 0.75rem;
    color: var(--app-text);
    font-size: 0.875rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--app-surface-raised);
    color: var(--app-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--app-accent-subtle);
    color: var(--app-accent-text);
}

.dropdown-divider {
    border-color: var(--app-border-subtle);
    margin: 0.3rem 0;
}

/* =============================================
   Tables
   ============================================= */
.table {
    font-size: 0.875rem;
    color: var(--app-text);
}

.table > :not(caption) > * > * {
    border-color: var(--app-border-subtle);
    padding: 0.65rem 0.75rem;
}

.table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-muted);
    border-bottom-color: var(--app-border);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--app-surface-raised);
}

/* =============================================
   Breadcrumbs
   ============================================= */
.breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: var(--app-text-secondary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--app-accent-text);
}

.breadcrumb-item.active {
    color: var(--app-text);
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--app-text-muted);
}

/* =============================================
   Nav tabs
   ============================================= */
.nav-tabs {
    border-bottom: 1px solid var(--app-border);
    gap: 0.1rem;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
    color: var(--app-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.9rem;
    transition: color 0.15s, background-color 0.15s;
}

.nav-tabs .nav-link:hover {
    color: var(--app-text);
    background-color: var(--app-surface-raised);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--app-accent-text);
    background-color: transparent;
    border-bottom: 2px solid var(--app-accent);
    font-weight: 600;
}

/* =============================================
   Nav pills
   ============================================= */
.nav-pills .nav-link {
    border-radius: var(--app-radius-sm);
    color: var(--app-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    transition: color 0.15s, background-color 0.15s;
}

.nav-pills .nav-link:hover {
    color: var(--app-text);
    background-color: var(--app-surface-raised);
}

.nav-pills .nav-link.active {
    background-color: var(--app-accent);
    color: var(--brand-dark);
    font-weight: 600;
}

/* =============================================
   Alerts
   ============================================= */
.alert {
    border-radius: var(--app-radius);
    font-size: 0.875rem;
}

/* =============================================
   Modals
   ============================================= */
.modal-content {
    border-radius: var(--app-radius-lg);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-md);
}

.modal-header {
    border-bottom-color: var(--app-border-subtle);
    padding: 1.1rem 1.25rem;
}

.modal-footer {
    border-top-color: var(--app-border-subtle);
    padding: 0.85rem 1.25rem;
}

/* =============================================
   Definition lists (detail page data rows)
   ============================================= */
dt {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

dd {
    font-size: 0.875rem;
    color: var(--app-text);
}

/* =============================================
   Utilities & overrides
   ============================================= */
.text-muted {
    color: var(--app-text-secondary) !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #16a34a;
}

.invalid {
    outline: 1px solid #dc2626;
}

.validation-message {
    color: #dc2626;
    font-size: 0.8rem;
}

.darker-border-checkbox.form-check-input {
    border-color: rgba(0,0,0,0.25);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--app-text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.dropdown-toggle-no-caret::after {
    display: none !important;
}

.table-fixed-100 {
    table-layout: fixed;
    width: 100%;
    word-wrap: anywhere;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* =============================================
   Mobile — prevent iOS auto-zoom on input focus
   iOS Safari zooms in when the focused input's computed font-size is
   below 16px. This app sets html/body font-size to 0.9375rem (15px),
   so 1rem = 15px here — still below the 16px threshold. We must use
   the absolute value 16px (with !important to beat Bootstrap and any
   component-scoped overrides) to guarantee the computed size is ≥ 16px
   on all mobile devices without disabling user pinch-to-zoom.
   ============================================= */
@media (max-width: 767.98px) {
    .form-control,
    .form-control-sm,
    .form-select,
    .form-select-sm,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select,
    .toastui-editor .ProseMirror {
        font-size: 16px !important;
    }
}

/* =============================================
   Mobile — prevent double-tap zoom on interactive elements
   iOS Safari zooms on a double-tap unless touch-action: manipulation
   is set, which also removes the 300ms click delay. Scoped to mobile
   to avoid interfering with desktop pinch-zoom on touch trackpads.
   ============================================= */
@media (max-width: 767.98px) {
    a,
    button,
    [role="button"],
    .btn,
    label,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }
}

/* =============================================
   Dashboard activity feed — shared between the
   Home dashboard and the /activity "View All" page.
   ============================================= */
.dash-icon-blue   { background: rgba(42, 120, 214, 0.12); color: #2a78d6; }
.dash-icon-green  { background: rgba(12, 163, 12, 0.12);  color: #0ca30c; }
.dash-icon-amber  { background: rgba(250, 178, 25, 0.16); color: #a86a00; }
.dash-icon-violet { background: rgba(74, 58, 167, 0.12);  color: #4a3aa7; }
.dash-icon-orange { background: rgba(235, 104, 52, 0.12); color: #eb6834; }
.dash-icon-pink   { background: rgba(232, 123, 164, 0.16); color: #c14c7c; }
.dash-icon-red    { background: rgba(208, 59, 59, 0.12);  color: #d03b3b; }

.dash-activity-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.055);
}

.dash-activity-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-activity-icon {
    width: 1.9rem;
    height: 1.9rem;
    min-width: 1.9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.dash-activity-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1e;
    display: block;
}

.dash-activity-time {
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* =============================================
   Stat-tile cards and backup lists — shared between
   the Home dashboard and the Website Details overview tab.
   ============================================= */
.dash-stat-card {
    transition: box-shadow 0.15s, transform 0.1s;
}

.dash-stat-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
    transform: translateY(-1px);
}

.dash-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.dash-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1e;
    line-height: 1.2;
}

.dash-stat-label {
    font-size: 0.78rem;
    color: #7a7a86;
    white-space: nowrap;
}

.dash-stat-sub {
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.15rem;
}

.dash-backup-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.055);
}

.dash-backup-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-backup-host {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1e;
    display: block;
}

.dash-backup-list li .badge {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

.dash-chart-fill {
    position: relative;
    flex: 1 1 auto;
    min-height: 180px;
}

.dash-chart-fill canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.dash-uptime-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.dash-chart-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: #1a1a1e;
    color: #fff;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 10px));
    transition: opacity 0.1s ease;
    z-index: 1060;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
}

.dash-chart-tooltip-title {
    font-weight: 600;
}

/* =============================================
   Milkdown editor/viewer — blend into the surrounding card
   The nord theme paints its own off-white panel background and its own
   fonts (Inter body / Rubik headings) via custom properties (reset.css).
   Overriding them here — reusing the same tokens as the rest of the app
   rather than hardcoding — lets the editor/viewer pick up whatever
   background the embedding card actually has and keeps heading/body text
   looking like the same document instead of a visibly different font.
   ============================================= */
div.milkdown {
    --crepe-color-background: transparent;
    --crepe-font-default: var(--app-font-body);
    --crepe-font-title: var(--app-font-heading);
}

/* The top bar toolbar paints its own background from --crepe-color-surface
   (a separate variable, shared with floating popovers/code blocks that need
   to stand out from content — so it's overridden narrowly here rather than
   globally) instead of --crepe-color-background. Match it to the same
   transparent treatment so there's no visible seam above the content. */
div.milkdown div.milkdown-top-bar {
    background: transparent;
}

/* The nord theme pads the content area for a spacious full-page "document"
   feel (60px/120px) — way too much inside a card or a comment box, where it
   just wastes the available width. Shrink it to roughly match the app's own
   card padding (--bs-card-spacer, 1rem).

   Also scope horizontal overflow here: wide content (a table, an unwrapped
   code line, a long unbroken URL) has an intrinsic min-content width that
   can exceed this box. In normal flow that just paints past the edge rather
   than growing the box — which drags the whole page into horizontal scroll
   instead of staying contained. Scoping the scroll container to just the
   content area (not the whole editor) keeps the top bar in place and lets
   only the overflowing content scroll — applies to the read-only viewer too,
   since it shares this same structure. */
div.milkdown .ProseMirror {
    padding: 20px 16px;
    max-width: 100%;
    overflow-x: auto;
}

/* The editor (not the read-only viewer — it has BlockEdit disabled and no
   handle at all) needs its left side wider: the per-line drag-handle/"+"
   buttons float via floating-ui with placement "left" and a 16px offset from
   the block, and flip badly — off the edge of the card, not just to the
   other side — when there isn't room to render there. 66px handle width +
   16px offset + a little breathing room = 84px. */
.milkdown-host-editable div.milkdown .ProseMirror {
    padding-left: 84px;
}

/* The nord theme has no border of its own (it's meant to blend into a page),
   which — combined with the transparent background above — leaves the
   editor with no visible boundary at all. It reads as plain text that blends
   into whatever sits below it (e.g. a Save/Cancel row). Give it a real
   field-like border, matching the app's .form-control convention. */
.milkdown-host-editable {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--app-radius-sm);
}

.dash-chart-tooltip-body {
    color: rgba(255, 255, 255, 0.85);
}