/**
 * HTN Mobile Stylesheet
 * Optimiert für Smartphone-Nutzung
 * Version: 1.0
 */

/* ============================================
   CSS VARIABLEN
   ============================================ */
:root {
  --mobile-primary: #2c3e50;
  --mobile-secondary: #3498db;
  --mobile-success: #27ae60;
  --mobile-danger: #e74c3c;
  --mobile-warning: #f39c12;
  --mobile-bg: #f5f5f5;
  --mobile-card-bg: #ffffff;
  --mobile-text: #333333;
  --mobile-text-muted: #7f8c8d;
  --mobile-border: #ddd;
  --mobile-shadow: 0 2px 4px rgba(0,0,0,0.1);
  --mobile-radius: 8px;
  --mobile-touch-size: 44px;
  --mobile-spacing: 12px;
}

/* ============================================
   BASE RESET FÜR MOBILE
   ============================================ */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Text-Selection für Inputs erlauben */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* iOS Safari 100vh Fix */
  height: -webkit-fill-available;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--mobile-bg);
  color: var(--mobile-text);
  margin: 0;
  padding: 0;
  /* Safe Area für iPhone X+ (Notch + Home-Indicator) */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: calc(70px + env(safe-area-inset-bottom)); /* Platz für Bottom-Nav + Safe Area */
  /* iOS Safari 100vh Fix */
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* ============================================
   HEADER
   ============================================ */
h1 {
  background: var(--mobile-primary) !important;
  color: white !important;
  height: auto !important;
  min-height: 50px;
  margin: 0 !important;
  padding: 12px !important;
  text-align: center;
  font-size: 14px !important;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--mobile-shadow);
}

h1 img,
h1 .logo {
  max-height: 35px;
  width: auto;
}

/* Status-Anzeigen im Header */
#generation-time,
#server-time,
#bug-report-btn {
  position: static !important;
  display: inline-block;
  font-size: 10px !important;
  padding: 2px 6px;
  margin: 2px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

/* ============================================
   MOBILE NAVIGATION (Horizontal)
   ============================================ */
ul.navigation {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto !important;
  margin: 0 !important;
  /* Safe Area für iPhone X+ Home-Indicator */
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: space-around;
  background: var(--mobile-card-bg);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  z-index: 1000;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Verhindert Rubber-Banding beim Scrollen */
  overscroll-behavior: contain;
}

ul.navigation li {
  border: none !important;
  background: none !important;
  margin: 0 !important;
  flex: 1;
  min-width: 60px;
  max-width: 80px;
}

ul.navigation a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 8px 4px !important;
  font-size: 10px !important;
  color: var(--mobile-text-muted) !important;
  text-align: center;
  min-height: var(--mobile-touch-size);
  text-decoration: none !important;
}

ul.navigation a:hover,
ul.navigation a:active {
  background: rgba(52, 152, 219, 0.1) !important;
  color: var(--mobile-secondary) !important;
}

ul.navigation a strong {
  font-size: 10px !important;
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

ul.navigation a em,
ul.navigation a br,
ul.navigation div.help {
  display: none !important;
}

/* ============================================
   CONTENT BEREICH
   ============================================ */
div.content {
  margin: 0 !important;
  padding: var(--mobile-spacing) !important;
  background: var(--mobile-bg);
}

/* ============================================
   ÜBERSCHRIFTEN
   ============================================ */
h2 {
  background-color: var(--mobile-card-bg) !important;
  background-size: 32px 32px !important;
  background-position: 10px center !important;
  border: none !important;
  border-left: 4px solid var(--mobile-secondary) !important;
  border-radius: var(--mobile-radius);
  box-shadow: var(--mobile-shadow);
  color: var(--mobile-primary) !important;
  font-size: 16px !important;
  margin: 0 0 var(--mobile-spacing) !important;
  padding: 12px 12px 12px 50px !important;
  text-transform: none !important;
}

h3 {
  background-size: 24px 24px !important;
  background-position: 0 center !important;
  font-size: 14px !important;
  font-weight: 600;
  height: auto !important;
  margin: var(--mobile-spacing) 0 8px 0 !important;
  padding: 8px 8px 8px 32px !important;
  text-decoration: none !important;
  color: var(--mobile-primary);
  border-bottom: 1px solid var(--mobile-border);
}

h4 {
  font-size: 13px !important;
  margin: 15px 0 8px 0 !important;
  color: var(--mobile-text-muted);
}

/* ============================================
   CARDS (für Inhaltsblöcke)
   ============================================ */
.important, .ok, .error, .tip, .info, .work {
  background: var(--mobile-card-bg);
  border-radius: var(--mobile-radius);
  box-shadow: var(--mobile-shadow);
  margin: var(--mobile-spacing) 0;
  padding: var(--mobile-spacing);
}

.important { border-left: 4px solid var(--mobile-warning); }
.ok { border-left: 4px solid var(--mobile-success); }
.error { border-left: 4px solid var(--mobile-danger); }
.tip, .info { border-left: 4px solid var(--mobile-secondary); }

.important h3,
.ok h3,
.error h3,
.tip h3,
.info h3,
.work h3 {
  margin-top: 0 !important;
  border-bottom: none !important;
}

/* ============================================
   ABSÄTZE UND LISTEN
   ============================================ */
p, dl, ul {
  margin: 0 0 var(--mobile-spacing) 0 !important;
}

ul {
  padding-left: 20px;
}

dt {
  font-weight: 600;
  margin-top: 10px;
  color: var(--mobile-primary);
}

dd {
  margin-left: 0;
  padding-left: 15px;
  border-left: 2px solid var(--mobile-border);
}

/* ============================================
   TABELLEN - MOBILE OPTIMIERT
   ============================================ */
table {
  width: 100% !important;
  margin: var(--mobile-spacing) 0 !important;
  border-collapse: collapse;
  background: var(--mobile-card-bg);
  border-radius: var(--mobile-radius);
  box-shadow: var(--mobile-shadow);
  overflow: hidden;
  display: table !important;
}

/* Horizontales Scrollen für breite Tabellen */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--mobile-spacing) 0;
}

