/* ============================================================
   mh-osticket-nextcloud.css  |  osTicket v1.18.x (Client)
   Nextcloud-inspirierter Dark-Glass Look (update-sicher)
   Einbindung: include/client/header.inc.php -> <link ... /css/mh-osticket-nextcloud.css>
   ============================================================ */

/* -------------------------
   0) Design Tokens
-------------------------- */
:root{
  --brand:#5f4c3d;          /* aus Logo */
  --bg0:#070b13;            /* page bg */
  --card:rgba(10,16,28,.58);
  --card2:rgba(10,16,28,.72);
  --field:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);
  --txt:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.46);
  --radius:14px;
  --radius2:12px;
  --shadow:0 18px 48px rgba(0,0,0,.55);
  --focus:0 0 0 3px rgba(95,76,61,.28);
}

/* -------------------------
   1) Base / Hintergrund
-------------------------- */
html,body{height:100%;}
body{
  background:
    radial-gradient(1200px 800px at 18% 12%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 650px at 85% 0%, rgba(95,76,61,.12), transparent 55%),
    radial-gradient(900px 650px at 80% 90%, rgba(15,118,110,.08), transparent 55%),
    url("mh-bg.svg") center/cover no-repeat fixed,
    var(--bg0) !important;
  color:var(--txt);
  text-rendering:optimizeLegibility;
}



a{ color: var(--txt); text-decoration:none; }
a:hover{ color:#fff; text-decoration:underline; }
::selection{ background: rgba(95,76,61,.45); color:#fff; }

/* -------------------------
   2) Haupt-Container
-------------------------- */
#container{
  width:min(1200px, calc(100% - 32px)) !important;
  margin:24px auto !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow: var(--shadow) !important;
  overflow:hidden;
}

/* -------------------------
   3) Header + "Gast | Anmelden"
-------------------------- */
#header{
  position:relative !important;
  height:auto !important;
  padding:18px 22px !important;
  background: rgba(10,16,28,.45) !important;
  border-bottom:1px solid var(--line) !important;
}
#header #logo{ float:none !important; width:auto !important; height:auto !important; }
#header #logo img{ max-height:54px !important; max-width:360px !important; }

/* Rechter Bereich: immer rechts */
#header p{
  position:absolute !important;
  right:22px !important;
  top:18px !important;
  margin:0 !important;
  width:auto !important;
  float:none !important;
  text-align:right !important;
  color:var(--muted) !important;
  z-index:50 !important;
}
#header p a{ color: var(--txt) !important; opacity:.9; }
#header p a:hover{ opacity:1; }

@media (max-width:820px){
  #header p{
    position:static !important;
    width:100% !important;
    margin-top:10px !important;
    text-align:left !important;
  }
}

/* -------------------------
   4) Navigation (Icons behalten)
-------------------------- */
#nav{
  height:auto !important;
  padding:10px 14px !important;
  margin:0 !important;
  background: rgba(10,16,28,.35) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#nav li{ display:block !important; }
#nav li a{
  float:none !important;
  height:auto !important;
  line-height:1 !important;
  padding:10px 14px 10px 38px !important;
  border-radius:999px !important;
  border:1px solid var(--line2) !important;
  background-color: rgba(255,255,255,.05) !important;
  color: var(--txt) !important;
  background-repeat:no-repeat !important;
  background-position: 14px center !important;
}
#nav li a:hover{
  background-color: rgba(255,255,255,.08) !important;
  border-color: rgba(95,76,61,.40) !important;
}
#nav li a.active{
  background-color: rgba(95,76,61,.30) !important;
  border-color: rgba(95,76,61,.70) !important;
}

/* -------------------------
   5) Content Area
-------------------------- */
#content{
  padding:22px !important;
  margin:0 !important;
  background: transparent !important;
  min-height: unset !important;
}
#content, #content *{ color: var(--txt); }

h1{ font-size:28px !important; letter-spacing:-.02em; }
h2{ font-size:18px !important; color: var(--muted) !important; }
h3{ color: var(--muted) !important; }
.small, .faded, .desc{ color: var(--muted) !important; }

#content .content,
#content .body,
#content .container,
#content .section,
#content .panel,
#content .box,
#content .well,
#content .tab_content,
#content .tabs,
#content table,
#content .formTable,
#content .form_table,
#content .alert,
#content .error,
#content .notice{
  background: transparent !important;
  box-shadow:none !important;
}

