/**
 * Mobile Site Content Styles
 * iOS-Style für alle Site-Detailseiten
 * Uses CSS Variables from mobile-core.css
 *
 * Komponenten:
 * - Listen-Items (für Tabellen-Daten)
 * - Settings Cards (für Einstellungen)
 * - Action Bottom Sheets
 * - Form Elements
 * - Collapsible Sections
 */

/* ============================================
   DEFAULT: VERSTECKT AUF DESKTOP
   ============================================ */

.mobile-site-content,
.mobile-content-list,
.mobile-settings-card,
.mobile-action-sheet-overlay,
.mobile-action-sheet {
  display: none;
}

/* ============================================
   MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {

  /* ============================================
     DESKTOP CONTENT VERSTECKEN
     ============================================ */

  /* Desktop Cards auf Site-Seiten verstecken */
  .site-content-wrapper .card,
  .site-content-wrapper .table-responsive {
    display: none;
  }

  /* Desktop General Content verstecken - alles in main außer mobile Komponenten */
  main > .card,
  main > .row,
  main > form:not(.mobile-form) {
    display: none;
  }

  /* Desktop Site-General Menü verstecken (hat spezifische Labels) */
  main > .mb-4:not(.mobile-only),
  main > .mt-4:not(.mobile-only) {
    display: none;
  }

  /* Alle Desktop-Inhalte in main verstecken die nicht mobile-only sind */
  /* Ausnahmen: mobile-only, mobile-site-content, mobile-site-nav, mobileSiteNav, script, container-limited-width (Admin) */
  /* NOTE: !important is required here to override inline styles and JS-set display values */
  main > *:not(.mobile-only):not(.mobile-site-content):not(.mobile-site-nav):not(#mobileSiteNav):not(script):not(.container-limited-width) {
    display: none !important;
  }

  /* Sicherstellen dass mobile Komponenten sichtbar sind */
  /* NOTE: !important is required to ensure mobile content is always visible regardless of other styles */
  main .mobile-only,
  main .mobile-site-content,
  main .mobile-site-nav,
  main #mobileSiteNav {
    display: block !important;
  }

  /* Mobile Content anzeigen */
  .mobile-site-content {
    display: block;
    padding: 0 var(--spacing-md) var(--spacing-xl);
  }

  /* Abstand zum Navigation reduzieren - direkt nach Nav */
  .mobile-site-nav + .mobile-site-content,
  #mobileSiteNav + .mobile-site-content {
    margin-top: calc(-1 * var(--spacing-sm));
  }

  /* ============================================
     SECTION HEADER
     ============================================ */

  .mobile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) 0 12px;
  }

  /* Reduce top padding for first section header (standalone pages like Account) */
  .mobile-site-content > .mobile-section-header:first-child {
    padding-top: var(--spacing-sm);
  }

  .mobile-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .mobile-section-action {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  a.mobile-section-action:link,
  a.mobile-section-action:visited,
  a.mobile-section-action:hover,
  a.mobile-section-action:active {
    text-decoration: none;
    color: var(--color-primary);
  }

  .mobile-section-action:active {
    opacity: 0.5;
  }

  /* ============================================
     CONTENT LIST (iOS Grouped Card)
     ============================================ */

  .mobile-content-list {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* ============================================
     LIST ITEM
     ============================================ */

  .mobile-list-item {
    display: flex;
    align-items: center;
    padding: 12px var(--spacing-md);
    gap: 12px;
    position: relative;
    min-height: 60px;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
  }

  /* Link styling - higher specificity to override Bootstrap's a { text-decoration: underline } */
  .mobile-content-list a.mobile-list-item,
  .mobile-content-list a.mobile-list-item:link,
  .mobile-content-list a.mobile-list-item:visited,
  .mobile-content-list a.mobile-list-item:hover,
  .mobile-content-list a.mobile-list-item:active {
    text-decoration: none;
    color: inherit;
  }

  .mobile-list-item:active {
    background-color: var(--color-hover);
  }

  /* Separator */
  .mobile-list-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--spacing-md);
    right: 0;
    height: 0.5px;
    background-color: var(--color-separator);
  }

  /* Status Indicator */
  .mobile-list-item .status-indicator {
    width: 4px;
    height: 44px;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .status-indicator.status-green,
  .status-indicator.status-success {
    background-color: var(--color-success);
  }

  .status-indicator.status-orange,
  .status-indicator.status-warning {
    background-color: var(--color-warning);
  }

  .status-indicator.status-red,
  .status-indicator.status-error {
    background-color: var(--color-danger);
  }

  .status-indicator.status-blue,
  .status-indicator.status-info {
    background-color: var(--color-primary);
  }

  .status-indicator.status-gray,
  .status-indicator.status-inactive {
    background-color: var(--color-text-secondary);
  }

  /* Item Content */
  .mobile-list-item .item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-list-item .item-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
  }

  .mobile-list-item .item-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
  }

  .mobile-list-item .item-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    line-height: 1.3;
  }

  .mobile-list-item .item-meta .separator {
    color: var(--color-chevron);
  }

  /* Item Badge */
  .mobile-list-item .item-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-xs);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
  }

  .mobile-list-item .item-badge.badge-success {
    background-color: rgba(52, 199, 89, 0.15);
    color: var(--color-success);
  }

  .mobile-list-item .item-badge.badge-warning {
    background-color: rgba(255, 149, 0, 0.15);
    color: var(--color-warning);
  }

  .mobile-list-item .item-badge.badge-error {
    background-color: rgba(255, 59, 48, 0.15);
    color: var(--color-danger);
  }

  /* Item Action Button */
  .mobile-list-item .item-action {
    width: var(--touch-target);
    height: var(--touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-chevron);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    margin-right: calc(-1 * var(--spacing-sm));
  }

  .mobile-list-item .item-action:active {
    opacity: 0.5;
  }

  /* Item Chevron */
  .mobile-list-item .item-chevron {
    color: var(--color-chevron);
    font-size: 14px;
    flex-shrink: 0;
  }

  /* ============================================
     SETTINGS CARD
     ============================================ */

  .mobile-settings-card {
    display: block;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
  }

  .mobile-settings-card .settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px var(--spacing-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-settings-card .settings-header:active {
    background-color: var(--color-hover);
  }

  .mobile-settings-card .settings-header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
  }

  .mobile-settings-card .settings-chevron {
    color: var(--color-chevron);
    font-size: 14px;
    transition: transform var(--transition-smooth);
  }

  .mobile-settings-card.collapsed .settings-chevron {
    transform: rotate(-90deg);
  }

  .mobile-settings-card .settings-content {
    border-top: 0.5px solid var(--color-separator);
    overflow: hidden;
    transition: max-height var(--transition-smooth);
  }

  .mobile-settings-card.collapsed .settings-content {
    max-height: 0;
    border-top: none;
  }

  /* Settings Row */
  .mobile-settings-card .setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px var(--spacing-md);
    min-height: var(--touch-target);
  }

  .mobile-settings-card .setting-row:not(:last-child) {
    border-bottom: 0.5px solid var(--color-separator);
  }

  .mobile-settings-card .setting-label {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
  }

  .mobile-settings-card .setting-value {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: right;
  }

  /* Setting with Input */
  .mobile-settings-card .setting-row.setting-input {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .mobile-settings-card .setting-row.setting-input .setting-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* ============================================
     TOGGLE SWITCH (iOS Style)
     ============================================ */

  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
  }

  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-toggle-off);
    border-radius: 31px;
    transition: background-color var(--transition-normal);
  }

  .toggle-slider::before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: var(--radius-full);
    transition: transform var(--transition-normal);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-success);
  }

  .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
  }

  /* ============================================
     SITES CHECKBOX LIST (iOS Style)
     ============================================ */

  /* Container for sites selection - stacked layout */
  /* Higher specificity to override .setting-row default flex layout */
  html body .settings-content .setting-row:has(.sites-checkbox-list),
  html body .settings-content #sitesSelection,
  html body .mobile-settings-card .setting-row:has(.sites-checkbox-list) {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .setting-row:has(.sites-checkbox-list) > .setting-label,
  #sitesSelection > .setting-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--spacing-sm);
  }

  .sites-checkbox-list {
    margin-top: var(--spacing-xs);
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  html.dark .sites-checkbox-list {
    background-color: var(--color-bg-tertiary);
  }

  /* Higher specificity to ensure flex display for checkbox items */
  html body .sites-checkbox-list .site-checkbox,
  html body label.site-checkbox {
    display: flex;
    align-items: center;
    padding: 14px var(--spacing-md);
    border-bottom: 0.5px solid var(--color-separator);
    cursor: pointer;
    margin: 0;
  }

  .site-checkbox:last-child {
    border-bottom: none;
  }

  .site-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-right: 12px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    border-radius: var(--radius-xs);
  }

  .site-checkbox-label {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-regular);
  }

  /* ============================================
     FORM INPUTS
     ============================================ */

  .mobile-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    background-color: var(--color-bg-input);
    -webkit-appearance: none;
    appearance: none;
  }

  .mobile-input::placeholder {
    color: var(--color-text-placeholder);
  }

  .mobile-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
  }

  /* Select */
  .mobile-select {
    width: 100%;
    padding: 12px 36px 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    background-color: var(--color-bg-input);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E8E93' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-appearance: none;
    appearance: none;
  }

  .mobile-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
  }

  /* Textarea */
  .mobile-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--color-text-primary);
    background-color: var(--color-bg-input);
    resize: vertical;
    min-height: 100px;
    -webkit-appearance: none;
  }

  /* ============================================
     ACTION BUTTONS
     ============================================ */

  .mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 14px var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-btn-primary {
    background-color: var(--color-primary);
    color: #FFFFFF;
  }

  .mobile-btn-primary:active {
    background-color: var(--color-primary-hover);
  }

  .mobile-btn-secondary {
    background-color: var(--color-bg-secondary);
    color: var(--color-primary);
  }

  .mobile-btn-secondary:active {
    background-color: var(--color-border);
  }

  .mobile-btn-destructive {
    background-color: var(--color-danger);
    color: #FFFFFF;
  }

  .mobile-btn-destructive:active {
    background-color: var(--color-danger-dark);
  }

  .mobile-btn-text {
    background: none;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--radius-sm);
  }

  .mobile-btn-text:active {
    background-color: var(--color-primary-alpha);
  }

  /* ============================================
     ACTION BOTTOM SHEET
     ============================================ */

  .mobile-action-sheet-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-sheet);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
  }

  .mobile-action-sheet-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  .mobile-action-sheet {
    display: block;
    position: fixed;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    bottom: var(--spacing-sm);
    z-index: calc(var(--z-sheet) + 1);
    transform: translateY(calc(100% + var(--spacing-md)));
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.4s;
    visibility: hidden;
  }

  .mobile-action-sheet.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
  }

  .mobile-action-sheet .action-sheet-content {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
  }

  html.dark .mobile-action-sheet .action-sheet-content {
    background-color: var(--color-bg-tertiary);
  }

  .mobile-action-sheet .action-sheet-header {
    padding: 14px var(--spacing-md);
    text-align: center;
    border-bottom: 0.5px solid var(--color-separator);
  }

  .mobile-action-sheet .action-sheet-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--spacing-xs);
  }

  .mobile-action-sheet .action-sheet-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .mobile-action-sheet .action-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 18px var(--spacing-md);
    background-color: var(--color-action-item-bg);
    border: none;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    color: var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-action-sheet .action-item:not(:last-child) {
    border-bottom: 0.5px solid var(--color-separator);
  }

  .mobile-action-sheet .action-item:active {
    background-color: var(--color-hover);
  }

  .mobile-action-sheet .action-item.action-destructive {
    color: var(--color-danger);
  }

  .mobile-action-sheet .action-item i {
    font-size: var(--font-size-xl);
  }

  /* Cancel Button */
  .mobile-action-sheet .action-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px var(--spacing-md);
    background-color: var(--color-bg-card);
    border: none;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-action-sheet .action-cancel:active {
    background-color: var(--color-bg-secondary);
  }

  /* ============================================
     FILTER BAR (für Logs)
     ============================================ */

  .mobile-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--spacing-md);
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
  }

  .mobile-filter-bar .filter-row {
    display: flex;
    gap: var(--spacing-sm);
  }

  .mobile-filter-bar .filter-row .mobile-select {
    flex: 1;
  }

  .mobile-filter-bar .filter-btn {
    padding: 12px var(--spacing-md);
    background-color: var(--color-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  /* ============================================
     CODE EDITOR CARD
     ============================================ */

  .mobile-editor-card {
    background-color: var(--editor-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .mobile-editor-card .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--spacing-md);
    background-color: var(--editor-header-bg);
  }

  .mobile-editor-card .editor-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--editor-text);
  }

  .mobile-editor-card .editor-save {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
  }

  .mobile-editor-card .monaco-editor-container {
    height: 400px;
  }

  /* ============================================
     EMPTY STATE
     ============================================ */

  .mobile-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    text-align: center;
  }

  .mobile-empty-state i {
    font-size: 48px;
    color: var(--color-chevron);
    margin-bottom: var(--spacing-md);
  }

  .mobile-empty-state .empty-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
  }

  .mobile-empty-state .empty-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
  }

  /* ============================================
     INFO CARD (für File Manager Platzhalter)
     ============================================ */

  .mobile-info-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .mobile-info-card img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
  }

  .mobile-info-card i {
    font-size: 48px;
    color: var(--color-primary);
    opacity: 0.5;
  }

  .mobile-info-card h4,
  .mobile-info-card .info-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
  }

  .mobile-info-card p,
  .mobile-info-card .info-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 280px;
    line-height: 1.4;
  }

  /* ============================================
     SECTION SELECTOR (iOS Segmented Control)
     ============================================ */

  .mobile-section-selector {
    display: flex;
    margin: 0 var(--spacing-md) var(--spacing-md);
    padding: 2px;
    background-color: var(--color-segmented-bg);
    border-radius: 9px;
    overflow: hidden;
  }

  .mobile-section-selector .section-tab {
    flex: 1;
    padding: 7px 12px;
    background-color: transparent;
    border-radius: 7px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .mobile-section-selector .section-tab.active {
    background-color: var(--color-segmented-active);
    box-shadow: var(--shadow-sm);
  }

  .mobile-section-selector .section-tab:active:not(.active) {
    background-color: var(--color-hover);
  }

  /* ============================================
     STATS GRID (für Traffic)
     ============================================ */

  .mobile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }

  .mobile-stat-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .mobile-stat-card .stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
  }

  .mobile-stat-card .stat-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* ============================================
     INFO BOX (innerhalb Settings Cards)
     ============================================ */

  .mobile-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    width: 100%;
  }

  .mobile-info-box i {
    font-size: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .mobile-info-box p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
  }

  /* ============================================
     SETTING HINTS & GROUPS
     ============================================ */

  .setting-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
    line-height: 1.3;
  }

  .setting-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }

  .setting-label-group .setting-label {
    font-size: var(--font-size-lg);
  }

  .setting-label-group .setting-hint {
    margin-top: 0;
  }

  /* Action Button in Settings Row */
  .setting-action-btn {
    padding: var(--spacing-sm) 12px;
    background-color: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    cursor: pointer;
    margin-top: var(--spacing-sm);
    align-self: flex-start;
    -webkit-tap-highlight-color: transparent;
  }

  .setting-action-btn:active {
    background-color: var(--color-border);
  }

  /* ============================================
     SETTINGS MENU (iOS Settings Style)
     ============================================ */

  .mobile-settings-menu {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--spacing-md);
  }

  /* Direktes Settings-Menü ohne Header davor - weniger Abstand */
  .mobile-site-content > .mobile-settings-menu:first-child {
    margin-top: 0;
  }

  .mobile-settings-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--spacing-md);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    border-bottom: 0.5px solid var(--color-separator);
  }

  /* Override Bootstrap link styles - using high specificity instead of !important */
  html body .mobile-settings-menu-item,
  html body .mobile-settings-menu-item *,
  html body a.mobile-settings-menu-item,
  html body a.mobile-settings-menu-item:link,
  html body a.mobile-settings-menu-item:visited,
  html body a.mobile-settings-menu-item:hover,
  html body a.mobile-settings-menu-item:active,
  html body .mobile-settings-menu-item .menu-item-title,
  html body .mobile-settings-menu-item .menu-item-value {
    text-decoration: none;
  }

  .mobile-settings-menu-item:last-child {
    border-bottom: none;
  }

  .mobile-settings-menu-item:active {
    background-color: var(--color-hover);
  }

  .mobile-settings-menu-item .menu-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .mobile-settings-menu-item .menu-item-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
  }

  .mobile-settings-menu-item .menu-item-value {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-settings-menu-item .menu-item-count {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-right: var(--spacing-sm);
  }

  .mobile-settings-menu-item .menu-item-chevron {
    font-size: 14px;
    color: var(--color-chevron);
    flex-shrink: 0;
  }

  /* ============================================
     ALIASES LIST (iOS Style)
     ============================================ */

  .mobile-aliases-list {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .mobile-alias-item {
    border-bottom: 0.5px solid var(--color-separator);
  }

  .mobile-alias-item:last-child {
    border-bottom: none;
  }

  .mobile-alias-item .alias-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--spacing-md);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-alias-item .alias-content:active {
    background-color: var(--color-hover);
  }

  .mobile-alias-item .alias-info {
    flex: 1;
    min-width: 0;
  }

  .mobile-alias-item .alias-domain {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-alias-item .alias-chevron {
    font-size: 14px;
    color: var(--color-chevron);
    flex-shrink: 0;
  }

  /* Empty State for Aliases */
  .mobile-aliases-list .mobile-empty-state h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
  }

  .mobile-aliases-list .mobile-empty-state p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
  }

  /* ============================================
     DESTRUCTIVE ROW (iOS Style Delete Button)
     ============================================ */

  .mobile-destructive-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 14px var(--spacing-md);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-danger);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-destructive-row:active {
    background-color: rgba(255, 59, 48, 0.1);
  }

  html.dark .mobile-destructive-row:active {
    background-color: rgba(255, 69, 58, 0.15);
  }

  .mobile-destructive-row i {
    font-size: 18px;
  }

  /* Danger Hint Text */
  .mobile-hint-danger {
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0;
  }

  /* ============================================
     ALERT BOXES
     ============================================ */

  .mobile-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: 14px;
    line-height: 1.4;
  }

  .mobile-alert i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .mobile-alert-danger {
    background-color: rgba(255, 59, 48, 0.1);
    color: #D32F2F;
  }

  .mobile-alert-danger i {
    color: var(--color-danger);
  }

  html.dark .mobile-alert-danger {
    background-color: rgba(255, 69, 58, 0.15);
    color: #FF6B6B;
  }

  /* ============================================
     DOMAIN ROW (Dynamic List Input)
     ============================================ */

  .domain-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .domain-row .mobile-input {
    flex: 1;
  }

  .mobile-btn-icon-danger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-danger);
    font-size: 16px;
    cursor: pointer;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-btn-icon-danger:active {
    background-color: rgba(255, 59, 48, 0.1);
  }

  html.dark .mobile-btn-icon-danger:active {
    background-color: rgba(255, 69, 58, 0.15);
  }

  /* ============================================
     SAFE AREA
     ============================================ */

  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-site-content {
      padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
    }

    .mobile-action-sheet {
      bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom));
    }
  }

  /* ============================================
     ADMIN PAGES - Mobile Support
     ============================================ */

  /* Keep admin container chain visible when it contains mobile content */
  /* NOTE: !important required to override main > *:not() rule and Bootstrap inline styles */
  main.main-container > .container-fluid.container-limited-width,
  main.main-container .container-fluid.container-limited-width .admin-container,
  main.main-container .container-fluid.container-limited-width .admin-container > .admin-content-container:first-of-type {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide desktop-only admin elements */
  /* NOTE: !important required to guarantee hiding regardless of JS/inline styles */
  main .admin-container > .page-header,
  main .admin-container > .admin-info-container,
  main .admin-container > .admin-content-container .tab-container,
  main .admin-container > .admin-content-container > .admin-content-container,
  main .admin-container > .admin-content-container .card:not(.mobile-settings-card) {
    display: none !important;
  }

  /* Ensure mobile content in admin pages is visible */
  /* NOTE: !important required to guarantee visibility regardless of parent rules */
  main .admin-content-container .mobile-site-content,
  main .admin-content-container .mobile-only {
    display: block !important;
  }

  /* ============================================
     BOTTOM SHEET FORM HEADER
     Shared styles for all form-type bottom sheets
     (SSH/FTP, Cron Jobs, etc.)
     ============================================ */

  .bottom-sheet-header-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 0.5px solid var(--color-separator);
  }

  .bottom-sheet-header-form h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    flex: 1;
    text-align: center;
  }

  .form-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: var(--font-size-xl);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--radius-full);
  }

  .form-header-btn:active {
    background-color: var(--color-bg-tertiary);
  }

  .form-header-cancel {
    color: var(--color-text-secondary);
  }

  .form-header-save {
    color: var(--color-primary);
  }

  /* Sheet input rows - consistent padding for form fields in sheets */
  .sheet-input-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .sheet-input-row .setting-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
}