/* =========================================================
   Pratiche SEECALL - Tema scuro con colori brand blu
   ========================================================= */

/* ---------- Colori brand ---------- */
:root {
  /* Colori brand HEX */
  --brand-red: #c90000;
  --brand-yellow: #fabd3a;
  --brand-blue-light: #24a1ee;
  --brand-blue-dark: #2065ba;
  --brand-orange: #ec6a00;
  --brand-primary: #2065ba;
  
  /* Variabili RGB per tutti gli outline */
  --brand-red-rgb: 201, 0, 0;
  --brand-yellow-rgb: 250, 189, 58;
  --brand-orange-rgb: 236, 106, 0;
  --brand-primary-rgb: 32, 101, 186;
  --brand-blue-light-rgb: 36, 161, 238;
  
  /* Colori Bootstrap standardizzati con variabili */
  --brand-success: #198754;
  --brand-success-rgb: 25, 135, 84;
  --brand-info: #0dcaf0;
  --brand-info-rgb: 13, 202, 240;
  --brand-secondary: #6c757d;
  --brand-secondary-rgb: 108, 117, 125;
  --brand-light: #f8f9fa;
  --brand-light-rgb: 248, 249, 250;
  --brand-dark: #212529;
  --brand-dark-rgb: 33, 37, 41;
  
  /* Varianti hover standardizzate */
  --brand-red-hover: #a80000;
  --brand-orange-hover: #d45f00;
  --brand-primary-hover: #1a52a0;
  --brand-success-hover: #157347;
  --brand-info-hover: #31d2f2;
  --brand-secondary-hover: #5c636a;
  --brand-dark-hover: #1c1f23;
  --brand-light-hover: #e9ecef;
  
  --bg-1: #1b1b1b;
  --bg-2: #2c2c2c;
  --bg-3: #343a40;
  --nav-h: 64px;
}
@media (max-width: 991.98px) {
  :root { --nav-h: 56px; }
}

/* ------------------------ Layout base -------------------- */
html,
body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family:  'Roboto', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-1) !important;
  padding-top: var(--nav-h);
}

.login-title {
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.25px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  width: 100%;
}

/* ----------------- Utility responsive semplici ----------- */
@media (min-width: 992px) { .mobile-only  { display: none; } }
@media (max-width: 992px) { .desktop-only { display: none; } }

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* ==================== BOTTONI - STANDARD COMPLETO ==================== */

/* ---------- PRIMARY (blu brand) ---------- */
.btn-primary {
  color: #fff !important;
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-primary:hover {
  color: #fff !important;
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
}

.btn-primary:focus,
.btn-primary:active {
  color: #fff !important;
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-primary-rgb), .5) !important;
}

/* ---------- WARNING (arancione brand) ---------- */
.btn-warning {
  color: #fff !important;
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}

.btn-warning:hover {
  color: #fff !important;
  background-color: var(--brand-orange-hover) !important;
  border-color: var(--brand-orange-hover) !important;
}

.btn-warning:focus,
.btn-warning:active {
  color: #fff !important;
  background-color: var(--brand-orange-hover) !important;
  border-color: var(--brand-orange-hover) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-orange-rgb), .5) !important;
}

/* ---------- DANGER (rosso brand) ---------- */
.btn-danger {
  color: #fff !important;
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}

.btn-danger:hover {
  color: #fff !important;
  background-color: var(--brand-red-hover) !important;
  border-color: var(--brand-red-hover) !important;
}

.btn-danger:focus,
.btn-danger:active {
  color: #fff !important;
  background-color: var(--brand-red-hover) !important;
  border-color: var(--brand-red-hover) !important;
  box-shadow: 0 0 0 .15rem rgba(var(--brand-red-rgb), .5) !important;
}

/* ---------- SUCCESS (verde Bootstrap) ---------- */
.btn-success {
  color: #fff !important;
  background-color: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
}