/* Standard-Card */
#content .formTable,
#content .form_table,
#content .tab_content,
#content .section,
#content .panel,
#content .box,
#content .well,
#ticketForm,
#newticketform,
#ticketStatus,
#ticket-status,
#clientLogin,
#loginBox,
#login-box,
#account,
#signin{
  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow:none !important;
  padding:18px !important;
}

/* -------------------------
   6) Startseite: main-content/thread-body
-------------------------- */
#landing_page .main-content,
#landing_page .thread-body{
  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding:18px !important;
}
#landing_page .thread-body *{ color: var(--txt) !important; }
#landing_page .thread-body p{ background: transparent !important; }

/* -------------------------
   7) Form-Felder
-------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea{
  background: var(--field) !important;
  color: var(--txt) !important;
  border:1px solid var(--line2) !important;
  border-radius: var(--radius2) !important;
  padding:10px 12px !important;
  outline:none !important;
  box-shadow:none !important;
}
input::placeholder, textarea::placeholder{ color: var(--muted2) !important; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(95,76,61,.85) !important;
  box-shadow: var(--focus) !important;
}
select option{
  background:#0a101c !important;
  color: var(--txt) !important;
}
label, .label, .formTable th, .form_table th{
  color: var(--muted) !important;
  font-weight:600;
}

/* -------------------------
   8) Buttons
-------------------------- */
.button,
a.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button{
  background: rgba(255,255,255,.08) !important;
  color: var(--txt) !important;
  border:1px solid var(--line2) !important;
  border-radius: 12px !important;
  padding:10px 14px !important;
  font-weight:700 !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:pointer;
}
.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover{
  filter: brightness(.96);
}
.blue.button,
.button.primary,
input[type="submit"].primary,
input[type="submit"].blue{
  background: var(--brand) !important;
  border-color: rgba(95,76,61,.95) !important;
  color:#fff !important;
}
.green.button{
  background:#0f766e !important;
  border-color: rgba(15,118,110,.95) !important;
  color:#fff !important;
}
#content .buttons, #content .actions, #content .action-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
#content .buttons input, #content .actions input, #content .action-buttons input,
#content .buttons button, #content .actions button{
  min-height:40px;
}

/* -------------------------
   9) Ticket-Thread: weiße Rahmen weg
-------------------------- */
#ticketthread .thread-entry,
#ticketthread .thread-entry .thread-body,
#ticketthread .thread-entry .message,
#ticketthread .thread-entry .entry,
#ticketThread .thread-entry,
#ticketThread .thread-entry .thread-body,
#ticketThread .thread-entry .message,
.thread-entry,
.thread-entry .thread-body,
.thread-entry .message{
  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow:none !important;
  color: var(--txt) !important;
}
#ticketthread .thread-entry .thread-body *,
#ticketThread .thread-entry .thread-body *,
.thread-entry .thread-body *{
  background: transparent !important;
  color: var(--txt) !important;
}
.thread-entry .header, .thread-entry .thread-meta, .thread-entry .info{
  color: var(--muted) !important;
}

/* -------------------------
   10) Tabellen / Linien
-------------------------- */
hr{ border-color: var(--line) !important; }
#content table td, #content table th{ border-color: var(--line) !important; }
#content table{ border-collapse: collapse; }

/* -------------------------
   11) Alerts
-------------------------- */
.error, .alert, .notice{
  border-radius: var(--radius) !important;
  border:1px solid var(--line) !important;
  background: rgba(255,255,255,.06) !important;
}
.error{ border-color: rgba(239,68,68,.45) !important; }
.notice{ border-color: rgba(59,130,246,.45) !important; }

/* -------------------------
   12) Redactor Editor
-------------------------- */
.redactor-box,
.redactor-layer,
.redactor-editor{
  background: var(--field) !important;
  color: var(--txt) !important;
  border:1px solid var(--line2) !important;
  border-radius: var(--radius2) !important;
}
.redactor-editor *{ color: var(--txt) !important; }
.redactor-placeholder,
.redactor-editor .placeholder,
.redactor-editor [data-placeholder]{
  color: var(--muted2) !important;
}
.redactor-toolbar,
.redactor-toolbar li,
.redactor-toolbar a{
  background: var(--card2) !important;
  border-color: var(--line) !important;
}
.redactor-toolbar a{
  color: rgba(255,255,255,.85) !important;
  opacity:1 !important;
}
.redactor-toolbar a:hover{ background: rgba(255,255,255,.08) !important; }

