@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   COMPLIANCE TRACKER — MASTER FRONTEND DESIGN SYSTEM
   Single Source of Truth for Frontend Views (100% Strict Scoped Isolation)
   Font Family: Outfit (Primary & Only Dedicated Custom Font)
   Dynamic Superadmin Typography Variable Integration
   ========================================================================== */

#sac-compliance-app {
    --brand-primary: #2563eb; 
    --border-radius: 8px;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --font-stack: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    font-family: var(--font-stack) !important;
    font-size: var(--body-size, 14px) !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Universal Tag & Font Family Shield (High-specificity overrides) */
#sac-compliance-app,
#sac-compliance-app *,
#sac-compliance-app *::before,
#sac-compliance-app *::after,
#sac-compliance-app div,
#sac-compliance-app span,
#sac-compliance-app p,
#sac-compliance-app a,
#sac-compliance-app button,
#sac-compliance-app input,
#sac-compliance-app select,
#sac-compliance-app textarea,
#sac-compliance-app label,
#sac-compliance-app h1,
#sac-compliance-app h2,
#sac-compliance-app h3,
#sac-compliance-app h4,
#sac-compliance-app h5,
#sac-compliance-app h6,
#sac-compliance-app li,
#sac-compliance-app td,
#sac-compliance-app th {
    box-sizing: border-box !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* --------------------------------------------------------------------------
   0. SYSTEM SECURE STATUS INDICATOR BADGE (.sac-system-secure-badge)
   -------------------------------------------------------------------------- */
