/* Operations Leave & Permissions: mobile-first and personal-scope for employees and people managers. */
body.operations-employee-leave-view {
  --ops-leave-blue:#2454d7; --ops-leave-purple:#6941c6; --ops-leave-ink:#17243c;
  --ops-leave-muted:#667085; --ops-leave-line:#e1e6ef; --ops-leave-soft:#f7f9fc;
}
body.operations-employee-leave-view #content { background:var(--ops-leave-soft); }
.ops-leave-page { max-width:1480px; margin:0 auto; padding:14px 12px 96px; color:var(--ops-leave-ink); }
.ops-leave-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ops-leave-head h1 { margin:0; font-size:19px; line-height:1.25; font-weight:650; }
.ops-leave-head p { margin:4px 0 0; color:var(--ops-leave-muted); font-size:12px; }
.ops-leave-head .btn { min-height:42px; padding:0 13px; border-radius:10px; white-space:nowrap; }
.ops-leave-section-head { margin:0 1px 10px; }
.ops-leave-section-head h2,.ops-requests-head h2 { margin:0; font-size:15px; font-weight:650; }
.ops-balance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ops-balance-grid>.loading-state { grid-column:1/-1; }
.ops-balance-card { min-width:0; padding:13px; border:1px solid var(--ops-leave-line); border-radius:14px; background:#fff; box-shadow:0 3px 13px rgba(24,39,75,.045); }
.ops-balance-card.is-zero { background:#fafbfc; }
.ops-balance-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#edf3ff; color:var(--ops-leave-blue); font-size:11px; font-weight:700; }
.ops-balance-card p { margin:9px 0 3px; color:#566277; font-size:11px; }
.ops-balance-card>div:not(.ops-permission-meter) { display:flex; align-items:baseline; gap:5px; }
.ops-balance-card strong { color:var(--ops-leave-blue); font-size:21px; font-weight:650; }
.ops-balance-card div span,.ops-balance-card small { color:var(--ops-leave-muted); font-size:10px; }
.ops-balance-card>small { display:block; margin-top:7px; }
.ops-balance-card>i { display:block; height:4px; margin-top:7px; overflow:hidden; border-radius:99px; background:#edf0f4; }
.ops-balance-card>i>b { display:block; height:100%; border-radius:inherit; background:var(--ops-leave-blue); }
.ops-balance-card.tone-sl .ops-balance-icon { background:#fff0f1; color:#d92d36; }
.ops-balance-card.tone-sl strong { color:#d92d36; }
.ops-balance-card.tone-sl>i>b { background:#d92d36; }
.ops-balance-card.tone-el .ops-balance-icon { background:#e8f7ee; color:#079455; }
.ops-balance-card.tone-el strong { color:#079455; }
.ops-balance-card.tone-el>i>b { background:#079455; }
.ops-balance-card.tone-co .ops-balance-icon { background:#fff5df; color:#d97706; }
.ops-balance-card.tone-co strong { color:#d97706; }
.ops-balance-card.tone-co>i>b { background:#d97706; }
.ops-balance-card.is-zero strong { color:#98a2b3; }
.ops-balance-card.is-zero>i>b { background:#cbd3df; }
.ops-permission-card { border-color:#d9cdf8; background:linear-gradient(145deg,#fff,#f8f4ff); }
.ops-permission-card .ops-balance-icon { background:#f3edff; color:var(--ops-leave-purple); }
.ops-permission-card strong { color:var(--ops-leave-purple); font-size:17px; }
.ops-permission-meter { display:flex; gap:6px; margin-top:9px; }
.ops-permission-meter i { flex:1; height:6px; border-radius:99px; background:#ddd4f4; }
.ops-permission-meter i.used { background:var(--ops-leave-purple); }
.ops-permission-card em { display:block; margin-top:8px; color:#5f6a7c; font-size:10px; font-style:normal; line-height:1.4; }
.ops-requests-panel { margin-top:15px; overflow:hidden; border:1px solid var(--ops-leave-line); border-radius:15px; background:#fff; box-shadow:0 5px 20px rgba(24,39,75,.06); }
.ops-requests-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-bottom:1px solid #edf0f4; }
.ops-requests-head select { width:auto; min-width:82px; }
.ops-request-filters { padding:10px 13px; border-bottom:1px solid #edf0f4; }
.ops-request-filters label { display:flex; align-items:center; gap:8px; color:var(--ops-leave-muted); font-size:11px; }
.ops-request-filters select { width:auto; min-width:130px; }
.ops-request-list { padding:0 13px 5px; }
.ops-request-list>.loading-state { min-height:150px; }
.ops-request-card { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; padding:14px 0; border-top:1px solid #edf0f4; }
.ops-request-card:first-child { border-top:0; }
.ops-request-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:#edf3ff; color:var(--ops-leave-blue); font-size:10px; font-weight:700; }
.ops-request-copy { min-width:0; }
.ops-request-copy h3 { margin:0; font-size:13px; font-weight:600; }
.ops-request-copy p { margin:4px 0 0; color:#3f4c61; font-size:11px; }
.ops-request-copy small { display:block; margin-top:4px; color:var(--ops-leave-muted); font-size:10px; }
.ops-request-copy blockquote { margin:8px 0 0; padding:8px 9px; border:0; border-radius:8px; background:#f7f8fb; color:#596579; font-size:10px; }
.ops-request-stage { grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ops-request-stage .btn { min-height:32px; padding:0 8px; font-size:10px; }
body.operations-employee-leave-view #content>.page-header + .card { border-radius:15px; }

@media(max-width:768px) {
  body.operations-employee-leave-view #content { min-width:0; overflow-x:hidden; padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  body.operations-employee-leave-view #content>.page-header,
  body.operations-employee-leave-view #content>.card { width:100%; min-width:0; max-width:100%; }
  body.operations-employee-leave-view #leaveApplyForm,
  body.operations-employee-leave-view #leaveApplyForm .form-group { min-width:0; max-width:100%; }
  body.operations-employee-leave-view #leaveApplyForm .form-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:10px!important; min-width:0; }
  body.operations-employee-leave-view #leaveApplyForm input,
  body.operations-employee-leave-view #leaveApplyForm select,
  body.operations-employee-leave-view #leaveApplyForm textarea { display:block; width:100%; min-width:0; max-width:100%; }
  body.operations-employee-leave-view #leaveApplyForm input[type="date"],
  body.operations-employee-leave-view #leaveApplyForm input[type="time"] { font-size:15px; padding-left:12px; padding-right:8px; }
  body.operations-employee-leave-view .ops-leave-form-actions { display:grid!important; grid-template-columns:1fr!important; gap:9px!important; margin-bottom:82px!important; }
  body.operations-employee-leave-view .ops-leave-form-actions .btn { width:100%; min-height:46px; justify-content:center; }
  body.operations-employee-leave-view .ops-leave-form-actions .btn-secondary { order:2; }
}

@media(min-width:769px) {
  .ops-leave-page { padding:24px 28px 42px; }
  .ops-leave-head h1 { font-size:24px; }
  .ops-leave-head p { font-size:13px; }
  .ops-balance-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .ops-balance-card { padding:16px; }
  .ops-requests-panel { margin-top:22px; }
  .ops-request-card { grid-template-columns:48px minmax(0,1fr) auto; align-items:center; padding:16px 4px; }
  .ops-request-stage { grid-column:3; min-width:230px; }
  body.operations-employee-leave-view #content>.page-header,
  body.operations-employee-leave-view #content>.card { max-width:900px; margin-left:auto; margin-right:auto; }
}

@media(max-width:430px) {
  .ops-leave-head { align-items:flex-start; }
  .ops-leave-head h1 { max-width:190px; }
  .ops-leave-head .btn { padding:0 10px; font-size:11px; }
}