@font-face {
  font-family: 'Assistant';
  font-weight: 200 800;
  font-style: normal;
  src: url('fonts/Assistant-VariableFont_wght.ttf') format('truetype');
}

html {
  font-family: 'Assistant', sans-serif;
}

:root {
  --theme: rgb(82, 76, 255);
  --theme-hover: rgb(60, 55, 200);

  /* Accordion transition durations.
     --tab-corner-dur    = how long corners square/round.
     --tab-close-dur     = how long content collapses (also = delay before corners re-round).
     --tab-open-dur      = how long content expands (delay = --tab-corner-dur). */
  --tab-corner-dur: 0.4s;
  --tab-close-dur:  0.4s;
  --tab-open-dur:   1.3s;
  --accordion-nav-gap: 1vw 3vw;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background-color: rgb(19, 19, 42);
  scrollbar-gutter: stable; /* prevent layout shift when scrollbar appears */
}

body {
  font-family: Assistant, Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background: rgb(210, 214, 220);
  font-size: 13px;
  color: #111;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  align-items: stretch;
}


/* ===== LEFT PANEL ===== */
#left-panel {
  padding: var(--accordion-nav-gap);
}

/* ===== RIGHT PANEL ===== */
#right-panel {
  display: flex;
  flex-direction: column;
  position: sticky;
  height: 100%;
  direction: rtl;
  background-color: rgb(19, 19, 42);
}

#right-panel-title > *:first-child {
  color: #FF007C;
}

#right-panel-title {
  padding: 20px 24px 16px;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  text-align: center;
}

#right-panel-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--accordion-nav-gap);
  flex: 1;
  scrollbar-gutter: stable; /* prevent layout shift when scrollbar appears */
}

.r-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.r-actions-row {
  display: flex;
  gap: 8px;
}

.images-tab-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
}

.r-img-controls {
  width: 80%;
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  font-family: inherit;
}


