/* ═══════════════════════════════════════════════════════════════════════
   V103af — Portal Settings Modals (komplettes Redesign)
   ═══════════════════════════════════════════════════════════════════════
   Kompakte, professionelle Darstellung aller Settings-Modals in beiden
   Portalen. Body scrollt sauber, Footer überlagert nie Content, Sections
   nutzen 2-Spalten-Grids für effiziente Platznutzung.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --tt-modal-bg: #ffffff;
    --tt-modal-overlay: rgba(15, 23, 42, 0.5);
    --tt-modal-border: #e5e7eb;
    --tt-modal-section-border: #eef1f5;
    --tt-modal-text: #0f1729;
    --tt-modal-text-muted: #64748b;
    --tt-modal-text-dim: #94a3b8;
    --tt-modal-brand: #151b2a;
    --tt-modal-brand-soft: rgba(21, 27, 42, 0.05);
    --tt-modal-accent: #4f46e5;
    --tt-modal-accent-soft: rgba(79, 70, 229, 0.08);
    --tt-modal-input-bg: #ffffff;
    --tt-modal-input-border: #d1d5db;
    --tt-modal-input-border-focus: #4f46e5;
    --tt-modal-radius: 14px;
    --tt-modal-radius-sm: 8px;
}

/* ── Header Sprache-Toggle ausblenden (Dashboard) ────────────────────── */
#dashboard-view #lang-toggle-btn,
#dashboard-view #lang-toggle-btn-admin {
    display: none !important;
}

/* ═════════════════════════════════════════════════════════════════════
   FONT + OVERLAY — gilt für admin + talent Modals
   ═════════════════════════════════════════════════════════════════════ */
#tt-account-modal,
#tt-prefs-modal,
#talent-profile-modal,
#talent-settings-modal {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#tt-account-modal.modal-overlay,
#tt-prefs-modal.modal-overlay,
#talent-profile-modal.talent-modal-overlay,
#talent-settings-modal.talent-modal-overlay {
    background: var(--tt-modal-overlay) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    padding: 24px !important;
    z-index: 9000 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ═════════════════════════════════════════════════════════════════════
   DIALOG SHELL — flex column, header sticky top, footer sticky bottom,
   body scrollt. Specificity-Boost gegen portal-v87-fixes.css.
   ═════════════════════════════════════════════════════════════════════ */
#tt-account-modal .modal-dialog,
#tt-prefs-modal .modal-dialog,
html body #talent-profile-modal > .talent-modal.talent-profile-modal,
html body #talent-profile-modal .talent-modal.talent-profile-modal,
html body #talent-settings-modal > .talent-modal,
html body #talent-settings-modal .talent-modal {
    width: 100% !important;
    max-width: 520px !important;
    background: var(--tt-modal-bg) !important;
    border-radius: var(--tt-modal-radius) !important;
    border: 1px solid var(--tt-modal-border) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    /* V103af-fix3: Block-Layout statt grid damit Modal natürlich an Inhalt
       wächst und alle 4 Children (Header + Profile + Rechnungsprofil +
       Footer) korrekt stapeln (portal-v93 hatte 3-row grid das nur 3
       Kinder vorsah). Sticky Header/Footer halten Position, Body scrollt. */
    display: block !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 48px) !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Profile-Modal breiter für 4-Spalten Rechnungsprofil-Grid */
html body #talent-profile-modal > .talent-modal.talent-profile-modal,
html body #talent-profile-modal .talent-modal.talent-profile-modal {
    max-width: 760px !important;
}

#tt-account-modal .modal-header,
#tt-prefs-modal .modal-header,
html body #talent-profile-modal .talent-modal-header,
html body #talent-settings-modal .talent-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}
#tt-account-modal .modal-footer,
#tt-prefs-modal .modal-footer,
html body #talent-profile-modal .talent-modal-actions,
html body #talent-settings-modal .talent-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
}


/* ═════════════════════════════════════════════════════════════════════
   HEADER — kompakt, klare Hierarchie (V103ah: tighter sizes)
   ═════════════════════════════════════════════════════════════════════ */
#tt-account-modal .modal-header,
#tt-prefs-modal .modal-header,
html body #talent-profile-modal .talent-modal-header,
html body #talent-settings-modal .talent-modal-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 14px 20px 12px !important;
    border-bottom: 1px solid var(--tt-modal-section-border) !important;
    background: var(--tt-modal-bg) !important;
    flex: 0 0 auto !important;
}
#tt-account-modal .modal-header h2,
#tt-prefs-modal .modal-header h2,
html body #talent-profile-modal .talent-modal-header h2,
html body #talent-settings-modal .talent-modal-header h2 {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--tt-modal-text) !important;
    margin: 0 0 1px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}
