@import url("https://use.typekit.net/wws5dfn.css");

/* ===== Typografie: Sofia Pro ===== */
body, input, textarea, select, button { font-family:"sofia-pro",sans-serif; font-weight:300; font-style:normal; }
b, strong, h1, h2, h3, h4, h5, h6, .share-name, .progress-bar-text { font-weight:600; }
button, .upload-files, .upload-folder, .download-button { font-weight:600; }

/* ===== Card: Desktop links, mobil zentriert ===== */
.main { flex-grow:0 !important; margin-top:auto !important; margin-bottom:auto !important; align-self:center; width:min(420px,100%) !important; max-height:90vh; background:var(--panel-background-color); border-radius:16px; box-shadow:0 18px 50px rgba(20,23,41,.22),0 2px 8px rgba(20,23,41,.08); overflow:hidden; }
@media (min-width:900px){ .main { align-self:flex-start !important; margin-left:clamp(0px,3vw,48px); } }

/* ===== Hoehen zaehmen, durchgehend weiss ===== */
.upload-basket { flex-grow:0 !important; max-height:260px; min-height:0 !important; }
.upload-basket-empty { height:auto !important; min-height:56px; padding:14px 0; }
.download-panel-content { height:auto !important; }
.download-panel-content .share-files-list { flex-grow:0 !important; max-height:300px; }
.upload-form, .expiry-settings-container, .upload-basket-details, .upload-basket, .upload-button-container, .download-panel-content { background:var(--panel-background-color) !important; }
.upload-form { padding-top:22px; }
.upload-button-container { padding-bottom:18px; }