/* -------------------------
   13) Attachments / Dropzone
-------------------------- */
.dropzone, .filedrop, .upload-drop, #filedrop{
  background: rgba(255,255,255,.04) !important;
  border: 1px dashed rgba(255,255,255,.18) !important;
  border-radius: var(--radius) !important;
  color: var(--muted) !important;
}

/* -------------------------
   14) Footer
-------------------------- */
#footer{
  background: rgba(10,16,28,.35) !important;
  border-top:1px solid var(--line) !important;
  color: var(--muted) !important;
}
#footer *{ color: var(--muted) !important; }


/* ============================================================
   15) Responsive (Mobile / Tablet)
   Ziele:
   - Container volle Breite mit weniger Padding
   - Navigation als wrap/scroll ohne Layoutbruch
   - Landing: Textbox + Buttons untereinander (keine "Buchstaben-Spalte")
   - Tabellen (Ticketliste, infoTable) horizontal scroll / stack
   - Reply/Editor kompakt, Toolbar wrap
   ============================================================ */

@media (max-width: 1024px){
  #container{ width: calc(100% - 20px) !important; margin: 14px auto !important; }
  #content{ padding: 16px !important; }
  #header{ padding: 14px 16px !important; }
  #header #logo img{ max-height: 46px !important; max-width: 280px !important; }
}

@media (max-width: 820px){
  /* Container */
  #container{ width: calc(100% - 14px) !important; border-radius: 16px !important; }

  /* Content */
  #content{ padding: 14px !important; }

  /* Navigation: wrap + optional scroll, Buttons nicht zu breit */
  #nav{ gap: 8px; padding: 10px 10px !important; }
  #nav li{ flex: 0 0 auto; }
  #nav li a{ padding: 10px 12px 10px 36px !important; }

  /* Headline sizes */
  h1{ font-size: 22px !important; }
  h2{ font-size: 16px !important; }

  /* Buttons: Full width bei Form-Action Rows */
  #content .buttons, #content .actions, #content .action-buttons{
    flex-direction: column;
    align-items: stretch;
  }
  #content .buttons input, #content .actions input, #content .action-buttons input,
  #content .buttons button, #content .actions button, #content .action-buttons button{
    width: 100% !important;
  }

  /* Landing Page: Layout neutralisieren (verhindert "Buchstaben-Spalte") */
  #landing_page .main-content{ width: auto !important; float: none !important; }
  #landing_page .thread-body{ width: auto !important; float: none !important; }

  /* Falls irgendwo harte Max-Widths/Positions aus Default-Theme greifen */
  #landing_page .main-content, #landing_page .thread-body{
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Die beiden großen Startseiten-Buttons untereinander */
  #landing_page .sidebar, #landing_page #sidebar, #landing_page .side, #landing_page #right{
    float:none !important;
    width: auto !important;
    margin-top: 12px !important;
  }
  #landing_page .sidebar a, #landing_page #sidebar a, #landing_page .side a, #landing_page #right a,
  #landing_page .sidebar button, #landing_page #sidebar button, #landing_page .side button, #landing_page #right button,
  #landing_page .sidebar input[type="button"], #landing_page #sidebar input[type="button"]{
    display:block !important;
    width: 100% !important;
    text-align:center !important;
  }

  /* Ticketliste / Tabellen: horizontal scroll statt Quetschen */
  #content table{ display:block; width:100% !important; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #content table thead, #content table tbody{ display: table; width:100%; }
  #content table td, #content table th{ white-space: nowrap; }

  /* infoTable (Ticket-Infos) ebenfalls scrollbar */
  table.infoTable{ display:block; width:100% !important; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.infoTable thead, table.infoTable tbody{ display: table; width:100%; }
  table.infoTable td{ white-space: nowrap; }

  /* Ticket Thread: Avatar + Inhalt sauber umbrechen */
  .thread-entry{ padding: 14px !important; }
  .thread-entry .avatar, .thread-entry .picture, .thread-entry img{ max-width: 44px !important; height:auto; }

  /* Reply / Editor: kompakter + Toolbar wrap */
  #reply{ padding: 14px !important; }
  .redactor-toolbar{ display:flex !important; flex-wrap: wrap !important; gap: 2px 4px !important; }
  .redactor-toolbar li{ float:none !important; }
  .redactor-toolbar a{ padding: 8px 8px !important; }
  .redactor-editor{ min-height: 180px !important; }

  /* File drop: nicht zu hoch */
  .dropzone, .filedrop, .upload-drop, #filedrop{ padding: 10px !important; }
}

