:root{--bg:#f2f3f4;--white:#fff;--line:#e5e6e8;--text:#171717;--muted:#7f848a;--dark:#191919;--red:#e53935;--red-deep:#b91d15;--red-soft:#ffe9e7;--lime:#d9ff56;--blue:#dcecff;--shadow:0 14px 30px rgba(18,18,18,.055);--shadow-soft:0 6px 18px rgba(18,18,18,.035)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif}body{display:flex;justify-content:center}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid rgba(229,57,53,.28);outline-offset:3px}svg{display:block}.app{width:min(100%,430px);min-height:100vh;background:var(--bg);padding:0 12px 92px;position:relative;overflow-x:hidden}.topbar{position:sticky;top:0;z-index:50;height:60px;display:flex;align-items:center;justify-content:space-between;background:rgba(242,243,244,.95);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-family:"Manrope",sans-serif}.brand-mark{width:32px;height:32px;border-radius:11px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:13px;box-shadow:0 7px 16px rgba(229,57,53,.2)}.brand-tag{font:800 9px "DM Sans",sans-serif;color:var(--red);background:var(--red-soft);padding:5px 8px;border-radius:999px}.connection{font-size:9px;font-weight:800;color:var(--muted)}.connection.online{color:#148559}.connection.offline{color:var(--red)}
.head{padding:10px 2px 8px}.head .date{font-size:10px;color:var(--muted);font-weight:700}.head h1{margin:3px 0 0;font-family:"Manrope",sans-serif;font-size:30px;line-height:1;font-weight:800;letter-spacing:-.055em}.head p{margin:7px 0 0;font-size:11px;color:var(--muted);line-height:1.45}.bento{display:grid;gap:8px}.tile{border-radius:23px;padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}.tile.white{background:#fff}.tile.lime{background:var(--lime)}.tile.dark{background:var(--dark);color:#fff}.eyebrow{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.attendance-center{min-height:400px;background:radial-gradient(circle at 15% 10%,rgba(229,57,53,.1),transparent 20%),radial-gradient(circle at 90% 84%,rgba(217,255,86,.35),transparent 19%),radial-gradient(circle at 82% 12%,rgba(220,236,255,.85),transparent 19%),linear-gradient(180deg,#fff 0%,#fafafa 100%);border:1px solid var(--line)}.attendance-center:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(229,57,53,.05);left:-76px;top:-76px}.attendance-center:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(220,236,255,.7);right:-45px;bottom:-40px}.att-brand{position:relative;z-index:2;display:flex;justify-content:center;align-items:center}.company{text-align:center;font-size:11px;font-weight:700;color:#5e6368;letter-spacing:.05em}.att-badge{position:absolute;right:0;top:0;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--shadow-soft);display:grid;place-items:center;border:1px solid #eee;color:var(--red)}.att-badge svg{width:16px;height:16px}.att-time{position:relative;z-index:2;text-align:center;margin-top:28px}.att-time .clock{font-family:"Manrope",sans-serif;font-size:55px;font-weight:700;letter-spacing:-.06em;line-height:1;color:#49515a}.att-time .date{font-size:10px;color:#8a8f95;margin-top:8px}.clock-stage{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;margin-top:30px}.clock-circle{width:220px;height:220px;border-radius:50%;background:linear-gradient(145deg,#ff746d 0%,#f14d45 18%,#e53935 52%,#c5271f 76%,#aa170f 100%);box-shadow:0 28px 45px rgba(229,57,53,.2),0 18px 35px rgba(185,29,21,.18),inset 0 1px 0 rgba(255,255,255,.26);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.25s ease}.clock-circle.out{background:linear-gradient(145deg,#ff6f66 0%,#ee4c43 22%,#e53935 56%,#c7241d 80%,#99130d 100%)}.clock-circle.done,.clock-circle:disabled{background:linear-gradient(135deg,#fff 0%,#efefef 100%);color:#777;border:1px solid #e7e7e7;box-shadow:0 14px 25px rgba(0,0,0,.08);cursor:not-allowed}.clock-circle.busy{animation:pulse 1.1s ease-in-out infinite}.clock-circle svg{width:52px;height:52px;margin-bottom:12px}.clock-circle .cta{font-family:"Manrope",sans-serif;font-size:24px;font-weight:800;letter-spacing:-.04em}.clock-circle .subcta{margin-top:4px;font-size:11px;font-weight:700;opacity:.86;letter-spacing:.03em;text-align:center;max-width:150px}.att-location{position:relative;z-index:2;display:flex;min-height:30px;justify-content:center;align-items:center;text-align:center;margin:14px auto 0;max-width:300px;font-size:10px;color:#59626b;font-weight:700}.att-location.error{color:#a92520}.stats-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.stat{text-align:center;padding:8px 4px}.stat .value{display:block;font-family:"Manrope",sans-serif;font-size:22px;font-weight:800;letter-spacing:-.04em}.stat .status-value{font-size:13px;line-height:1.9}.stat .label{display:block;font-size:9px;color:#8a8f95;margin-top:2px}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:72px}.quick{min-height:122px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}.quick .chip{display:inline-flex;width:max-content;height:24px;align-items:center;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.65);font-size:8px;font-weight:800}.dark .chip{background:rgba(255,255,255,.11)}.quick strong{display:block;font:800 18px "Manrope",sans-serif;letter-spacing:-.04em}.quick small{display:block;margin-top:4px;font-size:9px;opacity:.7}.bottom{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);width:min(calc(100% - 20px),410px);height:64px;border-radius:22px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border:1px solid #dedede;box-shadow:0 14px 30px rgba(0,0,0,.12);display:grid;grid-template-columns:repeat(4,1fr);padding:6px;z-index:60}.nav{background:transparent;border-radius:16px;color:#777;font-size:8px;font-weight:800;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center}.nav.active{background:var(--dark);color:#fff}.nav span{font-size:17px;line-height:1}.coming-soon{min-height:420px;display:flex;flex-direction:column;justify-content:center;text-align:center}.coming-soon h2{font:800 30px "Manrope",sans-serif;margin:8px 0}.coming-soon p{font-size:11px;color:var(--muted)}
.screen-panel{padding-top:10px;margin-bottom:72px}.screen-head{display:flex;align-items:center;gap:12px;padding:2px 3px 13px}.screen-head h2{font:800 27px/1 "Manrope",sans-serif;letter-spacing:-.05em;margin:4px 0}.screen-head p{font-size:10px;color:var(--muted);margin:0}.back-button{flex:0 0 38px;width:38px;height:38px;border-radius:14px;background:#fff;color:var(--text);box-shadow:var(--shadow-soft);font-size:19px}.data-card,.calendar-card{border:1px solid var(--line);min-height:440px}.panel-state{text-align:center;color:var(--muted);font-size:11px;padding:38px 8px}.panel-state.error{color:var(--red-deep)}.history-list{display:grid;gap:8px}.history-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid #eff0f1}.history-row:last-child{border-bottom:0}.history-date{text-align:center}.history-date strong{display:block;font:800 20px/1 "Manrope",sans-serif}.history-date span{display:block;margin-top:4px;font-size:8px;text-transform:uppercase;color:var(--muted);font-weight:800}.history-main{min-width:0}.history-main strong{display:block;font-size:11px}.history-main small{display:block;margin-top:4px;color:var(--muted);font-size:9px;white-space:normal}.history-time{text-align:right;font:700 11px "Manrope",sans-serif;white-space:nowrap}.status-pill{display:inline-flex;margin-bottom:3px;padding:4px 7px;border-radius:999px;background:#edf7f2;color:#167553;font-size:8px;font-weight:800}.status-pill.review{background:#fff3d6;color:#886000}.status-pill.absent{background:var(--red-soft);color:var(--red-deep)}
.month-control{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:8px;margin-bottom:14px}.month-control button{width:34px;height:34px;border-radius:12px;background:#f3f4f5;font-size:20px}.month-control strong{text-align:center;font:800 16px "Manrope",sans-serif;text-transform:capitalize}.weekday-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.weekday-row{margin-bottom:5px}.weekday-row span{text-align:center;font-size:8px;font-weight:800;color:var(--muted)}.calendar-grid{width:100%;overflow:hidden}.calendar-blank{aspect-ratio:1}.calendar-day{position:relative;min-width:0;aspect-ratio:1;border-radius:12px;background:#f5f6f7;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 11px "Manrope",sans-serif}.calendar-day.nonwork{background:var(--red-soft);color:var(--red-deep)}.calendar-day.special-work{background:#efffd1;color:#476800}.calendar-day.today{box-shadow:inset 0 0 0 2px var(--red)}.calendar-day.selected{background:var(--dark);color:#fff;box-shadow:none}.calendar-day .marker{width:4px;height:4px;border-radius:50%;background:currentColor;margin-top:3px}.calendar-detail{margin-top:14px;border-radius:17px;background:#f5f6f7;padding:14px}.calendar-detail strong{display:block;font:800 14px "Manrope",sans-serif}.calendar-detail span{display:block;font-size:9px;color:var(--muted);margin-top:4px}.calendar-detail .work-answer{color:var(--red-deep);font-weight:800;margin-top:8px}.calendar-title-row{align-items:center}
.requests-title-row{justify-content:space-between;align-items:flex-end}.primary-small{min-height:38px;padding:0 13px;border-radius:13px;background:var(--red);color:#fff;font-size:9px;font-weight:800;white-space:nowrap}.primary-small:disabled{opacity:.45}.request-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:9px}.request-summary div{background:#fff;border-radius:17px;padding:13px;text-align:center;box-shadow:var(--shadow-soft)}.request-summary strong{display:block;font:800 22px "Manrope",sans-serif}.request-summary span{display:block;margin-top:2px;color:var(--muted);font-size:8px;font-weight:700}.request-list{display:grid;gap:8px;margin-bottom:72px}.request-card{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;text-align:left;background:#fff;border-radius:20px;padding:15px;box-shadow:var(--shadow-soft);color:var(--text)}.request-card h3{margin:0;font:800 14px "Manrope",sans-serif}.request-card p{margin:5px 0 0;color:var(--muted);font-size:9px}.request-card small{display:block;margin-top:8px;color:#565d64;font-size:9px;overflow-wrap:anywhere}.request-card .status-pill{align-self:start}.request-form{display:grid;gap:15px;border:1px solid var(--line);margin-bottom:72px}.request-form label{display:grid;gap:6px;color:#565d64;font-size:9px;font-weight:800}.request-form input,.request-form select,.request-form textarea{width:100%;min-width:0;border:1px solid #dadde0;border-radius:13px;background:#fafafa;color:var(--text);padding:11px 12px;font:600 12px "DM Sans",sans-serif;outline:0}.request-form input,.request-form select{height:43px}.request-form textarea{resize:vertical;line-height:1.45}.request-form input:focus,.request-form select:focus,.request-form textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,57,53,.1)}.date-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.form-note,.form-error,.server-note{margin:0;font-size:9px;line-height:1.5}.form-note{padding:11px;border-radius:13px;background:#fff5dd;color:#765719}.form-error{color:var(--red-deep);font-weight:700}.server-note{text-align:center;color:var(--muted)}.submit-request{height:46px;border-radius:15px;background:var(--red);color:#fff;font-size:11px;font-weight:800}.submit-request:disabled{background:#ddd;color:#777;cursor:not-allowed}.request-detail{display:grid;gap:13px;border:1px solid var(--line);margin-bottom:72px}.detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.detail-heading h3{font:800 20px "Manrope",sans-serif;margin:0}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.detail-field{padding:12px;border-radius:14px;background:#f5f6f7;min-width:0}.detail-field span{display:block;color:var(--muted);font-size:8px;font-weight:700}.detail-field strong{display:block;margin-top:4px;font-size:11px;overflow-wrap:anywhere}.detail-reason{padding:14px;border-radius:15px;background:#f5f6f7}.detail-reason span{display:block;color:var(--muted);font-size:8px;font-weight:700}.detail-reason p{margin:6px 0 0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.role-app{padding-bottom:28px}.role-head{padding:22px 4px 20px}.role-head h1{margin:5px 0 2px;font:800 clamp(28px,9vw,40px)/1.02 "Manrope",sans-serif;letter-spacing:-1.5px}.role-head p{margin:0;color:var(--muted);font-size:11px}.role-chip{display:inline-flex;margin-bottom:13px;padding:6px 10px;border-radius:999px;background:var(--red-soft);color:var(--red);font-size:8px;font-weight:800;letter-spacing:.08em}.role-dashboard{display:grid;gap:10px}.role-section-title{padding:0 4px 4px}.role-section-title h2{margin:4px 0 0;font:800 22px "Manrope",sans-serif}.role-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.role-bento .role-tile:first-child{grid-column:1/-1}.role-tile{min-height:130px;padding:18px}.role-tile h3{margin:9px 0 6px;font:800 17px/1.1 "Manrope",sans-serif}.role-tile p{margin:0;font-size:10px;line-height:1.5;opacity:.75}.tile-kicker{font-size:8px;font-weight:800;letter-spacing:.08em}.tile.red{background:var(--red);color:#fff}.tile.blue{background:var(--blue);color:#18364b}.owner-inbox-hero{width:100%;min-height:190px;padding:22px;display:flex;align-items:flex-end;justify-content:space-between;text-align:left;color:#151515}.owner-inbox-hero strong{display:block;margin:12px 0 1px;font:800 64px/1 "Manrope",sans-serif}.owner-inbox-hero small{font-size:10px;font-weight:700}.hero-arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#171717;color:#fff;font-size:22px}.owner-request-list{margin-bottom:20px}.owner-request-card .owner-employee{font-weight:800;color:#30343a}.owner-request-card .employee-code{color:var(--muted);font-weight:600}.owner-readonly-note{padding:12px;border-radius:13px;background:#fff5dd;color:#765719;font-size:9px;font-weight:700}
.auth-state{min-height:calc(100vh - 152px);display:grid;place-items:center}.auth-card{background:#fff;border-radius:23px;padding:28px;text-align:center;box-shadow:var(--shadow);width:100%}.auth-card h1{font:800 25px "Manrope",sans-serif;margin:14px 0 5px}.auth-card p{font-size:11px;color:var(--muted);line-height:1.5;margin:0 auto;max-width:280px}.auth-action{display:inline-flex;margin-top:18px;min-height:42px;padding:0 18px;align-items:center;border-radius:14px;background:var(--red);color:#fff;text-decoration:none;font-size:11px;font-weight:800}.loader{display:inline-block;width:28px;height:28px;border-radius:50%;border:3px solid var(--red-soft);border-top-color:var(--red);animation:spin .8s linear infinite}.toast{position:fixed;bottom:82px;left:50%;transform:translateX(-50%) translateY(14px);width:min(calc(100% - 28px),390px);background:#111;color:#fff;padding:12px 14px;border-radius:14px;font-size:10px;font-weight:800;opacity:0;pointer-events:none;transition:.2s;z-index:200;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(.98);opacity:.88}}
@media(min-width:431px){body{padding:20px 0}.app{min-height:860px;border-radius:32px;box-shadow:0 28px 70px rgba(0,0,0,.16);overflow:hidden}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* TAPPY EMPLOYEE ACTIVATION V1 */

.onboarding-view{
  min-height:calc(100dvh - 72px);
  display:grid;
  place-items:center;
  padding:18px 8px max(32px,env(safe-area-inset-bottom));
}
.onboarding-card{
  width:min(100%,430px);
  padding:26px 22px 24px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 55px rgba(20,20,20,.08);
}
.onboarding-card h1{
  margin:0;
  font:800 clamp(26px,8vw,32px)/1.08 Manrope,sans-serif;
  letter-spacing:-.045em;
}
.onboarding-copy{
  margin:10px 0 22px;
  color:#6d6d72;
  font-size:12px;
  line-height:1.55;
}
.onboarding-actions{display:grid;gap:9px}
.onboarding-primary,.onboarding-secondary{
  width:100%;
  min-height:52px;
  padding:11px 16px;
  border-radius:16px;
  font:800 14px Manrope,sans-serif;
}
.onboarding-primary{background:var(--red);color:#fff}
.onboarding-secondary{background:#f1f2f3;color:var(--text);border:1px solid var(--line)}
.onboarding-primary:disabled,.onboarding-secondary:disabled{opacity:.58;cursor:wait}
.onboarding-back{
  width:40px;
  height:40px;
  margin:0 0 18px;
  border-radius:14px;
  background:#f1f2f3;
  color:var(--text);
  font-size:20px;
}
.onboarding-form{display:grid;gap:14px}
.onboarding-form>label{display:grid;gap:6px;color:#565d64;font-size:10px;font-weight:800}
.onboarding-form input:not([type="radio"]):not([type="checkbox"]),
.onboarding-form select,.onboarding-form textarea{
  width:100%;
  min-width:0;
  border:1px solid #dadde0;
  border-radius:13px;
  background:#fafafa;
  color:var(--text);
  padding:11px 12px;
  font:600 13px "DM Sans",sans-serif;
  outline:0;
}
.onboarding-form input:not([type="checkbox"]):not([type="radio"]),.onboarding-form select{height:46px}
.onboarding-form textarea{resize:vertical;line-height:1.45}
.onboarding-form input:focus,.onboarding-form select:focus,.onboarding-form textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,57,53,.1)}
.onboarding-form label small{color:var(--muted);font-weight:600}
.registration-choice-field{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.registration-choice-field legend{grid-column:1/-1;margin-bottom:1px;color:#565d64;font-size:10px;font-weight:800}
.registration-choice-field label{position:relative;min-height:52px;display:grid;place-items:center;border:1px solid #dadde0;border-radius:14px;background:#fafafa;font-size:12px;font-weight:800;cursor:pointer}
.registration-choice-field input{position:absolute;opacity:0;pointer-events:none}
.registration-choice-field label:has(input:checked){border-color:var(--red);background:var(--red-soft);color:var(--red-deep)}
.onboarding-acknowledgement{grid-template-columns:20px minmax(0,1fr)!important;align-items:start;gap:9px!important;padding:11px;border-radius:13px;background:#fff5dd;color:#765719!important;line-height:1.45}
.onboarding-acknowledgement input{width:18px;height:18px;margin:0;accent-color:var(--red)}
.onboarding-error{margin:0;color:var(--red-deep);font-size:11px;font-weight:700;line-height:1.45}
.onboarding-state{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.registration-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;margin:0 0 20px;padding:14px;border-radius:16px;background:#f5f6f7;font-size:10px}
.registration-summary dt{color:var(--muted)}
.registration-summary dd{margin:0;text-align:right;font-weight:800;overflow-wrap:anywhere}
.choice-actions{margin-top:24px}

.activation-view {
  min-height: calc(100dvh - 72px);
  display: grid;
  place-items: center;
  padding: 24px 18px 40px;
}

.activation-view[hidden] {
  display: none;
}

.activation-card {
  box-sizing: border-box;
  width: min(100%, 430px);
  padding: 28px 24px 24px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(20, 20, 20, .08);
}

.activation-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #e53935;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.activation-card h1 {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.activation-copy {
  margin: 10px 0 24px;
  color: #6d6d72;
  line-height: 1.5;
}

.activation-card label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

#activationCode {
  box-sizing: border-box;
  width: 100%;
  height: 58px;
  padding: 0 16px;
  border: 1px solid #dedee2;
  border-radius: 16px;
  outline: none;
  background: #f7f7f8;
  font-family: Manrope, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#activationCode:focus {
  border-color: #e53935;
  background: #fff;
}

.activation-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  border: 0;
  border-radius: 16px;
  background: #e53935;
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.activation-submit:disabled {
  opacity: .6;
  cursor: wait;
}

.activation-error {
  margin: 10px 2px 0;
  color: #c62828;
  font-size: 13px;
  line-height: 1.4;
}

.activation-staff {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 22px;
  color: #85858b;
  font-size: 12px;
}

.activation-staff a {
  color: #333;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 480px) {
  .onboarding-view{padding:12px 2px max(26px,env(safe-area-inset-bottom))}
  .onboarding-card{padding:23px 18px 21px;border-radius:24px}
  .activation-view {
    padding: 18px 14px 32px;
  }

  .activation-card {
    padding: 24px 20px 22px;
    border-radius: 24px;
  }
}

/* Owner Device Management */
.owner-device-open{
  width:100%;
  border:0;
  text-align:left;
  cursor:pointer;
}
.owner-device-tools{
  position:sticky;
  top:8px;
  z-index:4;
  padding:4px 0 2px;
}
.owner-device-tools input{
  width:100%;
  height:46px;
  padding:0 15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  color:var(--text);
  font:600 11px "DM Sans",sans-serif;
  outline:0;
  box-shadow:var(--shadow-soft);
}
.owner-device-tools input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(229,57,53,.1);
}
.owner-device-list{
  display:grid;
  gap:8px;
  padding-bottom:24px;
}
.owner-device-card{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:15px;
  border:0;
  border-radius:20px;
  background:#fff;
  color:var(--text);
  text-align:left;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
}
.owner-device-card h3{
  margin:0;
  font:800 14px "Manrope",sans-serif;
}
.owner-device-card p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}
.owner-device-card small{
  display:block;
  margin-top:8px;
  color:#666d73;
  font-size:8px;
}
.owner-device-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  padding:7px 9px;
  border-radius:999px;
  font-size:8px;
  font-weight:800;
}
.owner-device-status.active{
  background:#e9f7df;
  color:#39721e;
}
.owner-device-status.inactive{
  background:#f0f1f2;
  color:#70767c;
}
.owner-device-detail{
  display:grid;
  gap:12px;
  border:1px solid var(--line);
}
#ownerDeviceDetailBody{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.owner-device-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:4px;
}
.owner-device-actions button{
  min-height:45px;
  padding:10px 12px;
  border:0;
  border-radius:14px;
  font-size:9px;
  font-weight:800;
}
.owner-device-actions button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.owner-device-danger{
  background:#fff0ef;
  color:var(--red-deep);
}
.owner-device-primary{
  background:var(--red);
  color:#fff;
}
.owner-activation-result{
  margin-top:0;margin-left:4px;
  padding:18px;
  border-radius:18px;
  background:#171717;
  color:#fff;
  text-align:center;
}
.owner-activation-result strong{
  display:block;
  margin:10px 0 5px;
  font:800 clamp(27px,9vw,38px)/1 "Manrope",sans-serif;
  letter-spacing:.08em;
}
.owner-activation-result p{
  margin:0;
  color:#c9c9c9;
  font-size:8px;
  line-height:1.5;
}
.owner-people-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  padding:5px;
  border-radius:16px;
  background:#e9eaec;
}
.owner-people-tabs button{
  min-height:40px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#696f74;
  font-size:10px;
  font-weight:800;
}
.owner-people-tabs button.active{background:#fff;color:var(--text);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.owner-people-tabs span{
  display:inline-grid;
  min-width:20px;
  min-height:20px;
  margin-left:4px;
  place-items:center;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:8px;
}
.owner-registration-tools,.owner-device-tools{display:grid;gap:7px;margin-top:2px}
.owner-registration-tools input,.owner-registration-filters select{
  width:100%;min-width:0;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--text);font:700 9px "DM Sans",sans-serif;outline:0
}
.owner-registration-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#ownerDevicePane .owner-registration-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
.owner-registration-list{display:grid;gap:8px;padding-bottom:86px}
.owner-registration-card{display:grid;gap:9px;padding:15px;border-radius:20px;background:#fff;box-shadow:var(--shadow-soft)}
.owner-registration-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.owner-registration-card h3{margin:0;font:800 14px "Manrope",sans-serif}
.owner-registration-card p,.owner-registration-card small{margin:0;color:var(--muted);font-size:9px;font-weight:650}
.owner-registration-type,.owner-registration-status{display:inline-flex;margin-top:5px;padding:5px 8px;border-radius:999px;background:#f0f1f2;color:#626970;font-size:7px;font-weight:800}
.owner-registration-status{margin:0;text-align:center;white-space:normal}
.owner-registration-status.status-pending,.owner-registration-status.status-approved{background:#fff0cf;color:#765719}
.owner-registration-status.status-finalized{background:#e9f7df;color:#39721e}
.owner-registration-status.status-rejected{background:#fff0ef;color:var(--red-deep)}
.owner-registration-open,.owner-load-more{min-height:40px;border:0;border-radius:12px;background:var(--dark);color:#fff;font-size:9px;font-weight:800}
.owner-load-more{width:100%;margin:-72px 0 86px}
.owner-registration-conflict{padding:9px 10px;border-radius:11px;background:#fff0ef;color:var(--red-deep)!important;font-weight:800!important}
.owner-registration-conflict-block{display:grid;gap:9px;margin:0 0 8px;font-size:10px;line-height:1.45}
.owner-registration-conflict-block button{min-height:38px;border:0;border-radius:11px;background:#fff;color:var(--red-deep);font-size:9px;font-weight:800}
#ownerRegistrationDetail{display:grid;gap:9px}
.owner-registration-section,.owner-canonical-form{display:grid;gap:11px;border:1px solid var(--line)}
.owner-registration-section h3,.owner-canonical-form h3{margin:0;font:800 11px "Manrope",sans-serif;letter-spacing:.05em}
.owner-registration-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.owner-canonical-form label{display:grid;gap:5px;color:#5e6469;font-size:8px;font-weight:800}
.owner-canonical-form input,.owner-canonical-form select{width:100%;min-width:0;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:12px;background:#fafafa;color:var(--text);font:650 10px "DM Sans",sans-serif}
.owner-registration-actions{position:sticky;bottom:88px;z-index:12;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:9px;border-radius:17px;background:rgba(255,255,255,.95);box-shadow:0 10px 28px rgba(0,0,0,.14);backdrop-filter:blur(12px)}
.owner-registration-actions button{min-height:46px;border:0;border-radius:13px;font-size:10px;font-weight:800}
.owner-activation-result img{display:block;width:min(220px,100%);height:auto;margin:14px auto 8px;border:8px solid #fff;border-radius:12px;background:#fff}
.owner-activation-copy{min-height:40px;margin-top:8px;padding:0 14px;border:1px solid #555;border-radius:12px;background:#fff;color:#171717;font-size:9px;font-weight:800}
#ownerDevicePane .owner-device-list{padding-bottom:86px}
@media(max-width:420px){
  #ownerDeviceDetailBody,
  .owner-device-actions,
  .owner-registration-data{
    grid-template-columns:1fr;
  }
  .owner-registration-filters{grid-template-columns:1fr 1fr}
  .owner-registration-filters select:last-child{grid-column:1/-1}
}

.owner-decision-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.owner-decision-actions button{
  min-height:46px;
  border-radius:15px;
  font-size:10px;
  font-weight:800;
}
.owner-decision-actions button:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.owner-decision-reject{
  background:#fff0ef;
  color:var(--red-deep);
  border:1px solid #f4cfcc;
}
.owner-decision-approve{
  background:var(--red);
  color:#fff;
}
.owner-decision-feedback{
  margin:0;
  padding:11px 12px;
  border-radius:13px;
  background:#fff0ef;
  color:var(--red-deep);
  font-size:9px;
  font-weight:700;
  line-height:1.5;
}

.admin-decision-open{width:100%;border:0;text-align:left;cursor:pointer}.admin-decision-card{cursor:default}.admin-decision-card .status-pill{flex:0 0 auto}

.payslip-list,.debt-list{display:grid;gap:9px;margin-bottom:72px}.payslip-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:17px;border-radius:20px;background:#fff;box-shadow:var(--shadow-soft)}.payslip-card h3{margin:5px 0 4px;font:800 18px "Manrope",sans-serif;text-transform:capitalize}.payslip-card p{margin:0;color:var(--muted);font-size:9px;line-height:1.5}.payslip-open{min-height:40px;padding:0 13px;border-radius:13px;background:var(--red);color:#fff;font-size:9px;font-weight:800}.payslip-open:disabled{opacity:.5;cursor:not-allowed}.debt-balance-card{padding:20px;margin-bottom:9px}.debt-balance-card>strong{display:block;margin:9px 0 3px;font:800 31px "Manrope",sans-serif}.debt-balance-card small{color:#bbb;font-size:9px}.debt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:15px;border-radius:18px;background:#fff;box-shadow:var(--shadow-soft)}.debt-row>div:first-child strong,.debt-row>div:first-child span,.debt-amount strong,.debt-amount span{display:block}.debt-row>div:first-child strong{font-size:11px}.debt-row>div:first-child span{margin-top:5px;color:var(--muted);font-size:8px}.debt-amount{text-align:right}.debt-amount strong{font:800 12px "Manrope",sans-serif}.debt-amount.increase strong{color:var(--red-deep)}.debt-amount.decrease strong{color:#167553}.debt-amount span{margin-top:4px;color:var(--muted);font-size:8px}
.late-action{min-height:96px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;text-align:left}.late-action .tile-kicker{display:block;color:#ffd6d3}.late-action strong{display:block;margin-top:7px;font:800 24px/1 "Manrope",sans-serif;letter-spacing:-.045em}.late-action small{display:block;margin-top:6px;font-size:9px;opacity:.82}.action-arrow{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:20px}.request-action-grid,.secondary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.request-action,.secondary-action{min-width:0;display:flex;flex-direction:column;justify-content:space-between;text-align:left}.request-action{min-height:128px}.secondary-action{min-height:108px}.request-action .chip,.secondary-action .chip{display:inline-flex;width:max-content;max-width:100%;height:24px;align-items:center;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.68);font-size:8px;font-weight:800}.request-action strong,.secondary-action strong{display:block;font:800 17px/1.05 "Manrope",sans-serif;letter-spacing:-.04em}.request-action small,.secondary-action small{display:block;margin-top:5px;font-size:9px;line-height:1.35;opacity:.68}.home-debt-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;padding:20px}.home-debt-copy{min-width:0}.home-debt-copy>small{display:block;margin:10px 0 4px;color:#bbb;font-size:9px}.home-debt-copy>strong{display:block;max-width:100%;font:800 clamp(23px,8vw,34px)/1.08 "Manrope",sans-serif;letter-spacing:-.05em;overflow-wrap:anywhere}.home-debt-actions{display:grid;gap:7px;min-width:116px}.debt-primary-action,.debt-secondary-action,.profile-change-action{min-height:40px;padding:0 13px;border-radius:13px;font-size:9px;font-weight:800}.debt-primary-action{background:var(--red);color:#fff}.debt-secondary-action{background:rgba(255,255,255,.12);color:#fff}.debt-detail-action{width:100%;margin-top:17px}.secondary-grid{margin-bottom:72px}.profile-card{display:grid;justify-items:center;text-align:center;border:1px solid var(--line)}.profile-avatar{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--red);color:#fff;font:800 27px "Manrope",sans-serif;box-shadow:0 12px 24px rgba(229,57,53,.2)}.profile-identity h3{margin:13px 0 3px;font:800 22px "Manrope",sans-serif;letter-spacing:-.04em}.profile-identity p{margin:0;color:var(--muted);font-size:10px}.profile-training-chip{display:inline-flex;margin-top:8px;min-height:22px;align-items:center;padding:0 9px;border-radius:999px;background:#fff0ef;color:var(--red-deep);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.profile-training-chip[hidden]{display:none}.profile-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px;text-align:left}.profile-grid>div{min-width:0;padding:12px;border-radius:15px;background:#f6f6f7}.profile-grid span,.profile-grid strong{display:block}.profile-grid span{color:var(--muted);font-size:8px;font-weight:700}.profile-grid strong{margin-top:5px;font-size:10px;overflow-wrap:anywhere}.profile-note{margin:16px 0 12px;color:var(--muted);font-size:9px;line-height:1.55}.profile-change-action{width:100%;background:var(--dark);color:#fff}.profile-panel{margin-bottom:72px}
@media(max-width:350px){.home-debt-card{grid-template-columns:1fr}.home-debt-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.request-action-grid,.secondary-grid{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr}}

/* Employee mobile navigation and native control contract */
.app{padding-bottom:20px}
#authenticatedApp{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
.bottom{bottom:max(10px,env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(82px + env(safe-area-inset-bottom,0px))}
.request-form select{
  appearance:none;
  -webkit-appearance:none;
  height:46px;
  border:1px solid #dadde0;
  border-radius:13px;
  padding:0 42px 0 13px;
  background-color:#fafafa;
  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='%23565d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:16px;
  color:var(--text);
  font:600 12px "DM Sans",sans-serif;
}
.request-form input:not([type="file"]),.request-form textarea{
  width:100%;min-width:0;border:1px solid #dadde0;border-radius:13px;background:#fafafa;color:var(--text);
  padding:0 13px;font:600 12px "DM Sans",sans-serif;outline:0
}
.request-form input:not([type="file"]){height:46px}
.request-form textarea{min-height:92px;padding-block:12px;line-height:1.45;resize:vertical}
.request-form input:focus-visible,.request-form textarea:focus-visible{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,57,53,.12);outline:0}
.request-form input:disabled,.request-form textarea:disabled{border-color:#e4e5e7;background:#eff0f1;color:#8a8f95;cursor:not-allowed;opacity:.8}
.request-form input[type="date"],.request-form input[type="time"]{color-scheme:light}

/* Employee UI Revision 1: request type dropdown visual contract. */
#authenticatedApp #requestType{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:46px;
  min-height:46px;
  padding:0 42px 0 13px;
  border:1px solid #dadde0;
  border-radius:13px;
  background-color:#fafafa;
  color:var(--text);
  font:600 12px "DM Sans",sans-serif;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:
    calc(100% - 17px) 20px,
    calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  outline:0;
}
#authenticatedApp #requestType:focus-visible{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
}
#authenticatedApp #requestType:disabled{
  border-color:#e4e5e7;
  background-color:#eff0f1;
  color:#8a8f95;
  cursor:not-allowed;
  opacity:.8;
}

/* Employee Revision 2: native request controls share one compact control family. */
#authenticatedApp .request-form select,
#authenticatedApp .request-form input[type="date"],
#authenticatedApp .request-form input[type="time"]{
  width:100%;
  min-width:0;
  height:46px;
  border:1px solid #dadde0;
  border-radius:13px;
  background-color:#fafafa;
  color:var(--text);
  padding-block:0;
  padding-left:13px;
  font:600 12px "DM Sans",sans-serif;
  line-height:1.2;
  outline:0;
}
#authenticatedApp .request-form select{padding-right:42px}
#authenticatedApp .request-form input[type="date"],
#authenticatedApp .request-form input[type="time"]{padding-right:11px}
#authenticatedApp .request-form select:focus-visible,
#authenticatedApp .request-form input[type="date"]:focus-visible,
#authenticatedApp .request-form input[type="time"]:focus-visible{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
  outline:0;
}

.topbar{flex:0 0 60px;min-height:60px}.brand{min-width:0;flex:1 1 auto}.brand-logo,.brand-copy{flex:0 0 auto}.topbar-actions{display:flex;flex:0 0 auto;align-items:center;gap:8px}.notification-button{position:relative;flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:#fff;color:var(--text);box-shadow:var(--shadow-soft);display:grid;place-items:center}.notification-badge{position:absolute;right:-3px;top:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:8px;font-weight:800;line-height:17px}.notification-dialog{width:min(calc(100% - 24px),406px);max-height:78vh;border:0;border-radius:24px;padding:0;background:#fff;color:var(--text);box-shadow:0 24px 70px rgba(25,30,35,.25)}.notification-dialog::backdrop{background:rgba(25,30,35,.42)}.notification-dialog-body{padding:18px;display:grid;gap:12px}.notification-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.notification-dialog-head h2{margin:3px 0 0;font:800 20px "Manrope",sans-serif}.notification-dialog-head>button{width:34px;height:34px;border-radius:11px;background:#f1f2f3}.notification-permission{min-height:40px;border-radius:13px;background:var(--red);color:#fff;font-size:10px;font-weight:800}.notification-permission:disabled{background:#ddd;color:#777}.notification-state{margin:0;color:var(--muted);font-size:10px}.notification-list{display:grid;gap:8px;overflow:auto}.notification-item{display:grid;gap:4px;width:100%;padding:12px;border-radius:15px;background:#f4f5f6;text-align:left;color:var(--text)}.notification-item.unread{background:var(--red-soft);box-shadow:inset 3px 0 0 var(--red)}.notification-item strong{font-size:11px}.notification-item span{font-size:10px;line-height:1.45}.notification-item small{color:var(--muted);font-size:8px}

.employee-info-card{display:grid;gap:11px}.employee-info-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.employee-info-head small{color:var(--muted);font-size:8px}.employee-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px}.employee-info-grid>div{min-width:0;padding:11px;border-radius:15px;background:#f5f6f7}.employee-info-grid span{display:block;color:var(--muted);font-size:8px;font-weight:700}.employee-info-grid strong{display:block;margin-top:5px;font:800 12px/1.25 "Manrope",sans-serif;overflow-wrap:anywhere}.calendar-day.personal:after{content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--red)}.calendar-day.selected.personal:after{background:var(--lime)}.calendar-detail .personal-answer{margin-top:8px;padding-top:8px;border-top:1px solid #ddd;color:#5b3a00;font-weight:800}
.owner-assisted-open{width:100%;text-align:left}
.owner-assisted-form{display:grid;gap:14px;max-width:560px;margin-inline:auto}
.owner-assisted-form label{display:grid;gap:7px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.owner-assisted-form select,.owner-assisted-form textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:14px;background:#f7f7f8;color:var(--dark);font:600 12px/1.4 "Manrope",sans-serif;padding:12px}
.owner-assisted-form textarea{min-height:104px;resize:vertical;text-transform:none}
.owner-assisted-note{margin:0;color:var(--muted);font-size:9px;line-height:1.55}
.owner-assisted-result{padding:12px;border-radius:14px;background:#e9f8ef;color:#176b3a;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.request-form select:focus-visible{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
  outline:0;
}
.request-form select:disabled{
  border-color:#e4e5e7;
  background-color:#eff0f1;
  color:#8a8f95;
  cursor:not-allowed;
  opacity:.8;
}
.profile-change-hint{margin:0 0 12px;color:var(--muted);font-size:9px;line-height:1.5}
.profile-change-group{display:grid;gap:13px}
.profile-change-group h3{margin:0;font:800 17px "Manrope",sans-serif;letter-spacing:-.03em}
.profile-change-actions{width:100%;display:grid;gap:8px}
.profile-change-action{height:auto;min-height:56px;padding:12px 14px;text-align:left;display:grid;gap:3px}
.profile-change-action span{font-size:10px;font-weight:800}
.profile-change-action small{font-size:8px;font-weight:600;opacity:.68}
.profile-change-action.secondary{background:#f1f2f3;color:var(--text);border:1px solid var(--line)}
.profile-content{width:100%;display:grid;justify-items:center}
.profile-info-card{margin-top:10px;text-align:left}
.profile-change-category-list{display:grid;gap:10px}
.profile-category-choice{width:100%;min-height:88px;display:grid;align-content:center;gap:5px;text-align:left;border:1px solid var(--line)}
.profile-category-choice span{font:800 16px "Manrope",sans-serif}
.profile-category-choice small{color:var(--muted);font-size:9px;line-height:1.45}
.tap-undo{position:relative;z-index:2;width:100%;margin:0 auto 4px;padding:10px 12px;border-radius:14px;background:#fff5dd;color:#765719;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;font-weight:700}.tap-undo button{flex:0 0 auto;min-height:34px;padding:0 10px;border-radius:11px;background:var(--dark);color:#fff;font-size:8px;font-weight:800}.tap-undo button:disabled{opacity:.5}.selfie-dialog{width:min(calc(100% - 28px),390px);padding:0;border:0;border-radius:24px;background:#fff;color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.25)}.selfie-dialog::backdrop{background:rgba(18,20,22,.68);backdrop-filter:blur(4px)}.selfie-dialog-body{padding:20px}.selfie-dialog h2{margin:7px 0 5px;font:800 24px "Manrope",sans-serif}.selfie-dialog p{margin:0 0 13px;color:var(--muted);font-size:10px;line-height:1.5}.selfie-dialog video,.selfie-dialog #selfiePhotoPreview{display:block;width:100%;aspect-ratio:4/3;border-radius:17px;background:#111;object-fit:cover}.selfie-dialog video{transform:scaleX(-1)}.selfie-dialog.document-camera video{transform:none}.selfie-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.selfie-actions button{min-height:44px;border-radius:14px;background:#eff0f1;color:var(--text);font-size:10px;font-weight:800}.selfie-actions #selfieCapture,.selfie-actions #selfieConfirm{background:var(--red);color:#fff}

.late-date-choice{grid-column:1/-1;display:grid;gap:7px}
.late-date-label{font-size:9px;font-weight:800;color:#565d64}
.late-date-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.late-date-option{min-width:0;min-height:40px;padding:6px;border-radius:12px;background:#f3f4f5;color:#555;font-size:9px;font-weight:800}
.late-date-option.active{background:var(--dark);color:#fff}
@media(max-width:350px){.late-date-options{grid-template-columns:1fr}}

.brand-logo{
  width:36px;
  height:36px;
  object-fit:contain;
  flex:0 0 36px;
}

.brand-copy{
  display:flex;
  flex-direction:row;
  justify-content:center;
  line-height:1;
}

.brand-copy strong{
  font:800 16px "Manrope",sans-serif;
  letter-spacing:-.035em;
}

.brand-copy small{
  margin-top:0;margin-left:4px;
  font:600 8px "DM Sans",sans-serif;
  color:var(--muted);
  letter-spacing:.01em;
}
/* TAPPY header wordmark refinement */
.brand{
  gap:9px;
}

.brand-logo{
  width:36px;
  height:36px;
  flex:0 0 36px;
  object-fit:contain;
}

.brand-copy{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  line-height:1;
  white-space:nowrap;
}

.brand-copy strong{
  display:block;
  font:800 16px/1 "Manrope",sans-serif;
  letter-spacing:-.035em;
}

.brand-copy small{
  display:block;
  margin:0;
  font:600 10px/1 "DM Sans",sans-serif;
  color:#7f848a;
  letter-spacing:0;
}

/* Owner UAT revision 1 */
.role-app{padding-bottom:92px}.role-context-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.owner-notification-button{position:relative;width:42px;height:42px;border-radius:14px;background:#fff;box-shadow:var(--shadow-soft);font-size:18px}.owner-notification-button span:last-child{position:absolute;right:-3px;top:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:9px;font-weight:800;line-height:18px}.owner-inbox-hero{min-height:132px;align-items:center}.owner-inbox-hero strong{margin:6px 0 1px;font-size:48px}
.owner-assisted-form input,.owner-assisted-form select,.owner-assisted-form textarea,.owner-device-tools input{width:100%;min-width:0;border:1px solid #dadde0;border-radius:13px;background:#fafafa;color:var(--text);padding:11px 12px;font:600 12px "DM Sans",sans-serif;outline:0}.owner-assisted-form input,.owner-assisted-form select,.owner-device-tools input{height:43px}.owner-assisted-form input:focus,.owner-assisted-form select:focus,.owner-assisted-form textarea:focus,.owner-device-tools input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,57,53,.1)}
.owner-picker-results{margin-top:-9px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.owner-picker-results button{display:block;width:100%;padding:12px;text-align:left;background:#fff;border-bottom:1px solid #eee;font-size:10px;font-weight:700}.owner-picker-results button:last-child{border-bottom:0}.owner-picker-results p,.owner-picker-selected{margin:0;padding:10px;color:var(--muted);font-size:9px}.owner-picker-selected{padding:0}
.owner-inbox-filters{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}.owner-inbox-filters button{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:12px;background:#fff;color:var(--muted);font-size:9px;font-weight:800}.owner-inbox-filters button.active{background:var(--dark);color:#fff}
.owner-calendar-day{padding:3px;gap:2px;aspect-ratio:.82}.owner-calendar-day small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:6px;font-weight:700}.owner-calendar-day span{font-size:7px;color:var(--muted)}.owner-calendar-day.holiday,.owner-calendar-day.off_day,.owner-calendar-day.weekly_rest,.owner-calendar-day.owner-nonwork:not(.selected){background:var(--red-soft);color:var(--red-deep)}.owner-calendar-detail{display:grid;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.owner-calendar-detail h3{margin:0 0 4px;font:800 14px "Manrope",sans-serif}.owner-calendar-employee{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:11px;border-radius:13px;background:#f5f6f7}.owner-calendar-employee strong{font-size:10px;overflow-wrap:anywhere}.owner-calendar-employee span{font-size:9px;font-weight:800}.owner-calendar-employee small{grid-column:1/-1;color:var(--muted);font-size:8px}
.owner-calendar-day.admin-nonwork:not(.selected){background:var(--red-soft);color:var(--red-deep)}
#adminBottomNav{grid-template-columns:repeat(3,minmax(0,1fr))}
.request-cancel-button{min-height:44px;border-radius:14px;background:var(--red-soft);color:var(--red-deep);font-size:10px;font-weight:800}.request-cancel-button:disabled{opacity:.5}
.overtime-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;padding:0;margin:0}.overtime-choices legend{grid-column:1/-1;margin-bottom:6px;color:var(--muted);font-size:9px;font-weight:800}.overtime-choices label{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border-radius:13px;background:#f4f5f6;font-size:11px;font-weight:800}.overtime-description{display:grid;gap:6px;color:#565d64;font-size:9px;font-weight:800}.overtime-description textarea{width:100%;min-height:88px;resize:vertical;border:1px solid #dadde0;border-radius:13px;background:#fafafa;padding:11px 12px;font:600 12px "DM Sans",sans-serif}.overtime-description textarea:disabled{opacity:.55}.overtime-dialog .form-error{margin:0}
.overtime-selfie{display:grid;gap:8px;padding:11px;border-radius:14px;background:#f5f6f7}.overtime-selfie span{font-size:9px;font-weight:800;color:#565d64}.overtime-selfie img{width:100%;aspect-ratio:4/3;border-radius:12px;object-fit:cover;background:#111}.overtime-selfie button{min-height:42px;border-radius:12px;background:var(--dark);color:#fff;font-size:9px;font-weight:800}.overtime-selfie button:disabled{opacity:.45}.overtime-selfie small{color:var(--muted);font-size:8px;line-height:1.4}.overtime-selfie small.error{color:var(--red-deep);font-weight:700}
.owner-workspace-link{display:grid;gap:7px;color:inherit;text-decoration:none}.owner-workspace-link strong{font:800 18px "Manrope",sans-serif}.owner-workspace-link small{color:var(--muted);font-size:9px}
.owner-bottom{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:65;width:min(calc(100% - 20px),410px);min-height:66px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px;border:1px solid #dedede;border-radius:22px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);box-shadow:0 14px 30px rgba(0,0,0,.12)}.owner-bottom button{min-width:0;border-radius:16px;background:transparent;color:#777;font-size:7px;font-weight:800;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center}.owner-bottom button span{font-size:16px;line-height:1}.owner-bottom button.active{background:var(--dark);color:#fff}

/* Admin UAT revision 1 */
.admin-summary-card{width:100%;min-height:132px;display:flex;align-items:center;justify-content:space-between;text-align:left;color:var(--text)}.admin-summary-card strong{display:block;margin:6px 0 1px;font:800 48px/1 "Manrope",sans-serif}.admin-summary-card small{font-size:10px;font-weight:700}.admin-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.admin-summary-grid article{min-width:0;padding:13px;text-align:center}.admin-summary-grid span{display:block;color:var(--muted);font-size:8px;font-weight:700}.admin-summary-grid strong{display:block;margin-top:5px;font:800 22px "Manrope",sans-serif}.admin-operational-action{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.admin-action-button{min-height:38px;max-width:132px;padding:7px 10px;border-radius:12px;background:var(--red);color:#fff;font-size:8px;font-weight:800;line-height:1.25}.admin-action-button:disabled{opacity:.5}.role-app input[type="file"]{font:600 10px "DM Sans",sans-serif}.role-app input[type="file"]::file-selector-button{min-height:40px;margin-right:8px;padding:0 12px;border:0;border-radius:12px;background:var(--dark);color:#fff;font:800 9px "DM Sans",sans-serif}

/* Admin consolidated operational follow-up */
.admin-follow-up-filters{display:flex;gap:7px;max-width:100%;overflow-x:auto;padding:1px 2px 10px;scrollbar-width:none}.admin-follow-up-filters::-webkit-scrollbar{display:none}.admin-follow-up-filters button{flex:0 0 auto;min-height:38px;padding:0 11px;border:1px solid var(--line);border-radius:13px;background:#fff;color:#62676d;font-size:9px;font-weight:800;white-space:nowrap}.admin-follow-up-filters button span{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:5px;padding:0 5px;border-radius:999px;background:#eef0f2;color:#4d5359;font-size:8px}.admin-follow-up-filters button.active{border-color:var(--dark);background:var(--dark);color:#fff}.admin-follow-up-filters button.active span{background:rgba(255,255,255,.18);color:#fff}.admin-follow-up-card{grid-template-columns:minmax(0,1fr);gap:12px;overflow:hidden}.admin-follow-up-main{min-width:0}.admin-follow-up-name{max-width:100%;font:800 17px/1.25 "Manrope",sans-serif!important;overflow-wrap:anywhere}.admin-follow-up-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}.admin-follow-up-date{display:inline!important;margin:0!important;color:var(--muted)!important;font-size:9px!important}.admin-type-chip{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:800;line-height:1.2}.admin-type-cuti{background:var(--blue);color:#24577b}.admin-type-sakit{background:var(--red-soft);color:var(--red-deep)}.admin-type-izin,.admin-type-izin-terlambat{background:#fff0cf;color:#855c00}.admin-type-kasbon{background:#efffc0;color:#486500}.admin-follow-up-amount{margin:10px 0 0!important;color:var(--text)!important;font:800 15px "Manrope",sans-serif!important}.admin-follow-up-card .admin-operational-action{min-width:0;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.admin-follow-up-card .status-pill{margin:0}.admin-follow-up-card .admin-action-button{min-height:44px;max-width:100%;padding:8px 13px;font-size:9px}

/* TAPPY shared notification icon */
.notification-icon{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
}
.notification-button .notification-icon{
  width:21px;
  height:21px;
}
.owner-notification-button .notification-icon{
  width:23px;
  height:23px;
  margin:auto;
}


/* TAPPY GLOBAL UI POLISH 20260919 */

/*
  Shared native controls.
  Visual only: no form behavior or role permissions are changed.
*/
#authenticatedApp select,
#authenticatedApp input[type="date"],
#authenticatedApp input[type="time"],
#roleApp select,
#roleApp input[type="date"],
#roleApp input[type="time"]{
  box-sizing:border-box;
  width:100%;
  min-height:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:13px;
  background-color:#fff;
  color:var(--ink);
  font:700 11px "DM Sans",sans-serif;
  line-height:1.2;
  padding:0 38px 0 13px;
  outline:none;
}

#authenticatedApp select,
#roleApp select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:
    calc(100% - 17px) 20px,
    calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

#authenticatedApp select:focus-visible,
#authenticatedApp input[type="date"]:focus-visible,
#authenticatedApp input[type="time"]:focus-visible,
#roleApp select:focus-visible,
#roleApp input[type="date"]:focus-visible,
#roleApp input[type="time"]:focus-visible{
  border-color:var(--dark);
  box-shadow:0 0 0 3px rgba(17,17,17,.07);
}

#authenticatedApp select:disabled,
#authenticatedApp input[type="date"]:disabled,
#authenticatedApp input[type="time"]:disabled,
#roleApp select:disabled,
#roleApp input[type="date"]:disabled,
#roleApp input[type="time"]:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/*
  Shared button typography/alignment only.
  Existing semantic backgrounds, borders and sizing remain owned
  by their current component classes.
*/
#authenticatedApp button,
#roleApp button,
.notification-dialog button{
  font-family:"DM Sans",sans-serif;
  text-align:center;
}

/* Employee Profile CTA */
#profileChangeRequest{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/*
  Employee Home keeps only the fixed-nav safety reserve.
  The global authenticatedApp reserve above is intentionally compact.
*/
#homePanel{
  margin-bottom:0;
  padding-bottom:0;
}


/* Employee UI Revision 1B: custom request type dropdown. */
#authenticatedApp .request-type-native{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#authenticatedApp .tappy-select{
  position:relative;
  width:100%;
}

#authenticatedApp .tappy-select-trigger{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:46px;
  padding:0 42px 0 13px;
  border:1px solid #dadde0;
  border-radius:13px;
  background:#fafafa;
  color:var(--text);
  font:600 12px "DM Sans",sans-serif;
  text-align:left;
  box-shadow:none;
}

#authenticatedApp .tappy-select-trigger:focus-visible,
#authenticatedApp .tappy-select.open .tappy-select-trigger{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
  outline:0;
}

#authenticatedApp .tappy-select-chevron{
  position:absolute;
  right:15px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-65%) rotate(45deg);
  transition:transform .15s ease;
}

#authenticatedApp .tappy-select.open .tappy-select-chevron{
  transform:translateY(-25%) rotate(225deg);
}

#authenticatedApp .tappy-select-menu{
  position:absolute;
  z-index:40;
  top:calc(100% + 6px);
  left:0;
  right:0;
  padding:5px;
  border:1px solid #e1e3e5;
  border-radius:13px;
  background:#fff;
  box-shadow:0 14px 34px rgba(25,30,35,.14);
}

#authenticatedApp .tappy-select-menu[hidden]{
  display:none;
}

#authenticatedApp .tappy-select-option{
  display:flex;
  align-items:center;
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  font:600 12px "DM Sans",sans-serif;
  text-align:left;
  box-shadow:none;
}

#authenticatedApp .tappy-select-option:hover,
#authenticatedApp .tappy-select-option:focus-visible{
  background:#f2f3f4;
  outline:0;
}

#authenticatedApp .tappy-select-option.selected{
  background:var(--red-soft);
  color:var(--red);
  font-weight:800;
}


/* Employee UI Revision 2: unified employee calendar visual. */
#calendarPanel .calendar-card{
  min-height:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

#calendarPanel .month-control{
  grid-template-columns:40px minmax(0,1fr) 40px;
  gap:10px;
  margin-bottom:16px;
}

#calendarPanel .month-control button{
  width:40px;
  height:40px;
  border:1px solid #e3e4e6;
  border-radius:13px;
  background:#f5f6f7;
  color:var(--text);
  font:700 22px/1 "Manrope",sans-serif;
  display:grid;
  place-items:center;
}

#calendarPanel .month-control button:active{
  transform:scale(.96);
}

#calendarPanel .month-control strong{
  text-align:center;
  font:800 16px/1.15 "Manrope",sans-serif;
  letter-spacing:-.02em;
  text-transform:capitalize;
}

#calendarPanel .weekday-row{
  margin-bottom:7px;
}

#calendarPanel .weekday-row,
#calendarPanel .calendar-grid{
  gap:5px;
}

#calendarPanel .weekday-row span{
  color:#8a8f95;
  font:800 8px/1 "DM Sans",sans-serif;
}

#calendarPanel .calendar-day{
  aspect-ratio:1;
  min-width:0;
  border:1px solid transparent;
  border-radius:13px;
  background:#f5f6f7;
  color:var(--text);
  font:800 11px/1 "Manrope",sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}

#calendarPanel button.calendar-day:active{
  transform:scale(.95);
}

#calendarPanel .calendar-day.nonwork{
  background:var(--red-soft);
  color:var(--red-deep);
}

#calendarPanel .calendar-day.special-work{
  background:#efffd1;
  color:#476800;
}

#calendarPanel .calendar-day.today:not(.selected){
  border-color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red);
}

#calendarPanel .calendar-day.selected{
  border-color:var(--dark);
  background:var(--dark);
  color:#fff;
  box-shadow:none;
}

#calendarPanel .calendar-day .marker{
  width:5px;
  height:5px;
  margin-top:4px;
  border-radius:50%;
  background:currentColor;
}

#calendarPanel .calendar-day.personal:after{
  top:6px;
  right:6px;
  width:6px;
  height:6px;
  background:var(--red);
  box-shadow:0 0 0 2px #fff;
}

#calendarPanel .calendar-day.selected.personal:after{
  background:var(--lime);
  box-shadow:0 0 0 2px var(--dark);
}

#calendarPanel .calendar-detail{
  margin-top:14px;
  padding:14px;
  border:1px solid #e6e7e9;
  border-radius:16px;
  background:#f5f6f7;
}

