/* papad-tasklist.css — styles for Sindhi Papad business tasklist */

/* ==================================================================
   LOGIN OVERLAY — client-side gate (see papad-config.js for the caveats)
   ================================================================== */
#login-overlay {
  position: fixed; inset: 0;
  background: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#login-form {
  background: #fafaf7;
  padding: 28px 32px;
  width: min(360px, 92vw);
  border: 1px solid #ccc;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#login-form h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  border: none;
  padding: 0;
}
#login-form label {
  display: block;
  margin: 10px 0 4px;
  font-size: 12.5px;
  color: #555;
  letter-spacing: .03em;
}
#login-form input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #888;
  background: #fff;
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
}
#login-form input:focus { outline: 2px solid #2563eb; outline-offset: -1px; border-color: #2563eb; }
#login-btn {
  margin-top: 14px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
}
#login-btn:hover { background: #333; }
#login-error {
  margin-top: 8px;
  min-height: 18px;
  font-size: 12.5px;
  color: #b91c1c;
}
/* Hide overlay once authenticated; hide app content when not authenticated */
body.authed #login-overlay { display: none; }
body:not(.authed) > header,
body:not(.authed) > nav,
body:not(.authed) > main { visibility: hidden; }

/* Logout button (only shown when authed; matches util-button styling via toolbar) */
#btn-logout { background: #fff8db; }
body:not(.authed) #btn-logout { display: none; }