@media (max-width: 420px){
  #header #logo img{ max-height: 40px !important; max-width: 240px !important; }
  #nav li a{ font-size: 13px !important; }
}


/* ============================================================
   16) Responsive Fixpack v3
   - verhindert horizontales Overflow (läuft aus dem Screen)
   - Reply-Form (#reply) konsequent dunkel (auch mobile)
   - Redactor/Editor auf 100% Breite + kein White-Panel
   - infoTable auf sehr kleinen Screens stacked statt nowrap
   - Registration: Timezone/Input nicht weiß
   ============================================================ */

/* Global: Box sizing + Overflow vermeiden */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ max-width:100%; overflow-x:hidden; }
#container, #content{ max-width:100%; overflow-x:hidden; }
#content *{ max-width:100%; }

/* Lange Wörter/IDs nicht sprengen */
#content, #content *{
  overflow-wrap:anywhere;
  word-break: break-word;
}

/* Reply-Form (Ticket antworten) – war auf Mobile teils weiß */
#reply{
  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
}
#reply *{ color: var(--txt) !important; }

/* Redactor Container immer full width und dark */
.redactor-container,
.redactor-box,
.redactor-layer,
.redactor-editor{
  max-width:100% !important;
}
.redactor-box,
.redactor-layer{
  background: var(--field) !important;
}
/* Falls Redactor intern inline-style background setzt */
.redactor-editor[style*="background"],
.redactor-layer[style*="background"],
.redactor-box[style*="background"]{
  background: var(--field) !important;
}

/* Formfelder überall (hohe Spezifität, hilft bei Registration/Timezone) */
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="tel"],
#content input[type="number"],
#content input[type="search"],
#content input[type="url"],
#content select,
#content textarea{
  background: var(--field) !important;
  color: var(--txt) !important;
  border:1px solid var(--line2) !important;
}
#content select option{ background:#0a101c !important; color: var(--txt) !important; }

/* Speziell Registration / Account */
#account input, #account select, #account textarea,
#signin input, #signin select, #signin textarea{
  background: var(--field) !important;
  color: var(--txt) !important;
}

/* Mobile: echte Layout-Fixes */
@media (max-width: 600px){
  /* Nav pills nicht brechen: falls nötig scrollen */
  #nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
  #nav::-webkit-scrollbar{ height:6px; }
  #nav li a{ white-space:nowrap; }

  /* Reply + New Ticket: Buttons sauber untereinander */
  #reply, #ticketForm, #newticketform{ padding: 14px !important; }
  
  /* Redactor Toolbar kompakter */
  .redactor-toolbar{ gap: 2px 2px !important; }
  .redactor-toolbar a{ padding: 7px 7px !important; }

  /* infoTable nicht nowrap: stacked Darstellung */
  table.infoTable, table.infoTable thead, table.infoTable tbody,
  table.infoTable tr, table.infoTable td{
    display:block !important;
    width:100% !important;
  }
  table.infoTable td{ white-space: normal !important; }
  table.infoTable thead td.headline{
    border-radius: 12px 12px 0 0 !important;
  }
}

/* Ticketliste / Tabellen: statt display:block auf thead/tbody (kann Overflow erzeugen) */
@media (max-width: 820px){
  /* Tabellen in Scroll-Wrapper-Mode */
  #content table{
    display:block !important;
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  /* aber thead/tbody NICHT erzwingen (kann Layout kaputt machen) */
  #content table thead, #content table tbody{
    display: table-header-group !important;
    width:auto !important;
  }
  #content table td, #content table th{ white-space: nowrap; }
}

/* ====================================================
   FINAL FIX: infoTable Kopf (Mobile) – keine weißen Caps
   ==================================================== */

/* Allgemein: Kopf immer dark */
table.infoTable thead td,
table.infoTable thead td.headline{
  background-color: rgba(10,16,28,.72) !important;
  color: var(--txt) !important;
  border: 1px solid var(--line) !important;
}

/* Falls im Theme noch ein sehr helles "bg" oder Verlauf sitzt */
table.infoTable thead td.headline{
  background-image: none !important;
  box-shadow: none !important;
}

/* Mobile: beim Stacken sollen die Kopfzeilen volle Breite haben */
@media (max-width: 600px){
  table.infoTable thead tr,
  table.infoTable thead td,
  table.infoTable thead td.headline{
    display:block !important;
    width:100% !important;
  }

  /* sauberer Abstand, damit es nicht wie zwei getrennte Caps wirkt */
  table.infoTable thead td.headline{
    margin: 0 0 6px 0 !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }
}