mailwolt/resources/css/app.css

@import 'tailwindcss';
@import '../js/plugins/GlassToastra/style.css';

@import "../fonts/BaiJamjuree/font.css";
@import "../fonts/Space/font.css";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

    --font-bai: 'Bai Jamjuree';
    --font-space: 'Space Age';

    --color-glass-bg: rgba(17, 24, 39, 0.55);
    --color-glass-border: rgba(255, 255, 255, 0.08);
    --color-glass-light: rgba(31, 41, 55, 0.4);

    --color-accent: #06b6d4;      /* cyan-500 */
    --color-accent-600: #0891b2;  /* cyan-600 */
    --color-accent-700: #0e7490;  /* cyan-700 */
    --color-ring: rgba(34, 197, 94, .35); /* ein Hauch Grün im Focus-Glow */
    --sidebar-collapsed: 5.2rem;   /* ~83px */
    --sidebar-expanded: 16rem;     /* 256px */
    /* Optional: max-width Tokens */
    --max-w-sb-col: 5.2rem;
    --max-w-sb-exp: 16rem;

}

.safe-pads {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
/* Falls nötig: dvh-Fallback */
@supports (height: 100dvh) {
    .min-h-dvh { min-height: 100dvh; }
    .h-dvh     { height: 100dvh; }
}

@utility w-sb-col {
    width: var(--sidebar-collapsed);
}
@utility w-sb-exp {
    width: var(--sidebar-expanded);
}

/* Max-width utilities, if du sie brauchst */
@utility max-w-sb-col {
    max-width: var(--max-w-sb-col);
}
@utility max-w-sb-exp {
    max-width: var(--max-w-sb-exp);
}


@layer components {
    /* Hauptkarte – entspricht dem helleren Glasslook deiner Server-Box */
    .mw-card {
        @apply rounded-2xl p-5 md:p-6
        border border-white/10
        bg-white/5 backdrop-blur-xl
        shadow-[0_20px_60px_-20px_rgba(0,0,0,.6),inset_0_1px_0_rgba(255,255,255,.06)];
        /* feiner Verlauf wie oben */
        background-image: radial-gradient(120% 120% at 100% 0%, rgba(56, 189, 248, .08) 0%, transparent 60%),
        radial-gradient(140% 140% at 0% 120%, rgba(16, 185, 129, .06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
    }

    /* Subkarte (kleinere Panels in einer Karte) */
    .mw-subcard {
        @apply rounded-xl p-4
        border border-white/10
        bg-white/5 backdrop-blur-xl;
    }

    .mw-title {
        @apply text-white/90 font-semibold tracking-wide;
    }

    .mw-subtle {
        @apply text-white/60 text-sm;
    }

    .mw-divider {
        @apply border-t border-white/10 my-4;
    }
}

/* ============ BOOT-STATE: keine Sprünge ============ */

/* Während booting KEINE Transitionen */
html[data-ui="booting"] * {
    transition: none !important;
}

/* Labels, Carets, Submenüs in der Sidebar während booting NICHT zeigen */
html[data-ui="booting"] #main,
html[data-ui="booting"] #sidebar .sidebar-label,
html[data-ui="booting"] #sidebar .sidebar-caret,
html[data-ui="booting"] #sidebar [data-submenu] {
    display: none !important;
}

/* Mobil: Sidebar standardmäßig offcanvas (wegschieben) */
@media (max-width: 639.98px) {
    #sidebar {
        transform: translateX(-100%);
    }
}

/* Tablet: Sidebar standardmäßig RAIL (schmal) */
@media (min-width: 640px) and (max-width: 1023.98px) {
    #sidebar {
        --sbw: 5.2rem;
        width: var(--sbw);
        max-width: var(--sbw);
    }

    /* Nur im RAIL-Zustand ausblenden – falls du per JS .u-collapsed setzt */
    #sidebar.u-collapsed .sidebar-label,
    #sidebar.u-collapsed .sidebar-caret,
    #sidebar.u-collapsed [data-submenu] {
        display: none !important;
    }
}