:root {
  --ink: #1a1a1a;
  --muted: #555;
  --line: #ccc;
  --bg: #fafaf7;
  --warn-bg: #fff4e5;
  --warn-bd: #d97706;
  --hard-bg: #fde2e2;
  --hard-bd: #b91c1c;
  --ok-bg: #e7f5ea;
  --ok-bd: #2f7d3a;
  --note-bg: #eef3fb;
  --note-bd: #2563eb;
  --tab-bg: #ece6d6;
  --tab-active: #1a1a1a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

header { padding: 16px 28px 8px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 19px; margin: 18px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
h3 { font-size: 16px; margin: 16px 0 4px; }
h4 { font-size: 14px; margin: 12px 0 4px; color: var(--muted); }
.sub { color: var(--muted); font-size: 13px; }

main { padding: 0 28px 80px; max-width: none; }

/* Tabs */
nav.tabs {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  padding: 8px 28px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px;
}
nav.tabs button {
  font: inherit; font-size: 13.5px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--tab-bg);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
}
nav.tabs button:hover { background: #ddd5bf; }
nav.tabs button.active {
  background: var(--tab-active);
  color: #fff;
  border-color: var(--tab-active);
}
nav.tabs .util { margin-left: auto; display: flex; gap: 6px; align-items: center; }
nav.tabs .util button { background: #fff; }
nav.tabs .progress { font-size: 12px; color: var(--muted); padding: 0 6px; }

.tab-content { display: none; padding: 18px 0; }
.tab-content.active { display: block; }

/* Meta panel */
.meta { background: #fff; border: 1px solid var(--line); padding: 10px 14px; font-size: 13.5px; margin: 6px 0 14px; }
.meta b { display: inline-block; min-width: 130px; color: var(--muted); font-weight: 600; }

/* Callouts */
.callout { border-left: 4px solid var(--warn-bd); background: var(--warn-bg); padding: 10px 14px; margin: 10px 0; font-size: 13.5px; }
.callout.hard { border-left-color: var(--hard-bd); background: var(--hard-bg); }
.callout.ok   { border-left-color: var(--ok-bd); background: var(--ok-bg); }
.callout.note { border-left-color: var(--note-bd); background: var(--note-bg); }
.callout b.head { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #444; margin-bottom: 2px; }

/* Lists */
ol, ul { padding-left: 22px; margin: 6px 0 10px; }
li { margin: 4px 0; }

/* Tasks */
.task { list-style: none; padding-left: 0; margin: 0; }
.task > li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #e2e2e2; }
.task > li:last-child { border-bottom: 0; }
.task input[type=checkbox] { margin-top: 4px; transform: scale(1.2); flex: 0 0 auto; }
.task .why { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.task label { flex: 1; cursor: pointer; }
.task label.done { text-decoration: line-through; color: #888; }

/* Phase wrappers */
.phase { background: #fff; border: 1px solid var(--line); padding: 16px 22px; }
.phase-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.phase-head .stage { font-size: 11px; letter-spacing: .08em; color: #fff; background: #444; padding: 2px 7px; }
.phase-head .when  { font-size: 12.5px; color: var(--muted); }

/* Misc */
.kbd { font-family: ui-monospace, "SF Mono", monospace; background: #efeae0; padding: 1px 5px; border: 1px solid #ddd; font-size: 12.5px; }
code { font-family: ui-monospace, "SF Mono", monospace; background: #efeae0; padding: 1px 5px; border: 1px solid #ddd; font-size: 12.5px; }

/* Tables */
table.cmp { border-collapse: collapse; width: 100%; font-size: 13.5px; margin: 10px 0; background: #fff; }
table.cmp th, table.cmp td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
table.cmp th { background: #f0ece2; }

/* Details / collapsibles */
details { margin: 6px 0; }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details summary:hover { color: var(--ink); }

/* Sources */
.src { font-size: 12px; color: var(--muted); margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
.src a { color: var(--muted); }

/* Gate (yellow info box between phases) */
.gate { background: #fff8db; border: 1px solid #d4b94a; padding: 10px 14px; margin: 14px 0; font-size: 13.5px; }
.gate b.head { display: block; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #7a5a00; margin-bottom: 2px; }

/* Grid for side-by-side cards */
.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1100px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* Pills */
.pill { display: inline-block; background: #eef0e8; border: 1px solid #c8cbb8; padding: 1px 7px; font-size: 11.5px; color: #495; letter-spacing: .03em; }
.pill.red { background: #fde7e7; border-color: #d4a0a0; color: #843; }
.pill.blue { background: #e7f0fb; border-color: #a8c3e0; color: #345; }

/* ==================================================================
   PRINT PACK — A4-ready field forms (dialogue + fillable)
   ================================================================== */
.print-form {
  background: #fff;
  border: 2px dashed #999;
  padding: 18px 22px;
  margin: 18px 0;
  max-width: 100%;
}
.print-form > .screen-only h3 { margin-top: 0; }
.print-form > .screen-only .form-meta { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }
.print-form .print-btn {
  font: inherit; font-size: 13.5px; padding: 6px 14px;
  border: 1px solid var(--ink); background: #fff; cursor: pointer; margin-right: 6px;
}
.print-form .print-btn.primary { background: var(--ink); color: #fff; }
.print-form .print-btn:hover { background: #f0f0f0; }
.print-form .print-btn.primary:hover { background: #333; }

.print-content { display: block; }
.print-content h2 { font-size: 16pt; margin: 0 0 4px; border: none; }
.print-content h3 { font-size: 12.5pt; margin: 12pt 0 4pt; border-bottom: 1px solid #444; padding-bottom: 2pt; }
.print-content .header-meta {
  display: flex; flex-wrap: wrap; gap: 12pt 20pt;
  padding: 4pt 0 8pt; border-bottom: 1.5pt solid #000; margin-bottom: 10pt;
}
.print-content .header-meta .field { font-size: 10.5pt; }
.print-content .header-meta .field b { display: inline-block; margin-right: 4pt; }
.print-content .header-meta .line { display: inline-block; min-width: 120pt; border-bottom: 1pt solid #444; }

.print-content table.field-tbl { border-collapse: collapse; width: 100%; font-size: 10.5pt; margin: 6pt 0 10pt; }
.print-content table.field-tbl th, .print-content table.field-tbl td {
  border: 0.8pt solid #444; padding: 4pt 6pt; vertical-align: top;
}
.print-content table.field-tbl th { background: #ebebeb; font-size: 10pt; font-weight: 700; }
.print-content table.field-tbl td.q { font-weight: 600; }
.print-content table.field-tbl td.fill { height: 36pt; background: #fcfcfc; }
.print-content table.field-tbl td.fill-tall { height: 56pt; background: #fcfcfc; }
.print-content table.field-tbl td.fill-short { height: 22pt; background: #fcfcfc; }
.print-content table.field-tbl tr.row-h44 td { height: 44pt; }

.print-content .fill-line { border-bottom: 1pt solid #444; display: inline-block; min-width: 80pt; height: 14pt; }
.print-content .check-cell { width: 14pt; height: 14pt; border: 1.2pt solid #000; display: inline-block; vertical-align: middle; }
.print-content .footer-note { font-size: 9.5pt; color: #555; margin-top: 6pt; font-style: italic; }
.print-content .section-break { page-break-before: always; }

/* === PRINT MEDIA: isolate the chosen form when its container has .printing-active === */
@media print {
  body { background: #fff; }
  header, main { padding: 0; }
  nav.tabs { display: none; }
  a { color: #000; text-decoration: none; }

  /* Default: print everything in the active tab (legacy behavior) */
  .tab-content { display: block !important; padding: 0; break-before: page; }
  .tab-content:first-of-type { break-before: avoid; }
  .phase, .callout, .gate { break-inside: avoid; }
  details { display: block; }
  details > summary { display: none; }
  details > *:not(summary) { display: block !important; }

  /* When body has .single-print, hide everything except the .printing-active form */
  body.single-print > * { display: none !important; }
  body.single-print .printing-active { display: block !important; position: static !important; }
  body.single-print .printing-active .screen-only { display: none !important; }
  body.single-print .printing-active { border: none; padding: 0; margin: 0; }
  body.single-print .printing-active .print-content { display: block !important; }
  body.single-print .printing-active table.field-tbl { page-break-inside: auto; }
  body.single-print .printing-active table.field-tbl tr { page-break-inside: avoid; }
  body.single-print .printing-active .section-break { page-break-before: always; }

  /* Portrait + landscape page sizes */
  @page { size: A4 portrait; margin: 14mm; }
  body.single-print.landscape { /* user picks landscape in browser dialog when prompted */ }
}

/* On-screen preview of the print-content — keep it readable but show it's a form */
.print-content { padding: 0; }
.print-form.landscape .print-content { /* hint shown next to button */ }

/* ==================================================================
   LANGUAGE TOGGLE (EN / HI)
   Elements marked data-l10n="en" show only in English mode.
   Elements marked data-l10n="hi" show only in Hindi mode.
   Default (no body data-lang) = English.
   ================================================================== */
body[data-lang="en"] [data-l10n="hi"] { display: none !important; }
body[data-lang="hi"] [data-l10n="en"] { display: none !important; }
body:not([data-lang]) [data-l10n="hi"] { display: none !important; }

/* Language toggle button distinct look */
#btn-lang {
  background: #fff;
  font-weight: 600;
}
body[data-lang="hi"] { font-family: "Hind", "Noto Sans Devanagari", "Mangal", system-ui, -apple-system, sans-serif; }
body[data-lang="hi"] .toolbar, body[data-lang="hi"] nav.tabs { font-family: inherit; }

/* Translation-status banner */
.l10n-banner {
  background: #fff3cd; border-left: 4px solid #d4a017;
  padding: 6px 14px; font-size: 12.5px; color: #5a4500;
  display: flex; align-items: center; gap: 8px;
}
body[data-lang="en"] .l10n-banner { display: none; }

/* ==================================================================
   SEARCH UI — input in nav, dropdown of results, jump-and-highlight
   ================================================================== */
#search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
#search-input {
  font: inherit;
  font-size: 13px;
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--line);
  width: 200px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 8px center;
}
#search-input:focus { outline: 2px solid #2563eb; outline-offset: -1px; border-color: #2563eb; }

#search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(0,0,0,0.12);
  max-height: 360px;
  width: 380px;
  overflow-y: auto;
  display: none;
  z-index: 100;
}
#search-results.active { display: block; }
#search-results .result {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
#search-results .result:hover { background: #f5f5f5; }
#search-results .result:last-child { border-bottom: 0; }
#search-results .result.no-result { color: var(--muted); font-style: italic; cursor: default; }
#search-results .result.no-result:hover { background: #fff; }
#search-results .result-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
#search-results .result-meta .kind {
  background: #1a1a1a; color: #fff; padding: 1px 5px;
  font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  margin-right: 4px;
}
#search-results .result-meta .tab { font-weight: 600; color: #333; }
#search-results .result-text { font-size: 13px; color: var(--ink); line-height: 1.4; }
#search-results mark { background: #ffe082; padding: 0 2px; color: var(--ink); }

/* Highlight an element after jump-to */
.search-highlight {
  background: #ffefb0 !important;
  outline: 3px solid #d4a017;
  outline-offset: 2px;
  transition: outline 0.3s, background 0.3s;
  scroll-margin-top: 80px;
}

@media (max-width: 600px) {
  #search-input { width: 150px; font-size: 13px; }
  #search-results { width: 92vw; right: -8px; max-height: 60vh; }
}
@media (max-width: 420px) {
  #search-input { width: 120px; padding: 4px 24px 4px 8px; }
}

/* ==================================================================
   MOBILE RESPONSIVE — phone-readable layout
   Breakpoints: 900px (tablet), 600px (phone), 420px (small phone)
   ================================================================== */
@media (max-width: 900px) {
  body { font-size: 14px; }
  header { padding: 12px 14px 6px; }
  h1 { font-size: 19px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }
  main { padding: 0 14px 80px; }

  nav.tabs {
    padding: 8px 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  nav.tabs::-webkit-scrollbar { height: 4px; }
  nav.tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }
  nav.tabs button { white-space: nowrap; flex-shrink: 0; }
  nav.tabs .util { margin-left: 8px; flex-shrink: 0; gap: 4px; }
  nav.tabs .util button { padding: 5px 10px; }

  /* Tables horizontally scroll instead of cramping */
  .tab-content table.cmp,
  .tab-content table.field-tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .tab-content table.cmp tbody,
  .tab-content table.cmp thead,
  .tab-content table.field-tbl tbody,
  .tab-content table.field-tbl thead {
    display: table;
    width: 100%;
    min-width: 560px;
  }

  .phase, .callout, .gate { padding: 10px 12px; }
  .grid2 { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 600px) {
  body { font-size: 13.5px; }
  header { padding: 10px 12px 4px; }
  h1 { font-size: 17px; }
  h2 { font-size: 16px; padding-bottom: 3px; }
  h3 { font-size: 14px; }
  main { padding: 0 12px 80px; }

  nav.tabs { padding: 6px 10px; gap: 3px; }
  nav.tabs button { font-size: 12.5px; padding: 5px 9px; }
  nav.tabs .progress { display: none; }  /* save space */

  .meta b { min-width: 100px; display: block; margin-bottom: 2px; font-weight: 700; }

  .task > li { padding: 6px 0; gap: 8px; }
  .task input[type=checkbox] { transform: scale(1.1); }

  .callout, .gate { padding: 8px 10px; font-size: 12.5px; }
  .callout b.head { font-size: 11px; }

  /* Print forms on phone — collapse the A4 preview, show only the controls */
  .print-form { border: 1px solid var(--line); padding: 8px 12px; margin: 10px 0; }
  .print-form .print-content { display: none; }
  .print-form .screen-only { padding: 0; }
  .print-form .print-btn { display: block; width: 100%; padding: 9px; margin: 4px 0; font-size: 13.5px; }
  .print-form > .screen-only::after {
    content: "(Best printed from desktop / laptop)";
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 4px;
    font-style: italic;
  }
}

@media (max-width: 420px) {
  body { font-size: 13px; }
  nav.tabs button { font-size: 12px; padding: 4px 7px; }
  nav.tabs .util button { padding: 4px 8px; font-size: 11.5px; }
  h1 { font-size: 16px; }
  h2 { font-size: 15px; }
}