/* flaskapp/static/css/docs.css */

/* Palette – mirror main.css so docs.css is self-contained */
:root,
html[data-bs-theme="dark"] {
  --baltic-blue: #336699;
  --sky-reflection: #86BBD8;
  --charcoal-blue: #2f4858;
  --light-green: #9ee493;
  --frosted-mint: #daf7dc;

  --bs-body-bg: var(--frosted-mint);
  --bs-body-color: var(--charcoal-blue);
}

/* Shared scope: any survey document body */
:is(.doc-modal-body, #document-root[data-doc-slug]) {
  background-color: var(--frosted-mint);
  color: var(--charcoal-blue);
  font-size: 0.95rem;
}

/* Make tall docs scrollable inside modals */
.doc-modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* Typography ------------------------------------------------ */

:is(.doc-modal-body, #document-root[data-doc-slug]) h1,
:is(.doc-modal-body, #document-root[data-doc-slug]) h2,
:is(.doc-modal-body, #document-root[data-doc-slug]) h3,
:is(.doc-modal-body, #document-root[data-doc-slug]) h4,
:is(.doc-modal-body, #document-root[data-doc-slug]) h5,
:is(.doc-modal-body, #document-root[data-doc-slug]) h6 {
  color: var(--charcoal-blue);
}

:is(.doc-modal-body, #document-root[data-doc-slug]) p,
:is(.doc-modal-body, #document-root[data-doc-slug]) li {
  color: rgba(47, 72, 88, 0.96);
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .text-muted,
:is(.doc-modal-body, #document-root[data-doc-slug]) .text-secondary {
  color: rgba(47, 72, 88, 0.78) !important;
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .form-label,
:is(.doc-modal-body, #document-root[data-doc-slug]) label {
  color: var(--charcoal-blue);
  font-weight: 500;
}

/* Panels / cards ------------------------------------------- */

:is(.doc-modal-body, #document-root[data-doc-slug]) .card.bg-body-tertiary {
  background-color: var(--sky-reflection) !important;
  color: var(--charcoal-blue);
  border: 0;
}

/* Controls: inputs / selects / textareas ------------------- */

:is(.doc-modal-body, #document-root[data-doc-slug]) .form-control,
:is(.doc-modal-body, #document-root[data-doc-slug]) .form-select,
:is(.doc-modal-body, #document-root[data-doc-slug]) textarea {
  background-color: #ffffff;
  color: var(--charcoal-blue);
  border-color: rgba(47, 72, 88, 0.3);
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .form-control::placeholder,
:is(.doc-modal-body, #document-root[data-doc-slug]) textarea::placeholder {
  color: rgba(47, 72, 88, 0.55);
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .form-control:focus,
:is(.doc-modal-body, #document-root[data-doc-slug]) .form-select:focus,
:is(.doc-modal-body, #document-root[data-doc-slug]) textarea:focus {
  border-color: var(--baltic-blue);
  box-shadow: 0 0 0 0.16rem rgba(51, 102, 153, 0.25);
}

/* Date / time inputs + calendar / time icons --------------- */
/* Inputs themselves */
.sample-receipt-table input[type="date"],
.doc-table input[type="date"],
:is(.doc-modal-body, #document-root[data-doc-slug]) input[type="date"],
:is(.doc-modal-body, #document-root[data-doc-slug]) input[type="time"] {
  color: var(--charcoal-blue);
  background-color: var(--frosted-mint);
  border-color: var(--sky-reflection);
}

/* Darker calendar icon (WebKit / Chromium) */
.sample-receipt-table input[type="date"]::-webkit-calendar-picker-indicator,
.doc-table input[type="date"]::-webkit-calendar-picker-indicator,
:is(.doc-modal-body, #document-root[data-doc-slug])
  input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0.2) saturate(1.4); /* darker + richer */
  opacity: 0.95;
  cursor: pointer;
}

/* Darker time icon (same treatment as calendar icon) */
:is(.doc-modal-body, #document-root[data-doc-slug])
  input[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0.2) saturate(1.4);
  opacity: 0.95;
  cursor: pointer;
}

/* File inputs (Choose file button) ------------------------- */

:is(.doc-modal-body, #document-root[data-doc-slug]) input[type="file"] {
  color: var(--charcoal-blue);
}

/* Standard selector button (modern) */
:is(.doc-modal-body, #document-root[data-doc-slug])
  input[type="file"]::file-selector-button {
  background-color: var(--charcoal-blue);
  color: #ffffff;
  border: 1px solid rgba(15, 32, 45, 0.9);
  padding: 0.375rem 0.75rem;
  margin-right: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

/* WebKit fallback */
:is(.doc-modal-body, #document-root[data-doc-slug])
  input[type="file"]::-webkit-file-upload-button {
  background-color: var(--charcoal-blue);
  color: #ffffff;
  border: 1px solid rgba(15, 32, 45, 0.9);
  padding: 0.375rem 0.75rem;
  margin-right: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

:is(.doc-modal-body, #document-root[data-doc-slug])
  input[type="file"]::file-selector-button:hover,
:is(.doc-modal-body, #document-root[data-doc-slug])
  input[type="file"]::-webkit-file-upload-button:hover {
  filter: brightness(1.06);
}

/* Tables --------------------------------------------------- */

:is(.doc-modal-body, #document-root[data-doc-slug]) .table {
  background-color: transparent;
  color: var(--charcoal-blue);
  border-color: rgba(47, 72, 88, 0.2);
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .table th,
:is(.doc-modal-body, #document-root[data-doc-slug]) .table td {
  border-color: rgba(47, 72, 88, 0.25);
}

/* Force header contrast even when using .table-dark/light */
:is(.doc-modal-body, #document-root[data-doc-slug]) .table thead,
:is(.doc-modal-body, #document-root[data-doc-slug]) .table thead tr,
:is(.doc-modal-body, #document-root[data-doc-slug]) .table thead th {
  background-color: var(--baltic-blue) !important;
  color: #ffffff !important;
}

/* Darker body text (survey rows) */
:is(.doc-modal-body, #document-root[data-doc-slug]) .table tbody td,
:is(.doc-modal-body, #document-root[data-doc-slug]) .table tbody th {
  color: rgba(47, 72, 88, 0.98);
}

/* Specifically for <tbody class="small"> performance table */
:is(.doc-modal-body, #document-root[data-doc-slug]) .table tbody.small td {
  font-size: 0.86rem;
  color: rgba(47, 72, 88, 0.98);
}

/* Signature boxes / preview panels ------------------------- */

:is(.doc-modal-body, #document-root[data-doc-slug]) .sig-box,
:is(.doc-modal-body, #document-root[data-doc-slug]) .signature-box,
:is(.doc-modal-body, #document-root[data-doc-slug]) .doc-signature-box {
  background-color: #c9f1c0;
  border: 1px solid rgba(47, 72, 88, 0.4);
  color: var(--charcoal-blue);
}

/* Many templates used bg-dark for signature areas – lighten it
   only inside docs so text stays readable */
:is(.doc-modal-body, #document-root[data-doc-slug]) .bg-dark {
  background-color: #c9f1c0 !important;
  color: var(--charcoal-blue) !important;
}

/* Signature canvases (drawn signatures) -------------------- */

:is(.doc-modal-body, #document-root[data-doc-slug]) canvas {
  background-color: #a7c9e5;
  border-radius: 0.5rem;
  border: 1px dashed rgba(47, 72, 88, 0.35);
}

/* Buttons inside documents -------------------------------- */

:is(.doc-modal-body, #document-root[data-doc-slug]) .btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--baltic-blue);
  --bs-btn-border-color: var(--baltic-blue);
  --bs-btn-hover-bg: #28507a;
  --bs-btn-hover-border-color: #28507a;
  --bs-btn-active-bg: #234367;
  --bs-btn-active-border-color: #234367;
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .btn-outline-light {
  --bs-btn-color: var(--charcoal-blue);
  --bs-btn-border-color: var(--charcoal-blue);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--charcoal-blue);
  --bs-btn-hover-border-color: var(--charcoal-blue);
}

/* Scrollbars ----------------------------------------------- */

#document-root[data-doc-slug] {
  scrollbar-width: thin;
  scrollbar-color: #4b7f68 #d5efe1;
}

#document-root[data-doc-slug]::-webkit-scrollbar {
  width: 10px;
}

#document-root[data-doc-slug]::-webkit-scrollbar-track {
  background-color: #d5efe1;
}

#document-root[data-doc-slug]::-webkit-scrollbar-thumb {
  background-color: #4b7f68;
  border-radius: 999px;
  border: 2px solid #d5efe1;
}

/* If the scroll is on .doc-modal-body instead of #document-root */
.doc-modal-body {
  scrollbar-width: thin;
  scrollbar-color: #4b7f68 #d5efe1;
}

.doc-modal-body::-webkit-scrollbar {
  width: 10px;
}

.doc-modal-body::-webkit-scrollbar-track {
  background-color: #d5efe1;
}

.doc-modal-body::-webkit-scrollbar-thumb {
  background-color: #4b7f68;
  border-radius: 999px;
  border: 2px solid #d5efe1;
}

/* Document modals: let content control body height (remove big empty band) */
.modal-fullscreen .modal-body.doc-modal-body {
  flex: 0 0 auto;       /* override Bootstrap's flex: 1 1 auto */
}

/* Keep scrolling behaviour for tall docs */
.modal-dialog-scrollable .modal-body.doc-modal-body {
  max-height: calc(100vh - 4rem - 4rem); /* header + footer approx */
  overflow-y: auto;
}

/* Gauging Ticket tabs – align with docs palette */

:is(.doc-modal-body, #document-root[data-doc-slug]) .nav-tabs {
  border-bottom: 1px solid rgba(47, 72, 88, 0.35);
  margin-bottom: 0.5rem;
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .nav-tabs .nav-link {
  color: rgba(47, 72, 88, 0.82);
  background-color: var(--frosted-mint);
  border: 1px solid transparent;
  border-bottom-color: rgba(47, 72, 88, 0.25);
  border-radius: 0.75rem 0.75rem 0 0;
  margin-right: 0.25rem;
  padding: 0.45rem 0.9rem;
  font-weight: 500;
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .nav-tabs .nav-link:hover {
  background-color: var(--sky-reflection);
  color: var(--charcoal-blue);
  border-color: rgba(47, 72, 88, 0.25);
  border-bottom-color: var(--baltic-blue);
}

:is(.doc-modal-body, #document-root[data-doc-slug]) .nav-tabs .nav-link.active {
  color: #ffffff;
  background-color: var(--baltic-blue);
  border-color: var(--baltic-blue) var(--baltic-blue) var(--frosted-mint);
}

/* Tab content panel under the tickets */
:is(.doc-modal-body, #document-root[data-doc-slug]) #gtTicketTabContent {
  border: 1px solid rgba(47, 72, 88, 0.25);
  border-radius: 0 0.75rem 0.75rem 0.75rem;
  border-top-left-radius: 0;
  background-color: rgba(218, 247, 220, 0.85); /* frosted-mint tint */
  padding: 1rem 1rem 0.5rem;
}