.btn-success:hover {
  color: #fff !important;
  background-color: var(--brand-success-hover) !important;
  border-color: var(--brand-success-hover) !important;
}

.btn-success:focus,
.btn-success:active {
  color: #fff !important;
  background-color: var(--brand-success-hover) !important;
  border-color: var(--brand-success-hover) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-success-rgb), .5) !important;
}

/* ---------- INFO (azzurro Bootstrap) ---------- */
.btn-info {
  color: #000 !important;
  background-color: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
}

.btn-info:hover {
  color: #000 !important;
  background-color: var(--brand-info-hover) !important;
  border-color: var(--brand-info-hover) !important;
}

.btn-info:focus,
.btn-info:active {
  color: #000 !important;
  background-color: var(--brand-info-hover) !important;
  border-color: var(--brand-info-hover) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-info-rgb), .5) !important;
}

/* ---------- SECONDARY (grigio Bootstrap) ---------- */
.btn-secondary {
  color: #fff !important;
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
}

.btn-secondary:hover {
  color: #fff !important;
  background-color: var(--brand-secondary-hover) !important;
  border-color: var(--brand-secondary-hover) !important;
}

.btn-secondary:focus,
.btn-secondary:active {
  color: #fff !important;
  background-color: var(--brand-secondary-hover) !important;
  border-color: var(--brand-secondary-hover) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-secondary-rgb), .5) !important;
}

/* ---------- DARK (grigio scuro) ---------- */
.btn-dark {
  color: #fff !important;
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

.btn-dark:hover {
  color: #fff !important;
  background-color: var(--brand-dark-hover) !important;
  border-color: var(--brand-dark-hover) !important;
}

.btn-dark:focus,
.btn-dark:active {
  color: #fff !important;
  background-color: var(--brand-dark-hover) !important;
  border-color: var(--brand-dark-hover) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-dark-rgb), .5) !important;
}

/* ---------- LIGHT (grigio chiaro) ---------- */
.btn-light {
  color: #000 !important;
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
}

.btn-light:hover {
  color: #000 !important;
  background-color: var(--brand-light-hover) !important;
  border-color: var(--brand-light-hover) !important;
}

.btn-light:focus,
.btn-light:active {
  color: #000 !important;
  background-color: var(--brand-light-hover) !important;
  border-color: var(--brand-light-hover) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-light-rgb), .5) !important;
}

/* ==================== BOTTONI OUTLINE - STANDARD COMPLETO ==================== */

/* ---------- OUTLINE PRIMARY ---------- */
.btn-outline-primary {
  color: var(--brand-primary) !important;
  background-color: transparent !important;
  border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover {
  color: #fff !important;
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: #fff !important;
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-primary-rgb), .5) !important;
}

/* ---------- OUTLINE WARNING ---------- */
.btn-outline-warning {
  color: var(--brand-orange) !important;
  background-color: transparent !important;
  border-color: var(--brand-orange) !important;
}

.btn-outline-warning:hover {
  color: #fff !important;
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}

.btn-outline-warning:focus,
.btn-outline-warning:active {
  color: #fff !important;
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-orange-rgb), .5) !important;
}

/* ---------- OUTLINE DANGER ---------- */
.btn-outline-danger {
  color: var(--brand-red) !important;
  background-color: transparent !important;
  border-color: var(--brand-red) !important;
}

.btn-outline-danger:hover {
  color: #fff !important;
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}

.btn-outline-danger:focus,
.btn-outline-danger:active {
  color: #fff !important;
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-red-rgb), .5) !important;
}

/* ---------- OUTLINE SUCCESS ---------- */
.btn-outline-success {
  color: var(--brand-success) !important;
  background-color: transparent !important;
  border-color: var(--brand-success) !important;
}

.btn-outline-success:hover {
  color: #fff !important;
  background-color: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
}

.btn-outline-success:focus,
.btn-outline-success:active {
  color: #fff !important;
  background-color: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-success-rgb), .5) !important;
}

