/* Sri Kasih Leave — UI polish layer (2026-09-22)
   Loaded AFTER style.css. Visual-only: no class/ID renames, no layout changes.
   To revert: remove the <link> to this file (or restore /root/leave-srikasih-ui-backup-20260922). */

:root {
  --sk-ease: cubic-bezier(.22, .8, .3, 1);
  --sk-glow: 0 0 0 4px rgba(7, 147, 68, 0.14);
}

::selection { background: var(--green-200); color: var(--green-950); }

/* Slim, on-brand scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--green-300) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--green-300); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-400); }

/* ---- Cards: frosted glass + soft lift ---- */
.card {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 4px rgba(5, 46, 22, 0.04),
    0 16px 40px rgba(5, 46, 22, 0.10);
  transition: transform .35s var(--sk-ease), box-shadow .35s var(--sk-ease);
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 4px 8px rgba(5, 46, 22, 0.05),
      0 24px 56px rgba(5, 46, 22, 0.14);
  }
}

.post-avatar { box-shadow: 0 4px 12px rgba(7, 147, 68, 0.25); }

/* ---- Nav: crisper glass ---- */
.sk-nav {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(5, 46, 22, 0.06), 0 8px 24px rgba(5, 46, 22, 0.05);
}
.sk-badge {
  background: linear-gradient(135deg, var(--green-50), var(--green-100));
  box-shadow: 0 1px 2px rgba(5, 46, 22, 0.08);
}

/* ---- Fields: label lights up, input gets glow ---- */
.field label { transition: color .2s ease, transform .2s var(--sk-ease); }
.field:focus-within label { color: var(--green-600); transform: translateX(2px); }

select, input, textarea {
  transition: border-color .2s ease, box-shadow .25s var(--sk-ease), background-color .2s ease, transform .2s var(--sk-ease);
}
select:hover, input:hover, textarea:hover { border-color: var(--green-300); }
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: var(--sk-glow);
  background-color: #fff;
}

/* ---- Primary button: gradient + shine sweep + press ---- */
.btn-submit {
  background: linear-gradient(135deg, var(--green-300) -40%, var(--green-400) 40%, var(--green-600) 130%);
  overflow: hidden;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(7, 147, 68, 0.28), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  transition: transform .2s var(--sk-ease), box-shadow .25s ease, filter .2s ease;
}
.btn-submit::before {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--sk-ease);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--green-300) -40%, var(--green-400) 40%, var(--green-600) 130%);
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(7, 147, 68, 0.36), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  }
  .btn-submit:hover:not(:disabled)::before { left: 130%; }
}
.btn-submit:active:not(:disabled) { transform: translateY(0) scale(0.985); filter: brightness(0.97); }
.btn-submit:focus-visible { outline: none; box-shadow: var(--sk-glow), 0 6px 18px rgba(7, 147, 68, 0.28); }

.btn-whatsapp, .btn-copy { transition: transform .2s var(--sk-ease), box-shadow .2s ease, background .15s ease; }
@media (hover: hover) {
  .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35); }
  .btn-copy:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(5, 46, 22, 0.10); }
}
.btn-whatsapp:active, .btn-copy:active { transform: scale(0.98); }

.btn-link, .btn-link-inline { transition: color .15s ease, letter-spacing .2s ease; }

/* ---- Tabs: segmented control with sliding feel ---- */
.tab-switch { box-shadow: inset 0 1px 3px rgba(5, 46, 22, 0.08); }
.tab-btn { transition: background .25s var(--sk-ease), color .2s ease, box-shadow .25s ease, transform .15s ease; }
.tab-btn:not(.tab-btn-active):hover { color: var(--green-700); background: rgba(255, 255, 255, 0.55); }
.tab-btn:active { transform: scale(0.97); }
.tab-btn-active { box-shadow: 0 2px 8px rgba(5, 46, 22, 0.12), 0 0 0 1px rgba(7, 147, 68, 0.08); }

