/**
 * Filament Admin Panel - Custom Styles
 */

/* Agenda Type radio buttons - each option 25% of parent width */
.agenda-type-fieldset .agenda-type-radio,
.agenda-type-fieldset .agenda-type-radio [class*="grid"] {
    display: flex !important;
    flex-wrap: wrap !important;
}

.agenda-type-fieldset .agenda-type-radio>*,
.agenda-type-fieldset .agenda-type-radio [class*="grid"]>* {
    width: 20% !important;
    box-sizing: border-box !important;
}

/* Remove gap from div under committee-ref-section */
.committee-ref-section .fi-sc-has-gap {
    gap: 0 !important;
}

/* Add vertical spacing between form fields in committee ref action modal */
#committee-ref-action-modal .fi-sc-has-gap {
    gap: 1rem !important;
}

/* Add vertical spacing between form fields in BOTD action modal */
#botd-action-modal .fi-sc-has-gap {
    gap: 1rem !important;
}

/*
 * Change Reading Status slide-over — also match data attribute (same as modal root) in case of ID quirks.
 * Primary layout for reading buttons is inline on native <button> in the Blade view.
 */
#botd-action-modal .botd-reading-status-actions,
[data-fi-modal-id="botd-action-modal"] .botd-reading-status-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.botd-reading-approve-native:hover:not(:disabled) {
    filter: brightness(1.08);
}

.botd-reading-approve-native:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Add vertical spacing between form fields in Unfinished Business action modal */
#unfinished-business-action-modal .fi-sc-has-gap {
    gap: 1rem !important;
}

/* Business of the Day - card layout */
.botd-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.botd-card {
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background-color: rgb(255 255 255);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    overflow: hidden;
}

.dark .botd-card {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(17 24 39);
}

.botd-card-body {
    padding: 1rem;
}

.botd-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    justify-content: space-between;
}

.botd-card-header-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.botd-reading-meta {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: left;
    color: rgb(17 24 39);
}

.botd-reading-meta p {
    margin: 0;
}

.dark .botd-reading-meta {
    color: rgb(229 231 235);
}

.botd-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background-color: rgb(72 122 6 / 0.15);
    color: rgb(72 122 6);
    flex-shrink: 0;
}

.dark .botd-type-badge {
    color: rgb(134 239 172);
}

.botd-agenda-title {
    font-size: 0.875rem;
    color: rgb(3 7 18);
    flex: 1;
    min-width: 0;
    margin: 0;
}

.dark .botd-agenda-title {
    color: rgb(255 255 255);
}

.botd-badges {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.botd-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
}

.dark .botd-badge {
    background-color: rgb(31 41 55);
    color: rgb(209 213 219);
}