#sac-compliance-app #compliance-security-status-badge,
#sac-compliance-app .sac-system-secure-badge,
#sac-compliance-app .sac-sec-badge,
#compliance-security-status-badge,
.sac-system-secure-badge,
.sac-sec-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: var(--label-size, 10px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

#sac-compliance-app .sac-sec-badge.sac-status-secure,
#compliance-security-status-badge.sac-status-secure,
.sac-sec-badge.sac-status-secure {
    background-color: #ecfdf5 !important; /* bg-emerald-50 */
    color: #047857 !important;            /* text-emerald-700 */
    border: 1px solid #a7f3d0 !important; /* border-emerald-200 */
}

#sac-compliance-app .sac-sec-badge.sac-status-warning,
#compliance-security-status-badge.sac-status-warning,
.sac-sec-badge.sac-status-warning {
    background-color: #fffbe6 !important; /* bg-amber-50 */
    color: #b45309 !important;            /* text-amber-700 */
    border: 1px solid #fde68a !important; /* border-amber-200 */
}

#sac-compliance-app .sac-sec-badge.sac-status-alert,
#compliance-security-status-badge.sac-status-alert,
.sac-sec-badge.sac-status-alert {
    background-color: #fef2f2 !important; /* bg-red-50 */
    color: #b91c1c !important;            /* text-red-700 */
    border: 1px solid #fca5a5 !important; /* border-red-200 */
}

@keyframes sac-sec-pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

#sac-compliance-app .sac-sec-dot,
#compliance-security-status-dot,
.sac-sec-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

#sac-compliance-app .sac-sec-dot.sac-status-secure,
#compliance-security-status-dot.sac-status-secure,
.sac-sec-dot.sac-status-secure {
    background-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
    animation: sac-sec-pulse 2s infinite ease-in-out !important;
}

#sac-compliance-app .sac-sec-dot.sac-status-warning,
#compliance-security-status-dot.sac-status-warning,
.sac-sec-dot.sac-status-warning {
    background-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

#sac-compliance-app .sac-sec-dot.sac-status-alert,
#compliance-security-status-dot.sac-status-alert,
.sac-sec-dot.sac-status-alert {
    background-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

/* --------------------------------------------------------------------------
   1. OWNERSHIP TAG COMPONENT ([Ownership Tag])
   -------------------------------------------------------------------------- */
#sac-compliance-app .sac-ownership-tag,
.sac-ownership-tag {
    font-size: 8px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 1.5px 5px !important;
    border-radius: 4px !important;
    border-width: 1px !important;
    border-style: solid !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    color: #4b5563 !important;            /* text-gray-600 */
    border-color: #e5e7eb !important;       /* border-gray-200 */
}

#sac-compliance-app .sac-ownership-tag.admin-owner,
.sac-ownership-tag.admin-owner {
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    color: #374151 !important;            /* text-gray-700 */
    border-color: #e5e7eb !important;       /* border-gray-200 */
}

#sac-compliance-app .sac-ownership-tag.user-owner,
.sac-ownership-tag.user-owner {
    background-color: #f9fafb !important; /* bg-gray-50 */
    color: #6b7280 !important;            /* text-gray-500 */
    border-color: #e5e7eb !important;       /* border-gray-200 */
}

/* --------------------------------------------------------------------------
   2. PRIMARY ACTION BUTTON COMPONENT ([Primary Action Button])
   Strictly Enforced Compact Sizing & 100% Outfit Font Standard
   Matching 'Send Feedback to Admin' Specifications
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   2. SYSTEM-WIDE UNIFIED BUTTON COMPONENT SPECIFICATIONS
   Standardized size, font (12px bold Outfit/Inter), padding (6px 16px), 
   border-radius (8px), and shadow across all action buttons.
   -------------------------------------------------------------------------- */

/* PRIMARY ACTION BUTTON (Save, Submit, Primary Actions) */
#sac-compliance-app .sac-btn-primary,
#sac-compliance-app button.sac-btn-primary,
#sac-compliance-app .sac-primary-action-btn,
#sac-compliance-app button.sac-primary-action-btn,
#sac-compliance-app a.sac-primary-action-btn,
#sac-compliance-app .sac-admin-btn-primary,
#sac-compliance-app button.sac-admin-btn-primary,
#sac-compliance-app #hub-submit-btn,
#sac-compliance-app #sac_save_blueprint_btn,
#sac-compliance-app #sac-feedback-submit-btn,
#sac-compliance-app .sac-print-isolated-record-btn,
.sac-print-isolated-record-btn,
.compliance-action-bar-row button[type="submit"],
.sac-btn-primary,
.sac-primary-action-btn,
button.sac-primary-action-btn,
a.sac-primary-action-btn {
    font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: var(--btn-size, 12px) !important;
    font-weight: var(--btn-weight, 500) !important;
    padding: 6px 16px !important;           /* Crisp, balanced compact padding */
    height: auto !important;                /* Prevent theme 44px/48px height bloating */
    min-height: 0 !important;
    line-height: 1.25 !important;           /* Clean line height */
    border-radius: 6px !important;
    border: none !important;
    background-color: #2563eb !important;    /* bg-blue-600 */
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#sac-compliance-app .sac-btn-primary:hover,
#sac-compliance-app button.sac-btn-primary:hover,
#sac-compliance-app .sac-primary-action-btn:hover,
#sac-compliance-app button.sac-primary-action-btn:hover,
#sac-compliance-app a.sac-primary-action-btn:hover,
#sac-compliance-app .sac-admin-btn-primary:hover,
#sac-compliance-app button.sac-admin-btn-primary:hover,
#sac-compliance-app #hub-submit-btn:hover,
#sac-compliance-app #sac_save_blueprint_btn:hover,
#sac-compliance-app #sac-feedback-submit-btn:hover,
#sac-compliance-app .sac-print-isolated-record-btn:hover,
.sac-print-isolated-record-btn:hover,
.compliance-action-bar-row button[type="submit"]:hover,
.sac-btn-primary:hover,
.sac-primary-action-btn:hover,
button.sac-primary-action-btn:hover,
a.sac-primary-action-btn:hover {
    background-color: #1d4ed8 !important; /* bg-blue-700 */
    color: #ffffff !important;
    box-shadow: 0 2px 4px 0 rgba(37, 99, 235, 0.25) !important;
}

/* SUCCESS / SAVE PROGRESS BUTTON */
#sac-compliance-app .sac-btn-success,
#sac-compliance-app button.sac-btn-success,
#sac-compliance-app #wp-compliance-save-progress-btn,
.sac-btn-success,
#wp-compliance-save-progress-btn {
    font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: var(--btn-size, 12px) !important;
    font-weight: var(--btn-weight, 500) !important;
    padding: 6px 16px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    border-radius: 6px !important;
    border: none !important;
    background-color: #059669 !important;    /* bg-emerald-600 */
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
}

#sac-compliance-app .sac-btn-success:hover,
#sac-compliance-app button.sac-btn-success:hover,
#sac-compliance-app #wp-compliance-save-progress-btn:hover,
.sac-btn-success:hover,
#wp-compliance-save-progress-btn:hover {
    background-color: #047857 !important;    /* bg-emerald-700 */
    color: #ffffff !important;
    box-shadow: 0 2px 4px 0 rgba(5, 150, 105, 0.25) !important;
}

/* SECONDARY / CLEAR / CANCEL BUTTON */
#sac-compliance-app .sac-btn-secondary,
#sac-compliance-app button.sac-btn-secondary,
#sac-compliance-app #reset-hub-context-btn,
#sac-compliance-app .compliance-clear-btn,
#sac-compliance-app button.compliance-clear-btn,
.sac-btn-secondary,
.compliance-clear-btn {
    font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
}

#sac-compliance-app .sac-btn-secondary:hover,
#sac-compliance-app #reset-hub-context-btn:hover,
#sac-compliance-app .compliance-clear-btn:hover,
.sac-btn-secondary:hover,
.compliance-clear-btn:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

/* DANGER / DELETE BUTTON */
#sac-compliance-app .sac-btn-danger,
#sac-compliance-app #designer-delete-form-btn,
#sac-compliance-app .sac-download-pdf-btn,
.sac-download-pdf-btn,
.sac-btn-danger {
    font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    border-radius: 6px !important;
    border: none !important;
    background-color: #dc2626 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
}

/* SECTOR CARDS ITEM TITLES (Form, Link, File titles in Sector View) */
#sac-compliance-app .form-title-text,
#sac-compliance-app .link-title-text,
#sac-compliance-app .file-title-text,
#sac-compliance-app .filterable-form .form-title-text,
#sac-compliance-app .filterable-link .link-title-text,
#sac-compliance-app .filterable-file .file-title-text,
.form-title-text,
.link-title-text,
.file-title-text {
    font-size: var(--form-title-size, 15px) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-overflow: clip !important;
}

#sac-compliance-app .sac-btn-danger:hover,
#sac-compliance-app #designer-delete-form-btn:hover,
.sac-btn-danger:hover {
    background-color: #b91c1c !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2D. FORM DESIGNER PALETTE PILL BUTTONS
   -------------------------------------------------------------------------- */
#sac-compliance-app .compliance-palette-pill {
    font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: grab !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#sac-compliance-app .compliance-palette-pill:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
    border-color: #9ca3af !important;
}

/* --------------------------------------------------------------------------
   3. DYNAMIC SEARCH ENGINE INPUT COMPONENT (.sac-live-search-input)
   -------------------------------------------------------------------------- */
#sac-compliance-app .sac-live-search-input,
#sac-compliance-app .live-search-box,
#sac-compliance-app input.sac-live-search-input,
#sac-compliance-app input.live-search-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important; /* border-gray-300 */
    border-radius: 8px !important;        /* rounded-lg */
    color: #1f2937 !important;            /* text-gray-800 */
    outline: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease-in-out !important;
    margin-bottom: 4px !important;
}

#sac-compliance-app .sac-live-search-input::placeholder,
#sac-compliance-app .live-search-box::placeholder {
    color: #9ca3af !important; /* text-gray-400 */
    opacity: 0.8 !important;
    font-weight: 500 !important;
    text-align: center !important;
}

