:root {
    /*--background-color-L1-light: #b5dfff !important; /* Light blue */
    --background-color-L1-light: #eeeff1 !important; /* #c3e2ff; */
    --background-color-L1-dark: #1f2937 !important;
}

/* ############################################################################## */ 
/* Container Widths to Full Page*/
/* ############################################################################## */ 

.change-form .container {
    width: 100% !important;
    max-width: none !important;
}

/* Match section header height to the tabs bar (~38px) */
:root {
  --section-header-height: 38px; /* same as tabs container computed height */
}

/* Keep padding on section headers ("Details", "Audit", etc) */
.change-form .colM fieldset.module > h2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-height: var(--section-header-height) !important;
  height: var(--section-header-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important; /* vertically center “Details” / “Audit” */
  background-color: var(--background-color-L1-light) !important;  
}

.dark .change-form .colM fieldset.module > h2 {
    background-color: var(--background-color-L1-dark) !important; 
}

.container {
    width: 100% !important;
    max-width: none !important;
}

/* ############################################################################## */ 
/* Grids - Header */
/* ############################################################################## */ 

#result_list thead th {
    padding-top: 8px !important; /* Matches lg:py-3 from table rows */
    padding-bottom: 8px !important;
}

@media (min-width: 1024px) {
    #result_list thead th {
        background-color: var(--background-color-L1-light) !important;
    }

    .dark #result_list thead th {
        background-color: var(--background-color-L1-dark) !important;
    }
}

/* ############################################################################## */ 
/* Grids - Rows */
/* ############################################################################## */ 

#result_list tbody tr {
    min-height: 36px !important; /* Define a altura mínima de 36px para cada linha */
}

#result_list tbody tr td,
#result_list tbody tr th {
    padding-top: 8px !important; /* Adjust upper padding to 8px (helps to fit on 36px with standard text) */
    padding-bottom: 8px !important; /* Ajust lower padding to 8px */
    height: auto !important; /* Allows a cell or an entire row to grow along its contents (e.g. in case of line breaks) */
    white-space: normal !important; /* Allows automatic word-wrapping if text exceeds standard space */
}

/* ############################################################################## */ 
/* Sidebar Items */
/* ############################################################################## */ 

#nav-sidebar a.bg-base-100 {
    /* background-color: #b5dfff !important;  Cor de fundo para item selecionado */
    background-color: var(--background-color-L1-light) !important; /* Cor de fundo para item selecionado  C1C7D1*/
    /* font-weight: normal !important; Garante que a fonte não seja bold */
}

.dark #nav-sidebar a.bg-base-100 {
    background-color: var(--background-color-L1-dark) !important; /* Versão escura */
}

/* Reduce height of sidebar items to 36px max, minimizing vertical spacing */
#nav-sidebar-inner ol.flex.flex-col.gap-1 > li > a.flex.items-center {
    height: 32px !important;  /* Sets item height to 36px */
}

/* Optional: Reduce gap between items (from default ~4px to 2px) */
#nav-sidebar-inner ol.flex.flex-col.gap-1 {
    gap: 4px !important;  /* Smaller gap for tighter spacing */
}

/* Optional: Adjust module headers for overall compactness */
#nav-sidebar-inner h2 {
    margin-top: 2px !important;  /* Reduce space above headers (from ~8px) */
    margin-bottom: 0px !important;  /* Reduce space below headers (from ~4px) */
}

/* ############################################################################## */ 
/* Change Forms */
/* ############################################################################## */ 

/* força a remoção dos separadores pontilhados no Unfold */
.unfold form .divide-y > * + * {
    border-top: none !important;
}

/* ############################################################################## */ 
/* Adjust fonts for better spacing and visualization */
/* ############################################################################## */ 

:root {
    --emoji-font-stack:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Inter,
        Arial,
        sans-serif;
}

/* ############################################################################## */
/* Service Request Components Inline Styling */
/* ############################################################################## */

/* Global CSS for Service Request Components inline form.
   Unfold's admin/edit_inline/tabular.html has no {% block %} tags, so
   {% block inline_form_css %} in the custom inline template is never rendered;
   keep layout rules here. Unfold thead uses th.column-<name>; tbody uses td.field-<name>. */

.service-request-components-inline {
    --src-notes-match-findings-min: 240px;
}

/* Unfold tabular_group: td has align-middle — pin row content to top */
fieldset.service-request-components-inline tr.form-row > td,
fieldset.service-request-components-inline thead th {
    vertical-align: top !important;
    align-items: flex-start !important;
}

.service-request-components-inline th.column-findings,
.service-request-components-inline td.field-findings,
.service-request-components-inline th.column-notes,
.service-request-components-inline td.field-notes {
    min-width: var(--src-notes-match-findings-min);
}

