/* Lataif - shared by index.php and monitoring.php */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #f4f5fa; color: #1d2a26; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: #1a6b7a; }
button, input, select { font: inherit; color: inherit; }
.lt-ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.lt-wrap { max-width: 900px; margin: 0 auto; padding: 10px 8px 24px; }
.lt-wide { max-width: 1200px; }
.text-muted { color: #6b7f84; }
.text-danger { color: #c0392b; }
.text-success { color: #26a65b; }
.mt-1 { margin-top: 6px; }

/* ---- Top bars ---- */
.lt-head { display: flex; align-items: center; gap: 10px; margin: 2px 2px 10px; }
.lt-head strong { display: block; font-size: 17px; color: #1d2a26; }
.lt-head small { font-size: 12px; color: #6b7f84; }
.lt-head-text { flex: 1; min-width: 0; }
.lt-title { text-align: center; }
.lt-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-round {
  flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0;
  background: #f0f5f6; color: #1a6b7a; font-size: 17px; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}
.lt-head .lt-round { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.lt-pad { width: 34px; flex-shrink: 0; }
.lt-user { font-size: 12px; color: #6b7f84; text-align: right; line-height: 1.2; }

/* ---- Booklet list ---- */
#lt-body { background: #fff; border: 1px solid #d6e6e9; border-radius: 8px; overflow: hidden; }
.lt-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: 0; border-bottom: 1px solid #f0f4f5; background: none; text-align: left; cursor: pointer;
}
.lt-item:last-child { border-bottom: 0; }
.lt-item:hover { background: #f6fafb; }
.lt-item b {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #e8f2f4; color: #1a6b7a;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.lt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lt-txt strong { font-size: 15px; font-weight: 700; color: #1d2a26; }
.lt-txt small { font-size: 12px; color: #6b7f84; }
.lt-item > .lt-ic { font-size: 16px; color: #9fb4b9; }
.lt-item.done b { background: #1a6b7a; color: #fff; }
.lt-item.done > .lt-ic { color: #26a65b; }
.lt-empty { padding: 30px 12px; text-align: center; color: #888; }

/* ---- Reader ---- */
#lt-stage, #lt-stage * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.lt-reading .lt-wrap { padding: 0 2px; }
body.lt-reading .lt-head { margin: 0 2px 6px; }
#lt-v-head {
  position: sticky; top: 0; z-index: 900; cursor: pointer; -webkit-tap-highlight-color: transparent; margin: 0 -2px 4px; padding: 4px 6px;
  background: #f4f5fa; box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
/* One page at a time, sized to fit between the title bar and the page bar; it only scrolls when zoomed */
#lt-scroll { overflow: hidden; touch-action: none; overscroll-behavior: contain; }
#lt-scroll.zoomed { overflow: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
#lt-stage { position: relative; margin: 0 auto; perspective: 1800px; }
.lt-page { position: absolute; inset: 0; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.2); }
.lt-page::before {
  content: attr(data-page); position: absolute; top: 50%; left: 0; right: 0;
  text-align: center; color: #ccc; font-size: 28px; transform: translateY(-50%);
}
.lt-page canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#lt-stage.lt-hidden canvas { filter: blur(25px); }
/* A turning page: strips hinged one to the next (driven by addLeaf). The booklets read right to
   left, so pages turn over the right edge (the spine) */
.lt-leaf { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-style: preserve-3d; }
.lt-strip { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; transform-origin: right center; }
.lt-leaf > .lt-strip { right: 0; }
.lt-strip .lt-strip { right: 100%; }
.lt-face {
  position: absolute; top: 0; bottom: 0; left: -1px; right: 0; background: #fff; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.lt-face canvas { display: block; width: 100%; height: 100%; }
.lt-face.b { transform: rotateY(180deg); background: linear-gradient(to left, #e6e1d6, #f6f4ef 35%, #fbfaf7); }
.lt-dim { position: absolute; inset: 0; background: #000; opacity: 0; }
.lt-cast {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,.1) 30%, rgba(0,0,0,0) 65%);
}
#lt-bar { padding: 6px 4px 4px; }
#lt-slider { display: block; width: 100%; margin: 0 0 6px; accent-color: #1a6b7a; cursor: pointer; }
.lt-bar-row { display: flex; align-items: center; gap: 6px; }
.lt-bar-row .lt-round:disabled { opacity: .35; cursor: default; }
.lt-round small { font-size: 10px; font-weight: 600; }
#lt-offline.saved { background: #26a65b; color: #fff; }
.lt-head .lt-btn.sm { flex-shrink: 0; }
#lt-pg { flex: 1; text-align: center; font-size: 13px; color: #1d2a26; white-space: nowrap; }
#lt-zoom { display: flex; align-items: center; background: #f0f5f6; border-radius: 17px; color: #1a6b7a; }
#lt-zoom button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: #1a6b7a; font-size: 15px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
#lt-zoom span { min-width: 40px; text-align: center; font-size: 12px; cursor: pointer; }
@media (max-width: 420px) { #lt-zoom { display: none; } }
#lt-done {
  flex-shrink: 0; border: 1px solid #1a6b7a; background: #fff; color: #1a6b7a; border-radius: 17px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
#lt-done.done { background: #26a65b; border-color: #26a65b; color: #fff; }
#lt-resume {
  display: none; position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 1000;
  align-items: center; gap: 10px; white-space: nowrap; font-size: 13px;
  background: rgba(29,42,38,.92); color: #fff; border-radius: 20px; padding: 6px 6px 6px 14px;
}
#lt-resume.show { display: flex; }
#lt-resume button { border: 0; border-radius: 14px; background: #d8b46a; color: #1d2a26; font-weight: 600; padding: 4px 10px; cursor: pointer; }
#lt-shield {
  display: none; position: fixed; inset: 0; z-index: 99999; background: #000; color: #fff; font-size: 18px;
  align-items: center; justify-content: center; text-align: center; padding: 20px;
}
#lt-shield.show { display: flex; }

@media print {
  body.lt-reading * { visibility: hidden !important; }
  body.lt-reading::after {
    content: 'Printing this booklet is not allowed.';
    visibility: visible; position: fixed; top: 40%; left: 0; right: 0; text-align: center; font-size: 24px;
  }
}

/* ---- Sign in ---- */
.lt-login { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.lt-login .lt-card { padding: 22px 20px; }
.lt-login h1 { margin: 0 0 4px; font-size: 22px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; color: #1a6b7a; }
.lt-login p { text-align: center; margin: 0 0 16px; }
.lt-google { display: flex; justify-content: center; min-height: 44px; }

/* ---- Admin cards, forms, tables ---- */
.lt-admin { margin-top: 24px; }
.lt-card { background: #fff; border: 1px solid #e3e8ea; border-radius: 8px; margin-bottom: 16px; }
.lt-card h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid #eef2f3; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.lt-card h2 small { font-weight: normal; }
.lt-card h2 .lt-btn { margin-left: auto; }
.lt-card-body { padding: 14px 16px; }
.lt-input {
  display: block; width: 100%; padding: 7px 10px; border: 1px solid #cfd9dc; border-radius: 6px; background: #fff;
}
.lt-input:focus { outline: 0; border-color: #1a6b7a; box-shadow: 0 0 0 2px rgba(26,107,122,.15); }
.lt-input.sm { padding: 4px 8px; }
.lt-field { margin-bottom: 12px; flex: 1; min-width: 0; }
.lt-field label { display: block; font-size: 12px; color: #6b7f84; margin-bottom: 3px; }
.lt-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.lt-row > .lt-field { min-width: 140px; }
.lt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px;
  border: 1px solid #1a6b7a; border-radius: 6px; background: #1a6b7a; color: #fff; cursor: pointer; text-decoration: none; font-weight: 600;
}
.lt-btn:disabled { opacity: .6; cursor: default; }
.lt-btn.outline { background: #fff; color: #1a6b7a; }
.lt-btn.danger { background: #fff; color: #c0392b; border-color: #e3a49d; }
.lt-btn.sm { padding: 3px 10px; font-size: 12px; font-weight: normal; }
.lt-progress { height: 8px; background: #e8f2f4; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.lt-progress span { display: block; height: 100%; width: 0; background: #1a6b7a; transition: width .2s; }
.lt-alert { padding: 10px 14px; border-radius: 6px; background: #fdecea; color: #a93226; margin-bottom: 12px; }
.lt-table-wrap { overflow-x: auto; }
.lt-table { width: 100%; border-collapse: collapse; }
.lt-table th, .lt-table td { padding: 6px 8px; border-bottom: 1px solid #eef2f3; text-align: left; vertical-align: middle; }
.lt-table th { font-size: 12px; color: #6b7f84; font-weight: 600; }
.lt-table .nowrap td, .lt-table.nowrap td, .lt-table.nowrap th { white-space: nowrap; }
.lt-seq { width: 70px; }
.lt-log { max-height: 420px; overflow-y: auto; }
.lt-bar-pct { height: 6px; background: #e8f2f4; border-radius: 3px; overflow: hidden; min-width: 80px; }
.lt-bar-pct span { display: block; height: 100%; background: #1a6b7a; }
.lt-bar-pct.full span { background: #26a65b; }