@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alegreya:300,400,500,700&display=swap');

:root {
    /* Height of the fixed header used to calculate available viewport space for incident pages */
    --app-header-height: 72px; /* tweak if your toolbar bar has a different height */
}

/* When the navbar is fixed the page content should be offset so it isn't
   hidden under the header. We use the CSS variable so the value can be
   adjusted at runtime for responsive/header size changes. */
body {
    padding-top: var(--app-header-height);
}

.logo {
    user-select: none;
    height: 40px;
}

/* Signature canvas helper — ensure canvases are visible and have a minimum height */
.signature-canvas {
  display: block;
  min-height: 120px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  background: transparent;
}
.signature-wrapper { position: relative; }
.signature-canvas-wrapper { position: relative; }
.signature-placeholder {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.45);
  pointer-events: none;
  font-size: 1rem;
}
[data-bs-theme="dark"] .signature-placeholder,
.dark-theme .signature-placeholder {
  color: rgba(255,255,255,0.55);
}

.signature-captured { max-height: 120px; margin-left: .5rem; border: 1px solid #ddd; background: #fff; }
.signature-captured.d-none { display: none; }

.discworld {
    font-weight: 900;
    font-family: 'Cinzel Decorative', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}

.convention {
    font-weight: 400;
    font-family: 'Alegreya', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
    font-size: 66%;
}

.language-dropdown {
    width: 100px;
}

/* Make incident sidebar sections scrollable when large */
/* Constrain right-column panels to keep page height stable */
.col-md-4 .scrollable-section {
    max-height: 360px; /* fits comfortably within side column */
    overflow-y: auto;
    padding-right: 8px; /* space for scrollbar */
}

/* Smaller on mobile */
@media (max-width: 800px) {
    .col-md-4 .scrollable-section {
        max-height: 220px;
    }
}

/* Fine-tune attachments previews in the sidebar so they don't blow out height */
#attachments-list img,
#attachments-list video {
    max-height: 160px;
    width: auto;
    display: block;
    margin-bottom: .5rem;
    object-fit: contain;
}

/* Slight visual hint when a section is scrollable */
.col-md-4 .scrollable-section {
    position: relative;
}
.col-md-4 .scrollable-section::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 24px;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(0,0,0,0.05));
}

/* Make right-column cards equal height and let their bodies scroll */
.col-md-4 .right-panels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}
.col-md-4 .right-panels .card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}
.col-md-4 .right-panels .card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* important for overflow to work inside flex */
}
.col-md-4 .right-panels .card .scrollable-section {
    overflow-y: auto;
    /* Ensure the scrollable area flexes to fill the card body and does not leave empty space */
    flex: 1 1 auto;
    min-height: 0; /* allow the flex child to shrink correctly */
    max-height: none; /* override any global max-height so it can fill the parent's space */
    padding-right: 8px;
}

/* Left-column scrollable sections (statements, log entries, confidentiality) */
.col-md-8 .scrollable-section {
    /* Limit the height so sections fill the left column without extending the page
       Calculation leaves room for header + other top content; adjust the 300px as needed */
    max-height: calc(100vh - var(--app-header-height) - 300px);
    overflow-y: auto;
    padding-right: 8px;
}
/* Smaller on mobile */
@media (max-width: 800px) {
    .col-md-8 .scrollable-section {
        max-height: 300px;
    }
}

/* ITEM OVERVIEW PREVIEWS (truncate long rich-text on overview lists) */
.item-overview {
  /* Multiline clamp to 3 lines with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.8em; /* fallback for line-clamp (approx 1.6em per line) */
  color: inherit; /* preserve text colour */
}

.card .card-body > div:first-child {
  min-width: 0; /* allow flex child to shrink for text-overflow to work */
}
.card .card-body .ms-3 {
  flex: 0 0 auto; /* don't let the actions column shrink */
  display: flex;
  align-items: start;
}
.card .card-body .btn-group {
  white-space: nowrap; /* keep buttons on a single line */
}
.btn {
  white-space: nowrap;
}

/* Ensure left-column cards behave like flex containers so their bodies can scroll correctly */
.col-md-8 .card {
    display: flex;
    flex-direction: column;
}
.col-md-8 .card .card-body {
    min-height: 0; /* allow children to flex and overflow */
    flex: 1 1 auto;
}

/* Make incident container fill remaining viewport height so right-panels stretch */
.incident-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* allow it to take remaining space inside body (which is already a column flex) */
    min-height: calc(100vh - var(--app-header-height)); /* ensure the page content area fits the viewport under the header */
    height: calc(100vh - var(--app-header-height)); /* enforce exact height so children can stretch */
}
.incident-container > .row {
    height: 100%;
    /* Let Bootstrap's `.row` control column layout; avoid forcing `.row` to be a flex container which breaks the grid on some browsers */
}
/* Make the two columns fill height and allow body sections to scroll */
.incident-container .col-md-8,
.incident-container .col-md-4 {
    display: flex;
    flex-direction: column;
    /* Do not override Bootstrap column widths (avoid setting `flex: ...`) */
}
.incident-container .col-md-8 {
    overflow: auto; /* left column scrolls if very tall */
}
.incident-container .col-md-4 .right-panels {
    height: 100%;
    margin-top: 0; /* remove unexpected top spacing so panels align with left column */
}

.ql-toolbar.ql-snow {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}
.ql-editor {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}