/*
 * Opsus360 reusable UI components
 *
 * Global styles:
 * - Design tokens and font variables
 * - Tab bars: .opsus-tabs
 * - Inputs/selects/textareas: .opsus-form-surface
 * - Icons, badges, buttons, cards, spacing utilities
 *
 * Component-specific styles should stay in the page template or page CSS file.
 * Scope reusable styles with .opsus-component-scope or a page wrapper such as
 * .business-profile-page to avoid changing legacy screens unexpectedly.
 */

:root {
    --opsus-green: #2d8653;
    --opsus-green-dark: #1e6b3f;
    --opsus-green-soft: #e8f5ee;
    --opsus-amber: #f59e0b;
    --opsus-amber-soft: #fef3c7;
    --opsus-red: #ef4444;
    --opsus-red-soft: #fee2e2;
    --opsus-blue: #3b82f6;
    --opsus-blue-soft: #eff6ff;
    --opsus-purple: #7c3aed;
    --opsus-purple-soft: #f3e8ff;
    --opsus-gray-50: #f9fafb;
    --opsus-gray-100: #f3f4f6;
    --opsus-gray-200: #e5e7eb;
    --opsus-gray-300: #d1d5db;
    --opsus-gray-400: #9ca3af;
    --opsus-gray-500: #6b7280;
    --opsus-gray-600: #4b5563;
    --opsus-gray-700: #374151;
    --opsus-gray-800: #1f2937;
    --opsus-gray-900: #111827;
    --opsus-white: #ffffff;
    --opsus-font: "Segoe UI", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --opsus-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --opsus-radius: 12px;
    --opsus-radius-sm: 8px;
    --opsus-shadow-sm: 0 1px 4px rgba(17, 24, 39, .05);
    --opsus-shadow-md: 0 8px 22px rgba(17, 24, 39, .07);
    --opsus-transition: .16s ease;

    /* Folder/file view tokens (fv-*) */
    --fv-green:    #2d8653;
    --fv-green-d:  #1e6b3f;
    --fv-green-l:  #e8f5ee;
    --fv-amber:    #f59e0b;
    --fv-amber-l:  #fef3c7;
    --fv-amber-d:  #92400e;
    --fv-red:      #ef4444;
    --fv-red-l:    #fee2e2;
    --fv-red-d:    #991b1b;
    --fv-g50:      #f9fafb;
    --fv-g100:     #f3f4f6;
    --fv-g200:     #e5e7eb;
    --fv-g300:     #d1d5db;
    --fv-g400:     #9ca3af;
    --fv-g500:     #6b7280;
    --fv-g600:     #4b5563;
    --fv-g700:     #374151;
    --fv-g800:     #1f2937;
    --fv-font:     'Segoe UI', 'DM Sans', system-ui, sans-serif;
    --fv-trans:    .16s ease;
}

.opsus-component-scope,
.business-profile-page {
    color: var(--opsus-gray-700);
    font-family: var(--opsus-font);
}

/* Global tab bar */
.opsus-component-scope .opsus-tabs,
.business-profile-page .opsus-tabs {
    align-items: center;
    background: var(--opsus-white);
    border-bottom: 1px solid var(--opsus-gray-200) !important;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 18px;
    scrollbar-width: thin;
    white-space: nowrap;
}

.opsus-component-scope .opsus-tabs::-webkit-scrollbar,
.business-profile-page .opsus-tabs::-webkit-scrollbar {
    height: 6px;
}

.opsus-component-scope .opsus-tabs::-webkit-scrollbar-thumb,
.business-profile-page .opsus-tabs::-webkit-scrollbar-thumb {
    background: var(--opsus-gray-300);
    border-radius: 999px;
}

.opsus-component-scope .opsus-tabs .nav-link,
.business-profile-page .opsus-tabs .nav-link,
.opsus-component-scope .opsus-tab-btn,
.business-profile-page .opsus-tab-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--opsus-gray-500);
    display: inline-flex;
    font-family: var(--opsus-font);
    font-size: 13.5px;
    font-weight: 700;
    gap: 7px;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: -1px;
    min-height: 48px;
    padding: 12px 4px 13px;
    text-decoration: none;
    transition: color var(--opsus-transition), border-color var(--opsus-transition), background var(--opsus-transition);
    white-space: nowrap;
}

.opsus-component-scope .opsus-tabs .nav-link:hover,
.business-profile-page .opsus-tabs .nav-link:hover,
.opsus-component-scope .opsus-tab-btn:hover,
.business-profile-page .opsus-tab-btn:hover {
    color: var(--opsus-green-dark);
}

.opsus-component-scope .opsus-tabs .nav-link.active,
.business-profile-page .opsus-tabs .nav-link.active,
.opsus-component-scope .opsus-tab-btn.active,
.business-profile-page .opsus-tab-btn.active {
    background: transparent;
    border-bottom-color: var(--opsus-green);
    color: var(--opsus-green-dark);
}

.opsus-component-scope .opsus-tab-icon,
.business-profile-page .opsus-tab-icon {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 16px;
    height: 18px;
    justify-content: center;
    line-height: 1;
    width: 18px;
}

.opsus-component-scope .opsus-tabs .badge,
.business-profile-page .opsus-tabs .badge {
    border-radius: 999px;
    font-size: 10px !important;
    font-weight: 800;
    line-height: 1;
    padding: 4px 8px;
}

.bg-primary { background-color: var(--opsus-green) !important; }
.bg-secondary { background-color: var(--opsus-gray-200) !important; }
/* Global form surfaces */
.opsus-component-scope .opsus-form-surface input:not([type="checkbox"]):not([type="radio"]),
.opsus-component-scope.opsus-form-surface input:not([type="checkbox"]):not([type="radio"]),
.opsus-component-scope .opsus-form-surface select,
.opsus-component-scope.opsus-form-surface select,
.opsus-component-scope .opsus-form-surface textarea,
.opsus-component-scope.opsus-form-surface textarea,
.opsus-component-scope input.form-control,
.opsus-component-scope select.form-select,
.opsus-component-scope textarea.form-control,
.business-profile-page input.form-control,
.business-profile-page select.form-select,
.business-profile-page textarea.form-control,
.business-profile-page .form-control,
.business-profile-page .form-select {
    background-color: var(--opsus-white) !important;
    border: 1px solid var(--opsus-gray-300);
    border-radius: var(--opsus-radius-sm);
    color: var(--opsus-gray-900) !important;
    font-family: var(--opsus-font);
    min-height: 42px;
    transition: border-color var(--opsus-transition), box-shadow var(--opsus-transition), background var(--opsus-transition);
}

.opsus-component-scope .opsus-form-surface input:not([type="checkbox"]):not([type="radio"]):focus,
.opsus-component-scope.opsus-form-surface input:not([type="checkbox"]):not([type="radio"]):focus,
.opsus-component-scope .opsus-form-surface select:focus,
.opsus-component-scope.opsus-form-surface select:focus,
.opsus-component-scope .opsus-form-surface textarea:focus,
.opsus-component-scope.opsus-form-surface textarea:focus,
.business-profile-page .form-control:focus,
.business-profile-page .form-select:focus {
    background-color: var(--opsus-white) !important;
    border-color: var(--opsus-green);
    box-shadow: 0 0 0 .2rem rgba(45, 134, 83, .12);
    color: var(--opsus-gray-900) !important;
    outline: 0;
}

.opsus-component-scope .opsus-form-surface input[readonly],
.business-profile-page input[readonly].form-control {
    background-color: var(--opsus-gray-50) !important;
}

.opsus-component-scope .opsus-form-label,
.business-profile-page .field-label,
.business-profile-page .form-label {
    color: var(--opsus-gray-700);
    font-family: var(--opsus-font);
}

/* Global reusable cards/buttons/badges */
.opsus-component-scope .opsus-card,
.business-profile-page .opsus-card {
    background: var(--opsus-white);
    border: 1px solid var(--opsus-gray-200);
    border-radius: var(--opsus-radius);
    box-shadow: var(--opsus-shadow-sm);
}

.opsus-component-scope .opsus-btn,
.business-profile-page .btn {
    border-radius: var(--opsus-radius-sm);
    font-family: var(--opsus-font);
    font-weight: 700;
    transition: transform var(--opsus-transition), box-shadow var(--opsus-transition), opacity var(--opsus-transition);
}

.opsus-component-scope .opsus-btn:hover,
.business-profile-page .btn:hover {
    box-shadow: 0 6px 18px rgba(17, 24, 39, .1);
    transform: translateY(-1px);
}

.opsus-component-scope .opsus-badge,
.business-profile-page .opsus-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    gap: 5px;
    line-height: 1;
    padding: 5px 9px;
    white-space: nowrap;
}