/* Desktop: Sidebar standardmäßig EXPANDED (breit) */
@media (min-width: 1024px) {
    #sidebar {
        --sb-w: 16rem;
        width: var(--sb-w);
        max-width: var(--sb-w);
    }
}

/* ======== READY-STATE: Transitionen wieder an ========= */

/* Wenn JS fertig ist -> sanfte Transitions zulassen (ab jetzt darf’s animieren) */
html[data-ui="ready"] #sidebar {
    transition: width .2s ease, max-width .2s ease, transform .2s ease;
}

/* Rail-Zustand per Klasse (dein JS schaltet diese Klassen weiter) */
#sidebar.u-collapsed {
    --sb-w: 5.2rem;
    width: var(--sb-w);
    max-width: var(--sb-w);
}

#sidebar.ut-expanded {
    --sb-w: 16rem;
    width: var(--sb-w);
    max-width: var(--sb-w);
}

/* Rail: Labels/Carets/Submenüs IMMER ausblenden */
#sidebar.u-collapsed .sidebar-label,
#sidebar.u-collapsed .sidebar-caret,
#sidebar.u-collapsed [data-submenu] {
    display: none !important;
}

/* Mobile Offcanvas: Klassen aus deinem JS */
#sidebar.translate-x-0 {
    transform: translateX(0);
}

/* Sicherheitsnetz: [x-cloak] bleibt unsichtbar bis Alpine lädt */
[x-cloak] {
    display: none !important;
}

/*html { background-color: #132835; }*/
html { background-color: #0a0f18; }
body { background: transparent; }

/* EIN Hintergrund für alles – fix hinter dem Inhalt */
.app-backdrop:before{
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;                 /* unter dem Inhalt, aber über html */
    pointer-events: none;

    /* iOS stabil: deckt große/kleine Viewports ab */
    height: 100lvh;          /* large viewport height */
    min-height: 100svh;      /* safe viewport height Fallback */

    /* Dein gesamter Verlauf hier – durchgehend! */
    background-image:
        radial-gradient(120vmax 70vmax at 80% 40%, rgba(34,211,238,.28), transparent 45%),
        radial-gradient(110vmax 70vmax at 20% 60%, rgba(34,211,238,.28), transparent 45%),
        /*radial-gradient(110vmax 80vmax at 20% 62%, rgba(16,185,129,.18), transparent 45%),*/
        /*linear-gradient(180deg, rgba(8,47,73,.18), rgba(2,6,23,.28)), !* Farbbelag *!*/
        linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);

    /*radial-gradient(120vmax 70vmax at 80% -10%, rgba(34,211,238,.28), transparent 62%),*/
        /*radial-gradient(110vmax 80vmax at 10% 112%, rgba(16,185,129,.18), transparent 70%),*/
        /*linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
/*radial-gradient(1600px 900px at 85% -15%, rgba(34,211,238,.28), transparent 62%),*/
/*        radial-gradient(1200px 800px at 10% 112%, rgba(16,185,129,.18), transparent 70%),*/
/*        linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
}

/* Inhalt bewusst über die Backdrop heben */
#main{ position: relative; z-index: 1; }

/* (Optional) Safe-Area-Padding für iPhone-Notch */
.safe-pads{
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* === App Backdrop (türkis/glass) === */
/*.app-backdrop {*/
/*    position: fixed;*/
/*    inset: 0;*/
/*    z-index: -10;*/
/*    pointer-events: none;*/
/*    height: 100vh;*/
/*    background: radial-gradient(1600px 900px at 85% -15%, rgba(34, 211, 238, .28), transparent 62%),*/
/*    radial-gradient(1200px 800px at 10% 112%, rgba(16, 185, 129, .18), transparent 70%),*/
/*    linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
/*}*/

.primary-btn {
    @apply relative inline-flex items-center justify-center rounded-xl
    px-6 py-2.5 text-sm font-medium text-white transition-all
    bg-gradient-to-r from-[rgba(34,211,238,0.35)] to-[rgba(16,185,129,0.35)]
    border border-white/10 shadow-[0_0_25px_rgba(16,185,129,0.08)]
    hover:from-[rgba(34,211,238,0.55)] hover:to-[rgba(16,185,129,0.55)]
    hover:shadow-[0_0_20px_rgba(34,211,238,0.25)]
    focus:outline-none focus:ring-2 focus:ring-[rgba(34,211,238,0.4)]
    focus:ring-offset-0;
}

/* === Layout Breite der Sidebar per Variable steuern === */
:root {
    --sb-w: 16rem;
}

/* Basiswert (expanded) */

/* Header + Main bekommen die gleiche linke Einrückung */
.header-shell,
.main-shell {
    padding-left: var(--sb-w);
    transition: padding-left .2s ease;
}

/* ---------- Desktop (>=1024) ---------- */
@media (min-width: 1024px) {
    /* default expanded */
    .main-shell {
        --sb-w: 16rem;
    }

    .main-shell.rail {
        --sb-w: 5.2rem;
    }

    /* wenn per JS .rail gesetzt wird */
    /* Sidebar-Breite koppeln */
    #sidebar {
        --sbw: 16rem;
    }

    #sidebar.u-collapsed {
        --sbw: 5.2rem;
    }
}

