/* UI fixes: make dropdown/select option text readable across the app
   Loaded after the main stylesheet to override high-specificity rules safely.
*/

/* Native select and option text should be dark when backgrounds are light */
select, select * {
  color: #000 !important;
}

option, optgroup {
  color: #000 !important;
  background: #fff !important;
}

/* Firefox accessibility tweak for focused select */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

/* Select2 (if present) results and selection styling */
.select2-container--default .select2-results__option,
.select2-container--default .select2-results__option[aria-selected],
.select2-container--default .select2-selection--single {
  color: #000 !important;
  background: #fff !important;
}

/* Make the closed/selected value visible in native selects and common custom selects */
select {
  color: #000 !important;
  background-color: #fff !important;
  border-color: rgba(0,0,0,0.12) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

select:focus {
  outline: 2px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.03) inset !important;
}

/* Select2 / chosen renderers */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection__rendered,
.chosen-container .chosen-single {
  background: #fff !important;
  color: #000 !important;
}

/* Bootstrap-style dropdowns / custom dropdown lists */
.dropdown-menu .dropdown-item,
ul.select2-results__options li,
.chosen-container .chosen-results li {
  color: #000 !important;
  background: #fff !important;
}

/* Keep select visible on dark pages but avoid changing buttons/controls that rely on white text
   These selectors target only form controls and common dropdown libraries. If you need this
   narrower (per-page), we can scope it later to a body class (e.g. .categorie-page).
*/

/* ===================================================================
   Global form-control overrides
   Force form fields to have white background and black text across the app.
   These use !important intentionally to override the dark-theme rules
   present in the main stylesheet. If you'd rather scope per-page, wrap
   these under a specific body class (e.g. .light-fields).
   =================================================================== */

/* Generic form controls */
/* Artists page: ensure form fields remain readable while preserving site-wide dark inputs elsewhere */
body.artisti-page input,
body.artisti-page input[type="text"],
body.artisti-page input[type="number"],
body.artisti-page input[type="email"],
body.artisti-page input[type="tel"],
body.artisti-page input[type="password"],
body.artisti-page input[type="date"],
body.artisti-page input[type="time"],
body.artisti-page textarea,
body.artisti-page select,
body.artisti-page .form-control {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}

/* Placeholders should be readable but muted */
body.artisti-page input::placeholder,
body.artisti-page textarea::placeholder {
  color: #6b6b6b !important;
  opacity: 1 !important;
}

/* Disabled fields slightly muted */
body.artisti-page input:disabled,
body.artisti-page textarea:disabled,
body.artisti-page select:disabled,
body.artisti-page .form-control:disabled {
  background-color: #f5f5f5 !important;
  color: #666666 !important;
  cursor: not-allowed !important;
}

/* Ensure form controls inside modals also follow the white/black scheme */
body.artisti-page .modal input,
body.artisti-page .modal textarea,
body.artisti-page .modal select,
body.artisti-page .modal .form-control,
body.artisti-page .modal-dialog input,
body.artisti-page .modal-dialog textarea,
body.artisti-page .modal-dialog select {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}

/* Ensure modal text (labels, headings, small text) is dark and readable on white modal surfaces */
body.artisti-page .modal-dialog,
body.artisti-page .modal-content,
body.artisti-page .modal-body,
body.artisti-page .modal-header,
body.artisti-page .modal-footer,
body.artisti-page .modal label,
body.artisti-page .modal .form-group label,
body.artisti-page .modal .form-help,
body.artisti-page .modal .modal-close {
  color: #111 !important;
}

/* Make sure placeholders and input text are visible in all browsers */
body.artisti-page .modal input::placeholder,
body.artisti-page .modal textarea::placeholder {
  color: #6b6b6b !important;
  opacity: 1 !important;
}

/* Report page date inputs need dark text on light background */
body.report-page input[type="date"],
body.report-page input[type="date"]:focus {
  color: #000000 !important;
}