html body #talent-profile-modal .talent-modal-header > div p,
html body #talent-settings-modal .talent-modal-header > div p {
    font-size: 11.5px !important;
    color: var(--tt-modal-text-muted) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Close Button kompakt */
#tt-account-modal .modal-header button,
#tt-prefs-modal .modal-header button,
html body #talent-profile-modal .talent-modal-close,
html body #talent-settings-modal .talent-modal-close {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    border: 1px solid var(--tt-modal-border) !important;
    background: var(--tt-modal-bg) !important;
    color: var(--tt-modal-text-muted) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}
#tt-account-modal .modal-header button:hover,
#tt-prefs-modal .modal-header button:hover,
html body #talent-profile-modal .talent-modal-close:hover,
html body #talent-settings-modal .talent-modal-close:hover {
    background: var(--tt-modal-brand-soft) !important;
    color: var(--tt-modal-text) !important;
    border-color: #cbd5e1 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   BODY — scrollbar, kompakte Vertikalrhythm
   ═════════════════════════════════════════════════════════════════════ */
#tt-account-modal .modal-body,
#tt-prefs-modal .modal-body,
html body #talent-settings-modal .tt-settings-body {
    padding: 12px 20px 14px !important;
    background: var(--tt-modal-bg) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
}

/* Direct children = form-groups; default span 1 column */
#tt-account-modal .modal-body > div,
#tt-prefs-modal .modal-body > div,
html body #talent-settings-modal .tt-settings-body > div {
    margin: 0 !important;
    min-width: 0 !important;
}

/* Volle Breite für Avatar-Section und letztes Feld */
#tt-account-modal .modal-body .tt-account-avatar-section,
#tt-prefs-modal .modal-body > div:last-child,
html body #talent-settings-modal .tt-settings-body > div:last-child {
    grid-column: 1 / -1 !important;
}
/* Admin Account-Modal: Anzeigename + E-Mail Row, Pw-Row, Initialen volle Breite */
#tt-account-modal .modal-body > div:has(#tt-acc-initials) {
    grid-column: 1 / -1 !important;
    max-width: 50% !important;
}

/* ═════════════════════════════════════════════════════════════════════
   LABELS + INPUTS — kompakte 36px Inputs, dezente Labels
   ═════════════════════════════════════════════════════════════════════ */
#tt-account-modal .modal-body label,
#tt-prefs-modal .modal-body label,
html body #talent-profile-modal .talent-profile-fields > label,
html body #talent-profile-modal .talent-profile-name-block > label,
html body #talent-profile-modal .tt-profile-grid label > span,
html body #talent-settings-modal .tt-settings-body label,
html body #talent-profile-modal .tt-profile-section label > span {
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    color: var(--tt-modal-text-muted) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

#tt-account-modal .modal-body input[type="text"],
#tt-account-modal .modal-body input[type="email"],
#tt-account-modal .modal-body input[type="password"],
#tt-prefs-modal .modal-body select,
html body #talent-profile-modal .talent-profile-fields input,
html body #talent-profile-modal .talent-profile-name-block input,
html body #talent-profile-modal .tt-profile-grid input,
html body #talent-profile-modal .tt-profile-grid textarea,
html body #talent-settings-modal .tt-settings-body input,
html body #talent-settings-modal .tt-settings-body select {
    width: 100% !important;
    height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid var(--tt-modal-input-border) !important;
    border-radius: 6px !important;
    background: var(--tt-modal-input-bg) !important;
    color: var(--tt-modal-text) !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}
html body #talent-profile-modal .tt-profile-grid textarea {
    height: auto !important;
    min-height: 48px !important;
    padding: 6px 10px !important;
    line-height: 1.4 !important;
    resize: vertical !important;
}
#tt-account-modal .modal-body input:focus,
#tt-prefs-modal .modal-body select:focus,
html body #talent-profile-modal .talent-profile-fields input:focus,
html body #talent-profile-modal .tt-profile-grid input:focus,
html body #talent-profile-modal .tt-profile-grid textarea:focus,
html body #talent-settings-modal .tt-settings-body input:focus,
html body #talent-settings-modal .tt-settings-body select:focus {
    border-color: var(--tt-modal-input-border-focus) !important;
    box-shadow: 0 0 0 3px var(--tt-modal-accent-soft) !important;
}
#tt-account-modal .modal-body input:disabled {
    background: #f3f4f6 !important;
    color: var(--tt-modal-text-muted) !important;
    cursor: not-allowed !important;
}