#calendarPanel .calendar-detail strong{
  font:800 14px/1.25 "Manrope",sans-serif;
}

#calendarPanel .calendar-detail span{
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

#calendarPanel .calendar-detail .work-answer{
  margin-top:9px;
  color:var(--red-deep);
  font-weight:800;
}

#calendarPanel .calendar-detail .personal-answer{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid #ddd;
  color:#5b3a00;
  font-weight:800;
}


/* Employee UI Revision 3: custom Tappy date picker. */
#authenticatedApp .tappy-date-native{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#authenticatedApp .tappy-date-trigger{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-width:0;
  height:46px;
  padding:0 13px;
  border:1px solid #dadde0;
  border-radius:13px;
  background:#fafafa;
  color:var(--text);
  font:700 12px "DM Sans",sans-serif;
  text-align:left;
  box-shadow:none;
}

#authenticatedApp .tappy-date-trigger:focus-visible{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
  outline:0;
}

#authenticatedApp .tappy-date-icon{
  position:relative;
  width:15px;
  height:15px;
  flex:0 0 15px;
  border:1.5px solid currentColor;
  border-radius:3px;
}

#authenticatedApp .tappy-date-icon:before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:3px;
  border-top:1.5px solid currentColor;
}

#authenticatedApp .tappy-date-picker{
  position:fixed;
  inset:0;
  z-index:180;
}

