/* ============================================================================
   KUDMLADOST - Custom Styles for Admin Custom Pages
   ============================================================================
   Only styles specific to custom admin pages (bulk forms, reports, etc.).
   Standard admin pages (changelist, change_form, etc.) are styled by Unfold.
   
   IMPORTANT: Never use !important on .hidden or any Tailwind utility class.
   Unfold relies on Tailwind responsive overrides (e.g., hidden lg:table-cell)
   and !important here would break them.
   ============================================================================ */

/* --- Admin tables in custom pages (attendance, equipment, financial) --- */
#attendance-table,
#payments-table,
#participants-table,
.rentals-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: 0.5rem;
    overflow: hidden;
}
.dark #attendance-table,
.dark #payments-table,
.dark #participants-table,
.dark .rentals-table {
    border-color: var(--color-base-700, #334155);
}

#attendance-table th,
#payments-table th,
#participants-table th,
.rentals-table th {
    background: var(--color-base-50, #f8fafc) !important;
    color: var(--color-font-subtle-light, #64748b);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    padding: 0.625rem 0.875rem;
    border-bottom: 2px solid var(--color-base-200, #e2e8f0);
}
.dark #attendance-table th,
.dark #payments-table th,
.dark #participants-table th,
.dark .rentals-table th {
    background: var(--color-base-800, #1e293b) !important;
    color: var(--color-font-subtle-dark, #94a3b8);
    border-bottom-color: var(--color-base-700, #334155);
}

#attendance-table td,
#payments-table td,
#participants-table td,
.rentals-table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--color-base-100, #f1f5f9);
    color: var(--color-font-important-light, #0f172a);
    transition: background-color 150ms ease;
}
.dark #attendance-table td,
.dark #payments-table td,
.dark #participants-table td,
.dark .rentals-table td {
    border-bottom-color: var(--color-base-800, #1e293b);
    color: var(--color-font-important-dark, #e2e8f0);
}

#attendance-table tr:hover td,
#payments-table tr:hover td,
#participants-table tr:hover td,
.rentals-table tr:hover td {
    background-color: #eff6ff !important;
}
.dark #attendance-table tr:hover td,
.dark #payments-table tr:hover td,
.dark #participants-table tr:hover td,
.dark .rentals-table tr:hover td {
    background-color: var(--color-base-800, #1e293b) !important;
}

#attendance-table tr:last-child td,
#payments-table tbody tr:last-child td,
#participants-table tr:last-child td,
.rentals-table tr:last-child td {
    border-bottom: none;
}

/* Financial report - paid/debt rows */
#payments-table tr.debt td {
    background-color: #fef3c7 !important;
}
.dark #payments-table tr.debt td {
    background-color: #451a03 !important;
    color: #fde68a !important;
}

#payments-table tr.paid td {
    background-color: #ecfdf5 !important;
}
.dark #payments-table tr.paid td {
    background-color: #022c22 !important;
    color: #a7f3d0 !important;
}

#payments-table .total-row td {
    background-color: var(--color-base-50, #f8fafc) !important;
    border-top: 2px solid #334155;
    font-weight: 700;
}
.dark #payments-table .total-row td {
    background-color: var(--color-base-800, #1e293b) !important;
}

/* Custom badges in admin tables */
.badge.success,
span.badge.success {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: #10b981 !important;
    color: #fff;
}

.badge.danger,
span.badge.danger {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: #ef4444 !important;
    color: #fff;
}

/* --- Quick action buttons (bulk attendance, bulk equipment) --- */
.quick-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.quick-actions button,
.quick-actions .button {
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
    background: var(--color-base-100, #f1f5f9);
    color: var(--color-font-subtle-light, #475569);
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 150ms ease;
}

.quick-actions button:hover,
.quick-actions .button:hover {
    background: var(--color-base-200, #e2e8f0);
    color: var(--color-font-important-light, #0f172a);
    border-color: var(--color-base-300, #cbd5e1);
}

/* --- Select all buttons (bulk rental user list) --- */
.select-all-btn {
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.875rem !important;
    background: var(--color-primary-600, #2563eb) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.375rem !important;
    cursor: pointer;
    transition: all 150ms ease;
    margin-right: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

.select-all-btn:hover {
    background: var(--color-primary-700, #1d4ed8) !important;
    transform: translateY(-1px);
}

/* --- Users checkbox container (bulk rental) --- */
.users-checkbox-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-base-200, #e2e8f0) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    background: var(--color-base-0, #fff);
}
.dark .users-checkbox-container {
    background: var(--color-base-900, #0f172a) !important;
    border-color: var(--color-base-700, #334155) !important;
}

.users-checkbox-container > div {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--color-base-100, #f1f5f9);
    border-radius: 0.375rem;
    transition: background-color 150ms ease;
}
.dark .users-checkbox-container > div {
    border-bottom-color: var(--color-base-800, #1e293b);
}

.users-checkbox-container > div:hover {
    background-color: #eff6ff;
}
.dark .users-checkbox-container > div:hover {
    background-color: var(--color-base-800, #1e293b) !important;
}

.users-checkbox-container > div:last-child {
    border-bottom: none;
}

.users-checkbox-container label {
    font-weight: 400 !important;
    font-size: 0.875rem;
    cursor: pointer;
}
.dark .users-checkbox-container label {
    color: var(--color-font-important-dark, #e2e8f0);
}

.user-count-info {
    font-size: 0.75rem;
    color: var(--color-font-subtle-light, #64748b);
    padding: 0.375rem 0;
}
.dark .user-count-info {
    color: var(--color-font-subtle-dark, #94a3b8);
}

/* --- Set items (bulk rental) --- */
.set-items-checkbox-container {
    border: 1px solid var(--color-base-200, #e2e8f0) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    background: var(--color-base-50, #fafbfc) !important;
}
.dark .set-items-checkbox-container {
    background: var(--color-base-800, #1e293b) !important;
    border-color: var(--color-base-700, #334155) !important;
}

.set-item-row {
    padding: 0.5rem 0.625rem !important;
    border-bottom: 1px solid var(--color-base-100, #f1f5f9) !important;
    border-radius: 0.375rem;
    transition: background-color 150ms ease;
}
.dark .set-item-row {
    border-bottom-color: var(--color-base-700, #334155) !important;
}
.set-item-row label {
    color: var(--color-font-important-light, #1e293b);
}
.dark .set-item-row label {
    color: var(--color-font-important-dark, #e2e8f0);
}

.set-item-row:hover {
    background-color: #eff6ff;
}
.dark .set-item-row:hover {
    background-color: var(--color-base-700, #334155) !important;
}

.set-item-row:last-child {
    border-bottom: none !important;
}

.set-item-category {
    background-color: var(--color-font-subtle-light, #64748b) !important;
    color: #fff;
    padding: 0.125rem 0.5rem !important;
    border-radius: 9999px !important;
    font-size: 0.6875rem !important;
    font-weight: 600;
}
.dark .set-item-category {
    background-color: var(--color-base-600, #475569) !important;
}

.set-item-stock {
    font-size: 0.75rem !important;
    color: var(--color-font-subtle-light, #94a3b8) !important;
}
.dark .set-item-stock {
    color: var(--color-font-subtle-dark, #94a3b8) !important;
}

.set-items-info {
    font-size: 0.75rem !important;
    color: var(--color-font-subtle-light, #64748b) !important;
    padding: 0.5rem 0.625rem;
}
.dark .set-items-info {
    color: var(--color-font-subtle-dark, #94a3b8) !important;
}

/* --- Report generator (PDF page) --- */
.report-form {
    max-width: 640px;
    margin: 0 auto;
}

.report-info {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
    color: #1e40af;
}

.report-info h4 {
    font-weight: 700 !important;
    color: #1d4ed8 !important;
    font-size: 1rem;
}

.report-info p {
    font-size: 0.875rem;
}

.config-note {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
}

.config-note h4 {
    font-weight: 700 !important;
    color: #92400e !important;
    font-size: 1rem;
}

.config-note p,
.config-note li {
    font-size: 0.8125rem;
    color: #78350f;
}

.config-note code {
    background: #fef3c7 !important;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

/* Report generator form rows */
.report-form .form-row {
    margin-bottom: 1.25rem;
}

.report-form .form-row label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-font-subtle-light, #475569);
    margin-bottom: 0.375rem;
    display: block;
}

.report-form .form-row select,
.report-form .form-row input {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: 0.375rem;
    width: 100%;
    background: var(--color-base-0, #fff);
    color: var(--color-font-base-light, #1e293b);
    transition: all 150ms ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    color-scheme: light;
}

.dark .report-form .form-row select,
.dark .report-form .form-row input {
    background: var(--color-base-800, #1e293b);
    color: var(--color-font-base-dark, #e2e8f0);
    border-color: var(--color-base-600, #475569);
    color-scheme: dark;
}

.report-form .form-row select:focus,
.report-form .form-row input:focus {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.dark .report-form .form-row select:focus,
.dark .report-form .form-row input:focus {
    border-color: var(--color-primary-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.report-form .help-text {
    font-size: 0.75rem;
    color: var(--color-font-subtle-light, #94a3b8);
}

.report-form .submit-row {
    border: none;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
}

.report-form .submit-row input[type="submit"] {
    width: 100%;
    padding: 0.625rem 1.5rem !important;
    font-size: 0.9375rem !important;
}

/* --- Member checkbox list (bulk_add_attendance) --- */
.member-checkbox,
label.member-checkbox {
    display: block;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    background: var(--color-base-50, #f8fafc) !important;
    border: 1px solid var(--color-base-100, #f1f5f9);
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.25rem 0;
    transition: all 150ms ease;
    cursor: pointer;
}
.dark .member-checkbox,
.dark label.member-checkbox {
    background: var(--color-base-800, #1e293b) !important;
    border-color: var(--color-base-700, #334155);
    color: var(--color-font-important-dark, #e2e8f0);
}

.member-checkbox:hover,
label.member-checkbox:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe;
}
.dark .member-checkbox:hover,
.dark label.member-checkbox:hover {
    background: var(--color-base-700, #334155) !important;
    border-color: var(--color-base-600, #475569);
}

.members-list {
    border: 1px solid var(--color-base-200, #e2e8f0) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    background: var(--color-base-0, #fff) !important;
}
.dark .members-list {
    background: var(--color-base-900, #0f172a) !important;
    border-color: var(--color-base-700, #334155) !important;
}

/* --- Error notes in admin --- */
p.errornote {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 0.5rem;
    color: #991b1b !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
}
.dark p.errornote {
    background: #450a0a !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

/* --- Admin selects in custom form pages only --- */
#attendance-table select {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.625rem !important;
    border: 1px solid var(--color-base-200, #e2e8f0) !important;
    border-radius: 0.375rem !important;
    background: var(--color-base-0, #fff) !important;
    transition: all 150ms ease;
}
.dark #attendance-table select {
    background: var(--color-base-800, #1e293b) !important;
    border-color: var(--color-base-600, #475569) !important;
    color: var(--color-font-important-dark, #e2e8f0) !important;
}

#attendance-table select:focus {
    border-color: var(--color-primary-500, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none;
}

/* --- Hidden users in checkbox container (bulk rental section filter) --- */
.users-checkbox-container > div.hidden {
    display: none;
}

/* --- Rentals list container (bulk add equipment) --- */
.rentals-list {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: 0.5rem;
    background: var(--color-base-0, #fff);
}
.dark .rentals-list {
    background: var(--color-base-900, #0f172a);
    border-color: var(--color-base-700, #334155);
}

/* ============================================================================
   Legacy Django admin form elements — used in custom templates
   (bulk_create, bulk_attendance, bulk_rental, report_generator, etc.)
   These extend admin/base_site.html but use standard Django markup.
   Unfold does NOT style these classes, so we provide styling here.
   ============================================================================ */

/* Page headings in custom views */
#content-main > h1,
#content > h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-font-important-light, #0f172a);
    margin-bottom: 1.25rem;
    font-family: Inter, system-ui, sans-serif;
}
.dark #content-main > h1,
.dark #content > h1 {
    color: var(--color-font-important-dark, #f1f5f9);
}

/* Fieldset.module — standard Django admin fieldset */
fieldset.module {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: 0.75rem;
    padding: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}
.dark fieldset.module {
    background: var(--color-base-900, #0f172a);
    border-color: var(--color-base-700, #334155);
}

fieldset.module h2 {
    background: var(--color-base-50, #f8fafc);
    color: var(--color-font-important-light, #1e293b);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    margin: 0;
    border-bottom: 1px solid var(--color-base-200, #e2e8f0);
    font-family: Inter, system-ui, sans-serif;
}
.dark fieldset.module h2 {
    background: var(--color-base-800, #1e293b);
    color: var(--color-font-important-dark, #e2e8f0);
    border-color: var(--color-base-700, #334155);
}

fieldset.module .form-row {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-base-100, #f1f5f9);
    color: var(--color-font-important-light, #1e293b);
    font-size: 0.875rem;
}
.dark fieldset.module .form-row {
    border-color: var(--color-base-800, #1e293b);
    color: var(--color-font-important-dark, #e2e8f0);
}

fieldset.module .form-row:last-child {
    border-bottom: none;
}

fieldset.module .form-row label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-font-subtle-light, #475569);
    display: block;
    margin-bottom: 0.375rem;
}
.dark fieldset.module .form-row label {
    color: var(--color-font-subtle-dark, #94a3b8);
}

/* Form inputs in fieldset.module */
fieldset.module select,
fieldset.module input[type="text"],
fieldset.module input[type="number"],
fieldset.module textarea {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-base-300, #cbd5e1);
    border-radius: 0.375rem;
    background: var(--color-base-0, #fff);
    color: var(--color-font-important-light, #0f172a);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.dark fieldset.module select,
.dark fieldset.module input[type="text"],
.dark fieldset.module input[type="number"],
.dark fieldset.module textarea {
    background: var(--color-base-800, #1e293b);
    border-color: var(--color-base-600, #475569);
    color: var(--color-font-important-dark, #e2e8f0);
}

fieldset.module select:focus,
fieldset.module input:focus,
fieldset.module textarea:focus {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

/* Checkbox styling in fieldset */
fieldset.module input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary-600, #2563eb);
    cursor: pointer;
    vertical-align: middle;
}

/* Radio buttons */
fieldset.module input[type="radio"] {
    accent-color: var(--color-primary-600, #2563eb);
    cursor: pointer;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* Django .module (without fieldset, e.g. financial_report info table) */
div.module {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}
.dark div.module {
    background: var(--color-base-900, #0f172a);
    border-color: var(--color-base-700, #334155);
    color: var(--color-font-important-dark, #e2e8f0);
}

div.module h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-font-important-light, #0f172a);
    margin-bottom: 0.75rem;
}
.dark div.module h2 {
    color: var(--color-font-important-dark, #f1f5f9);
}

div.module table {
    width: 100%;
    font-size: 0.875rem;
}

div.module table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: var(--color-font-subtle-light, #64748b);
    font-weight: 600;
    white-space: nowrap;
}
.dark div.module table th {
    color: var(--color-font-subtle-dark, #94a3b8);
}

div.module table td {
    padding: 0.5rem 0.75rem;
    color: var(--color-font-important-light, #1e293b);
}
.dark div.module table td {
    color: var(--color-font-important-dark, #e2e8f0);
}

/* Submit row */
.submit-row {
    padding: 1rem 0;
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.submit-row input[type="submit"],
.submit-row .button.default,
.submit-row input.default {
    background: var(--color-primary-600, #2563eb);
    color: #fff;
    border: none;
    padding: 0.625rem 1.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
    font-family: Inter, system-ui, sans-serif;
}
.submit-row input[type="submit"]:hover,
.submit-row .button.default:hover,
.submit-row input.default:hover {
    background: var(--color-primary-700, #1d4ed8);
}

.submit-row .button.cancel-link,
.submit-row a.button {
    background: var(--color-base-100, #f1f5f9);
    color: var(--color-font-subtle-light, #475569);
    border: 1px solid var(--color-base-300, #cbd5e1);
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 150ms ease;
}
.dark .submit-row .button.cancel-link,
.dark .submit-row a.button {
    background: var(--color-base-800, #1e293b);
    color: var(--color-font-subtle-dark, #94a3b8);
    border-color: var(--color-base-600, #475569);
}
.submit-row .button.cancel-link:hover,
.submit-row a.button:hover {
    background: var(--color-base-200, #e2e8f0);
    color: var(--color-font-important-light, #0f172a);
}
.dark .submit-row .button.cancel-link:hover,
.dark .submit-row a.button:hover {
    background: var(--color-base-700, #334155);
    color: var(--color-font-important-dark, #f1f5f9);
}

/* Help text */
.help,
p.help {
    font-size: 0.8125rem;
    color: var(--color-font-subtle-light, #64748b);
    margin-top: 0.25rem;
}
.dark .help,
.dark p.help {
    color: var(--color-font-subtle-dark, #94a3b8);
}

/* Help/info boxes in custom views (e.g. bulk_create green info box) */
.help[style*="background"] {
    border-radius: 0.75rem;
    font-size: 0.875rem;
}
.dark .help[style*="background: #ecfdf5"] {
    background: #064e3b !important;
    border-color: #065f46 !important;
    color: #a7f3d0 !important;
}

/* Breadcrumbs in custom pages */
.breadcrumbs {
    font-size: 0.8125rem;
    color: var(--color-font-subtle-light, #64748b);
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}
.breadcrumbs a {
    color: var(--color-primary-600, #2563eb);
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.dark .breadcrumbs {
    color: var(--color-font-subtle-dark, #94a3b8);
}
.dark .breadcrumbs a {
    color: var(--color-primary-400, #60a5fa);
}

/* ============================================================================
   Widget empty state
   ============================================================================ */
.widget-empty-state {
    border-radius: 0.5rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.dark .widget-empty-state {
    background: #1e2d4a !important;
    border-color: #1e3a6e !important;
    color: #93c5fd !important;
}

/* ============================================================================
   Widget table CSS class options (applied via WidgetStyle model)
   ============================================================================ */

/* Prugaste redove */
.widget-striped tbody tr:nth-child(even) td {
    background-color: var(--color-base-50, #f8fafc);
}
.dark .widget-striped tbody tr:nth-child(even) td {
    background-color: var(--color-base-800, #1e293b);
}

/* Sa okvirom */
.widget-bordered th,
.widget-bordered td {
    border: 1px solid var(--color-base-200, #e2e8f0) !important;
}
.dark .widget-bordered th,
.dark .widget-bordered td {
    border-color: var(--color-base-700, #334155) !important;
}

/* Kompaktna tabela */
.widget-compact th,
.widget-compact td {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Centrirano poravnanje */
.widget-text-center th,
.widget-text-center td {
    text-align: center !important;
}

/* Desno poravnanje */
.widget-text-right th,
.widget-text-right td {
    text-align: right !important;
}

/* ============================================================================
   Widget collapse/expand rows
   ============================================================================ */

/* Group header red — cijela ćelija je klikabilna */
.widget-group-header {
    cursor: pointer;
    user-select: none;
    background: var(--un-bg-base-100, #f1f5f9);
}
.widget-group-header:hover {
    background: var(--un-bg-base-200, #e2e8f0);
}
.dark .widget-group-header {
    background: rgba(255,255,255,0.05);
}
.dark .widget-group-header:hover {
    background: rgba(255,255,255,0.09);
}

.widget-group-header td {
    padding: 0.375rem 0.75rem !important;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--un-text-base-700, #374151);
}
.dark .widget-group-header td {
    color: var(--un-text-base-200, #e2e8f0);
}

/* Strelica collapse indikatora */
.widget-group-arrow {
    display: inline-block;
    font-size: 0.55rem;
    margin-right: 0.5rem;
    transition: transform 200ms ease;
    color: var(--un-text-base-400, #9ca3af);
    vertical-align: middle;
    transform: rotate(0deg);
}
.widget-group-header.expanded .widget-group-arrow {
    transform: rotate(90deg);
}

/* Label i count badge */
.widget-group-label {
    vertical-align: middle;
}
.widget-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-100, #dbeafe);
    color: var(--color-primary-700, #1d4ed8);
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.dark .widget-group-count {
    background: var(--color-primary-900, #1e3a6e);
    color: var(--color-primary-300, #93c5fd);
}

/* Child redovi — indentirani */
.widget-group-row td:first-child {
    padding-left: 2rem !important;
}