/* Keep option background/foreground consistent */
option, optgroup {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Export buttons styling */
.export-buttons {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.export-buttons .btn,
.export-buttons a.btn {
  padding: 10px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.export-buttons .btn-secondary {
  background-color: #6c757d;
  border: 1px solid #5a6268;
  color: #fff;
}

.export-buttons .btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
  text-decoration: none;
}

.export-buttons .btn-secondary:active {
  background-color: #4e555b;
  border-color: #484d51;
}


/* =============================================================
   Responsive navbar (solo smartphone) senza impatto desktop
   Breakpoint: max-width 780px
   ============================================================= */
@media (max-width: 780px) {
  /* Nascondi completamente la nav desktop/tablet sotto 780px e mostra barra mobile */
  .topbar-collapsible { display:none !important; }
  .mobile-bar { position:fixed; top:0; left:0; right:0; height:56px; display:flex; align-items:center; gap:.6rem; padding:0 .6rem; background:linear-gradient(90deg,#0b0f17,#12141a); z-index:14000; box-shadow:0 6px 24px rgba(0,0,0,.6); }
  .mobile-bar-left { display:flex; align-items:center; gap:.55rem; }
  .mobile-bar-middle { display:flex; align-items:center; }
  .mobile-bar-right { display:flex; align-items:center; gap:.65rem; }
  .mobile-brand { font-weight:800; letter-spacing:.02em; }
  .mobile-toggle { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(45deg,#1e293b,#0f172a); color:#fff; border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:.5rem .6rem; }
  body { padding-top:56px !important; }
  .mobile-menu { position:fixed; top:56px; left:0; right:0; display:none; z-index:14000; }
  .mobile-menu[aria-hidden="false"] { display:block; }
  .mobile-menu::before { content:""; position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,.55); }
  .mobile-menu::before { z-index:0; }
  .mobile-menu-inner { position:relative; z-index:1; background:linear-gradient(180deg,#0f172a,#1e293b); border-bottom:1px solid rgba(255,255,255,0.12); padding:.7rem .6rem 1rem; box-shadow:0 18px 36px -6px rgba(0,0,0,.65); }
  .mobile-menu-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
  .mobile-menu-title { font-weight:800; }
  .mobile-close { background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:8px; padding:.3rem .4rem; }
  .mobile-links { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .m-link { display:inline-flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:.55rem; padding:.7rem .8rem; border-radius:12px; background:rgba(255,255,255,.05); color:#fff; text-decoration:none; font-weight:700; }
  .m-link { border:1px solid rgba(255,255,255,.25); box-shadow:0 8px 18px rgba(0,0,0,.50), inset 0 -5px 12px rgba(0,0,0,.35); position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
  .m-link::after { content:""; position:absolute; inset:0; background:linear-gradient(75deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 45%); opacity:0; transition:opacity .25s ease; }
  .m-link:hover::after { opacity:.55; }
  .m-link:active { transform:translateY(2px); box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 -2px 6px rgba(0,0,0,.28); }
  .m-link.m-blue,.m-link.m-green,.m-link.m-yellow,.m-link.m-red,.m-link.m-cyan,.m-link.m-danger { background-size:140% 140%; background-position:0 0; }
  .m-link:hover { box-shadow:0 10px 26px rgba(0,0,0,.55), inset 0 -5px 12px rgba(0,0,0,.32); }
  .m-link .m-ico { font-size:18px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
  .m-link .m-txt { flex:1; display:inline-flex; align-items:center; font-size:13px; letter-spacing:.02em; }
  .m-link.m-danger { background:linear-gradient(90deg,#c72b3b,#7a1126); }
  /* Varianti colore gradient per parità con desktop */
  .m-link.m-blue { background:linear-gradient(135deg,#0d47a1,#1976d2); }
  .m-link.m-green { background:linear-gradient(135deg,#1b5e20,#388e3c); }
  .m-link.m-yellow { background:linear-gradient(135deg,#f9a825,#fdd835); color:#222; text-shadow:0 1px 0 rgba(255,255,255,.4); }
  .m-link.m-red { background:linear-gradient(135deg,#b71c1c,#e53935); }
  .m-link.m-cyan { background:linear-gradient(135deg,#006064,#00838f); }
  .m-link.m-action { cursor:pointer; position:relative; }
  .m-link.m-action:focus-visible { outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }
}

@media (min-width: 781px) {
  /* Nascondi la barra/menu mobile su desktop e mostra la nav desktop */
  .mobile-bar, .mobile-menu { display:none !important; }
  .topbar-collapsible { display: contents !important; }
}