/* ============================================
   App-specific overrides and utilities
   ============================================ */

/* App-wide content padding */
.content {
    padding-top: var(--spacing-4);
}

/* Focus styles - already handled in base.css, but keep for specificity */
h1:focus,
h2:focus,
h3:focus {
    outline: none;
}

/* Additional utility classes if needed */
.empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: var(--spacing-4);
    display: block;
}

.empty-state p {
    margin: 0;
    font-size: var(--font-size-base);
}

/* Paydesks page - wider content area to accommodate wide table */
.content-area:has(.paydesks-page) {
    max-width: 100% !important;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

/* Data table pages - wider content area to accommodate wide tables */
.content-area:has(.products-page),
.content-area:has(.ingredients-page),
.content-area:has(.businesses-page),
.content-area:has(.cloudprinters-page),
.content-area:has(.users-page),
.content-area:has(.statistics-page),
.content-area:has(.z-reports-page),
.content-area:has(.transactions-page),
.content-area:has(.account-mapping-page),
.content-area:has(.fortnox-logs-page),
.content-area:has(.sie-accounts-page),
.content-area:has(.sie-export-page),
.content-area:has(.customers-page),
.content-area:has(.softpay-users-page),
.content-area:has(.companies-page),
.content-area:has(.archived-companies-page),
.content-area:has(.superadmins-page),
.content-area:has(.control-units-page),
.content-area:has(.licenses-page) {
    max-width: 100% !important;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

/* Responsive utilities */
@media (max-width: 768px) {
    .content-area {
        padding: var(--spacing-4);
    }

    .content-area:has(.paydesks-page) {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .page-header h2 {
        font-size: var(--font-size-2xl);
    }
}