/* ===== BUTTONS ===== */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
  transition: opacity .15s;
  font-family: inherit;
}
.btn:active { opacity: .75; }
.btn:disabled { background: #555 !important; color: #aaa !important; cursor: default; opacity: 0.6; }
.btn-save   { background: lime; color: #000; }
.btn-whatsapp     { background: lime; color: #000; }
.btn-email  { background: rgb(26, 115, 232); color: #fff; }
.btn-print  { background: #FF007C; color: #000; }
.btn-add    { background: #fff; color: #000; align-content: center; text-align: center; }
.btn-remove { background: red; color: #fff; font-size: 12px; }
.btn-clear-sig { background: #999; color: #fff;  padding: 3px 8px; margin-top: 3px; display: block; width: 100%; }

.r-actions .btn, .r-img-controls .btn {
  flex: 1;
  font-size: 1.2rem;
  font-family: inherit;
  font-weight: normal;
}

/* ===== IMAGE GRID (sidebar) ===== */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.img-thumb-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.img-thumb-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.img-remove-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(200,0,0,.8);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-rotate-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 120, 220, .85);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== SIGNATURE MODAL ===== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: rgb(210, 214, 220);
  border-radius: 10px;
  padding: 16px;
  width: min(95vw, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.modal-title {
  font-size: 25px;
  font-weight: bold;
}

.sig-pad-wrapper {
  position: relative;
  width: 100%;
}

.sig-pad {
  border: 0.2mm dashed var(--theme);
  border-radius: 6px;
  width: 380px;
  height: 200px;
  touch-action: none;
  cursor: crosshair;
  background: #fff;
  display: block;
}

/* Guide lines overlay — sits on top of the canvas but never captures events */
.sig-pad-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 6px;
  overflow: hidden;
}

/* Baseline: solid line at 72% from top */
.sig-pad-lines::before {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 72%;
  border-top: 3px solid blue;
}

/* Mid-line: faint dashed line at 40% from top */
.sig-pad-lines::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 40%;
  border-top: 3px dashed blue;
}

.modal-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== UNIT PANEL SECTIONS ===== */
.panel-unit {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  direction: rtl;
}

.panel-sig-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
  justify-content: center;
}

.panel-sig-wrap .btn-clear-sig {
  width: auto;
  writing-mode: vertical-rl;
  padding: 8px 6px;
}

.panel-sig-area {
  flex: 1;
  aspect-ratio: 2 / 1;
  max-width: 50%;
  min-height: unset !important;
  height: auto !important;
  cursor: pointer;
}



/* ===== PANEL ITEMS LIST ===== */
.panel-items-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  align-items: center;
}

.panel-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#addItemBtn {
  width: 60%;
}

/* ===== PANEL VOUCHER META (receipt / issue numbers) ===== */
.panel-voucher-meta {
  display: flex;
  gap: 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  margin-bottom: 4px;
}

.panel-item-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 6px;
}

.panel-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-item-details {
  display: flex;
  gap: 6px;
  padding-right: 28px; /* align under name, past the row number */
}

.panel-item-detail-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-item-detail-field label {
  font-size: 11px;
  color: #555;
  margin-bottom: 1px;
}

.panel-item-detail-field input {
  border: none;
  border-bottom: 1px solid #aaa;
  border-radius: 2px 2px 0 0;
  padding: 3px 4px;
  font-size: 13px;
  background: rgba(255,255,255,0.6);
  color: #111;
  direction: rtl;
  outline: none;
  font-family: inherit;
  width: 100%;
}
.panel-item-detail-field input:focus {
  background: #fff;
  border-bottom-color: var(--theme);
}

.panel-item-num {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
}

.panel-item-name {
  flex: 1;
  border: none;
  border-bottom: 2px solid #888;
  border-radius: 3px 3px 0 0;
  padding: 5px 6px;
  font-size: 16px;
  background: rgba(255,255,255,0.7);
  color: #111;
  direction: rtl;
  outline: none;
  font-family: inherit;
  width: 0; /* let flex control width */
}
.panel-item-name:focus { background: #fff; border-bottom-color: var(--theme); }

.panel-item-qty {
  width: 60px;
  border: none;
  border-bottom: 2px solid #888;
  border-radius: 3px 3px 0 0;
  padding: 5px 6px;
  font-size: 16px;
  background: rgba(255,255,255,0.7);
  color: #111;
  text-align: center;
  outline: none;
  font-family: inherit;
}
.panel-item-qty:focus { background: #fff; border-bottom-color: var(--theme); }

.panel-item-remove {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 16px;
}

/* ===== DATE PICKER WRAPPER ===== */
.date-picker-wrap {
  position: relative;
}

.date-picker-text {
  cursor: pointer;
  width: 100%;
}

.date-picker-hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ===== PANEL PROFILE ACTIONS ===== */
.panel-profile-actions {
  display: flex;
  gap: 8px;
}

.panel-profile-btn {
  flex: 1;
  font-size: 13px;
  padding: 6px 10px;
}

.panel-fields {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-field-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 80px;
}

.panel-field-group:has(#panelRankReceiver),
.panel-field-group:has(#panelRankIssuer) {
  flex: 0.2;
}

.panel-field-group:has(#panelPersonalIssuer),
.panel-field-group:has(#panelPersonalReceiver) {
  flex: 0.7;
}

.panel-field-group label {
  font-size: 20px;
  color: #444;
  margin-bottom: 2px;
}

.panel-field-group input {
  border: none;
  border-bottom: 2px solid #888;
  border-radius: 3px 3px 0 0;
  padding: 5px 6px;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.7);
  outline: none;
  font-family: inherit;
  direction: rtl;
  width: 100%;
  color: #111;
  text-align: center;
}
.panel-field-group input:focus {
  background: #fff;
  border-bottom-color: var(--theme);
}

/* ===== CAMERA MODAL ===== */
.camera-modal-box {
  width: min(95vw, 480px);
}

.camera-preview {
  width: 100%;
  max-height: 620px;
  border-radius: 6px;
  background: #000;
  display: block;
  object-fit: cover;
}

.camera-error {
  color: #c62828;
  font-size: 13px;
  text-align: center;
  padding: 8px;
}

/* ===== PRINT ===== */
@media print {
  body, #left-panel { display: contents !important; }
  html { background-color: initial !important; }
  #right-panel { display: none !important; }
}

/* ===== RESPONSIVE (phone) ===== */
@media (max-width: 700px) {
  body {
    grid-template-columns: 1fr;
  }
  #right-panel {
    position: static;
    order: -1; /* controls above the paper on mobile */
  }

  /* Reduce gap between accordion nav buttons on mobile */
  :root { --accordion-nav-gap: 1vw 2vw; }
}


/* ===== ACCORDION NAV BUTTONS ===== */
.accordion-nav-wrapper {
  display: flex;
  align-items: center;
  gap: var(--accordion-nav-gap);
}

.accordion-nav-wrapper .accordion {
  flex: 1;
  min-width: 0;
}

.accordion-nav-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: calc(50vh - 62px);
  align-self: flex-start;
}

.accordion-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--theme);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
}
.accordion-nav-btn:hover:not(:disabled) { background: var(--theme-hover); }
.accordion-nav-btn:active:not(:disabled) { opacity: .75; }
.accordion-nav-btn:disabled { background: #555; opacity: 0.4; cursor: default; }
.accordion-nav-close { background: #555; font-size: 14px; }

.accordion-nav-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1;
  user-select: none;
}

/* ===== ACCORDION (sidebar, pure CSS radio) ===== */


/* Core styles/functionality */
.tab {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 20px;
}
.tab > input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  width: 92%;
  background-color: rgb(210, 214, 220);
  align-self: center;
  max-height: 0;
  overflow: hidden;
  /* closing: collapse immediately; overflow reverts to hidden by removing the animation */
  transition: max-height var(--tab-close-dur), border-radius var(--tab-corner-dur), width var(--tab-corner-dur);
  border-radius: 2rem;
  scrollbar-gutter: stable;
}

.tab > input[type="radio"]:checked ~ .tab__content {
  max-height: 100vh;
  width: 100%;
  /* opening: wait for corners to square, then expand */
  transition: max-height var(--tab-open-dur), border-radius var(--tab-corner-dur), width var(--tab-corner-dur);
  /* overflow stays hidden throughout the opening animation;
     switches to auto only once content is fully open.
     removed when unchecked → overflow: hidden snaps back instantly. */
  animation: tab-overflow-auto 0s calc(var(--tab-corner-dur) + var(--tab-open-dur)) forwards;
  border-radius: 0 0 2rem 2rem;
}

@keyframes tab-overflow-auto {
  to { overflow: auto; }
}

/* Visual styles */
.accordion {
  overflow: hidden;
}
.tab__label,
.tab__close {
  display: flex;
  color: white;
  background: var(--theme);
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem;
  font-size: 25px;
  border-radius: 2rem;
  /* closing: wait for content to collapse, then re-round */
  transition: border-radius var(--tab-corner-dur);
}
.tab__label::after {
  content: "\276F";
  display: inline-block;
  width: 1em;
  text-align: center;
  transform: rotate(270deg);
  transition: all 0.35s;
}
.tab > input[type="radio"]:checked + .tab__label::after {
  transform: rotate(90deg);
}
.tab > input[type="radio"]:checked + .tab__label {
  border-radius: 2rem 2rem 0 0;
  /* opening: immediately square the bottom corners */
  transition: border-radius var(--tab-corner-dur);
}


.tab__close {
  justify-content: center;
  padding: 0.2em 1.2em;
  font-size: 1.5rem;
  width: fit-content;
  align-self: center;
  border-radius: 10px;
  margin: 4px auto;
}
.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab > input[type="radio"]:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(270deg) translate(.25rem);
  }
  75% {
    transform: rotate(270deg) translate(-.25rem);
  }
}

/* Feedback bar */
.feedback-bar {
  padding: 5px 10px;
  text-align: center;
}

.feedback-link {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.feedback-link.feedback-donate { color: #00FFFF; }
.feedback-sep { color: rgba(255,255,255,0.4); margin: 0 6px; }

.feedback-link.feedback-donate .feedback-icon { color: #009cde; }

.feedback-share {
  color: lime;
}

/* Google Advertisement */
#google-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#ad-disclaimer-label {
  color: #fff;
}