/* Paragrafy Cloud – zentrales Theme "§ – Ink & Paper" fuer das Kundenportal
   (Login/Register/Dashboard/Einstellungen). Ersetzt die vorher pro Seite kopierten
   :root-Variablen + Komponentenklassen durch eine gemeinsame Basis.
   Einbindereihenfolge: dieses Stylesheet zuerst, danach ggf. /assets/pg-topbar.css,
   danach die seiten-eigenen <style>-Bloecke (nur noch seiten-spezifisches Layout). */

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-latin-variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-latin-variable.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/jetbrainsmono-latin-variable.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Basis (Ink & Paper, dunkel – das Kundenportal hat keinen Theme-Umschalter) */
    --pg-bg: #0b0a08;
    --pg-card: #16130f;
    --pg-input-bg: #0e0c09;
    --pg-border: rgba(245,241,232,0.14);
    --pg-border-strong: rgba(245,241,232,0.28);
    --pg-text: #f5f1e8;
    --pg-muted: rgba(245,241,232,0.68);
    --pg-muted2: rgba(245,241,232,0.5);

    /* Akzente: Amber (Primaer) & Redline (Zweitakzent/Fehler) – identisch zur Landingpage */
    --pg-amber: #f0a63c;
    --pg-amber-light: #f6c374;
    --pg-amber-dark: #c97f1f;
    --pg-redline: #e04b3f;
    --pg-redline-light: #f0847a;

    /* funktionale Zustaende – bewusst auf die Markenakzente gemappt statt eigener Ampelfarben */
    --pg-success: #34d399;
    --pg-warning: var(--pg-amber);
    --pg-error: var(--pg-redline);

    /* Kompat-Alias fuer bestehendes Markup, das --pg-accent als Hintergrund erwartet
       (vorher ein Indigo-Verlauf, jetzt der flache Amber-Ton – kein Glow-Gradient mehr) */
    --pg-accent: var(--pg-amber);
    --pg-accent-solid: var(--pg-amber);

    --pg-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --pg-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --pg-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

    --pg-radius: 3px;
    --pg-radius-sm: 2px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--pg-bg); color: var(--pg-text); font-family: var(--pg-font-sans); }
a { color: inherit; }
::placeholder { color: var(--pg-muted2); }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; }

/* Sichtbarer Fokusring fuer Tastatur-Navigation (Maus-Klicks bleiben ringfrei) */
:focus-visible { outline: 2px solid var(--pg-amber); outline-offset: 2px; }
.pg-input:focus-visible, .pg-textarea:focus-visible { outline-offset: 0; }

/* Wachsender Unterstrich statt reinem Farbwechsel bei Text-Links (aus dem Landingpage-System) */
.pg-nav-link, .pg-switch a, .pg-upsell a, .pg-step-cta, .pg-action-note a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .25s ease;
}
.pg-nav-link:hover, .pg-switch a:hover, .pg-upsell a:hover, .pg-step-cta:hover, .pg-action-note a:hover,
.pg-nav-link:focus-visible, .pg-switch a:focus-visible, .pg-upsell a:focus-visible, .pg-step-cta:focus-visible, .pg-action-note a:focus-visible {
    background-size: 100% 1.5px;
}

/* Ueberschriften: Fraunces nur fuer den eigentlichen Seitentitel – der Rest bleibt Inter,
   damit das Portal scanbar bleibt statt "Editorial" zu wirken (anderer Kontext als die Landingpage). */