#authenticatedApp .tappy-date-picker[hidden]{
  display:none;
}

#authenticatedApp .tappy-date-picker-backdrop{
  position:absolute;
  inset:0;
  background:rgba(18,20,22,.45);
  backdrop-filter:blur(3px);
}

#authenticatedApp .tappy-date-picker-sheet{
  position:absolute;
  left:50%;
  bottom:max(14px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100% - 24px),390px);
  padding:18px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 70px rgba(25,30,35,.28);
}

#authenticatedApp .tappy-date-picker-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

#authenticatedApp .tappy-date-picker-head strong{
  display:block;
  margin-top:4px;
  font:800 20px/1.1 "Manrope",sans-serif;
}

#authenticatedApp #requestDatePickerClose{
  width:34px;
  height:34px;
  border-radius:11px;
  background:#f1f2f3;
  color:var(--text);
  font-size:19px;
}

#authenticatedApp .tappy-date-picker-month{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 38px;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
}

#authenticatedApp .tappy-date-picker-month button{
  width:38px;
  height:38px;
  border-radius:12px;
  background:#f3f4f5;
  color:var(--text);
  font:700 20px/1 "Manrope",sans-serif;
}

#authenticatedApp .tappy-date-picker-month strong{
  text-align:center;
  font:800 15px/1 "Manrope",sans-serif;
}