/* ---------- Tablet (640–1023) ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .main-shell {
        --sb-w: 5.2rem;
    }

    /* standard rail */
    .main-shell.ut-expanded {
        --sb-w: 16rem;
    }

    /* bei expand */
    #sidebar {
        --sbw: 5.2rem;
    }

    #sidebar.ut-expanded {
        --sbw: 16rem;
    }
}

/* ---------- Mobile (<640) ---------- */
@media (max-width: 639.98px) {
    .main-shell {
        --sb-w: 0;
    }

    #sidebar {
        transition: width .2s ease, max-width .2s ease, transform .2s ease;
    }

    /* off-canvas → kein Padding */
}

/*#sidebar {*/
/*    width: var(--sbw, 16rem);*/
/*    max-width: var(--sbw, 16rem);*/
/*    transition: width .2s ease, max-width .2s ease, transform .2s ease;*/
/*}*/

/* Sidebar selbst nimmt die variable Breite */
/*#sidebar {*/
/*    width: var(--sbw, 16rem);*/
/*    max-width: var(--sbw, 16rem);*/
/*    transition: width .2s ease, max-width .2s ease, transform .2s ease;*/
/*}*/

/* Rail: Label, Carets, Submenüs ausblenden (kein Springen) */
#sidebar.u-collapsed .sidebar-label {
    display: none !important;
}

#sidebar.u-collapsed .sidebar-caret {
    display: none !important;
}

#sidebar.u-collapsed [data-submenu] {
    display: none !important;
}

/* Anti-FOUC für Alpine */
[x-cloak] {
    display: none !important;
}

/* Optional: beim First Paint Animationen unterdrücken (falls du body.no-animate setzt) */
.no-animate * {
    transition: none !important;
}

/* Reusable utilities */
.glass-card {
    @apply bg-glass-bg/70 backdrop-blur-md border border-glass-border rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,.25)];
}

.glass-input {
    @apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100 placeholder-gray-400
    focus:outline-none focus:ring-0 focus:ring-[var(--color-ring)] focus:border-cyan-500/60
    transition-colors;
}

.btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white font-medium
    bg-gradient-to-b from-cyan-500 to-cyan-600 hover:from-cyan-400 hover:to-cyan-600
    focus:outline-none focus:ring-0 focus:ring-[var(--color-ring)]
    shadow-[inset_0_1px_0_rgba(255,255,255,.08),0_8px_20px_rgba(0,0,0,.25)];
}

