/* Control@SF - Custom theme layer on top of Tailwind (CDN build) */

/* Fonts: Arial for English, Noto Sans (Bengali) for Bangla.
   Arial has no Bengali glyphs, so the browser automatically falls through to Noto Sans Bengali for Bangla text. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

:root{
  --sf-green:#22c55e;
  --sf-green-light:#d9f9e5;
  --sf-orange:#fb923c;
  --sf-orange-light:#ffe9d6;
  --sf-purple:#a78bfa;
  --sf-purple-light:#efe6fe;
  --sf-bg:#f4f6f9;
  --sf-card:#ffffff;
  --sf-text:#1f2937;
}

body{ background:var(--sf-bg); color:var(--sf-text); }
/* Stop the mobile browser's pull-to-refresh / bounce when scrolling back up (pages, popups, iframes) */
html, body{ overscroll-behavior-y:contain; }
.overflow-auto, .overflow-y-auto, .overflow-scroll, .overflow-y-scroll{ overscroll-behavior:contain; }
html, body, button, input, select, textarea{
  font-family: Arial, 'Noto Sans Bengali', 'Noto Sans', sans-serif;
}
/* SweetAlert2 popups follow the same font stack */
.swal2-popup, .swal2-container{ font-family: Arial, 'Noto Sans Bengali', 'Noto Sans', sans-serif !important; }

