/* ═══════════════════════════════════════════════════════════════════════════
   DELETE HEX — MONOCHROME DESIGN SYSTEM
   ---------------------------------------------------------------------------
   Editorial black-and-white. The interface is built from four materials only:

     1. Ink      — pure white type on true black
     2. Rules    — hairline 1px dividers that carry the structure
     3. Planes   — near-black surfaces separated by value, not by shadow
     4. Inversion— white fills used sparingly for the single primary action

   Colour is withheld deliberately. State is communicated by brightness,
   iconography and inversion. The one exception is a desaturated red kept
   strictly for destructive / error semantics so nobody deletes by accident.

   Loaded in <head>. Page-level skins load last from mono-pages.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
html:root {
    /* Ink ramp — text brightness */
    --ink:   #ffffff;
    --ink-2: #b8b8be;
    --ink-3: #83838b;
    --ink-4: #58585f;
    --ink-5: #38383e;

    /* Paper ramp — surface brightness */
    --paper:   #000000;
    --paper-1: #070708;
    --paper-2: #0c0c0e;
    --paper-3: #121215;
    --paper-4: #18181c;
    --paper-5: #1f1f24;

    /* Legacy aliases — the older per-page stylesheets declare their own
       --hover-border / --border-transition inside a :root block that sits in
       <body>, so it would win over this one on source order and tint every
       hovered surface red. html:root raises the specificity above the legacy
       :root so the monochrome values always take effect. */
    --hover-border:       var(--rule-2);
    --hover-border-input: var(--rule-2);
    --border-transition:  border-color 0.18s var(--ease);

    /* Rules — hairline structure */
    --rule-3: rgba(255, 255, 255, 0.045);
    --rule:   rgba(255, 255, 255, 0.095);
    --rule-2: rgba(255, 255, 255, 0.18);
    --rule-3in: rgba(0, 0, 0, 0.55);

    /* Semantic — monochrome by default */
    --ok:     #ffffff;
    --warn:   #d4d4d8;
    --info:   #d4d4d8;
    --danger: #e5484d;   /* the single permitted hue: destructive only */

    /* Shape — tighter, more architectural than the previous system */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;

    /* Motion — brisk, never bouncy */
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --fast: 0.12s var(--ease);
    --med:  0.2s var(--ease);
    --slow: 0.32s var(--ease);

    /* Elevation — monochrome leans on rules, so shadows stay faint */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 4px 16px -6px rgba(0, 0, 0, 0.75);
    --shadow-3: 0 24px 56px -20px rgba(0, 0, 0, 0.9);

    /* Type scale */
    --t-micro: 10px;
    --t-xs: 11px;
    --t-sm: 12.5px;
    --t-base: 13.5px;
    --t-md: 15px;
    --t-lg: 18px;
    --t-xl: 24px;
    --t-2xl: 32px;
    --t-3xl: 44px;

    --track-wide: 0.16em;

    /* ── Aliases: keep every existing page rule working ─────────────────── */
    --bg:         var(--paper);
    --bg-soft:    var(--paper-1);
    --surface:    var(--paper-2);
    --surface-2:  var(--paper-3);
    --surface-3:  var(--paper-4);
    --surface-4:  var(--paper-5);

    --line:        var(--rule);
    --line-strong: var(--rule-2);
    --line-soft:   var(--rule-3);

    --text:   var(--ink);
    --text-2: var(--ink-2);
    --text-3: var(--ink-3);
    --text-4: var(--ink-4);

    --delete-bg:           var(--paper);
    --delete-card-bg:      var(--paper-2);
    --delete-white:        var(--ink);
    --delete-border:       var(--rule);
    --delete-border-hover: var(--rule-2);
    --delete-accent:       var(--ink);
}

/* ── Strip every trace of the old decorative layers ─────────────────────── */
.uiverse-midnight-sky,
.sky-canvas,
.stars,
.stars-1,
.stars-2,
.stars-3,
.bg-grid,
.scanline-effect {
    display: none !important;
}
.delete-card::before,
.delete-button::after,
.delete-card::after,
.delete-button::before {
    content: none !important;
    display: none !important;
}

/* ── Reset & base ───────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-size: var(--t-md) !important;
    line-height: 1.6 !important;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex !important;
    flex-direction: column;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    letter-spacing: -0.028em !important;
    line-height: 1.15 !important;
    margin: 0;
    color: var(--ink);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Monospace is reserved for machine data — keys, ids, hashes, timestamps */