.service-request-components-inline .field-findings select {
    min-width: var(--src-notes-match-findings-min);
}

/* Findings (M2M autocomplete): match Notes textarea height (120px) */
fieldset.service-request-components-inline
    .field-findings
    .select2-container.select2-container--admin-autocomplete
    .select2-selection--multiple {
    min-height: 120px !important;
    max-height: 120px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

fieldset.service-request-components-inline
    .field-findings
    .select2-container.select2-container--admin-autocomplete
    .select2-selection--multiple
    .select2-selection__rendered {
    max-height: 106px !important;
    overflow-y: auto !important;
}

/* Notes field - keep height consistent with image widgets */
.service-request-components-inline .field-notes textarea,
textarea.service-request-notes-field {
    max-height: 120px !important;
    min-height: 120px !important;
    overflow-y: auto !important;
    resize: vertical !important;
    line-height: 1.5;
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

/* Image preview column */
.service-request-components-inline .field-image_preview img {
    max-width: 60px;
    max-height: 80px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: block;
}

/* Image upload widget container */
.service-request-image-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

/* Image upload button/input styling */
.service-request-components-inline .field-image input[type="file"] {
    font-size: 12px;
    padding: 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    max-width: 250px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.service-request-components-inline .field-image input[type="file"]:hover {
    border-color: #0ea5e9;
    background-color: #f0f9ff;
}

/* Dark mode support */
.dark .service-request-components-inline .field-image_preview img {
    border-color: #4b5563;
}

.dark .service-request-components-inline .field-image input[type="file"] {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark .service-request-components-inline .field-image input[type="file"]:hover {
    border-color: #0ea5e9;
    background-color: #374151;
}

.dark textarea.service-request-notes-field {
    background-color: #1f2937;
    border: 1px solid #4b5563;
    color: #f3f4f6;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .service-request-components-inline .field-notes textarea,
    textarea.service-request-notes-field {
        max-height: 120px !important;
        min-height: 120px !important;
    }
    
    .service-request-components-inline .field-image_preview img {
        max-width: 50px;
        max-height: 70px;
    }
    
    .service-request-components-inline .field-image input[type="file"] {
        max-width: 100%;
        font-size: 11px;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .service-request-components-inline .field-notes textarea,
    textarea.service-request-notes-field {
        max-height: 120px !important;
        min-height: 120px !important;
    }
}

/* Focus states for better accessibility */
.service-request-components-inline input:focus,
.service-request-components-inline textarea:focus,
.service-request-components-inline select:focus {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
    border-color: #0ea5e9;
}

fieldset.service-request-checkio-inline input:focus,
fieldset.service-request-checkio-inline textarea:focus,
fieldset.service-request-checkio-inline select:focus {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
    border-color: #0ea5e9;
}

/* ############################################################################## */
/* Service Request Check-In/Out tabular inline — CSS only (no vendor template overrides). */
/* InlineModelAdmin.classes includes service-request-checkio-inline on the fieldset. */
/* Unfold 0.104+: tabular cells are always table-cell (no flex/mobile stack on td). */
/* ############################################################################## */

fieldset.service-request-checkio-inline {
    --checkio-findings-width: 240px;
}

/* Findings + Notes: same min-width for consistent column sizing */
fieldset.service-request-checkio-inline th.column-checkin_findings,
fieldset.service-request-checkio-inline td.field-checkin_findings,
fieldset.service-request-checkio-inline th.column-checkin_notes,
fieldset.service-request-checkio-inline td.field-checkin_notes {
    min-width: var(--checkio-findings-width);
}

/* Findings select2: match components notes height (120px) */
fieldset.service-request-checkio-inline
    .field-checkin_findings
    .select2-container.select2-container--admin-autocomplete
    .select2-selection--multiple {
    min-height: 120px !important;
    max-height: 120px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

fieldset.service-request-checkio-inline
    .field-checkin_findings
    .select2-container.select2-container--admin-autocomplete
    .select2-selection--multiple
    .select2-selection__rendered {
    max-height: 106px !important;
    overflow-y: auto !important;
}

/* Check-in notes textarea: match components notes height (120px) */
fieldset.service-request-checkio-inline .field-checkin_notes textarea {
    min-height: 120px !important;
    max-height: 120px !important;
    overflow-y: auto !important;
    resize: vertical !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    line-height: 1.5;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
}

/* Check-out notes: match components notes height (120px) */
fieldset.service-request-checkio-inline .field-checkout_notes textarea {
    min-height: 120px !important;
    max-height: 120px !important;
    overflow-y: auto !important;
    resize: vertical !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    width: 100%;
    line-height: 1.5;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
}

.dark fieldset.service-request-checkio-inline .field-checkin_notes textarea,
.dark fieldset.service-request-checkio-inline .field-checkout_notes textarea {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

/* Desktop: let table auto-layout handle column widths naturally */
@media (min-width: 1024px) {
    /* Title column: handle + input in normal flow (Unfold already wraps in flex row) */
    fieldset.service-request-checkio-inline th.column-checkin_title {
        padding-left: 2.75rem !important;
    }
    
    fieldset.service-request-checkio-inline td.field-checkin_title {
        width: 22rem;
        max-width: 22rem;
    }
    
    /* Image columns: fixed narrow width */
    fieldset.service-request-checkio-inline td.field-checkin_image,
    fieldset.service-request-checkio-inline td.field-checkout_image {
        width: 152px;
        max-width: 152px;
    }
    
    /* Findings + Notes: let them share remaining space with min-width floor */
    fieldset.service-request-checkio-inline td.field-checkin_findings,
    fieldset.service-request-checkio-inline td.field-checkin_notes {
        width: auto;
    }
    
    /* Check-out notes: flexible */
    fieldset.service-request-checkio-inline td.field-checkout_notes {
        width: auto;
    }
}

/* Padding adjustments */
fieldset.service-request-checkio-inline td {
    vertical-align: top;
    padding: 8px 4px;
}

fieldset.service-request-checkio-inline td.field-checkin_title {
    padding-right: 12px !important;
}

fieldset.service-request-checkio-inline td.field-checkin_image {
    padding-right: 12px !important;
}

fieldset.service-request-checkio-inline td.field-checkin_findings {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

fieldset.service-request-checkio-inline td.field-checkin_notes {
    padding-left: 4px !important;
    padding-right: 12px !important;
}


/* django-unfold nested inlines: fallback if templates are not overridden */
.change-form .form-nested .bg-striped {
    background-image: none !important;
    background-color: var(--color-base-100, #f3f4f6);
}

.dark .change-form .form-nested .bg-striped {
    background-color: var(--color-base-800, #1f2937);
}

/* ############################################################################## */
/* Adjacent record nav (Finder-style capsule) */
/* ############################################################################## */

.nexus-adjacent-nav {
    align-items: stretch;
    background-color: #ffffff;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    box-shadow: 0 0.5px 0.5px rgba(17, 24, 39, 0.06);
    display: inline-flex;
    flex-shrink: 0;
    height: 24px;
    margin-right: 8px;
    overflow: hidden;
}

.dark .nexus-adjacent-nav {
    background-color: var(--color-base-800, #1f2937);
    border-color: var(--color-base-600, #4b5563);
    box-shadow: none;
}

.nexus-adjacent-nav a,
.nexus-adjacent-nav > span {
    align-items: center;
    color: #3f3f46;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    width: 28px;
}

.dark .nexus-adjacent-nav a,
.dark .nexus-adjacent-nav > span {
    color: var(--color-base-200, #e5e7eb);
}

.nexus-adjacent-nav [data-adjacent-nav="prev"] {
    border-right: 1px solid #e4e4e7;
}

.dark .nexus-adjacent-nav [data-adjacent-nav="prev"] {
    border-right-color: var(--color-base-600, #4b5563);
}

.nexus-adjacent-nav > span[aria-disabled="true"] {
    color: #d4d4d8;
    cursor: default;
    pointer-events: none;
}

.dark .nexus-adjacent-nav > span[aria-disabled="true"] {
    color: var(--color-base-600, #4b5563);
}

.nexus-adjacent-nav a:hover {
    background-color: #f4f4f5;
}

.dark .nexus-adjacent-nav a:hover {
    background-color: var(--color-base-700, #374151);
}

.nexus-adjacent-nav .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: "wght" 400, "opsz" 20;
    line-height: 1;
}

/* ############################################################################## */
/* Admin Django messages as corner toasts (R-000108) */
/* ############################################################################## */

.nexus-admin-toasts {
    position: fixed;
    top: 4.75rem;
    right: 1.25rem;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: min(28rem, calc(100vw - 2rem));
    pointer-events: none;
}

.nexus-admin-toast {
    pointer-events: auto;
    position: relative;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    border-radius: var(--border-radius, 6px);
}

.dark .nexus-admin-toast {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.nexus-admin-toast > div {
    margin-bottom: 0 !important;
    padding-right: 2.25rem;
}

.nexus-admin-toast-close {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.55;
}

.nexus-admin-toast-close:hover {
    opacity: 1;
}

.nexus-admin-toast-close .material-symbols-outlined {
    font-size: 16px;
    font-variation-settings: "wght" 400, "opsz" 20;
    line-height: 1;
}