.opsus-badge.is-green { background: var(--opsus-green-soft); color: var(--opsus-green-dark); }
.opsus-badge.is-amber { background: var(--opsus-amber-soft); color: #92400e; }
.opsus-badge.is-red { background: var(--opsus-red-soft); color: #991b1b; }
.opsus-badge.is-blue { background: var(--opsus-blue-soft); color: #1d4ed8; }
.opsus-badge.is-gray { background: var(--opsus-gray-100); color: var(--opsus-gray-600); }

/* Small layout utilities */
.opsus-scroll-x { overflow-x: auto; overflow-y: hidden; }
.opsus-gap-sm { gap: 8px; }
.opsus-gap-md { gap: 14px; }
.opsus-soft-border { border: 1px solid var(--opsus-gray-200); }

@media (max-width: 575.98px) {
    .opsus-component-scope .opsus-tabs,
    .business-profile-page .opsus-tabs {
        gap: 12px;
        padding-inline: 12px;
    }

    .opsus-component-scope .opsus-tabs .nav-link,
    .business-profile-page .opsus-tabs .nav-link {
        font-size: 13px;
        min-height: 46px;
    }
}

.modal-close {
    background: var(--g100);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 18px;
    color: var(--g500);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── SWITCH / TOGGLE ──────────────────────────────────────────────────────
   Replaces the broken Limitless-theme override with a clean, on-brand
   pill toggle. Applied globally inside opsus360-theme so every page is
   covered automatically.
   ──────────────────────────────────────────────────────────────────────── */
body.opsus360-theme .form-switch .form-check-input,
.opsus-component-scope .form-switch .form-check-input,
.business-profile-page .form-switch .form-check-input {
    /* Track geometry */
    width: 2.6em !important;
    height: 1.4em !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    /* Unchecked track: mid-gray pill */
    background-color: var(--opsus-gray-300, #d1d5db) !important;
    border: none !important;

    /* Thumb: white circle via inline SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.18em center !important;
    background-size: 1.1em 1.1em !important;

    transition: background-color .2s ease, background-position .2s ease, box-shadow .15s ease;
    box-shadow: none !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
}

body.opsus360-theme .form-switch .form-check-input:hover,
.opsus-component-scope .form-switch .form-check-input:hover,
.business-profile-page .form-switch .form-check-input:hover {
    background-color: var(--opsus-gray-400, #9ca3af) !important;
}

body.opsus360-theme .form-switch .form-check-input:focus,
.opsus-component-scope .form-switch .form-check-input:focus,
.business-profile-page .form-switch .form-check-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(45, 134, 83, .18) !important;
    background-color: var(--opsus-gray-300, #d1d5db) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

body.opsus360-theme .form-switch .form-check-input:checked,
.opsus-component-scope .form-switch .form-check-input:checked,
.business-profile-page .form-switch .form-check-input:checked {
    background-color: var(--opsus-green, #2d8653) !important;
    border-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E") !important;
    background-position: right 0.18em center !important;
    background-size: 1.1em 1.1em !important;
    background-repeat: no-repeat !important;
}

body.opsus360-theme .form-switch .form-check-input:checked:focus,
.opsus-component-scope .form-switch .form-check-input:checked:focus,
.business-profile-page .form-switch .form-check-input:checked:focus {
    box-shadow: 0 0 0 3px rgba(45, 134, 83, .25);
}

body.opsus360-theme .form-switch .form-check-input:disabled,
.opsus-component-scope .form-switch .form-check-input:disabled,
.business-profile-page .form-switch .form-check-input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Label vertical alignment when next to a switch */
body.opsus360-theme .form-switch .form-check-label,
.opsus-component-scope .form-switch .form-check-label,
.business-profile-page .form-switch .form-check-label {
    cursor: pointer;
    line-height: 1.4em;
    vertical-align: middle;
    color: var(--opsus-gray-700, #374151);
}

body.opsus360-theme .form-switch .form-check-input:disabled ~ .form-check-label,
.opsus-component-scope .form-switch .form-check-input:disabled ~ .form-check-label,
.business-profile-page .form-switch .form-check-input:disabled ~ .form-check-label {
    opacity: .55;
    cursor: not-allowed;
}

/* Container: horizontally aligned by default */
body.opsus360-theme .form-switch,
.opsus-component-scope .form-switch,
.business-profile-page .form-switch {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 25px !important;
    min-height: 1.5rem !important;
}

/* ── GLOBAL SEARCH CARD ───────────────────────────────────────────────────
   Used on billing pages (my-subscription, my-payment, my-orders)
   and support tickets. Defined here so all pages share the same style
   without relying on the billing tabs partial.
   ──────────────────────────────────────────────────────────────────────── */
.billing-search-card {
    background: #ffffff;
    border: 1px solid var(--opsus-gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.billing-search-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--opsus-gray-400, #9ca3af);
    margin-bottom: 10px;
}
.billing-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.billing-search-text  { flex: 1 1 200px; min-width: 0; }
.billing-date-range   { flex: 1.6 1 260px; min-width: 0; }
.billing-search-btns  { display: flex; gap: 6px; flex-shrink: 0; }

.billing-search-card .form-control {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid var(--opsus-gray-300, #d1d5db) !important;
    border-radius: 6px;
    height: 38px;
}
.billing-search-card .form-control::placeholder { color: var(--opsus-gray-400, #9ca3af) !important; opacity: 1; }
.billing-search-card .form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--opsus-green, #2d8653) !important;
    box-shadow: 0 0 0 2px rgba(45,134,83,0.12) !important;
    outline: none;
}
.billing-search-card .input-group-text,
.billing-search-card .custom-label {
    background-color: var(--opsus-gray-100, #f3f4f6) !important;
    border-color: var(--opsus-gray-300, #d1d5db) !important;
    color: var(--opsus-gray-600, #4b5563) !important;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
}
.billing-date-range .form-control:first-child { border-radius: 6px 0 0 6px !important; }
.billing-date-range .form-control:last-child  { border-radius: 0 6px 6px 0 !important; }
.billing-date-range .input-group-text          { border-radius: 0 !important; }

.billing-search-card .btn {
    height: 38px;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 7px;
    white-space: nowrap;
}
.billing-search-card .btn-primary   { background-color: var(--opsus-green, #2d8653) !important; border-color: var(--opsus-green, #2d8653) !important; color: #fff !important; }
.billing-search-card .btn-primary:hover { background-color: var(--opsus-green-dark, #1e6b3f) !important; border-color: var(--opsus-green-dark, #1e6b3f) !important; }
.billing-search-card .btn-secondary { background-color: var(--opsus-gray-100, #f3f4f6) !important; border-color: var(--opsus-gray-300, #d1d5db) !important; color: var(--opsus-gray-700, #374151) !important; }
.billing-search-card .btn-secondary:hover { background-color: var(--opsus-gray-200, #e5e7eb) !important; }

@media (max-width: 767px) {
    .billing-search-row { flex-wrap: wrap; }
    .billing-search-text, .billing-date-range { flex: 1 1 100%; }
    .billing-search-btns { width: 100%; }
    .billing-search-btns .btn { flex: 1; }
}

/* ── GLOBAL DATA TABLE CARD ───────────────────────────────────────────────
   Reusable table container used across billing and support ticket pages.
   Wraps .table-responsive + pagination_card_footer.html.twig.
   ──────────────────────────────────────────────────────────────────────── */
.billing-table-card {
    background: #ffffff;
    border: 1px solid var(--opsus-gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}
.billing-table-card .table-responsive { margin-bottom: 0; }
.billing-table-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin-bottom: 0;
    background-color: #ffffff !important;
}
.billing-table-card thead tr { background-color: var(--opsus-gray-50, #f9fafb) !important; }
.billing-table-card th {
    padding: 10px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px;
    color: var(--opsus-gray-500, #6b7280) !important;
    border-bottom: 1px solid var(--opsus-gray-200, #e5e7eb) !important;
    border-top: none !important; border-left: none !important; border-right: none !important;
    white-space: nowrap;
    background-color: var(--opsus-gray-50, #f9fafb) !important;
}
.billing-table-card th a,
.billing-table-card th a:hover {
    color: var(--opsus-gray-500, #6b7280);
    text-decoration: none;
}
.billing-table-card td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--opsus-gray-100, #f3f4f6) !important;
    border-top: none !important; border-left: none !important; border-right: none !important;
    color: var(--opsus-gray-600, #4b5563) !important;
    vertical-align: middle;
    background-color: transparent !important;
}
.billing-table-card tbody tr:last-child td { border-bottom: none !important; }
.billing-table-card tbody tr:hover td     { background-color: var(--opsus-gray-50, #f9fafb) !important; }
.billing-table-card .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
    --bs-table-accent-bg: transparent !important;
}
.billing-table-card .table-bordered                       { border: none !important; }
.billing-table-card .table-bordered > :not(caption) > *  { border: none !important; }
.billing-table-card .table-bordered > :not(caption) > * > * {
    border-bottom: 1px solid var(--opsus-gray-100, #f3f4f6) !important;
    border-left: none !important; border-right: none !important;
}

/* Pagination / card-footer */
.billing-table-card .card-footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--opsus-gray-200, #e5e7eb) !important;
    color: var(--opsus-gray-600, #4b5563) !important;
    padding: 12px 16px;
}
.billing-table-card .card-footer select {
    background-color: #ffffff !important;
    color: var(--opsus-gray-700, #374151) !important;
    border: 1px solid var(--opsus-gray-300, #d1d5db) !important;
    border-radius: 6px;
    padding: 4px 8px;
}
.billing-table-card nav { background: transparent !important; }
.billing-table-card .pagination { background: transparent !important; margin: 0; }
.billing-table-card .page-link {
    background-color: #ffffff !important;
    border-color: var(--opsus-gray-300, #d1d5db) !important;
    color: var(--opsus-gray-700, #374151) !important;
}
.billing-table-card .page-link:hover {
    background-color: var(--opsus-gray-100, #f3f4f6) !important;
    color: var(--opsus-gray-800, #1f2937) !important;
}
.billing-table-card .page-item.active   .page-link { background-color: var(--opsus-green, #2d8653) !important; border-color: var(--opsus-green, #2d8653) !important; color: #fff !important; }
.billing-table-card .page-item.disabled .page-link { background-color: var(--opsus-gray-50, #f9fafb) !important; color: var(--opsus-gray-400, #9ca3af) !important; }

/* ── PAGINATION v2 (admin-style, global) ─────────────────────────────────
   Same markup/classes as the admin v2 card-footer pagination, so frontend
   listing pages (helper/pagination_card_footer_v2.html.twig) match it.
   ──────────────────────────────────────────────────────────────────────── */
.v2-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--opsus-gray-100, #f3f4f6);
    gap: 12px;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: 0 0 12px 12px;
}
.v2-footer-info { font-size: 12.5px; color: var(--opsus-gray-500, #6b7280); font-weight: 600; white-space: nowrap; }
.v2-pager { display: flex; align-items: center; gap: 4px; }
.v2-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--opsus-gray-600, #4b5563);
    text-decoration: none;
    border: 1px solid var(--opsus-gray-200, #e5e7eb);
    background: #ffffff;
    transition: background .12s;
    cursor: pointer;
    line-height: 1;
}
a.v2-page-btn:hover { background: var(--opsus-gray-50, #f9fafb); color: var(--opsus-gray-800, #1f2937); }
.v2-page-btn.active { background: var(--opsus-green, #2d8653); color: #ffffff; border-color: var(--opsus-green, #2d8653); }
.v2-page-btn.disabled { color: var(--opsus-gray-300, #d1d5db); cursor: not-allowed; pointer-events: none; }
.v2-page-btn.ellipsis { border: none; min-width: 16px; background: transparent; }
.v2-perpage { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--opsus-gray-500, #6b7280); }
.v2-perpage-select {
    padding: 5px 8px;
    border-radius: 7px;
    border: 1px solid var(--opsus-gray-200, #e5e7eb);
    font-size: 12.5px;
    color: var(--opsus-gray-700, #374151);
    background: #ffffff;
    cursor: pointer;
    outline: none;
}
.v2-perpage-select:focus { border-color: var(--opsus-green, #2d8653); }

/* ── FOLDER/FILE VIEW (fv-*) ─────────────────────────────────────────────
   Reusable list/grid layout for folder and file listing pages.
   Used by: folder/view, dataroom/view, and any future vault-style pages.
   ──────────────────────────────────────────────────────────────────────── */

/* Page header */
.fv-page {
    color: var(--g800, var(--fv-g800));
    font-family: var(--fv-font);
}

.fv-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--fv-font);
    background: var(--surface, #fff);
    border: 1px solid var(--g200, var(--fv-g200));
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    padding: 16px 18px;
}
.fv-page-heading {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}
.fv-title-block {
    min-width: 0;
}
.fv-page-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--fv-g800);
    font-family: var(--fv-font);
    margin: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.fv-breadcrumb-line {
    color: var(--fv-g400);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.fv-folder-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--fv-green-l);
    border-radius: 10px;
    color: var(--fv-green);
    font-size: 20px;
    flex-shrink: 0;
}
.fv-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.fv-summary-chip,
.fv-panel-count {
    align-items: center;
    background: var(--fv-green-l);
    border-radius: 999px;
    color: var(--fv-green-d);
    display: inline-flex;
    font-family: var(--fv-font);
    font-size: 11.5px;
    font-weight: 800;
    gap: 5px;
    line-height: 1;
    padding: 7px 10px;
    white-space: nowrap;
}
.fv-summary-chip.is-muted {
    background: var(--fv-g100);
    color: var(--fv-g500);
}

/* Back button */
.fv-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--fv-g200);
    background: #fff;
    color: var(--fv-g600);
    text-decoration: none;
    font-size: 14px;
    transition: border-color var(--fv-trans), background var(--fv-trans), color var(--fv-trans);
    flex-shrink: 0;
}
.fv-back-btn:hover {
    border-color: var(--fv-green);
    color: var(--fv-green);
    background: var(--fv-green-l);
}

/* View toggle */
.fv-view-toggle .btn {
    border-radius: 7px;
    font-size: 13px;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 40px;
    border: 1px solid var(--fv-g200);
    background: #fff;
    color: var(--fv-g600);
    transition: background var(--fv-trans), color var(--fv-trans), border-color var(--fv-trans);
}
.fv-view-toggle .btn:hover {
    background: var(--fv-g100);
    color: var(--fv-g800);
}
.fv-view-toggle .btn.active {
    background: var(--fv-green);
    color: #fff;
    border-color: var(--fv-green);
}

.fv-panel {
    margin-bottom: 22px;
}
.fv-panel-head {
    align-items: flex-end;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
}
.fv-panel-head p {
    color: var(--fv-g500);
    font-family: var(--fv-font);
    font-size: 12.5px;
    line-height: 1.4;
    margin: 3px 0 0;
}
/* Section label */
.fv-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fv-g400);
    margin: 0;
    font-family: var(--fv-font);
}

/* Item list container */
.fv-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fv-container.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.fv-container.grid .fv-item {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
    align-items: center;
}
.fv-container.grid .fv-item-actions {
    margin-left: 0;
    margin-top: 12px;
    justify-content: center;
}
.fv-container.grid .fv-item-body {
    width: 100%;
}
.fv-container.grid .fv-item-name {
    white-space: normal;
    text-overflow: unset;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fv-container.grid .fv-item-count {
    display: block;
    margin: 6px auto 0;
    width: fit-content;
}
.fv-container.grid .fv-item-meta {
    text-align: center;
}

/* Item card */
.fv-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--fv-g200);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.035);
    min-height: 66px;
    transition: box-shadow var(--fv-trans), border-color var(--fv-trans), transform var(--fv-trans), background var(--fv-trans);
    font-family: var(--fv-font);
}
.fv-item:hover {
    border-color: var(--fv-green);
    box-shadow: 0 6px 18px rgba(45, 134, 83, .1);
    transform: translateY(-1px);
}
/* Stretched-link pattern: the anchor inside covers the whole card */
.fv-item.is-folder { cursor: pointer; position: relative; }
.fv-item.is-folder .fv-item-name::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Action buttons must sit above the stretched-link overlay */
.fv-item.is-folder .fv-item-actions { position: relative; z-index: 2; }

/* Item icon */
.fv-item-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fv-item-icon.folder-icon {
    background: var(--fv-green-l);
    color: var(--fv-green);
    font-size: 20px;
}
.fv-item-icon.file-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Item body */
.fv-item-body { flex: 1; min-width: 0; }
.fv-item-name {
    font-weight: 800;
    color: var(--fv-g800);
    font-size: 13.75px;
    text-decoration: none;
    font-family: var(--fv-font);
    transition: color var(--fv-trans);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fv-item-name:hover { color: var(--fv-green); }
.fv-item-count {
    background: var(--fv-g100);
    border-radius: 999px;
    color: var(--fv-g500);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    margin-left: 8px;
    padding: 3px 8px;
    vertical-align: middle;
    white-space: nowrap;
}
.fv-item-meta {
    font-size: 11.5px;
    color: var(--fv-g400);
    margin-top: 2px;
    font-family: var(--fv-font);
}

/* Action buttons */
.fv-item-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.fv-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    transition: background var(--fv-trans), color var(--fv-trans);
    color: var(--fv-g500);
    padding: 0;
}
.fv-action-btn:hover               { background: var(--fv-g100); color: var(--fv-g800); }
.fv-action-btn.is-edit:hover       { background: var(--fv-green-l); color: var(--fv-green); }
.fv-action-btn.is-warn:hover       { background: var(--fv-amber-l); color: var(--fv-amber); }
.fv-action-btn.is-danger:hover     { background: var(--fv-red-l); color: var(--fv-red); }
.fv-action-btn.is-primary:hover    { background: var(--fv-green-l); color: var(--fv-green); }

/* Status badges */
.fv-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--fv-font);
    white-space: nowrap;
}
.fv-badge.is-approved { background: var(--fv-green-l); color: var(--fv-green-d); }
.fv-badge.is-rejected { background: var(--fv-red-l);   color: var(--fv-red-d); }
.fv-badge.is-pending  { background: var(--fv-amber-l); color: var(--fv-amber-d); }
.fv-badge.is-admin    { background: var(--fv-green-l); color: var(--fv-green-d); }
.fv-badge.is-user     { background: var(--fv-g100);    color: var(--fv-g600); }
.fv-badge.is-archived { background: var(--fv-g100);    color: var(--fv-g500); }

/* Empty state */
.fv-empty {
    padding: 52px 20px;
    text-align: center;
    color: var(--fv-g400);
    font-size: 13.5px;
    font-family: var(--fv-font);
    background: var(--fv-g50);
    border: 1px dashed var(--fv-g300);
    border-radius: 8px;
}
.fv-empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
    display: block;
    color: var(--fv-g300);
}

/* Pagination */
.fv-pagination .page-link {
    color: var(--fv-g700);
    border-color: var(--fv-g200);
    font-family: var(--fv-font);
    font-size: 13px;
    transition: background var(--fv-trans), color var(--fv-trans);
}
.fv-pagination .page-link:hover {
    background: var(--fv-g100);
    color: var(--fv-g800);
}
.fv-pagination .page-item.active .page-link {
    background-color: var(--fv-green);
    border-color: var(--fv-green);
    color: #fff;
}
.fv-pagination .page-item.disabled .page-link {
    color: var(--fv-g300);
    background: var(--fv-g50);
}

@media (max-width: 760px) {
    .fv-page-header,
    .fv-panel-head {
        align-items: stretch;
        flex-direction: column;
    }
    .fv-header-actions {
        justify-content: flex-start;
    }
    .fv-summary-chip {
        flex: 1 1 auto;
        justify-content: center;
    }
    .fv-page-heading {
        align-items: flex-start;
    }
    .fv-breadcrumb-line {
        white-space: normal;
    }
    .fv-item {
        align-items: flex-start;
    }
    .fv-item-actions {
        align-self: center;
    }
    .fv-item-count {
        display: table;
        margin: 5px 0 0;
    }
}

/* ── DATAROOM VIEW (dr-*) ────────────────────────────────────────────────
   Company Vault top-level folder listing.
   Used by: dataroom/view.html.twig
   ──────────────────────────────────────────────────────────────────────── */

.dr-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.dr-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--g800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dr-folder-chip {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--green-l);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.dr-card {
    background: var(--surface);
    border: 1px solid var(--g200);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.dr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--g100);
    background: var(--g50);
}
.dr-card-header-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--g600);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.dr-folder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--g100);
    cursor: pointer;
    transition: background .16s ease;
    text-decoration: none;
    color: inherit;
}
.dr-folder-row:last-child { border-bottom: none; }
.dr-folder-row:hover      { background: var(--g50); }
.dr-folder-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.dr-folder-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--green-l);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.dr-folder-icon.is-archived { background: var(--g100); color: var(--g400); }
.dr-folder-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--g800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-folder-meta { font-size: 12px; color: var(--g400); margin-top: 2px; }
.dr-folder-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}
.dr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.dr-badge.is-archived { background: var(--g100);   color: var(--g500); }
.dr-badge.is-deadline { background: var(--blue-l);  color: var(--blue); }
.dr-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--g200);
    background: var(--surface);
    color: var(--g500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all .16s ease;
    padding: 0;
}
.dr-action-btn:hover           { background: var(--g100);   color: var(--g800);  border-color: var(--g300); }
.dr-action-btn.is-edit:hover   { background: var(--blue-l); color: var(--blue);  border-color: rgba(59,130,246,.3); }
.dr-action-btn.is-warn:hover   { background: var(--amber-l);color: var(--amber); border-color: rgba(245,158,11,.3); }
.dr-action-btn.is-danger:hover { background: var(--red-l);  color: var(--red);   border-color: rgba(239,68,68,.3); }
.dr-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--g400);
    font-size: 14px;
}
.dr-empty-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
    color: var(--g300);
}

/* Upload dropzone */
#uploadDropzoneLabel {
    display: block;
    border: 2px dashed var(--fv-g300);
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--fv-trans), background var(--fv-trans), color var(--fv-trans);
    background: var(--fv-g50);
    color: var(--fv-g500);
    font-family: var(--fv-font);
    font-size: 13.5px;
}
#uploadDropzoneLabel:hover {
    border-color: var(--fv-green);
    background: var(--fv-green-l);
    color: var(--fv-green);
}
#uploadDropzoneLabel i {
    font-size: 28px;
    margin-bottom: 8px;
    display: block;
}

/* ── DATAROOM VIEW — GRID REDESIGN (dr-grid-*) ───────────────────────────
   Adds the folder-grid card layout to dataroom/view.html.twig.
   Uses existing --g* / --green* tokens from opsus360-theme.css.
   All selectors are scoped under dr-* so they don't affect other pages.
   ──────────────────────────────────────────────────────────────────────── */

/* Page header refinements */
.dr-page-header-left { display: flex; flex-direction: column; gap: 1px; }
.dr-page-subtitle {
    font-size: 12.5px;
    color: var(--g400);
    margin: 2px 0 0;
    font-family: var(--fv-font);
}

/* Stats bar */
.dr-stats-bar {
    display: flex;
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--g200);
    border-radius: 12px;
    padding: 14px 24px;
    margin-bottom: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    font-family: var(--fv-font);
}
.dr-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}
.dr-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--g800);
    line-height: 1;
}
.dr-stat-value.is-green { color: var(--green); }
.dr-stat-value.is-muted { color: var(--g400); }
.dr-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--g500);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.dr-stat-divider {
    width: 1px;
    height: 34px;
    background: var(--g200);
    flex-shrink: 0;
    margin: 0 24px;
}

/* Folder grid */
.dr-folder-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1200px) { .dr-folder-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .dr-folder-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .dr-folder-grid { grid-template-columns: 1fr; } }

/* Folder card */
.dr-folder-card {
    background: var(--surface, #fff);
    border: 1px solid var(--g200);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
    font-family: var(--fv-font);
}
.dr-folder-card:hover {
    border-color: var(--green);
    box-shadow: 0 4px 16px rgba(45,134,83,.12);
    transform: translateY(-1px);
}
.dr-folder-card.is-archived { opacity: .72; }
.dr-folder-card.is-archived:hover {
    border-color: var(--g300);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transform: none;
}

/* Card clickable top area */
.dr-folder-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px 10px;
    text-decoration: none;
    color: inherit;
}
.dr-folder-card-top:hover { color: inherit; text-decoration: none; }

/* Card icon */
.dr-folder-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--green-l);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.dr-folder-card-icon .nav-icon {
    font-size: 26px;
    margin-right: 0;
}
.dr-folder-card-icon.is-archived {
    background: var(--g100);
    color: var(--g400);
}

/* Card text body */
.dr-folder-card-body { flex: 1; min-width: 0; }
.dr-folder-card-name {
    font-weight: 700;
    color: var(--g800);
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .16s ease;
}
.dr-folder-card:hover .dr-folder-card-name { color: var(--green); }
.dr-folder-card.is-archived:hover .dr-folder-card-name { color: var(--g700); }
.dr-folder-card-meta {
    font-size: 11.5px;
    color: var(--g400);
    margin-top: 2px;
}

/* Progress bar */
.dr-folder-card-bar {
    height: 2px;
    background: var(--g100);
    margin: 6px 14px 0;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.dr-folder-card-bar-fill {
    height: 2px;
    border-radius: 2px;
    width: 0%;
    background: var(--g200);
    transition: width .3s ease;
}
.dr-folder-card-bar-fill.is-active   { background: var(--green); width: 100%; }
.dr-folder-card-bar-fill.is-archived { background: var(--g300);  width: 55%; }

/* Card footer */
.dr-folder-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px 9px 14px;
    border-top: 1px solid var(--g100);
    margin-top: 8px;
    gap: 6px;
    min-height: 42px;
}
.dr-folder-card-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
}
.dr-folder-card-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* Dataroom document portal redesign */
.dr-docs-toolbar {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dr-docs-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dr-docs-tab {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--g200);
    border-radius: 8px;
    color: var(--g600);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--fv-font);
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    min-height: 38px;
    padding: 8px 16px;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.dr-docs-tab i {
    font-size: 16px;
}

.dr-docs-tab span {
    align-items: center;
    background: var(--g100);
    border-radius: 999px;
    color: var(--g500);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
    min-width: 22px;
    padding: 2px 7px;
}

.dr-docs-tab:hover {
    border-color: rgba(45, 134, 83, .35);
    color: var(--green);
}

.dr-docs-tab.is-active {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 8px 18px rgba(45, 134, 83, .16);
    color: #fff;
}

.dr-docs-tab.is-active span {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.dr-docs-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.dr-docs-summary,
.dr-panel-count {
    background: var(--green-l);
    border-radius: 999px;
    color: var(--green-d);
    display: inline-flex;
    font-family: var(--fv-font);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    padding: 7px 10px;
    white-space: nowrap;
}

.dr-docs-summary.is-muted {
    background: var(--g100);
    color: var(--g500);
}

.dr-docs-panel {
    background: var(--surface, #fff);
}

.dr-docs-panel[hidden] {
    display: none !important;
}

.dr-docs-panel-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--g100);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
}

.dr-docs-panel-head h4 {
    color: var(--g800);
    font-family: var(--fv-font);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.dr-docs-panel-head p {
    color: var(--g500);
    font-family: var(--fv-font);
    font-size: 12.5px;
    line-height: 1.45;
    margin: 4px 0 0;
}

.dr-docs-panel .dr-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.dr-docs-panel .dr-folder-card {
    border-radius: 10px;
    /* min-height: 166px; */
}

.dr-docs-panel .dr-folder-card-top {
    padding: 14px 14px 8px;
}

.dr-docs-panel .dr-folder-card-icon {
    background: #f3f4f600;
    border-radius: 8px;
    color: var(--green);
    height: 48px;
    width: 48px;
}

.dr-docs-panel .dr-folder-card-name {
    font-size: 12.5px;
    line-height: 1.3;
    white-space: normal;
}

.dr-subfolder-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 31px;
    padding: 0 14px;
}

.dr-subfolder-preview span {
    background: var(--g50);
    border: 1px solid var(--g100);
    border-radius: 999px;
    color: var(--g500);
    display: inline-block;
    font-family: var(--fv-font);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    padding: 5px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dr-docs-panel .dr-folder-card-footer {
    margin-top: auto;
}

@media (max-width: 680px) {
    .dr-docs-toolbar,
    .dr-docs-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .dr-docs-actions {
        justify-content: flex-start;
    }

    .dr-docs-tab {
        flex: 1 1 180px;
        justify-content: center;
    }
}

/* ── DASHBOARD ────────────────────────────────────────────────────────────────
   Styles for the client dashboard (dashboard/index.html.twig).
   Uses the existing --g* / --green* / --amber* / --red* / --blue* tokens from
   opsus360-theme.css so no new variables are introduced.
   ──────────────────────────────────────────────────────────────────────────── */

/* Page title / subtitle */
.page-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--g800);
    margin: 0;
    line-height: 1.25;
}
.page-sub {
    font-size: 12.5px;
    color: var(--g400);
    margin-top: 2px;
}
.page-company-tag {
    font-size: 12.5px;
    color: var(--g400, #9ca3af);
    margin-bottom: 0;
}

/* ── Compliance status banner ── */
.compliance-banner {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}
.compliance-banner.green { background: var(--green-l); border: 1px solid rgba(45,134,83,.2); }
.compliance-banner.amber { background: var(--amber-l); border: 1px solid rgba(245,158,11,.2); }
.compliance-banner.red   { background: var(--red-l);   border: 1px solid rgba(239,68,68,.2); }
.compliance-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.compliance-banner.green .compliance-icon { background: rgba(45,134,83,.13); }
.compliance-banner.amber .compliance-icon { background: rgba(245,158,11,.13); }
.compliance-banner.red   .compliance-icon { background: rgba(239,68,68,.13); }
.compliance-banner-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--g800);
}
.compliance-banner-sub {
    font-size: 12.5px;
    color: var(--g600);
    margin-top: 2px;
}

/* ── Stat row (flex strip of metric cards) ── */
.stat-row {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Stat card — scoped to #content to avoid conflicting with legacy .stat-card
   definitions on other pages */
#content .stat-card {
    flex: 1;
    min-width: 140px;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--g200);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow .15s;
}
#content .stat-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }

.stat-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.stat-card-label {
    font-size: 11px;
    color: var(--g500);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.stat-card-icon {
    font-size: 18px;
    background: var(--g50);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-card-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--g800);
    line-height: 1;
    margin: 4px 0;
}
.stat-card-sub {
    font-size: 11px;
    color: var(--g400);
    margin-top: 3px;
}
.stat-card-bar {
    height: 3px;
    background: var(--g100);
    border-radius: 2px;
    margin-top: 12px;
}
.stat-card-fill {
    height: 3px;
    border-radius: 2px;
}

/* ── Dash grid (main two-column layout) ── */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    align-items: start;
}

/* ── Dashboard card ── */
.dashboard-card {
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--g200);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    padding: 20px;
    transition: box-shadow .15s;
    margin-bottom: 16px;
}
.dashboard-card:last-child { margin-bottom: 0; }
.dashboard-card.clickable { cursor: pointer; text-decoration: none; display: block; }
.dashboard-card.clickable:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }

/* ── Section header ── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}
.section-header h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--g800);
}

/* ── Task / deadline rows ── */
.task-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--g100);
}
.task-item:last-child { border-bottom: none; }
.task-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.task-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--g800);
    margin-bottom: 2px;
}
.task-meta          { font-size: 11px; font-weight: 700; }
.task-meta.client   { color: var(--amber); }
.task-meta.staff    { color: var(--blue); }
.task-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Quick actions grid ── */
.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.quick-action-btn {
    background: var(--g50);
    border: 1px solid var(--g200);
    border-radius: 12px;
    padding: 18px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--g700);
    font-family: var(--font);
    transition: all .15s;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
}
.quick-action-btn:hover {
    background: var(--green-l);
    border-color: var(--green);
    color: var(--green);
    text-decoration: none;
}
.quick-action-btn .qa-icon { font-size: 26px; }

/* ── Book a call button ── */
.book-call-btn {
    width: 100%;
    background: var(--g800);
    border: none;
    border-radius: 10px;
    padding: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font);
    text-decoration: none;
    transition: opacity .15s;
}
.book-call-btn:hover { opacity: .85; color: #fff; text-decoration: none; }

/* ── Active services mini tiles ── */
.services-mini-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.service-mini-card {
    flex: 1;
    min-width: 170px;
    background: var(--g50);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid var(--g200);
    transition: all .15s;
    text-decoration: none;
    display: block;
}
.service-mini-card:hover {
    border-color: var(--green);
    background: var(--green-l);
    text-decoration: none;
}
.service-mini-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--g800);
    margin-bottom: 4px;
}
.service-mini-meta {
    font-size: 12px;
    color: var(--g500);
    margin-bottom: 6px;
}

/* ── Financial alert boxes ── */
.alert-box {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.alert-box:last-child { margin-bottom: 0; }
.alert-box.red   { background: var(--red-l);   border: 1px solid rgba(239,68,68,.13); }
.alert-box.amber { background: var(--amber-l); border: 1px solid rgba(245,158,11,.13); }
.alert-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.alert-box.red   .alert-title { color: var(--red-d); }
.alert-box.amber .alert-title { color: var(--amber-d); }
.alert-desc { font-size: 12px; color: var(--g600); margin-bottom: 8px; }
.alert-empty { text-align: center; padding: 20px; color: var(--g400); font-size: 13px; }

/* ── Company snapshot rows ── */
.company-snapshot-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--g50);
}
.company-snapshot-row:last-child { border-bottom: none; }
.company-snapshot-row span:first-child { font-size: 12px; color: var(--g500); }
.company-snapshot-row span:last-child  { font-size: 12.5px; font-weight: 600; color: var(--g800); text-align: right; }
.company-snapshot-row.status span:last-child { color: var(--green); }

/* ── Compliance obligations table ── */
.tbl-wrap { overflow-x: auto; }
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.tbl-wrap thead tr { background: var(--g50); }
.tbl-wrap th {
    padding: 9px 14px;
    text-align: left;
    color: var(--g500);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--g200);
    white-space: nowrap;
}
.tbl-wrap td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--g100);
    color: var(--g600);
    vertical-align: middle;
}
.tbl-wrap td.bold { color: var(--g800); font-weight: 600; }
.tbl-wrap tbody tr:hover { background: var(--g50); }
.empty-row { text-align: center; padding: 32px !important; color: var(--g400); }