/* ---------- OUTLINE INFO ---------- */
.btn-outline-info {
  color: var(--brand-info) !important;
  background-color: transparent !important;
  border-color: var(--brand-info) !important;
}

.btn-outline-info:hover {
  color: #000 !important;
  background-color: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
}

.btn-outline-info:focus,
.btn-outline-info:active {
  color: #000 !important;
  background-color: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-info-rgb), .5) !important;
}

/* ---------- OUTLINE SECONDARY ---------- */
.btn-outline-secondary {
  color: var(--brand-secondary) !important;
  background-color: transparent !important;
  border-color: var(--brand-secondary) !important;
}

.btn-outline-secondary:hover {
  color: #fff !important;
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
}

.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: #fff !important;
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-secondary-rgb), .5) !important;
}

/* ---------- OUTLINE DARK ---------- */
.btn-outline-dark {
  color: var(--brand-dark) !important;
  background-color: transparent !important;
  border-color: var(--brand-dark) !important;
}

.btn-outline-dark:hover {
  color: #fff !important;
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

.btn-outline-dark:focus,
.btn-outline-dark:active {
  color: #fff !important;
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-dark-rgb), .5) !important;
}

/* ---------- OUTLINE LIGHT ---------- */
.btn-outline-light {
  color: var(--brand-light) !important;
  background-color: transparent !important;
  border-color: var(--brand-light) !important;
}

.btn-outline-light:hover {
  color: #000 !important;
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
}

.btn-outline-light:focus,
.btn-outline-light:active {
  color: #000 !important;
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
  box-shadow: 0 0 0 .1rem rgba(var(--brand-light-rgb), .5) !important;
}

/* ----------------------- Navbar & brand ------------------ */
.navbar.navbar-dark {
  background-color: #000;
}

.border-primary {
    border-color: var(--brand-primary) !important;
}

.text-primary {
  color: var(--brand-primary) !important;
}

.badge-primary {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* WARNING = ARANCIONE */
.border-warning {
    border-color: var(--brand-orange) !important;
}

.text-warning {
  color: var(--brand-orange) !important;
}

.badge-warning {
  background-color: var(--brand-orange) !important;
  color: #fff !important;
}

/* ------------------------- Form scuri -------------------- */
.custom-input {
  background-color: var(--bg-2) !important;
  color: #fff !important;
  border-radius: 4px;
  border: none;
}
.custom-input:focus {
  background-color: var(--bg-2) !important;
  color: #fff !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25) !important;
}

.form-check-input:checked {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.form-check-input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25) !important;
}
.custom-input::placeholder {
  color: #ffffffa8 !important;
}

/* ------------------------- Card scure -------------------- */
.custom-card {
  border: 0.02rem solid #9a9a9a !important;
  border-radius: 0.3rem !important;
  background-color: var(--bg-3) !important;
}

/* --------------------- Colori testo -------------------- */
.text-danger { color: var(--brand-red) !important; }

/* --------------------- Badge -------------------- */
.badge-primary {
  background-color: var(--brand-primary) !important;
}

.badge-warning {
  background-color: var(--brand-yellow) !important;
  color: #000 !important;
}

/* Resto del CSS originale invariato */
.triangle::before {
  border-color: #fff transparent transparent transparent;
}

.form-check-input.form-check-input-lg {
  border: 2px solid var(--brand-primary) !important;
}
.form-check-input.form-check-input-lg:checked {
  background-color: var(--brand-primary);
}