code, kbd, pre, samp,
.font-mono,
[class*="font-mono"] {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
    font-feature-settings: 'zero';
}

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
    outline: 1.5px solid var(--ink);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* Anything clickable should look clickable */
a, button, select, summary, [role="button"], .cursor-pointer { cursor: pointer !important; }
input, textarea { cursor: text !important; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed !important; }

.no-select { user-select: none; -webkit-user-select: none; }

/* ── Page canvas ────────────────────────────────────────────────────────── */
.app-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 50% -8%, rgba(255, 255, 255, 0.045), transparent 68%),
        var(--paper);
}

/* ── Preloader ──────────────────────────────────────────────────────────── */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s var(--ease);
}
.pre-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: min(260px, 70vw);
}
.pre-mark {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pre-mark img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.6);
}
.pre-track {
    width: 100%;
    height: 1px;
    background: var(--rule);
    overflow: hidden;
}
.pre-bar {
    width: 40%;
    height: 100%;
    background: var(--ink);
    animation: preSweep 1.15s var(--ease) infinite;
}
@keyframes preSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
.pre-label {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-4);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--rule);
}
.app-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    height: 64px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    text-decoration: none;
}
.brand-mark {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    background: var(--paper-2);
    transition: background var(--fast), border-color var(--fast);
}
.brand:hover .brand-mark { background: var(--paper-4); border-color: var(--ink-4); }
.brand-mark img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.6);
}
.brand-text { line-height: 1; }
.brand-name {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink);
    text-transform: uppercase;
}
.brand-name span { color: var(--ink-4); }
.brand-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-5);
    margin-top: 4px;
}

/* Nav — editorial underline, not pills */
.app-nav {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 64px;
    margin-left: 6px;
}
.app-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink-3);
    white-space: nowrap;
    transition: color var(--fast);
}
.app-nav a i { font-size: 12px; opacity: 0.8; }
.app-nav a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 1.5px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--med);
}
.app-nav a:hover { color: var(--ink); }
.app-nav a:hover::after { transform: scaleX(0.4); }
.app-nav a.is-active { color: var(--ink); }
.app-nav a.is-active::after { transform: scaleX(1); }
.app-nav a.is-active i { opacity: 1; }

/* User cluster */
.app-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.app-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--rule);
    border-radius: 100px;
    background: var(--paper-2);
    transition: border-color var(--fast), background var(--fast);
}
.app-user-chip:hover { border-color: var(--rule-2); background: var(--paper-3); }
.app-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.app-user-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.app-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-user-role {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.app-logout {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--paper-2);
    color: var(--ink-3);
    font-size: 12px;
    transition: all var(--fast);
}
.app-logout:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* ── Main ───────────────────────────────────────────────────────────────── */
#main-content {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 34px 28px 80px;
}
.page-transition { animation: pageIn 0.34s var(--ease) both; }
@keyframes pageIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.app-footer {
    border-top: 1px solid var(--rule);
    background: var(--paper-1);
    margin-top: auto;
}
.app-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 30px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.foot-brand { display: flex; align-items: center; gap: 11px; }
.foot-mark {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.foot-mark img { width: 15px; height: 15px; object-fit: contain; filter: grayscale(1) brightness(1.5); }
.foot-name {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.foot-name span { color: var(--ink-5); font-weight: 500; }
.foot-tag {
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-5);
    margin-top: 3px;
}
.foot-status { display: flex; align-items: center; gap: 9px; }
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
    flex-shrink: 0;
    animation: pulseDot 2.6s var(--ease) infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
.foot-status-text {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.foot-copy {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-5);
}

/* ═══════════════════════════ PRIMITIVES ═══════════════════════════════ */

/* Surface card — a plane separated by a rule, not a shadow */
.delete-card {
    background: var(--paper-2) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: border-color var(--med), background var(--med);
}
.delete-card:hover {
    border-color: var(--rule-2) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Editorial display type */
.premium-text-gradient {
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    letter-spacing: -0.035em !important;
}

/* Micro-label used above headings and fields */
.mono-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.mono-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink-5);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--r-sm);
    border: 1px solid var(--rule-2);
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: all var(--fast);
}
.btn:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--ink-4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* The single primary action per view: inverted */
.btn-primary,
.delete-button {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--paper) !important;
    font-weight: 700 !important;
}
.btn-primary:hover,
.delete-button:hover {
    background: #e2e2e6 !important;
    border-color: #e2e2e6 !important;
    box-shadow: none !important;
}
.btn-primary:active,
.delete-button:active { transform: translateY(1px); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--rule); color: var(--ink); }

