/* ACCATTATILLA gestionale: styles on top of Pico CSS */

/* 16px everywhere: below that iOS zooms in when a field gets focus */
:root {
  --pico-font-size: 100%;
}

/* Brand blue taken from the ACCATTATILLA logo */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-primary: #00598c;
  --pico-primary-background: #00598c;
  --pico-primary-border: #00598c;
  --pico-primary-underline: rgba(0, 89, 140, .5);
  --pico-primary-hover: #00446b;
  --pico-primary-hover-background: #00446b;
  --pico-primary-hover-border: #00446b;
  --pico-primary-hover-underline: #00446b;
  --pico-primary-focus: rgba(0, 89, 140, .35);
  --pico-primary-inverse: #fff;
}

.muted { color: var(--pico-muted-color); }

/* Header and navigation */
.app-header { position: relative; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 36px; width: auto; }
nav ul.main-nav a[aria-current="page"] { color: var(--pico-primary); font-weight: 700; }
.user-menu summary { white-space: nowrap; }
.user-menu .logout button { width: 100%; }
.logout { margin: 0; }
.logout button { margin: 0; padding: .3rem .8rem; font-size: .85rem; }

/* Hamburger menu (phones only) */
.mobile-nav { display: none; }
.hamburger { margin: 0; }
.hamburger summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  list-style: none;
  color: var(--pico-primary);
  cursor: pointer;
}
.hamburger summary::-webkit-details-marker { display: none; }
.hamburger summary::after { display: none; }
.hamburger .icon-close, .hamburger[open] .icon-open { display: none; }
.hamburger[open] .icon-close { display: block; }
.hamburger-panel {
  position: absolute;
  top: 100%;
  left: var(--pico-spacing);
  right: var(--pico-spacing);
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: .5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-background-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.hamburger-panel a { display: block; margin: 0; padding: .8rem .75rem; border-radius: var(--pico-border-radius); text-decoration: none; }
.hamburger-panel a[aria-current="page"] { background: var(--pico-primary-focus); font-weight: 700; }
.hamburger-panel hr { margin: .4rem 0; }
.hamburger-panel small { padding: .25rem .75rem; overflow-wrap: anywhere; }
.hamburger-panel .logout { margin: .5rem .25rem .25rem; }
.hamburger-panel .logout button { width: 100%; padding: .6rem; font-size: 1rem; }

/* Messages */
.messages { list-style: none; padding: 0; }
.messages li {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .9rem;
  margin-bottom: .5rem;
  border-left: 4px solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}
.messages li.error { border-left-color: #c62828; }
.undo { margin: 0; }
.undo button { width: auto; margin: 0; padding: .3rem .75rem; font-size: .85rem; }
article > .undo { margin-top: .6rem; }

/* Page layout */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.toolbar h1, .toolbar h3 { margin: 0; }
.buttons, .nav-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.buttons [role="button"], .buttons button, .nav-buttons [role="button"] { margin: 0; width: auto; }

/* Workshop board */
.page-date { margin: .15rem 0 0; font-size: .9rem; }

.counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.counter {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .85rem 1.1rem;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s ease;
}
.counter:hover { box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.counter strong { font-size: 1.75rem; line-height: 1.1; }
.counter span { font-size: .9rem; color: var(--pico-muted-color); }

.board-tabs { display: none; }

/* One lane per status, side by side while they fit, then wrapping: never sideways scrolling */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  align-items: start;
}
.lane {
  padding: .75rem;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  background: #f5f7fa;
}
.lane-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.lane-title { margin: 0; font-size: 1rem; line-height: 1; }
.lane-title .status { padding: .25rem .75rem; font-size: .85rem; }
.lane-count {
  min-width: 1.75rem;
  padding: .05rem .5rem;
  border: 1px solid #e4e8ee;
  border-radius: 999px;
  background: #fff;
  color: var(--pico-muted-color);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
}
.lane-placeholder {
  margin: 0;
  padding: 1.1rem .5rem;
  border: 1px dashed #cfd6df;
  border-radius: 10px;
  color: var(--pico-muted-color);
  font-size: .85rem;
  text-align: center;
}

.card {
  margin: 0 0 .6rem;
  padding: .8rem .9rem;
  border: 1px solid #e4e8ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.card:last-child { margin-bottom: 0; }
.card-title { display: block; font-weight: 700; text-decoration: none; }
.card-customer { color: var(--pico-muted-color); font-size: .9rem; }
.card-customer a { color: inherit; text-decoration: none; }
.card-description { margin: .45rem 0; font-size: .95rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; color: var(--pico-muted-color); font-size: .8rem; }
.price { color: var(--pico-color); font-weight: 700; white-space: nowrap; }
.kind {
  display: inline-block;
  padding: .05rem .4rem;
  border-radius: 4px;
  background: #eef1f5;
  color: #4a5260;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.card > .kind { margin-bottom: .2rem; }
.appointment { margin: 0 0 .75rem; padding: .8rem; }

.status {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 1rem;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.status-booked { background: #e3ecfb; color: #1d4ea8; }
.status-received { background: #efe6fb; color: #5b2ca0; }
.status-in_progress { background: #fff1d6; color: #8a5300; }
.status-waiting_parts { background: #fde2e1; color: #a1261f; }
.status-ready { background: #dcf3e5; color: #14693b; }
.status-delivered, .status-cancelled { background: #e8eaed; color: #4a5260; }
.status-cancelled { text-decoration: line-through; }

.actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.actions form { margin: 0; }
.actions button { width: auto; margin: 0; padding: .3rem .7rem; font-size: .8rem; }

.history { padding-left: 1.2rem; }
.history li { margin-bottom: .4rem; }
.history .undone .status { text-decoration: line-through; opacity: .6; }

/* Agenda: 7 days on wide screens, then fewer per row */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; }
.week .day h3 { font-size: .95rem; }
.today h3 { color: var(--pico-primary); }

/* Lists */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filters input[type="search"] { flex: 2 1 260px; margin: 0; }
.filters select { flex: 1 1 160px; margin: 0; }
.filters button { width: auto; margin: 0; }
.vehicle-row { margin-bottom: .2rem; }
.vehicle-row a { margin-left: .4rem; font-size: .85rem; }
.pagination { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; margin: 1rem 0; }
.pagination [role="button"] { width: auto; margin: 0; padding: .4rem .9rem; }
.active-filter { padding: .5rem .8rem; border-radius: var(--pico-border-radius); background: var(--pico-primary-focus); }
.nowrap { white-space: nowrap; }
.mobile-only { display: none; }

/* Forms */
.narrow-form { max-width: 640px; }
.field-check { margin-bottom: var(--pico-spacing); }
.field-check label { font-weight: 500; }
.optional { color: var(--pico-muted-color); font-weight: normal; font-size: .85em; }
.field-error {
  display: block;
  margin: calc(var(--pico-spacing) * -.75) 0 var(--pico-spacing);
  color: var(--pico-del-color);
  font-size: .875rem;
}
.help {
  margin: calc(var(--pico-spacing) * -.75) 0 var(--pico-spacing);
  color: var(--pico-muted-color);
  font-size: .85rem;
}
.help ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.help li { list-style: disc; margin: 0; }
fieldset legend { font-weight: 500; margin-bottom: .5rem; }
fieldset label { font-weight: normal; }
div.choice-row { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-bottom: var(--pico-spacing); }
div.choice-row label { margin: 0; }
.form-errors {
  margin-bottom: var(--pico-spacing);
  padding: .6rem .9rem;
  border-left: 4px solid #c62828;
  border-radius: var(--pico-border-radius);
  background: #fdecea;
  color: #8e1c16;
}
.errorlist { list-style: none; padding: 0; margin: 0; }
.errorlist li { list-style: none; }

/* Date fields: calendar icon on the right */
input[data-datepicker]:not([aria-invalid="true"]) {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300598c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-position: center right .9rem;
  background-size: 1.15rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Date picker (Air Datepicker) with the brand colours, shielded from Pico's button and input styles */
.air-datepicker,
.air-datepicker-overlay {
  --adp-font-family: var(--pico-font-family);
  --adp-accent-color: #00598c;
  --adp-color-current-date: #00598c;
  --adp-day-name-color: #00598c;
  --adp-cell-background-color-selected: #00598c;
  --adp-cell-background-color-selected-hover: #00446b;
  --adp-btn-color: #00598c;
  --adp-btn-color-hover: #00446b;
  --adp-border-radius: 10px;
  --adp-cell-border-radius: 8px;
  --adp-time-track-color: #c9d9e6;
  --adp-time-track-color-hover: #8fb3cc;
  --adp-z-index: 200;
}
.air-datepicker button {
  margin: 0;
  padding: 0;
  box-shadow: none;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}
.air-datepicker input[type="range"] { margin: 0; }
.air-datepicker .adp-done { font-weight: 700; }
.air-datepicker.-is-mobile- {
  --adp-time-thumb-size: 22px;
  --adp-time-track-height: 4px;
}

/* Confirmation modal */
html:has(dialog[open]) { overflow: hidden; }
#confirm-dialog article { max-width: 460px; }
#confirm-dialog h3 { margin-bottom: .75rem; }
#confirm-dialog footer form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin: 0; }
#confirm-dialog footer button { width: auto; margin: 0; }
button.danger { background-color: #c62828; border-color: #c62828; color: #fff; }
button.danger:hover, button.danger:focus { background-color: #a11f1f; border-color: #a11f1f; }

/* Login */
.login { max-width: 420px; margin: 2.5rem auto; }
.login-logo { display: block; width: 260px; max-width: 80%; height: auto; margin: .5rem auto 0; }
.login-subtitle { text-align: center; margin: .5rem 0 1.5rem; }

/* Tablets */
@media (max-width: 1023px) {
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: everything stacked in one column, nothing scrolls sideways */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  td, .card, .appointment, .messages li, p { overflow-wrap: anywhere; }

  .desktop-nav { display: none; }
  .mobile-nav { display: flex; }
  nav ul.mobile-nav li { padding: 0; }
  .brand img { height: 28px; }

  .toolbar h1 { font-size: 1.5rem; }

  .counters { gap: .5rem; }
  .counter { padding: .55rem .5rem; text-align: center; }
  .counter strong { font-size: 1.4rem; }
  .counter span { font-size: .75rem; line-height: 1.2; }

  .board-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1rem; }
  .board-tabs a { display: block; padding: .45rem .5rem; font-size: .85rem; text-align: center; text-decoration: none; }
  .board { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .lane-empty .lane-header { margin-bottom: 0; }
  .lane-empty .lane-body { display: none; }

  .week { grid-template-columns: minmax(0, 1fr); }

  .actions button { padding: .5rem .8rem; font-size: .9rem; }

  .mobile-only { display: inline-block; }
  .desktop-only { display: none; }

  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr { padding: .65rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
  table.responsive td { padding: .1rem 0; border: 0; background: transparent; }
  table.responsive td.desktop-only { display: none; }
  table.responsive td.row-title { font-size: 1rem; padding-bottom: .25rem; }
  table.responsive td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 7rem;
    color: var(--pico-muted-color);
    font-size: .8rem;
  }

  #confirm-dialog footer button { flex: 1 1 100%; }
  div.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .filters input[type="search"], .filters select, .filters button { flex: 1 1 100%; }
  .buttons { width: 100%; }
  .buttons [role="button"], .buttons button { flex: 1; text-align: center; }
}