/* ===== Secondary: Light Grey ===== */
button.secondary, .upload-folder { background:#F1F2F6 !important; color:#2B2E38 !important; border:1px solid #E3E5EC !important; }
button.secondary:hover, .upload-folder:hover { background:#E7E9F0 !important; color:#1D1F27 !important; }

/* ===== Popups: immer zentriert ===== */
.user-form-overlay .user-form, .user-form-overlay.active .user-form { position:fixed !important; top:50% !important; left:50% !important; bottom:auto !important; transform:translate(-50%,-50%) !important; width:min(500px, calc(100vw - 24px)) !important; border-radius:16px !important; max-height:88vh; overflow-y:auto; }

/* ===== Zeitwahl: haptische Segmente ===== */
.expiry-label { font-size:.9rem !important; font-weight:400 !important; padding:6px 14px; border-radius:999px; background:#F1F2F6; display:inline-flex !important; align-items:center; gap:6px; margin:8px 0 !important; }
.expiry-label:hover { background:#E7E9F0; color:inherit !important; }
.expiry-settings.visible { max-height:64px !important; padding:8px 16px 12px; gap:8px !important; justify-content:center !important; }
.expiry-settings input[type='number'], .expiry-settings select { border:1px solid #E3E5EC !important; border-radius:10px !important; height:44px !important; background:#fff !important; font-size:16px !important; font-weight:400 !important; padding:0 12px !important; text-align:center !important; }
.expiry-settings input[type='number'] { width:80px !important; }
.expiry-settings select { min-width:120px; cursor:pointer; }
.expiry-settings input[type='number']::-webkit-inner-spin-button, .expiry-settings input[type='number']::-webkit-outer-spin-button { opacity:1 !important; pointer-events:auto !important; }
.expiry-settings .maxValueOverlay { position:static !important; order:3; font-size:12px !important; opacity:.8 !important; }

/* ===== Empfaenger-Zeile: Chip im Stil der Zeitwahl, ganze Flaeche klickbar ===== */
.recipients { flex-direction:column !important; align-items:center !important; gap:10px !important; }
.recipients .recipient-list { width:100%; justify-content:center !important; min-height:0 !important; }
.recipients .recipient-list-empty { display:none !important; }
.uploader-add-recipient { display:inline-flex !important; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; background:#F1F2F6; transition:background .15s ease; cursor:pointer; }
.uploader-add-recipient:hover { background:#E7E9F0; }
.uploader-add-recipient .button-outside-label-text { font-weight:400 !important; color:#2B2E38; font-size:.9rem; cursor:pointer; }
.uploader-add-recipient .icon-only { width:28px !important; height:28px !important; min-width:28px; border-radius:50% !important; }
.recipient { font-size:13px !important; padding:6px 12px !important; min-height:28px; }

/* ===== Empfaenger-Popover: im Viewport halten, Entfernen in Rot ===== */
.recipient-popover { padding:16px !important; border-radius:12px !important; box-shadow:0 12px 32px rgba(20,23,41,.22),0 2px 8px rgba(20,23,41,.08) !important; filter:none !important; transform:translate(-50%) translateY(-10px) !important; transition:opacity .18s ease, transform .18s ease !important; max-width:calc(100vw - 16px); }
.recipient-popover:not(.active) { transform:translate(-50%) translateY(0) !important; opacity:0 !important; }
.recipient-popover-content { flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
.recipient-popover-content > div:first-child { display:flex; flex-direction:column; gap:8px; }
.recipient-popover input[type="text"] { display:none !important; }
.recipient-popover input { width:100% !important; min-width:250px; height:44px !important; font-size:16px !important; font-weight:400 !important; padding:0 12px !important; border:1px solid #E3E5EC !important; border-radius:8px !important; margin:0 !important; }
.recipient-popover .button-container { position:static !important; align-self:flex-end !important; order:3; }
.recipient-popover .button-container button { color:#E5484D !important; background:transparent !important; border:none !important; }
.recipient-popover .button-container button:hover { background:#FDECEC !important; }
.recipient-popover .button-container svg { stroke:#E5484D !important; }
.recipient-popover .rup-confirm { width:100%; height:44px; border-radius:8px; background:var(--primary-button-background-color); color:var(--primary-button-text-color); font-weight:600; font-size:15px; border:none; cursor:pointer; order:2; }
.recipient-popover .rup-confirm:hover { background:var(--primary-button-background-color-hover); }
.recipient-popover-content::after { content:"↵ Enter oder Button bestätigt · ohne Empfänger gibt es einen Link"; display:block; font-size:12px; color:#5A5E6B; text-align:center; order:4; }
.recipient-popover::after { display:none !important; }

/* ===== Upload-Korb: Ordner FETT, Dateien LIGHT ===== */
.directory-header, .directory-header span { font-weight:600 !important; font-size:.9rem; }
.upload-basket .upload-basket-item .name, .upload-basket-item .name { font-weight:300 !important; font-size:.9rem; }
.upload-basket-item { background:#F4F5F9 !important; border-radius:10px !important; margin-bottom:4px !important; padding:8px 12px !important; }
.upload-basket-item:hover { background:#EEF0F6 !important; }
.upload-basket-folder { background:#F4F5F9 !important; border-radius:10px !important; padding:10px 12px !important; }
.upload-basket-folder .upload-basket-item { background:#FFFFFF !important; }
.upload-basket-item .upload-status svg { width:14px; height:14px; }

/* ===== Fortschritt ===== */
.progress-bar-text .progress-item { background:#F1F2F6 !important; border-radius:8px !important; font-weight:400 !important; font-size:13px !important; color:#2B2E38 !important; }
.progress-bar { height:8px !important; border-radius:999px !important; }
.progress-bar .progress-bar-fill { border-radius:999px !important; }

/* ===== Download-Seite: Header buendig (keine weissen Ecken mehr) ===== */
.download-panel-content { padding-top:0 !important; border-radius:0 !important; }
.download-panel-content .share-name { width:100%; margin:0 !important; padding:16px !important; border-radius:0 !important; }

/* ===== Passwortgeschuetzt: Dateiliste erst nach Passwort klickbar ===== */
.download-panel-content:has(.password-input-container) .share-files-list { opacity:.9; }
.download-panel-content:has(.password-input-container) .share-files-list .file-item,
.download-panel-content:has(.password-input-container) .share-files-list .upload-basket-item,
.download-panel-content:has(.password-input-container) .share-files-list .clickable { pointer-events:none !important; cursor:default !important; }
.password-input-container { padding:8px 16px 4px; width:100%; }
.password-input-container::before { content:"🔒  Diese Freigabe ist passwortgeschützt"; display:block; font-size:.95rem; font-weight:600; color:#2B2E38; text-align:center; margin-bottom:10px; }
.password-input-container .input-container input { height:48px !important; font-size:16px !important; font-weight:400 !important; border:1px solid #E3E5EC !important; border-radius:10px !important; padding:0 14px !important; text-align:center; letter-spacing:2px; }
.password-input-container .download-button { width:100%; }
.password-input-container .error-message { font-size:.85rem; font-weight:400; color:#C0392B; margin-top:6px; text-align:center; }

/* ===== Toasts: lesbar ===== */
.Vue-Toastification__toast { font-family:"sofia-pro",sans-serif !important; background:#FFFFFF !important; color:#1D1F27 !important; border-radius:12px !important; box-shadow:0 12px 32px rgba(20,23,41,.22) !important; padding:14px 16px !important; }
.Vue-Toastification__toast-body { color:#1D1F27 !important; font-size:14.5px !important; font-weight:400 !important; line-height:1.45 !important; }
.Vue-Toastification__toast--error { border-left:4px solid #E5484D !important; }
.Vue-Toastification__toast--success { border-left:4px solid #2F9E44 !important; }
.Vue-Toastification__close-button { color:#1D1F27 !important; opacity:.6 !important; }

/* ===== Login: Microsoft-only (Notluke: ?local-login) ===== */
html:not(.rup-local-login) .auth-container-inner > .input-container { display:none !important; }
html:not(.rup-local-login) .auth-container-inner .row:has(button.block:not(.provider-button)) { display:none !important; }
html:not(.rup-local-login) .auth-container-inner .row:has(hr) { display:none !important; }
html:not(.rup-local-login) .auth-container-inner > p { display:none !important; }
html:not(.rup-local-login) .auth-container-inner h1::after { content:"Melde dich mit deinem Microsoft-Unternehmenskonto an"; display:block; font-size:.9rem; font-weight:300; color:#5A5E6B; margin-top:8px; }
.auth-container-inner .row:has(.provider-button) { margin-top:20px !important; }
.auth-container-inner .row:has(.provider-button) [class*='col-'] { flex:0 0 100% !important; max-width:100% !important; width:100% !important; padding:0 !important; }
.provider-button { height:52px !important; font-size:16px !important; font-weight:600 !important; background:#FFFFFF !important; color:#2B2E38 !important; border:1px solid #E3E5EC !important; border-radius:10px !important; display:flex !important; align-items:center; justify-content:center; gap:10px; }
.provider-button:hover { background:#F1F2F6 !important; border-color:#C9CDD9 !important; }
.provider-button svg { width:20px !important; height:20px !important; }

/* ===== Fokus: dezent bei Eingabefeldern, kraeftig nur bei Tastatur auf Buttons ===== */
input:focus, input:focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible { outline:none !important; border-color:#0433FF !important; box-shadow:0 0 0 1px #0433FF !important; }
.upload-basket-details input:focus, .upload-basket-details textarea:focus { box-shadow:inset 0 -1px 0 #0433FF !important; border-color:#0433FF !important; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:3px solid #0433FF !important; outline-offset:2px !important; border-radius:4px; }

/* ===== Kontraste & Mindestgroessen ===== */
input::placeholder, textarea::placeholder { color:#6B6F7B !important; opacity:1 !important; font-weight:400 !important; }
.max-size-label { font-size:.85rem !important; opacity:.9; font-weight:400 !important; }
.meta, .share-expires, .upload-basket-item .meta { opacity:.78 !important; font-size:.8rem !important; font-weight:400 !important; }
.upload-basket-empty-text { font-size:.85rem !important; opacity:.85 !important; font-weight:400 !important; }
small, .small { font-weight:400 !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* ===== Datei entfernen: Loesch-Button in Rot ===== */
.upload-basket .hover-actions button, .upload-basket-item .hover-actions button { background:#E5484D !important; color:#FFFFFF !important; border:none !important; }
.upload-basket .hover-actions button:hover, .upload-basket-item .hover-actions button:hover { background:#C53030 !important; }
.upload-basket .hover-actions button svg, .upload-basket-item .hover-actions button svg { stroke:#FFFFFF !important; }


/* ===== Share-Link nach Upload: gross und kopierfreundlich ===== */
.sharePanel-content .sharePanel-url { font-size:16px !important; font-weight:400 !important; color:#1D1F27 !important; user-select:all; padding:12px !important; background:#F4F5F9; border-radius:8px; }
.sharePanel-content .sharePanel-title { font-weight:600 !important; }

/* ===== Download-Modal: Stats-Band weiss, Chips grau ===== */
.download-panel-content .stats { background:#FFFFFF !important; width:100%; padding:14px 0 6px; display:flex; justify-content:center; gap:8px; }
.download-panel-content .stat { background:#F1F2F6 !important; border:1px solid #E3E5EC; border-radius:999px; padding:6px 14px; font-size:.85rem; font-weight:400; color:#2B2E38; margin:0 !important; }
.download-panel-content .share-expires { background:#FFFFFF !important; width:100%; text-align:center; padding:4px 0 12px; margin:0 !important; font-weight:400 !important; }

/* ===== Download-Modal: durchgehend weiss, Infos als graue Kacheln (wie Upload) ===== */
.download-panel-content, .download-panel-content .share-files-list { background:#FFFFFF !important; }
.download-panel-content .share-files-list { padding:4px 14px 8px !important; }
.download-panel-content .file-item { background:#F4F5F9 !important; border-radius:10px !important; margin-bottom:4px !important; padding:8px 12px !important; }
.download-panel-content .file-item:hover { background:#EEF0F6 !important; }
.download-panel-content .share-message { background:#F4F5F9 !important; border-radius:10px !important; align-self:stretch; width:auto !important; margin:4px 14px 10px !important; padding:12px 16px !important; }
.download-panel-content .share-message, .download-panel-content .share-message * { color:#2B2E38 !important; }

/* ===== Popover: Entfernen-Aktion mit Label und groesserem Icon ===== */
.recipient-popover .button-container button { width:auto !important; height:32px !important; min-width:0 !important; display:inline-flex !important; align-items:center; gap:6px; padding:4px 12px !important; border-radius:999px !important; }
.recipient-popover .button-container button::before { content:"Entfernen"; font-size:12.5px; font-weight:400; color:#E5484D; }
.recipient-popover .button-container svg { width:18px !important; height:18px !important; margin:0 !important; }

/* ===== Download: Headline unter dem blauen Balken ===== */
.download-panel-content .stats { flex-wrap:wrap !important; }
.download-panel-content .stats::before { content:"Ihre Dateien sind bereit"; display:block; width:100%; text-align:center; font-size:1.1rem; font-weight:600; color:#1D1F27; margin-bottom:10px; }

/* ===== Sprachumschalter: weisse Kachel, farbiges Icon ===== */
.language-selector { background:#FFFFFF !important; color:#0433FF !important; border:1px solid #E3E5EC !important; border-radius:10px !important; box-shadow:0 2px 8px rgba(20,23,41,.12); }
.language-selector svg { stroke:#0433FF !important; color:#0433FF !important; }
.language-selector:hover { background:#F1F2F6 !important; }

/* ===== Footer: Impressum / AGB / Datenschutz ===== */
.rup-footer { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:16px; z-index:150; }
.rup-footer a { color:rgba(255,255,255,.9); font-size:12.5px; font-weight:400; text-decoration:none; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.rup-footer a:hover { color:#FFFFFF; text-decoration:underline; }
@media (max-width:900px){ .rup-footer { bottom:10px; gap:12px; white-space:nowrap; } }


/* ===== Login: Ueberschrift zentriert ===== */
.auth-container-inner h1 { text-align:center !important; width:100%; }


/* ===== Download: Admin-Nachricht VOR der Dateiliste (Flex-Order) ===== */
.download-panel-content > * { order:0; }
.download-panel-content .share-name { order:0; }
.download-panel-content .stats { order:1; }
.download-panel-content .share-expires { order:2; }
.download-panel-content .share-message { order:3; }
.download-panel-content .share-files-list { order:4; }
.download-panel-content .password-input-container { order:5; }
.download-panel-content .download-button-container { order:6; }

/* ===== Gast: "Upload erfolgreich"-Screen - Haekchen sichtbar machen ===== */
.thank-guest-for-upload svg { stroke:#0433FF !important; width:88px !important; height:88px !important; margin-bottom:16px !important; }
.thank-guest-for-upload { padding:36px 28px !important; border-radius:16px !important; }
.thank-guest-for-upload h1 { font-size:1.4rem !important; }
.thank-guest-for-upload p { font-size:.95rem !important; font-weight:400 !important; color:#3A3E4A !important; line-height:1.5; }

/* ===== Login: Abstand Headline/Text, schoener Umbruch ===== */
.auth-container-inner h1 { line-height:1.25; }
html:not(.rup-local-login) .auth-container-inner h1::after { margin-top:14px !important; max-width:300px; margin-left:auto; margin-right:auto; line-height:1.5 !important; text-wrap:balance; }

/* ===== Nachricht-Feld: sichtbares, mitwachsendes Freitextfeld ===== */
.upload-basket-details textarea { min-height:44px !important; line-height:1.45 !important; overflow-wrap:anywhere; resize:none !important; padding-top:10px !important; padding-bottom:10px !important; }

/* ===== Download: lange Nachrichten sauber lesbar ===== */
.download-panel-content .share-message { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; max-height:180px; overflow-y:auto; line-height:1.5; }

/* ===== Ueberlauf-Schutz: Texte brechen IMMER innerhalb der UI um ===== */
.download-panel-content { overflow-x:hidden !important; }
.download-panel-content .share-message .message,
.download-panel-content .share-message h6,
.download-panel-content .share-message * { white-space:pre-wrap !important; overflow-wrap:anywhere !important; word-break:break-word !important; min-width:0 !important; max-width:100% !important; }
.download-panel-content .share-name { overflow-wrap:anywhere; word-break:break-word; }
.upload-basket-item .name, .directory-header span, .file-item { overflow-wrap:anywhere; }