#authenticatedApp .tappy-date-weekdays,
#authenticatedApp .tappy-date-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}

#authenticatedApp .tappy-date-weekdays{
  margin-bottom:6px;
}

#authenticatedApp .tappy-date-weekdays span{
  text-align:center;
  color:var(--muted);
  font-size:8px;
  font-weight:800;
}

#authenticatedApp .tappy-date-blank,
#authenticatedApp .tappy-date-day{
  aspect-ratio:1;
}

#authenticatedApp .tappy-date-day{
  min-width:0;
  border:1px solid transparent;
  border-radius:12px;
  background:#f5f6f7;
  color:var(--text);
  font:800 11px/1 "Manrope",sans-serif;
}

#authenticatedApp .tappy-date-day:active{
  transform:scale(.95);
}

#authenticatedApp .tappy-date-day.today:not(.selected){
  border-color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red);
}

#authenticatedApp .tappy-date-day.selected{
  border-color:var(--dark);
  background:var(--dark);
  color:#fff;
}

#authenticatedApp .tappy-date-picker-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

#authenticatedApp .tappy-date-picker-actions button{
  min-height:42px;
  border-radius:13px;
  background:#f1f2f3;
  color:var(--text);
  font-size:10px;
  font-weight:800;
}

#authenticatedApp #requestDatePickerToday{
  background:var(--red);
  color:#fff;
}


