/*
 * TravTools · © MUNLabs
 * Dashboard
 * Persönliche Übersichten, Statistiken, Notizen, Truppen und Dashboard-Kacheln.
 */


/* Extrahiert aus dashboard_dual_link.php */
.tt-status-pill {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px;
}
.tt-status-active { background: rgba(61,220,132, 0.15); color: var(--tt-green); border: 1px solid rgba(61,220,132, 0.3); }
.tt-status-pending { background: rgba(234, 179, 8, 0.15); color: var(--tt-yellow); border: 1px solid rgba(234, 179, 8, 0.3); }

/* Extrahiert aus dashboard_meine_truppen.php */
/* Hero Icon */
.u-icon-hero {
    background-image: url('hero.png');
    background-repeat: no-repeat;
    width: 20px; height: 20px;
    display: inline-block; vertical-align: middle;
    background-size: 160%; /* Zoom für Zuschnitt */
    background-position: center;
    image-rendering: auto;
}


/* ===== MIGRIERT AUS dashboard_admin_uebersicht.css ===== */

/* * TravTools - Admin Dashboard (V2 - No Header, Red Alerts) */

.tt-dash-wrap { 
    width: 100%; 
    padding: 10px; /* Header ist weg, Padding reduziert */
    box-sizing: border-box; 
    font-family: "Inter", sans-serif; 
    color: var(--tt-text-soft); 
}

/* GRID LAYOUT */
.tt-dash-grid { 
    display: grid; 
    grid-template-columns: repeat(10, 1fr); 
    gap: 15px; 
}

/* WIDGET BASE */
.tt-widget { 
    background: var(--tt-surface-solid); 
    border: 1px solid var(--tt-line-solid); 
    border-radius: 8px; 
    padding: 15px; 
    display: flex; flex-direction: column; 
    position: relative; overflow: hidden; 
    transition: transform 0.2s; 
    min-height: 200px; 
}
.tt-widget:hover { border-color: rgba(255,255,255,0.15); }