/* Select-Caret */
#tt-prefs-modal .modal-body select,
html body #talent-settings-modal .tt-settings-body select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
}

/* ═════════════════════════════════════════════════════════════════════
   FOOTER — sticky bottom, sauberer Aktion-Stripe
   ═════════════════════════════════════════════════════════════════════ */
#tt-account-modal .modal-footer,
#tt-prefs-modal .modal-footer,
html body #talent-profile-modal .talent-modal-actions,
html body #talent-settings-modal .talent-modal-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border-top: 1px solid var(--tt-modal-section-border) !important;
    background: var(--tt-modal-bg) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

#tt-account-modal .modal-footer button,
#tt-prefs-modal .modal-footer button,
html body #talent-profile-modal .talent-modal-actions button,
html body #talent-settings-modal .talent-modal-actions button {
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease !important;
    box-shadow: none !important;
    letter-spacing: 0.01em !important;
}
#tt-account-modal .modal-footer .btn-secondary,
#tt-prefs-modal .modal-footer .btn-secondary,
html body #talent-profile-modal .talent-modal-actions .btn-secondary,
html body #talent-settings-modal .talent-modal-actions .btn-secondary {
    background: var(--tt-modal-bg) !important;
    color: var(--tt-modal-text) !important;
    border: 1px solid var(--tt-modal-input-border) !important;
}
#tt-account-modal .modal-footer .btn-secondary:hover,
#tt-prefs-modal .modal-footer .btn-secondary:hover,
html body #talent-profile-modal .talent-modal-actions .btn-secondary:hover,
html body #talent-settings-modal .talent-modal-actions .btn-secondary:hover {
    background: var(--tt-modal-brand-soft) !important;
    border-color: #94a3b8 !important;
}
#tt-account-modal .modal-footer .btn-primary,
#tt-prefs-modal .modal-footer .btn-primary,
html body #talent-profile-modal .talent-modal-actions .btn-primary,
html body #talent-settings-modal .talent-modal-actions .btn-primary {
    background: var(--tt-modal-brand) !important;
    color: #ffffff !important;
    border: 1px solid var(--tt-modal-brand) !important;
}
#tt-account-modal .modal-footer .btn-primary:hover,
#tt-prefs-modal .modal-footer .btn-primary:hover,
html body #talent-profile-modal .talent-modal-actions .btn-primary:hover,
html body #talent-settings-modal .talent-modal-actions .btn-primary:hover {
    background: #1f2940 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   ADMIN: Einstellungen-Modal — Sprache + Branding Section
   ═════════════════════════════════════════════════════════════════════ */
#tt-prefs-modal .modal-body .tt-prefs-section {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
}
#tt-prefs-modal .modal-body .tt-prefs-section + .tt-prefs-section {
    padding-top: 12px !important;
    border-top: 1px solid var(--tt-modal-section-border) !important;
    margin-top: 1px !important;
}
#tt-prefs-modal .modal-body .tt-prefs-branding {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#tt-prefs-modal .modal-body .tt-prefs-branding > label {
    margin: 0 !important;
}
#tt-prefs-modal .modal-body .tt-prefs-logo-preview {
    border: 1px dashed var(--tt-modal-input-border) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: var(--tt-modal-brand-soft) !important;
    min-height: 60px !important;
}
#tt-prefs-modal .modal-body .tt-prefs-logo-preview img {
    max-height: 40px !important;
    max-width: 180px !important;
    object-fit: contain !important;
}
#tt-prefs-modal .modal-body input[type="file"] {
    width: 100% !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    color: var(--tt-modal-text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
}
#tt-prefs-modal .modal-body input[type="file"]::file-selector-button {
    height: 28px !important;
    padding: 0 10px !important;
    margin-right: 8px !important;
    border-radius: 5px !important;
    border: 1px solid var(--tt-modal-input-border) !important;
    background: var(--tt-modal-bg) !important;
    color: var(--tt-modal-text) !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}
#tt-prefs-modal .modal-body input[type="file"]::file-selector-button:hover {
    background: var(--tt-modal-brand-soft) !important;
}
#tt-prefs-modal .modal-body .tt-prefs-hint {
    margin: 0 !important;
    font-size: 11px !important;
    color: var(--tt-modal-text-muted) !important;
    line-height: 1.45 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   ADMIN: Account-Modal Avatar-Sektion
   ═════════════════════════════════════════════════════════════════════ */
#tt-account-modal .tt-account-avatar-section {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: var(--tt-modal-brand-soft) !important;
    border: 1px solid var(--tt-modal-section-border) !important;
    border-radius: 6px !important;
    margin: 0 !important;
}
#tt-account-modal .tt-account-avatar-section .avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--tt-modal-brand) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    flex-shrink: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   TALENT PROFILE-MODAL — kompakter 2-Bereich Redesign
   ═════════════════════════════════════════════════════════════════════ */
