/* ============================================================================
   base.css — Stili globali CMS Comune.Digital
   Palette ufficiale (07_PALETTE_BRAND_COMUNE_DIGITAL.md del booking).
   Tipografia: Titillium Web.
   ============================================================================ */

:root {
  /* Palette ufficiale Comune.Digital */
  --cd-blue-700:  #145284;
  --cd-blue-500:  #2E6DA8;
  --cd-blue-300:  #7BA7CE;
  --cd-blue-100:  #D1E2F2;
  --cd-green-700: #3CA434;
  --cd-green-500: #59C64D;
  --cd-green-300: #A4E89A;
  --cd-green-100: #E2F8DE;
  --cd-gray-700:  #4A4A4A;
  --cd-gray-500:  #9B9B9B;
  --cd-gray-300:  #D9D9D9;
  --cd-gray-100:  #F5F5F5;
  --cd-warning:   #FFCC00;
  --cd-error:     #D32F2F;
  --cd-info:      #0288D1;
  --cd-white:     #FFFFFF;

  /* Alias */
  --cd-primary:    var(--cd-blue-700);
  --cd-bg:         var(--cd-gray-100);
  --cd-surface:    var(--cd-white);
  --cd-text:       var(--cd-gray-700);
  --cd-text-muted: var(--cd-gray-500);
  --cd-border:     var(--cd-gray-300);
  --cd-success:    var(--cd-green-700);

  /* Sistema di design */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(20, 82, 132, 0.05);
  --shadow-md: 0 2px 6px rgba(20, 82, 132, 0.08);
  --shadow-lg: 0 8px 24px rgba(20, 82, 132, 0.10);
  --transition: 0.15s ease;
  --sidebar-w: 240px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Titillium Web', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cd-gray-700);
  background: var(--cd-gray-100);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cd-blue-700); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--cd-blue-500); }

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--cd-blue-700);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.75rem; line-height: 1.2; }
h2 { font-size: 1.4rem;  line-height: 1.3; }
h3 { font-size: 1.15rem; line-height: 1.3; }
p  { margin: 0 0 .75em; }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  background: var(--cd-gray-100);
  padding: .1rem .35rem;
  border-radius: var(--radius-sm);
  font-size: .9em;
}

/* ============================================================================
   Pulsanti
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: inherit; font-weight: 600; font-size: 1rem;
  padding: 12px 20px; min-height: 44px;
  border: none; border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--cd-blue-700); color: var(--cd-white);
  transition: background-color var(--transition), transform .05s ease, box-shadow var(--transition);
  text-decoration: none;
}
.btn:hover { background: var(--cd-blue-500); box-shadow: var(--shadow-md); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-outline {
  background: transparent; color: var(--cd-blue-700);
  border: 2px solid var(--cd-blue-700);
}
.btn-outline:hover { background: var(--cd-blue-100); color: var(--cd-blue-700); }
.btn-ghost { background: transparent; color: var(--cd-blue-700); }
.btn-ghost:hover { background: var(--cd-blue-100); }
.btn-success { background: var(--cd-green-700); }
.btn-success:hover { background: var(--cd-green-500); }
.btn-danger { background: var(--cd-error); }
.btn-danger:hover { background: #B02525; }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 8px 14px; min-height: 36px; font-size: .9rem; }

/* ============================================================================
   Card
   ============================================================================ */
.card {
  background: var(--cd-white);
  border: 1px solid var(--cd-gray-300);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   Form
   ============================================================================ */
label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; color: var(--cd-gray-700); }
label.required::after { content: " *"; color: var(--cd-error); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
textarea, select {
  width: 100%;
  font-family: inherit; font-size: 1rem;
  padding: 12px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--cd-gray-300);
  background: var(--cd-white); color: var(--cd-gray-700);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cd-blue-700);
  box-shadow: 0 0 0 3px var(--cd-blue-100);
}

.muted { color: var(--cd-gray-500); }
.small { font-size: .85rem; }

/* ============================================================================
   Toast
   ============================================================================ */
