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

:root{
  --ink:#071B26;
  --surface:#0E2A38;
  --card:#123244;
  --card-hi:#16394C;
  --line:#1F4A5E;
  --cyan:#2FD1D9;
  --teal-deep:#0E7C86;
  --gray:#8B98A5;
  --text:#EAF6F8;
  --muted:#7FA3AC;
  --good:#3ECF8E;
  --warn:#F2B84B;
  --bad:#FF6B6B;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',sans-serif;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(47,209,217,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(14,124,134,0.14), transparent 55%),
    var(--ink);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Space Grotesk',sans-serif;}

/* ---------- droplet background ambience ---------- */
.droplet{
  position:fixed; border-radius:50% 50% 50% 0; transform:rotate(45deg);
  background:linear-gradient(160deg, rgba(47,209,217,0.10), rgba(47,209,217,0.02));
  filter:blur(0.5px); pointer-events:none; z-index:0;
}

/* ---------- LOGIN ---------- */
#loginScreen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:50; padding:20px; overflow-y:auto;
}
.login-card{
  position:relative; width:100%; max-width:380px;
  background:linear-gradient(180deg, var(--card-hi), var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 32px 32px; text-align:center;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
  animation:rise 0.6s ease;
}
@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.login-card img{width:104px; margin-bottom:6px;}
.login-card h1{font-size:1.05rem; letter-spacing:0.02em; color:var(--text); margin-bottom:2px;}
.login-card p.sub{font-size:0.78rem; color:var(--muted); margin-bottom:26px; letter-spacing:0.03em; text-transform:uppercase;}
.field{text-align:left; margin-bottom:14px;}
.field label{display:block; font-size:0.72rem; color:var(--muted); margin-bottom:6px; letter-spacing:0.04em; text-transform:uppercase;}
.field input{
  width:100%; min-height:44px; padding:11px 13px; border-radius:10px; border:1px solid var(--line);
  background:var(--ink); color:var(--text); font-size:0.95rem; font-family:'Inter',sans-serif;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.field input:focus{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(47,209,217,0.15);}
.login-btn{
  width:100%; min-height:44px; padding:12px; margin-top:8px; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(90deg, var(--teal-deep), var(--cyan));
  color:#04181D; font-weight:700; font-size:0.92rem; letter-spacing:0.02em;
  transition:transform .15s, filter .15s; display:inline-flex; align-items:center; justify-content:center;
}
.login-btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
.login-err{color:var(--bad); font-size:0.78rem; margin-top:12px; min-height:16px;}
.login-ok{color:var(--good); font-size:0.78rem; margin-top:10px; min-height:16px;}
.modal-backdrop{
  position:fixed; inset:0; background:rgba(7,27,38,0.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:60; padding:16px; overflow-y:auto;
}
.modal{
  width:100%; max-width:440px; background:linear-gradient(180deg, var(--card-hi), var(--card));
  border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.modal h2{font-family:'Space Grotesk',sans-serif; font-size:1.05rem; margin-bottom:14px; color:var(--text);}
.modal .code-display{
  font-family:'JetBrains Mono',monospace; font-size:1.6rem; font-weight:600;
  letter-spacing:0.12em; text-align:center; padding:14px;
  background:var(--ink); border:1px dashed var(--teal-deep); border-radius:10px;
  color:var(--cyan); user-select:all; cursor:pointer; word-break:break-all;
}
.modal .expires{font-size:0.75rem; color:var(--muted); text-align:center; margin-top:8px;}
.modal .actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.modal .actions button{flex:1; min-width:120px;}
.danger{color:var(--bad); border-color:var(--bad) !important;}

/* ---------- APP SHELL ---------- */
#app{display:none; min-height:100vh; position:relative; z-index:1;}
header.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; border-bottom:1px solid var(--line);
  background:rgba(14,42,56,0.9); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:40px; height:40px; object-fit:contain; flex-shrink:0;}
.brand .names{line-height:1.1;}
.brand .names .factory{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; letter-spacing:0.01em;}
.brand .names .tag{font-size:0.68rem; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase;}
.topbar-right{display:flex; align-items:center; gap:16px;}
.today-pill{
  font-size:0.75rem; color:var(--muted); background:var(--card); border:1px solid var(--line);
  padding:7px 14px; border-radius:100px; white-space:nowrap;
}
.logout-btn{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:8px 14px; border-radius:10px; font-size:0.78rem; cursor:pointer; transition:all .15s;
  min-height:38px; display:inline-flex; align-items:center; justify-content:center;
}
.logout-btn:hover{color:var(--bad); border-color:var(--bad);}

/* ---------- NAVIGATION BAR ---------- */
.nav-bar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:0 28px; position:sticky; top:73px; z-index:15;
}
.nav-container{
  max-width:1180px; margin:0 auto; display:flex; gap:8px; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.nav-tab{
  background:transparent; border:none; border-bottom:3px solid transparent;
  color:var(--muted); padding:12px 18px; font-size:0.85rem; font-weight:600;
  font-family:'Space Grotesk',sans-serif; cursor:pointer; transition:all .15s;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.nav-tab:hover{color:var(--text);}
.nav-tab.active{
  color:var(--cyan); border-bottom-color:var(--cyan); background:rgba(47,209,217,0.06);
}

main{max-width:1180px; margin:0 auto; padding:24px 28px 80px;}
.section-title{
  font-family:'Space Grotesk',sans-serif; font-size:0.95rem; font-weight:600;
  display:flex; align-items:center; gap:10px; margin-bottom:16px; color:var(--text);
}
.section-title .line{flex:1; height:1px; background:var(--line);}

/* ---------- TARGET PROGRESS BAR ---------- */
.target-card{
  background:linear-gradient(165deg, var(--card-hi), var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:24px;
}
.target-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:6px;}
.target-header .t-title{font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600;}
.target-header .t-val{font-size:0.85rem; font-weight:600; color:var(--cyan);}
.target-bar-bg{width:100%; height:10px; background:var(--ink); border-radius:100px; overflow:hidden; border:1px solid var(--line);}
.target-bar-fill{height:100%; background:linear-gradient(90deg, var(--teal-deep), var(--cyan)); border-radius:100px; transition:width 0.4s ease;}

/* ---------- KPI CARDS ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
.kpi-card{
  background:linear-gradient(165deg, var(--card-hi), var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px; position:relative; overflow:hidden;
  display:flex; gap:14px; align-items:center;
}
.kpi-card .gauge-wrap{flex-shrink:0; width:34px; height:60px;}
.kpi-card .info{flex:1; min-width:0;}
.kpi-label{font-size:0.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px;}
.kpi-value{font-family:'JetBrains Mono',monospace; font-size:1.5rem; font-weight:600; line-height:1; overflow:hidden; text-overflow:ellipsis;}
.kpi-delta{display:inline-flex; align-items:center; gap:4px; font-size:0.72rem; margin-top:8px; padding:2px 8px; border-radius:100px; font-weight:600; white-space:nowrap;}
.kpi-delta.up{color:var(--good); background:rgba(62,207,142,0.12);}
.kpi-delta.down{color:var(--bad); background:rgba(255,107,107,0.12);}
.kpi-delta.flat{color:var(--muted); background:rgba(127,163,172,0.12);} 

/* ---------- FORM & DASHBOARD GRID ---------- */
.grid-2{display:grid; grid-template-columns:1.1fr 1.4fr; gap:20px; margin-bottom:28px;}
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
}
.panel-header-flex{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px;}
.tool-btn{
  background:rgba(47,209,217,0.1); border:1px solid var(--teal-deep); color:var(--cyan);
  padding:5px 10px; border-radius:8px; font-size:0.75rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.tool-btn:hover{background:var(--teal-deep); color:#04181D;}

.shortcut-pills{display:flex; gap:4px;}
.pill-btn{
  background:var(--ink); border:1px solid var(--line); color:var(--muted); padding:2px 8px;
  border-radius:6px; font-size:0.68rem; cursor:pointer; transition:all .15s;
}
.pill-btn:hover{color:var(--cyan); border-color:var(--cyan);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
.form-grid .full{grid-column:1/-1;}
.form-grid label, .btn-label{
  display:block; font-size:0.72rem; color:var(--muted); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:0.04em; height:16px; line-height:16px;
}
.form-grid input, .form-grid select{
  width:100%; min-height:44px; height:44px; padding:0 12px; border-radius:9px; border:1px solid var(--line);
  background:var(--ink); color:var(--text); font-size:0.95rem; font-family:'JetBrains Mono',monospace; outline:none;
}
input[type="date"]{
  color-scheme:dark; font-family:'Inter',sans-serif; cursor:pointer; box-sizing:border-box;
}
input[type="date"]::-webkit-date-and-time-value{
  text-align:left; line-height:44px; margin:0;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(0.8) sepia(1) saturate(5) hue-rotate(140deg); cursor:pointer; padding:2px; opacity:0.85; transition:opacity .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}
.form-grid input:focus, .form-grid select:focus{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(47,209,217,0.15);} 
.revenue-preview{
  margin-top:16px; padding:14px 16px; border-radius:10px; background:rgba(47,209,217,0.08);
  border:1px dashed var(--teal-deep); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px;
}
.revenue-preview .rlabel{font-size:0.76rem; color:var(--muted);}
.revenue-preview .rvalue{font-family:'JetBrains Mono',monospace; font-size:1.15rem; font-weight:600; color:var(--cyan);}
.submit-btn{
  margin-top:18px; width:100%; min-height:44px; padding:12px; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(90deg, var(--teal-deep), var(--cyan)); color:#04181D; font-weight:700; font-size:0.9rem;
  letter-spacing:0.02em; transition:filter .15s, transform .15s; display:inline-flex; align-items:center; justify-content:center;
}
.submit-btn:hover{filter:brightness(1.08); transform:translateY(-1px);} 
.form-note{font-size:0.72rem; color:var(--muted); margin-top:10px; line-height:1.4;}

/* ---------- DEDICATED ADMIN VIEW ---------- */
.admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px;}
@media(max-width:900px){.admin-grid{grid-template-columns:1fr;}}

/* ---------- SEARCH, FILTER & EXPORT BAR ---------- */
.table-header-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:32px; flex-wrap:wrap;}
.preset-filters{display:flex; gap:6px;}
.filter-pill{
  background:var(--card); border:1px solid var(--line); color:var(--muted); padding:6px 12px;
  border-radius:100px; font-size:0.75rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.filter-pill:hover{color:var(--text); border-color:var(--cyan);}
.filter-pill.active{background:rgba(47,209,217,0.15); color:var(--cyan); border-color:var(--cyan);}

.table-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.search-input{
  min-height:40px; padding:8px 14px; border-radius:9px; border:1px solid var(--line);
  background:var(--ink); color:var(--text); font-size:0.85rem; font-family:'Inter',sans-serif; outline:none; min-width:200px;
}
.search-input:focus{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(47,209,217,0.15);}
.export-btn{
  min-height:40px; padding:8px 14px; border-radius:9px; border:1px solid var(--teal-deep);
  background:rgba(14,124,134,0.15); color:var(--cyan); font-weight:600; font-size:0.82rem; cursor:pointer;
  transition:all .15s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.export-btn:hover{background:var(--teal-deep); color:#04181D;}

/* ---------- REPORTS VIEW ---------- */
.reports-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px;}
.report-card{
  background:linear-gradient(165deg, var(--card-hi), var(--card));
  border:1px solid var(--line); border-radius:var(--radius); padding:20px;
}
.report-card .r-title{font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px;}
.report-card .r-val{font-family:'JetBrains Mono',monospace; font-size:1.6rem; font-weight:700; color:var(--cyan);}
.report-card .r-sub{font-size:0.78rem; color:var(--muted); margin-top:6px;}

/* ---------- CHART PANEL ---------- */
#chartHost{width:100%; height:220px; overflow:hidden;}

/* ---------- HISTORY TABLE ---------- */
.table-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y;
}
table{width:100%; border-collapse:collapse; min-width:680px;}
thead th{
  text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted);
  padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:12px 16px; font-size:0.85rem; border-bottom:1px solid var(--line); white-space:nowrap;}
.mono-cell{font-family:'JetBrains Mono',monospace;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(47,209,217,0.04);} 
.badge{padding:3px 10px; border-radius:100px; font-size:0.72rem; font-weight:600; display:inline-block;}
.badge.good{color:var(--good); background:rgba(62,207,142,0.12);}
.badge.bad{color:var(--bad); background:rgba(255,107,107,0.12);} 
.badge.admin{color:var(--warn); background:rgba(242,184,75,0.15);} 
.badge.employee{color:var(--cyan); background:rgba(47,209,217,0.15);} 
.row-del{
  background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:8px;
  padding:6px 12px; cursor:pointer; font-size:0.75rem; transition:all .15s; min-height:36px;
  display:inline-flex; align-items:center; justify-content:center;
}
.row-del:hover{color:var(--bad); border-color:var(--bad);} 
.empty-state{padding:40px 20px; text-align:center; color:var(--muted); font-size:0.85rem;}

footer.foot{text-align:center; padding:26px 16px; color:var(--muted); font-size:0.75rem; letter-spacing:0.03em; line-height:1.5;}

/* ---------- PRINT MEDIA OVERRIDES ---------- */
@media print {
  body { background:#fff !important; color:#000 !important; }
  header.topbar, .nav-bar, .grid-2, .preset-filters, .table-actions, .logout-btn, .row-del, footer.foot { display:none !important; }
  #app, main { padding:0 !important; max-width:100% !important; }
  .table-wrap { border:1px solid #ccc !important; }
  thead th { background:#f0f0f0 !important; color:#000 !important; border-bottom:2px solid #000 !important; }
  tbody td { color:#000 !important; border-bottom:1px solid #ddd !important; }
  .section-title span { color:#000 !important; font-size:1.2rem !important; }
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */
@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .nav-bar{top:63px;}
}

@media(max-width:600px){
  header.topbar{padding:12px 16px; flex-wrap:wrap; gap:10px;}
  .brand img{width:32px; height:32px;}
  .brand .names .factory{font-size:0.88rem;}
  .brand .names .tag{font-size:0.62rem;}
  .topbar-right{gap:8px;}
  .today-pill{padding:5px 10px; font-size:0.7rem;}
  .logout-btn{padding:5px 10px; font-size:0.75rem; min-height:34px;}
  
  .nav-bar{padding:0 12px;}
  .nav-tab{padding:10px 12px; font-size:0.8rem;}
  
  main{padding:16px 12px 60px;}
  .panel{padding:16px 14px;}
  .form-grid{grid-template-columns:1fr; gap:12px;}
  .btn-label{display:none;}
  
  .table-header-bar{flex-direction:column; align-items:stretch;}
  .preset-filters{width:100%; justify-content:space-between;}
  .filter-pill{flex:1; text-align:center;}
  .table-actions{flex-direction:column; width:100%;}
  .search-input{width:100%;}
  .export-btn{width:100%; justify-content:center;}
  
  thead th, tbody td{padding:10px 12px; font-size:0.8rem;}
  .revenue-preview{padding:12px 14px;}
}

@media(max-width:560px){
  .kpi-grid{grid-template-columns:1fr; gap:12px;}
  .field input, .form-grid input, .form-grid select{font-size:16px;} /* Prevents iOS auto-zoom on input focus */
}

@media(max-width:480px){
  #loginScreen{padding:12px;}
  .login-card{padding:28px 18px 24px;}
  .login-card img{width:80px;}
  .login-card h1{font-size:0.98rem;}
  .login-card p.sub{margin-bottom:20px; font-size:0.72rem;}
  
  .modal{padding:18px 14px;}
  .modal .code-display{font-size:1.3rem; padding:10px;}
  
  .kpi-card{padding:14px; gap:12px;}
  .kpi-value{font-size:1.35rem;}
  .kpi-delta{font-size:0.68rem; padding:2px 6px;}
}