.badge {
    @apply text-xs px-2 py-0.5 rounded-md border border-glass-border text-gray-300/80 bg-glass-light/40;
}

.card-title {
    @apply text-gray-100/95 font-semibold tracking-wide;
}

.card-subtle {
    @apply text-gray-300/70 text-sm leading-relaxed;
}

/* Zustände für Inputs */
.input-error {
    @apply border-red-400/50 focus:border-red-400/70 focus:ring-red-400/30;
}

.input-success {
    @apply border-emerald-400/50 focus:border-emerald-400/70 focus:ring-emerald-400/30;
}

.input-disabled {
    @apply opacity-60 cursor-not-allowed;
}

/* Label & Fehlermeldung */
.field-label {
    @apply block text-sm text-gray-300 mb-1;
}

.field-error {
    @apply mt-1 text-xs text-red-300;
}

.field-help {
    @apply mt-1 text-xs text-gray-400;
}

/* Select im gleichen Look wie .glass-input */
.glass-select {
    @apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100
    focus:outline-none focus:ring-0 focus:ring-[var(--color-ring)]
    focus:border-cyan-500/60 transition-colors;
}

/* Input mit Icon links (Wrapper) */
.input-with-icon {
    @apply relative;
}

.input-with-icon > .icon-left {
    @apply absolute inset-y-0 left-3 flex items-center text-gray-400;
}

.input-with-icon > input {
    @apply pl-10;
    /* Platz für Icon */
}

/* Karten-Interaktion (leichtes Hover-Lift) */
.glass-card:hover {
    @apply shadow-[0_12px_38px_rgba(0,0,0,.3)];
}

/* Buttons – zusätzliche Varianten */
.ghost-btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-gray-200
    bg-white/5 border border-white/10 hover:bg-white/10
    focus:outline-none focus:ring-0 focus:ring-[var(--color-ring)];
}

.danger-btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white
    bg-gradient-to-b from-rose-500 to-rose-600 hover:from-rose-400 hover:to-rose-600
    focus:outline-none focus:ring-0 focus:ring-rose-400/40;
}

/* Checkbox/Switch im Glas-Look */
.glass-checkbox {
    @apply h-4 w-4 rounded border border-glass-border bg-white/10
    checked:bg-cyan-500 checked:border-cyan-500
    focus:ring-2 focus:ring-[var(--color-ring)];
}

/* Trennlinie in Karten */
.divider {
    @apply border-t border-glass-border/80 my-6;
}


button {
    cursor: pointer;
}

.chip {
    @apply flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur px-3 py-2 hover:bg-white/10 transition;
}

.badge {
    @apply ml-1 rounded-full px-2 py-0.5 text-xs font-medium border border-white/10;
}

@layer components {
    .section-title {
        @apply text-white/70 text-sm font-medium uppercase tracking-wide;
    }

    .btn-surface {
        @apply inline-flex items-center gap-2 rounded-lg border border-sky-400/20 bg-sky-600/20
        hover:bg-sky-600/30 text-sky-100 text-sm px-3 py-1.5 transition;
    }

    .input-surface {
        @apply bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-white/90 placeholder-white/30;
    }

    .checkbox-accent {
        @apply h-4 w-4 rounded border border-white/20 bg-white/5 text-sky-400 focus:ring-0;
    }

    .toggle-tile {
        @apply flex items-center gap-3 p-3 rounded-xl border border-white/10 bg-white/5;
    }

    .host-row {
        @apply flex items-stretch rounded-xl overflow-hidden border border-white/10 bg-white/5;
    }

    .host-prefix {
        @apply px-2.5 flex items-center text-white/40 text-xs border-r border-white/10;
    }

    .host-input {
        @apply flex-1 bg-transparent px-3 py-2 outline-none text-white/90;
    }

    .host-suffix {
        @apply px-2.5 flex items-center text-white/50 bg-white/5 border-l border-white/10;
    }

    .host-fqdn {
        @apply text-xs text-white/60 mt-1 font-mono tabular-nums;
    }

    .btn-primary {
        @apply inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.06] px-3 py-1.5 text-sm text-white/80 hover:bg-white/[0.12] hover:text-white;
    }

}