#sac-compliance-app .sac-live-search-input:focus,
#sac-compliance-app .live-search-box:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.18) !important;
    outline: none !important;
}

#sac-compliance-app .sac-search-tech-caption {
    font-size: 8px !important;
    font-weight: 700 !important;      /* font-bold */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #9ca3af !important;        /* text-gray-400 */
    opacity: 0.7 !important;
    margin-top: 4px !important;
    text-align: center !important;
}

.feedback-toggle-text,
.sac-panel-expand-btn,
.sac-expand-toggle-label {
    font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   4. SECTOR CARD HEADINGS & DYNAMIC TYPOGRAPHY
   -------------------------------------------------------------------------- */
#sac-compliance-app .sector-title-text,
#sac-compliance-app .sector-card-wrapper h3,
#sac-compliance-app .sac-section-card h3 {
    font-size: var(--sector-title-size, 15px) !important;
    font-weight: var(--sector-title-weight, 800) !important;
}

#sac-compliance-app .sector-card-wrapper,
#sac-compliance-app .sac-section-card {
    border-color: #e5e7eb !important;
    transition: box-shadow 0.2s ease-in-out !important;
}

#sac-compliance-app .sector-card-wrapper:hover,
#sac-compliance-app .sac-section-card:hover {
    border-color: #e5e7eb !important;
    box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.18) !important;
    outline: none !important;
}