.cd-toast-container {
  position: fixed; z-index: 9999; top: 1rem; right: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.cd-toast {
  pointer-events: auto;
  background: var(--cd-white);
  border-left: 4px solid var(--cd-info);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  display: flex; align-items: center; gap: .65rem;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .25s, transform .25s;
  max-width: 380px; font-size: .95rem;
}
.cd-toast.is-visible { opacity: 1; transform: none; }
.cd-toast.is-leaving { opacity: 0; transform: translateY(-6px); }
.cd-toast-success { border-color: var(--cd-green-700); background: var(--cd-green-100); }
.cd-toast-error   { border-color: var(--cd-error);   background: #FDECEC; }
.cd-toast-warning { border-color: var(--cd-warning); background: #FFF8E0; }
.cd-toast-info    { border-color: var(--cd-info);    background: var(--cd-blue-100); }
.cd-toast-msg { flex: 1; }
.cd-toast-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--cd-gray-500); padding: 0 4px; line-height: 1; }

/* ============================================================================
   Spinner inline
   ============================================================================ */
.cd-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: cd-spin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes cd-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   App shell: sidebar + content
   ============================================================================ */
.cms-shell {
  display: flex;
  min-height: 100vh;
}
.cms-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, #103e64 0%, var(--cd-blue-700) 100%);
  color: var(--cd-white);
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
}
.cms-sidebar-brand {
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cms-sidebar-brand .logo {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.cms-sidebar-brand strong {
  font-size: 1.05rem; font-weight: 700; color: var(--cd-white);
  line-height: 1.1;
}
.cms-sidebar-brand .subtitle {
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.cms-nav {
  padding: 1rem 0;
  flex: 1;
}
.cms-nav-section {
  font-size: .7rem;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: .8rem 1.25rem .35rem;
}
.cms-nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.25rem;
  color: rgba(255,255,255,.85);
  font-weight: 600; font-size: .95rem;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
  text-decoration: none;
}
.cms-nav-item:hover {
  background: rgba(255,255,255,.06);
  color: var(--cd-white);
  text-decoration: none;
}
.cms-nav-item.is-active {
  background: rgba(255,255,255,.10);
  border-left-color: var(--cd-green-500);
  color: var(--cd-white);
}
.cms-nav-item.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.cms-nav-item .fa-solid { width: 20px; text-align: center; }
.cms-nav-item .badge-soon {
  margin-left: auto;
  font-size: .65rem; font-weight: 700;
  padding: 2px 8px;
  background: var(--cd-warning); color: #5a4500;
  border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.cms-sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem;
}
.cms-user-block {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: .65rem;
}
.cms-user-avatar {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.18);
  color: var(--cd-white);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}
.cms-user-meta { line-height: 1.2; min-width: 0; flex: 1; }
.cms-user-meta .who { color: var(--cd-white); font-weight: 600; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-user-meta .role { color: rgba(255,255,255,.65); font-size: .72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cms-logout-btn {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: var(--cd-white);
  border-radius: var(--radius-md);
  width: 100%;
  padding: 8px 12px;
  font-size: .82rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .15s;
}
.cms-logout-btn:hover { background: rgba(255,255,255,.16); }

.cms-content {
  flex: 1;
  padding: 2rem;
  overflow-x: auto;
}
.cms-content > header {
  margin-bottom: 1.5rem;
}
.cms-content > header h1 { margin-bottom: .2rem; }
.cms-content > header p.muted { margin: 0; }

.cms-section { display: none; }
.cms-section.is-active { display: block; }

.cms-empty {
  border: 2px dashed var(--cd-gray-300);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--cd-gray-500);
}
.cms-empty i.fa-solid { font-size: 2rem; margin-bottom: 1rem; color: var(--cd-blue-300); }
.cms-empty h3 { color: var(--cd-gray-700); margin: 0 0 .5rem; }

/* Mobile: sidebar collapsa in hamburger (semplificato per ora) */
@media (max-width: 900px) {
  .cms-shell { flex-direction: column; }
  .cms-sidebar { width: 100%; }
  .cms-nav { display: none; }
  .cms-shell.menu-open .cms-nav { display: block; }
  .cms-content { padding: 1rem; }
}

/* Etichetta secondaria nelle voci di sidebar (es. "booking" accanto a "Tenant") */
.cms-nav-hint {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Avatar tondo per le card della Sezione Team */
.cd-team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cd-blue-100);
  color: var(--cd-blue-700);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}