html body #talent-profile-modal .talent-modal {
    max-height: calc(100vh - 48px) !important;
}

/* V103ag — Kompakter Row-Layout für Profile-Section.
   Row 1: Avatar (56px inline) + Anzeigename Input flex-grow + Buttons inline
   Row 2: Unterschrift Section full-width
   Spart die ~150px Leerraum die das vorherige 2-Spalten-Layout hatte. */
html body #talent-profile-modal .talent-profile-settings {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 20px 14px !important;
    background: var(--tt-modal-bg) !important;
    border-bottom: 1px solid var(--tt-modal-section-border) !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
}

html body #talent-profile-modal .talent-profile-row-identity {
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
}

html body #talent-profile-modal .talent-profile-preview {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--tt-modal-brand) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

html body #talent-profile-modal .talent-profile-name-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
html body #talent-profile-modal .talent-profile-name-block label {
    margin: 0 !important;
}

html body #talent-profile-modal .talent-profile-image-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    width: auto !important;
}
html body #talent-profile-modal .talent-profile-image-actions button {
    height: 32px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    background: var(--tt-modal-bg) !important;
    color: var(--tt-modal-text) !important;
    border: 1px solid var(--tt-modal-input-border) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    white-space: nowrap !important;
}
html body #talent-profile-modal .talent-profile-image-actions button:hover {
    background: var(--tt-modal-brand-soft) !important;
    border-color: #94a3b8 !important;
}

html body #talent-profile-modal .talent-signature-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 11px !important;
    background: #f8fafc !important;
    border: 1px solid var(--tt-modal-section-border) !important;
    border-radius: 6px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 380px !important;
    align-self: flex-start !important;
}
html body #talent-profile-modal .talent-signature-inline > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
}
html body #talent-profile-modal .talent-signature-inline strong {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--tt-modal-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html body #talent-profile-modal .talent-signature-inline span {
    font-size: 11px !important;
    color: var(--tt-modal-text-muted) !important;
}
html body #talent-profile-modal .talent-signature-inline button {
    height: 28px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background: var(--tt-modal-bg) !important;
    color: var(--tt-modal-text) !important;
    border: 1px solid var(--tt-modal-input-border) !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
html body #talent-profile-modal .talent-signature-inline button:hover {
    background: var(--tt-modal-brand-soft) !important;
}

/* Rechnungsprofil-Section: 4-Spalten-Grid */
html body #talent-profile-modal .tt-profile-section {
    padding: 12px 20px 14px !important;
    background: var(--tt-modal-bg) !important;
    border-top: 0 !important;
}
html body #talent-profile-modal .tt-profile-section h3 {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--tt-modal-text) !important;
    margin: 0 0 2px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html body #talent-profile-modal .tt-profile-section .tt-profile-hint {
    font-size: 11px !important;
    color: var(--tt-modal-text-muted) !important;
    margin: 0 0 10px !important;
}
html body #talent-profile-modal .tt-profile-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
}
html body #talent-profile-modal .tt-profile-full {
    grid-column: 1 / -1 !important;
}
/* V103ai — Adresse nimmt 2 von 4 Spalten (halb) statt full-width */
html body #talent-profile-modal .tt-profile-half {
    grid-column: span 2 !important;
}
/* Kleinunternehmer-Check spannt full-row damit IBAN sauber in Row 3
   startet (sonst rutscht IBAN in die leeren Spalten rechts der Checkbox). */
html body #talent-profile-modal .tt-profile-check {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 1px !important;
    height: 28px !important;
    padding: 0 2px !important;
}
html body #talent-profile-modal .tt-profile-check input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    accent-color: var(--tt-modal-brand) !important;
    cursor: pointer !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
}
html body #talent-profile-modal .tt-profile-check span {
    font-size: 12px !important;
    color: var(--tt-modal-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE — alle Grids 1-Spalte
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    html body #talent-profile-modal .talent-modal,
    html body #talent-profile-modal > .talent-modal {
        max-width: 100% !important;
    }
    html body #talent-profile-modal .talent-profile-settings {
        grid-template-columns: 1fr !important;
    }
    html body #talent-profile-modal .tt-profile-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    #tt-account-modal .modal-body,
    #tt-prefs-modal .modal-body,
    html body #talent-settings-modal .tt-settings-body {
        grid-template-columns: 1fr !important;
    }
    #tt-account-modal .modal-body > div:has(#tt-acc-initials) {
        max-width: 100% !important;
    }
}