th {
  background: var(--mobile-primary) !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 600;
  padding: 10px 8px !important;
  text-align: left;
  white-space: nowrap;
}

td {
  background: var(--mobile-card-bg) !important;
  border-bottom: 1px solid var(--mobile-border);
  font-size: 12px !important;
  padding: 10px 8px !important;
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tr:nth-child(even) td {
  background: #fafafa !important;
}

/* Spezielle Tabellenzellen */
td.number, td.ip, td.owner, td.cluster {
  background-size: 20px 20px !important;
  background-position: 5px center !important;
  padding-left: 30px !important;
  height: auto !important;
}

/* ============================================
   FORMULARE - TOUCH-OPTIMIERT
   ============================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--mobile-touch-size);
  padding: 12px !important;
  font-size: 16px !important; /* Verhindert iOS Zoom */
  border: 1px solid var(--mobile-border) !important;
  border-radius: var(--mobile-radius) !important;
  background: var(--mobile-card-bg);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--mobile-secondary) !important;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ============================================
   BUTTONS - TOUCH-OPTIMIERT
   ============================================ */
input[type="submit"],
input[type="button"],
input[type="reset"],
button,
.btn {
  min-height: var(--mobile-touch-size);
  min-width: var(--mobile-touch-size);
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600;
  border: none !important;
  border-radius: var(--mobile-radius) !important;
  background: var(--mobile-secondary) !important;
  color: white !important;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  margin: 4px 2px;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s, transform 0.1s;
}

input[type="submit"]:active,
button:active,
.btn:active {
  transform: scale(0.98);
  background: #2980b9 !important;
}

.btn-primary {
  background: var(--mobile-secondary) !important;
}

.btn-success {
  background: var(--mobile-success) !important;
}

.btn-danger {
  background: var(--mobile-danger) !important;
}

.btn-warning {
  background: var(--mobile-warning) !important;
}

.btn-sm {
  min-height: 36px;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
  color: var(--mobile-secondary);
  text-decoration: none;
  padding: 2px 0;
}

a:active {
  color: #2980b9;
}

/* Touch-freundliche Links in Listen */
ul li a,
dl dd a {
  display: inline-block;
  padding: 4px 0;
}

/* ============================================
   SUBMENU (horizontale Links)
   ============================================ */
div.submenu {
  background: var(--mobile-card-bg);
  border-radius: var(--mobile-radius);
  box-shadow: var(--mobile-shadow);
  margin: var(--mobile-spacing) 0;
  padding: 8px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

div.submenu a,
div.submenu .btn {
  display: inline-block;
  margin: 4px !important;
  white-space: nowrap;
}

div.submenu p {
  margin: 0 !important;
}

/* ============================================
   SPEZIELLE MOBILE-KLASSEN
   ============================================ */
.hide-mobile {
  display: none !important;
}

.show-mobile {
  display: block !important;
}

.mobile-full-width {
  width: 100% !important;
  display: block !important;
}

.mobile-center {
  text-align: center;
}

.mobile-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   CLUSTER / GAME SPEZIFISCH
   ============================================ */
/* Events Box */
#cluster-overview-events td div {
  max-height: 200px;
  overflow-y: auto;
}

/* Distributed Attacks */
#cluster-distributed-attacks td {
  padding-left: 8px !important;
}

#cluster-distributed-attacks td.ip,
#cluster-distributed-attacks td.owner,
#cluster-distributed-attacks td.author {
  background-size: 16px 16px !important;
  padding-left: 24px !important;
  height: auto !important;
}