#sac-compliance-app .sector-card-wrapper.sac-active-section-glow,
#sac-compliance-app .sac-section-card.sac-active-section-glow {
    border-color: #e5e7eb !important;
    box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.20) !important;
    outline: none !important;
}

/* --------------------------------------------------------------------------
   4B. SOFT SUBTLE AMBER GLOW & YELLOW THIN BORDER FOR DRAFTS SECTION
   -------------------------------------------------------------------------- */
#sac-compliance-app .sac-drafts-sector-card {
    border-color: #fef08a !important;
}

#sac-compliance-app .sac-drafts-sector-card:hover {
    border-color: #fef08a !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14) !important;
    outline: none !important;
}

#sac-compliance-app .sac-drafts-sector-card.sac-active-section-glow {
    border-color: #fef08a !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
    outline: none !important;
}

/* --------------------------------------------------------------------------
   5. SEPARATOR LINES & DOUBLE LINE ELIMINATION
   -------------------------------------------------------------------------- */
#sac-compliance-app .tree-branch-toggle {
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#sac-compliance-app .sector-card-wrapper.sac-active-section-glow .tree-branch-toggle,
#sac-compliance-app .sector-card-wrapper:has(> div:nth-child(2):not(.hidden)) .tree-branch-toggle {
    border-bottom: 1px solid #e5e7eb !important;
}

#sac-compliance-app .sac-drafts-sector-card.sac-active-section-glow .tree-branch-toggle,
#sac-compliance-app .sac-drafts-sector-card:has(> div:nth-child(2):not(.hidden)) .tree-branch-toggle {
    border-bottom: 1px solid #fef08a !important;
}

#sac-compliance-app .sac-drafts-sector-card div[data-node-id*="drafts-"] {
    border-bottom: 1px solid #fef08a !important;
}

/* --------------------------------------------------------------------------
   6. HEADINGS & SUBHEADINGS WITHIN SECTIONS (.sac-subsection-title)
   -------------------------------------------------------------------------- */
#sac-compliance-app .sector-card-wrapper .sac-subsection-title,
#sac-compliance-app .sector-card-wrapper h5,
#sac-compliance-app .sac-section-card h5,
#sac-compliance-app .sac-subsection-title {
    font-size: var(--form-title-size, 12px) !important;
    font-weight: var(--form-title-weight, 900) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #374151 !important;
}

#sac-compliance-app .sector-card-wrapper label,
#sac-compliance-app .sac-section-card label,
#sac-compliance-app .sac-field-label {
    font-size: var(--label-size, 9px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #4b5563 !important;
}

/* --------------------------------------------------------------------------
   7. DRAFT CHIP BADGE COMPONENT (.partial-tag) - EXACT ORIGINAL STYLING
   -------------------------------------------------------------------------- */
#sac-compliance-app .partial-tag,
.partial-tag {
    font-size: var(--label-size, 0.8em) !important;
    font-style: italic !important;
    font-weight: 700 !important;
    color: #c0392b !important;
    background-color: #fce4d6 !important;
    border: none !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-left: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* --------------------------------------------------------------------------
   8. FRONTEND COLUMN & CARD LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
#sac-compliance-app .compliance-column-1-3 { width: 33.333%; display: inline-block; padding-right: 12px; box-sizing: border-box; vertical-align: top; }
#sac-compliance-app .compliance-column-half { width: 50%; display: inline-block; padding-right: 12px; box-sizing: border-box; vertical-align: top; }
#sac-compliance-app .compliance-column-2-3 { width: 66.666%; display: inline-block; padding-right: 12px; box-sizing: border-box; vertical-align: top; }
#sac-compliance-app .compliance-column-full { width: 100%; display: block; box-sizing: border-box; }

@media (max-width: 1024px) { 
    #sac-compliance-app .compliance-column-1-3, 
    #sac-compliance-app .compliance-column-half, 
    #sac-compliance-app .compliance-column-2-3, 
    #sac-compliance-app .compliance-column-full { 
        width: 100% !important; padding-right: 0 !important; display: block; 
    } 
}