/* Urgency row indicators */
.obligation-row.overdue { border-left: 4px solid var(--red); }
.obligation-row.urgent  { border-left: 4px solid #fd7e14; }
.obligation-row.soon    { border-left: 4px solid var(--amber); }
.obligation-row.normal  { border-left: 4px solid var(--green); }

/* ── Document folder grid ── */
.folder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.folder-card { padding: 12px; }
.folder-card.hover:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.folder-icon-wrap {
    width: 30px;
    height: 30px;
    background: var(--g100);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.folder-name {
    font-weight: 700;
    color: var(--g800);
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.folder-count { font-size: 11px; color: var(--g400); margin-top: 1px; }
.folder-bar   { height: 2px; background: var(--g100); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.folder-fill  { height: 2px; border-radius: 2px; }

/* ── Financial snapshot cards ── */
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fin-card {
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--g200);
    background: var(--g50);
}
.fin-card.green { background: var(--green-l); border-color: rgba(45,134,83,.15); }
.fin-card.red   { background: var(--red-l);   border-color: rgba(239,68,68,.15); }
.fin-card.amber { background: var(--amber-l); border-color: rgba(245,158,11,.15); }
.fin-card.blue  { background: var(--blue-l);  border-color: rgba(59,130,246,.15); }
.fin-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; color: var(--g800); }
.fin-value { font-size: 22px; font-weight: 800; color: var(--g800); line-height: 1.15; margin-bottom: 4px; }
.fin-desc  { font-size: 12px; color: var(--g600); margin-bottom: 8px; }

/* ── Badge dot ── */
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Utility ── */
.card.pad-0 { padding: 0 !important; overflow: hidden; }

/* ── Dashboard responsive ── */
@media (max-width: 1024px) {
    .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .stat-row .stat-card { min-width: calc(50% - 7px); flex: 0 1 auto; }
    .quick-actions-grid { grid-template-columns: 1fr 1fr; }
    .folder-grid { grid-template-columns: repeat(2, 1fr); }
    .fin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .stat-row { flex-direction: column; }
    .stat-row .stat-card { min-width: auto; flex: 1 1 auto; }
    .quick-actions-grid { grid-template-columns: 1fr; }
    .folder-grid { grid-template-columns: 1fr; }
}

/* ── TASKS PAGE ────────────────────────────────────────────────────────────── */

.tasks-page .page-title { font-size: 21px; font-weight: 800; color: var(--g800); margin: 0 0 2px; }
.tasks-page .page-sub   { font-size: 12.5px; color: var(--g400); }

/* Filter bar */
.tasks-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.tasks-filter-group { display: flex; gap: 6px; flex-wrap: wrap; }

.tasks-filter-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--g200);
    background: var(--surface);
    color: var(--g600);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    font-family: var(--font);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .15s;
}
.tasks-filter-btn:hover { border-color: var(--green); color: var(--green); }
.tasks-filter-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.tasks-filter-badge {
    background: var(--red-l);
    color: var(--red-d);
    font-size: 10px;
    font-weight: 800;
    padding: 0 5px;
    border-radius: 8px;
    line-height: 16px;
}
.tasks-filter-btn.active .tasks-filter-badge { background: rgba(255,255,255,.28); color: #fff; }

.tasks-view-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--g200);
    background: var(--surface);
    color: var(--g600);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .15s;
}
.tasks-view-btn.active { background: var(--g700); color: #fff; border-color: var(--g700); }

/* Tasks table card */
.tasks-table-card {
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--g200);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    overflow: hidden;
}
.tasks-table-wrap { overflow-x: auto; }
.tasks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tasks-table thead tr { background: var(--g50); }
.tasks-table thead th {
    padding: 9px 14px;
    text-align: left;
    color: var(--g500);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--g200);
    white-space: nowrap;
}
.tasks-table tbody tr { border-bottom: 1px solid var(--g100); transition: background .12s; }
.tasks-table tbody tr:last-child { border-bottom: none; }
.tasks-table tbody tr:hover { background: var(--g50); }
.tasks-table tbody td { padding: 11px 14px; color: var(--g600); vertical-align: middle; }