/* Employee UI Revision 3A: stable date picker header position. */
#authenticatedApp .tappy-date-picker-sheet{
  top:max(72px,calc(env(safe-area-inset-top) + 54px));
  bottom:auto;
}


/* Owner UI Revision 1: unified owner calendar visual. */
#ownerCalendarPanel .calendar-card{
  min-height:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

#ownerCalendarPanel .month-control{
  grid-template-columns:40px minmax(0,1fr) 40px;
  gap:10px;
  margin-bottom:16px;
}

#ownerCalendarPanel .month-control button{
  width:40px;
  height:40px;
  border:1px solid #e3e4e6;
  border-radius:13px;
  background:#f5f6f7;
  color:var(--text);
  font:700 22px/1 "Manrope",sans-serif;
}

#ownerCalendarPanel .month-control button:active{
  transform:scale(.96);
}

#ownerCalendarPanel .month-control strong{
  text-align:center;
  font:800 16px/1.15 "Manrope",sans-serif;
  letter-spacing:-.02em;
  text-transform:capitalize;
}

#ownerCalendarPanel .weekday-row{
  margin-bottom:7px;
}

#ownerCalendarPanel .weekday-row,
#ownerCalendarPanel .calendar-grid{
  gap:5px;
}

#ownerCalendarPanel .weekday-row span{
  color:#8a8f95;
  font:800 8px/1 "DM Sans",sans-serif;
}

#ownerCalendarPanel .owner-calendar-day{
  min-width:0;
  aspect-ratio:.82;
  padding:3px;
  gap:2px;
  border:1px solid transparent;
  border-radius:13px;
  background:#f5f6f7;
  color:var(--text);
  font-family:"Manrope",sans-serif;
}

#ownerCalendarPanel button.owner-calendar-day:active{
  transform:scale(.95);
}

#ownerCalendarPanel .owner-calendar-day.owner-nonwork:not(.selected),
#ownerCalendarPanel .owner-calendar-day.holiday:not(.selected),
#ownerCalendarPanel .owner-calendar-day.off_day:not(.selected),
#ownerCalendarPanel .owner-calendar-day.weekly_rest:not(.selected){
  background:var(--red-soft);
  color:var(--red-deep);
}

#ownerCalendarPanel .owner-calendar-day.today:not(.selected){
  border-color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red);
}

#ownerCalendarPanel .owner-calendar-day.selected{
  border-color:var(--dark);
  background:var(--dark);
  color:#fff;
  box-shadow:none;
}

#ownerCalendarPanel .owner-calendar-day.selected small,
#ownerCalendarPanel .owner-calendar-day.selected span{
  color:rgba(255,255,255,.78);
}

#ownerCalendarPanel .owner-calendar-detail{
  display:grid;
  gap:7px;
  margin-top:14px;
  padding:14px;
  border:1px solid #e6e7e9;
  border-radius:16px;
  background:#f5f6f7;
}

#ownerCalendarPanel .owner-calendar-detail h3{
  margin:0 0 4px;
  font:800 14px/1.25 "Manrope",sans-serif;
}

#ownerCalendarPanel .owner-calendar-employee{
  padding:11px;
  border:1px solid #e5e6e8;
  border-radius:13px;
  background:#fff;
}


/* Owner UI Revision 2: custom assisted attendance dropdown. */
#ownerAssistedPanel .owner-assisted-select-wrap{
  position:relative;
  width:100%;
  height:46px;
}

#ownerAssistedPanel .owner-assisted-select-native{
  position:absolute;
  inset:0;
  width:100%;
  height:46px;
  margin:0;
  padding:0;
  opacity:0;
  pointer-events:none;
}

#ownerAssistedPanel .owner-tappy-select{
  position:relative;
  z-index:2;
  width:100%;
}

#ownerAssistedPanel .tappy-select-trigger{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:46px;
  padding:0 42px 0 13px;
  border:1px solid #dadde0;
  border-radius:13px;
  background:#fafafa;
  color:var(--text);
  font:600 12px/1 "DM Sans",sans-serif;
  text-align:left;
  box-shadow:none;
}

#ownerAssistedPanel .tappy-select-trigger:focus-visible,
#ownerAssistedPanel .tappy-select.open .tappy-select-trigger{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
  outline:0;
}

#ownerAssistedPanel .tappy-select-chevron{
  position:absolute;
  right:15px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-65%) rotate(45deg);
  transition:transform .15s ease;
}

#ownerAssistedPanel .tappy-select.open .tappy-select-chevron{
  transform:translateY(-25%) rotate(225deg);
}

#ownerAssistedPanel .tappy-select-menu{
  position:absolute;
  z-index:40;
  top:calc(100% + 6px);
  left:0;
  right:0;
  padding:5px;
  border:1px solid #e1e3e5;
  border-radius:13px;
  background:#fff;
  box-shadow:0 14px 34px rgba(25,30,35,.14);
}

#ownerAssistedPanel .tappy-select-menu[hidden]{
  display:none;
}

#ownerAssistedPanel .tappy-select-option{
  display:flex;
  align-items:center;
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  font:700 11px/1 "DM Sans",sans-serif;
  text-align:left;
  box-shadow:none;
}

#ownerAssistedPanel .tappy-select-option:hover,
#ownerAssistedPanel .tappy-select-option:focus-visible{
  background:#f2f3f4;
  outline:0;
}

#ownerAssistedPanel .tappy-select-option.selected{
  background:var(--red-soft);
  color:var(--red);
  font-weight:800;
}


/* Admin UI Revision 1: unified admin calendar visual. */
#adminCalendarPanel .calendar-card{
  min-height:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

#adminCalendarPanel .month-control{
  grid-template-columns:40px minmax(0,1fr) 40px;
  gap:10px;
  margin-bottom:16px;
}

#adminCalendarPanel .month-control button{
  width:40px;
  height:40px;
  border:1px solid #e3e4e6;
  border-radius:13px;
  background:#f5f6f7;
  color:var(--text);
  font:700 22px/1 "Manrope",sans-serif;
}

#adminCalendarPanel .month-control button:active{
  transform:scale(.96);
}

#adminCalendarPanel .month-control strong{
  text-align:center;
  font:800 16px/1.15 "Manrope",sans-serif;
  letter-spacing:-.02em;
  text-transform:capitalize;
}

#adminCalendarPanel .weekday-row{
  margin-bottom:7px;
}

#adminCalendarPanel .weekday-row,
#adminCalendarPanel .calendar-grid{
  gap:5px;
}

#adminCalendarPanel .weekday-row span{
  color:#8a8f95;
  font:800 8px/1 "DM Sans",sans-serif;
}

#adminCalendarPanel .owner-calendar-day{
  min-width:0;
  aspect-ratio:.82;
  padding:3px;
  gap:2px;
  border:1px solid transparent;
  border-radius:13px;
  background:#f5f6f7;
  color:var(--text);
  font-family:"Manrope",sans-serif;
}

#adminCalendarPanel button.owner-calendar-day:active{
  transform:scale(.95);
}

#adminCalendarPanel .owner-calendar-day.admin-nonwork:not(.selected),
#adminCalendarPanel .owner-calendar-day.holiday:not(.selected),
#adminCalendarPanel .owner-calendar-day.off_day:not(.selected),
#adminCalendarPanel .owner-calendar-day.weekly_rest:not(.selected){
  background:var(--red-soft);
  color:var(--red-deep);
}

#adminCalendarPanel .owner-calendar-day.today:not(.selected){
  border-color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red);
}

#adminCalendarPanel .owner-calendar-day.selected{
  border-color:var(--dark);
  background:var(--dark);
  color:#fff;
  box-shadow:none;
}

#adminCalendarPanel .owner-calendar-day.selected small,
#adminCalendarPanel .owner-calendar-day.selected span{
  color:rgba(255,255,255,.78);
}

#adminCalendarPanel .owner-calendar-detail{
  display:grid;
  gap:7px;
  margin-top:14px;
  padding:14px;
  border:1px solid #e6e7e9;
  border-radius:16px;
  background:#f5f6f7;
}

#adminCalendarPanel .owner-calendar-detail h3{
  margin:0 0 4px;
  font:800 14px/1.25 "Manrope",sans-serif;
}

#adminCalendarPanel .owner-calendar-employee{
  padding:11px;
  border:1px solid #e5e6e8;
  border-radius:13px;
  background:#fff;
}