/* WIDGET HEADER */
.tt-w-head { 
    display: flex; align-items: center; justify-content: space-between; 
    margin-bottom: 12px; padding-bottom: 8px; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    min-height: 28px; 
}
.tt-w-title { 
    font-size: 11px; font-weight: 800; color: var(--tt-muted); text-transform: uppercase; 
    display: flex; align-items: center; gap: 6px; 
}
.tt-w-icon { color: var(--brandGold, #f2c14a); }
.tt-w-icon.danger { color: var(--tt-red); } 

.tt-w-actions { display: flex; align-items: center; gap: 10px; }

/* BUTTONS */
.tt-btn-head { 
    background: linear-gradient(135deg, #f2c14a, var(--tt-gold-2)); 
    color: var(--tt-bg-0); border: none; font-weight: 800; 
    padding: 4px 10px; border-radius: 4px; 
    cursor: pointer; text-transform: uppercase; font-size: 9px; 
    text-decoration: none; transition: 0.2s; 
    display: inline-flex; align-items: center; gap: 4px; 
}
.tt-btn-head:hover { filter: brightness(1.1); transform:none; }

/* GRID SPANS */
.w-alerts { grid-column: span 10; min-height: auto; }
.w-tq, .w-deff, .w-push, .w-warn { grid-column: span 5; }

/* --- LIST STYLES --- */
.tt-list-rows { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 250px; }

.tt-row-item { 
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.05); 
    padding: 10px; 
    border-radius: 4px; 
    display: flex; align-items: center; justify-content: space-between;
    transition: 0.2s; 
}
.tt-row-item:hover { background: rgba(255,255,255,0.06); }

/* Linke Seite: Avatar/Name */
.tt-ri-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.tt-ri-avatar { width: 30px; height: 30px; background: var(--tt-bg-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--tt-faint); border: 1px solid var(--tt-line-solid); }
.tt-ri-info { display: flex; flex-direction: column; }
.tt-ri-name { font-size: 13px; font-weight: 700; color: var(--tt-text); }
.tt-ri-sub { font-size: 10px; color: var(--tt-muted); }

/* Rechte Seite: Stats & Balken */
.tt-ri-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 120px; }
.tt-ri-val { font-size: 12px; font-weight: 800; color: #fff; }
.tt-ri-val.bad { color: var(--tt-red); }
/* JETZT ROT STATT GELB */
.tt-ri-val.warn { color: var(--tt-red); } 

/* Progress Bar Mini */
.tt-progress-mini { width: 100%; height: 4px; background: var(--tt-line-solid); border-radius: 2px; overflow: hidden; }
.tt-pg-bar { height: 100%; border-radius: 2px; }
.tt-pg-bar.red { background: var(--tt-red); }
/* JETZT ROT STATT ORANGE */
.tt-pg-bar.orange { background: var(--tt-red); } 

/* ALERTS WIDGET (Top) */
.w-alerts { background: rgba(255,92,92,0.1); border-color: rgba(255,92,92,0.3); }
.tt-alert-row { display: flex; align-items: center; gap: 10px; color: var(--tt-red); font-size: 13px; font-weight: 600; padding: 5px 0; }
.tt-alert-row i { font-size: 16px; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .tt-dash-grid { grid-template-columns: 1fr; }
    .w-alerts, .w-tq, .w-deff, .w-push, .w-warn { grid-column: span 1; }
}


/* ===== MIGRIERT AUS dashboard_allianzmitteilungen.css ===== */

/* dashboard_allianzmitteilungen.css (V4 - Tabs & Multi-Lang) */

.tt-news-wrap {
  width: 100%;
  padding: 25px 10px;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  color: var(--tt-text-soft);
}

/* HEADER */
.tt-news-head-simple {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--tt-line-solid); padding-bottom: 10px; margin-bottom: 20px;
}
.tt-nh-left h1 { font-size: 20px; font-weight: 900; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: 1px; }
.tt-nh-sub { font-size: 12px; color: var(--brandGold); font-weight: 700; margin-top: 4px; display: block; }

.tt-btn-small {
  background: rgba(255,255,255,0.05); border: 1px solid var(--tt-line-solid);
  color: var(--tt-text-soft); padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: 0.2s;
}
.tt-btn-small:hover { border-color: var(--brandGold); color: #fff; }

/* EDIT CARD */
.tt-news-card {
  background: var(--tt-surface-solid); border: 1px solid var(--tt-line-solid); border-radius: 8px;
  padding: 15px; margin-bottom: 20px;
  border-left: 3px solid var(--brandGold);
}
.tt-edit-card.hidden { display: none; }

.tt-label-mini { 
    font-size: 10px; font-weight: 800; color: var(--tt-muted); text-transform: uppercase; 
    display: block; margin-bottom: 10px; 
}

/* TABS STYLES (NEU) */
.tt-tab-row {
    display: flex; gap: 5px; margin-bottom: 15px; border-bottom: 1px solid var(--tt-line-solid); padding-bottom: 5px;
}
.tt-tab-btn {
    background: transparent; border: none; color: var(--tt-faint); font-weight: 800; font-size: 11px;
    padding: 6px 12px; cursor: pointer; border-radius: 4px; text-transform: uppercase;
    transition: 0.2s;
}
.tt-tab-btn:hover { color: var(--tt-text-soft); }
.tt-tab-btn.active { background: rgba(242,193,74,0.1); color: var(--brandGold); }

/* Language Sections */
.tt-lang-section { display: none; }
.tt-lang-section.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


.tt-form-row { display: flex; gap: 10px; margin-bottom: 8px; }

.tt-input-compact {
  width: 100%; background: var(--tt-bg-2); border: 1px solid var(--tt-line-solid);
  color: var(--tt-text-soft); padding: 8px; border-radius: 4px; font-size: 13px; font-family: inherit;
  box-sizing: border-box; outline: none;
}
.tt-input-compact:focus { border-color: var(--brandGold); }
.tt-input-compact.bold { font-weight: 700; color: #fff; }

.tt-btn-row-compact { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tt-btn-save { 
    background: var(--brandGold); color: #000; border: none; padding: 6px 12px; 
    border-radius: 4px; font-weight: 800; font-size: 11px; cursor: pointer; 
}
.tt-btn-cancel { 
    background: transparent; border: 1px solid var(--tt-line-solid); color: var(--tt-muted); padding: 6px 12px; 
    border-radius: 4px; font-size: 11px; text-decoration: none; display: inline-block;
}

/* FEED ITEMS */
.tt-feed-list { display: flex; flex-direction: column; gap: 10px; }

.tt-feed-item {
  background: var(--tt-surface-solid); border: 1px solid var(--tt-line-solid); border-radius: 6px;
  padding: 12px; position: relative;
  transition: transform 0.1s;
}
.tt-feed-item:hover { border-color: rgba(255,255,255,0.1); }

.tt-feed-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 11px; color: var(--tt-faint);
}

.tt-status-badge {
  padding: 2px 6px; border-radius: 3px; font-weight: 800; font-size: 10px; text-transform: uppercase;
}
.st-impt { background: rgba(255,92,92, 0.2); color: var(--tt-red-2); }
.st-war  { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.st-info { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.st-nap  { background: rgba(61,220,132, 0.2); color: var(--tt-green-2); }
.st-fun  { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }

.tt-feed-date { font-family: monospace; color: var(--tt-muted); }
.tt-feed-author { color: var(--tt-faint-2); font-style: italic; }

.tt-feed-actions { margin-left: auto; display: flex; gap: 8px; opacity: 0.5; }
.tt-feed-actions:hover { opacity: 1; }
.tt-feed-actions a, .tt-feed-actions button { 
    background: none; border: none; cursor: pointer; font-size: 12px; padding: 0; color: inherit; 
}

.tt-feed-title { font-size: 14px; font-weight: 700; color: var(--tt-text); margin-bottom: 4px; }
.tt-feed-text { font-size: 13px; color: var(--tt-muted); line-height: 1.4; white-space: pre-wrap; }

.tt-empty { text-align: center; padding: 40px; border: 1px dashed var(--tt-line-solid); border-radius: 8px; }


/* ===== MIGRIERT AUS dashboard_dual_link.css ===== */

/* * TravTools - Dual Link Dashboard */

.tt-dual-wrap {
    width: 100%;
    padding: 25px 10px;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: var(--tt-text-soft);
    max-width: 1000px;
    margin: 0;
}

/* Header */
.tt-dual-head {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--tt-line-solid);
    padding-bottom: 15px;
    display: flex; justify-content: space-between; align-items: flex-end;
}
.tt-dh-left h1 {
    font-size: 24px; font-weight: 900; color: #fff; margin: 0 0 5px 0;
    text-transform: uppercase; letter-spacing: 1px;
}
.tt-dh-left p { margin: 0; font-size: 13px; color: var(--tt-muted); }

/* Settings Toggle (Block Invites) */
.tt-settings-box {
    background: rgba(255,255,255,0.03);
    padding: 10px 15px; border-radius: 6px; border: 1px solid var(--tt-line-solid);
    display: flex; align-items: center; gap: 10px;
}
.tt-toggle-label { font-size: 12px; font-weight: 700; color: var(--tt-muted); text-transform: uppercase; }

/* Switch CSS */
.tt-switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.tt-switch input { opacity: 0; width: 0; height: 0; }
.tt-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--tt-line-solid); transition: .4s; border-radius: 20px;
}
.tt-slider:before {
    position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .tt-slider { background-color: var(--brandGold, #f2c14a); }
input:checked + .tt-slider:before { transform: translateX(20px); }

/* Grid */
.tt-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    position: relative; /* Wichtig für Overlay */
    min-height: 400px;
}

/* BLOCK OVERLAY (NEU) */
.tt-blocked-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(13, 17, 23, 0.9);
    backdrop-filter: blur(5px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--tt-line-solid);
}
.tt-blocked-icon {
    font-size: 80px;
    color: var(--tt-red);
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255,92,92, 0.4);
}
.tt-blocked-text {
    font-size: 22px;
    font-weight: 900;
    color: var(--tt-red);
    text-transform: uppercase;
    text-align: center;
}

/* Cards */
.tt-card {
    background: var(--tt-surface-solid);
    border: 1px solid var(--tt-line-solid);
    border-radius: 8px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 15px;
}
.tt-card-title {
    font-size: 14px; font-weight: 800; color: #fff; text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; margin-bottom: 5px;
    display: flex; justify-content: space-between; align-items: center;
}

/* Forms */
.tt-form-group label {
    display: block; font-size: 11px; font-weight: 700; color: var(--tt-muted); margin-bottom: 5px; text-transform: uppercase;
}
.tt-inp {
    width: 100%; background: var(--tt-bg-2); border: 1px solid var(--tt-line-solid); color: #fff;
    padding: 10px; border-radius: 6px; font-size: 14px; box-sizing: border-box;
}
.tt-inp:focus { border-color: var(--brandGold, #f2c14a); outline: none; }

.tt-btn-invite {
    background: linear-gradient(135deg, var(--brandGold, #f2c14a), var(--tt-gold-2));
    color: var(--tt-bg-0); border: none; padding: 10px 20px; border-radius: 6px;
    font-weight: 800; text-transform: uppercase; cursor: pointer; width: 100%; margin-top: 10px;
}
.tt-btn-invite:hover { filter: brightness(1.1); }

/* User List */
.tt-user-list { display: flex; flex-direction: column; gap: 10px; }
.tt-user-item {
    background: rgba(255,255,255,0.03);
    padding: 10px 15px; border-radius: 6px; border: 1px solid transparent;
    display: flex; justify-content: space-between; align-items: center;
}
.tt-user-item:hover { border-color: var(--tt-line-solid); background: rgba(255,255,255,0.05); }

.tt-u-info { display: flex; flex-direction: column; }
.tt-u-name { font-weight: 700; color: #fff; font-size: 14px; }
.tt-u-email { font-size: 11px; color: var(--tt-faint); }

.tt-btn-remove {
    background: rgba(255,92,92, 0.1); color: var(--tt-red); border: 1px solid rgba(255,92,92, 0.2);
    padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer;
    transition: 0.2s;
}
.tt-btn-remove:hover { background: var(--tt-red); color: #fff; }

@media (max-width: 800px) {
    .tt-dual-grid { grid-template-columns: 1fr; }
    .tt-dual-head { flex-direction: column; align-items: flex-start; gap: 15px; }
}


/* ===== MIGRIERT AUS dashboard_mein_spieler.css ===== */

/* * TravTools - Player Dashboard (V8 - Final Clean) */

.tt-player-wrap {
    width: 100%;
    padding: 25px 10px;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: var(--tt-text-soft);
}

/* HEADER */
.tt-player-header {
    background: linear-gradient(135deg, var(--tt-surface-solid), var(--tt-bg-2));
    border: 1px solid var(--tt-line-solid);
    border-left: 4px solid var(--brandGold, #f2c14a);
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.tt-ph-info { display: flex; flex-direction: column; gap: 5px; }

.tt-ph-name { 
    font-size: 32px; font-weight: 900; color: #fff; margin: 0; line-height: 1; 
    display: flex; align-items: center; gap: 0.3em;
}
.tt-ph-name .tt-badge { transform: scale(1.8); margin-left: 0 !important; }

.tt-ph-meta { display: flex; gap: 20px; font-size: 13px; color: var(--tt-muted); font-weight: 600; }
.tt-ph-meta span { display: flex; align-items: center; gap: 6px; }
.tt-ph-meta i { color: var(--brandGold); }

/* GRID LAYOUT (3 Spalten nebeneinander) */
.tt-player-grid {
    display: grid;
    /* Details | Chart 1 | Chart 2 */
    grid-template-columns: 280px 1fr 1fr; 
    gap: 20px;
}

/* CARDS */
.tt-card {
    background: var(--tt-surface-solid);
    border: 1px solid var(--tt-line-solid);
    border-radius: 8px;
    padding: 20px;
    display: flex; flex-direction: column;
}
.tt-card-head {
    font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--tt-faint);
    margin-bottom: 15px; letter-spacing: 1px;
    display: flex; justify-content: space-between;
}

/* STATS ROW */
.tt-stat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.tt-stat-row:last-child { border-bottom: none; }
.tt-stat-lbl { font-size: 13px; color: var(--tt-muted); font-weight: 500; }
.tt-stat-val { font-size: 14px; color: #fff; font-weight: 700; }

.tt-diff-pos { color: var(--tt-green); font-size: 11px; margin-left: 5px; background: rgba(61,220,132,0.1); padding: 1px 4px; border-radius: 3px; }
.tt-diff-neg { color: var(--tt-red); font-size: 11px; margin-left: 5px; background: rgba(255,92,92,0.1); padding: 1px 4px; border-radius: 3px; }

/* CHARTS */
.tt-chart-wrap { position: relative; height: 200px; width: 100%; flex: 1; }

/* VILLAGES TABLE (Volle Breite) */
.tt-villages-card { grid-column: 1 / -1; }

.tt-table { width: 100%; border-collapse: collapse; margin-top: 5px; }
.tt-table th { 
    text-align: left; color: var(--tt-faint-2); font-size: 10px; text-transform: uppercase; font-weight: 800; 
    padding: 8px 10px; border-bottom: 1px solid var(--tt-line-solid); 
}
.tt-table td { 
    padding: 10px 10px; font-size: 13px; color: var(--tt-text-soft); border-bottom: 1px solid rgba(255,255,255,0.02); 
}
.tt-table tr:hover td { background: rgba(255,255,255,0.02); color: #fff; }

.tt-coord { 
    font-family: monospace; color: var(--brandGold); font-weight: 700; 
    background: rgba(242,193,74,0.1); padding: 2px 6px; border-radius: 4px; font-size: 12px;
}
.tt-v-name { font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; }
.tt-v-cap { color: var(--tt-red); font-size: 9px; border: 1px solid var(--tt-red); padding: 1px 3px; border-radius: 2px; text-transform: uppercase; font-weight: 800; }
.tt-v-city { color: var(--tt-blue-3); font-size: 9px; border: 1px solid var(--tt-blue-3); padding: 1px 3px; border-radius: 2px; text-transform: uppercase; font-weight: 800; }

@media (max-width: 1100px) {
    .tt-player-grid { grid-template-columns: 1fr 1fr; }
    .tt-villages-card { grid-column: span 2; }
    /* Details links oben, Rest passt sich an */
}
@media (max-width: 700px) {
    .tt-player-grid { grid-template-columns: 1fr; }
    .tt-villages-card { grid-column: span 1; }
}


/* ===== MIGRIERT AUS dashboard_meine_aufgaben.css ===== */

/* Meine Aufgaben */


/* ===== MIGRIERT AUS dashboard_meine_entwicklung.css ===== */

/* Meine Entwicklung */


/* ===== MIGRIERT AUS dashboard_meine_notizen.css ===== */

/* * TravTools - User Notes (Visual Cards) */

.tt-notes-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: var(--tt-text-soft);
}

/* HEADER */
.tt-notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--tt-line-solid);
}
.header-text h1 { font-size: 28px; font-weight: 900; color: #fff; margin: 0 0 5px 0; text-transform: uppercase; }
.header-text p { margin: 0; font-size: 14px; color: var(--tt-muted); }

.tt-btn-new {
    background: linear-gradient(135deg, #f2c14a, var(--tt-gold-2));
    color: var(--tt-bg-0); border: none; padding: 10px 20px;
    border-radius: 8px; font-weight: 800; text-transform: uppercase;
    cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px;
    font-size: 14px;
}
.tt-btn-new:hover { transform:none; box-shadow: 0 4px 15px rgba(242,193,74,0.2); }

/* GRID */
.tt-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* NOTE CARD */
.tt-note-card {
    background: var(--tt-surface-solid);
    border: 1px solid var(--tt-line-solid);
    border-radius: 12px;
    padding: 20px;
    display: flex; flex-direction: column;
    transition: 0.2s;
    position: relative;
    min-height: 200px;
}
.tt-note-card:hover { border-color: rgba(255,255,255,0.15); transform:none; }

/* Card Colors */
.tt-note-card.type-dual { border-top: 3px solid var(--tt-blue-3); }
.tt-note-card.type-build { border-top: 3px solid var(--tt-green); }
.tt-note-card.type-village { border-top: 3px solid #f2c14a; }
.tt-note-card.type-misc { border-top: 3px solid #a855f7; }
.tt-note-card.type-general { border-top: 3px solid var(--tt-muted); }

/* Card Header */
.nc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.nc-badge {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    padding: 4px 8px; border-radius: 4px; border: 1px solid transparent;
    display: flex; align-items: center; gap: 5px;
}
.nc-actions { display: flex; gap: 5px; opacity: 0; transition: 0.2s; }
.tt-note-card:hover .nc-actions { opacity: 1; }
.nc-actions button {
    background: rgba(255,255,255,0.05); border: none; color: var(--tt-muted);
    width: 24px; height: 24px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.nc-actions button:hover { background: #fff; color: #000; }
.nc-actions button.del:hover { background: var(--tt-red); color: #fff; }

/* Content */
.nc-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 10px 0; }
.nc-body { font-size: 13px; color: var(--tt-text-soft); line-height: 1.5; flex: 1; white-space: pre-wrap; margin-bottom: 15px; }

/* Footer (Villages) */
.nc-footer {
    display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.nc-vil-tag {
    background: rgba(242, 193, 74, 0.1); color: #f2c14a;
    font-size: 11px; padding: 4px 8px; border-radius: 4px;
    text-decoration: none; font-weight: 600; border: 1px solid rgba(242, 193, 74, 0.2);
    transition: 0.2s;
}
.nc-vil-tag:hover { background: #f2c14a; color: #000; }
.nc-vil-tag .coords { font-weight: 400; opacity: 0.8; margin-left: 3px; font-size: 10px; }

.nc-date { font-size: 10px; color: var(--tt-faint-2); margin-top: 10px; text-align: right; }

/* EMPTY STATE */
.tt-empty-state {
    grid-column: 1 / -1;
    text-align: center; padding: 60px 20px;
    border: 2px dashed var(--tt-line-solid); border-radius: 12px; color: var(--tt-faint);
}
.tt-empty-state i { font-size: 40px; margin-bottom: 15px; opacity: 0.5; }

/* MODAL */
.tt-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); z-index: 1000; align-items: center; justify-content: center; }
.tt-modal-overlay.active { display: flex; }
.tt-modal { background: var(--tt-surface-solid); width: 90%; max-width: 600px; border: 1px solid #f2c14a; border-radius: 12px; box-shadow: 0 0 50px rgba(0,0,0,0.8); overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; }
.tt-modal-header { padding: 15px 20px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--tt-line-solid); display: flex; justify-content: space-between; align-items: center; }
.tt-modal-title { margin: 0; color: #fff; font-size: 16px; font-weight: 700; }
.tt-modal-close { background: none; border: none; color: var(--tt-muted); font-size: 20px; cursor: pointer; }
.tt-modal-body { padding: 20px; overflow-y: auto; }

/* FORM */
.tt-form-label { font-size: 11px; font-weight: 800; color: var(--tt-muted); text-transform: uppercase; margin-bottom: 8px; display: block; }
.tt-input-group { margin-bottom: 20px; }
.tt-input-group label { display: block; font-size: 12px; color: var(--tt-text-soft); margin-bottom: 5px; font-weight: 600; }
.tt-inp { width: 100%; background: var(--tt-bg-2); border: 1px solid var(--tt-line-solid); padding: 10px; border-radius: 6px; color: #fff; font-family: inherit; box-sizing: border-box; }
.tt-inp:focus { border-color: #f2c14a; outline: none; }

/* TYPE CARDS */
.type-selector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.type-opt input { display: none; }
.type-box {
    background: rgba(255,255,255,0.03); border: 1px solid var(--tt-line-solid);
    padding: 10px 5px; border-radius: 6px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    text-align: center; color: var(--tt-muted); transition: 0.2s;
}
.type-box i { font-size: 16px; color: var(--c); opacity: 0.5; }
.type-box span { font-size: 10px; font-weight: 700; }

.type-opt input:checked + .type-box {
    background: rgba(255,255,255,0.08);
    border-color: var(--c);
    color: #fff;
    box-shadow: 0 0 10px var(--c);
}
.type-opt input:checked + .type-box i { opacity: 1; }

/* VILLAGE GRID */
.village-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
    background: var(--tt-bg-2); padding: 15px; border-radius: 8px; border: 1px solid var(--tt-line-solid);
    max-height: 200px; overflow-y: auto;
}
.vil-check input { display: none; }
.vil-box {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--tt-surface-solid); padding: 8px 10px; border-radius: 4px;
    border: 1px solid var(--tt-line-solid); cursor: pointer; transition: 0.2s;
}
.v-name { font-size: 12px; color: var(--tt-text-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-coord { font-size: 10px; color: var(--tt-faint); font-family: monospace; }

.vil-check input:checked + .vil-box { border-color: #f2c14a; background: rgba(242,193,74,0.1); }
.vil-check input:checked + .vil-box .v-name { color: #f2c14a; }

.modal-footer { margin-top: 20px; display: flex; justify-content: flex-end; }
.tt-btn-save { background: #f2c14a; color: #000; border: none; padding: 10px 30px; font-weight: 800; border-radius: 6px; cursor: pointer; }

@media (max-width: 600px) {
    .type-selector { grid-template-columns: repeat(3, 1fr); }
    .village-grid { grid-template-columns: 1fr; }
}


/* ===== MIGRIERT AUS dashboard_meine_statistik.css ===== */

/* * TravTools - User Stats (Perfect Alignment) */

.tt-stat-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: var(--tt-text);
}

/* HEADER */
.tt-stat-header {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--tt-line-solid);
    padding-bottom: 15px;
}
.tt-stat-header h1 {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}
.tt-stat-header p {
    font-size: 14px;
    color: var(--tt-muted);
    margin: 0;
}

/* CARD & TABLE */
.tt-card {
    background: var(--tt-surface-solid);
    border: 1px solid var(--tt-line-solid);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.tt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tt-table th {
    background: rgba(255,255,255,0.03);
    color: var(--tt-muted);
    font-weight: 800;
    text-transform: uppercase;
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--tt-line-solid);
    font-size: 11px;
    letter-spacing: 0.5px;
    vertical-align: middle; /* Wichtig für Header */
}

/* ROWS & CELLS */
.tt-row {
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tt-row:last-child { border-bottom: none; }
.tt-row:hover { background: rgba(255,255,255,0.03); }

.tt-table td {
    padding: 18px 20px; /* Mehr Padding oben/unten für Zentrierung */
    vertical-align: middle; /* ZENTRALE FUNKTION FÜR AUSRICHTUNG */
    height: 50px; /* Fixe Mindesthöhe für Gleichmäßigkeit */
}

/* ICONS */
.icon-cell { width: 60px; text-align: center; padding-right: 0; }
.stat-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: #fff;
    margin: 0 auto; /* Zentriert das Icon in der Zelle */
}
/* Farben */
.i-push { background: rgba(242, 193, 74, 0.15); color: #f2c14a; }
.i-get  { background: rgba(59, 130, 246, 0.15); color: var(--tt-blue-3); }
.i-deff { background: rgba(61,220,132, 0.15); color: var(--tt-green); }
.i-off  { background: rgba(255,92,92, 0.15); color: var(--tt-red); }
.i-crop { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.i-rep  { background: rgba(255, 255, 255, 0.1); color: var(--tt-text-soft); }
.i-inc  { background: rgba(168, 85, 247, 0.15); color: var(--tt-purple); }
.i-warn { background: rgba(255,92,92, 0.1); color: var(--tt-red); border: 1px solid rgba(255,92,92, 0.3); }

/* TEXT CONTENT */
.stat-title { font-weight: 700; color: #fff; font-size: 14px; margin-bottom: 3px; line-height: 1.2; }
.stat-sub { font-size: 12px; color: var(--tt-muted); line-height: 1.2; }

/* VALUES */
.val-cell { font-family: monospace; font-size: 15px; font-weight: 700; color: var(--tt-text); }
.val-wrapper { display: flex; flex-direction: column; justify-content: center; } /* Hilft bei Progress Bars */
.unit { font-size: 11px; color: var(--tt-faint); font-weight: 400; font-family: "Inter", sans-serif; margin-left: 4px; }

/* PROGRESS BAR */
.stat-bar {
    width: 100%; height: 4px; background: rgba(255,255,255,0.1);
    border-radius: 2px; margin-top: 8px; overflow: hidden;
    max-width: 120px;
}
.sb-fill { height: 100%; background: var(--tt-green); border-radius: 2px; }

/* BADGES (RATE CELL) */
.rate-cell { text-align: right; }
.badge {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    padding: 6px 10px; border-radius: 6px; display: inline-block;
    min-width: 80px; text-align: center;
    vertical-align: middle; /* Sicherheitsnetz */
}
/* Badge Colors */
.b-good { background: rgba(61,220,132, 0.1); color: var(--tt-green); border: 1px solid rgba(61,220,132, 0.2); }
.b-warn { background: rgba(250, 204, 21, 0.1); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.2); }
.b-bad  { background: rgba(255,92,92, 0.1); color: var(--tt-red); border: 1px solid rgba(255,92,92, 0.2); }
.b-neutral { background: rgba(255, 255, 255, 0.05); color: var(--tt-muted); border: 1px solid rgba(255, 255, 255, 0.1); }
.b-info { background: rgba(59, 130, 246, 0.1); color: var(--tt-blue-3); border: 1px solid rgba(59, 130, 246, 0.2); }

/* MOBILE */
@media (max-width: 600px) {
    .tt-table th, .tt-table td { padding: 12px 10px; }
    .stat-bar { max-width: 80px; }
    .icon-cell { width: 40px; }
    .stat-icon { width: 32px; height: 32px; font-size: 14px; }
    .rate-cell { text-align: right; }
}


/* ===== MIGRIERT AUS dashboard_meine_truppen.css ===== */

/* * TravTools - Truppen Dashboard (V35 - Visual Match Header & WW Options) */

.tt-troops-wrap { 
    width: 100%; 
    padding: 30px 20px; 
    box-sizing: border-box; 
    font-family: "Inter", sans-serif; 
    color: var(--tt-text-soft); 
    max-width: 1600px; 
    margin: 0; 
}

/* HEADER GLOBAL */
.tt-troops-head { 
    margin-bottom: 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    border-bottom: 1px solid var(--tt-line-solid); 
    padding-bottom: 20px; 
}
.tt-th-left h1 { 
    font-size: 24px; 
    font-weight: 900; 
    color: #fff; 
    margin: 0 0 5px 0; 
    text-transform: uppercase; 
}
.tt-th-left p { margin: 0; font-size: 12px; color: var(--tt-muted); }

/* MESSAGES */
.tt-msg { padding: 12px 15px; border-radius: 8px; margin-bottom: 20px; font-weight: 700; font-size: 12px; }
.tt-msg.success { background: rgba(61,220,132,0.1); color: var(--tt-green); border: 1px solid rgba(61,220,132,0.2); }
.tt-msg.error { background: rgba(255,92,92,0.1); color: var(--tt-red); border: 1px solid rgba(255,92,92,0.2); }

/* STATS GRID */
.tt-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.tt-stat-card { 
    background: var(--tt-surface-solid); 
    border: 1px solid var(--tt-line-solid); 
    border-radius: 10px; 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    transition: transform 0.2s, border-color 0.2s; 
}
.tt-stat-card:hover { transform:none; border-color: #f2c14a; }
.tt-stat-val { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 5px; font-family: monospace; }
.tt-stat-lbl { font-size: 10px; text-transform: uppercase; color: var(--tt-muted); font-weight: 700; letter-spacing: 0.5px; }

.c-crop { color: var(--tt-gold-2); }
.c-gold { color: #f2c14a; }
.c-off { color: var(--tt-red); }
.c-deff { color: var(--tt-green); }

/* PARSER AREA */
.tt-parser-wrap { background: var(--tt-bg-2); border: 1px solid var(--tt-line-solid); border-radius: 10px; overflow: hidden; margin-bottom: 30px; }
.tt-parser-head { background: rgba(255,255,255,0.03); padding: 10px 15px; border-bottom: 1px solid var(--tt-line-solid); font-size: 11px; font-weight: 700; color: var(--tt-muted); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.tt-parser-area { width: 100%; height: 100px; background: transparent; border: none; color: var(--tt-text-soft); padding: 15px; font-family: monospace; font-size: 12px; resize: vertical; outline: none; }
.tt-parser-area:focus { background: rgba(255,255,255,0.02); }
.tt-parser-foot { padding: 10px 15px; border-top: 1px solid var(--tt-line-solid); background: rgba(255,255,255,0.01); display: flex; justify-content: space-between; align-items: center; }

.tt-tribe-select { 
    background: var(--tt-surface-solid); 
    color: #fff; 
    border: 1px solid var(--tt-line-solid); 
    padding: 6px 12px; 
    border-radius: 6px; 
    font-size: 11px; 
    cursor: pointer; 
}
.tt-btn-parse { 
    background: linear-gradient(135deg, #f2c14a, var(--tt-gold-2)); 
    color: #000; 
    border: none; 
    padding: 6px 16px; 
    border-radius: 6px; 
    font-weight: 800; 
    text-transform: uppercase; 
    cursor: pointer; 
    font-size: 11px; 
    transition: filter 0.2s; 
}
.tt-btn-parse:hover { filter: brightness(1.1); }

/* === MAIN TABLE CONTAINER === */
.tt-table-container { 
    background: var(--tt-surface-solid); 
    border: 1px solid var(--tt-line-solid); 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    margin-top: 20px; 
}

/* === TABLE STRUCTURE === */
.tt-table { 
    width: 100% !important; 
    border-collapse: collapse; 
    font-size: 10px; 
    white-space: nowrap; 
    table-layout: auto; 
}

/* === HEADER ROW (VISUAL FIX) === */
.tt-table th { 
    background: var(--tt-surface-solid); 
    padding: 4px 6px; /* Mehr Padding */
    text-align: center; 
    color: var(--tt-muted); 
    border-bottom: 1px solid var(--tt-line-solid); 
    font-weight: 700; 
    height: 34px; /* Höher, wie im Screenshot */
    line-height: 1.1;
    vertical-align: middle; /* Mittig zentriert */
}

/* === STATIC VILLAGE COLORS === */
.row-type-off td { background-color: rgba(255,92,92, 0.15) !important; }
.row-type-deff td { background-color: rgba(76, 175, 80, 0.15) !important; }
.row-type-spy td { background-color: rgba(255, 152, 0, 0.15) !important; }
.row-type-ww td { background-color: rgba(255,92,92, 0.4) !important; }

/* === DATA ROWS === */
.tt-table tr { height: 22px !important; }

.tt-table td { 
    padding: 0px 4px !important; 
    text-align: center; 
    border: 1px solid transparent; 
    border-bottom-color: var(--tt-surface-hover-solid); 
    color: var(--tt-text-soft); 
    vertical-align: middle; 
    height: 22px !important; 
    line-height: 22px !important; 
    overflow: hidden; 
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
}

/* === HOVER EFFECTS === */

/* 1. Horizontal (Row) - Royal Blue + Gold Lines Top/Bottom */
.tt-table tbody tr:hover td { 
    background-color: rgba(20, 60, 140, 0.3) !important; 
    color: #fff !important;
    border-top: 1px solid #f2c14a !important; 
    border-bottom: 1px solid #f2c14a !important; 
}

/* 2. Vertical (Column) - Royal Blue + Gold Lines Left/Right */
.hover-col { 
    background-color: rgba(20, 60, 140, 0.25) !important; 
    border-left: 1px solid #f2c14a !important;
    border-right: 1px solid #f2c14a !important;
    z-index: 10;
    position: relative;
}

/* === COLUMN WIDTHS & ALIGNMENT === */
.td-left { text-align: left !important; }
.th-left { text-align: left !important; }

.col-village { width: 120px; }
.col-meta { width: 40px; }

/* UNIT COLUMNS */
.col-unit { 
    width: 60px; 
    vertical-align: middle; 
}
.unit-name {
    display: block; 
    font-size: 9px; 
    line-height: 1.1; 
    white-space: normal; 
    word-wrap: break-word; 
    hyphens: auto; 
    max-width: 60px; 
    margin: 0 auto; 
    color: var(--tt-text-soft); 
}

/* INPUTS Styling */
.tt-inp-num { 
    background: transparent; 
    border: none; 
    color: inherit; 
    width: 100%; 
    text-align: center; 
    font-family: monospace; 
    font-size: 10px; 
    padding: 0; 
    height: 20px; 
    line-height: 20px;
}
.tt-inp-num.has-val { color: #fff; font-weight: 700; }
.tt-inp-num:focus { border-bottom: 1px solid #f2c14a; background: rgba(0,0,0,0.5); color: #fff; outline: none; }
.tt-inp-num:hover { background: rgba(255,255,255,0.05); }

/* SELECT Styling */
.tt-sel-mini { 
    background: transparent; 
    border: none; 
    color: var(--tt-muted); 
    font-size: 9px; 
    padding: 0; 
    border-radius: 2px; 
    text-transform: uppercase; 
    cursor: pointer; 
    width: 100%; 
    text-align: center; 
    appearance: none; 
    height: 20px; 
    line-height: 20px;
}
.tt-sel-mini:hover { color: #fff; }
.tt-sel-mini:focus { color: #f2c14a; background: var(--tt-bg-2); outline: none; }
.tt-sel-mini option { background-color: var(--tt-surface-solid); color: #fff; padding: 5px; }

/* LINKS */
.coord-link { 
    color: var(--tt-green); text-decoration: none; font-family: monospace; 
}
.coord-link:hover { text-decoration: underline; color: #fff; }

/* HERO IMAGE */
.u-icon-hero {
    background-image: url('hero.png'); 
    background-repeat: no-repeat; 
    width: 16px; 
    height: 16px;
    display: inline-block; 
    vertical-align: middle; 
    background-size: contain; 
    background-position: center; 
}

/* TOTAL ROW */
.tr-total td { 
    border-top: 1px solid var(--tt-line-solid); 
    color: #f2c14a !important; 
    font-weight: 900; 
}

@media (max-width: 1100px) { .tt-table-container { overflow-x: auto; } }


/* ===== MIGRIERT AUS dashboard_meine_ziele.css ===== */

/* * TravTools - High-End Goals Dashboard (Final Fix) */

.tt-goals-wrap {
    width: 100%;
    padding: 30px 20px; /* Etwas mehr Padding links/rechts */
    box-sizing: border-box;
    font-family: "Inter", system-ui, sans-serif;
    color: var(--tt-text);
    max-width: 1600px; /* Breiter für High-End Screens */
    margin: 0; /* WICHTIG: Linksbündig, nicht zentriert */
}

/* --- HEADER & CONTROLS --- */
.tt-goals-head {
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.tt-gh-left h1 {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #fff, var(--tt-muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tt-gh-left p { margin: 0; font-size: 14px; color: var(--tt-muted); }

.tt-btn-add {
    background: linear-gradient(135deg, var(--brandGold, #f2c14a), #d4a72c);
    color: var(--tt-bg-2);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(242, 193, 74, 0.25);
    transition: all 0.2s ease;
}
.tt-btn-add:hover {
    transform:none;
    box-shadow: 0 6px 25px rgba(242, 193, 74, 0.4);
    filter: brightness(1.1);
}

/* --- GLOBAL STATS --- */
.tt-stats-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: center;
    margin-bottom: 40px;
    background: rgba(22, 27, 34, 0.5);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.tt-glob-label { font-size: 12px; font-weight: 700; color: var(--tt-muted); text-transform: uppercase; letter-spacing: 1px; }
.tt-glob-val { font-size: 14px; font-weight: 900; color: #fff; }
.tt-progress-track {
    background: rgba(255,255,255,0.05);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    position: relative;
}
.tt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tt-green), #22c55e); 
    box-shadow: 0 0 10px rgba(61,220,132, 0.5);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- GRID LAYOUT --- */
.tt-goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 25px;
    align-items: start; /* Verhindert Stretching */
}

/* --- GOAL CARD --- */
.tt-goal-card {
    background: var(--tt-surface-solid);
    border: 1px solid var(--tt-line-solid);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    overflow: hidden;
}
.tt-goal-card:hover {
    border-color: rgba(255,255,255,0.2);
    transform:none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Completed State */
.tt-goal-card.is-completed { opacity: 0.7; border-color: #238636; }
.tt-goal-card.is-completed::after {
    content: "DONE";
    position: absolute;
    top: 15px;
    right: -25px;
    background: #238636;
    color: #fff; 
    font-size: 10px;
    font-weight: 900;
    padding: 5px 30px;
    transform: rotate(45deg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* Priority Styles */
.tt-prio-high { border-left: 4px solid var(--tt-red); }
.tt-prio-high:hover { box-shadow: -5px 5px 30px rgba(255,92,92, 0.15); }
.tt-prio-medium { border-left: 4px solid #d29922; }
.tt-prio-low { border-left: 4px solid #3fb950; }

/* CARD HEADER */
.tt-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}
.tt-head-main { flex: 1; }

/* Badges & Creator */
.tt-meta-badges { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.tt-badge-pill {
    font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
    letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 4px;
}
.tt-bp-admin { background: rgba(163, 113, 247, 0.15); color: #d2a8ff; border: 1px solid rgba(163, 113, 247, 0.3); }
.tt-bp-user { background: rgba(255,255,255,0.05); color: var(--tt-muted); border: 1px solid rgba(255,255,255,0.1); }

.tt-card-title { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 5px; word-break: break-word; }
.tt-card-creator { font-size: 11px; color: var(--tt-muted); display: flex; align-items: center; gap: 4px; }
.tt-creator-name { color: var(--tt-text-soft); font-weight: 600; display: inline-flex; align-items: center; }

/* DONUT CHART */
.tt-donut {
    width: 50px; height: 50px; position: relative; border-radius: 50%;
    background: conic-gradient(var(--chart-color) var(--chart-deg), rgba(255,255,255,0.05) 0deg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.3); flex-shrink: 0;
}
.tt-donut::after {
    content: ""; position: absolute; inset: 6px; background: var(--tt-surface-solid); border-radius: 50%;
}
.tt-donut-val {
    position: relative; z-index: 1; font-size: 11px; font-weight: 900; color: #fff;
}
.tt-donut.is-100 .tt-donut-val { color: var(--tt-green); }

/* CARD BODY */
.tt-card-desc { font-size: 13px; color: var(--tt-muted); line-height: 1.6; margin-bottom: 20px; white-space: pre-wrap; }

/* SUB GOALS LIST */
.tt-sub-wrap {
    background: rgba(0,0,0,0.2); border-radius: 8px; padding: 15px; margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.03);
}
.tt-sub-label { font-size: 10px; font-weight: 800; color: #444c56; text-transform: uppercase; margin-bottom: 10px; display: block; }

.tt-sub-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: 0.2s;
}
.tt-sub-item:last-child { border-bottom: none; }
.tt-sub-item.is-done .tt-sub-text { text-decoration: line-through; color: #444c56; }

/* Custom Checkbox */
.tt-chk-wrap { position: relative; width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.tt-chk-input { 
    opacity: 0; position: absolute; width: 100%; height: 100%; cursor: pointer; z-index: 2; margin: 0; 
}
.tt-chk-box {
    width: 100%; height: 100%; border: 2px solid var(--tt-line-solid); border-radius: 5px; background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.tt-chk-input:checked + .tt-chk-box { background: var(--brandGold); border-color: var(--brandGold); }
.tt-chk-box::after {
    content: "✔"; font-size: 12px; color: #000; font-weight: 900; display: none;
}
.tt-chk-input:checked + .tt-chk-box::after { display: block; }
.tt-chk-input:hover + .tt-chk-box { border-color: var(--tt-muted); }

.tt-sub-text { flex: 1; font-size: 13px; line-height: 1.4; color: var(--tt-text-soft); word-break: break-word; }
.tt-sub-del { background: none; border: none; color: #444c56; cursor: pointer; font-size: 14px; transition: 0.2s; padding: 0 5px; }
.tt-sub-del:hover { color: var(--tt-red); }

/* Add Sub Input */
.tt-add-sub { display: flex; gap: 8px; margin-top: 10px; }
.tt-inp-sub {
    flex: 1; background: transparent; border: 1px solid var(--tt-line-solid); border-radius: 6px; padding: 6px 10px;
    font-size: 12px; color: #fff; transition: 0.2s;
}
.tt-inp-sub:focus { border-color: var(--brandGold); outline: none; }
.tt-btn-sub {
    background: var(--tt-surface-hover-solid); border: 1px solid var(--tt-line-solid); color: var(--tt-text-soft); width: 30px; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.tt-btn-sub:hover { background: var(--tt-line-solid); color: #fff; }

/* CARD FOOTER */
.tt-card-foot {
    margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.05);
    display: flex; justify-content: space-between; align-items: center;
}
.tt-deadline { font-size: 11px; font-weight: 600; color: var(--tt-muted); display: flex; align-items: center; gap: 6px; }
.tt-deadline.is-late { color: var(--tt-red); }

.tt-actions { display: flex; gap: 8px; }
.tt-act-btn {
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: rgba(255,255,255,0.03); color: var(--tt-muted); cursor: pointer; transition: 0.2s;
}
.tt-act-btn:hover { background: rgba(255,255,255,0.1); color: #fff; transform:none; }
.tt-act-del:hover { background: rgba(255,92,92, 0.15); color: var(--tt-red); border-color: rgba(255,92,92, 0.3); }
.tt-act-lock { cursor: not-allowed; opacity: 0.5; }

/* --- MODAL --- */
.tt-modal-wrap { margin-bottom: 15px; }
.tt-lbl { display: block; font-size: 11px; font-weight: 700; color: var(--tt-muted); text-transform: uppercase; margin-bottom: 6px; }
.tt-inp {
    width: 100%; background: var(--tt-bg-2); border: 1px solid var(--tt-line-solid); color: #fff; padding: 12px; border-radius: 8px;
    box-sizing: border-box; font-family: inherit; font-size: 14px;
}
.tt-inp:focus { border-color: var(--brandGold); outline: none; box-shadow: 0 0 0 3px rgba(242, 193, 74, 0.1); }

@media (max-width: 800px) {
    .tt-goals-head { flex-direction: column; align-items: flex-start; gap: 15px; }
    .tt-stats-bar { grid-template-columns: 1fr; }
}


/* ===== MIGRIERT AUS dashboard_onlinezeiten.css ===== */

/* * TravTools - Onlinezeiten Planer (V12 - Final Layout) */

.tt-online-wrap {
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; font-family: "Inter", sans-serif; color: var(--tt-text-soft);
}

/* HEADER */
.tt-online-header {
    margin-bottom: 15px; border-bottom: 1px solid var(--tt-line-solid); padding-bottom: 15px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
}

/* Left */
.header-left h1 {
    font-size: 24px; font-weight: 900; color: #fff; margin: 0; text-transform: uppercase; line-height: 1;
}
.tt-msg-mini { font-size: 11px; color: var(--tt-green); font-weight: 700; margin-left: 10px; }

/* Right */
.header-right { display: flex; align-items: center; gap: 20px; }

/* CP Toggle */
.tt-cp-toggle-wrap {
    display: flex; align-items: center; gap: 10px;
    background: var(--tt-surface-solid); border: 1px solid var(--tt-line-solid); padding: 5px 12px; border-radius: 6px;
    height: 40px; box-sizing: border-box;
}
.tt-cp-label { font-size: 10px; font-weight: 700; color: #fff; text-transform: uppercase; }

.tt-switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.tt-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--tt-line-solid); transition: .4s; border-radius: 20px;
}
.slider:before {
    position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: #f2c14a; }
input:checked + .slider:before { transform: translateX(16px); }

/* Nav */
.tt-week-nav {
    display: flex; align-items: center; gap: 10px;
    background: var(--tt-surface-solid); padding: 5px 15px; border-radius: 8px; border: 1px solid var(--tt-line-solid);
    height: 40px; box-sizing: border-box;
}
.nav-btn {
    color: #f2c14a; font-size: 16px; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
}
.nav-btn:hover { background: rgba(242,193,74,0.1); }
.nav-btn.disabled { color: var(--tt-faint-2); cursor: default; pointer-events: none; }
.nav-info { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
.nav-kw { font-size: 13px; font-weight: 800; color: #fff; }
.nav-range { font-size: 10px; color: var(--tt-muted); }


/* GRID */
.tt-week-container {
    display: flex; background: var(--tt-surface-solid); border: 1px solid var(--tt-line-solid); border-radius: 12px; overflow: hidden; padding: 20px; gap: 2px; overflow-x: auto; align-items: flex-start;
}

/* --- FIX: TIME SCALE (Links) --- */
.tt-time-scale {
    display: flex; flex-direction: column; min-width: 50px; margin-right: 5px; 
    /* WICHTIG: 1px Padding um den Border rechts auszugleichen */
    padding-top: 1px; 
}

/* Header Höhe exakt gleich wie rechts */
.tt-scale-head {
    height: 50px; min-height: 50px; 
    margin-bottom: 5px; display: block;
}

/* Slot Box Model Identisch zu Rechts */
.tt-scale-slot {
    display:flex; align-items:center; justify-content:center;
    height: 30px; 
    margin-bottom: -1px; 
    border-bottom: 1px solid transparent; 
    box-sizing: border-box;
    position: relative; /* Für absolute Positionierung des Textes */
    font-size: 11px; color: var(--tt-faint);
}

.tt-scale-slot span {
    position: static;
    transform: none;
    z-index: 5;
    background: transparent;
    padding: 0;
}
.tt-scale-slot.hover-row-text span { color: #f2c14a; font-weight: 700; }

/* --- FIX: DAY COLUMNS (Rechts) --- */
.tt-day-column { flex: 1; min-width: 80px; display: flex; flex-direction: column; }

.tt-day-head {
    height: 50px; min-height: 50px; max-height: 50px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border-radius: 4px; margin-bottom: 5px; line-height: 1.2;
}
.dh-name { font-weight: 800; font-size: 11px; text-transform: uppercase; color: #fff; }
.dh-date { font-size: 10px; color: var(--tt-muted); font-weight: 400; }

.tt-day-slots { display: flex; flex-direction: column; border: 1px solid var(--tt-line-solid); background: var(--tt-bg-2); position: relative; }

.tt-slot {
    display:flex; align-items:center; justify-content:center;
    height: 30px; 
    border: 1px solid var(--tt-line-solid); 
    background: var(--tt-bg-2); cursor: pointer;
    transition: background 0.1s ease; margin-bottom: -1px; position: relative; box-sizing: border-box;
}
/* Colors */
.tt-slot.status-1 { background: var(--tt-green); border-color: #38bdf8; z-index: 1; }
.tt-slot.status-2 { background: #facc15; border-color: #fde047; z-index: 1; }
.tt-slot.status-3 { background: var(--tt-red); border-color: var(--tt-red-2); z-index: 1; }
/* Hover */
.tt-slot.hover-row { border-top: 2px solid #f2c14a; border-bottom: 2px solid #f2c14a; z-index: 10; }
.tt-day-column:not(:last-child) .tt-slot.hover-row { border-right: none; }
.tt-day-column:not(:first-child) .tt-slot.hover-row { border-left: none; }

/* FOOTER */
.tt-actions {
    margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--tt-line-solid);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}
.tt-legend-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.legend-opt {
    display: flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 6px;
    background: var(--tt-surface-solid); border: 1px solid var(--tt-line-solid); cursor: pointer; transition: 0.2s;
    font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--tt-muted); white-space: nowrap;
}
.legend-opt input { display: none; }
.legend-opt:hover { filter: brightness(1.2); }
.legend-opt input:checked + span { color: #fff; }

.legend-opt.status-1:has(input:checked) { background: rgba(61,220,132, 0.2); border-color: var(--tt-green); color: var(--tt-green); }
.legend-opt.status-2:has(input:checked) { background: rgba(250, 204, 21, 0.2); border-color: #facc15; color: #facc15; }
.legend-opt.status-3:has(input:checked) { background: rgba(255,92,92, 0.2); border-color: var(--tt-red); color: var(--tt-red); }

.tt-btns-right { display: flex; gap: 15px; }
.tt-btn-save {
    background: linear-gradient(135deg, #f2c14a, var(--tt-gold-2)); color: var(--tt-bg-0); border: none;
    padding: 12px 30px; border-radius: 8px; font-weight: 800; font-size: 14px;
    text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 15px rgba(242,193,74,0.2); transition: 0.2s;
    display: flex; align-items: center; gap: 8px;
}
.tt-btn-save:hover { transform:none; filter: brightness(1.1); }
.tt-btn-reset {
    background: transparent; border: 1px solid var(--tt-line-solid); color: var(--tt-muted);
    padding: 12px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
}
.tt-btn-reset:hover { border-color: var(--tt-red); color: var(--tt-red); }

/* MOBILE */
@media (max-width: 900px) {
    .tt-online-header { flex-direction: column; align-items: flex-start; }
    .header-right { width: 100%; flex-direction: column-reverse; align-items: stretch; }
    .tt-cp-toggle-wrap, .tt-week-nav { width: 100%; justify-content: space-between; }
    .tt-day-column { min-width: 60px; }
    .tt-actions { flex-direction: column; align-items: stretch; }
    .tt-btns-right { justify-content: space-between; }
}


/* ===== MIGRIERT AUS dashboard_sitterkonten.css ===== */

/* * TravTools - Sitter Dashboard (Left Aligned & Mobile Optimized) */

.tt-sitter-wrap {
    width: 100%;
    padding: 25px 10px;
    box-sizing: border-box;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: var(--tt-text-soft);
    max-width: 1000px; /* Begrenzt die Breite */
    margin: 0; /* Links bündig */
}

/* Header */
.tt-sitter-head {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--tt-line-solid);
    padding-bottom: 15px;
}
.tt-sitter-head h1 {
    font-size: 24px; font-weight: 900; color: #fff; margin: 0 0 5px 0;
    text-transform: uppercase; letter-spacing: 1px;
}
.tt-sitter-head p { margin: 0; font-size: 13px; color: var(--tt-muted); }

/* Cluster Badge (NEU) */
.cluster-badge {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #f2c14a;
    background: rgba(242, 193, 74, 0.1);
    border: 1px solid rgba(242, 193, 74, 0.2);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Form Grid */
.tt-sitter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Standard: 2 Spalten */
    gap: 20px;
}

/* Single Slot Card */
.tt-slot-card {
    background: var(--tt-surface-solid);
    border: 1px solid var(--tt-line-solid);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: border-color 0.2s;
}
.tt-slot-card:focus-within {
    border-color: var(--brandGold, #f2c14a);
    box-shadow: 0 0 10px rgba(242, 193, 74, 0.1);
}

/* Slot Number Badge */
.tt-slot-num {
    background: rgba(255,255,255,0.05);
    color: var(--tt-faint);
    font-size: 14px; font-weight: 800;
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0; /* Verhindert Schrumpfen auf Handy */
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--tt-line-solid);
}

/* Input Area */
.tt-slot-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0; /* Wichtig für Grid/Flex Overflow */
}
.tt-slot-label {
    display: block; font-size: 10px; text-transform: uppercase; 
    font-weight: 700; color: var(--tt-muted); margin-bottom: 4px;
}
.tt-sitter-input {
    width: 100%;
    background: var(--tt-bg-2);
    border: 1px solid var(--tt-line-solid);
    color: #fff;
    padding: 10px 12px; /* Etwas größeres Padding für Touch */
    border-radius: 6px;
    font-size: 15px; /* Lesbare Schriftgröße Mobile */
    font-weight: 600;
    box-sizing: border-box;
    outline: none;
    transition: 0.2s;
}
.tt-sitter-input:focus { border-color: var(--brandGold, #f2c14a); }

/* Validation Icon */
.tt-val-icon {
    position: absolute; right: 10px; top: 32px;
    font-size: 14px;
    pointer-events: none;
}
.tt-val-ok { color: var(--tt-green); } /* Grün */
.tt-val-err { color: var(--tt-red); } /* Rot */

/* Footer Actions */
.tt-sitter-actions {
    margin-top: 30px;
    display: flex; justify-content: flex-start;
    padding-top: 20px; border-top: 1px solid var(--tt-line-solid);
}
.tt-btn-save {
    background: linear-gradient(135deg, var(--brandGold, #f2c14a), var(--tt-gold-2));
    color: var(--tt-bg-0); border: none;
    padding: 12px 30px; /* Großzügige Klickfläche */
    border-radius: 6px;
    font-weight: 800; font-size: 14px; text-transform: uppercase;
    cursor: pointer; transition: transform 0.1s;
}
.tt-btn-save:hover { transform:none; filter: brightness(1.1); }

/* MOBILE OPTIMIZATION */
@media (max-width: 800px) {
    .tt-sitter-grid { 
        grid-template-columns: 1fr; /* Untereinander stapeln */
        gap: 15px;
    }
    .tt-sitter-wrap {
        padding: 15px;
    }
    .tt-btn-save {
        width: 100%; /* Button volle Breite auf Handy */
        text-align: center;
    }
}


/* ===== MIGRIERT AUS dashboard_uebersicht.css ===== */

/* * TravTools - Dashboard (V11 - Fix Alignment Supporter) */

.tt-dash-wrap { 
    width: 100%; 
    padding: 25px 10px 10px 10px; 
    box-sizing: border-box; 
    font-family: "Inter", sans-serif; 
    color: var(--tt-text-soft); 
}

/* GRID LAYOUT */
.tt-dash-grid { 
    display: grid; 
    grid-template-columns: repeat(10, 1fr); 
    gap: 15px; 
}

/* WIDGET BASE */
.tt-widget { 
    background: var(--tt-surface-solid); 
    border: 1px solid var(--tt-line-solid); 
    border-radius: 8px; 
    padding: 15px; 
    display: flex; flex-direction: column; 
    position: relative; overflow: hidden; 
    transition: transform 0.2s; 
    min-height: 160px; 
}
.tt-widget:hover { border-color: rgba(255,255,255,0.15); }

/* WIDGET HEADER */
.tt-w-head { 
    display: flex; align-items: center; justify-content: space-between; 
    margin-bottom: 12px; padding-bottom: 8px; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    min-height: 28px; 
}
.tt-w-title { 
    font-size: 11px; font-weight: 800; color: var(--tt-muted); text-transform: uppercase; 
    display: flex; align-items: center; gap: 6px; 
}
.tt-w-icon { color: var(--brandGold, #f2c14a); }
.tt-w-actions { display: flex; align-items: center; gap: 10px; }

/* BUTTONS */
.tt-btn-head { 
    background: linear-gradient(135deg, #f2c14a, var(--tt-gold-2)); 
    color: var(--tt-bg-0); border: none; font-weight: 800; 
    padding: 4px 10px; border-radius: 4px; 
    cursor: pointer; text-transform: uppercase; font-size: 9px; 
    text-decoration: none; transition: 0.2s; 
    display: inline-flex; align-items: center; gap: 4px; 
}
.tt-btn-head:hover { filter: brightness(1.1); transform:none; }

.tt-btn-inline { 
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); 
    color: var(--tt-text-soft); font-size: 9px; padding: 2px 8px; border-radius: 4px; 
    cursor: pointer; text-transform: uppercase; font-weight: 700; 
    transition: 0.2s; margin-left: 10px; white-space: nowrap; 
}
.tt-btn-inline:hover { background: #fff; color: #000; }

/* --- GRID SPANS --- */
.w-supporter, .w-ally-info, .w-quota, .w-bonus, .w-off { grid-column: span 2; }
.w-list-box { grid-column: span 5; }
.w-online { grid-column: span 10; min-height: auto; }


/* --- WIDGET STYLES --- */

/* ALLY INFO */
.w-ally-info { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--tt-surface-solid), var(--tt-bg-2)); padding: 20px; }
.tt-ally-logo { width: 140px; height: auto; filter: drop-shadow(0 0 15px rgba(242,193,74,0.2)); }

/* QUOTA */
.tt-quota-chart { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; margin: 5px 0; }
.tt-pie { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--col) var(--pct), #2a303c 0); display: flex; align-items: center; justify-content: center; }
.tt-pie::after { content: attr(data-val); position: absolute; width: 64px; height: 64px; background: var(--tt-surface-solid); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; }
.tt-quota-stat { text-align: center; font-size: 12px; font-weight: 700; color: var(--tt-red); margin-bottom: 5px; }

/* BONUS */
.w-bonus { display: flex; flex-direction: column; }
.tt-bonus-text { font-size: 16px; font-weight: 700; color: #fff; text-align: center; margin: auto 0; font-style: italic; }

/* OFF */
.tt-off-count { font-size: 24px; font-weight: 900; color: #fff; }
.tt-off-sub { font-size: 11px; color: var(--tt-muted); }
.tt-off-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.tt-off-item { font-size: 10px; background: rgba(255,255,255,0.05); padding: 3px 6px; border-radius: 3px; display: flex; justify-content: space-between; }

/* SUPPORTER (GEFIXT) */
.w-supporter { 
    /* grid-column: span 2; übernommen von oben */
    /* Keine speziellen Alignments hier, damit Header oben bleibt */
}
/* Neuer Container für den Inhalt */
.tt-supporter-inner {
    flex: 1; /* Füllt den Rest der Höhe */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tt-badge-xl { transform: scale(3.5); margin: 20px 0; transform-origin: center; }
.tt-supporter-text { font-size: 14px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; text-align: center; }
.tt-badge.is-none { background: var(--tt-line-solid); border: 1px solid rgba(255,255,255,0.1); box-shadow: none; }
.tt-badge.is-none::after { display: none; }

/* LISTS */
.tt-list-rows { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 140px; }
.tt-row-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 8px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
.tt-row-item:hover { background: rgba(255,255,255,0.06); }
.tt-ri-main { font-size: 12px; font-weight: 600; color: var(--tt-text); }
.tt-ri-sub { font-size: 10px; color: var(--tt-muted); margin-top: 1px; }
.tt-ri-badge { font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; white-space: nowrap; }
.tt-res-box { font-family: monospace; font-size: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--tt-line-solid); padding: 2px 5px; border-radius: 3px; color: var(--tt-text-soft); }
.bg-red { background: rgba(255,92,92,0.15); color: var(--tt-red); border: 1px solid rgba(255,92,92,0.2); }
.bg-green { background: rgba(61,220,132,0.15); color: var(--tt-green); border: 1px solid rgba(61,220,132,0.2); }
.bg-blue { background: rgba(59,130,246,0.15); color: var(--tt-blue-3); border: 1px solid rgba(59,130,246,0.2); }

/* ONLINE PLANER */
.tt-week-grid { display: flex; gap: 8px; margin-top: 5px; }
.tt-day-col { flex: 1; background: rgba(255,255,255,0.02); border: 1px solid var(--tt-line-solid); border-radius: 6px; padding: 8px; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; gap: 4px; min-height: 80px; }
.tt-day-col:hover { background: rgba(255,255,255,0.05); border-color: #f2c14a; }
.tt-day-head { font-weight: 800; font-size: 11px; color: #fff; text-align: center; }
.tt-day-date { font-size: 9px; color: var(--tt-faint); text-align: center; display: block; }
.tt-time-bar { height: 4px; background: #2a303c; border-radius: 2px; overflow: hidden; display: flex; margin-top: auto; }
.tt-tb-seg { flex: 1; border-right: 1px solid var(--tt-surface-solid); }
.tt-tb-seg.active { background: var(--tt-green); }

/* MODAL */
.tt-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000; backdrop-filter: blur(5px); align-items: center; justify-content: center; }
.tt-modal-overlay.active { display: flex; }
.tt-modal-lg { width: 95%; max-width: 900px; background: var(--tt-surface-solid); border: 1px solid #f2c14a; border-radius: 10px; padding: 25px; box-shadow: 0 0 50px rgba(0,0,0,0.8); max-height: 90vh; overflow-y: auto; }

.tt-time-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 20px 0; }
.tt-time-block { background: rgba(255,255,255,0.02); border: 1px solid var(--tt-line-solid); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tt-tb-title { font-size: 12px; font-weight: 800; color: #f2c14a; text-transform: uppercase; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; margin-bottom: 5px; }
.tt-time-slot { background: var(--tt-bg-2); border: 1px solid var(--tt-line-solid); border-radius: 4px; padding: 8px 0; text-align: center; font-size: 12px; color: var(--tt-muted); cursor: pointer; user-select: none; transition: 0.1s; }
.tt-time-slot:hover { border-color: var(--tt-muted); color: #fff; }
.tt-time-slot.selected { background: var(--tt-green); color: #000; font-weight: 800; border-color: var(--tt-green); box-shadow: 0 0 10px rgba(61,220,132,0.2); }

.tt-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.tt-btn-save { background: #f2c14a; color: #000; border: none; padding: 8px 25px; font-weight: 800; border-radius: 6px; cursor: pointer; }
.tt-btn-cancel { background: transparent; border: 1px solid var(--tt-line-solid); color: var(--tt-text-soft); padding: 8px 25px; border-radius: 6px; cursor: pointer; }

/* RESPONSIVE */
@media (max-width: 1400px) {
    .tt-dash-grid { grid-template-columns: repeat(6, 1fr); }
    .w-ally-info, .w-quota, .w-bonus { grid-column: span 2; }
    .w-off, .w-supporter { grid-column: span 3; }
    .w-list-box { grid-column: span 3; }
    .w-online { grid-column: span 6; }
}

@media (max-width: 900px) {
    .tt-dash-grid { grid-template-columns: repeat(2, 1fr); }
    .w-ally-info, .w-quota, .w-bonus, .w-off, .w-supporter { grid-column: span 1; }
    .w-list-box { grid-column: span 2; }
    .w-online { grid-column: span 2; }
    .tt-time-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .tt-dash-grid { grid-template-columns: 1fr; }
    .w-ally-info, .w-quota, .w-bonus, .w-off, .w-supporter, .w-list-box, .w-online { grid-column: span 1; }
    .tt-time-cols { grid-template-columns: 1fr; }
}

.tt-supporter-badge{display:flex;align-items:center;justify-content:center;min-height:64px;font-size:34px;color:#fff;}
.tt-supporter-badge .tt-badge-img{width:40px;height:40px;margin-left:0;vertical-align:middle;}