.tasks-table-title { font-weight: 600; color: var(--g800); margin-bottom: 2px; }
.tasks-table-note  { font-size: 11px; color: var(--g400); margin-top: 2px; }

/* Assigned-to chip */
.assigned-client { font-size: 12.5px; font-weight: 700; color: var(--amber-d); }
.assigned-staff  { font-size: 12.5px; font-weight: 700; color: #1d4ed8; }

/* CTA cell */
.tasks-done-label    { font-size: 12px; color: var(--green); font-weight: 700; }
.tasks-noaction-label { font-size: 12px; color: var(--g400); font-style: italic; }

/* Empty state */
.tasks-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--g400);
}
.tasks-empty-icon { font-size: 40px; margin-bottom: 10px; }
.tasks-empty-msg  { font-size: 14px; font-weight: 600; color: var(--g500); }
.tasks-empty-sub  { font-size: 12.5px; color: var(--g400); margin-top: 4px; }

/* Board (Kanban) view */
.tasks-board {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.board-col-header {
    font-weight: 700;
    font-size: 11px;
    color: var(--g600);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.board-col-count {
    background: var(--g100);
    color: var(--g600);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
}
.board-task-card {
    background: var(--surface);
    border: 1px solid var(--g200);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    cursor: default;
    border-left-width: 3px;
    border-left-style: solid;
    transition: box-shadow .15s;
}
.board-task-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.09); }
.board-task-card.status-pending     { border-left-color: var(--red); }
.board-task-card.status-in-progress { border-left-color: var(--amber); }
.board-task-card.status-completed   { border-left-color: var(--green); }