.pg-h1 { font-family: var(--pg-font-serif); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.pg-eyebrow { font-family: var(--pg-font-mono); font-size: 11.5px; font-weight: 700; color: var(--pg-amber); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.pg-lead { font-size: 14px; color: var(--pg-muted); line-height: 1.55; margin: 0 0 26px; }
.pg-lead strong, .pg-card-sub strong { color: var(--pg-text); }

/* Formulare */
.pg-label { display: block; font-family: var(--pg-font-mono); font-size: 11.5px; font-weight: 600; color: var(--pg-muted2); letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 7px; }
.pg-field { margin-bottom: 16px; }
.pg-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-input, .pg-textarea, select.pg-input {
    width: 100%; padding: 12px 14px; background: var(--pg-input-bg); border: 1px solid var(--pg-border-strong);
    border-radius: var(--pg-radius); font-size: 14.5px; font-family: inherit; color: var(--pg-text); outline: none;
}
.pg-input:focus, .pg-textarea:focus { border-color: var(--pg-amber); }
.pg-textarea { resize: vertical; min-height: 90px; }
.pg-optional { color: var(--pg-muted2); font-weight: 400; text-transform: none; font-family: inherit; letter-spacing: 0; }

/* Buttons – flacher "Stempel"-Ton statt Glow-Gradient, dezente Presse statt weichem Hover-Schatten */
.pg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border: none; border-radius: var(--pg-radius);
    background: var(--pg-amber); color: #17130d; font-size: 14px; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: background-color .15s ease, transform .1s ease;
}
.pg-btn:hover { background: var(--pg-amber-light); }
.pg-btn:active { transform: scale(.98); }
.pg-btn:disabled { background: var(--pg-border); color: var(--pg-muted2); cursor: not-allowed; }
.pg-btn-block { width: 100%; }
.pg-btn-inline { width: auto; }
.pg-btn-ghost {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--pg-radius);
    border: 1px solid var(--pg-border-strong); background: transparent; color: var(--pg-text);
    font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.pg-btn-ghost:hover { border-color: var(--pg-amber); color: var(--pg-amber); }
.pg-btn-danger, .pg-btn-danger-outline {
    display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: var(--pg-radius);
    border: 1px solid rgba(224,75,63,0.45); background: rgba(224,75,63,0.1); color: var(--pg-redline-light);
    font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.pg-btn-danger:hover, .pg-btn-danger-outline:hover { background: rgba(224,75,63,0.18); }
.pg-btn-manage {
    padding: 8px 14px; border-radius: var(--pg-radius); background: var(--pg-input-bg); border: 1px solid var(--pg-border);
    color: var(--pg-text); font-size: 13px; font-weight: 600; text-decoration: none;
}
.pg-btn-manage:hover { border-color: var(--pg-border-strong); }
.pg-btn-domain {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--pg-radius);
    background: rgba(240,166,60,0.1); border: 1px solid rgba(240,166,60,0.4); color: var(--pg-amber-light);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.pg-btn-domain:hover { background: rgba(240,166,60,0.18); border-color: var(--pg-amber); }
.pg-btn-domain svg { width: 13px; height: 13px; }
.pg-btn-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--pg-border); border-radius: var(--pg-radius-sm); background: transparent; color: var(--pg-muted2); cursor: pointer;
}
.pg-btn-icon .icon { width: 13px; height: 13px; }
.pg-btn-icon:hover { color: var(--pg-text); border-color: var(--pg-border-strong); }
.pg-btn-icon-protected { color: var(--pg-success); border-color: rgba(52,211,153,0.3); }
.pg-btn-icon-protected:hover { color: var(--pg-success); border-color: rgba(52,211,153,0.5); }
@keyframes pg-spin { to { transform: rotate(360deg); } }
.pg-btn-icon .icon.pg-spin { animation: pg-spin .7s linear infinite; }

/* Karten: scharfkantiger, dokumentenartiger statt weicher SaaS-Card-Look */
.pg-card { background: var(--pg-card); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); padding: 28px 30px; margin-bottom: 20px; }
.pg-card-title { font-size: 15px; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.pg-card-sub { font-size: 13px; color: var(--pg-muted); margin: 0 0 18px; line-height: 1.5; }
.pg-card-danger, .pg-danger { border-color: rgba(224,75,63,0.3); }
.pg-card-danger .pg-card-title, .pg-danger .pg-card-title { color: var(--pg-error); }

/* Meldungen */
.pg-error, .pg-msg-error { background: rgba(224,75,63,0.1); border: 1px solid rgba(224,75,63,0.35); color: var(--pg-redline-light); }
.pg-success-msg, .pg-msg-success { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); color: #6ee7b7; }
.pg-msg-warning { background: rgba(240,166,60,0.08); border: 1px solid rgba(240,166,60,0.3); color: var(--pg-amber-light); }
.pg-error, .pg-success-msg { font-size: 13px; padding: 11px 14px; border-radius: var(--pg-radius); margin-bottom: 20px; }
.pg-msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--pg-radius); font-size: 13.5px; margin-bottom: 24px; line-height: 1.5; }
.pg-msg svg { flex-shrink: 0; margin-top: 1px; }
.pg-msg a, .pg-error a, .pg-success-msg a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Badges: eckiges Rechteck mit duennem Rand statt gefuellter Pille – passend zum Dokumenten-Look */
.pg-badge {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--pg-font-mono); font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: var(--pg-radius-sm); border: 1px solid currentColor; letter-spacing: 0.02em;
}
.pg-badge-active { color: var(--pg-success); background: rgba(52,211,153,0.08); }
.pg-badge-pending { color: var(--pg-amber); background: rgba(240,166,60,0.08); }
.pg-badge-suspended { color: var(--pg-error); background: rgba(224,75,63,0.08); }
.pg-status-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--pg-muted2); max-width: 420px; line-height: 1.4; }