/* Admin UI Revision 2: custom assisted attendance dropdown. */
#adminAssistedPanel .admin-assisted-select-wrap{
  position:relative;
  width:100%;
  height:46px;
}

#adminAssistedPanel .admin-assisted-select-native{
  position:absolute;
  inset:0;
  width:100%;
  height:46px;
  margin:0;
  padding:0;
  opacity:0;
  pointer-events:none;
}

#adminAssistedPanel .admin-tappy-select{
  position:relative;
  z-index:2;
  width:100%;
}

#adminAssistedPanel .tappy-select-trigger{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:46px;
  padding:0 42px 0 13px;
  border:1px solid #dadde0;
  border-radius:13px;
  background:#fafafa;
  color:var(--text);
  font:600 12px/1 "DM Sans",sans-serif;
  text-align:left;
  box-shadow:none;
}

#adminAssistedPanel .tappy-select-trigger:focus-visible,
#adminAssistedPanel .tappy-select.open .tappy-select-trigger{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
  outline:0;
}

#adminAssistedPanel .tappy-select-chevron{
  position:absolute;
  right:15px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-65%) rotate(45deg);
  transition:transform .15s ease;
}

#adminAssistedPanel .tappy-select.open .tappy-select-chevron{
  transform:translateY(-25%) rotate(225deg);
}

#adminAssistedPanel .tappy-select-menu{
  position:absolute;
  z-index:40;
  top:calc(100% + 6px);
  left:0;
  right:0;
  padding:5px;
  border:1px solid #e1e3e5;
  border-radius:13px;
  background:#fff;
  box-shadow:0 14px 34px rgba(25,30,35,.14);
}

#adminAssistedPanel .tappy-select-menu[hidden]{
  display:none;
}

#adminAssistedPanel .tappy-select-option{
  display:flex;
  align-items:center;
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  font:700 11px/1 "DM Sans",sans-serif;
  text-align:left;
  box-shadow:none;
}

#adminAssistedPanel .tappy-select-option:hover,
#adminAssistedPanel .tappy-select-option:focus-visible{
  background:#f2f3f4;
  outline:0;
}

#adminAssistedPanel .tappy-select-option.selected{
  background:var(--red-soft);
  color:var(--red);
  font-weight:800;
}


/* Employee UI Alignment Revision: left align requested content only. */

/* 1. Employee Pengajuan list */
#authenticatedApp #requestList .request-card{
  text-align:left;
}

#authenticatedApp #requestList .request-card > :first-child{
  min-width:0;
  text-align:left;
  justify-self:stretch;
}

#authenticatedApp #requestList .request-card h3,
#authenticatedApp #requestList .request-card p,
#authenticatedApp #requestList .request-card small{
  text-align:left;
}

/* 2. Employee Home action/content cards */
#authenticatedApp #homeLateRequest,
#authenticatedApp #homeOtherRequest,
#authenticatedApp #homeLeaveRequest,
#authenticatedApp #homeDebtCard,
#authenticatedApp .secondary-grid .secondary-action{
  text-align:left;
}

#authenticatedApp #homeLateRequest > span:first-child,
#authenticatedApp #homeOtherRequest > span:last-child,
#authenticatedApp #homeLeaveRequest > span:last-child,
#authenticatedApp #homeDebtCard .home-debt-copy,
#authenticatedApp .secondary-grid .secondary-action{
  text-align:left;
  justify-self:stretch;
  align-items:flex-start;
}

/* 3. Profile change category cards */
#authenticatedApp #profileChangeCategoryView .profile-category-choice{
  text-align:left;
  justify-items:start;
}

#authenticatedApp #profileChangeCategoryView .profile-category-choice span,
#authenticatedApp #profileChangeCategoryView .profile-category-choice small{
  width:100%;
  text-align:left;
}


/* Employee Home Label Chip Revision. */

/* LEAVE — contrast against white card */
#authenticatedApp #homeLeaveRequest > .chip{
  background:#ffe9e7;
  color:#b91d15;
}

/* KASBON — visible pill against dark card */
#authenticatedApp #homeDebtCard .tile-kicker{
  display:inline-flex;
  width:max-content;
  min-height:24px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
}

/* KALENDER — contrast against white card */
#authenticatedApp .secondary-grid .secondary-action[data-view="calendar"] > .chip{
  background:#efffd1;
  color:#476800;
}

/* Employee Bottom Gap Revision V2: fixed nav floats over the viewport. */
#authenticatedApp{
  padding-bottom:0;
}

/* Remove legacy stacked Employee nav spacers. */
#authenticatedApp #homePanel .quick-grid,
#authenticatedApp #homePanel .secondary-grid,
#authenticatedApp .screen-panel,
#authenticatedApp .request-list,
#authenticatedApp .request-form,
#authenticatedApp .request-detail,
#authenticatedApp .payslip-list,
#authenticatedApp .debt-list,
#authenticatedApp .profile-panel{
  margin-bottom:0;
}

/*
  Do not extend short Employee screens below the viewport.
  The fixed bottom nav owns its own viewport position.
*/
.app{
  padding-bottom:0;
}

/*
  Only genuinely scrollable Employee content needs enough trailing
  clearance so its final item can pass above the floating nav.
*/
#authenticatedApp .request-list:not(:empty),
#authenticatedApp .debt-list:not(:empty){
  padding-bottom:82px;
}

/* Employee Bottom Gap Revision V3: exact fixed-nav clearance and short-page viewport. */

/*
  Employee shell follows the real viewport.
  This overrides the desktop preview's legacy 860px minimum only while
  Employee UI is active; Owner/Admin role shell is untouched.
*/
.app:has(#authenticatedApp:not([hidden])){
  min-height:100dvh;
}

/*
  Fixed nav geometry:
  64px nav + 10px bottom offset + 8px visual breathing room.
  Apply clearance to the final content group, not to the whole app,
  so short screens do not gain empty scroll.
*/
#authenticatedApp #homePanel .secondary-grid{
  margin-bottom:82px;
}

/*
  Long Employee lists may scroll behind the fixed nav, therefore their
  final content receives the same single clearance.
*/
#authenticatedApp .request-list:not(:empty),
#authenticatedApp .debt-list:not(:empty){
  padding-bottom:82px;
}

/*
  Short panels such as Slip Gaji must not create artificial trailing
  space. Their content height alone determines document height.
*/
#authenticatedApp #payslipPanel,
#authenticatedApp #payslipPanel .payslip-list{
  margin-bottom:0;
  padding-bottom:0;
}

/*
  Keep outer Employee containers free from duplicate nav reserves.
*/
.app:has(#authenticatedApp:not([hidden])),
#authenticatedApp{
  padding-bottom:0;
}
/* Employee Shell Foundation: square viewport + safe fixed nav. */

/*
  Employee is a real app viewport, not a rounded phone-preview card.
  This scope activates only while Employee UI is visible.
*/
body:has(.app #authenticatedApp:not([hidden])){
  padding-top:0;
  padding-bottom:0;
}

.app:has(#authenticatedApp:not([hidden])){
  min-height:100dvh;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  padding-bottom:0;
}

#authenticatedApp{
  padding-bottom:0;
}

/*
  Remove legacy per-component 72px reserves.
  Nav clearance is assigned explicitly below.
*/
#authenticatedApp .screen-panel,
#authenticatedApp .request-list,
#authenticatedApp .request-form,
#authenticatedApp .request-detail,
#authenticatedApp .payslip-list,
#authenticatedApp .debt-list,
#authenticatedApp .profile-panel,
#authenticatedApp #homePanel .quick-grid,
#authenticatedApp #homePanel .secondary-grid{
  margin-bottom:0;
}

/*
  Home:
  only the final row clears the floating nav.
*/
#authenticatedApp #homePanel .secondary-grid{
  margin-bottom:82px;
}

/*
  Long/content-heavy views:
  one final nav clearance prevents the last content from being covered.
*/
#authenticatedApp #requestsPanel,
#authenticatedApp #historyPanel,
#authenticatedApp #calendarPanel,
#authenticatedApp #debtPanel,
#authenticatedApp #profilePanel{
  padding-bottom:82px;
}

/*
  Slip Gaji is intentionally different:
  a short payslip page must stop naturally at the viewport and must not
  receive artificial trailing scroll space.
*/
#authenticatedApp #payslipPanel,
#authenticatedApp #payslipPanel .payslip-list{
  margin-bottom:0;
  padding-bottom:0;
}

/*
  Fixed Employee nav stays inside the visual viewport.
*/
#authenticatedApp .bottom{
  bottom:max(10px,env(safe-area-inset-bottom,0px));
}



/* Employee Real Topbar Owner Fix. */
/*
  The visible shared topbar is a direct child of .app, not
  #authenticatedApp. Bleed through the shell's 12px horizontal
  padding while keeping 24px breathing room for topbar content.
*/
.app > .topbar{
  width:calc(100% + 24px);
  margin-left:-12px;
  margin-right:-12px;
  padding-left:24px;
  padding-right:24px;

  background:rgba(242,243,244,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border:0;
  box-shadow:none;
}

/* Owner Admin Shell Parity.
   Match the Employee viewport/background/floating-nav foundation.
   Role navigation contents and behavior remain unchanged.
*/
body:has(#roleApp:not([hidden])){
  padding-top:0;
  padding-bottom:0;
}

.app:has(#roleApp:not([hidden])){
  min-height:100dvh;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  padding-bottom:0;
}

#roleApp{
  padding-bottom:82px;
}

/* Owner and Admin share the same floating navigation surface. */
#ownerBottomNav,
#adminBottomNav{
  bottom:max(10px,env(safe-area-inset-bottom,0px));
  width:min(calc(100% - 24px),406px);
  min-height:64px;
  padding:6px;
  border:1px solid rgba(222,222,222,.9);
  border-radius:22px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

/* Keep role content safely above the fixed navigation. */
#roleApp .role-dashboard,
#roleApp .role-panel{
  scroll-margin-bottom:82px;
}

/* Admin Content Left Align - Real DOM Owner.
   Admin panels are identified by their actual IDs.
   Employee, Owner, calendar cells, nav and action controls remain untouched.
*/
#adminDashboard,
#adminAssistedPanel,
#adminFollowUpPanel{
  text-align:left;
}

#adminDashboard .role-section-title,
#adminDashboard .admin-summary-card,
#adminDashboard .admin-summary-grid article,
#adminDashboard .role-tile,
#adminDashboard .owner-workspace-link,
#adminAssistedPanel .screen-head,
#adminAssistedPanel .owner-assisted-form,
#adminFollowUpPanel .screen-head,
#adminFollowUpPanel .request-list{
  text-align:left;
}

#adminDashboard .role-tile{
  align-items:flex-start;
}

#adminDashboard .role-tile .tile-kicker,
#adminDashboard .role-tile h3,
#adminDashboard .role-tile p{
  width:100%;
  text-align:left;
}

#adminDashboard .admin-summary-grid article{
  text-align:left;
}

/* Controls intentionally keep their own alignment. */
#adminCalendarPanel .month-control strong,
#adminCalendarPanel .weekday-row span,
#adminCalendarPanel .owner-calendar-day,
#adminBottomNav button{
  text-align:center;
}

/* Admin Follow-up Action Compact - Real Layout Owner.
   Keep the status at its natural left position.
   Make the operational button compact and bottom-aligned to the status.
*/
#adminFollowUpPanel .admin-follow-up-card .admin-operational-action{
  align-items:flex-end;
}

#adminFollowUpPanel .admin-follow-up-card .status-pill{
  align-self:flex-end;
  margin:0;
}

#adminFollowUpPanel .admin-follow-up-card .admin-action-button{
  align-self:flex-end;
  min-height:28px;
  padding:5px 11px;
  margin:0;
  border-radius:10px;
  line-height:1.2;
}

/* Admin Follow-up Type Chip - Top Right.
   Employee name remains the primary identity.
   Request category becomes a compact corner indicator.
*/
#adminFollowUpPanel .admin-follow-up-card{
  position:relative;
}

#adminFollowUpPanel .admin-follow-up-card .admin-follow-up-main{
  padding-right:86px;
}

#adminFollowUpPanel .admin-follow-up-card .admin-type-chip{
  position:absolute;
  top:14px;
  right:14px;
  width:auto;
  max-width:112px;
  margin:0;
  white-space:nowrap;
  z-index:1;
}

/* Admin Follow-up Compact Status Gap.
   Keep actionable cards vertically consistent with read-only cards.
   The action button must not increase the status-row height.
*/
#adminFollowUpPanel .admin-follow-up-card .admin-operational-action{
  position:relative;
  min-height:0;
  display:block;
}

#adminFollowUpPanel .admin-follow-up-card .admin-operational-action .status-pill{
  margin:0;
}

#adminFollowUpPanel .admin-follow-up-card .admin-operational-action .admin-action-button{
  position:absolute;
  right:0;
  bottom:0;
  min-height:28px;
  margin:0;
}

#adminFollowUpPanel .admin-follow-up-card .admin-operational-action:has(.admin-action-button){
  padding-right:150px;
}


/* Owner Content Left Align - Real DOM Owner. */
#ownerDashboard,
#ownerInboxPanel,
#ownerAssistedPanel,
#ownerDevicesPanel{
  text-align:left;
}

#ownerDashboard .role-section-title,
#ownerDashboard .role-tile,
#ownerAssistedPanel .screen-head,
#ownerAssistedPanel .owner-assisted-form,
#ownerInboxPanel .screen-head,
#ownerInboxPanel .owner-request-list,
#ownerDevicesPanel .screen-head{
  text-align:left;
}

#ownerDashboard .role-tile{
  align-items:flex-start;
}

#ownerDashboard .role-tile .tile-kicker,
#ownerDashboard .role-tile h3,
#ownerDashboard .role-tile p{
  width:100%;
  text-align:left;
}

