:root { --bg:#0f172a; --card:#111827; --muted:#94a3b8; --text:#e5e7eb; --danger:#ef4444; }
* { box-sizing: border-box; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto; }
body { margin:0; background: var(--bg); color: var(--text); }
a { color: #93c5fd; text-decoration: none; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.topbar { display:flex; justify-content: space-between; align-items:center; padding: 12px 16px; background:#0b1220; border-bottom: 1px solid #1f2937; position: sticky; top:0; }
.brand { font-weight: 700; }
nav a { margin-right: 12px; }
.user { margin: 0 8px; color: var(--muted); }
.logout { color: var(--danger); }

/* Notification bell responsive display.  On large screens show the
   desktop bell inside the navigation; on small screens hide it and
   instead show the mobile bell placed next to the menu toggle. */
#notif-link-mobile { display: none; }
#notif-link { display: inline-block; }
@media (max-width: 768px) {
  #notif-link-mobile { display: inline-block !important; }
  #notif-link { display: none !important; }
}

/* Modern notification bell styling */
#notif-link svg, #notif-link-mobile svg {
  transition: all 0.2s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

#notif-link:hover svg, #notif-link-mobile:hover svg {
  stroke: #f59e0b;
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Enhanced notification badge */
#notif-badge, #notif-badge-mobile {
  animation: pulse 2s infinite;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Highlight high priority tickets with a red accent.  The word "Alta"
   will stand out so that users can quickly identify critical items. */
.priority-high {
  color: var(--danger);
  font-weight: bold;
}

/* Responsive navigation adjustments */
/* Medium screens (tablets and small PCs) - show toggle when menu doesn't fit */
@media (max-width: 1024px) {
  #menuToggle { display: block !important; cursor:pointer; }
  .topbar { flex-wrap: wrap; }
  .main-nav { 
    display: none; 
    flex-direction: column; 
    width: 100%; 
    margin-top: 8px; 
    background: #0b1220;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
    z-index: 1000;
  }
  .main-nav a, .main-nav span { 
    margin: 8px 0; 
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
  }
  .main-nav a:hover { background-color: #1f2937; }
  /* When the menu is open the nav is visible */
  .main-nav.open { display: flex; }
  /* Align brand to center when collapsed to one row */
  .brand { width: 100%; text-align: center; margin-bottom: 8px; }
  .brand-link { justify-content: center; }
}

/* Small screens (mobile) - same as medium but with different styling */
@media (max-width: 768px) {
  .main-nav { 
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 0;
    border-radius: 0;
    border-top: 1px solid #1f2937;
  }
}
.card { background: var(--card); border: 1px solid #1f2937; border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.narrow { max-width: 520px; margin: 0 auto; }
label { display:block; margin: 8px 0 4px; color: var(--muted); }
input, select, textarea { width: 100%; padding: 10px; border-radius: 10px; border:1px solid #334155; background:#0b1220; color:#e5e7eb; }
button { margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid #334155; background:#1f2937; color: #e5e7eb; cursor: pointer; }
button:hover { border-color: #475569; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding: 10px; border-bottom: 1px solid #1f2937; }
.muted { color: var(--muted); }
.grid3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background:#0b1220; border:1px solid #1f2937; border-radius: 16px; padding: 16px; }
.stat .label { color: var(--muted); }
.stat .value { font-size: 28px; font-weight:700; margin-top: 6px; }
.alert { background: #2b1215; border:1px solid #7f1d1d; color:#fecaca; padding: 8px 12px; border-radius: 12px; margin-bottom: 10px; }
.timeline { list-style: none; padding:0; margin:0; }
.timeline li { display:flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #1f2937; }
.timeline .time { color: var(--muted); min-width: 160px; }
.footer { color: var(--muted); text-align:center; padding: 24px; }

/* Colour classes for dashboard notifications.  Notifications for new
   tickets are highlighted in the danger colour; closures use a green
   accent; announcements appear in white; all other updates retain the
   default link colour.  Only the anchor inside each notification is
   coloured to avoid affecting the timestamp column. */
.notif-open a { color: var(--danger); }
.notif-close a { color: #22c55e; }
.notif-announcement a { color: #ffffff; }
.notif-update a { color: #93c5fd; }
.notif-pending a { color: #fbbf24; }
.kanban {
  /*
    Use auto‑fitting columns with a minimum width to improve readability.
    The previous implementation defined a fixed 6‑column grid. On smaller
    screens or when the viewport is narrow this caused each column to shrink
    excessively, making the contents hard to read. Using ``auto‑fit`` with a
    ``minmax`` constraint allows the layout to adapt: columns will wrap
    onto multiple rows if there isn’t enough horizontal space. Each column
    will always be at least 220px wide but can grow to fill the available
    space. The ``gap`` property maintains consistent spacing between
    columns.
  */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.column {
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius: 16px;
  padding: 8px;
  /* Minimum height ensures even empty columns remain visible */
  min-height: 120px;
  /* Limit height so that roughly three tickets are visible at once.  A
     scroll bar appears when the content exceeds this size, allowing
     users to access older items without overwhelming the page. */
  max-height: 320px;
  overflow-y: auto;
}

/* Refined scrollbars for Kanban columns.  The default scrollbars looked
   out of place against the dark theme.  Give them a thin profile with
   muted colours so they blend into the column backgrounds while still
   remaining visible when needed.  On browsers that support the
   standardised ``scrollbar-width`` and ``scrollbar-color`` properties the
   latter are used; for WebKit the pseudo elements are specified. */
.kanban .column::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.kanban .column::-webkit-scrollbar-track {
  background: #0b1220;
  border-radius: 4px;
}
.kanban .column::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
.kanban .column {
  /* Use thin scrollbars on Firefox/Edge */
  scrollbar-width: thin;
  scrollbar-color: #334155 #0b1220;
}

/*
  Style multi‑select dropdowns used in the bulletin board so their scrollbars
  match the dark theme.  Without custom styling the native scrollbars appear
  light and out of place against the dark cards.  The rules below mirror
  those used for the Kanban columns: a thin thumb on a dark track.  The
  ``select[multiple]`` selector targets all multi‑selects globally.  If you
  introduce other multi‑selects later they will automatically benefit from
  this styling.
*/
select[multiple]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
select[multiple]::-webkit-scrollbar-track {
  background: #0b1220;
  border-radius: 4px;
}
select[multiple]::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
select[multiple] {
  /* Enable thin scrollbars on Firefox/Edge */
  scrollbar-width: thin;
  scrollbar-color: #334155 #0b1220;
}

/*
  Ensure wide tables remain usable on small screens.  When the viewport
  shrinks below 768px the default table layout causes columns to cram
  together, making text illegible.  Instead, allow the table to scroll
  horizontally.  The ``display: block`` declaration enables overflow
  scrolling and ``white-space: nowrap`` prevents cells from wrapping
  unexpectedly.  Users can swipe sideways to see off‑screen columns.  On
  larger screens the table retains its normal behaviour.
*/
@media (max-width: 768px) {
  /* Reduce padding to maximise visible content on narrow devices.  We intentionally
     avoid forcing tables into a horizontally scrolling container because
     users reported that horizontal scrolling made it hard to read data on
     smaller screens.  Instead the page will scroll normally so all
     columns remain visible. */
  table.table th,
  table.table td {
    padding: 8px;
  }
  /* Centre the mobile navigation menu items */
  .main-nav.open {
    align-items: center;
  }
  .main-nav.open a,
  .main-nav.open span {
    width: 100%;
    text-align: center;
  }
}
.column-title { font-weight:700; margin-bottom: 8px; color:#cbd5e1; }
.ticket .code { font-weight:700; }
.inline { display:flex; gap: 6px; margin-top: 8px; }
.scope-form { display:flex; gap:12px; align-items:center; }
@media (max-width: 1100px) {
  /* Maintain auto‑fit behaviour on smaller screens */
  .kanban {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
/* Stack grids in a single column on narrow screens to prevent
   forms from being squeezed into tiny columns. */
@media (max-width: 768px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
  .grid3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  /* Single column view for very narrow screens */
  .kanban {
    grid-template-columns: 1fr;
  }
}
.button { padding: 8px 12px; border:1px solid #334155; border-radius:12px; display:inline-block; background:#1f2937; color: #e5e7eb; }

/* --- Custom tweaks for release 4.0 --- */
/* Allow vertical overflow so that action menus do not introduce nested
   scrollbars inside responsive tables.  Horizontal scrolling remains
   enabled on small screens. */
.table-responsive {
  overflow-y: visible;
}

/* Invert the colour of the calendar pickers in date inputs so that
   they remain visible against the dark background. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Dark-themed scrollbars for the searchable select dropdowns.  Without
   these rules the scrollbars appear light and out of place against the
   dark UI. */
.searchable-select select::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.searchable-select select::-webkit-scrollbar-track {
  background: #0b1220;
  border-radius: 4px;
}
.searchable-select select::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
.searchable-select select {
  scrollbar-width: thin;
  scrollbar-color: #334155 #0b1220;
}

/* Style the mobile menu toggle to appear as a compact button with an
   icon and label.  When the viewport is narrow the toggle becomes
   visible and adopts a consistent look with the rest of the UI. */
@media (max-width: 768px) {
  #menuToggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #1f2937;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 16px;
  }
}

/* Toast notifications appear in the bottom‑right corner when triggered. They fade
   in/out using the ``show`` class. */
#toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #334155;
  color: #e5e7eb;
  padding: 12px 16px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
#toast.show { opacity: 1; }

/* A simple wrapper for responsive tables.  When a table is wrapped
   inside ``.table-responsive`` it will scroll horizontally on small
   screens instead of compressing columns. */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.table-responsive table {
  width: 100%;
  min-width: 600px;
}

/* Searchable select styling: a small search box above a select to filter options */
.searchable-select { margin-bottom: 12px; }
.searchable-select { position: relative; }
.searchable-select .search-input {
  margin-bottom: 6px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0b1220;
  color: #e5e7eb;
}
/* The underlying select is positioned absolutely so that it appears as a dropdown
   below the input when revealed via JavaScript. */
.searchable-select select {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #0b1220;
  z-index: 1000;
  /* Initially hidden; the script toggles display */
}

/* Style action buttons inline in admin tables */
.actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.actions a, .actions button {
  padding: 4px 8px;
  font-size: 0.8rem;
}
.actions form {
  margin: 0;
}

/* Drop‑down menu for actions. Instead of three separate buttons per row,
   use a compact "Azioni" button that toggles a menu. The menu appears
   below the button and contains links and form buttons. */
.actions-menu {
  position: relative;
  display: inline-block;
}
.actions-menu button {
  padding: 4px 8px;
  font-size: 0.8rem;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #1f2937;
  color: #e5e7eb;
  cursor: pointer;
}
.actions-menu button:hover {
  border-color: #475569;
}
.actions-menu .menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 120px;
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 8px;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.actions-menu .menu a,
.actions-menu .menu button {
  display: block;
  width: 100%;
  padding: 6px 8px;
  font-size: 0.8rem;
  color: #e5e7eb;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
}
.actions-menu .menu a:hover,
.actions-menu .menu button:hover {
  background: #1f2937;
}
.actions-menu .menu form {
  margin: 0;
}


/* === Dark scrollbars + no nested table scrollbars === */
/* Global (Firefox) */
html, body, * { scrollbar-width: thin; scrollbar-color: #334155 #0b1220; }
/* Global (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b1220; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; border: 2px solid #0b1220; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
/* Select lists (best effort; native single-select dropdowns may be OS-styled) */
select { scrollbar-width: thin; scrollbar-color: #334155 #0b1220; }
select::-webkit-scrollbar { width: 10px; }
select::-webkit-scrollbar-track { background: #0b1220; }
select::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; border: 2px solid #0b1220; }
/* Avoid vertical scrollbar inside table wrapper when opening 'Azioni' */
.table-responsive { overflow-y: visible !important; }
.actions-menu { position: relative; }
.actions-menu .menu { position: absolute; z-index: 2000; }

/* --- Tag highlighting in comments --- */
.tag-highlight {
  background-color: #fef3cd;
  color: #856404;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
  border: 1px solid #ffeaa7;
}

/* --- Tag notifications styling --- */
.notif-tag {
  border-left: 4px solid #dc2626 !important;
  background-color: #fef2f2 !important;
}

.notif-tag .desc a {
  /* FORZA IL COLORE ROSSO E GRASSETTO */
  font-weight: bold !important;
  color: #dc2626 !important;
}

.notif-tag .desc a,
.notif-tag .desc a:link,
.notif-tag .desc a:visited,
.notif-tag .desc a:hover,
.notif-tag .desc a:active {
  color: #dc2626 !important;
  font-weight: bold !important;
}

.notif-tag .desc a .tag-prefix {
  /* @@TAG ancora più evidenziato */
  font-weight: 900 !important;
  color: #991b1b !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  font-size: 1.1em;
}

/* CSS aggiuntivo per forzare il colore rosso */
.notif-tag li .desc a {
  color: #dc2626 !important;
  font-weight: bold !important;
}

.notif-tag .desc a span {
  color: #dc2626 !important;
  font-weight: bold !important;
}

/* --- Hotfix: disattiva evidenziazione bordo sui campi "Cerca al volo" --- */
.toolbar .input:focus {
  outline: none;
  box-shadow: none;
  border-color: #334155;
}