/* ==========================================================================
   LeTTo-Design für die Seiten des Setup-Services (Präfix lt-)
   Wird über ${ui.designHead()} eingebunden, gleiche Optik wie der Plugin-Tester.
   ========================================================================== */
:root {
    --lt-primary:      #2563eb;
    --lt-primary-dark: #1d4ed8;
    --lt-bg:           #f3f5f9;
    --lt-card:         #ffffff;
    --lt-text:         #1f2937;
    --lt-muted:        #6b7280;
    --lt-border:       #e5e7eb;
    --lt-input-border: #d1d5db;
    --lt-ok:           #15803d;
    --lt-error:        #b91c1c;
}

body.lt-page { margin:0; background:var(--lt-bg); color:var(--lt-text); font-family:"Raleway", sans-serif; }
body.lt-page h1, body.lt-page h2, body.lt-page h3 { font-family:"Raleway", sans-serif; }
/* style.css setzt label auf block - auf den neuen Seiten zurücksetzen */
body.lt-page label { margin-top:0; display:inline; }

/* ---------- Kopfzeile ---------- */
.lt-header {
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding:8px 16px; background:var(--lt-card);
    border-bottom:1px solid var(--lt-border); box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.lt-brand { display:flex; align-items:center; gap:12px; font-size:1.35rem; font-weight:600; }
.lt-brand img { height:36px; }
.lt-header-right { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lt-user { color:var(--lt-muted); font-size:.95rem; }

/* ---------- Menüleiste in der Kopfzeile (Hauptseite) ---------- */
.lt-menubar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:1 1 auto; margin-left:12px; }
.lt-menubar .lt-btn { margin:0; }
.lt-menu { position:relative; }
.lt-menu-trigger .fa-caret-down { color:var(--lt-muted); margin-left:2px; }
.lt-menu-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 2px #dcfce7; }
.lt-menu-items {
    display:none; position:absolute; top:100%; left:0; z-index:200; min-width:320px; max-width:420px;
    padding:6px; margin-top:4px; background:var(--lt-card); border:1px solid var(--lt-border); border-radius:10px;
    box-shadow:0 10px 30px rgba(15,23,42,.15);
}
/* unsichtbare Brücke, damit das Menü beim Wechsel vom Button in die Liste offen bleibt */
.lt-menu-items::before { content:""; position:absolute; left:0; right:0; top:-8px; height:8px; }
.lt-menu:hover .lt-menu-items, .lt-menu:focus-within .lt-menu-items { display:block; }
.lt-menu:hover .lt-menu-trigger, .lt-menu:focus-within .lt-menu-trigger { background:#eff6ff; border-color:#bfdbfe; }
.lt-menu-item {
    display:flex; align-items:flex-start; gap:10px; width:100%; padding:8px 10px; margin:0;
    background:none; border:0; border-radius:6px; text-align:left; cursor:pointer;
    font-family:inherit; color:var(--lt-text); text-decoration:none;
}
.lt-menu-item:hover, .lt-menu-item:focus { background:#eff6ff; outline:none; color:var(--lt-text); text-decoration:none; }
.lt-menu-item > .fa { width:18px; text-align:center; margin-top:2px; color:var(--lt-primary); }
.lt-menu-item b { display:block; font-size:.88rem; font-weight:600; }
.lt-menu-item small { display:block; font-size:.76rem; color:var(--lt-muted); line-height:1.35; margin-top:1px; }
.lt-menu-item-highlight { background:#f0fdf4; }
.lt-menu-item-highlight > .fa, .lt-menu-item-highlight b { color:#15803d; }

.lt-menu-right .lt-menu-items { left:auto; right:0; min-width:240px; }
.lt-menu-section { padding:8px 10px; border-bottom:1px solid var(--lt-border); margin-bottom:4px; }
.lt-menu-section .lt-lang { width:100%; }
.lt-menu-section .lt-lang select { margin-left:auto; }

/* schmale Fenster: Menüleiste nur mit Icons (Text bleibt als Tooltip/Menütext erhalten) */
@media (max-width: 1150px) {
    .lt-menubar > .lt-btn > span, .lt-menu-trigger > span:not(.lt-menu-dot) { display:none; }
    .lt-menubar { margin-left:8px; }
}

/* ---------- Tabs ---------- */
.lt-tabs { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 8px; border-bottom:1px solid var(--lt-border); padding:0 4px; }
.lt-main .lt-tabs button.lt-tab {
    display:inline-flex; align-items:center; gap:6px; margin:0 0 -1px; padding:10px 14px;
    background:none; border:0; border-bottom:3px solid transparent; border-radius:0;
    font-size:.92rem; font-weight:500; color:var(--lt-muted); cursor:pointer;
}
.lt-main .lt-tabs button.lt-tab:hover { background:none; color:var(--lt-text); }
.lt-main .lt-tabs button.lt-tab.active { color:var(--lt-primary); border-bottom-color:var(--lt-primary); font-weight:600; }
.lt-tab-count {
    font-size:.72rem; font-weight:600; padding:1px 7px; border-radius:999px; background:#e5e7eb; color:var(--lt-text);
}
.lt-tab.active .lt-tab-count { background:#dbeafe; color:#1e40af; }
.lt-service-status { margin-bottom:10px; }

/* ---------- Sprachauswahl ---------- */
.lt-lang { display:inline-flex; align-items:center; gap:6px; color:var(--lt-muted); font-size:.9rem; }
.lt-lang select {
    font-family:inherit; font-size:.9rem; padding:4px 8px; cursor:pointer; color:var(--lt-text);
    border:1px solid var(--lt-input-border); border-radius:6px; background:#fff;
}

/* ---------- Inhalt ---------- */
.lt-main { padding:8px; }
.lt-card {
    background:var(--lt-card); border:1px solid var(--lt-border); border-radius:10px;
    box-shadow:0 1px 3px rgba(15,23,42,.05); margin-bottom:8px; padding:12px 16px;
}
.lt-card-title {
    font-size:1.05rem; font-weight:600; margin:0 0 10px;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.lt-card-title .fa { color:var(--lt-primary); }
.lt-muted { color:var(--lt-muted); }
.lt-badge {
    font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:999px;
    background:#e0e7ff; color:#3730a3; letter-spacing:.03em;
}

/* Schlüssel/Wert-Kacheln */
.lt-kv-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px 16px; }
.lt-kv { display:flex; flex-direction:column; gap:2px; padding:6px 0; border-bottom:1px solid var(--lt-border); min-width:0; }
.lt-kv-label { font-size:.75rem; font-weight:600; color:var(--lt-muted); text-transform:uppercase; letter-spacing:.03em; }
.lt-kv-value { font-size:.92rem; word-break:break-word; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Werkzeugleiste */
.lt-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.lt-toolbar + .lt-toolbar { margin-top:10px; padding-top:10px; border-top:1px solid var(--lt-border); }

/* ---------- Buttons ---------- */
.lt-btn, .lt-main button:not(.hiddenbutton) {
    display:inline-flex; align-items:center; gap:6px; padding:6px 12px; margin:2px 0;
    font-family:inherit; font-size:.85rem; font-weight:600; line-height:1.2; border-radius:6px;
    border:1px solid var(--lt-input-border); background:#fff; color:var(--lt-text);
    cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s;
}
.lt-btn:hover, .lt-main button:not(.hiddenbutton):hover { background:#f3f4f6; text-decoration:none; color:var(--lt-text); }
.lt-btn-primary, .lt-main button.lt-btn-primary { background:var(--lt-primary); border-color:var(--lt-primary); color:#fff; }
.lt-btn-primary:hover, .lt-main button.lt-btn-primary:hover { background:var(--lt-primary-dark); color:#fff; }
.lt-btn-success, .lt-main button.lt-btn-success { background:#16a34a; border-color:#16a34a; color:#fff; }
.lt-btn-success:hover, .lt-main button.lt-btn-success:hover { background:#15803d; color:#fff; }
.lt-btn-danger, .lt-main button.lt-btn-danger { color:var(--lt-error); border-color:#fecaca; }
.lt-btn-danger:hover, .lt-main button.lt-btn-danger:hover { background:#fef2f2; color:var(--lt-error); }
.lt-main table button:not(.hiddenbutton) { padding:3px 8px; font-size:.78rem; font-weight:500; }

/* ---------- Formulare ---------- */
.lt-brand-link { display:flex; align-items:center; }
.lt-main input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),
.lt-main select, .lt-main textarea {
    font-family:inherit; font-size:.9rem; padding:6px 8px; box-sizing:border-box; max-width:100%;
    border:1px solid var(--lt-input-border); border-radius:6px; background:#fff; color:var(--lt-text);
    outline:none; transition:border-color .15s, box-shadow .15s;
}
.lt-main input:focus, .lt-main select:focus, .lt-main textarea:focus { border-color:var(--lt-primary); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.lt-main input[readonly], .lt-main textarea[readonly] { background:#f9fafb; color:var(--lt-muted); }
.lt-main input[type=checkbox], .lt-main input[type=radio] { width:16px; height:16px; accent-color:var(--lt-primary); vertical-align:middle; }
.lt-mono, .lt-main textarea.lt-mono { font-family:Consolas, "Courier New", monospace; font-size:.85rem; }
.lt-w-full, .lt-main input.lt-w-full, .lt-main textarea.lt-w-full, .lt-main select.lt-w-full { width:100%; }
/* Formular als zweispaltige Tabelle: Beschriftung | Eingabe */
table.lt-form { border-collapse:collapse; width:100%; }
table.lt-form td { padding:6px 8px; vertical-align:middle; border-bottom:1px solid var(--lt-border); }
table.lt-form td:first-child { width:1%; white-space:nowrap; font-weight:600; color:var(--lt-text); }
table.lt-form tr.lt-separator td { border-bottom:2px solid var(--lt-input-border); padding:2px; }
/* Ausgabe von Befehlen, Logs usw. */
pre.lt-pre {
    /* heller Hintergrund: der Java-Code färbt Ausgaben teils selbst (schwarz, blau, grün ...) */
    background:#f8fafc; color:var(--lt-text); border:1px solid var(--lt-border); border-radius:8px; padding:12px 14px; margin:0;
    font-family:Consolas, "Courier New", monospace; font-size:.82rem; line-height:1.45;
    overflow:auto; max-height:70vh; white-space:pre-wrap; word-break:break-word;
}
.lt-section-title { font-size:.95rem; font-weight:600; margin:16px 0 8px; color:var(--lt-text); }
.lt-card > .lt-section-title:first-child { margin-top:0; }

/* Passwortfeld mit Auge-Button (siehe js/letto-design.js) */
.lt-password { display:inline-flex; align-items:center; gap:4px; max-width:100%; }
.lt-main button.lt-password-toggle { padding:5px 9px; margin:0; }
/* Login-Seite: Feld mit Symbol links (.lt-input-icon), der Auge-Button sitzt rechts im Feld */
.lt-input-icon-password input { padding-right:44px; }
.lt-input-icon .lt-password-toggle {
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    padding:6px 8px; margin:0; border:none; border-radius:6px; background:none; color:var(--lt-muted); cursor:pointer;
}
.lt-input-icon .lt-password-toggle:hover, .lt-input-icon .lt-password-toggle:focus { color:var(--lt-text); background:#f3f4f6; }
.lt-input-icon .lt-password-toggle .fa { position:static; transform:none; color:inherit; }

/* ---------- Meldungen ---------- */
.lt-alert { display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:8px; margin-bottom:8px; font-size:.95rem; }
.lt-alert .fa { margin-top:3px; }
.lt-alert ul { margin:4px 0 0; padding-left:20px; }
.lt-alert-error { background:#fef2f2; color:var(--lt-error); border:1px solid #fecaca; }
.lt-alert-ok    { background:#f0fdf4; color:var(--lt-ok); border:1px solid #bbf7d0; }
.lt-alert-info  { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.lt-alert-warn  { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.lt-alert:empty { display:none; }

/* ---------- Statusleiste (siehe js/letto-design.js) ---------- */
.lt-statusbar {
    position:fixed; left:0; right:0; bottom:0; z-index:100;
    display:flex; flex-direction:column; gap:4px; padding:6px 16px;
    max-height:30vh; overflow-y:auto;
    background:var(--lt-card); border-top:1px solid var(--lt-border); box-shadow:0 -1px 4px rgba(15,23,42,.08);
}
.lt-statusbar .lt-alert { margin:0; padding:6px 12px; font-size:.9rem; border-radius:6px; }

/* ---------- Letzte Aktion (form[data-lt-remember], siehe js/letto-design.js) ---------- */
table.lt-table tr.lt-last-action > td, table.lt-table tr.lt-last-action:hover > td { background:#fef9c3; }
table.lt-table tr.lt-last-action > td:first-child { box-shadow:inset 4px 0 0 #f59e0b; }
.lt-main button.lt-last-action-btn { outline:2px solid #f59e0b; outline-offset:1px; animation:lt-pulse 1.2s ease-out 2; }
@keyframes lt-pulse { 0% { box-shadow:0 0 0 0 rgba(245,158,11,.6); } 100% { box-shadow:0 0 0 10px rgba(245,158,11,0); } }

/* ---------- Gekürzte Texte mit Tooltip (fragments/layout :: truncate, js/letto-design.js) ---------- */
.lt-truncate { white-space:nowrap; cursor:help; border-bottom:1px dotted var(--lt-muted); }
.lt-tooltip {
    position:fixed; z-index:300; display:none; max-width:min(70vw, 640px);
    background:#1f2937; color:#fff; padding:6px 10px; border-radius:6px; box-shadow:0 4px 12px rgba(15,23,42,.25);
    font-size:.8rem; line-height:1.4; white-space:pre-wrap; word-break:break-all; pointer-events:none;
}

/* ---------- Tabellen ---------- */
.lt-table-wrap { overflow-x:auto; }
table.lt-table { border-collapse:collapse; width:100%; font-size:.88rem; }
table.lt-table td, table.lt-table th { padding:6px 8px; text-align:left; vertical-align:top; border-bottom:1px solid var(--lt-border); }
/* Zeile unter dem Mauszeiger deutlich hervorheben: hellblauer Hintergrund + blauer Balken links */
table.lt-table tr:hover > td { background:#dbeafe; }
table.lt-table tr:hover > td:first-child { box-shadow:inset 3px 0 0 var(--lt-primary); }
table.lt-table td:first-child { font-weight:600; white-space:nowrap; }
table.lt-table tr.section-header > td {
    background:#eef2ff; color:#3730a3; font-weight:700; padding:8px;
    border-top:2px solid #c7d2fe; border-bottom:1px solid #c7d2fe;
}

/* ---------- Login- und Fehlerseite (zentrierte Karte) ---------- */
body.lt-center {
    display:flex; align-items:center; justify-content:center; min-height:100vh;
    padding:16px; box-sizing:border-box;
    background:linear-gradient(135deg, #e0e7ff 0%, #f0f9ff 50%, #ecfeff 100%);
}
.lt-login-card {
    width:100%; max-width:400px; background:#fff; border-radius:12px;
    box-shadow:0 10px 30px rgba(15,23,42,.12); padding:32px 28px 28px; box-sizing:border-box;
}
.lt-login-header { text-align:center; margin-bottom:24px; }
.lt-login-header img { max-height:64px; max-width:100%; }
.lt-login-header h1 { font-size:1.5rem; font-weight:600; margin:12px 0 4px; }
.lt-login-header p { margin:0; color:var(--lt-muted); font-size:.9rem; }
.lt-field { margin-bottom:16px; }
body.lt-page .lt-field label { display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; }
.lt-input-icon { position:relative; }
.lt-input-icon .fa { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--lt-muted); }
.lt-input-icon input {
    width:100%; box-sizing:border-box; padding:10px 12px 10px 36px; font-size:1rem; font-family:inherit;
    border:1px solid var(--lt-input-border); border-radius:8px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.lt-input-icon input:focus { border-color:var(--lt-primary); box-shadow:0 0 0 3px rgba(37,99,235,.2); }
.lt-login-button {
    width:100%; margin-top:8px; padding:11px; font-size:1rem; font-weight:600; font-family:inherit;
    color:#fff; background:var(--lt-primary); border:none; border-radius:8px; cursor:pointer; transition:background .15s;
}
.lt-login-button:hover { background:var(--lt-primary-dark); }
.lt-login-button:disabled { opacity:.7; cursor:wait; }
.lt-login-footer { display:flex; justify-content:center; margin-top:20px; }

/* ---------- Fehlerseite ---------- */
.lt-error-card { max-width:480px; text-align:center; }
.lt-error-icon {
    display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px;
    border-radius:50%; background:#fef2f2; color:#dc2626; font-size:32px;
}
.lt-error-code { font-size:3rem; font-weight:700; line-height:1; margin:16px 0 4px; letter-spacing:.05em; }
.lt-error-status { color:var(--lt-muted); font-size:.9rem; margin-bottom:16px; }
.lt-error-card h1 { font-size:1.4rem; font-weight:600; margin:0 0 8px; }
.lt-error-card p { margin:0 0 20px; color:var(--lt-muted); line-height:1.5; }
.lt-error-card .lt-alert { text-align:left; }
.lt-error-details {
    text-align:left; background:#f9fafb; border:1px solid var(--lt-border); border-radius:8px;
    padding:10px 14px; font-size:.85rem; margin-bottom:24px;
}
.lt-error-details div { display:flex; gap:8px; padding:2px 0; }
.lt-error-details .label { color:var(--lt-muted); min-width:80px; }
.lt-error-details .value { word-break:break-all; font-family:Consolas, "Courier New", monospace; }
.lt-error-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.lt-error-actions .lt-btn { padding:9px 16px; font-size:.95rem; }

@media (max-width: 700px) {
    .lt-header { padding-left:16px; padding-right:16px; }
    .lt-kv-grid { grid-template-columns:1fr; }
    /* Formulare: Beschriftung über der Eingabe, Eingaben in voller Breite - sonst geben size="40" & Co. die
       Mindestbreite der Tabelle vor und die Seite scrollt seitlich */
    table.lt-form, table.lt-form > tbody, table.lt-form > tbody > tr, table.lt-form > tbody > tr > td { display:block; width:auto; }
    table.lt-form > tbody > tr > td:first-child { width:auto; white-space:normal; border-bottom:none; padding-bottom:0; }
    table.lt-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),
    table.lt-form select, table.lt-form textarea { width:100%; }
    .lt-password { display:flex; width:100%; }
    .lt-password input { flex:1 1 auto; min-width:0; }
    /* Kopfzeile der Unterseiten: kleineres Logo, ohne "Setup >", langer Titel bricht um statt die Seite zu verbreitern */
    .lt-brand { flex:1 1 100%; min-width:0; gap:8px; font-size:1.1rem; }
    .lt-brand img { height:28px; }
    .lt-brand > .lt-muted { display:none; }
    .lt-brand > span { min-width:0; overflow-wrap:anywhere; }
}