.board-task-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--g800);
    margin-bottom: 6px;
    line-height: 1.4;
}
.board-task-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
.board-task-due { font-size: 10.5px; color: var(--g400); }

/* Board card as link */
.board-task-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.board-task-link:hover { text-decoration: none; color: inherit; }

/* Title column link in task table */
.tasks-table-title-link { text-decoration: none; color: inherit; display: block; }
.tasks-table-title-link:hover .tasks-table-title { color: var(--green); }

@media (max-width: 900px) {
    .tasks-board { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .tasks-board { grid-template-columns: 1fr; }
    .tasks-filter-bar { flex-direction: column; align-items: flex-start; }
}

/* ── TASK DETAIL PAGE ──────────────────────────────────────────────────────── */

.task-detail-page { max-width: 960px; }

.task-detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--green); font-weight: 600; font-size: 13px;
    margin-bottom: 18px; text-decoration: none;
}
.task-detail-back:hover { color: var(--green-d); text-decoration: none; }

.task-detail-card { padding: 28px 32px; }

.task-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.task-detail-title { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--g900); }

.task-detail-desc {
    font-size: 14px; color: var(--g600); line-height: 1.65;
    margin: 0 0 22px; padding: 0;
}

/* Payment box */
.pay-box {
    background: var(--red-l); border-radius: 10px; padding: 18px 24px;
    margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center;
    border: 1px solid rgba(239,68,68,.15);
}
.pay-label  { font-size: 12px; color: var(--red-d); font-weight: 700; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.pay-amount { font-size: 28px; font-weight: 800; color: var(--red-d); }

/* Danger button variant (used on Pay Now) */
.btn.td-danger { background: var(--red); color: #fff; padding: 10px 22px; font-size: 14px; }
.btn.td-danger:hover { opacity: .85; }

/* ── INVOICE MODAL (my_payment/index.html.twig) ───────────────────────────
   Uses --opsus-* tokens. Header accent uses brand green instead of dark.
   ──────────────────────────────────────────────────────────────────────── */
dialog#invoiceModal {
    border: none;
    border-radius: var(--opsus-radius);
    padding: 0;
    width: 660px;
    max-width: calc(100vw - 32px);
    max-height: 92vh;
    overflow: auto;
    background: var(--opsus-white);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
}
dialog#invoiceModal::backdrop {
    background: rgba(0, 0, 0, .55);
}
.inv-modal-hdr {
    padding: 18px 24px;
    border-bottom: 1px solid var(--opsus-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--opsus-white);
    z-index: 1;
}
.inv-modal-hdr h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--opsus-gray-800);
}
.inv-modal-close {
    background: var(--opsus-gray-100);
    border: none;
    border-radius: var(--opsus-radius-sm);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 20px;
    color: var(--opsus-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.inv-modal-close:hover { background: var(--opsus-gray-200); }
.inv-modal-body { padding: 24px; }
.inv-doc {
    border: 1px solid var(--opsus-gray-200);
    border-radius: var(--opsus-radius);
    overflow: hidden;
    background: var(--opsus-white);
}

/* Document header — brand green accent */
.inv-doc-hdr {
    background: var(--opsus-green);
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inv-logo-wrap { display: flex; align-items: center; gap: 10px; }
.inv-logo-icon {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, .2);
    border-radius: var(--opsus-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--opsus-white);
    font-weight: 800;
}
.inv-logo-icon--img { background: transparent; }
.inv-logo-text { font-weight: 800; font-size: 15px; color: var(--opsus-white); }
.inv-logo-text em { color: rgba(255, 255, 255, .7); font-style: normal; }
.inv-logo-url { font-size: 10px; color: rgba(255, 255, 255, .6); }
.inv-ref-block { text-align: right; }
.inv-ref-num { font-size: 18px; font-weight: 800; color: var(--opsus-white); }
.inv-ref-issued { font-size: 11.5px; color: rgba(255, 255, 255, .75); margin-top: 4px; }

/* From / Bill To */
.inv-from-to {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 22px 28px 20px;
    background: var(--opsus-white);
}
.inv-ft-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--opsus-gray-400);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.inv-ft-name { font-weight: 700; color: var(--opsus-gray-800); font-size: 14px; }
.inv-ft-addr { font-size: 13px; color: var(--opsus-gray-500); margin-top: 2px; }

/* Line items */
.inv-line-wrap { padding: 0 28px; background: var(--opsus-white); }
.inv-line-table { width: 100%; border-collapse: collapse; }
.inv-line-table th {
    padding: 9px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--opsus-gray-500);
    border-bottom: 1px solid var(--opsus-gray-200);
    background: var(--opsus-gray-50);
}
.inv-line-table td {
    padding: 14px;
    font-size: 13.5px;
    color: var(--opsus-gray-800);
    background: var(--opsus-white);
}

