/* LinkerTheThinker Tactical RMM – Fontaine-Design Overhaul v4 */
/* Einsatzbuch/Werkstattzettel: Beige Papier, Grid, Orange/Teal, harte Schatten, Outfit */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&display=swap');

/* ── Design Tokens ── */
:root {
  --lt-paper: #f4ead6;
  --lt-ink: #1d2422;
  --lt-muted: #5e665f;
  --lt-orange: #f28b35;
  --lt-teal: #1c918a;
  --lt-teal-hover: #167770;
  --lt-tile: #fff7e8;
  --lt-tile-hover: #fff1d6;
  --lt-line: rgba(29,36,34,0.16);
  --lt-shadow: #1d2422;
  --lt-border: 3px solid #1d2422;
  --lt-shadow-hard: 7px 7px 0 var(--lt-shadow);
  --lt-shadow-sm: 4px 4px 0 var(--lt-shadow);
  --lt-font: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* ── Base Reset ── */
html, body, #q-app {
  min-height: 100%;
  background: var(--lt-paper) !important;
  color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
}

body {
  background:
    linear-gradient(var(--lt-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lt-line) 1px, transparent 1px),
    var(--lt-paper) !important;
  background-size: 28px 28px !important;
}

/* Remove old body:after watermark */
body:after { content: none !important; }
body:before { content: none !important; }

/* ── Layout ── */
.q-layout,
.q-page,
.q-page-container,
.q-drawer,
.q-header,
.q-footer {
  background: transparent !important;
  color: var(--lt-ink) !important;
}

.q-drawer {
  background: var(--lt-paper) !important;
  border-right: var(--lt-border) !important;
  box-shadow: 2px 0 0 var(--lt-shadow) !important;
  backdrop-filter: none !important;
}

.q-header {
  background: var(--lt-tile) !important;
  border-bottom: var(--lt-border) !important;
  box-shadow: 0 4px 0 var(--lt-shadow) !important;
  backdrop-filter: none !important;
}

.q-footer {
  background: var(--lt-tile) !important;
  border-top: var(--lt-border) !important;
}

/* ── Cards ── */
.q-card,
.q-dialog__inner .q-card,
.q-menu,
.q-list,
.q-expansion-item,
.q-banner,
.q-editor {
  background: var(--lt-tile) !important;
  border: var(--lt-border) !important;
  box-shadow: var(--lt-shadow-hard) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  color: var(--lt-ink) !important;
}

.q-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 9px 9px 0 var(--lt-shadow) !important;
}

/* ── Q-Table (Agentenliste etc.) ── */
.q-table__container,
.q-table {
  background: var(--lt-tile) !important;
  border: var(--lt-border) !important;
  box-shadow: var(--lt-shadow-hard) !important;
  border-radius: 0 !important;
  color: var(--lt-ink) !important;
}

.q-table thead th {
  background: var(--lt-ink) !important;
  color: var(--lt-paper) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-family: var(--lt-font) !important;
  border-bottom: 3px solid var(--lt-orange) !important;
}

.q-table tbody td {
  border-bottom: 1px solid var(--lt-line) !important;
  font-family: var(--lt-font) !important;
}

.q-table tbody tr:hover {
  background: var(--lt-tile-hover) !important;
}

/* ── Buttons ── */
.q-btn {
  border-radius: 0 !important;
  font-weight: 800 !important;
  font-family: var(--lt-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: var(--lt-border) !important;
  box-shadow: var(--lt-shadow-sm) !important;
  min-height: 42px;
  transition: transform 0.1s, box-shadow 0.1s;
}

.q-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--lt-shadow) !important;
}

.q-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--lt-shadow) !important;
}

/* Primary = Teal */
.q-btn.bg-primary,
.bg-primary,
.q-btn .bg-primary {
  background: var(--lt-teal) !important;
  color: #fff !important;
  border-color: var(--lt-ink) !important;
}

.q-btn.bg-primary:hover,
.bg-primary:hover {
  background: var(--lt-teal-hover) !important;
}

/* Positive = Orange (= Aktion, nicht Grün) */
.q-btn.bg-positive,
.bg-positive {
  background: var(--lt-orange) !important;
  color: var(--lt-ink) !important;
  border-color: var(--lt-ink) !important;
}