/* Dynamic Form Designer CSS 4-Column Grid System (Form Filler & Workspace Canvas) */
#dynamic-fields-injection-zone {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#dynamic-fields-injection-zone .secure-audit-grid-row,
.card-form-designer .secure-audit-grid-row,
.pdf-render-target .secure-audit-grid-row,
.compliance-printable-area .secure-audit-grid-row,
.row-dropzone {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0.75rem !important;
}

#dynamic-fields-injection-zone .secure-audit-grid-row > div:only-child,
.card-form-designer .secure-audit-grid-row > div:only-child,
.pdf-render-target .secure-audit-grid-row > div:only-child,
.compliance-printable-area .secure-audit-grid-row > div:only-child,
.row-dropzone > div:only-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

@media (max-width: 639px) {
    #dynamic-fields-injection-zone .secure-audit-grid-row,
    .card-form-designer .secure-audit-grid-row,
    .pdf-render-target .secure-audit-grid-row,
    .compliance-printable-area .secure-audit-grid-row,
    .row-dropzone {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    #dynamic-fields-injection-zone .secure-audit-grid-row > [class*="secure-audit-span-"],
    .card-form-designer .secure-audit-grid-row > [class*="secure-audit-span-"],
    .pdf-render-target .secure-audit-grid-row > [class*="secure-audit-span-"],
    .compliance-printable-area .secure-audit-grid-row > [class*="secure-audit-span-"],
    .row-dropzone > [class*="secure-audit-span-"] {
        grid-column: span 1 / span 1 !important;
        width: auto !important;
    }
}

@media (min-width: 640px) {
    .secure-audit-span-1 {
        grid-column: span 1 / span 1 !important;
        width: auto !important;
    }
    .secure-audit-span-2 {
        grid-column: span 2 / span 2 !important;
        width: auto !important;
    }
    .secure-audit-span-3 {
        grid-column: span 3 / span 3 !important;
        width: auto !important;
    }
    .secure-audit-span-4 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* Sector Form & File Cards Grid System (2-Column Desktop Grid) */
#sac-compliance-app .sac-sector-form-grid,
.sac-sector-form-grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
@media (min-width: 640px) {
    #sac-compliance-app .sac-sector-form-grid,
    .sac-sector-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

/* Card Title Word-Wrapping for Sector Views on Small Screens */
.filterable-form .form-title-text,
.filterable-file .file-title-text,
.filterable-link .link-title-text {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-overflow: clip !important;
}

/* INDICATOR ARROW ROTATION ENGINE (Rotates 90 degrees down when open) */
#sac-compliance-app .indicator-arrow,
#sac-compliance-app .sector-arrow,
#sac-compliance-app .account-section-arrow,
#sac-compliance-app .doc-section-arrow,
#sac-compliance-app .admin-section-arrow,
#sac-compliance-app .feedback-section-arrow,
.indicator-arrow,
.sector-arrow,
.account-section-arrow,
.doc-section-arrow,
.admin-section-arrow,
.feedback-section-arrow {
    display: inline-block !important;
    transition: transform 0.2s ease-in-out !important;
    transform-origin: center center !important;
}

#sac-compliance-app .rotate-90-down,
#sac-compliance-app .indicator-arrow.rotate-90-down,
.rotate-90-down,
.rotate-90,
.indicator-arrow.open,
.indicator-arrow.active {
    transform: rotate(90deg) !important;
}

/* Clean Text 'Back to' Link (No border, no background) */
#sac-compliance-app .back-link-element,
.back-link-element {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-decoration: none !important;
}
#sac-compliance-app .back-link-element:hover,
.back-link-element:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}