/* Totals */
.inv-totals-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 16px 28px 22px;
    background: var(--opsus-white);
}
.inv-totals-inner { width: 230px; }
.inv-subtotal-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: var(--opsus-gray-500);
}
.inv-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    background: var(--opsus-green);
    border-radius: var(--opsus-radius-sm);
    margin-top: 8px;
}
.inv-total-label { font-weight: 700; color: var(--opsus-white); font-size: 13.5px; }
.inv-total-amount { font-weight: 800; color: var(--opsus-white); font-size: 15px; }

/* Watermark footer */
.inv-watermark {
    background: var(--opsus-gray-50);
    padding: 10px 28px;
    font-size: 11px;
    color: var(--opsus-gray-400);
    text-align: center;
    border-top: 1px solid var(--opsus-gray-100);
}

/* Action buttons below the document */
.inv-action-bar { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.inv-btn-dl {
    padding: 9px 18px;
    border-radius: var(--opsus-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--opsus-green);
    color: var(--opsus-white);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--opsus-font);
}
.inv-btn-dl:hover { background: var(--opsus-green-dark); }
.inv-btn-print,
.inv-btn-close-modal {
    padding: 9px 18px;
    border-radius: var(--opsus-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--opsus-white);
    color: var(--opsus-gray-700);
    border: 1px solid var(--opsus-gray-200);
    font-family: var(--opsus-font);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.inv-btn-print:hover,
.inv-btn-close-modal:hover { background: var(--opsus-gray-100); }

/* Payment table action buttons */
.pay-view-btn {
    padding: 5px 13px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--opsus-white);
    color: var(--opsus-gray-700);
    border: 1px solid var(--opsus-gray-300);
    font-family: var(--opsus-font);
    white-space: nowrap;
}
.pay-view-btn:hover { background: var(--opsus-gray-100); }
.pay-retry-btn {
    padding: 5px 13px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--opsus-red);
    color: var(--opsus-white);
    border: none;
    font-family: var(--opsus-font);
}
.pay-retry-btn:hover { background: #dc2626; }
.pay-inv-link {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--opsus-blue);
    font-weight: 600;
    font-size: 13px;
    font-family: var(--opsus-font);
    text-decoration: underline;
    padding: 0;
    text-underline-offset: 2px;
}
.pay-inv-link:hover { color: #1d4ed8; }

@media print {
    body > *:not(dialog#invoiceModal) { display: none !important; }
    dialog#invoiceModal {
        position: fixed !important;
        inset: 0 !important;
        background: var(--opsus-white) !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    dialog#invoiceModal::backdrop { display: none !important; }
    .inv-modal-hdr, .inv-action-bar { display: none !important; }
    .inv-modal-body { padding: 12px !important; }
}

/* Drop zone */
.drop-zone {
    border: 2px dashed var(--g300); border-radius: 12px; padding: 40px 24px;
    text-align: center; background: var(--g50); transition: all .2s;
    cursor: pointer; margin-bottom: 4px;
    width: 100%; font-family: var(--font); outline: none;
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--green); background: var(--green-l); }
.drop-zone-icon { font-size: 40px; margin-bottom: 10px; }
.drop-zone-text { color: var(--g600); font-weight: 600; font-size: 14px; }
.drop-zone-text span { color: var(--green); cursor: pointer; }
.drop-zone-hint { color: var(--g400); font-size: 12px; margin-top: 5px; }

/* Completed box */
.completed-box {
    background: var(--green-l); border-radius: 10px; padding: 16px;
    display: flex; gap: 12px; align-items: center; margin-bottom: 16px;
    border: 1px solid rgba(45,134,83,.15);
}
.completed-box-text-title { font-weight: 700; color: var(--green-d); font-size: 14px; }
.completed-box-text-sub   { font-size: 12.5px; color: var(--g600); margin-top: 2px; }

/* In-progress box */
.in-progress-box {
    background: var(--blue-l); border-radius: 10px; padding: 16px;
    display: flex; gap: 12px; align-items: center; margin-bottom: 16px;
    border: 1px solid rgba(59,130,246,.15);
}
.in-progress-box-text-title { font-weight: 700; color: #1d4ed8; font-size: 14px; }
.in-progress-box-text-sub   { font-size: 12.5px; color: var(--g600); margin-top: 2px; }

/* Documents-to-review list (Approval type) */
.task-review-docs { margin-bottom: 20px; }
.task-review-docs-title {
    font-size: 13px; font-weight: 700; color: var(--g700);
    margin-bottom: 0; padding-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid var(--g100);
}
.task-review-doc-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 0; border-bottom: 1px solid var(--g100);
}
.task-review-doc-name {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--g700);
}
.task-review-doc-name i { color: var(--g400); font-size: 16px; }