.btn-danger {
    background: transparent;
    border-color: rgba(229, 72, 77, 0.4);
    color: var(--danger);
}
.btn-danger:hover { background: rgba(229, 72, 77, 0.1); border-color: var(--danger); }

.btn-success {
    background: transparent;
    border-color: var(--rule-2);
    color: var(--ink);
}
.btn-success:hover { background: rgba(255, 255, 255, 0.06); }

/* Utilities */
.text-secondary { color: var(--ink-2); }
.border-subtle  { border-color: var(--rule); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Motion helpers ─────────────────────────────────────────────────────── */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes revealIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.reveal-up { animation: revealUp 0.44s var(--ease) both !important; }
.reveal-in { animation: revealIn 0.34s var(--ease) both !important; }
.delay-100 { animation-delay: 50ms !important; }
.delay-200 { animation-delay: 100ms !important; }
.delay-300 { animation-delay: 150ms !important; }
.delay-400 { animation-delay: 200ms !important; }
.delay-500 { animation-delay: 250ms !important; }

.hover-glow:hover { border-color: var(--rule-2) !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* ═══════════════════════════ MODAL ═══════════════════════════════ */
.modal-backdrop {
    position: fixed !important;
    inset: 0;
    background: rgba(0, 0, 0, 0.76) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--med), visibility var(--med) !important;
}
.modal-backdrop.active { opacity: 1 !important; visibility: visible !important; }

.modal-content {
    background: var(--paper-2) !important;
    border: 1px solid var(--rule-2) !important;
    border-radius: var(--r-lg) !important;
    padding: 24px !important;
    width: 100%;
    max-width: 400px !important;
    box-shadow: var(--shadow-3) !important;
    transform: translateY(8px) !important;
    transition: transform var(--slow) !important;
}
.modal-backdrop.active .modal-content { transform: none !important; }

/* ═══════════════════════════ TOASTS ═══════════════════════════════ */
.notification-container {
    position: fixed;
    top: 78px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}
.notification {
    background: var(--paper-3) !important;
    border: 1px solid var(--rule-2) !important;
    border-left: 2px solid var(--ink) !important;
    padding: 12px 15px !important;
    border-radius: var(--r-sm) !important;
    min-width: 258px;
    max-width: 350px;
    display: flex;
    align-items: center;
    gap: 11px;
    box-shadow: var(--shadow-2) !important;
    transform: translateX(calc(100% + 26px));
    opacity: 0;
    transition: transform 0.36s var(--ease), opacity 0.36s var(--ease) !important;
    pointer-events: auto;
}
.notification.active { transform: none; opacity: 1; }

.toast-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--r-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rule);
    flex-shrink: 0;
    font-size: 12px;
}
.toast-msg {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    word-break: break-word;
}
.toast-kind {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-top: 3px;
}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 1024px) {
    .app-nav a { padding: 0 12px; }
    .app-nav a::after { left: 12px; right: 12px; }
}

@media (max-width: 900px) {
    .app-header-inner { gap: 16px; }
    .app-nav a span { display: none; }
    .app-nav a { padding: 0 13px; }
    .app-nav a::after { left: 13px; right: 13px; }
    .app-nav a i { font-size: 14px; }
}

@media (max-width: 720px) {
    .app-header-inner { height: 58px; padding: 0 16px; gap: 10px; }
    .brand-sub { display: none; }
    .app-user-meta { display: none; }
    .app-user-chip { padding: 3px; border: none; background: transparent; }
    .app-user-chip:hover { background: transparent; }
    #main-content { padding: 22px 16px 64px; }
    .app-footer-inner { padding: 24px 16px; flex-direction: column; align-items: flex-start; gap: 16px; }
    .notification-container { top: 70px; right: 14px; left: 14px; }
    .notification { min-width: 0; max-width: 100%; }
}

@media (max-width: 480px) {
    .brand-text { display: none; }
    .app-nav { margin-left: 0; gap: 0; }
    #main-content { padding: 18px 14px 56px; }
}