/* ============================================
   MESSAGES
   ============================================ */
#messages-compose textarea {
  width: 100% !important;
  height: 150px !important;
}

/* ============================================
   RANKING
   ============================================ */
#ranking-user td.number,
#ranking-cluster td.number,
#subnet-content td.ip,
#subnet-content td.owner,
#subnet-content td.cluster {
  background-size: 16px 16px !important;
  padding-left: 24px !important;
  height: auto !important;
}

/* ============================================
   NOTIFICATIONS / ALERTS
   ============================================ */
.alert,
.notification {
  padding: var(--mobile-spacing);
  margin: var(--mobile-spacing) 0;
  border-radius: var(--mobile-radius);
  font-size: 13px;
}

.alert-success { background: #d4edda; color: #155724; border-left: 4px solid var(--mobile-success); }
.alert-danger { background: #f8d7da; color: #721c24; border-left: 4px solid var(--mobile-danger); }
.alert-warning { background: #fff3cd; color: #856404; border-left: 4px solid var(--mobile-warning); }
.alert-info { background: #d1ecf1; color: #0c5460; border-left: 4px solid var(--mobile-secondary); }

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress {
  height: 20px;
  background: var(--mobile-border);
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0;
}

.progress-bar {
  height: 100%;
  background: var(--mobile-secondary);
  border-radius: 10px;
  transition: width 0.3s;
}

/* ============================================
   BADGES / TAGS
   ============================================ */
.badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 12px;
  background: var(--mobile-secondary);
  color: white;
}

.badge-success { background: var(--mobile-success); }
.badge-danger { background: var(--mobile-danger); }
.badge-warning { background: var(--mobile-warning); color: #333; }

/* ============================================
   MINI-ADS VERSTECKEN
   ============================================ */
.miniad,
.ad {
  display: none !important;
}

/* ============================================
   TOUCH FEEDBACK
   ============================================ */
.touchable {
  cursor: pointer;
  transition: background 0.15s;
}

.touchable:active {
  background: rgba(0,0,0,0.05);
}

/* ============================================
   STICKY ELEMENTS
   ============================================ */
.sticky-top {
  position: sticky;
  top: 60px;
  z-index: 50;
  background: var(--mobile-bg);
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--mobile-border);
  border-top-color: var(--mobile-secondary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   EMOJI FIXES
   ============================================ */
.emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ============================================
   LANDSCAPE MODE
   ============================================ */
@media screen and (orientation: landscape) and (max-height: 500px) {
  ul.navigation {
    flex-wrap: nowrap;
  }

  ul.navigation li {
    min-width: 50px;
  }

  body {
    padding-bottom: 55px;
  }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --mobile-bg: #1a1a2e;
    --mobile-card-bg: #16213e;
    --mobile-text: #e0e0e0;
    --mobile-text-muted: #a0a0a0;
    --mobile-border: #333;
    --mobile-primary: #0f3460;
    --mobile-secondary: #e94560;
  }

  h1 {
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%) !important;
  }

  th {
    background: #0f3460 !important;
  }

  input[type="text"],
  input[type="password"],
  textarea,
  select {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
  }

  a {
    color: #e94560;
  }
}

/* ============================================
   SAFARI / iOS SPEZIFISCHE FIXES
   ============================================ */

/* Fix für position:fixed bei geöffneter Tastatur */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari */
  body {
    /* Verhindert Bounce-Effekt */
    position: fixed;
    width: 100%;
    overflow-y: auto;
  }

  /* Header bleibt oben */
  h1 {
    position: sticky;
    top: env(safe-area-inset-top);
  }

  /* Flexbox gap Fallback für ältere Safari */
  ul.navigation {
    gap: 0;
  }
  ul.navigation li {
    margin: 0 2px;
  }

  /* Input Zoom verhindern */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
    transform: translateZ(0);
  }

  /* Smooth Scrolling */
  .content,
  .table-wrapper {
    -webkit-overflow-scrolling: touch;
  }
}

/* Fix für iPhone SE / kleine Bildschirme */
@media screen and (max-width: 375px) {
  ul.navigation li {
    min-width: 50px;
    max-width: 65px;
  }

  ul.navigation a {
    font-size: 9px !important;
    padding: 6px 2px !important;
  }

  ul.navigation a strong {
    font-size: 9px !important;
    max-width: 55px;
  }

  h2 {
    font-size: 14px !important;
    padding: 10px 10px 10px 40px !important;
    background-size: 28px 28px !important;
  }
}

/* Fix für iPhone in Landscape Mode mit Notch */
@media screen and (orientation: landscape) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  ul.navigation {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
}

/* Fix für iOS PWA (Add to Home Screen) */
@media all and (display-mode: standalone) {
  h1 {
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
  }
}