/* Tabellen: der Kundenbereich selbst nutzt fuer Listen div-basierte .pg-instance-row-Muster, der
   Admin-Bereich (Accounts/Projekte/Jobs/Audit-Log) braucht aber echte <table>-Layouts fuer
   dichte, sortierbare Datenlisten - dieselben Tokens (Border/Muted/Radius) wie der Rest des
   Systems, keine neuen Farben. */
.pg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pg-table th, .pg-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--pg-border); }
.pg-table th { font-family: var(--pg-font-mono); font-size: 11px; font-weight: 600; color: var(--pg-muted2); text-transform: uppercase; letter-spacing: 0.03em; }
.pg-table tbody tr:last-child td { border-bottom: none; }
.pg-table tbody tr:hover { background: var(--pg-input-bg); }
/* Generische Muted-Klasse (nicht nur innerhalb .pg-table): mehrere Admin-Views nutzen sie fuer
   Hinweistexte ausserhalb von Tabellenzellen (z.B. Formular-Hilfetexte, Leer-Zustaende) - vorher
   nur innerhalb .pg-table definiert, dort rendern diese Texte in normaler statt gedaempfter
   Schrift (Greptile-Review PR #5). */
.muted { color: var(--pg-muted2); }

/* Links */
.pg-back { text-align: center; margin-top: 24px; }
.pg-switch { text-align: center; margin-top: 22px; font-size: 13px; color: var(--pg-muted2); }
.pg-switch a, .pg-upsell a, .pg-step-cta, .pg-action-note a { color: var(--pg-amber); font-weight: 600; text-decoration: none; }
.pg-action-link { font-size: 13px; font-weight: 600; color: var(--pg-muted2); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.pg-action-link:hover { color: var(--pg-text); }
.pg-action-link.danger:hover { color: var(--pg-error); }
.pg-action-note { font-size: 12.5px; color: var(--pg-muted2); }
.pg-upsell { margin-top: 20px; font-size: 13.5px; color: var(--pg-muted); }

/* Plan-/Preiskarten (Register-Wizard + Plan wechseln teilen sich dieses Muster) */
.pg-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pg-plan-card { position: relative; background: var(--pg-card); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); padding: 32px 30px; display: flex; flex-direction: column; }
.pg-plan-card.selected, .pg-plan-card.current { border-color: var(--pg-amber); }
.pg-plan-badge { position: absolute; top: -11px; left: 26px; background: var(--pg-amber); color: #17130d; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--pg-radius-sm); }
.pg-plan-eyebrow { font-family: var(--pg-font-mono); font-size: 11px; font-weight: 600; color: var(--pg-muted2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.pg-plan-name { font-family: var(--pg-font-serif); font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.pg-plan-tagline { font-size: 13.5px; color: var(--pg-muted); line-height: 1.5; margin-bottom: 18px; min-height: 40px; }
.pg-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; }
.pg-plan-price .amount { font-family: var(--pg-font-mono); font-size: 26px; font-weight: 700; }
.pg-plan-price .unit { font-size: 13px; color: var(--pg-muted); }
.pg-plan-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; }
.pg-plan-features div { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--pg-text); }
.pg-plan-features span.chk { color: var(--pg-success); font-weight: 700; flex-shrink: 0; }
.pg-plan-select { width: 100%; padding: 12px; border-radius: var(--pg-radius); background: var(--pg-input-bg); border: 1px solid var(--pg-border-strong); color: var(--pg-text); font-size: 14px; font-weight: 700; cursor: pointer; }
.pg-plan-card.selected .pg-plan-select { background: var(--pg-amber); border-color: var(--pg-amber); color: #17130d; }
.pg-plan-select:disabled { background: transparent; border-color: var(--pg-border); color: var(--pg-muted2); cursor: not-allowed; }
.pg-plan-current-tag { width: 100%; text-align: center; padding: 12px; border-radius: var(--pg-radius); background: var(--pg-input-bg); border: 1px solid var(--pg-border); color: var(--pg-muted); font-size: 13.5px; font-weight: 600; }
.pg-plan-note { font-size: 12px; color: var(--pg-muted2); margin-top: 10px; text-align: center; }

@media (max-width: 720px) {
    .pg-plan-grid { grid-template-columns: 1fr; }
    .pg-field-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Dashboard-Shell: Zweispalten-Layout (Hauptbereich + schmale Seitenspalte)
   fuer die informationsdichten Dashboard-Seiten (siehe src/views/partials/
   dashboard-shell-start.php / dashboard-shell-end.php / dashboard-sidebar.php).
   Formular-/Wizard-Seiten bleiben bewusst bei .pg-main (einspaltig), keine
   Kollision, da jede Seite nur eine der beiden Wrapper-Klassen nutzt.
   ========================================================================== */
.pg-shell { max-width: 1180px; margin: 0 auto; padding: 48px 24px 80px; display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 32px; align-items: start; }
.pg-shell-main { min-width: 0; }
.pg-shell-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }

.pg-plan-chip { background: var(--pg-amber); color: #17130d; font-family: var(--pg-font-mono); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--pg-radius-sm); text-transform: uppercase; letter-spacing: 0.03em; }

.pg-side-card { background: var(--pg-card); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); padding: 20px 22px; }
.pg-side-card-title { font-family: var(--pg-font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pg-muted2); margin: 0 0 14px; }

.pg-side-usage { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pg-side-usage-bar { flex: 1; min-width: 80px; height: 5px; border-radius: 1px; background: var(--pg-input-bg); overflow: hidden; }
.pg-side-usage-fill { height: 100%; background: var(--pg-amber); }
.pg-side-usage-label { font-size: 12px; color: var(--pg-muted); white-space: nowrap; }

.pg-side-events { display: flex; flex-direction: column; }
.pg-side-event { padding: 9px 0; border-bottom: 1px solid var(--pg-border); }
.pg-side-event:last-child { border-bottom: none; padding-bottom: 0; }
.pg-side-event-desc { font-size: 12.5px; line-height: 1.4; color: var(--pg-text); }
.pg-side-event-time { font-size: 11px; color: var(--pg-muted2); font-family: var(--pg-font-mono); margin-top: 2px; }
.pg-side-view-all { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 600; }
.pg-side-empty { font-size: 12.5px; color: var(--pg-muted2); margin: 0; }
.pg-side-summary-count { font-size: 13px; color: var(--pg-muted); margin: 0; }

@media (max-width: 900px) {
    .pg-shell { grid-template-columns: 1fr; }
    .pg-shell-side { position: static; order: 1; }
}

/* Sanftes Einblenden beim Laden statt hartem Sprung - Opacity/TranslateY statt Schatten/Glow,
   bleibt beim flachen "kein Glow"-Look. prefers-reduced-motion respektieren. */
@keyframes pg-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pg-enter { animation: pg-fade-up .35s ease both; }
.pg-enter-delay-1 { animation-delay: .06s; }
.pg-enter-delay-2 { animation-delay: .12s; }
.pg-enter-delay-3 { animation-delay: .18s; }

.pg-hover-row { transition: background-color .15s ease; }
.pg-hover-row:hover { background: rgba(245,241,232,0.03); }

@media (prefers-reduced-motion: reduce) {
    .pg-enter, .pg-enter-delay-1, .pg-enter-delay-2, .pg-enter-delay-3 { animation: none; }
}

/* ==========================================================================
   Icon-Mikrointeraktionen - nur bei Hover/Klick/Statuswechsel, kein Idle-Loop,
   damit es zum zurueckhaltenden "Ink & Paper"-Look passt statt verspielt zu wirken.
   ========================================================================== */
.icon-arrow-right { transition: transform .15s ease; }
.pg-btn:hover .icon-arrow-right, a:hover .icon-arrow-right { transform: translateX(3px); }

.icon-domain, .icon-external { transition: transform .15s ease; }
.pg-btn-domain:hover .icon-domain, .pg-instance-domain:hover .icon-external, .pg-nav-link:hover .icon-external { transform: translateX(2px); }

.icon-plus { transition: transform .15s ease; }
.pg-btn:hover .icon-plus { transform: scale(1.15); }

.pg-btn-icon .icon { transition: transform .12s ease; }
.pg-btn-icon:active .icon { transform: scale(.82); }

.icon-check-stroke { stroke-dasharray: 22; stroke-dashoffset: 22; animation: pg-draw .3s ease .05s forwards; }
@keyframes pg-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .icon-check-stroke { stroke-dashoffset: 0; animation: none; }
}

.pg-copy-btn.pg-copied .icon { animation: pg-copy-pop .3s ease; }
@keyframes pg-copy-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }