/* ============================================================
   GajiPro — tampilan mobile sesuai mockup (v3)
   Dimuat setelah app.css untuk menimpa gaya lama.
   ============================================================ */
:root{
  --brand:#1f6ff0;
  --brand-d:#1558cc;
  --brand-l:#eaf1ff;
  --green:#0f9d58;
  --green-d:#0a7f47;
  --green-l:#e8f7ef;
  --ink:#14263d;
  --muted:#7d8c9d;
  --line:#e9eff6;
  --bg:#f6fafe;
  --radius:18px;
  --shadow:0 1px 2px rgba(20,45,80,.04), 0 10px 26px rgba(20,45,80,.06);
  --shadow-sm:0 2px 8px rgba(20,45,80,.06);
}
body{background:#e9f2fb;}
body::before{
  background:
    radial-gradient(700px 420px at 4% -8%, #d7ecff 0%, transparent 62%),
    radial-gradient(700px 460px at 100% 4%, #e4f3ff 0%, transparent 58%),
    linear-gradient(170deg,#eaf4fd 0%,#e2edf9 100%);
}
#appRoot{max-width:430px;background:#f7fafd;}
a{color:var(--brand-d);}

/* ---------------- LOGIN ---------------- */
#loginScreen{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  padding:0;
  background:linear-gradient(180deg,#bfe3fb 0%,#d8effe 40%,#eef8ff 68%,#ffffff 100%);
  overflow:hidden;
}
.login-hero{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 16px 0;
  flex:none;
}
.login-head{position:relative;z-index:2;text-align:center;padding-top:2px;}
.brand-lockup{display:flex;align-items:center;justify-content:center;gap:7px;}
.brand-mark{width:50px;height:41px;filter:drop-shadow(0 4px 8px rgba(20,70,120,.12));}
.brand-name{margin:0;font-size:36px;font-weight:800;letter-spacing:-1.6px;color:#17233f;line-height:1;}
.brand-name span{color:#12a15a;margin-left:1px;}
.login-tag{margin:6px 0 0;font-size:13px;line-height:1.4;color:#1e3049;font-weight:500;text-align:center;}
.hero-img{
  width:122%;
  max-width:none;
  height:250px;
  object-fit:cover;
  object-position:center bottom;
  margin:2px -11% -8px;
  filter:drop-shadow(0 12px 18px rgba(30,70,110,.07));
  pointer-events:none;
  user-select:none;
}
.login-sheet{
  position:relative;
  z-index:3;
  flex:1;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:28px 28px 0 0;
  margin-top:-14px;
  padding:18px 22px 0;
  box-shadow:0 -12px 30px rgba(25,60,95,.10);
}
.role-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;
  background:#eef4fb;border-radius:14px;padding:5px;margin-bottom:16px;
}
.role-tab{
  display:flex;align-items:center;justify-content:center;
  padding:10px 8px;border-radius:11px;font-size:14px;font-weight:700;color:#5b7089;
  transition:.18s;
}
.role-tab.active{
  background:var(--brand);color:#fff;
  box-shadow:0 6px 16px rgba(31,111,240,.28);
}
.input-wrap{position:relative;margin-bottom:10px;}
.input-wrap>svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:#8a9aad;pointer-events:none;
}
.input-wrap input{
  width:100%;height:51px;border-radius:13px;border:1.5px solid #e4ecf6;background:#f6f9fd;
  padding:0 46px 0 45px;font-size:13.5px;color:#1b2c42;
}
.input-wrap input::placeholder{color:#93a3b6;}
.input-wrap input:focus{
  outline:none;border-color:#9cc2ff;background:#fff;
  box-shadow:0 0 0 4px rgba(31,111,240,.08);
}
.eye-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  padding:8px;color:#8a9aad;display:grid;place-items:center;
}
.eye-btn svg{width:19px;height:19px;}
.login-row{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 12px;font-size:12.5px;
}
.check{display:flex;align-items:center;gap:8px;color:#33475e;font-weight:500;cursor:pointer;}
.check input{
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;border-radius:5px;border:1.8px solid #b9c7d8;background:#fff;
  display:grid;place-items:center;margin:0;flex:none;cursor:pointer;
}
.check input:checked{background:var(--brand);border-color:var(--brand);}
.check input:checked::after{
  content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.link-btn{color:var(--brand);font-size:12.5px;font-weight:700;padding:2px;}
.btn-login{
  position:relative;width:100%;height:52px;border-radius:14px;
  background:var(--brand);color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px rgba(31,111,240,.26);
}
.btn-login:hover{background:var(--brand-d);}
.btn-login svg{position:absolute;right:18px;width:20px;height:20px;}
.divider{
  display:flex;align-items:center;gap:12px;margin:13px 0;
  font-size:11.5px;color:#9aa9bb;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:#e9eff6;}
.btn-google{
  width:100%;height:50px;border-radius:14px;background:#fff;
  border:1.5px solid #e1eaf5;color:#1f2f44;font-size:13.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-google img,.btn-google svg{width:19px;height:19px;}
.login-foot{text-align:center;color:#7d8c9d;font-size:12.5px;margin:14px 0 6px;}
.login-foot b{color:var(--brand);font-weight:700;cursor:pointer;}
.login-waves{
  position:relative;left:auto;right:auto;bottom:auto;flex:none;
  height:58px;z-index:1;margin:auto -22px 0;padding-top:10px;pointer-events:none;opacity:.95;
  overflow:hidden;
}
.login-waves svg{width:100%;height:100%;display:block;}

/* ---------------- HEADER APP ---------------- */
.app-head{
  position:sticky;top:0;z-index:40;
  display:grid;grid-template-columns:42px 1fr 42px;align-items:center;
  padding:10px 14px 8px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
}
.head-btn{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:#22354c;position:relative;
}
.head-btn:active{background:#eef4fb;}
.head-btn svg{width:24px;height:24px;}
.head-brand{display:flex;align-items:center;justify-content:center;gap:6px;}
.head-mark{width:34px;height:28px;}
.head-word{font-size:21px;font-weight:800;letter-spacing:-.9px;color:#17233f;line-height:1;}
.head-word span{color:#12a15a;}
.dot-badge{
  position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 3px;
  border-radius:9px;background:#ef4444;color:#fff;font-size:9.5px;font-weight:700;
  display:grid;place-items:center;border:2px solid #fff;
}

#views{padding:10px 14px 104px;flex:1;position:relative;z-index:1;}

/* ---------------- AKSI CEPAT ---------------- */
.quick{
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  background:#fff;border:1px solid #eef3f9;border-radius:16px;
  padding:12px 4px 11px;box-shadow:0 4px 16px rgba(25,55,90,.05);
}
.quick-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:9.5px;font-weight:600;color:#33475e;line-height:1.22;text-align:center;
  padding:0 1px;
}
.quick-ic{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;}
.quick-ic svg{width:19px;height:19px;}
.qa-blue{background:#e8f0fe;color:#1f6ff0;}
.qa-green{background:#e6f8ee;color:#129a52;}
.qa-amber{background:#fdf1df;color:#dd8a00;}
.qa-green2{background:#e4f7ee;color:#0f9d58;}
.qa-teal{background:#e3f6f5;color:#0f9d92;}

/* ---------------- SAPAAN ---------------- */
.greet{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #eef3f9;border-radius:16px;
  padding:11px 13px;margin-top:11px;box-shadow:0 4px 14px rgba(25,55,90,.045);
}
.greet-ava{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#d8e9ff,#a9c9f7);
  color:#124a9e;font-size:15px;font-weight:800;
  display:grid;place-items:center;border:2px solid #eef5ff;
}
.greet h4{margin:0;font-size:15px;font-weight:800;color:#14263d;letter-spacing:-.2px;}
.greet p{margin:2px 0 0;font-size:11px;color:#7d8c9d;}
.greet-bell{
  width:34px;height:34px;margin-left:auto;display:grid;place-items:center;
  color:#2a3d55;position:relative;
}
.greet-bell svg{width:21px;height:21px;}
.greet-bell i{
  position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;
  background:#ef4444;border:2px solid #fff;
}

/* ---------------- KARTU GAJI ---------------- */
.sal-card{
  position:relative;margin-top:11px;padding:6px;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,#16b96f 0%,#0aa25f 52%,#079257 100%);
  box-shadow:0 14px 28px rgba(9,140,84,.20);
}
.sal-card::after{
  content:'';position:absolute;width:190px;height:190px;border-radius:50%;
  right:-64px;top:-84px;background:rgba(255,255,255,.09);
}
.sal-top{
  position:relative;z-index:1;display:flex;justify-content:space-between;
  align-items:flex-start;padding:11px 11px 14px;
}
.sal-lab{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.92);}
.sal-amount{
  font-size:28px;font-weight:800;color:#fff;letter-spacing:-1.1px;margin-top:2px;
}
.sal-pill{
  border:1.5px solid rgba(255,255,255,.78);background:rgba(255,255,255,.10);
  color:#fff;font-size:11.5px;font-weight:700;padding:8px 15px;border-radius:10px;
}
.sal-target{position:relative;z-index:1;background:#fff;border-radius:14px;padding:12px 14px 14px;}
.st-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.st-lab{font-size:11px;color:#7d8c9d;font-weight:500;}
.st-val{font-size:14.5px;font-weight:800;color:#14263d;margin-top:1px;letter-spacing:-.2px;}
.st-pct{font-size:12px;font-weight:600;color:#5b7089;padding-top:2px;}
.st-bar{height:8px;border-radius:5px;background:#e6f6ec;margin-top:9px;overflow:hidden;}
.st-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#22c55e,#0ca65c);}

/* ---------------- MENU TILE ---------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:11px;}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#fff;border:1px solid #eef3f9;border-radius:16px;
  padding:13px 6px 11px;font-size:10.5px;font-weight:700;color:#33475e;
  box-shadow:0 3px 10px rgba(25,55,90,.04);
}
.tile:active{transform:translateY(1px);}
.tile-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;}
.tile-ic svg{width:21px;height:21px;}
.t-green{background:#e6f8ee;color:#129a52;}
.t-blue{background:#e8f1fe;color:#1f6ff0;}
.t-rose{background:#ffe9ec;color:#e5484d;}
.t-amber{background:#fff3e0;color:#e08a00;}
.t-purple{background:#f0eafe;color:#7c5cf0;}
.t-sky{background:#e7f1fe;color:#2f7de1;}

/* ---------------- JADWAL ---------------- */
.sec-h{font-size:13.5px;font-weight:800;color:#14263d;margin:16px 2px 8px;letter-spacing:-.2px;}

/* dropdown & input di dalam halaman */
.select-wrap{position:relative;display:inline-flex;}
.select-wrap::after,.select-wrap>svg{display:none!important;}
#views select{
  appearance:none;-webkit-appearance:none;
  height:40px;border:1.5px solid #e4ecf6;border-radius:11px;background:#fff;
  padding:0 30px 0 12px;font-size:12.5px;font-weight:600;color:#33475e;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8c9d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px;
}
#views input:not([type=checkbox]):not([type=radio]),
#views textarea{
  border:1.5px solid #e4ecf6;border-radius:11px;background:#fff;
  font-size:13px;color:#1b2c42;
}
#views input:focus,#views textarea:focus,#views select:focus{
  outline:none;border-color:#9cc2ff;box-shadow:0 0 0 3px rgba(31,111,240,.08);
}
#views .btn:disabled{
  background:#e9f4ee;color:#7ea58d;box-shadow:none;opacity:1;
}
#views .btn-blue:disabled{background:#eaf1fb;color:#8ba7c9;}
.sched{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #eef3f9;border-radius:16px;
  padding:11px 12px;box-shadow:0 4px 14px rgba(25,55,90,.045);
}
.sched-ic{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:#eaf3ff;color:#1f6ff0;display:grid;place-items:center;
}
.sched-ic svg{width:20px;height:20px;}
.sched-txt{flex:1;min-width:0;display:flex;flex-direction:column;}
.sched-txt b{font-size:14px;font-weight:800;color:#14263d;letter-spacing:-.2px;}
.sched-txt span{font-size:11px;color:#7d8c9d;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sched-btn{background:#e3f8ec;color:#0a8c4f;font-size:11.5px;font-weight:800;padding:9px 14px;border-radius:10px;}
.sched-go{color:#9aa9bb;padding:4px;display:grid;place-items:center;}
.sched-go svg{width:17px;height:17px;}

/* ---------------- BOTTOM NAV ---------------- */
.bottomnav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.98);
  border-top:1px solid #eef3f9;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 22px rgba(25,55,90,.05);
  backdrop-filter:blur(12px);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:9.5px;font-weight:600;color:#8a99ab;padding:2px 0;
  background:none;border-radius:0;
}
.nav-item svg{width:22px;height:22px;}
.nav-item.active{color:#0d9b57;background:none;}
.nav-item.active svg{stroke-width:2.1;}

@media (min-width:520px){
  #appRoot{max-width:430px;border-radius:26px;}
  .bottomnav{max-width:430px;border-radius:0 0 26px 26px;}
  #loginScreen{min-height:calc(100vh - 48px);border-radius:26px;}
}