/* Uploaded files list (Document Request) */
.task-uploaded-files {
    border: 1px solid var(--g100); border-radius: 10px;
    overflow: hidden; margin-bottom: 22px;
}
.task-uploaded-files-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--g700);
    padding: 12px 16px; background: var(--g50);
    border-bottom: 1px solid var(--g100);
}
.task-uploaded-files-count {
    margin-left: auto; background: var(--green); color: #fff;
    font-size: 11px; font-weight: 700; border-radius: 20px;
    padding: 1px 8px;
}
.task-uploaded-file-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 16px; border-bottom: 1px solid var(--g100);
    gap: 12px;
}
.task-uploaded-file-item:last-child { border-bottom: none; }
.task-uploaded-file-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.task-file-icon { font-size: 22px; flex-shrink: 0; color: var(--g400); }
.task-file-icon.pdf { color: #e53e3e; }
.task-file-icon.img { color: #3182ce; }
.task-file-icon.doc { color: #2b6cb0; }
.task-uploaded-file-name {
    font-size: 13.5px; font-weight: 600; color: var(--g800);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
.task-uploaded-file-meta { font-size: 11.5px; color: var(--g400); margin-top: 2px; }
.task-uploaded-file-sep { margin: 0 4px; }

/* Action button row */
.task-detail-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   Billing / Subscription components
   ─ Reusable across subscription, billing, and related pages
   ═══════════════════════════════════════════════════════════════ */

/* Table cell alignment */
.billing-table-card td { vertical-align: middle !important; }

/* Manage button */
.billing-manage-btn {
    padding: 5px 14px;
    border-radius: 7px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.billing-manage-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
}

/* Cancel button */
.billing-cancel-btn {
    padding: 5px 14px;
    border-radius: 7px;
    border: none;
    background: #ef4444;
    color: #ffffff;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.billing-cancel-btn:hover { opacity: 0.85; }

/* ── Subscription right-side drawer panel ── */
dialog.sub-modal-dialog {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    background: transparent;
    overflow: hidden;
    display: none;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 3000;
}
dialog.sub-modal-dialog[open] { display: flex; }
dialog.sub-modal-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
@keyframes subModalSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.sub-modal-box {
    background: #ffffff;
    border-radius: 0;
    width: 420px;
    max-width: 100vw;
    height: 100%;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sub-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
    flex-shrink: 0;
}
.sub-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 3px;
    line-height: 1.3;
}
.sub-modal-subtitle { font-size: 12.5px; color: #9ca3af; }
.sub-modal-close {
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 20px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    transition: background .15s;
}
.sub-modal-close:hover { background: #e5e7eb; color: #1f2937; }
.sub-modal-body { padding: 24px; flex: 1; }
.sub-modal-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    margin-bottom: 12px;
}

/* Detail info grid */
.sub-detail-grid {
    background: #f9fafb;
    border-radius: 10px;
    padding: 4px 16px;
    margin-bottom: 20px;
}
.sub-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}
.sub-detail-row:last-child { border-bottom: none; }
.sub-detail-label { font-size: 12.5px; color: #6b7280; }
.sub-detail-value { font-size: 13px; font-weight: 600; color: #1f2937; }

/* Auto-renewal toggle */
.sub-modal-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #e5e7eb;
    margin-bottom: 20px;
}
.sub-modal-toggle-label { font-size: 13px; font-weight: 600; color: #1f2937; }
.sub-modal-toggle-sub { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.sub-modal-toggle-btn {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
    padding: 0;
}
.sub-modal-toggle-btn.on  { background: #2d8653; }
.sub-modal-toggle-btn.off { background: #d1d5db; }
.sub-modal-toggle-btn.tgl-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.sub-modal-toggle-knob {
    position: absolute;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ffffff;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.sub-modal-toggle-btn.on  .sub-modal-toggle-knob { left: 23px; }
.sub-modal-toggle-btn.off .sub-modal-toggle-knob { left: 3px; }

/* Sidebar action buttons */
.sub-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.sub-modal-cancel-btn {
    width: 100%;
    padding: 12px;
    border-radius: 9px;
    border: none;
    background: #ef4444;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity .15s;
}
.sub-modal-cancel-btn:hover:not(:disabled) { opacity: 0.85; }
.sub-modal-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sub-modal-pause-btn {
    width: 100%;
    padding: 12px;
    border-radius: 9px;
    border: 1px solid #f59e0b;
    background: #fffbeb;
    color: #b45309;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, opacity .15s;
}
.sub-modal-pause-btn:hover:not(:disabled) { background: #fef3c7; }
.sub-modal-pause-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sub-modal-resume-btn {
    width: 100%;
    padding: 12px;
    border-radius: 9px;
    border: 1px solid #10b981;
    background: #ecfdf5;
    color: #065f46;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, opacity .15s;
}
.sub-modal-resume-btn:hover:not(:disabled) { background: #d1fae5; }
.sub-modal-resume-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════
   Orders — "View Order" button + right-side drawer
   ═══════════════════════════════════════════════════════════════ */

/* View Order table button */
.billing-view-btn {
    padding: 5px 14px;
    border-radius: 7px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.billing-view-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
}

/* ── Order right-side drawer panel ── */
dialog.ord-modal-dialog {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    background: transparent;
    overflow: hidden;
    display: none;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 3000;
}
dialog.ord-modal-dialog[open]    { display: flex; }
dialog.ord-modal-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

@keyframes ordModalSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.ord-modal-box {
    background: #ffffff;
    width: 420px;
    max-width: 100vw;
    height: 100%;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Header */
.ord-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
    flex-shrink: 0;
}
.ord-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 3px;
    line-height: 1.3;
}
.ord-modal-subtitle {
    font-size: 12.5px;
    color: #9ca3af;
}

/* Status row below header */
.ord-modal-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.ord-modal-date-text {
    font-size: 12.5px;
    color: #9ca3af;
}

/* Body */
.ord-modal-body {
    padding: 20px 24px 28px;
    flex: 1;
}
.ord-task-section-label { margin-top: 20px; }

/* Service Breakdown block */
.ord-service-block {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 4px;
}
.ord-service-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}
.ord-service-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
}

/* Task progress steps */
.ord-task-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ord-task-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #f3f4f6;
}
.ord-task-item:last-child { border-bottom: none; }

.ord-task-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.ord-task-done {
    background: #2d8653;
    color: #ffffff;
}
.ord-task-progress {
    background: #eff6ff;
    border: 2px solid #3b82f6;
}
.ord-task-pending {
    background: #f3f4f6;
    border: 2px solid #d1d5db;
}

.ord-task-label {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ord-task-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #eff6ff;
    color: #1d4ed8;
    white-space: nowrap;
}

/* Download confirmation button */
.ord-download-btn {
    width: 100%;
    padding: 13px;
    border-radius: 9px;
    border: none;
    background: #2d8653;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s;
}
.ord-download-btn:hover { background: #1e6b3f; }

.ord-sample-note {
    text-align: center;
    font-size: 11px;
    color: #f59e0b;
    margin-top: 8px;
    font-weight: 600;
}

/* ── DEADLINES PAGE ─────────────────────────────────────────────────────────
   Styles for the deadline/calendar page (frontend/calendar/index.html.twig).
   Reuses the existing token set from opsus360-theme.css.
   ─────────────────────────────────────────────────────────────────────────── */

/* Blue auto-generated notice banner */
.auto-gen-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--blue-l);
    border: 1px solid rgba(59, 130, 246, .15);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #1d4ed8;
    margin: 12px 0 14px;
}
.auto-gen-notice i { font-size: 14px; flex-shrink: 0; }

/* Deadline type column — source icon & sub-line */
.dl-type-icon             { font-size: 15px; vertical-align: middle; margin-right: 8px; flex-shrink: 0; }
.dl-type-icon.compliance  { color: var(--red); }
.dl-type-icon.tax         { color: var(--purple); }
.dl-type-icon.aml         { color: #fd7e14; }
.dl-type-icon.financial   { color: var(--amber); }
.dl-type-icon.default     { color: var(--g500); }
.dl-type-sub              { display: block; margin-top: 2px; margin-left: 23px; font-size: 11px; font-weight: 400; color: var(--g400); }

/* Responsibility cell */
.dl-responsibility         { font-weight: 600; font-size: 12px; }
.dl-responsibility.company { color: var(--blue); }
.dl-responsibility.user    { color: var(--amber); }

/* Bell + "Active" pill in the Auto-Reminder column */
.reminder-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--g100);
    border: 1px solid var(--g200);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--g700);
    white-space: nowrap;
}
.reminder-active-badge i { color: var(--amber); }

/* Separator for the Auto-Reminder column */
.tbl-wrap .col-reminder { border-left: 1px solid var(--g200); }

/* Expandable detail row */
.dl-detail-row > td {
    padding: 0 !important;
    background: var(--g50);
    border-bottom: 1px solid var(--g200) !important;
}
.dl-detail-inner { padding: 12px 14px 16px; }

/* "If Missed" card inside the detail row */
.dl-missed-box {
    background: var(--red-l);
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 14px 16px;
    height: 60%;
}
.dl-missed-title {
    font-weight: 700;
    color: var(--red);
    font-size: 13px;
    margin: 0 0 6px;
}
.dl-missed-desc {
    color: var(--g500);
    font-size: 13px;
    margin: 0 0 12px;
}

/* "Responsibility" card inside the detail row */
.dl-resp-box {
    background: var(--blue-l);
    border: 1px solid rgba(59, 130, 246, .15);
    border-radius: 8px;
    padding: 14px 16px;
    height: 60%;
}
.dl-resp-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--g800);
    margin: 0 0 6px;
}
.dl-resp-desc {
    color: var(--g500);
    font-size: 13px;
    margin: 0;
}

/* ── Detail-form card pattern (gen-*) ────────────────────────────────────────
   Reusable card/form layout used in Business Profile General tab and any
   other tab that needs the same clean two-column form design.
   ─────────────────────────────────────────────────────────────────────────── */
.gen-card-body {
    padding: 20px !important;
}
.gen-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.gen-card-title h6 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #1f2937;
}
.gen-sub-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    margin-top: 16px;
}
.gen-sub-title h6 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #1f2937;
}
.gen-field {
    margin-bottom: 14px;
}
.gen-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 4px;
}
.gen-input,
.gen-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 13.5px;
    font-family: inherit;
    color: #1f2937;
    outline: none;
    box-sizing: border-box;
    background: #fff;
}
.gen-cro-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-end;
}
.gen-cro-row .gen-cro-field {
    flex: 1;
}
.gen-btn-green-outline {
    background: transparent;
    color: #2d8653;
    border: 1px solid #2d8653;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    white-space: nowrap;
    transition: opacity 0.15s;
    text-decoration: none;
}
.gen-btn-green-outline:hover { opacity: 0.8; color: #2d8653; }
.gen-address-box {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px;
    border: 1px solid #e5e7eb;
}
.gen-address-line1 {
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}
.gen-address-line2 {
    font-size: 13px;
    color: #6b7280;
}

/* ── Tax Reference Design (business-profile Tax tab) ──────────────── */
.business-profile-page .tax-ref-card {
    background: var(--opsus-white);
    border-radius: var(--opsus-radius);
    border: 1px solid var(--opsus-gray-200);
    box-shadow: var(--opsus-shadow-sm);
    padding: 20px;
    transition: border-color var(--opsus-transition), box-shadow var(--opsus-transition);
}
.business-profile-page .tax-ref-card:hover {
    border-color: rgba(45,134,83,.32);
    box-shadow: var(--opsus-shadow-md);
}
.business-profile-page .tax-ref-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--opsus-gray-900);
    margin-bottom: 16px;
}
.business-profile-page .tax-ref-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--opsus-gray-100);
}
.business-profile-page .tax-ref-toggle-title {
    font-size: 13.5px;
    color: var(--opsus-gray-900);
    font-weight: 600;
}
.business-profile-page .tax-ref-toggle-sub {
    font-size: 11.5px;
    color: var(--opsus-gray-500);
    margin-top: 1px;
}
.business-profile-page .tax-ref-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--opsus-gray-700);
    margin-bottom: 4px;
}
.business-profile-page .tax-ref-field {
    margin-bottom: 14px;
}
.business-profile-page .tax-ref-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--opsus-radius-sm);
    border: 1px solid var(--opsus-gray-300);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--opsus-gray-900);
    outline: none;
    box-sizing: border-box;
    background: var(--opsus-white);
    transition: border-color var(--opsus-transition), box-shadow var(--opsus-transition);
}
.business-profile-page .tax-ref-input:focus {
    border-color: var(--opsus-green);
    box-shadow: 0 0 0 3px rgba(45,134,83,.12);
}
.business-profile-page .tax-ref-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--opsus-radius-sm);
    border: 1px solid var(--opsus-gray-300);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--opsus-gray-900);
    background: var(--opsus-white);
    outline: none;
    transition: border-color var(--opsus-transition), box-shadow var(--opsus-transition);
}
.business-profile-page .tax-ref-select:focus {
    border-color: var(--opsus-green);
    box-shadow: 0 0 0 3px rgba(45,134,83,.12);
}
.business-profile-page .tax-ref-next-due {
    background: var(--opsus-green-soft);
    border-radius: var(--opsus-radius-sm);
    padding: 10px;
    margin-top: 4px;
}
.business-profile-page .tax-ref-next-due-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--opsus-gray-500);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}
.business-profile-page .tax-ref-next-due-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--opsus-green);
}
.business-profile-page .tax-ref-freq-note {
    background: var(--opsus-gray-50);
    border-radius: var(--opsus-radius-sm);
    padding: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--opsus-gray-500);
}

/* AML upload modal — wider to fit 3-column document grid */
[id^="amlUploadModal"] .modal-content,
[id^="amlHistoryModal"] .modal-content {
    width: 1000px !important;
}

/* ── Topbar cart button ────────────────────────────────────────── */
.topbar-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 14px;
    color: #374151;
    font-size: 1.25rem;
    text-decoration: none;
    transition: background .2s, border-color .2s;
    margin-right: 12px;
    cursor: pointer;
    line-height: 1;
}
.topbar-cart-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
    text-decoration: none;
}
.topbar-cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--green);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #fff;
}

/* ── Shareholder type-tab buttons (matches Secretary tab style) ── */
.btn.sh-type-btn {
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
    background: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 6px 18px !important;
    transition: border-color .15s, color .15s;
}
.btn.sh-type-btn.sh-type-btn-active {
    border-color: #198754 !important;
    color: #198754 !important;
    font-weight: 600 !important;
}