/* ===========================================================
   dosign.ch – light backend chrome (Filament v3)
   Injected via PanelsRenderHook::HEAD_END. Scoped to .fi-* classes.
   Light sidebar + blue accents to match the DoSign content theme.
   =========================================================== */

/* --- light sidebar surface --- */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav,
.fi-sidebar .fi-sidebar-nav-groups {
    background-color: #ffffff !important;
}
.fi-sidebar {
    border-right: 1px solid rgba(30, 41, 59, 0.10) !important;
}
.fi-sidebar-header {
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    border-bottom: 1px solid rgba(30, 41, 59, 0.08) !important;
}

/* --- brand in the header --- */
.fi-sidebar-header a,
.fi-sidebar-header .fi-logo,
.fi-sidebar-header h1,
.fi-sidebar-header span {
    color: #1e293b !important;
}

/* --- group labels --- */
.fi-sidebar-group-label {
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}
.fi-sidebar-group-icon,
.fi-sidebar-group-collapse-button {
    color: #94a3b8 !important;
}

/* --- nav items (default) --- */
.fi-sidebar-item-label {
    color: #334155 !important;
    font-weight: 600 !important;
}
.fi-sidebar-item-icon {
    color: #64748b !important;
}

/* --- nav items (hover/focus) --- */
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background-color: rgba(37, 99, 235, 0.07) !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:focus-visible .fi-sidebar-item-label {
    color: #1e293b !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:focus-visible .fi-sidebar-item-icon {
    color: #2563eb !important;
}

/* --- nav items (active) --- */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: rgba(37, 99, 235, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.30) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    color: #1e40af !important;
    font-weight: 700 !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #2563eb !important;
}

/* --- collapsed icon rail: keep icons clearly visible & centered --- */
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item-icon {
    color: #475569 !important;
}
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #2563eb !important;
}