/* ---- 3D card depth ---- */
.sf-card{
  background:var(--sf-card);
  border-radius:1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 20px -6px rgba(16,24,40,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sf-card:hover{ box-shadow: 0 4px 8px rgba(16,24,40,.06), 0 14px 28px -8px rgba(16,24,40,.16); }

.sf-card-press{ transition: transform .1s ease; }
.sf-card-press:active{ transform: translateY(1px) scale(.99); }

.sf-btn{
  border-radius:.85rem;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.15);
  transition: transform .1s ease, box-shadow .1s ease;
}
.sf-btn:active{ transform: translateY(1px); box-shadow:0 2px 4px rgba(0,0,0,.12); }

.sf-badge-green{ background:var(--sf-green-light); color:#15803d; }
.sf-badge-orange{ background:var(--sf-orange-light); color:#c2410c; }
.sf-badge-purple{ background:var(--sf-purple-light); color:#6d28d9; }

/* ---- mobile bottom nav (fixed) ---- */
.sf-bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff;
  box-shadow: 0 -6px 20px rgba(16,24,40,.08);
  border-top-left-radius:1.25rem; border-top-right-radius:1.25rem;
}
.sf-nav-item{ color:#9ca3af; }
.sf-nav-item.active{ color:var(--sf-green); }

/* ---- admin sidebar ---- */
.sf-sidebar{
  background:#ffffff;
  box-shadow: 4px 0 20px rgba(16,24,40,.06);
}
.sf-sidebar-link{ border-radius:.75rem; color:#4b5563; }
/* desktop sidebar stays pinned to the top of the screen while the page scrolls (its own menu scrolls if it's too tall) */
@media (min-width:1024px){
  .sf-sidebar-sticky{ position:sticky; top:0; align-self:flex-start; height:100vh; height:100dvh; overflow:hidden; }
}
.sf-sidebar-link.active{
  background: linear-gradient(180deg,var(--sf-green-light),#ffffff);
  color:#15803d; font-weight:600;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.15);
}
.sf-sidebar-link:hover{ background:#f3f4f6; }

/* scroll table on small screens */
.sf-table-wrap{ overflow-x:auto; border-radius:.85rem; }

/* fragment fade transition for SPA-style staff portal */
.sf-fragment{ animation: sfFade .18s ease; }
@keyframes sfFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* phone frame preview not required in production, utility only */
.sf-status-good{ color:#15803d; background:#dcfce7; }
.sf-status-bad{ color:#b91c1c; background:#fee2e2; }

/* ---- sidebar grouped section (Inventory) ---- */
.sf-sidebar-group-toggle{ background:none; border:none; cursor:pointer; font:inherit; color:#4b5563; }
.sf-sidebar-group-toggle:hover{ background:#f3f4f6; }
.sf-sidebar-group-toggle.active{
  background: linear-gradient(180deg,var(--sf-green-light),#ffffff);
  color:#15803d; font-weight:600;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.15);
}

/* ---- branch balance sticky bar (Bill Management) — positioning only; card look is Tailwind utility classes inline ---- */
.sf-sticky-bar{
  position:fixed; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid #eef0f3;
  box-shadow: 0 -6px 20px rgba(16,24,40,.10);
  z-index:30;
}
@media (min-width:1024px){ .sf-sticky-bar{ left:16rem; } } /* offset by sidebar width (w-64) */
.sf-sticky-bar-spacer{ height:7.5rem; } /* keeps page content clear of the fixed bar */

/* ---- rich agreement content (headings/tables authored via the agreement editor) ---- */
.sf-agreement-body{ font-size:.92rem; color:#1f2937; line-height:1.7; }
.sf-agreement-body h2{ font-size:1.05rem; font-weight:700; margin:1.4rem 0 .5rem; padding-bottom:.3rem; border-bottom:1px solid #e5e7eb; color:#111827; }
.sf-agreement-body h2:first-child{ margin-top:0; }
.sf-agreement-body h3{ font-size:.95rem; font-weight:700; margin:1rem 0 .3rem; color:#374151; }
.sf-agreement-body p{ margin:.45rem 0; text-align:justify; }
.sf-agreement-body strong, .sf-agreement-body b{ font-weight:700; }
.sf-agreement-body em, .sf-agreement-body i{ font-style:italic; }
.sf-agreement-body u{ text-decoration:underline; }
.sf-agreement-body ul{ list-style:disc; padding-left:1.5rem; margin:.4rem 0; }
.sf-agreement-body ol{ list-style:decimal; padding-left:1.5rem; margin:.4rem 0; }
.sf-agreement-body li{ margin:.2rem 0; text-align:justify; }
.sf-agreement-body table{ width:100%; border-collapse:collapse; margin:.6rem 0; }
.sf-agreement-body table td, .sf-agreement-body table th{ border:1px solid #d1d5db; padding:.45rem .65rem; font-size:.86rem; }
.sf-agreement-body table th{ background:#f3f4f6; font-weight:600; }
.sf-signature-block{ display:flex; justify-content:space-between; gap:2rem; margin-top:3.2rem; }
.sf-signature-line{ width:44%; border-top:1px solid #6b7280; padding-top:.45rem; text-align:center; font-size:.8rem; color:#4b5563; line-height:1.5; }
.sf-signature-line strong{ color:#111827; }

/* ---- agreement editor toolbar (contenteditable) — keep the same visual rules while typing ---- */
.agreement-editor{ outline:none; }
.agreement-editor:focus{ box-shadow: 0 0 0 2px rgba(124,58,237,.25); border-radius:.5rem; }

/* ---- HR sub-category tabs (Staff Management / Salary / Leave Manage) ---- */
.sf-hr-tab{ padding:.55rem 1rem; border-radius:.85rem; font-size:.875rem; font-weight:500; background:#fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 14px -6px rgba(16,24,40,.10); color:#4b5563; white-space:nowrap; }
.sf-hr-tab.active{ background:var(--sf-purple); color:#fff; }

/* ---- Leave calendar ---- */
.sf-cal{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.sf-cal-head{ font-size:.7rem; font-weight:600; color:#9ca3af; text-align:center; padding:.35rem 0; }
.sf-cal-cell{ min-height:5.5rem; background:#fff; border:1px solid #eef0f3; border-radius:.6rem; padding:.3rem; cursor:pointer; overflow:hidden; }
.sf-cal-cell:hover{ border-color:var(--sf-purple); }
.sf-cal-cell.empty{ background:transparent; border-color:transparent; cursor:default; }
.sf-cal-cell.today{ box-shadow: inset 0 0 0 2px var(--sf-green); }
.sf-cal-num{ font-size:.72rem; font-weight:600; color:#6b7280; }
.sf-cal-chip{ display:block; font-size:.62rem; line-height:1.25; padding:1px 5px; border-radius:999px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-cal-more{ font-size:.62rem; color:#6b7280; margin-top:2px; }
@media (max-width:640px){ .sf-cal-cell{ min-height:4rem; } .sf-cal-chip{ font-size:.55rem; padding:0 3px; } }

/* ---- Quota / progress bars ---- */
.sf-bar{ height:.4rem; border-radius:999px; background:#eef0f3; overflow:hidden; }
.sf-bar > span{ display:block; height:100%; border-radius:999px; }

/* ---- Locked quick actions on the staff app ---- */
.sf-locked{ opacity:.45; filter:grayscale(.6); pointer-events:none; }

/* ---- Save / Submit buttons that have nothing to save yet (staff app): grey and not clickable ---- */
.sf-btn.sf-btn-disabled, .sf-btn.sf-btn-disabled:hover{
  background:#d1d5db !important; color:#9ca3af !important;
  box-shadow:none; cursor:not-allowed; transform:none;
}

/* ---------- Manual attendance: "Hold to press" Punch button ----------
   Idle      : light tint, coloured icon / text, grey ring
   Holding   : an SVG ring fills clockwise AND a coloured disc grows from the centre (both driven by app.js, 0..100)
   Complete  : solid colour + check icon + pulse = the press is FULL, the punch is being saved
   (SVG + transform instead of conic-gradient / calc(var()) so it also draws in older Android WebViews)            */
.punch-hold {
  --c: #22c55e; --c-dark: #15803d; --tint: #f0fdf4; --glow: rgba(34, 197, 94, .35);
  position: relative; display: block; width: 150px; height: 150px; border-radius: 9999px; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: transparent; outline: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .2s ease;
}
.punch-hold.punch-out { --c: #ef4444; --c-dark: #b91c1c; --tint: #fef2f2; --glow: rgba(239, 68, 68, .35); }
.punch-hold.is-holding { transform: scale(.95); box-shadow: 0 0 0 8px var(--glow); }
.punch-hold.is-busy { pointer-events: none; }
.punch-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.punch-ring circle { fill: none; stroke-width: 8; }
.punch-ring-bg { stroke: #e5e7eb; }
.punch-ring-fg { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: 289.03; }
.punch-hold-inner {
  position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; border-radius: 9999px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--c-dark); background: var(--tint);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .04); transition: color .15s ease; pointer-events: none;
}
.punch-hold-inner > * { position: relative; z-index: 1; pointer-events: none; }
.punch-hold-inner > .punch-hold-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; border-radius: 9999px; background: var(--c);
  -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: center; transform-origin: center; will-change: transform;
}
.punch-hold.is-holding .punch-hold-inner, .punch-hold.is-complete .punch-hold-inner { color: #fff; }
.punch-hold.is-complete { animation: punch-pop .45s ease; box-shadow: 0 0 0 10px var(--glow); }
.punch-hold.is-busy:not(.is-complete) { opacity: .6; }
/* After a punch: locked for 5 minutes. The colour (ring + disc) drains away slowly; when it is empty the button is ready again. */
.punch-hold.is-cooldown { pointer-events: none; cursor: not-allowed; }
.punch-hold.is-cooldown .punch-ring-fg { transition: none; }
@keyframes punch-pop { 0% { transform: scale(.95); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* ---------- Attendance map pins (Leaflet divIcon) ---------- */
.att-pin { width: 34px; height: 34px; border-radius: 9999px 9999px 9999px 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); border: 2px solid #fff; }
.att-pin > i { transform: rotate(45deg); }
.att-pin-office { background: #7c3aed; }
.att-pin-me { background: #2563eb; }
.att-pin-other { background: #9ca3af; }

/* Staff photo inside my map pin (the photo is turned back upright because the pin itself is rotated) */
.att-pin-photo { background: #fff; }
.att-pin-photo > img { display: block; width: 26px; height: 26px; border-radius: 9999px; object-fit: cover; transform: rotate(45deg); background: #e5e7eb; }
/* Leaflet's own layers use z-index up to 1000: keep them inside the map so popups / photo previews always stay on top */
.leaflet-container { position: relative; z-index: 0; isolation: isolate; }