#ownerInboxPanel .owner-request-card,
#ownerInboxPanel .owner-request-card > :first-child,
#ownerInboxPanel .owner-request-card h3,
#ownerInboxPanel .owner-request-card p,
#ownerInboxPanel .owner-request-card small{
  text-align:left;
}

/* Owner controls intentionally remain centered. */
#ownerCalendarPanel .month-control strong,
#ownerCalendarPanel .weekday-row span,
#ownerCalendarPanel .owner-calendar-day,
#ownerBottomNav button{
  text-align:center;
}

/* Owner Device Card Left Align. */
#ownerDevicesPanel .owner-device-card{
  text-align:left;
}

#ownerDevicesPanel .owner-device-card > :first-child{
  min-width:0;
  text-align:left;
  justify-self:stretch;
}

#ownerDevicesPanel .owner-device-card h3,
#ownerDevicesPanel .owner-device-card p,
#ownerDevicesPanel .owner-device-card small{
  width:100%;
  text-align:left;
}

/* Owner Device Real Main Column Left Fix. */
#ownerDeviceList .owner-device-card{
  justify-items:stretch;
}

#ownerDeviceList .owner-device-card > div:first-child{
  display:grid;
  width:100%;
  min-width:0;
  justify-items:start;
  align-items:start;
  justify-self:start;
  text-align:left;
}

#ownerDeviceList .owner-device-card > div:first-child h3,
#ownerDeviceList .owner-device-card > div:first-child p,
#ownerDeviceList .owner-device-card > div:first-child small{
  margin-left:0;
  margin-right:0;
  text-align:left;
  justify-self:start;
}

#ownerDeviceList .owner-device-status{
  justify-self:end;
}

/* Owner Pending Hero Left Align. */
#ownerDashboard .owner-inbox-hero{
  align-items:flex-start;
  text-align:left;
}

#ownerDashboard .owner-inbox-hero > div:first-child{
  text-align:left;
  justify-self:start;
}

#ownerDashboard .owner-inbox-hero strong,
#ownerDashboard .owner-inbox-hero small,
#ownerDashboard .owner-inbox-hero p{
  text-align:left;
}

/* Owner Hero Arrow Vertical Center Parity. */
#ownerDashboard .owner-inbox-hero{
  align-items:center;
  text-align:left;
}

#ownerDashboard .owner-inbox-hero > div:first-child{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
}

#ownerDashboard .owner-inbox-hero > :last-child{
  align-self:center;
}

/* Owner Assisted Submit Button Polish. */
#ownerAssistedSubmit{
  width:100%;
  min-height:46px;
  padding:0 16px;
  border:0;
  border-radius:14px;
  background:var(--red);
  color:#fff;
  font:800 10px "DM Sans",sans-serif;
  line-height:1.2;
  cursor:pointer;
}

#ownerAssistedSubmit:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* Role navigation contracts. */
#ownerBottomNav{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

#adminBottomNav{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

#ownerInfoPanel,
#adminInfoPanel,
#ownerInfoPanel .screen-head,
#adminInfoPanel .screen-head,
.role-info-list,
.role-info-card{
  text-align:left;
}

.role-info-card{
  grid-template-columns:minmax(0,1fr) auto;
}

.role-info-card small{
  grid-column:1/-1;
}

.resolution-actions{
  display:grid;
  gap:8px;
}

.resolution-actions button{
  min-height:46px;
  padding:10px 13px;
  border-radius:14px;
  font:800 10px/1.35 "DM Sans",sans-serif;
}

.resolution-actions button:last-child{
  background:#f1f2f3;
  color:var(--text);
}

/* Owner request/info card parity. */
.owner-inbox-filters button span{
  display:inline-grid;
  place-items:center;
  min-width:19px;
  height:19px;
  margin-left:5px;
  padding:0 5px;
  border-radius:999px;
  background:#eef0f2;
  color:#4d5359;
  font-size:8px;
}

.owner-inbox-filters button.active span{
  background:rgba(255,255,255,.18);
  color:#fff;
}

#ownerInboxPanel .owner-request-card,
#ownerInfoPanel .owner-info-card{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  overflow:hidden;
  padding:14px;
}

.owner-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.owner-card-identity{
  min-width:0;
}

#ownerInboxPanel .owner-card-identity h3,
#ownerInfoPanel .owner-card-identity h3{
  margin:0;
  font:800 16px/1.25 "Manrope",sans-serif;
  overflow-wrap:anywhere;
}

#ownerInboxPanel .owner-card-identity .employee-code,
#ownerInfoPanel .owner-card-identity .employee-code{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  font-weight:600;
}

.owner-type-chip{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  min-height:24px;
  max-width:124px;
  padding:4px 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}

.owner-type-kasbon{background:#efffc0;color:#486500}
.owner-type-cuti{background:var(--blue);color:#24577b}
.owner-type-profile-change{background:#eee9ff;color:#57408b}
.owner-type-sakit{background:var(--red-soft);color:var(--red-deep)}
.owner-type-izin,
.owner-type-izin-terlambat{background:#fff0cf;color:#855c00}

#ownerInboxPanel .owner-card-date,
#ownerInfoPanel .owner-card-date{
  margin:2px 0 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

#ownerInboxPanel .owner-card-reason,
#ownerInfoPanel .owner-card-reason{
  margin:0;
  color:#565d64;
  font-size:9px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

#ownerInboxPanel .owner-card-duration,
#ownerInfoPanel .owner-card-duration{
  margin:0;
  color:var(--text);
  font-size:9px;
  font-weight:800;
}

#adminFollowUpPanel .admin-follow-up-duration,
#adminInfoPanel .role-info-duration{
  margin:4px 0 0;
  color:var(--text);
  font-size:9px;
  font-weight:800;
}

#ownerInboxPanel .owner-request-card>.status-pill,
#ownerInfoPanel .owner-info-card>.status-pill{
  justify-self:start;
  margin-top:2px;
}

/* Owner Readability Revision
   Increase small supporting text for comfortable mobile reading.
   Owner only; no shared/Admin/Employee typography changes.
*/

#ownerInboxPanel .owner-request-card .owner-employee,
#ownerInfoPanel .role-info-card h3{
  font-size:16px;
  line-height:1.3;
}

#ownerInboxPanel .owner-request-card .employee-code,
#ownerInfoPanel .role-info-card .employee-code{
  font-size:10px;
  line-height:1.4;
}

#ownerInboxPanel .owner-request-card p,
#ownerInfoPanel .role-info-card p{
  font-size:10px;
  line-height:1.45;
}

#ownerInboxPanel .owner-request-card small,
#ownerInfoPanel .role-info-card small{
  font-size:10px;
  line-height:1.5;
}

#ownerInboxPanel .owner-request-card .owner-duration,
#ownerInfoPanel .role-info-card .owner-duration{
  font-size:10px;
  line-height:1.4;
  font-weight:800;
}

#ownerInboxPanel .owner-request-card .admin-type-chip,
#ownerInfoPanel .role-info-card .admin-type-chip{
  font-size:9px;
}

#ownerInboxPanel .owner-request-card .status-pill,
#ownerInfoPanel .role-info-card .status-pill{
  font-size:9px;
  line-height:1.3;
}

#ownerInboxPanel .owner-inbox-filters button{
  font-size:10px;
}

#ownerInboxPanel .owner-inbox-filters button span{
  font-size:9px;
}

#ownerInboxPanel .screen-head p,
#ownerInfoPanel .screen-head p{
  font-size:11px;
  line-height:1.45;
}

/* Owner Readability Revision 2
   Increase card supporting information only.
   Primary employee heading remains unchanged.
*/

#ownerInboxPanel .owner-request-card p,
#ownerInfoPanel .role-info-card p {
  font-size: 12px;
  line-height: 1.5;
}

#ownerInboxPanel .owner-request-card small,
#ownerInfoPanel .role-info-card small {
  font-size: 12px;
  line-height: 1.5;
}

#ownerInboxPanel .owner-request-card .owner-duration,
#ownerInfoPanel .role-info-card .owner-duration {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
}

#ownerInboxPanel .owner-request-card .admin-type-chip,
#ownerInfoPanel .role-info-card .admin-type-chip {
  font-size: 11px;
  line-height: 1.25;
}

#ownerInboxPanel .owner-request-card .status-pill,
#ownerInfoPanel .role-info-card .status-pill {
  font-size: 10px;
  line-height: 1.3;
}

/* Admin Readability Parity
   Match approved Owner card typography.
   Admin Info + Admin Follow-Up only.
*/

#adminInfoPanel .role-info-card p,
#adminInfoPanel .role-info-card small,
#adminFollowUpPanel .admin-follow-up-card p,
#adminFollowUpPanel .admin-follow-up-card small {
  font-size: 12px;
  line-height: 1.5;
}

#adminInfoPanel .role-info-card .admin-duration,
#adminFollowUpPanel .admin-follow-up-card .admin-duration {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
}

#adminInfoPanel .role-info-card .admin-type-chip,
#adminFollowUpPanel .admin-follow-up-card .admin-type-chip {
  font-size: 11px;
  line-height: 1.25;
}

#adminInfoPanel .role-info-card .status-pill,
#adminFollowUpPanel .admin-follow-up-card .status-pill {
  font-size: 10px;
  line-height: 1.3;
}


/* Admin Follow-Up Card Parity Final
   Match approved Owner readability.
*/

#adminFollowUpPanel .admin-follow-up-date {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#adminFollowUpPanel .admin-follow-up-reason {
  margin: 7px 0 0 !important;
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

#adminFollowUpPanel .admin-follow-up-duration {
  margin: 7px 0 0 !important;
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
}

#adminFollowUpPanel .admin-follow-up-card .admin-type-chip {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

#adminFollowUpPanel .admin-follow-up-card .status-pill {
  font-size: 10px !important;
  line-height: 1.3 !important;
}

/* Admin Doctor Evidence Button Readability */
#adminFollowUpPanel .admin-follow-up-card .admin-action-button {
  font-size: 11px !important;
}

/* Owner Type Chip Parity
   Match approved Admin type-chip dimensions/readability.
*/

#ownerInboxPanel .owner-type-chip,
#ownerInfoPanel .owner-type-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.25 !important;
}


/* Owner Pengajuan Card Reorder
   Top right: duration + type.
   Bottom: reason left + status right.
*/

#ownerInboxPanel .owner-card-top-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

#ownerInboxPanel .owner-card-top-meta .owner-card-duration {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

#ownerInboxPanel .owner-card-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

#ownerInboxPanel .owner-card-bottom .owner-card-reason {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#ownerInboxPanel .owner-card-bottom .status-pill {
  flex: 0 0 auto;
  margin: 0 !important;
}


/* Owner Info Layout Parity
   Same hierarchy as approved Owner Pengajuan card.
*/
#ownerInfoPanel .owner-card-top-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

#ownerInfoPanel .owner-card-top-meta .owner-card-duration {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

#ownerInfoPanel .owner-card-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

#ownerInfoPanel .owner-card-bottom .owner-card-reason {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#ownerInfoPanel .owner-card-bottom .status-pill {
  flex: 0 0 auto;
  margin: 0 !important;
}


/* Admin Info Layout Parity */
#adminInfoPanel .admin-info-card{
  display:block;
}

#adminInfoPanel .admin-info-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

#adminInfoPanel .admin-info-head h3{
  margin:0;
  min-width:0;
  font-size:16px;
  line-height:1.3;
}

#adminInfoPanel .admin-info-top-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-shrink:0;
}

#adminInfoPanel .admin-info-top-meta .role-info-duration{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  white-space:nowrap;
}

#adminInfoPanel .admin-info-top-meta .admin-type-chip{
  font-size:11px !important;
  line-height:1.25 !important;
}

#adminInfoPanel .admin-info-date{
  margin:8px 0 0 !important;
  font-size:12px !important;
  line-height:1.5 !important;
}

#adminInfoPanel .admin-info-bottom{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}

#adminInfoPanel .admin-info-reason{
  min-width:0;
  flex:1 1 auto;
  margin:0 !important;
  font-size:12px !important;
  line-height:1.5 !important;
}

#adminInfoPanel .admin-info-bottom .status-pill{
  flex:0 0 auto;
  margin:0 !important;
  font-size:10px !important;
}


/* Owner Detail Date Full Width */
#ownerRequestDetail .owner-detail-date{
  grid-column:1 / -1;
}


/* Shared Role Info Filters */
.role-info-filters{
  display:flex;
  gap:6px;
  max-width:100%;
  overflow-x:auto;
  padding:2px 2px 12px;
  scrollbar-width:none;
}

.role-info-filters::-webkit-scrollbar{
  display:none;
}

.role-info-filters button{
  flex:0 0 auto;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.role-info-filters button span{
  display:inline-grid;
  place-items:center;
  min-width:19px;
  height:19px;
  margin-left:5px;
  padding:0 5px;
  border-radius:999px;
  background:#eef0f2;
  color:#4d5359;
  font-size:9px;
}

.role-info-filters button.active{
  border-color:var(--dark);
  background:var(--dark);
  color:#fff;
}

.role-info-filters button.active span{
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* Admin Assisted Submit Button Polish. */
#adminAssistedSubmit{
  width:100%;
  min-height:46px;
  padding:0 16px;
  border:0;
  border-radius:14px;
  background:var(--red);
  color:#fff;
  font:800 11px "DM Sans",sans-serif;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(229,57,53,.18);
}
#adminAssistedSubmit:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}
#adminAssistedSubmit:active{
  transform:translateY(1px);
}

/* Role Calendar Status Dots */
.role-calendar-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:8px;
  margin-top:3px;
}

.role-calendar-dot{
  display:block;
  width:6px;
  height:6px;
  border-radius:999px;
  flex:0 0 6px;
}

.role-calendar-dot-cuti{
  background:#35a853;
}