.botd-card-footer {
    padding: 0.75rem 1rem;
    background-color: rgb(249 250 251);
    border-top: 1px solid rgb(229 231 235);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dark .botd-card-footer {
    background-color: rgb(255 255 255 / 0.05);
    border-top-color: rgb(255 255 255 / 0.1);
}

.botd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.botd-action-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Icon-only "more actions" (ellipsis) menu trigger — bordered so it reads as a distinct affordance */
.botd-action-menu {
    padding: 0.375rem;
    border: 1px solid rgb(209 213 219);
    background-color: rgb(255 255 255);
    color: rgb(55 65 81);
}

.botd-action-menu:hover {
    background-color: rgb(243 244 246);
}

.dark .botd-action-menu {
    border-color: rgb(255 255 255 / 0.15);
    background-color: rgb(255 255 255 / 0.05);
    color: rgb(209 213 219);
}

.dark .botd-action-menu:hover {
    background-color: rgb(255 255 255 / 0.1);
}

/* Member picker (Lead invocation, Roll Call, Moved/Seconded, Sponsor, etc.) —
   card-style radio AND checkbox options with avatars. Selection highlights the
   whole card in the brand green (#487A06). */
.member-picker {
    gap: 0.5rem !important;
    /* Clears the field label above so the first row of cards never covers it. */
    margin-top: 0.5rem;
}

/* Filament spaces column-direction options with a negative container margin plus
   1rem padding-top per option; neutralize that so spacing comes only from the
   card margins below (its selectors are more specific, hence these overrides). */
.member-picker.fi-fo-radio:not(.fi-inline).fi-grid-direction-col,
.member-picker.fi-fo-checkbox-list-options.fi-grid-direction-col {
    margin-top: 0.5rem;
}

.member-picker.fi-fo-radio:not(.fi-inline).fi-grid-direction-col > .fi-fo-radio-label {
    padding-top: 0.5rem;
}

.member-picker.fi-fo-checkbox-list-options.fi-grid-direction-col .fi-fo-checkbox-list-option-ctn {
    padding-top: 0;
}

.member-picker .fi-fo-radio-label,
.member-picker .fi-fo-checkbox-list-option {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    /* Vertical gap between rows — the options render in CSS columns, where
       `gap` only spaces the columns, so rows are spaced with a margin. */
    margin-bottom: 0.5rem;
    break-inside: avoid;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background-color: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

/* Checkbox options are wrapped in a container div — keep a card from splitting
   across two CSS columns. */
.member-picker .fi-fo-checkbox-list-option-ctn {
    break-inside: avoid;
}

/* The radio circle / checkbox square is hidden — the highlighted card is the
   selection indicator. Kept in the DOM (not display:none) so clicks and keyboard
   focus still work. */
.member-picker .fi-radio-input,
.member-picker .fi-checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.member-picker .fi-fo-radio-label:hover,
.member-picker .fi-fo-checkbox-list-option:hover {
    border-color: rgb(72 122 6 / 0.55);
    background-color: rgb(72 122 6 / 0.04);
}

.member-picker .fi-fo-radio-label:has(.fi-radio-input:focus-visible),
.member-picker .fi-fo-checkbox-list-option:has(.fi-checkbox-input:focus-visible) {
    box-shadow: 0 0 0 2px rgb(72 122 6 / 0.5);
}

.member-picker .fi-fo-radio-label:has(.fi-radio-input:checked),
.member-picker .fi-fo-checkbox-list-option:has(.fi-checkbox-input:checked) {
    border-color: rgb(72 122 6);
    background-color: rgb(72 122 6 / 0.08);
    box-shadow: 0 0 0 1px rgb(72 122 6), 0 1px 3px rgb(0 0 0 / 0.08);
}

.member-picker .fi-fo-radio-label:has(.fi-radio-input:disabled),
.member-picker .fi-fo-checkbox-list-option:has(.fi-checkbox-input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: rgb(249 250 251);
    box-shadow: none;
}

.member-picker .fi-fo-radio-label:has(.fi-radio-input:disabled):hover,
.member-picker .fi-fo-checkbox-list-option:has(.fi-checkbox-input:disabled):hover {
    border-color: rgb(229 231 235);
    background-color: rgb(249 250 251);
}

.member-picker .fi-fo-radio-label-text,
.member-picker .fi-fo-checkbox-list-option-text {
    flex: 1;
    min-width: 0;
}

.member-picker .fi-fo-radio-label-text p,
.member-picker .fi-fo-checkbox-list-option-label {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.3;
}

.dark .member-picker .fi-fo-radio-label,
.dark .member-picker .fi-fo-checkbox-list-option {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
}

.dark .member-picker .fi-fo-radio-label:hover,
.dark .member-picker .fi-fo-checkbox-list-option:hover {
    border-color: rgb(151 196 89 / 0.5);
    background-color: rgb(151 196 89 / 0.06);
}

.dark .member-picker .fi-fo-radio-label:has(.fi-radio-input:checked),
.dark .member-picker .fi-fo-checkbox-list-option:has(.fi-checkbox-input:checked) {
    border-color: rgb(151 196 89);
    background-color: rgb(151 196 89 / 0.1);
    box-shadow: 0 0 0 1px rgb(151 196 89);
}

.dark .member-picker .fi-fo-radio-label:has(.fi-radio-input:disabled),
.dark .member-picker .fi-fo-checkbox-list-option:has(.fi-checkbox-input:disabled) {
    background-color: rgb(255 255 255 / 0.03);
}

.dark .member-picker .fi-fo-radio-label:has(.fi-radio-input:disabled):hover,
.dark .member-picker .fi-fo-checkbox-list-option:has(.fi-checkbox-input:disabled):hover {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.03);
}
.botd-action-approved {
    color: rgb(22 163 74);
}

.botd-action-approved:hover {
    background-color: rgb(22 163 74 / 0.1);
}

.dark .botd-action-approved {
    color: rgb(74 222 128);
}

.dark .botd-action-approved:hover {
    background-color: rgb(22 163 74 / 0.2);
}

.botd-action-deferred {
    color: rgb(217 119 6);
}

.botd-action-deferred:hover {
    background-color: rgb(217 119 6 / 0.1);
}

.dark .botd-action-deferred {
    color: rgb(251 191 36);
}

.dark .botd-action-deferred:hover {
    background-color: rgb(217 119 6 / 0.2);
}

.botd-action-referred {
    color: rgb(37 99 235);
}

.botd-action-referred:hover {
    background-color: rgb(37 99 235 / 0.1);
}

.dark .botd-action-referred {
    color: rgb(96 165 250);
}

.dark .botd-action-referred:hover {
    background-color: rgb(37 99 235 / 0.2);
}

.botd-action-disapproved {
    color: rgb(220 38 38);
}

.botd-action-disapproved:hover {
    background-color: rgb(220 38 38 / 0.1);
}

.dark .botd-action-disapproved {
    color: rgb(248 113 113);
}

.dark .botd-action-disapproved:hover {
    background-color: rgb(220 38 38 / 0.2);
}

.botd-action-attachment {
    color: rgb(75 85 99);
}

.botd-action-attachment:hover {
    background-color: rgb(75 85 99 / 0.1);
}

.dark .botd-action-attachment {
    color: rgb(156 163 175);
}

.dark .botd-action-attachment:hover {
    background-color: rgb(156 163 175 / 0.15);
}

/* Business of the Day - constrain to container and prevent overflow */
.botd-step-wrapper,
.botd-embed-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.botd-embed-wrapper>div,
.botd-list-root {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Business of the Day table - force horizontal scrollbar to be visible */
.botd-table-scroll {
    scrollbar-gutter: stable;
}

.botd-table-scroll::-webkit-scrollbar {
    height: 10px;
}

.botd-table-scroll::-webkit-scrollbar-track {
    background: rgb(229 231 235);
    border-radius: 4px;
}

.botd-table-scroll::-webkit-scrollbar-thumb {
    background: rgb(156 163 175);
    border-radius: 4px;
}

.dark .botd-table-scroll::-webkit-scrollbar-track {
    background: rgb(55 65 81);
}

.dark .botd-table-scroll::-webkit-scrollbar-thumb {
    background: rgb(75 85 99);
}

/* Ordinance agendas slide-over: filters stay one row, right-aligned; selects not full-width */
.ordinance-agendas-list .oa-filters-bar {
    justify-content: flex-end;
}

.ordinance-agendas-list .oa-filters-bar select.fi-input {
    width: auto;
    max-width: 11rem;
}

.ordinance-agendas-list .oa-edit-btn {
    flex-direction: row;
    align-items: center;
    text-decoration: none;
}

/* Agenda relation-manager card layout (contentGrid mode) */
.ag-card-inner {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0;
}

.ag-card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.ag-card-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ag-card-right {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
    min-width: 150px;
    text-align: left;
}

.ag-reading-item {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.dark .ag-reading-item {
    color: #d1d5db;
}

.ag-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.ag-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.ag-chip-type {
    background: rgba(132, 204, 22, 0.15);
    color: #3f6212;
}

.dark .ag-chip-type {
    background: rgba(132, 204, 22, 0.2);
    color: #a3e635;
}

.ag-chip-number {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

.dark .ag-chip-number {
    background: rgba(37, 99, 235, 0.2);
    color: #93c5fd;
}

.ag-chip-plain {
    background: rgba(15, 23, 42, 0.06);
    color: #374151;
}

.dark .ag-chip-plain {
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}

.ag-chip-status-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

.ag-chip-status-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
}

.ag-chip-status-success {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

.ag-chip-status-gray {
    background: rgba(107, 114, 128, 0.12);
    color: #374151;
}

.ag-chip-status-info {
    background: rgba(59, 130, 246, 0.12);
    color: #1e40af;
}

.dark .ag-chip-status-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

.dark .ag-chip-status-danger {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.dark .ag-chip-status-success {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.dark .ag-chip-status-gray {
    background: rgba(107, 114, 128, 0.18);
    color: #d1d5db;
}

.dark .ag-chip-status-info {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

.ag-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
    color: #111827;
    margin: 0;
}

.dark .ag-card-title {
    color: #f9fafb;
}

.ag-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Create/Edit Minutes wizard: reduce scroll jump on partial Livewire updates */
.fi-minute-wizard {
    overflow-anchor: none;
}

.fi-roll-call-fieldset {
    overflow-anchor: none;
}

/* Print Minutes preview: slide-over fills the full main content area (viewport minus sidebar) */
.fi-minutes-print-slide-over {
    width: calc(100vw - var(--sidebar-width, 18rem)) !important;
    max-width: calc(100vw - var(--sidebar-width, 18rem)) !important;
}

/* Card grid layout: align checkbox to top-left corner (same level as ⋮ button) */
.fi-ta-content-grid .fi-ta-record {
    align-items: flex-start !important;
}
/* ==========================================================================
   Committee Tasks panel (Committee Report step of the minutes wizard)
   Mirrors the botd-* design language so it renders consistently — the
   Livewire view's raw Tailwind utilities get purged from Filament's build.
   ========================================================================== */
.ctask-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ctask-empty {
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

.dark .ctask-empty {
    color: rgb(156 163 175);
}

.ctask-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.ctask-progress-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(3 7 18);
}

.dark .ctask-progress-label {
    color: rgb(255 255 255);
}

.ctask-progress-count {
    font-size: 0.875rem;
    color: rgb(75 85 99);
}

.dark .ctask-progress-count {
    color: rgb(156 163 175);
}

.ctask-progress-track {
    height: 0.5rem;
    width: 100%;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
    overflow: hidden;
}

.dark .ctask-progress-track {
    background-color: rgb(255 255 255 / 0.1);
}

.ctask-progress-fill {
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(72 122 6);
    transition: width 0.2s;
}

.ctask-group {
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background-color: rgb(255 255 255);
    padding: 1rem;
}

.dark .ctask-group {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(17 24 39);
}

.ctask-group-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(3 7 18);
    margin: 0 0 0.75rem;
}

.dark .ctask-group-title {
    color: rgb(255 255 255);
}

.ctask-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ctask-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.ctask-checkbox {
    margin-top: 0.15rem;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: rgb(72 122 6);
    cursor: pointer;
}

.ctask-text {
    font-size: 0.875rem;
    color: rgb(55 65 81);
    flex: 1;
    min-width: 0;
}

.dark .ctask-text {
    color: rgb(209 213 219);
}

.ctask-text--done {
    text-decoration: line-through;
    color: rgb(156 163 175);
}

.dark .ctask-text--done {
    color: rgb(107 114 128);
}

.ctask-ai-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 0.375rem;
    background-color: rgb(72 122 6 / 0.12);
    color: rgb(72 122 6);
    vertical-align: middle;
}

.dark .ctask-ai-badge {
    color: rgb(134 239 172);
}

.ctask-remove-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid rgb(220 38 38 / 0.4);
    background-color: rgb(255 255 255);
    color: rgb(220 38 38);
    cursor: pointer;
    transition: background-color 0.15s;
}

.ctask-remove-btn:hover {
    background-color: rgb(220 38 38 / 0.08);
}

.ctask-remove-btn svg {
    width: 0.85rem;
    height: 0.85rem;
}

.dark .ctask-remove-btn {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(248 113 113 / 0.4);
    color: rgb(248 113 113);
}

.dark .ctask-remove-btn:hover {
    background-color: rgb(248 113 113 / 0.15);
}

.ctask-add {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ctask-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ctask-field--grow {
    flex: 1;
    min-width: 12rem;
}

.ctask-label {
    font-size: 0.75rem;
    color: rgb(75 85 99);
}

.dark .ctask-label {
    color: rgb(156 163 175);
}

.ctask-input,
.ctask-select {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background-color: rgb(255 255 255);
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    color: rgb(17 24 39);
}

.ctask-input:focus,
.ctask-select:focus {
    outline: none;
    border-color: rgb(72 122 6);
    box-shadow: 0 0 0 1px rgb(72 122 6);
}

.dark .ctask-input,
.dark .ctask-select {
    border-color: rgb(255 255 255 / 0.15);
    background-color: rgb(255 255 255 / 0.05);
    color: rgb(243 244 246);
}

.ctask-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    background-color: rgb(72 122 6);
    color: rgb(255 255 255);
    cursor: pointer;
    transition: background-color 0.15s;
}

.ctask-add-btn:hover {
    background-color: rgb(60 102 5);
}