.spinner-border-lg {
  width: 8rem !important;
  height: 8rem !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler[aria-maximize="true"] {
  outline: 0;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .15rem rgba(var(--brand-primary-rgb), .35);
}

.mobile-sep {
  border-top: 1px solid rgba(var(--brand-primary-rgb), .65);
}

/* Links */
a {
  color: var(--brand-primary);
  text-decoration: none;
}

a:hover {
  color: var(--brand-primary-hover);
}

.menu-tiles .menu-link:hover { opacity:.92; }


/* TEMA GLOBALE */
body.theme-light {
  --bg-color: #ffffff !important;
  --text-color: #000000 !important;
  --card-bg: #f8f9fa !important;
  --border-color: #dee2e6 !important;
}

body.theme-dark {
  --bg-color: #1b1b1b !important;
  --text-color: #ffffff !important;
  --card-bg: #2c2c2c !important;
  --border-color: #343a40 !important;
}

/* Applica a tutto il body */
body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* E a tutti gli elementi */
.custom-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

.custom-input {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}


/* TEMA DASHBOARD */
.container-fluid.theme-light {
  --dashboard-bg: #ffffff;
  --dashboard-text: #000000;
  --dashboard-card: #f8f9fa;
  --dashboard-border: #dee2e6;
}

.container-fluid.theme-dark {
  --dashboard-bg: #1b1b1b;
  --dashboard-text: #ffffff;
  --dashboard-card: #2c2c2c;
  --dashboard-border: #343a40;
}

/* Applica i colori solo agli elementi dentro dashboard */
.container-fluid .row,
.container-fluid .col-lg-8,
.container-fluid .col-lg-3,
.container-fluid .col-sm-6 {
  background-color: var(--dashboard-bg);
  color: var(--dashboard-text);
}

.container-fluid .custom-card {
  background-color: var(--dashboard-card) !important;
  border-color: var(--dashboard-border) !important;
}

.container-fluid .custom-input {
  background-color: var(--dashboard-card) !important;
  color: var(--dashboard-text) !important;
}

/* ==================== MATERIAL SYMBOLS - CLASSI DIMENSIONI ==================== */
.material-symbols-outlined {
    font-size: 1.25rem;
    vertical-align: middle;
    line-height: 1;
}

.material-symbols-outlined.xs { font-size: 0.75rem !important; }
.material-symbols-outlined.sm { font-size: 0.875rem !important; }
.material-symbols-outlined.lg { font-size: 1.5rem !important; }
.material-symbols-outlined.xl { font-size: 1.75rem !important; }
.material-symbols-outlined.xxl { font-size: 2rem !important; }
.material-symbols-outlined.xxxl { font-size: 2.4rem !important; }


.navbar .material-symbols-outlined.lg {
    font-size: 1.5rem !important;
}

.btn .material-symbols-outlined {
    vertical-align: middle;
    position: relative;
    top: -0.05em;
}

/* Checkbox tri-stato */
.form-check-input:indeterminate {
    background-color: #fff !important;
    border-color: var(--brand-primary) !important;
    position: relative;
}

.form-check-input:indeterminate::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 4px;
    background: var(--brand-primary);
    transform: translate(-50%, -50%);
    border-radius: 2px;
}


.bg-danger-ultra-light {
    background-color: #e3c0c0 !important;
    color: #5b0606 !important;
}

.bg-warning-ultra-light {
    background-color: #fcf1c9 !important;
    color: #5b3f0d !important;
}

.bg-success-ultra-light {
    background-color: #ddf0d2 !important;
    color: #173713 !important;
}

.bg-info-ultra-light {
    background-color: #c9e9f9 !important;
    color: #0a3d62 !important;
}

.bg-secondary-ultra-light {
    background-color: #e2e3e5 !important;
    color: #383d41 !important;
}

.bg-primary-ultra-light {
    background-color: #cce0f5 !important;
    color: #0d3b66 !important;
}

.bg-dark-ultra-light {
    background-color: #d6d8d9 !important;
    color: #1b1e21 !important;
}

.bg-light-ultra-light {
    background-color: #fefefe !important;
    color: #818182 !important;
}

.table tr[class*="-ultra-light"] > th,
.table tr[class*="-ultra-light"] > td {
    background-color: inherit !important;
}



