/* ============================================================
   SMARTPANEL LAYOUT - TWITCH DARK MODE (COMPACT & FIXED)
   ============================================================ */

/* --- 1. GLOBAL & BODY --- */
body {
  padding: 0px !important;
  background-color: #0e0e10 !important; /* Twitch Deep Black */
  color: #efeff1 !important; /* Text fast weiß */
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a { color: #9146FF; text-decoration: none; transition: 0.3s; }
a:hover { color: #772ce8; text-decoration: none; }

/* Alle Überschriften weiß erzwingen */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6, 
.card-title, .page-title, .modal-title, .subject {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Page Title Icon (oben links) */
.page-title i, .page-title-icon { color: #9146FF !important; }

/* --- 2. HEADER & FOOTER --- */
.header {
  background: #18181b !important;
  border-bottom: 1px solid #2d2d35 !important;
  padding: 0.75rem 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.header.top { padding: 0; }

.header .nav-link, .header .nav-item { color: #efeff1 !important; font-weight: 500; }
.header .nav-link i { color: #adadb8 !important; }

/* Header Active/Hover: Lila Strich & Leuchten */
.header .nav-link:hover, .header .nav-link.active {
    color: #fff !important;
    background: transparent !important;
    border-bottom: 2px solid #9146FF !important;
}
.header .nav-link:hover i, .header .nav-link.active i {
    color: #9146FF !important;
    text-shadow: 0 0 8px rgba(145, 70, 255, 0.5);
}

/* Footer */
.footer {
  background: #18181b !important;
  border-top: 1px solid #2d2d35 !important;
  color: #adadb8;
  padding: 1.25rem 0;
}
.footer a:not(.btn) { color: #efeff1; }

/* Support Dropdown Pfeil weg */
.header .nav-item.dropdown .dropdown-toggle::after { display: none !important; }

/* Badges (Ticket Count) */
.header .nav-item .badge, .badge-info, 
.header.top .notifcation .nav-unread {
  background-color: #9146FF !important;
  color: white !important;
  box-shadow: 0 0 5px rgba(145, 70, 255, 0.5);
  border: none;
}

/* --- 3. SERVER LISTE (BUTTON FIX FÜR HANDY) --- */
.tabs-list .nav-tabs { border-bottom: none; padding-bottom: 10px; height: auto; }
.tabs-list .nav-tabs li { margin-bottom: 5px; }

/* Buttons Style - WICHTIG: margin-bottom erhöht gegen Überlappen */
.tabs-list .nav-tabs li>a {
  color: #efeff1 !important;
  background-color: #1f1f23 !important;
  border: 1px solid #2d2d35 !important;
  padding: 8px 15px;
  border-radius: 20px !important;
  margin: 0 5px 10px 0 !important; /* Unten 10px Abstand! */
  font-weight: 500;
  display: inline-block; /* Verhindert komische Umbrüche */
}
.tabs-list .nav-tabs li>a i { color: #adadb8; margin-right: 5px; }

/* Buttons Aktiv (Lila) */
.tabs-list .nav-tabs li>a.active, .tabs-list .nav-tabs li>a:hover {
  background-color: #9146FF !important;
  border-color: #9146FF !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(145, 70, 255, 0.4);
}
.tabs-list .nav-tabs li>a.active i, .tabs-list .nav-tabs li>a:hover i { color: #fff !important; }
.tabs-list .tab-content { border-top: 1px solid #2d2d35; padding-top: 15px; }

/* --- 4. TICKET SYSTEM (Modern) --- */
.ticket-lists .item { padding: 15px 10px; border-bottom: 1px solid #2d2d35; background: transparent; }
.ticket-lists .item:hover { background: #1f1f23; }
.ticket-lists .item .content .subject { font-size: 16px !important; color: #fff !important; font-weight: 600; }
.ticket-lists .item .content .email { color: #adadb8; }

/* CHAT STYLING */
#frame .content { background: #0e0e10; height: 100%; overflow: hidden; position: relative; }
#frame .content .messages { height: auto; min-height: calc(100% - 93px); max-height: calc(100% - 93px); overflow-y: scroll; padding-bottom: 20px; }
#frame .content .messages::-webkit-scrollbar { width: 8px; }
#frame .content .messages::-webkit-scrollbar-thumb { background-color: #3a3a3a; border-radius: 4px; }
#frame .content .messages ul li { display: inline-block; clear: both; margin: 15px; width: calc(100% - 30px); font-size: 0.9em; position: relative; }

/* Icons im Chat (SVG Replacement) */
#frame .content .messages ul li img { opacity: 0; width: 40px; height: 40px; } 
#frame .content .messages ul li::before {
    content: ''; position: absolute; top: 0; width: 40px; height: 40px; border-radius: 50%; z-index: 1; border: 2px solid #9146FF; background-color: #1f1f23; background-repeat: no-repeat; background-position: center; background-size: 20px;
}
/* Support Icon (Links) - GETAUSCHT: Jetzt User Icon */
#frame .content .messages ul li.sent::before { left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
/* User Icon (Rechts) - GETAUSCHT: Jetzt Support Icon */
#frame .content .messages ul li.replies::before { right: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); }

/* Chat Bubbles */
#frame .content .messages ul li.sent .msg-content { background: #1f1f23; color: #efeff1; border: 1px solid #3a3a3a; float: left; border-radius: 10px; padding: 10px 15px; }
#frame .content .messages ul li.replies .msg-content { background: #9146FF; color: #fff; float: right; border: 1px solid #9146FF; box-shadow: 0 0 15px rgba(145, 70, 255, 0.3); border-radius: 10px; padding: 10px 15px; }

/* FIX: Text-Ausrichtung (Name/Datum) anpassen */
#frame .content .messages ul li.sent { text-align: left; }
#frame .content .messages ul li.replies { text-align: right; }

/* Avatar in Ticket-Liste (Fix Blue Box) */
.ticket-lists .item .avatar, .avatar-md {
    background-image: none !important; background-color: #1f1f23 !important; border: 2px solid #9146FF; color: transparent !important; display: flex !important; align-items: center; justify-content: center; position: relative; border-radius: 50%;
}
.ticket-lists .item .avatar::after, .avatar-md::after {
    content: ''; width: 20px; height: 20px; background-color: #fff; position: absolute;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center;
}

/* --- 5. CARDS, INPUTS & UI --- */
.card { border: 1px solid #2d2d35; background-color: #18181b !important; color: #efeff1; box-shadow: none; margin-bottom: 1.5rem; }
.card-header { border-bottom: 1px solid #2d2d35 !important; background: transparent; color: #fff !important; padding: 1.5rem; }
.modal-content { border: 1px solid #2d2d35; background: #18181b; color: #fff; }
.modal-header, .modal-footer { border-color: #2d2d35; }

/* Inputs */
.form-control, textarea, select, .selectize-input { background-color: #000 !important; border: 1px solid #2d2d35 !important; color: #fff !important; border-radius: 5px; }
.form-control:focus, .selectize-input.focus { border-color: #9146FF !important; box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.25) !important; }
label, .form-label { color: #adadb8 !important; font-weight: 500; margin-bottom: 5px; }

/* Dropdowns */
.selectize-dropdown, .dropdown-menu { background-color: #1f1f23 !important; border: 1px solid #2d2d35 !important; color: #fff; }
.selectize-dropdown .active, .dropdown-item:hover { background-color: #9146FF !important; color: #fff !important; }
.selectize-dropdown-content .option, .dropdown-item { color: #efeff1 !important; }

/* Buttons */
.btn-primary { background-color: #9146FF !important; border-color: #9146FF !important; color: #fff !important; box-shadow: 0 0 10px rgba(145, 70, 255, 0.3); }
.btn-primary:hover { background-color: #772ce8 !important; }
.btn-secondary { background-color: #1f1f23 !important; border-color: #2d2d35 !important; color: #adadb8 !important; }
.btn-secondary:hover { color: #fff !important; background-color: #2d2d35 !important; border-color: #9146FF !important; }

/* Gesamtkosten Button (Lila) */
#total_charge, .btn-info { background-color: #9146FF !important; border-color: #9146FF !important; color: #fff !important; box-shadow: 0 0 10px rgba(145, 70, 255, 0.3); font-weight: bold; }

/* Fix für blaue Texte auf der Bestellseite */
.service-details-header .title {
    color: #adadb8 !important; /* Labels grau */
}
.service-details-header .value,
.service-details-header .text-primary { /* Überschreibt das Bootstrap Blue */
    color: #9146FF !important; /* Werte lila */
    font-weight: bold;
}

/* --- 6. STATISTIK & ICONS (Lila & Modern) --- */
.stamp, .stamp-md {
    background-color: rgba(145, 70, 255, 0.15) !important;
    color: #9146FF !important;
    border-radius: 12px !important;
    box-shadow: 0 0 10px rgba(145, 70, 255, 0.1);
    border: 1px solid rgba(145, 70, 255, 0.2);
}
.statistics .item .number { color: #fff !important; font-size: 28px; font-weight: 700; }
.statistics .item .desc { color: #adadb8 !important; }

/* Purple Filter for Images (Instagram etc.) */
.service-icon img, .selectize-dropdown .image img, .order-add .card-body img, .media-icon img,
.service-details-header .service-icon img { /* Auch das große Icon auf der Bestellseite */
    filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(3020%) hue-rotate(256deg) brightness(97%) contrast(106%) !important;
    opacity: 1;
}

/* Text auf "Neue Bestellung" Seite */
.order-add .form-group label, .order-add .help-block, .service-price, .service-time { color: #adadb8 !important; }
.order-add .form-group span.text-primary, strong.text-primary { color: #9146FF !important; font-weight: bold; }

/* --- 7. MOBILE OPTIMIERUNG --- */

/* Fix: Bestellung Absenden Button mehr Platz */
.form-actions { margin-bottom: 80px !important; margin-top: 30px !important; }

/* Fix: Statistik Scroll (PC aus / Mobile an) */
@media (max-width: 992px) {
    .chart-container, .charts { overflow-x: auto !important; padding-bottom: 15px; }
}
@media (min-width: 993px) {
    .chart-container, .charts { overflow-x: hidden !important; }
}
.c3 svg { min-width: 600px !important; }

/* Fix: Bestellhistorie & TICKET DETAILS Tabelle (Scrollbar) */
@media (max-width: 992px) {
    /* Generelle Tabelle responsiv machen */
    .table-responsive { display: block; width: 100%; overflow-x: auto !important; margin-bottom: 20px; }
    
    /* Zwingt Tabellen (auch in Ticket-Details) eine Mindestbreite zu haben, damit sie nicht gequetscht werden */
    .table { min-width: 600px !important; table-layout: auto !important; display: block !important; overflow-x: auto !important; }
    
    /* WICHTIG: Fix für Ticket-Info Box "Out of box" Problem */
    /* Zwingt den Karten-Inhalt (die graue Box), scrollbar zu sein, wenn der Inhalt zu breit ist */
    .card-body, .card {
        max-width: 100% !important;
        overflow-x: auto !important; /* Aktiviert Scrollbar */
        overflow-y: hidden; /* Verhindert vertikales Wackeln */
    }

    /* Verhindert Umbrüche in der Ticket Info Tabelle, damit es sauber aussieht beim Scrollen */
    .ticket-info td, .ticket-info th, .table td, .table th {
        white-space: nowrap !important;
        padding: 10px !important;
    }
    
    .table th, .table td { white-space: nowrap !important; padding: 12px !important; }
    .table td .service-name { white-space: normal !important; min-width: 200px !important; }
}

/* --- TICKET MOBILE FIX (Der wichtigste Teil!) --- */
/* Das hier sorgt dafür, dass die Ticket-Liste und der Chat untereinander sind */
@media (max-width: 768px) {
    .row.row-cards {
        display: block !important;
    }
    .row.row-cards > [class*='col-'] {
        max-width: 100% !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Ticket Liste auf Handy begrenzen */
    .ticket-lists {
        height: auto !important;
        max-height: 250px !important;
        overflow-y: auto;
        margin-bottom: 20px !important;
        border-bottom: 1px solid #2d2d35;
    }
    
    /* Chat Fenster volle Höhe */
    #frame .content {
        min-height: 500px !important;
        height: auto !important;
    }
}

/* --- 8. TABELLEN & SONSTIGES --- */
.table th, .text-wrap table th { background-color: #18181b !important; color: #adadb8 !important; border-bottom: 2px solid #2d2d35 !important; text-transform: capitalize !important; }
.table td { color: #efeff1 !important; border-top: 1px solid #2d2d35 !important; }
body tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02) !important; }

.pagination>li>a { background-color: #1f1f23; border: 1px solid #2d2d35; color: #efeff1; }
.pagination>li.active>a { background-color: #9146FF; border-color: #9146FF; color: #fff; }
.order_resume { border: 1px solid #2d2d35 !important; background: #18181b !important; }
.order_resume input { background: transparent !important; color: #fff !important; text-align: right; }
.login-bg-image { background: #0e0e10; filter: none; }
.auth-login-form { background-color: rgba(0,0,0,0.5); width: 100%; }