/* ---- Balance & legend chips ---- */
.balance-box {
  background: linear-gradient(160deg, var(--green-50), rgba(255, 255, 255, 0.6));
  border: 1px solid var(--green-100);
}
.balance-item { transition: transform .25s var(--sk-ease), box-shadow .25s ease; }
@media (hover: hover) {
  .balance-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(5, 46, 22, 0.10); }
}
.legend-chip { transition: transform .2s var(--sk-ease), background .2s ease, border-color .2s ease; }
@media (hover: hover) {
  .legend-chip:hover { transform: translateY(-2px); background: var(--green-100); border-color: var(--green-300); }
}

/* ---- Verified badge pops in ---- */
.verified-badge { animation: skPop .5s var(--sk-ease) both; box-shadow: 0 0 0 4px rgba(7, 147, 68, 0.12); }
@keyframes skPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---- Banners ---- */
.warning-banner, .error-banner, .rule-note { animation: skSlideIn .35s var(--sk-ease) both; }
@keyframes skSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- 7-day schedule rows ---- */
.leave-today-day { transition: background .2s ease, transform .2s var(--sk-ease); border-radius: 10px; }
@media (hover: hover) {
  .leave-today-day:hover { background: var(--green-50); transform: translateX(3px); }
}
.leave-today-day.is-today {
  background: linear-gradient(90deg, var(--green-100), var(--green-50) 70%);
  box-shadow: inset 3px 0 0 var(--green-400);
}
.leave-today-person em { transition: transform .2s var(--sk-ease); }
.leave-today-person:hover em { transform: scale(1.08); }