html, body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

::-webkit-scrollbar {
    display: none;
}



/* Pulse für "running" */
@keyframes tgPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0) }
    50%      { box-shadow: 0 0 40px rgba(34,211,238,.12) } /* cyan-400/12 */
}
.tg-pulse { animation: tgPulse 1.6s ease-in-out infinite; }

/* leichtes Shake für Fehler/forbidden */
@keyframes tgShake {
    0% { transform: translateX(0) }
    25% { transform: translateX(-2px) }
    50% { transform: translateX(2px) }
    75% { transform: translateX(-1px) }
    100% { transform: translateX(0) }
}
.tg-shake { animation: tgShake .35s ease-in-out 1; }

@layer base {
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    @apply outline-none transition
    focus:border-sky-400/50 focus:ring-0 focus:ring-sky-400/20
}

@layer components {
    .nx-card {
        @apply rounded-2xl p-6 md:p-7
        bg-white/5 backdrop-blur-xl
        border border-white/10
        shadow-[0_20px_60px_-20px_rgba(0,0,0,.6),inset_0_1px_0_rgba(255,255,255,.06)];
    }

    .nx-chip {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm
        bg-white/8 text-white/90 border border-white/10;
    }

    .nx-subtle {
        @apply text-white/80 leading-relaxed;
    }

    .nx-input {
        @apply w-full rounded-xl px-3.5 py-3 text-white/95
        bg-[rgba(12,18,28,.55)]
        border border-white/10
        shadow-[inset_0_1px_0_rgba(255,255,255,.06)]
        outline-none transition
        focus:border-sky-400/50 focus:ring-0 focus:ring-sky-400/20;
    }

    .nx-label {
        @apply block text-xs text-white/70 mb-1;
    }

    .nx-eye {
        @apply absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg
        hover:bg-white/5 focus:outline-none focus:ring-0 focus:ring-sky-400/20;
    }

    .nx-check {
        @apply h-4 w-4 rounded border-white/20 bg-white/10
        focus:ring-2 focus:ring-sky-400/30;
    }

    .nx-btn {
        @apply inline-flex items-center justify-center rounded-xl py-3 font-medium text-white
        bg-gradient-to-r from-[#6d7cff] via-[#5aa7ff] to-[#39d0ff]
        shadow-[inset_0_1px_0_rgba(255,255,255,.12),0_10px_30px_-8px_rgba(56,189,248,.45)]
        hover:from-[#7e89ff] hover:to-[#46d7ff]
        focus:outline-none focus:ring-0 focus:ring-sky-400/25;
    }

    .nx-btn-ghost {
        @apply rounded-xl px-4 py-2.5 text-white/85 border border-white/10 bg-white/5
        hover:bg-white/10 focus:outline-none focus:ring-0 focus:ring-sky-400/20;
    }

    .nx-link {
        @apply text-sky-300 hover:text-sky-200 transition;
    }

    .nx-divider {
        @apply relative text-center text-white/50 text-xs mt-7 mb-2;
    }

    .nx-divider::before, .nx-divider::after {
        content: "";
        @apply absolute top-1/2 w-[38%] h-px bg-white/10;
    }

    .nx-divider::before {
        left: 0;
    }

    .nx-divider::after {
        right: 0;
    }

    .nx-alert {
        @apply flex gap-3 items-start rounded-xl p-3.5
        border border-rose-400/25 bg-rose-400/10 text-rose-50;
    }


    hr, .hr {
        border-color: var(--color-slate-700);
    }

}