/* Negative / Danger = Rotstich */
.q-btn.bg-negative,
.bg-negative,
.q-btn.bg-red,
.bg-red {
  background: #d93b3b !important;
  color: #fff !important;
  border-color: var(--lt-ink) !important;
}

/* Flat buttons */
.q-btn--flat {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.q-btn--flat:hover {
  background: rgba(28,145,138,0.1) !important;
  box-shadow: none !important;
}

/* Round → square override for icon buttons */
.q-btn--round {
  border-radius: 0 !important;
}

/* ── Form Fields ── */
.q-field__control {
  min-height: 48px !important;
  background: #fff !important;
  border: var(--lt-border) !important;
  box-shadow: 4px 4px 0 rgba(29,36,34,0.2) !important;
  border-radius: 0 !important;
  font-family: var(--lt-font) !important;
}

.q-field__native,
.q-field__input,
.q-field__label {
  color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
}

.q-field--focused .q-field__control {
  border-color: var(--lt-orange) !important;
  box-shadow: 4px 4px 0 var(--lt-orange) !important;
}

.q-field--error .q-field__control {
  border-color: #d93b3b !important;
  box-shadow: 4px 4px 0 #d93b3b !important;
}

/* ── Inputs ── */
.q-field__native,
input,
textarea,
select {
  font-family: var(--lt-font) !important;
}

/* ── Navigation / Items ── */
.q-item {
  border-radius: 0 !important;
  margin: 0 !important;
  font-family: var(--lt-font) !important;
  border-bottom: 1px solid var(--lt-line) !important;
}

.q-item:hover {
  background: var(--lt-tile-hover) !important;
}

.q-item.q-router-link--active,
.q-item--active {
  background: var(--lt-teal) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* ── Text Colors ── */
.text-primary { color: var(--lt-teal) !important; }
.text-positive { color: var(--lt-orange) !important; }
.text-negative,
.text-red { color: #d93b3b !important; }
.text-muted,
.text-grey { color: var(--lt-muted) !important; }

/* ── Chips / Badges ── */
.q-chip {
  border-radius: 0 !important;
  border: var(--lt-border) !important;
  background: var(--lt-tile) !important;
  color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  box-shadow: 3px 3px 0 var(--lt-shadow) !important;
}

/* Online/Offline Status Chips */
.q-chip.bg-green,
.q-chip.bg-positive {
  background: var(--lt-teal) !important;
  color: #fff !important;
}

.q-chip.bg-red,
.q-chip.bg-negative {
  background: #d93b3b !important;
  color: #fff !important;
}

/* ── Separator / Divider ── */
.q-separator {
  background: var(--lt-line) !important;
}

/* ── Tabs ── */
.q-tab {
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  color: var(--lt-muted) !important;
  border-bottom: 3px solid transparent !important;
}

.q-tab--active {
  color: var(--lt-ink) !important;
  border-bottom-color: var(--lt-orange) !important;
}

.q-tab__indicator {
  background: var(--lt-orange) !important;
  height: 3px !important;
}

/* ── Toolbar / Tooltips ── */
.q-toolbar {
  background: var(--lt-tile) !important;
  border-bottom: var(--lt-border) !important;
  font-family: var(--lt-font) !important;
}

.q-tooltip {
  background: var(--lt-ink) !important;
  color: var(--lt-paper) !important;
  font-family: var(--lt-font) !important;
  border: 2px solid var(--lt-orange) !important;
  border-radius: 0 !important;
  box-shadow: var(--lt-shadow-sm) !important;
}

/* ── Badges ── */
.q-badge {
  background: var(--lt-orange) !important;
  color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
}

/* ── Breadcrumbs ── */
.q-breadcrumb {
  font-family: var(--lt-font) !important;
  color: var(--lt-muted) !important;
}

.q-breadcrumb--active {
  color: var(--lt-ink) !important;
}

/* ── Select/Dropdown ── */
.q-menu {
  border: var(--lt-border) !important;
  box-shadow: var(--lt-shadow-hard) !important;
  background: var(--lt-tile) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

/* ── Dialog/Modal ── */
.q-dialog__inner .q-card {
  border: var(--lt-border) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--lt-paper);
}

::-webkit-scrollbar-thumb {
  background: var(--lt-ink);
  border: 3px solid var(--lt-paper);
}

/* ── Top App Bar Branding ── */
.q-toolbar__title {
  font-family: var(--lt-font) !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.04em;
}

/* ── Avatar ── */
.q-avatar {
  border: 2px solid var(--lt-ink) !important;
  box-shadow: 3px 3px 0 var(--lt-shadow) !important;
  border-radius: 0 !important;
  font-family: var(--lt-font) !important;
}

/* ── Toggle / Switch ── */
.q-toggle__track {
  border: 2px solid var(--lt-ink) !important;
  background: var(--lt-paper) !important;
}

.q-toggle__thumb {
  border: 2px solid var(--lt-ink) !important;
}

/* ── Linear Progress ── */
.q-linear-progress__model {
  background: var(--lt-orange) !important;
}

/* ── Notification ── */
.q-notification {
  border: var(--lt-border) !important;
  box-shadow: var(--lt-shadow-hard) !important;
  background: var(--lt-tile) !important;
  color: var(--lt-ink) !important;
  border-radius: 0 !important;
  font-family: var(--lt-font) !important;
}

.q-notification.bg-positive {
  border-color: var(--lt-teal) !important;
  background: #d7f4ef !important;
}

.q-notification.bg-negative {
  border-color: #d93b3b !important;
  background: #fde8e8 !important;
}

/* ── Pagination ── */
.q-pagination button {
  font-family: var(--lt-font) !important;
  border: 2px solid var(--lt-ink) !important;
  border-radius: 0 !important;
}

.q-pagination button.bg-primary {
  background: var(--lt-teal) !important;
  color: #fff !important;
}

/* ── Drawer overlay (mobile) ── */
.q-drawer__backdrop {
  background: rgba(29,36,34,0.6) !important;
}

/* ==============================================
   LT OPS Panel – Einsatzbuch-Stil
   ============================================== */
.lt-ops-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(340px, calc(100vw - 36px));
  z-index: 9999;
  padding: 16px;
  border: var(--lt-border);
  background: var(--lt-tile);
  color: var(--lt-ink);
  box-shadow: var(--lt-shadow-hard);
  font-family: var(--lt-font);
  border-radius: 0;
}

.lt-ops-panel.lt-collapsed {
  width: auto;
  padding: 0;
  border-color: var(--lt-ink);
  overflow: hidden;
}

.lt-ops-toggle {
  border: 0;
  cursor: pointer;
  color: #fff;
  background: var(--lt-teal);
  padding: 11px 16px;
  font-weight: 900;
  font-family: var(--lt-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  border-radius: 0;
}

.lt-ops-toggle:hover {
  background: var(--lt-teal-hover);
}

.lt-ops-panel.lt-collapsed .lt-ops-body {
  display: none;
}

.lt-ops-panel:not(.lt-collapsed) .lt-ops-toggle {
  width: 100%;
  margin-bottom: 14px;
}

.lt-ops-title {
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--lt-ink);
  border-bottom: 2px solid var(--lt-orange);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.lt-ops-sub {
  color: var(--lt-muted);
  font-size: 0.8rem;
  margin: 0 0 14px;
}

.lt-ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lt-ops-link {
  display: block;
  padding: 12px 12px;
  text-decoration: none;
  color: var(--lt-ink);
  background: var(--lt-paper);
  border: 2px solid var(--lt-ink);
  font-weight: 800;
  font-family: var(--lt-font);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  box-shadow: 4px 4px 0 var(--lt-shadow);
  text-align: center;
  border-radius: 0;
}

.lt-ops-link:hover {
  background: var(--lt-orange);
  color: var(--lt-ink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--lt-shadow);
}

/* ── Login Page Specific ── */
.q-page .q-card {
  max-width: 400px;
  margin: 0 auto;
}

.q-page .q-card .q-btn {
  width: 100%;
}

/* ── Mobile ── */
@media (max-width: 760px) {
  .lt-ops-panel {
    right: 8px;
    bottom: 8px;
  }

  .q-card,
  .q-table__container {
    border-radius: 0 !important;
  }

  .q-drawer {
    border-right: 2px solid var(--lt-ink) !important;
  }
}