/* ---- History rows ---- */
.history-item { transition: transform .25s var(--sk-ease), box-shadow .25s ease, background .2s ease; border: 1px solid transparent; }
@media (hover: hover) {
  .history-item:hover { transform: translateY(-2px); background: #fff; border-color: var(--green-100); box-shadow: 0 8px 20px rgba(5, 46, 22, 0.08); }
}

/* ---- Toast: glass pill ---- */
.toast {
  background: rgba(6, 49, 23, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: opacity .3s ease, transform .4s var(--sk-ease);
}

/* ---- Floating Rules / Visitors ---- */
.rules-panel, .visitor-panel {
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  animation: skSlideIn .3s var(--sk-ease) both;
}
.rules-tab, .visitor-tab { transition: opacity .2s ease, transform .25s var(--sk-ease), box-shadow .25s ease; }
@media (hover: hover) {
  .rules-tab:hover, .visitor-tab:hover { transform: translateX(-4px); box-shadow: 0 8px 20px rgba(5, 46, 22, 0.15); }
}
.rules-close, .visitor-close { transition: transform .25s var(--sk-ease), color .15s ease; }
.rules-close:hover, .visitor-close:hover { transform: rotate(90deg); color: var(--error); }
.rules-type-row, .visitor-row { transition: background .15s ease, padding-left .2s var(--sk-ease); }
.rules-type-row:hover, .visitor-row:hover { background: var(--green-50); padding-left: 6px; }

.clear-cache-btn { transition: color .15s ease, border-color .15s ease, transform .2s var(--sk-ease); }
.clear-cache-btn:hover { transform: translateY(-1px); }
.clear-cache-btn:hover svg { animation: spin .8s linear infinite; }

/* ---- Accessibility: keep motion optional ---- */
@media (prefers-reduced-motion: reduce) {
  .card, .btn-submit, .btn-submit::before, .balance-item, .legend-chip, .history-item,
  .leave-today-day, .rules-tab, .visitor-tab, .verified-badge,
  .warning-banner, .error-banner, .rule-note, .rules-panel, .visitor-panel {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}


/* =====================================================================
   POLISH v2 — effects that also show on touch/mobile (no hover needed)
   ===================================================================== */

/* ---- Hero title: soft moving shimmer (stays white-ish on the video) ---- */
.header.hero-on-video h1 {
  background: linear-gradient(100deg, #fff 0%, #fff 35%, var(--green-200) 50%, #fff 65%, #fff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  animation: skTitleShine 6s ease-in-out infinite;
}
@keyframes skTitleShine { 0%, 15% { background-position: 100% 0; } 55%, 100% { background-position: -100% 0; } }
.header .eyebrow { letter-spacing: 0.22em; }

/* ---- Main cards: slowly rotating gradient edge (uiverse-style border glow) ---- */
@property --sk-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#identifyCard, #leaveForm { position: relative; }
#identifyCard::before, #leaveForm::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--sk-a), transparent 0deg, var(--green-300) 70deg, rgba(255,255,255,.9) 110deg, transparent 180deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: skSpin 7s linear infinite;
  pointer-events: none;
  opacity: .9;
}
@keyframes skSpin { to { --sk-a: 360deg; } }

/* ---- Staggered entrance for dynamically-rendered items (plays on mobile too) ---- */
.balance-item, .leave-today-day, .history-item, .legend-chip { animation: skRise .5s var(--sk-ease) both; }
.balance-item:nth-child(1), .leave-today-day:nth-child(1), .history-item:nth-child(1) { animation-delay: .04s; }
.balance-item:nth-child(2), .leave-today-day:nth-child(2), .history-item:nth-child(2) { animation-delay: .09s; }
.balance-item:nth-child(3), .leave-today-day:nth-child(3), .history-item:nth-child(3) { animation-delay: .14s; }
.balance-item:nth-child(4), .leave-today-day:nth-child(4), .history-item:nth-child(4) { animation-delay: .19s; }
.balance-item:nth-child(5), .leave-today-day:nth-child(5), .history-item:nth-child(5) { animation-delay: .24s; }
.balance-item:nth-child(6), .leave-today-day:nth-child(6), .history-item:nth-child(6) { animation-delay: .29s; }
.balance-item:nth-child(n+7), .leave-today-day:nth-child(n+7), .history-item:nth-child(n+7) { animation-delay: .34s; }
@keyframes skRise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Touch devices: no hover, so give the same feel via idle motion + tap feedback ---- */
@media (hover: none) {
  .btn-submit::before { left: -75%; animation: skShine 4.5s ease-in-out infinite; }
  .btn-submit:active:not(:disabled) { transform: scale(.975); }
  .card:active, .history-item:active, .balance-item:active, .legend-chip:active,
  .leave-today-day:active { transform: scale(.985); transition: transform .12s ease; }
  .tab-btn:active { background: rgba(255,255,255,.7); }
  .rules-tab, .visitor-tab { opacity: .95; }
}
@keyframes skShine { 0%, 55% { left: -75%; } 100% { left: 130%; } }

/* ---- Mobile comfort ---- */
@media (max-width: 600px) {
  /* lighter blur = smoother scrolling on phones with a video behind the page */
  .card, .sk-nav, .rules-panel, .visitor-panel { -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
  .card { background: rgba(255, 255, 255, 0.88); }
  /* comfortable tap targets (>=44px) */
  .btn-submit { min-height: 48px; }
  .tab-btn { min-height: 42px; }
  .btn-whatsapp, .btn-copy { min-height: 44px; }
  .btn-link, .btn-link-inline, .clear-cache-btn { min-height: 36px; }
  /* keep floating widgets clear of the iPhone home bar */
  .rules-widget { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .visitor-widget { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

/* Older browsers without @property/mask: hide the spinning edge, everything else still works */
@supports not (mask-composite: exclude) { #identifyCard::before, #leaveForm::before { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .header.hero-on-video h1, #identifyCard::before, #leaveForm::before,
  .balance-item, .leave-today-day, .history-item, .legend-chip, .btn-submit::before {
    animation: none !important;
  }
  .header.hero-on-video h1 { background-position: 0 0; }
}