/* ===== FieldTrak Design System ===== */
:root{
  --brand:#0A66FF;
  --brand-weak:#e9f0ff;
  --ink:#222;
  --muted:#6b7280;
  --paper:#fff;
  --bg:#f5f6f8;
  --grid:#e5e7eb;
  --success:#16a34a;
  --danger:#dc3545;
  --warning:#f59e0b;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --shadow-sm:0 2px 10px rgba(0,0,0,.05);
  --focus:0 0 0 3px rgba(10,102,255,.25);
  --appbar-h:56px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.45;
  padding-top:var(--appbar-h); /* prevent top-bar overlap */
}

/* Top app bar */
.app-bar{
  position:fixed; top:0; left:0; right:0;
  z-index:999;
  background:var(--paper); box-shadow:var(--shadow-sm);
}
.app-bar-inner{
  max-width:1000px; margin:0 auto; padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px;
}
.brand img{width:32px; height:32px; border-radius:8px}
.brand span{font-size:18px}
.app-nav{display:flex; gap:8px; flex-wrap:wrap}
.app-nav a{
  text-decoration:none; color:var(--ink);
  padding:6px 10px; border-radius:8px;
}
.app-nav a.active, .app-nav a:hover{
  background:var(--brand-weak); color:#0b3ea9;
}

/* Language segmented control (EL / EN / IT) */
.lang-segment{
  display:inline-flex; align-items:stretch; gap:0; flex-shrink:0;
  border-radius:999px; border:1px solid var(--grid); overflow:hidden;
  background:var(--paper)
}
.lang-segment .lang-btn{
  appearance:none; border:0; margin:0; padding:10px 14px;
  min-height:44px; min-width:52px;
  font-size:13px; font-weight:700; cursor:pointer;
  background:transparent; color:var(--ink);
  transition:background .15s, color .15s; white-space:nowrap
}
.lang-segment .lang-btn:hover{background:var(--brand-weak); color:#0b3ea9}
.lang-segment .lang-btn.active{background:var(--brand); color:#fff}
.lang-segment .lang-btn:active{opacity:.95}
.lang-segment .lang-btn:focus{outline:none}
.lang-segment .lang-btn:focus-visible{outline:var(--focus); outline-offset:2px}
.lang-segment .lang-btn + .lang-btn{border-left:1px solid var(--grid)}

/* Page shell */
.container{max-width:1000px; margin:18px auto; padding:0 14px}
.card{
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
}
.page-title{
  display:flex; align-items:center; gap:10px; margin:0 0 10px 0;
  font-size:22px; font-weight:800;
}
.subtle{color:var(--muted); font-size:13px}

/* Buttons */
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:10px 14px; border-radius:10px; font-weight:700; font-size:14px;
  background:#e5e7eb; color:#111; transition:.15s ease;
}
.btn:focus{outline:var(--focus)}
.btn:hover{filter:brightness(.97)}
.btn-primary{background:var(--brand); color:#fff}
.btn-secondary{background:#eef2f7; color:#0b3ea9}
.btn-danger{background:var(--danger); color:#fff}
.btn-outline{background:transparent; border:1px solid var(--grid); color:#111}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}

/* Forms */
.form-grid{display:flex; flex-wrap:wrap; gap:18px; margin-top:8px}
.form-col{flex:1 1 320px}
label{display:block; font-weight:700; font-size:13px; margin-top:10px}
input, select, textarea{
  width:100%; margin-top:6px; padding:10px 12px; font-size:14px;
  border:1px solid var(--grid); border-radius:10px; background:var(--paper);
}
textarea{min-height:120px; resize:vertical}
input:focus, select:focus, textarea:focus{outline:var(--focus)}

/* Home tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.tile{
  background:var(--paper); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tile h3{margin:0; font-size:16px}
.tile p{margin:0; color:var(--muted); font-size:13px}
.tile .btn{margin-left:auto}

/* Photo preview */
.photo-preview{margin-top:8px; border:1px solid var(--grid); border-radius:10px; padding:8px; max-width:220px}
.photo-preview img{max-width:100%; display:block; border-radius:8px}

/* Calendar (compact) */
.calendar{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.weekdays, .grid{display:grid; grid-template-columns:repeat(7,1fr)}
.weekdays div{
  background:var(--brand-weak); padding:8px; text-align:center; font-weight:800; color:#2c3e50; border-bottom:1px solid var(--grid); font-size:12px;
}
.cell{
  min-height:72px; border-right:1px solid var(--grid); border-bottom:1px solid var(--grid);
  padding:8px; position:relative; background:#fff; cursor:pointer; font-size:12px;
}
.cell:nth-child(7n){border-right:none}
.date-badge{font-size:11px; color:var(--muted)}
.note-dot{width:7px; height:7px; border-radius:50%; background:var(--brand); position:absolute; bottom:8px; right:8px}
.outside{background:#fafafa; color:#aaa}
.today{outline:2px solid var(--brand); outline-offset:-2px; background: #f8fbff}

/* Dialog */
dialog{border:none; border-radius:12px; padding:0; box-shadow:var(--shadow); max-width:640px; width:92%}
.dialog-head{background:var(--brand); color:#fff; padding:10px 12px; font-weight:800; display:flex; align-items:center; justify-content:space-between}
.dialog-body{padding:12px}
.dialog-actions{display:flex; justify-content:space-between; gap:8px; padding:0 12px 12px}

/* Footer */
.footer{max-width:1000px; margin:16px auto 26px; padding:0 14px; color:var(--muted); font-size:12px; text-align:center}

/* Print */
.no-print{display:initial}
@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .container{margin:0; padding:0}
  .card{box-shadow:none; border:1px solid #ddd}
  .print-block{display:block !important}
}

/* Toast */
.toast-container{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:1001; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{
  background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:500;
  box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px);
  transition:opacity 0.25s ease, transform 0.25s ease;
  max-width:min(90vw, 320px)
}
.toast.show{opacity:1; transform:translateY(0)}
.toast.hide{opacity:0; transform:translateY(8px)}

/* History list */
.history-tabs{display:flex; gap:8px; margin-bottom:16px}
.history-tabs .btn.active{background:var(--brand); color:#fff}
.history-item{border:1px solid var(--grid); border-radius:var(--radius-sm); padding:12px; margin-bottom:10px; background:var(--paper)}
.history-item .meta{color:var(--muted); font-size:13px; margin-bottom:6px}
.history-item .btn-row{margin-top:8px}

/* Utility */
.mt-16{margin-top:16px}
.center{display:flex; align-items:center; justify-content:center}