/* --- collapse / toggle buttons --- */
.fi-sidebar-close-overlay { background-color: rgba(15, 23, 42, 0.45) !important; }
.fi-sidebar .fi-icon-btn { color: #64748b !important; }
.fi-sidebar .fi-icon-btn:hover { color: #2563eb !important; background-color: rgba(37, 99, 235, 0.08) !important; }
.fi-topbar .fi-icon-btn { color: #64748b !important; }
.fi-topbar .fi-icon-btn:hover { color: #2563eb !important; background-color: rgba(37, 99, 235, 0.08) !important; }

/* --- thin custom scrollbar inside the sidebar --- */
.fi-sidebar-nav::-webkit-scrollbar { width: 8px; }
.fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.fi-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(30, 41, 59, 0.14); border-radius: 8px; }
.fi-sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(30,41,59,.18) transparent; }

/* --- topbar: light with a subtle divider --- */
.fi-topbar > nav {
    border-bottom-color: rgba(30, 41, 59, 0.08) !important;
}

/* --- rounded, softer cards in the content area --- */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: 16px !important;
}

/* --- mobile dashboard navigation --- */
@media (max-width: 1023px) {
    html {
        scroll-padding-top: 4.5rem;
    }

    .fi-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    }

    .fi-topbar > nav {
        min-height: 4rem !important;
        padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
    }

    .fi-topbar .fi-icon-btn {
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        border-radius: 0.9rem !important;
    }

    .fi-sidebar {
        width: min(23rem, calc(100vw - 1.25rem)) !important;
        max-width: calc(100vw - 1.25rem) !important;
        border-right: 0 !important;
        border-radius: 0 1.25rem 1.25rem 0 !important;
        box-shadow: 24px 0 60px rgba(15, 23, 42, 0.18) !important;
        overflow: hidden !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) {
        pointer-events: none !important;
        transform: translateX(-110%) !important;
        visibility: hidden !important;
    }

    .fi-sidebar.fi-sidebar-open {
        pointer-events: auto !important;
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    .fi-sidebar-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        min-height: 4.25rem !important;
        padding: 0.75rem 1rem !important;
    }

    .fi-sidebar-header .fi-logo,
    .fi-sidebar-header a {
        max-width: calc(100vw - 7rem) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .fi-sidebar-close-overlay {
        background: rgba(15, 23, 42, 0.45) !important;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .fi-sidebar-nav {
        height: calc(100dvh - 4.25rem) !important;
        padding: 0.85rem 0.75rem calc(1rem + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .fi-sidebar .fi-sidebar-nav-groups {
        gap: 0.85rem !important;
    }

    .fi-sidebar-group {
        border-radius: 1rem !important;
        padding: 0.35rem !important;
        background: rgba(37, 99, 235, 0.04) !important;
        border: 1px solid rgba(30, 41, 59, 0.07) !important;
    }

    .fi-sidebar-group-label {
        padding: 0.45rem 0.65rem 0.35rem !important;
        font-size: 0.68rem !important;
    }

    .fi-sidebar-item-button {
        min-height: 3rem !important;
        padding: 0.72rem 0.75rem !important;
        border-radius: 0.85rem !important;
        gap: 0.75rem !important;
        touch-action: manipulation;
    }

    .fi-sidebar-item-icon {
        width: 1.35rem !important;
        height: 1.35rem !important;
        flex: 0 0 1.35rem !important;
    }

    .fi-sidebar-item-label {
        min-width: 0 !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        font-size: 0.95rem !important;
    }

    .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
    .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
        background: rgba(37, 99, 235, 0.14) !important;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.32) !important;
    }

    .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
    .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
        color: #2563eb !important;
    }

    .fi-main,
    .fi-main-ctn,
    .fi-page {
        min-width: 0 !important;
    }

    .fi-main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .fi-header {
        gap: 0.75rem !important;
    }

    .fi-header-heading {
        overflow-wrap: anywhere !important;
        font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
        line-height: 1.12 !important;
    }

    .fi-header-subheading {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .fi-header-actions,
    .fi-header .fi-ac {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .fi-header-actions .fi-btn,
    .fi-header .fi-ac .fi-btn {
        min-height: 2.75rem !important;
    }
}

@media (max-width: 430px) {
    .fi-sidebar {
        width: calc(100vw - 0.75rem) !important;
        max-width: calc(100vw - 0.75rem) !important;
        border-radius: 0 1rem 1rem 0 !important;
    }

    .fi-sidebar-nav {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .fi-sidebar-item-button {
        min-height: 3.15rem !important;
        padding-inline: 0.7rem !important;
    }
}

/* ===========================================================
   dosign backend redesign v2 — calm, professional, clear guidance
   Appended 2026-06-29. Light-only (dark mode disabled on panels).
   Conservative .fi-* targeting; unknown selectors simply no-op.
   =========================================================== */

/* --- calm content background --- */
.fi-main-ctn,
.fi-layout,
.fi-body {
    background-color: #f4f6fa !important;
}
.fi-main {
    background-color: transparent !important;
}

/* --- page header: clearer hierarchy & guidance --- */
.fi-header-heading {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
.fi-header-subheading {
    color: #64748b !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    max-width: 720px !important;
}

/* --- section cards: white surface, soft border, gentle shadow --- */
.fi-section {
    background: #ffffff !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -24px rgba(16, 24, 40, 0.28) !important;
}
.fi-section-header-heading {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.fi-section-header-description {
    color: #64748b !important;
}
.fi-section-header .fi-icon,
.fi-section-header svg {
    color: #2563eb !important;
}

/* --- form fields: calm borders, blue focus --- */
.fi-input,
.fi-select-input,
.fi-textarea {
    border-radius: 10px !important;
}
.fi-input-wrp {
    border-radius: 10px !important;
    --tw-ring-color: transparent !important;
}
.fi-input-wrp:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
}
.fi-fo-field-wrp-label,
.fi-fo-field-wrp .fi-fo-field-wrp-label-content {
    color: #344054 !important;
    font-weight: 600 !important;
}

/* --- buttons --- */
.fi-btn {
    border-radius: 10px !important;
    font-weight: 650 !important;
}

/* --- stat widgets: calm cards, strong numbers --- */
.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -24px rgba(16, 24, 40, 0.28) !important;
    padding: 1.2rem 1.3rem !important;
}
.fi-wi-stats-overview-stat-value {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
.fi-wi-stats-overview-stat-label {
    color: #64748b !important;
    font-weight: 600 !important;
}
.fi-wi-stats-overview-stat-description {
    color: #94a3b8 !important;
}

/* --- filter tabs: segmented, calm --- */
.fi-tabs {
    background: #ffffff !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 12px !important;
    padding: 0.28rem !important;
    gap: 0.15rem !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}
.fi-tabs-item {
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    color: #566173 !important;
}
.fi-tabs-item:hover {
    color: #0f172a !important;
}
.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] {
    background: #eef4ff !important;
    color: #1d4ed8 !important;
}

/* --- tables: calm container, quiet header, soft row hover --- */
.fi-ta-ctn {
    border-radius: 16px !important;
    border: 1px solid #e6eaf0 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -24px rgba(16, 24, 40, 0.28) !important;
}
.fi-ta-header-cell {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
}
.fi-ta-row:hover {
    background: #fafbfd !important;
}

/* --- badges: pill, calm weight --- */
.fi-badge {
    border-radius: 999px !important;
    font-weight: 650 !important;
}

/* --- breathing room between content blocks --- */
.fi-page .fi-section + .fi-section,
.fi-page .fi-wi + .fi-wi {
    margin-top: 1.25rem !important;
}

/* section header icon as a soft badge (matches the design preview) */
.fi-section-header-icon {
    background: #eef4ff !important;
    color: #2563eb !important;
    border-radius: 10px !important;
    padding: 0.5rem !important;
    box-sizing: content-box !important;
}

/* auth redesign 2026-10-31 */
/* ===== Anmelden / Registrieren (Neugestaltung) – nur Filament-Simple-Layout ===== */
.auth-brand{display:none}
.auth-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;margin-top:1.8rem;font-size:.84rem}
.auth-legal a{color:#98a2b3;font-weight:600}
.auth-legal a:hover{color:#2563eb}

.fi-simple-layout{background:#f4f6fa}
.fi-simple-layout .fi-simple-main{box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 50px -34px rgba(16,24,40,.3)!important;border:1px solid #e6eaf0;border-radius:20px!important;padding:2.2rem 1.6rem!important;margin:2rem 1rem!important;max-width:30rem!important;background:#fff}
.fi-simple-layout .fi-simple-header{align-items:flex-start;text-align:left}
.fi-simple-layout .fi-simple-header .fi-logo{height:2.4rem!important;margin-bottom:1.1rem!important}
.fi-simple-layout .fi-simple-header-heading{font-size:1.9rem!important;line-height:1.15!important;letter-spacing:-.035em!important;font-weight:800!important;color:#1b2430!important;text-align:left!important}
.fi-simple-layout .fi-simple-header-subheading{margin-top:.55rem!important;text-align:left!important;font-size:.98rem!important;color:#667085!important}
.fi-simple-layout .fi-simple-header-subheading a span{font-size:.98rem!important}

/* Felder: sichtbarer, ruhiger Rand */
.fi-simple-layout .fi-input-wrp{border:1.5px solid #d5deec!important;background:#fbfcff!important;border-radius:12px!important;box-shadow:none!important;--tw-ring-color:transparent!important;--tw-ring-shadow:0 0 #0000!important;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.fi-simple-layout .fi-input-wrp:hover{border-color:#b9c9e6!important}
.fi-simple-layout .fi-input-wrp:focus-within{border-color:#2563eb!important;background:#fff!important;box-shadow:0 0 0 4px rgba(37,99,235,.14)!important}
.fi-simple-layout .fi-input{padding:.82rem 1rem!important;font-size:1rem!important;background:transparent!important}
.fi-simple-layout .fi-fo-field-wrp-label span{font-size:.9rem!important;font-weight:700!important;color:#1b2430!important}
.fi-simple-layout .fi-fo-field-wrp .fi-link span,.fi-simple-layout .fi-fo-field-wrp a{font-size:.86rem}
.fi-simple-layout .fi-fo-field-wrp-error-message{font-size:.86rem}
.fi-simple-layout .fi-checkbox-input{border-radius:6px}
.fi-simple-layout .fi-form{gap:1.4rem!important}
.fi-simple-layout .fi-fo-component-ctn{gap:1.15rem!important}
.fi-simple-layout .fi-btn{min-height:52px;font-size:1rem!important;border-radius:12px!important;box-shadow:0 14px 26px -16px rgba(37,99,235,.9)}

/* Registrieren: Vor- und Nachname nebeneinander */
@media (min-width:520px){
  .fi-simple-layout form .fi-fo-component-ctn{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .fi-simple-layout form .fi-fo-component-ctn>div{grid-column:1/-1!important}
  .fi-simple-layout form .fi-fo-component-ctn>div:nth-child(2):has(label[for="data.first_name"]),
  .fi-simple-layout form .fi-fo-component-ctn>div:nth-child(3):has(label[for="data.last_name"]){grid-column:span 1!important}
}

@media (min-width:1024px){
  body:has(.auth-brand) .fi-simple-layout{margin-left:min(46vw,620px);background:#fff;min-height:100vh}
  .fi-simple-layout .fi-simple-main{box-shadow:none!important;border:0;border-radius:0!important;background:transparent;margin:3rem 0!important;padding:0 clamp(1.6rem,4vw,3.4rem)!important;max-width:34rem!important}
  .fi-simple-layout .fi-simple-header .fi-logo{display:none}
  .auth-brand{display:flex;flex-direction:column;justify-content:space-between;position:fixed;inset:0 auto 0 0;width:min(46vw,620px);padding:2.2rem clamp(2rem,4vw,3.6rem);background:linear-gradient(155deg,#0b2f8a 0%,#1d4ed8 62%,#2f6df0 100%);color:#fff;overflow:hidden;z-index:5}
  .auth-brand::before{content:"";position:absolute;right:-140px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}
  .auth-brand::after{content:"";position:absolute;left:-120px;bottom:-180px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
  .auth-brand::before,.auth-brand::after{pointer-events:none}
  .auth-brand>*{position:relative}
}
.auth-brand__logo{display:inline-flex;align-items:center;gap:.7rem;color:#fff;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.auth-brand__logo img{height:36px;width:auto;border-radius:10px;background:#fff;padding:2px}
.auth-brand__body{max-width:30rem}
.auth-eyebrow{display:inline-flex;margin:0 0 1.1rem;padding:.36rem .8rem;border-radius:999px;background:rgba(255,255,255,.14);color:#e6eeff;font-size:.8rem;font-weight:700}
.auth-brand h2{margin:0;color:#fff;font-size:clamp(1.9rem,2.6vw,2.55rem);line-height:1.1;letter-spacing:-.04em;font-weight:850}
.auth-brand ul{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.15rem}
.auth-brand li{display:flex;gap:.9rem;align-items:flex-start;color:rgba(255,255,255,.86);font-size:.98rem;line-height:1.5}
.auth-brand li b{display:block;color:#fff;font-weight:750}
.auth-brand li i{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;margin-top:.1rem}
.auth-brand li i svg{width:14px;height:14px}
.auth-brand__foot a{color:rgba(255,255,255,.78);font-weight:650;font-size:.92rem}
.auth-brand__foot a:hover{color:#fff}