/*
 * Booth Saathi PWA. Android design tokens and widgets, copied from the iOS port's kit
 * (ios/AppStore/screenshots/src/base.css, ios-spec/08-visual-resources.md). 1 CSS px = 1 dp.
 */

@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("../assets/fonts/Roboto-Regular.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("../assets/fonts/Roboto-Medium.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("../assets/fonts/Roboto-Bold.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Devanagari"; font-weight: 400; font-display: swap; src: url("../assets/fonts/NotoSansDevanagari-Regular.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Devanagari"; font-weight: 700; font-display: swap; src: url("../assets/fonts/NotoSansDevanagari-Bold.ttf") format("truetype"); }
@font-face { font-family: "Hind"; font-weight: 400; font-display: swap; src: url("../assets/fonts/Hind-Regular.ttf") format("truetype"); }

:root {
  --primary: #015BB5;
  --accent: #535353;
  --text-dark: #535353;
  --text-primary: rgba(0,0,0,.87);
  --text-secondary: rgba(0,0,0,.54);
  --hint: rgba(0,0,0,.38);
  --dark-gray: #808080;
  --gray: #EBEBEB;
  --window-bg: #FAFAFA;
  --login-bg: #C8EAFA;
  --dashed-fill: #F1FBFF;
  --dim: rgba(0,0,0,.6);
  --call: #198A00;
  --slip: #CC7B03;
  --red: #F44336;
  --sky: #03A9F4;
  --print: #FF9800;
  --search: #4CAF50;
  --data: #FF5722;
  --exit: #DF1607;
  --message: #5A6FE1;
  --purple: #9C27B0;
  --bg-cancel: rgba(148,144,144,.631);
  --grid-header-bg: #E1E0E0;      /* #B2D6D5D5 over the #FAFAFA window */
  --grid-selected-bg: #9C9C9C;
  --grid-cell-bg: #FCFCFC;
  --grid-text: #111111;
  --grid-line: #898B8F;
  --edit-stroke: #787878;
  --box-stroke: #BAB8B8;
  --toast-bg: rgba(50,50,50,.9);
  --font: "Roboto", "Noto Sans Devanagari", sans-serif;
  --hair: 0.5px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
@media (min-resolution: 3dppx) { :root { --hair: .3334px; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--primary);   /* shows behind the status bar in standalone mode */
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: normal;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; margin: 0; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #0a84ff; outline-offset: 2px;
}
img { display: block; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- app frame */
/* Blue status bar band with white icons on every screen (DECISIONS A7). */
#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  background: var(--primary);
}
.screen {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--window-bg);
  padding-left: var(--safe-left); padding-right: var(--safe-right);
}
.screen.white { background: #fff; }
.screen.login { background: var(--login-bg); }
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.safe-pad-bottom { padding-bottom: var(--safe-bottom); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- blue page header (56dp action bar) */
.page-header {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center;
  height: 56px; background: var(--primary); color: #fff;
  box-shadow: 0 1px 10px rgba(0,0,0,.12), 0 4px 5px rgba(0,0,0,.2);
  clip-path: inset(0 0 -24px 0);
}
.page-header .back {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 100%; flex: none;
}
.page-header .back img { width: 20px; height: 20px; }
.page-header .title { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-header > .title:first-child { margin-left: 15px; }
.page-header.h50 { height: 50px; }
.page-header.h50 .title { font-size: 18px; }
.page-header .title.regular { font-weight: 400; }

/* ---------------------------------------------------------------- overlays */
#overlays { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#overlays > * { pointer-events: auto; }
.layer {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--safe-top);
  display: flex; align-items: center; justify-content: center;
  padding: 16px 16px calc(max(var(--safe-bottom), var(--keyboard, 0px)) + 16px);
  opacity: 0; transition: opacity .15s ease-out;
}
.layer.in, .layer.hud { opacity: 1; }
.layer.dim { background: var(--dim); }
.layer.sheet-layer { align-items: flex-end; padding: 0 0 var(--keyboard, 0px); }

.card {
  width: min(calc(95vw - 32px), 420px);
  max-height: 100%;
  overflow: auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 9px 46px rgba(0,0,0,.12), 0 24px 38px rgba(0,0,0,.2);
}
.card.wrap { width: auto; min-width: min(calc(95vw - 32px), 320px); max-width: min(calc(100vw - 32px), 560px); }
.card.clear { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; width: min(calc(100vw - 60px), 420px); }
.card.r20 { border-radius: 20px; box-shadow: none; width: min(90vw, 480px); }
.card.w90 { width: min(90vw, 600px); background: transparent; box-shadow: none; overflow: visible; }

.alert-title { padding: 18px 24px 0; font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--text-primary); }
.alert-message { min-height: 48px; padding: 8px 24px 0; font-size: 16px; line-height: 1.45; color: var(--text-secondary); white-space: pre-line; }
.alert-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 4px 12px; }
.alert-btn {
  min-width: 64px; min-height: 48px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px;
  color: var(--accent); border-radius: 2px;
}
.alert-btn:active { background: rgba(0,0,0,.08); }

.progress-card {
  width: min(calc(95vw - 32px), 420px);
  display: flex; align-items: center; gap: 24px;
  padding: 18px 24px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 9px 46px rgba(0,0,0,.12), 0 24px 38px rgba(0,0,0,.2);
  font-size: 16px; color: var(--text-primary);
}
.activity {
  flex: none; width: 48px; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M43 24A19 19 0 1 1 24 5' fill='none' stroke='%23535353' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sheet {
  width: 100%; max-width: 640px;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  padding-bottom: var(--safe-bottom);
  background: #fff;
  box-shadow: 0 6px 30px rgba(0,0,0,.12), 0 16px 24px rgba(0,0,0,.2);
  transform: translateY(100%); transition: transform .2s ease-out;
}
.layer.in .sheet { transform: none; }

#toasts { position: fixed; left: 0; right: 0; bottom: calc(64px + var(--safe-bottom)); z-index: 80; display: flex; justify-content: center; pointer-events: none; }
.toast {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 24px;
  background: var(--toast-bg);
  box-shadow: 0 1px 5px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2);
  color: #fff; font-size: 14px; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  opacity: 0; transition: opacity .18s;
}
.toast.in { opacity: 1; }

/* ---------------------------------------------------------------- dashed panels (dialog_border / dashed_border) */
.dashed, .dashed-r10 {
  position: relative;
  background: var(--dashed-fill);
  border: 2px dashed var(--primary);
  border-radius: 2px;
  padding: 8px 12px;
}
.dashed-r10 { border-radius: 10px; }

/* ---------------------------------------------------------------- pill buttons */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 999px;
  color: #fff; font-size: 14px; font-weight: 500; line-height: 1.2;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter .1s;
}
.pill:active { filter: brightness(.88); }
.pill:disabled { opacity: .6; }
.pill.raised { box-shadow: 0 1px 5px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2); }
.pill.caps { text-transform: uppercase; }
.pill.regular { font-weight: 400; }
.pill-blue   { background: var(--primary); border-color: var(--primary); }
.pill-green  { background: var(--call);    border-color: var(--call); }
.pill-yellow { background: var(--slip);    border-color: var(--slip); }
.pill-red    { background: var(--red);     border-color: var(--red); }
.pill-sky    { background: var(--sky);     border-color: var(--sky); }
.pill-search { background: var(--search);  border-color: var(--search); }
.pill-gray   { background: #fff; border-color: var(--dark-gray); color: var(--dark-gray); }
.pill-outline{ background: transparent; border-color: var(--primary); color: var(--primary); }
.pill-row { display: flex; gap: 10px; padding: 10px; }
.pill-row > .pill { flex: 1 1 0; min-width: 0; padding: 0 6px; }

.btn5 {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px;
  border: 1px solid #fff; border-radius: 5px;
  background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 500; text-transform: uppercase;
}
.btn5.cancel { background: var(--bg-cancel); }

.bar-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 12px; background: var(--search); color: #fff; font-size: 18px;
}
.bar-button img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------- inputs */
.edittext {
  display: block; width: 100%;
  min-height: 40px; padding: 10px;
  background: #fff; border: 1px solid var(--gray); border-radius: 10px;
  font-size: 15px; line-height: 18px; color: var(--text-dark);
  outline: none;
}
.edittext::placeholder { color: var(--hint); }
.edittext:focus { border-color: #b5d3f2; }
textarea.edittext { resize: none; }
.edit-filter {
  display: block; width: 100%;
  height: 40px; padding: 0 10px;
  background: #fff; border: 1px solid var(--edit-stroke); border-radius: 4px;
  font-size: 18px; color: var(--text-dark);
  outline: none;
}
.box { background: #fff; border: 1px solid var(--box-stroke); border-radius: 2px; padding: 9px; }

/* AppCompat Spinner on a native select: corner triangle bottom-right */
.spinner { position: relative; display: flex; align-items: center; min-height: 48px; }
.spinner select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 48px;
  padding: 0 32px 0 8px;
  border: 0; background: transparent;
  font-size: 16px; color: var(--text-primary);
  text-overflow: ellipsis;
  cursor: pointer;
}
.spinner::after {
  content: ""; position: absolute; right: 6px; bottom: 6px;
  width: 9px; height: 9px;
  background: var(--text-secondary);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* AppCompat RadioButton */
.radio { display: flex; align-items: center; gap: 6px; min-height: 40px; font-size: 16px; color: var(--text-primary); cursor: pointer; }
.radio input { appearance: none; -webkit-appearance: none; margin: 6px; width: 20px; height: 20px; border: 2px solid var(--text-secondary); border-radius: 50%; flex: none; }
.radio input:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 4.6px, transparent 5.2px); }

/* Offline banner */
.offline-bar {
  flex: none; display: none; align-items: center; justify-content: center;
  padding: 3px 8px; background: #323232; color: #fff; font-size: 12px;
}
body.offline .offline-bar { display: flex; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}