/* CSS centrale condiviso - aspetto tecnologico ed elegante, dark mode - personalizza colori, spaziature e componenti qui */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  color: #e0e0e0;
  min-height: 100vh;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(0, 212, 255, 0.3);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Variabili colori tech */
:root {
  --brand-primary: #ff9318;
  --brand-secondary: #ff6b6b;
  --brand-success: #00ff88;
  --brand-danger: #ff4444;
  --brand-warning: #ffaa00;
  --brand-info: #00aaff;
  --brand-light: #b67e7e;
  --brand-dark: #111111;
  --bg-card: rgba(30, 30, 30, 0.9);
  --bg-card-hover: rgba(40, 40, 40, 0.95);
  --border-color: rgba(100, 100, 100, 0.5);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --glow: 0 0 10px rgba(0, 212, 255, 0.2);
}

/* Navbar */
.navbar {
  background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 100%);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

.navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--brand-primary) !important;
}

.navbar .nav-link {
  transition: all 0.3s ease;
}

.navbar .nav-link:hover {
  color: var(--brand-primary) !important;
  text-shadow: 0 0 5px var(--brand-primary);
}

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.card:hover {
  background: var(--bg-card-hover);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

.card-body {
  color: #e0e0e0;
}

/* Buttons */
.btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(45deg, var(--brand-primary), #00aaff);
  border: none;
}

.btn-primary:hover {
  background: linear-gradient(45deg, #00aaff, var(--brand-primary));
  box-shadow: var(--glow);
}

.btn-outline-primary {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.btn-outline-primary:hover {
  background: var(--brand-primary);
  color: var(--bg-card);
}

/* Send button custom */
.btn-send {
  background: #007bff;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-send:hover {
  background: #0056b3;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* Open ticket button */
.btn-open-ticket {
  background: #28a745;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-open-ticket:hover {
  background: #1e7e34;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
}

/* Form elements */
.form-control {
  background: rgba(125, 161, 143, 0.9);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: #ffffff;
}

.form-control:focus {
  background: rgba(133, 130, 130, 0.9);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

.form-control::placeholder {
  color: #bbbbbb;
  opacity: 1;
}

.input-group-text {
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid var(--border-color);
  color: #e0e0e0;
}

.alert-danger {
  border-left: 4px solid var(--brand-danger);
}

.alert-success {
  border-left: 4px solid var(--brand-success);
}

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

/* Badge */
.badge {
  border-radius: 6px;
  font-weight: 500;
}

.badge-status-attesa {
  background: linear-gradient(45deg, var(--brand-info), #00aaff) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(0, 170, 255, 0.3);
}

.badge-status-carico {
  background: linear-gradient(45deg, var(--brand-success), #00dd77) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.badge-status-sospeso {
  background: linear-gradient(45deg, var(--brand-warning), #ffcc00) !important;
  color: #1a1a1a !important;
  box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

.badge-status-completato {
  background: linear-gradient(45deg, var(--brand-danger), #ff6666) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
}

/* Messaggi ticket */
.ticket-messages .message {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}

.ticket-messages .message + .message {
  margin-top: 1rem;
}

.ticket-messages .msg-bubble {
  max-width: min(85%, 720px);
  padding: 1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

.ticket-messages .msg-bubble.from-user {
  background: linear-gradient(135deg, #4a5a5a, #5a6a6a);
  color: #ffffff;
  border-bottom-left-radius: 4px;
}

.ticket-messages .msg-bubble.from-support {
  background: linear-gradient(135deg, #5a4a4a, #6a5a5a);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.ticket-messages .msg-bubble.from-support-identified {
  background: linear-gradient(135deg, #4a4a6a, #5a5a7a);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  border-color: rgba(0, 170, 255, 0.5);
}

.ticket-messages .msg-bubble .text-muted {
  color: #90EE90 !important;
  opacity: 1;
}

/* Chips */
.operator-chip {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(100, 100, 100, 0.5);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  color: #e0e0e0;
}

.user-chip {
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  color: #e0e0e0;
}

/* System note */
.system-note {
  font-size: 0.9rem;
  color: #ffaa00;
  background: rgba(30, 30, 30, 0.8);
  border: 1px dashed #555;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow);
}

/* Utilities */
.shadow-soft {
  box-shadow: var(--shadow);
}

.rounded-4 {
  border-radius: 12px;
}

/* Footer */
main {
  min-height: 70vh;
}

/* Attachments */
.attach-thumb {
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

/* Home page specific */
.bg-light {
  background: var(--bg-card) !important;
  color: #e0e0e0 !important;
}

/* Delete button icon */
.js-delete-ticket .bi-trash3-fill {
  font-size: 1.2em;
  color: #dc3545 !important;
  transition: all 0.3s ease;
}

.js-delete-ticket:hover .bi-trash3-fill {
  font-size: 1.4em;
  color: #b02a37 !important;
}

/* Ticket code badge */
.ticket-code-badge {
  font-size: 1.1em;
  font-weight: 600;
}