/* ========== Design tokens (white-based) ========== */
:root{
  --bg: #ffffff;
  --fg: #0b1220;
  --muted: #596277;
  --brand: #0a6bff;
  --brand-2: #0754c6;
  --ring: rgba(10,107,255,.18);
  --bd: #e6e9ef;

  --radius: 16px;
  --shadow-1: 0 8px 18px rgba(16, 24, 40, .06);
  --shadow-2: 0 18px 50px rgba(16, 24, 40, .08);

  --grid-gap: 56px;
  --grid-line: 1px;
  --grid-color: rgba(17, 31, 62, .06);

  --wallpaper-title: 160px;
  --wallpaper-tint: rgba(30,58,138,.45);
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--fg);
  background:var(--bg);
}

/* Background */
.bg-white-grid{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(to bottom, #ffffff 0%, #f7faff 35%, #eaf2ff 65%, #d8e6ff 100%),
    linear-gradient(to right, var(--grid-color) var(--grid-line), transparent var(--grid-line)),
    linear-gradient(to bottom, var(--grid-color) var(--grid-line), transparent var(--grid-line));
  background-size: 100% 100%, var(--grid-gap) var(--grid-gap), var(--grid-gap) var(--grid-gap);
  background-attachment: fixed, fixed, fixed;
  background-position: top left, top left, top left;
}
.bg-white-grid::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><defs><g id='chip' fill='none' stroke='rgba(30,58,138,0.85)' stroke-width='1.1'><rect x='0' y='0' width='36' height='36' rx='5'/><g stroke-width='1'><line x1='6' y1='-4' x2='6' y2='0'/><line x1='12' y1='-4' x2='12' y2='0'/><line x1='18' y1='-4' x2='18' y2='0'/><line x1='24' y1='-4' x2='24' y2='0'/><line x1='6' y1='36' x2='6' y2='40'/><line x1='12' y1='36' x2='12' y2='40'/><line x1='18' y1='36' x2='18' y2='40'/><line x1='24' y1='36' x2='24' y2='40'/><line x1='-4' y1='6' x2='0' y2='6'/><line x1='-4' y1='12' x2='0' y2='12'/><line x1='-4' y1='18' x2='0' y2='18'/><line x1='-4' y1='24' x2='0' y2='24'/><line x1='36' y1='6' x2='40' y2='6'/><line x1='36' y1='12' x2='40' y2='12'/><line x1='36' y1='18' x2='40' y2='18'/><line x1='36' y1='24' x2='40' y2='24'/></g><text x='11' y='22' font-size='10' font-family='Inter,system-ui' fill='rgba(30,58,138,0.7)'>AI</text></g><g id='shield' fill='none' stroke='rgba(30,58,138,0.8)' stroke-width='1.1'><path d='M0 8 L16 0 L32 8 V20 c0 12 -9 22 -16 25 c-7 -3 -16 -13 -16 -25 Z'/><rect x='12' y='12' width='8' height='8' rx='1.5'/><path d='M13 12 v-4 a3 3 0 0 1 6 0 v4'/></g><g id='server' fill='none' stroke='rgba(30,58,138,0.75)' stroke-width='1.1'><rect x='0' y='0' width='44' height='10' rx='2'/><rect x='0' y='14' width='44' height='10' rx='2'/><rect x='0' y='28' width='44' height='10' rx='2'/><circle cx='6' cy='5' r='1.7'/><circle cx='6' cy='19' r='1.7'/><circle cx='6' cy='33' r='1.7'/></g><g id='router' fill='none' stroke='rgba(30,58,138,0.75)' stroke-width='1.1'><rect x='0' y='10' width='42' height='14' rx='3'/><line x1='10' y1='10' x2='10' y2='2'/><line x1='32' y1='10' x2='32' y2='5'/><path d='M5 4 q5 -5 10 0' /><path d='M27 1 q5 -5 10 0' /></g><g id='cloud' fill='none' stroke='rgba(30,58,138,0.7)' stroke-width='1.1'><path d='M10 20h24a7 7 0 0 0 0-14c-1-6-8-10-14-6-3-4-9-4-12 0-6-2-11 3-10 9 0 6 5 11 12 11z'/></g><g id='globe' fill='none' stroke='rgba(30,58,138,0.75)' stroke-width='1.1'><circle cx='0' cy='0' r='12'/><ellipse cx='0' cy='0' rx='12' ry='5'/><ellipse cx='0' cy='0' rx='6' ry='12'/><line x1='-12' y1='0' x2='12' y2='0'/></g><g id='wifi' fill='none' stroke='rgba(30,58,138,0.75)' stroke-width='1.1'><path d='M0 0 q10 -10 20 0'/><path d='M4 6 q6 -6 12 0'/><circle cx='10' cy='12' r='1.8'/></g><g id='code' fill='none' stroke='rgba(30,58,138,0.8)' stroke-width='1.1'><path d='M0 8 L8 0'/><path d='M0 8 L8 16'/><path d='M22 0 L14 8'/><path d='M22 16 L14 8'/></g><g id='terminal' fill='none' stroke='rgba(30,58,138,0.8)' stroke-width='1.1'><rect x='0' y='0' width='36' height='22' rx='3'/><path d='M6 7 l6 4 l-6 4'/><line x1='16' y1='15' x2='28' y2='15'/></g><g id='plug' fill='none' stroke='rgba(30,58,138,0.8)' stroke-width='1.1'><rect x='0' y='6' width='18' height='10' rx='2'/><line x1='18' y1='11' x2='26' y2='11'/><line x1='26' y1='11' x2='30' y2='7'/></g><g id='triangle-net' fill='none' stroke='rgba(30,58,138,0.8)' stroke-width='1.1'><polygon points='0,26 22,0 44,26'/><circle cx='0' cy='26' r='3'/><circle cx='22' cy='0' r='3'/><circle cx='44' cy='26' r='3'/><line x1='0' y1='26' x2='22' y2='0'/><line x1='22' y1='0' x2='44' y2='26'/><line x1='0' y1='26' x2='44' y2='26'/></g></defs><g opacity='0.92' stroke='var(--wallpaper-tint)'><path d='M10 70 C80 20, 130 40, 200 10' fill='none' stroke='rgba(30,58,138,0.14)' stroke-width='1'/><path d='M40 300 C120 260, 180 290, 310 250' fill='none' stroke='rgba(30,58,138,0.14)' stroke-width='1'/></g><!-- scatter icons --> <g><use href='%23triangle-net' transform='translate(24 24) rotate(-5)'/><use href='%23chip' transform='translate(96 34) rotate(8)'/><use href='%23shield' transform='translate(258 42) scale(1.05)'/><use href='%23server' transform='translate(220 106) rotate(-6)'/><use href='%23router' transform='translate(30 126) rotate(7)'/><use href='%23cloud' transform='translate(154 128) scale(1.1)'/><use href='%23globe' transform='translate(78 206) scale(1.1)'/><use href='%23wifi' transform='translate(274 182) scale(1.1)'/><use href='%23code' transform='translate(38 210) scale(1.2)'/><use href='%23terminal' transform='translate(138 210) rotate(-2)'/><use href='%23plug' transform='translate(250 250) rotate(10)'/><use href='%23triangle-net' transform='translate(52 272) scale(0.9) rotate(6)'/><use href='%23chip' transform='translate(180 266) scale(0.9) rotate(-8)'/></g></svg>"),

    url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g opacity='0.85' stroke='rgba(30,58,138,0.28)'><circle cx='36' cy='48' r='10' fill='none'/><use href='%23x' /></g></svg>"),
    
    radial-gradient(1200px 600px at 50% -10%, rgba(10,107,255,.08), transparent 60%),
    radial-gradient(800px 400px at 10% 8%, rgba(10,107,255,.05), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(10,107,255,.05), transparent 60%);

  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: var(--wallpaper-tile) var(--wallpaper-tile), var(--wallpaper-tile) var(--wallpaper-tile), auto, auto, auto, auto;
  background-position: top left, calc(var(--wallpaper-tile)/2) calc(var(--wallpaper-tile)/2), center, center, center, center;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;

  
}