.role-calendar-dot-sakit{
  background:#3578e5;
}

.role-calendar-dot-izin{
  background:#ef8f22;
}


/* Calendar Visual Parity */
.role-calendar-dot-cuti{
  background:var(--blue);
}
.role-calendar-dot-sakit{
  background:var(--red);
}
.role-calendar-dot-izin{
  background:#e5a323;
}

.role-calendar-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:10px 0 2px;
}
.role-calendar-legend > span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.role-calendar-legend b{
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}

.role-calendar-status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1.25;
  white-space:nowrap;
}
.role-calendar-status-cuti{
  background:var(--blue);
  color:#24577b;
}
.role-calendar-status-sakit{
  background:var(--red-soft);
  color:var(--red-deep);
}
.role-calendar-status-izin{
  background:#fff0cf;
  color:#855c00;
}

/* Calendar Detail Row Alignment */
#ownerCalendarDetail .owner-calendar-employee,
#adminCalendarDetail .owner-calendar-employee{
  align-items:center;
}

#ownerCalendarDetail .owner-calendar-employee strong,
#adminCalendarDetail .owner-calendar-employee strong{
  align-self:center;
  font-size:12px;
  line-height:1.35;
}
/* Owner + Admin Calendar Final Visual Parity */
#ownerCalendarPanel .calendar-card,
#adminCalendarPanel .calendar-card{
  min-height:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

#ownerCalendarPanel .month-control,
#adminCalendarPanel .month-control{
  grid-template-columns:40px minmax(0,1fr) 40px;
  gap:10px;
  margin-bottom:16px;
}

#ownerCalendarPanel .month-control button,
#adminCalendarPanel .month-control button{
  width:40px;
  height:40px;
  border:1px solid #e3e4e6;
  border-radius:13px;
  background:#f5f6f7;
  color:var(--text);
}

#ownerCalendarPanel .month-control button:active,
#adminCalendarPanel .month-control button:active{
  transform:scale(.96);
}

#ownerCalendarPanel .month-control strong,
#adminCalendarPanel .month-control strong{
  text-align:center;
  font:800 16px/1.15 "Manrope",sans-serif;
  letter-spacing:-.02em;
  text-transform:capitalize;
}

#ownerCalendarPanel .weekday-row,
#adminCalendarPanel .weekday-row{
  margin-bottom:7px;
}

#ownerCalendarPanel .weekday-row,
#ownerCalendarPanel .calendar-grid,
#adminCalendarPanel .weekday-row,
#adminCalendarPanel .calendar-grid{
  gap:5px;
}

#ownerCalendarPanel .weekday-row span,
#adminCalendarPanel .weekday-row span{
  color:#8a8f95;
  font:800 8px/1 "DM Sans",sans-serif;
  text-align:center;
}

#ownerCalendarPanel .owner-calendar-day,
#adminCalendarPanel .owner-calendar-day{
  min-width:0;
  aspect-ratio:.82;
  padding:3px;
  gap:2px;
  border:1px solid transparent;
  border-radius:13px;
  text-align:center;
}

#ownerCalendarPanel button.owner-calendar-day:active,
#adminCalendarPanel button.owner-calendar-day:active{
  transform:scale(.95);
}

#ownerCalendarPanel .owner-calendar-day.owner-nonwork:not(.selected),
#ownerCalendarPanel .owner-calendar-day.holiday:not(.selected),
#ownerCalendarPanel .owner-calendar-day.off_day:not(.selected),
#ownerCalendarPanel .owner-calendar-day.weekly_rest:not(.selected),
#adminCalendarPanel .owner-calendar-day.admin-nonwork:not(.selected),
#adminCalendarPanel .owner-calendar-day.holiday:not(.selected),
#adminCalendarPanel .owner-calendar-day.off_day:not(.selected),
#adminCalendarPanel .owner-calendar-day.weekly_rest:not(.selected){
  background:var(--red-soft);
  color:var(--red-deep);
}

#ownerCalendarPanel .owner-calendar-day.today:not(.selected),
#adminCalendarPanel .owner-calendar-day.today:not(.selected){
  border-color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red);
}

#ownerCalendarPanel .owner-calendar-day.selected,
#adminCalendarPanel .owner-calendar-day.selected{
  border-color:var(--dark);
  background:var(--dark);
  color:#fff;
  box-shadow:none;
}

#ownerCalendarPanel .owner-calendar-day.selected small,
#ownerCalendarPanel .owner-calendar-day.selected span,
#adminCalendarPanel .owner-calendar-day.selected small,
#adminCalendarPanel .owner-calendar-day.selected span{
  color:rgba(255,255,255,.78);
}

#ownerCalendarPanel .owner-calendar-detail,
#adminCalendarPanel .owner-calendar-detail{
  display:grid;
  gap:7px;
  margin-top:14px;
  padding:14px;
  border:1px solid #e6e7e9;
  border-radius:16px;
}

#ownerCalendarPanel .owner-calendar-detail h3,
#adminCalendarPanel .owner-calendar-detail h3{
  margin:0 0 4px;
  font:800 14px/1.25 "Manrope",sans-serif;
}

#ownerCalendarPanel .owner-calendar-employee,
#adminCalendarPanel .owner-calendar-employee{
  align-items:center;
  padding:11px;
  border:1px solid #e5e6e8;
  border-radius:13px;
  background:#fff;
}

#ownerCalendarPanel .owner-calendar-employee strong,
#adminCalendarPanel .owner-calendar-employee strong{
  align-self:center;
  font-size:12px;
  line-height:1.35;
}
/* Owner + Admin Home Readability */
#ownerDashboard .tile-kicker,
#adminDashboard .tile-kicker{
  font-size:10px;
}

#ownerDashboard .role-tile p,
#adminDashboard .role-tile p{
  font-size:12px;
  line-height:1.5;
}

#ownerDashboard .owner-inbox-hero small,
#adminDashboard .admin-summary-card small{
  font-size:12px;
  line-height:1.45;
}

#ownerDashboard .owner-workspace-link small,
#adminDashboard .owner-workspace-link small{
  font-size:11px;
  line-height:1.45;
}

/* Owner Device Card Readability */
#ownerDeviceList .owner-device-card p{
  font-size:11px;
}

#ownerDeviceList .owner-device-card small{
  font-size:10px;
  line-height:1.45;
}

#ownerDeviceList .owner-device-status{
  font-size:10px;
}

/* Employee Pengajuan Readability
   Employee only. Keep card titles and summary numbers unchanged. */
#authenticatedApp #requestsPanel .screen-head p{
  font-size:11px;
  line-height:1.45;
}

#authenticatedApp #requestsPanel .request-summary span{
  font-size:10px;
  line-height:1.35;
}

#authenticatedApp #requestList .request-card p{
  font-size:11px;
  line-height:1.45;
}

#authenticatedApp #requestList .request-card small{
  font-size:11px;
  line-height:1.45;
}

#authenticatedApp #requestList .request-card .status-pill{
  font-size:10px;
  line-height:1.3;
}

/* Employee All Tabs Readability
   Employee scope only.
   Visible informational text should not render below 10px.
   Owner/Admin typography remains untouched.
*/

/* Shared Employee screen subtitle */
#authenticatedApp .screen-head p{
  font-size:11px;
  line-height:1.45;
}

/* Employee Home */
#authenticatedApp #homePanel .tile-kicker,
#authenticatedApp #homePanel .chip{
  font-size:10px;
}

#authenticatedApp #homePanel .late-action small,
#authenticatedApp #homePanel .request-action small,
#authenticatedApp #homePanel .secondary-action small,
#authenticatedApp #homePanel .home-debt-copy > small{
  font-size:11px;
  line-height:1.4;
}

#authenticatedApp #homePanel .debt-primary-action,
#authenticatedApp #homePanel .debt-secondary-action{
  font-size:10px;
}

/* Employee Attendance */
#authenticatedApp #homePanel .stat .label{
  font-size:10px;
}

#authenticatedApp #homePanel .att-time .date,
#authenticatedApp #homePanel .att-location{
  font-size:11px;
}

/* Employee Riwayat Absensi */
#authenticatedApp #historyPanel .history-date span{
  font-size:10px;
}

#authenticatedApp #historyPanel .history-main strong{
  font-size:12px;
}

#authenticatedApp #historyPanel .history-main small{
  font-size:11px;
  line-height:1.4;
}

#authenticatedApp #historyPanel .status-pill{
  font-size:10px;
}

/* Employee Kalender */
#authenticatedApp #calendarPanel .weekday-row span{
  font-size:10px;
}

#authenticatedApp #calendarPanel .calendar-detail span{
  font-size:11px;
  line-height:1.4;
}

/* Employee Slip Gaji */
#authenticatedApp #payslipPanel .payslip-card p{
  font-size:11px;
}

#authenticatedApp #payslipPanel .payslip-open{
  font-size:10px;
}

/* Employee Kasbon */
#authenticatedApp #debtPanel .debt-balance-card small{
  font-size:11px;
}

#authenticatedApp #debtPanel .debt-row > div:first-child span,
#authenticatedApp #debtPanel .debt-amount span{
  font-size:10px;
}

/* Employee Profil / Info Saya */
#authenticatedApp #profilePanel .employee-info-head small{
  font-size:10px;
}

#authenticatedApp #profilePanel .employee-info-grid span{
  font-size:10px;
}

#authenticatedApp #profilePanel .profile-note{
  font-size:11px;
  line-height:1.5;
}

#authenticatedApp #profilePanel .profile-change-hint{
  font-size:11px;
  line-height:1.5;
}

#authenticatedApp #profilePanel .profile-change-action small,
#authenticatedApp #profilePanel .profile-category-choice small{
  font-size:10px;
  line-height:1.4;
}

/* Employee notification content */
#authenticatedApp ~ .notification-dialog .notification-item small{
  font-size:10px;
}

/* Employee bottom navigation */
#authenticatedApp ~ #bottomNav .nav,
#bottomNav .nav{
  font-size:10px;
}

/* Employee request/detail form supporting labels */
#authenticatedApp #requestsPanel .request-form label,
#authenticatedApp #requestsPanel .form-note,
#authenticatedApp #requestsPanel .form-error,
#authenticatedApp #requestsPanel .server-note{
  font-size:10px;
}

#authenticatedApp #requestsPanel .detail-field span,
#authenticatedApp #requestsPanel .detail-reason span{
  font-size:10px;
}

/* Employee attendance auxiliary controls */
#authenticatedApp .tap-undo{
  font-size:10px;
}

#authenticatedApp .tap-undo button{
  font-size:10px;
}

#authenticatedApp .late-date-label,
#authenticatedApp .late-date-option{
  font-size:10px;
}

#authenticatedApp .overtime-choices legend,
#authenticatedApp .overtime-description,
#authenticatedApp .overtime-selfie span,
#authenticatedApp .overtime-selfie button,
#authenticatedApp .overtime-selfie small{
  font-size:10px;
}


/* Employee Kasbon Readability V2
   Actual debt row metadata raised from 10px to 11px. */
#authenticatedApp #debtPanel .debt-row > div:first-child span,
#authenticatedApp #debtPanel .debt-amount span{
  font-size:11px;
  line-height:1.4;
}


/* Employee Calendar Simple Final */
#authenticatedApp #calendarPanel .calendar-day.personal:after{display:none;}
#authenticatedApp #calendarPanel .calendar-day .personal-marker{width:6px;height:6px;margin-top:4px;border-radius:50%;background:var(--red);}
#authenticatedApp #calendarPanel .calendar-day.selected .personal-marker{background:#fff;}
#authenticatedApp #calendarPanel .calendar-detail .personal-answer,#authenticatedApp #calendarPanel .calendar-detail .day-answer{margin-top:7px;padding-top:0;border-top:0;font-size:11px;line-height:1.4;font-weight:800;}


/* Employee Bottom Bar Image Icons */
#authenticatedApp + .bottom .nav .nav-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  flex:0 0 20px;
}
#authenticatedApp + .bottom .nav .nav-icon img{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
}




/* Employee Bottom Nav Owner Parity */
#bottomNav .nav{
  min-width:0;
  margin:0;
  border-radius:16px;
  background:transparent;
  color:#777;
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:center;
  justify-content:center;
}

#bottomNav .nav.active{
  background:var(--dark);
  color:#baff00;
  box-shadow:none;
  text-shadow:none;
}

#bottomNav .nav .nav-icon img{
  opacity:.58;
  filter:none;
  transform:none;
  transition:filter .18s ease, opacity .18s ease;
}

#bottomNav .nav.active .nav-icon img{
  opacity:1;
  filter:
    brightness(0)
    saturate(100%)
    invert(88%)
    sepia(89%)
    saturate(950%)
    hue-rotate(24deg)
    brightness(108%)
    contrast(105%)
    drop-shadow(0 0 4px rgba(190,255,40,.60));
  transform:none;
}


/* Owner Admin Bottom Nav Image Icons */
#ownerBottomNav .role-nav-icon,
#adminBottomNav .role-nav-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  flex:0 0 20px;
}

#ownerBottomNav .role-nav-icon img,
#adminBottomNav .role-nav-icon img{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
  opacity:.58;
  filter:none;
  transition:filter .18s ease, opacity .18s ease;
}

#ownerBottomNav button.active,
#adminBottomNav button.active{
  background:var(--dark);
  color:#baff00;
}

#ownerBottomNav button.active .role-nav-icon img,
#adminBottomNav button.active .role-nav-icon img{
  opacity:1;
  filter:
    brightness(0)
    saturate(100%)
    invert(88%)
    sepia(89%)
    saturate(950%)
    hue-rotate(24deg)
    brightness(108%)
    contrast(105%)
    drop-shadow(0 0 4px rgba(190,255,40,.60));
}

/* Owner Admin Bottom Nav Font Parity */
#ownerBottomNav button,
#adminBottomNav button{
  font-size:10px;
}