@media (max-width: 991.98px) {
  #mobileMenu {
    width: 100vw !important;
    max-width: 100vw !important;
    inset: 0 !important;
    transform: none !important;
  }
}

#mobileMenu.offcanvas-start {
  box-shadow: none !important;
  border-right: 0 !important;
}

#mobileMenu .nav-link,
#mobileMenu button.nav-link {
  color: #fff !important;
}

#mobileMenu .navbar-brand {
    line-height: 1;
    padding: 0;
}

.material-symbols-outlined.icon-bordered {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 2px;
}

#mobileMenu .offcanvas-header {
    min-height: var(--nav-h);
    padding-top: 0.1rem !important;
    padding-bottom: 0;    
    padding-left: 1.2rem !important;
    align-items: center;
}

/* ===============================
   Compensazione sidebar SOLO DESKTOP
   =============================== */
@media (min-width: 992px) {

    /* Main padding per compensare sidebar */
    main.main-padding-min {
        margin-left: 60px;
    }

    main.main-padding-max {
        margin-left: 220px;
    }

    .sidebar-min {
        width: 60px !important;
    }

    .sidebar-max {
        width: 220px !important;
    }

    .sidebar-min,
    .sidebar-max {
        z-index: 1000;
        transition: width 0.3s ease;
    }

    .sidebar-min .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .sidebar-min .nav-link span.material-symbols-outlined {
        margin-right: 0 !important;
    }

    .btn-precon {
        min-width: 110px;
        justify-content: flex-start;
    }

    .btn-precon .material-symbols-outlined {
        margin-left: 4px;
    }

    .btn-precon .desktop-only {
        flex: 1;
        text-align: center;
    }
}


body.theme-light .form-control,
body.theme-light .form-select {
    background-color: #dad8d8 !important;
    color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
}

body.theme-light .form-control::placeholder {
    color: #8a8f95 !important;
}

body.theme-light .form-control:focus,
body.theme-light .form-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25) !important;
}

body.theme-dark .form-control,
body.theme-dark .form-select {
    background-color: #2c2c2c !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}

body.theme-dark .form-control::placeholder {
    color: #b5b5b5 !important;
}

.bg-dark {
    background-color: #242424 !important;
}


/* ===== QCAPTCHA STYLE ===== */

.qcaptcha-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.qcaptcha-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qcaptcha-checkbox {
    font-size: 28px;
    color: var(--brand-primary);
}

.qcaptcha-text {
    font-size: 14px;
}

.qcaptcha-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    opacity: 0.7;
}

#ms-stato-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100% !important;
    min-width: 100% !important;
    z-index: 1050;
}

.flex-grow-1 {
    position: relative;
}

.sidebar-menu {
    top: 28px !important;
    margin-top: 28px !important;
    scrollbar-width: thin;
    scrollbar-color: #495057 #212529;
    transition: width 0.3s ease;
}
.sidebar-menu::-webkit-scrollbar {
    width: 4px;
}
.sidebar-menu::-webkit-scrollbar-track {
    background: #212529;
}
.sidebar-menu::-webkit-scrollbar-thumb {
    background-color: #495057;
    border-radius: 0 !important;
}
.sidebar-menu .nav-link:hover {
    background: rgba(255,255,255,0.1);
    border-radius: 0 !important;
}

.sidebar-menu .nav-link {
    border-radius: 0 !important;
}

/* Sidebar chiusa */
.sidebar-min .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Sidebar aperta */
.sidebar-max .nav-link {
    justify-content: flex-start;
    padding-left: 0.75rem;
}

.textarea-editing {
    transition: background-color 0.2s, border-color 0.2s;
}

.log-view-wrapper {
    max-width: 100%;
    overflow-x: auto;
}
.log-view-content {
    background: #111;
    color: #eee;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow: auto;
    font-family: monospace;
    font-size: 13px;
    padding: 12px;
    border-radius: 6px;
}

.btn:disabled {
    cursor: not-allowed;
}