/* Header */
.site-header{position:sticky; top:0; background:transparent; z-index:10}
.shell{max-width:1120px; margin:0 auto; padding:18px 20px}
.brand img{height:34px; display:block}

/* Layout */
.main{
  min-height:calc(100vh - 70px);
  display:grid;
  grid-template-rows: 1fr auto;
  place-items:center;
  padding:22px 16px 28px;
}
.card{
  width:min(560px, 92%);
  padding:28px 26px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  border:1px solid rgba(255,255,255,.6);
}
.glass{
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* Text */
h1{margin:0 0 8px; font-size:26px; letter-spacing:.2px}
.sub{margin:0 0 18px; color:var(--muted)}
.lbl{display:block; font-weight:600; margin:12px 0 6px}

/* Inputs */
.in{
  width:100%; padding:12px 14px; border:1px solid var(--bd); border-radius:12px; font-size:15px; background:#fff;
  transition: border-color .15s, box-shadow .15s;
}
.in:focus{
  outline:none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}
.in.err{
  border-color:#d92d20 !important;
  box-shadow: 0 0 0 4px rgba(217,45,32,.15) !important;
}

/* Buttons */
.btn{
  display:inline-flex; justify-content:center; align-items:center; gap:8px;
  width:100%; padding:12px 14px; border-radius:12px; border:0; cursor:pointer;
  font-weight:700; letter-spacing:.2px;
}
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-1) }
.btn-primary:hover{ background:var(--brand-2) }
.btn-secondary{
  width:auto; padding:12px 16px;
  background:#f1f4fb; color:#0b1220; border:1px solid var(--bd);
}
.btn-secondary[disabled], .btn[disabled]{
  opacity:.6; cursor:not-allowed;
}

