/* ============================================================
   Commercial Track – Custom CSS
   Tailwind overrides + animazioni + componenti
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --color-bg:      #0B0F14;
  --color-card:    #141A22;
  --color-border:  rgba(255,255,255,0.06);
  --color-green:   #4CAF50;
  --color-green-2: #22c55e;
  --color-text:    #F8FAFC;
  --color-muted:   #94A3B8;
  --radius-card:   16px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Sfondo radiale */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(76,175,80,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 80%, rgba(76,175,80,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 60px);
}

/* ─── Glass Card ────────────────────────────────────────────── */
.card-glass {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ─── Input field ──────────────────────────────────────────── */
.input-field {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #f8fafc;
  font-size: 15px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s, background .15s;
  font-family: inherit;
  width: 100%;
}

.input-field:focus {
  border-color: rgba(76,175,80,0.5);
  background: rgba(76,175,80,0.04);
}

.input-field::placeholder {
  color: #475569;
}

/* select arrow override */
select.input-field {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
}

/* Opzioni dropdown – testo sempre leggibile */
select option {
  background: #1e293b;
  color: #f8fafc;
}

/* date picker */
input[type="date"].input-field::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
}

/* ─── Primary Button ────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #4CAF50 0%, #22c55e 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  font-family: inherit;
}

.btn-primary:hover   { opacity: .92; }
.btn-primary:active  { transform: scale(.97); opacity: .88; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ─── Bottom nav ────────────────────────────────────────────── */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 40;
  background: rgba(14,20,28,0.92);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding-bottom: var(--safe-bottom);
}

.nav-active   { color: #4CAF50; }
.nav-inactive { color: #475569; }

/* ─── Header ────────────────────────────────────────────────── */
#app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11,15,20,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ─── Tab buttons ───────────────────────────────────────────── */
.tab-active {
  background: rgba(76,175,80,0.15);
  color: #4CAF50;
}
.tab-inactive {
  color: #64748b;
}

/* ─── Animations ────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fade-up .28s ease-out both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

#ct-toast {
  animation: toast-in .2s ease-out both;
}

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }

/* ─── Scale on press ─────────────────────────────────────────── */
.active\:scale-98:active { transform: scale(.98); }
.active\:scale-95:active { transform: scale(.95); }

/* ─── Safe area for FAB ──────────────────────────────────────── */
#fab-new {
  bottom: calc(4.5rem + var(--safe-bottom));
}