:root{
  /* Walnut palette derived from the Fer Bois logo */
  --walnut:        #7C5530;
  --walnut-dark:   #5C3F23;
  --walnut-light:  #A07248;
  --walnut-50:     #F8F2EA;
  --cream:         #FAF8F5;
  --cream-2:       #F4EDE3;
  --bg:            #FAF6F0;
  --surface:       #FFFFFF;
  --surface-2:     #F8F2EA;
  --border:        #E5DDD3;
  --text:          #1A1A1A;
  --muted:         #6B5847;
  --success:       #2F7D32;
  --success-bg:    #E2F0E2;
  --warning:       #B45309;
  --warning-bg:    #FCEFD0;
  --danger:        #B91C1C;
  --danger-bg:     #FCE3E3;
  --info-bg:       #F2E9DD;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, .06);
  --shadow:    0 6px 18px rgba(60, 40, 20, .10);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
/* Prevent iOS auto-zoom on focus (input font-size must be ≥16px) */
@media (max-width: 480px) {
  input, select, textarea { font-size: 16px; }
}
button{font-family:inherit; cursor:pointer}
a{color:var(--walnut); text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea{
  font-family:inherit; font-size:14px; padding:9px 12px;
  border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--walnut); outline-offset:-1px; border-color:var(--walnut);
}
label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em}
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle}
th{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; background:var(--surface-2)}
tbody tr:hover{background:var(--surface-2)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:8px; border:1px solid var(--border);
  background:#fff; color:var(--text); font-weight:500; font-size:13px;
  transition:all .15s;
}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--walnut); color:#fff; border-color:var(--walnut)}
.btn-primary:hover{background:var(--walnut-dark)}
.btn-success{background:var(--success); color:#fff; border-color:var(--success)}
.btn-success:hover{background:#1b5e20}
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn-danger:hover{background:#7f1d1d}
.btn-ghost{background:transparent; border-color:transparent}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{padding:14px 22px; font-size:15px}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* Badges */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.badge-success{background:var(--success-bg); color:#1b5e20}
.badge-warning{background:var(--warning-bg); color:#92400e}
.badge-danger {background:var(--danger-bg);  color:#7f1d1d}
.badge-info   {background:var(--info-bg);    color:var(--walnut-dark)}
.badge-muted  {background:#F0E8DD;           color:var(--muted)}

/* ---- Login ---- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:
    radial-gradient(1200px 600px at -10% -20%, #A07248 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #5C3F23 0%, transparent 60%),
    linear-gradient(135deg, #4A2F1A 0%, #7C5530 100%);
}
.login-card{
  width:100%; max-width:440px; background:#fff; border-radius:16px; padding:36px 32px;
  box-shadow:0 20px 60px rgba(40,25,10,.35);
}
.login-card .brand{justify-content:center; margin-bottom:14px}
.login-card h1{margin:0 0 6px; font-size:22px; text-align:center}
.login-card .sub{color:var(--muted); margin:0 0 24px; font-size:13px; text-align:center}
.login-form{display:flex; flex-direction:column; gap:14px}
.login-error{background:var(--danger-bg); color:#7f1d1d; padding:10px 12px; border-radius:8px; font-size:13px}
.login-hint{margin-top:18px; padding:12px; background:var(--surface-2); border-radius:8px; font-size:12px; color:var(--muted)}
.login-hint b{color:var(--text)}

/* ---- Layout ---- */
.topbar{
  background:#fff; border-bottom:1px solid var(--border);
  padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
  /* Respect iOS notch / Dynamic Island when running as installed PWA */
  padding-top: env(safe-area-inset-top, 0);
  padding-left: max(24px, env(safe-area-inset-left, 0));
  padding-right: max(24px, env(safe-area-inset-right, 0));
  height: calc(64px + env(safe-area-inset-top, 0));
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{height:38px; width:auto}
.nav{display:flex; gap:4px; align-items:center}
.nav a{color:var(--muted); padding:8px 14px; border-radius:8px; font-weight:500; font-size:13px}
.nav a:hover{color:var(--text); background:var(--surface-2); text-decoration:none}
.nav a.active{color:var(--walnut); background:var(--walnut-50)}
.user-menu{display:flex; align-items:center; gap:10px}
.avatar{width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--walnut), var(--walnut-dark));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.avatar.lg{width:64px; height:64px; font-size:22px}
.avatar.sm{width:28px; height:28px; font-size:11px}
.user-info{font-size:12px; line-height:1.3}
.user-info b{display:block}
.user-info span{color:var(--muted)}
.container{
  max-width:1200px; margin:0 auto;
  padding:28px 24px calc(60px + env(safe-area-inset-bottom, 0));
  padding-left: max(24px, env(safe-area-inset-left, 0));
  padding-right: max(24px, env(safe-area-inset-right, 0));
}
.page-h{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; gap:16px; flex-wrap:wrap}
.page-h h2{margin:0; font-size:22px}
.page-h p{margin:4px 0 0; color:var(--muted); font-size:13px}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 14px; font-size:15px}
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3, 1fr)}
.grid-2{grid-template-columns:repeat(2, 1fr)}
.grid-4{grid-template-columns:repeat(4, 1fr)}
@media (max-width: 900px){
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .brand-logo{height:30px}

  /* Mobile: let the topbar wrap so the nav drops to its own row below the logo */
  .topbar{
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 6px 14px;
    padding-top: max(6px, env(safe-area-inset-top, 0));
    gap: 6px;
  }
  .topbar > .brand     { order: 1; }
  .topbar > .user-menu { order: 2; }
  .topbar > .nav       { order: 3; width: 100%; }

  /* Horizontal scrollable nav strip — touch-friendly */
  .nav{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    border-top: 1px solid var(--border);
    margin: 4px -14px 0;
    padding: 6px 14px;
    gap: 4px;
  }
  .nav::-webkit-scrollbar { display: none; }   /* Safari/Chrome */
  .nav a{
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: 13px;
  }

  /* User menu stays compact on mobile — hide the name/role text, keep avatar + actions */
  .user-info { display: none; }
  .user-menu .avatar { width: 30px; height: 30px; font-size: 11px; }
}

.stat{padding:18px; background:#fff; border:1px solid var(--border); border-radius:var(--radius)}
.stat .label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.stat .value{font-size:26px; font-weight:700; margin-top:4px}
.stat .hint{font-size:12px; color:var(--muted); margin-top:4px}

/* Clock */
.clock-card{text-align:center; padding:36px}
.clock-time{font-size:48px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--text); margin:0}
.clock-date{color:var(--muted); margin:4px 0 18px}
.clock-status{margin:14px 0 18px; font-size:14px}
.clock-status .pill{display:inline-block; padding:6px 14px; border-radius:999px; font-weight:600}
.clock-running{background:var(--success-bg); color:#1b5e20}
.clock-stopped{background:#F0E8DD; color:var(--muted)}
.big-btn{
  padding:16px 36px; border-radius:12px; font-size:16px; font-weight:600;
  border:0; color:#fff; cursor:pointer; transition:transform .12s, box-shadow .15s; box-shadow:var(--shadow);
}
.big-btn:hover{transform:translateY(-1px)}
.big-btn.go{background:linear-gradient(135deg, #2F7D32, #4F9A52)}
.big-btn.stop{background:linear-gradient(135deg, var(--walnut-dark), var(--walnut))}

/* Modal */
.modal-bg{position:fixed; inset:0; background:rgba(40,25,10,.55); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px}
.modal{background:#fff; border-radius:14px; width:100%; max-width:520px; padding:24px; max-height:90vh; overflow:auto; box-shadow:0 30px 80px rgba(40,25,10,.45)}
.modal h3{margin:0 0 4px}
.modal .sub{color:var(--muted); margin:0 0 16px; font-size:13px}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px}

/* misc */
.row{display:flex; gap:10px; align-items:center}
.row.between{justify-content:space-between}
.stack{display:flex; flex-direction:column; gap:14px}
.empty{text-align:center; padding:40px 20px; color:var(--muted); font-size:14px}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--walnut-dark); color:#fff; padding:12px 20px; border-radius:10px; box-shadow:var(--shadow);
  z-index:300; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translate(-50%, -4px)}
.balance-bar{height:8px; background:#F0E8DD; border-radius:999px; overflow:hidden; margin-top:6px}
.balance-bar > div{height:100%; background:var(--walnut); border-radius:999px}
.balance-bar.sick > div{background:#D97706}
.balance-bar.vac  > div{background:var(--success)}
.tab-row{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px}
.tab-row button{
  background:transparent; border:0; padding:10px 14px;
  font-size:13px; font-weight:500; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-row button.on{color:var(--walnut); border-bottom-color:var(--walnut)}
.search-box{position:relative; max-width:340px; flex:1}
.search-box input{padding-left:34px}
.search-box::before{content:"🔍"; position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:13px; opacity:.6}
.row-actions{display:flex; gap:6px; justify-content:flex-end}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:#fff}
.name-cell{display:flex; align-items:center; gap:10px}
.nowrap{white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:12px}
details summary{cursor:pointer; list-style:none; font-weight:500}
details summary::-webkit-details-marker{display:none}

/* Wood-textured accent strip — used on the login top */
.wood-strip{
  height:6px;
  background: repeating-linear-gradient(90deg,
    var(--walnut-dark) 0 4px, var(--walnut) 4px 8px, var(--walnut-light) 8px 12px, var(--walnut-dark) 12px 16px);
  border-radius:4px 4px 0 0;
}