/* Footer */
.foot{ margin-top:18px; color:#7a8497; font-size:12px; text-align:center }

/* Form spacing */
.form{display:block}
.form .btn{ margin-top:14px }

/* OTP row layout */
.row-inline{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
  margin-top:10px;
}
.muted{ color:var(--muted); font-size:12px; margin-top:6px }

/* Force light theme */
.no-dark{ color-scheme: light; }
@media (prefers-color-scheme: dark){
  .no-dark{
    --bg:#ffffff; --fg:#0b1220; --muted:#596277; --bd:#e6e9ef; --grid-color: rgba(17,31,62,.06);
  }
  .no-dark .glass{ background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.6) }
  .no-dark .card{ box-shadow: var(--shadow-2) }
  .no-dark .in{ background:#fff; color:var(--fg); border-color:var(--bd) }
  .no-dark .foot{ color:#7a8497 }
}
/* === Timesheet shared utilities (safe to append) === */

/* Chips / pills */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 600;
  font-size: 12px;
}

/* Status modifiers (used in Engineer/PMO) */
.status-pill { margin-left: auto; }
.status-draft { background: #fef3c7; color: #92400e; }
.status-saved { background: #dcfce7; color: #14532d; }

/* Disable edit mask while keeping Submit clickable */
.disabled-mask *:where(input, select, textarea, button){
  pointer-events: none;
  opacity: 0.6;
}

/* Radio row (Leave / Weekly Off / Holiday) */
.radio-row {
  display: flex;
  gap: 14px;
  align-items: center;
}
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bottom-right submit row */
.submit-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 16px 16px;
}
.disabled-note { color: #991b1b; margin-right: auto; }

/* Profile card layout */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}
.profile-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.profile-row label { width: 120px; color: #6b7280; }

/* Small muted helper */
.muted-sm { color: #6b7280; font-size: 12px; }

/* Half-and-half email row (landing) */
.row-email {
  display: grid;
  grid-template-columns: 1fr 28px 1.6fr; /* prefix | @ | domain */
  gap: 8px;
  align-items: center;
}
.row-email .at {
  display: grid;
  place-items: center;
  font-weight: 600;
  color: #6b7280;
}

/* Basic inputs and buttons (only for pages that don’t already style them) */
.in, select, textarea {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 9px 10px;
  background: #fff;
  outline: none;
}
.in:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
  border-color: #c7d2fe;
}
.btn {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1e40af; }
.btn-secondary { background: #f3f4f6; border-color: #e5e7eb; }

/* Simple card shell for pages that need it */
.card {
  background: #ffffffcc;
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(2,8,23,0.06);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2, 8, 23, 0.12), 0 4px 12px rgba(2, 8, 23, 0.07);
}
.card-head {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(2,8,23,0.06);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.card-inner { padding: 14px 16px; }

/* Responsive tweak */
@media (max-width: 840px){
  .profile-grid { grid-template-columns: 1fr; }
}