/* Section Improvements - Unified Styling for All Sections */

/* Global body and html background fix - white content background */
html,
body {
    background: #ffffff !important;
    min-height: 100vh !important;
}

/* Fix for content area background - Figma bg-secondary-soft */
#content {
    background: var(--themes-colors-background-bg-secondary-soft) !important;
    min-height: 100vh !important;
}

/* Ensure content-target has proper styling when loaded via HTMX */
#content-target {
    background: transparent !important;
    width: 100% !important;
    min-height: 0;
    display: block !important;
}

/* Ensure first child of content-target has container styling if it doesn't
   have one. The :not() chain exempts pages that bring their own width
   chrome — Tailwind max-w-*, dashboard, glossary, compliance landing /
   fw-page / ci-page (cluster-integrity), and the v0.8.0 redesigned
   analyze pages (.device-detail-page,
   .devices-page, .gateways-page, .gateway-detail-page, .positioning-page).
   Without the exemption this rule slaps max-width:1280px !important on
   those wrappers and the --page-max-width variable in design-system.css
   is silently overridden. */
#content-target
    > *:first-child:not([class*="max-w-"]):not([id*="dashboard"]):not(
        [id*="device-detail"]
    ):not([id*="glossary"]):not([class*="compliance-landing"]):not(
        [class*="fw-page"]
    ):not(.ci-page):not(.devices-page):not(.device-detail-page):not(
        .gateways-page
    ):not(.gateway-detail-page):not(.tenants-page):not(.alerts-page):not(
        .positioning-page
    ):not(.network-health-page):not(.app-page-shell):not(.policy-page-shell) {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    #content-target
        > *:first-child:not([class*="max-w-"]):not([id*="dashboard"]):not(
            [id*="device-detail"]
        ):not([id*="glossary"]):not([class*="compliance-landing"]):not(
            [class*="fw-page"]
        ):not(.ci-page):not(.devices-page):not(.device-detail-page):not(
            .gateways-page
        ):not(.gateway-detail-page):not(.tenants-page):not(.alerts-page):not(
            .app-page-shell
        ):not(.policy-page-shell):not(.positioning-page):not(
            .network-health-page
        ) {
        padding: 1.5rem !important;
    }
}

/* Prevent logout button duplication - ensure only one logout button is visible */
#logout-button {
    display: flex !important;
}

/* Hide any logout buttons that might be inside content-target (should not exist) */
#content-target #logout-button,
#content-target .patitur-logout-btn,
#content-target form[action*="logout"] {
    display: none !important;
}

/* Ensure main_target container has proper styling */
#main_target {
    background: transparent !important;
    width: 100%;
    min-height: 0;
}

/* Normalize all page containers - consistent styling across all sections */
/* Ensure containers inside content-target have consistent styling */
/* The :not() selectors opt the v0.8.0 redesigned pages (PR-3 device-
   detail, PR-8 devices list, PR-8.4 gateways list) out of the legacy
   1280px cap so they can match the compliance page width (88rem, left-
   aligned). The id "device-detail-container" is preserved on the
   wrapper because device-detail.js + htmx_events.js +
   saveDeviceStatus() all query it by id. */
/* Dashboard-content-wrapper removed from the legacy max-w-7xl
   centering group below — the dashboard now mirrors the devices /
   gateways / detail pages which fill the full main column. The
   wrapper's own ``p-5 md:p-6`` Tailwind utilities supply the gutter;
   no max-width / mx-auto override is needed. */
/* .policy-page-shell is also opted out: the policy pages keep the
   1280px content cap (still max-w-7xl) but own their horizontal gutter
   in policies.css so the table reaches the full content box instead of
   being pinched by this rule's 1.25rem inset — matching the canonical
   mockups (policy-2/10,12,13). Without the exemption this rule's
   ``padding: 1.25rem !important`` would re-pinch the table. */
#content-target
    > div[class*="max-w-7xl"]:not(.devices-page):not(.gateways-page):not(
        .gateway-detail-page
    ):not(.alerts-page):not(.policy-page-shell):not(.app-page-shell),
#content-target
    > div[class*="max-w-"]:not(.devices-page):not(.gateways-page):not(
        .gateway-detail-page
    ):not(.alerts-page):not(.policy-page-shell):not(.app-page-shell),
#content-target
    > div[id*="device-detail-container"]:not(.device-detail-page):not(
        .gateway-detail-page
    ),
#content-target
    > div[class*="mx-auto"]:not(.device-detail-page):not(.devices-page):not(
        .gateways-page
    ):not(.gateway-detail-page):not(.alerts-page):not(.policy-page-shell):not(
        .app-page-shell
    ) {
    width: 100% !important;
    max-width: 1280px !important; /* max-w-7xl equivalent */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1.25rem !important; /* p-5 equivalent */
    box-sizing: border-box !important;
    display: block !important;
}

@media (min-width: 768px) {
    #content-target
        > div[class*="max-w-7xl"]:not(.devices-page):not(.gateways-page):not(
            .gateway-detail-page
        ):not(.alerts-page):not(.policy-page-shell):not(.app-page-shell),
    #content-target
        > div[class*="max-w-"]:not(.devices-page):not(.gateways-page):not(
            .gateway-detail-page
        ):not(.alerts-page):not(.policy-page-shell):not(.app-page-shell),
    #content-target
        > div[id*="device-detail-container"]:not(.device-detail-page):not(
            .gateway-detail-page
        ),
    #content-target
        > div[class*="mx-auto"]:not(.device-detail-page):not(
            .gateways-page
        ):not(.gateway-detail-page):not(.alerts-page):not(
            .policy-page-shell
        ):not(.app-page-shell) {
        /* md:p-6 equivalent */
        padding: 1.5rem !important;
    }
}

/* Ensure no duplicate containers or nested containers cause issues */
#content-target > div[class*="max-w-"] > div[class*="max-w-"] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure consistent container styling after HTMX swaps */
#content-target[style*="display"] {
    display: block !important;
}

/* Fix for container visibility issues after HTMX updates */
#main_target,
#content-target {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Standardized Tables — .ui.table dropped from the multi-selector
   blocks (zero template matches at PR-8 audit). .patitur-table is used
   by auth/users.html; bare `table` covers everything else. */
.patitur-table,
table {
    background: #ffffff !important;
    border: 1px solid rgba(0, 212, 170, 0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    width: 100% !important;
    margin: 0 !important;
    table-layout: auto !important;
}

/* Fix table container width issues — .ui.table-wrapper dropped (dead). */
.table-container,
.table-container-box,
.patitur-table-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* Ensure table respects container margins */
.table-container table,
.table-container-box table {
    width: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.patitur-table thead th,
table thead th:not(.table-header-cell) {
    background: #f9fafb !important;
    color: #6b7280 !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    padding: 1rem !important;
}

.patitur-table tbody td,
table tbody td {
    background: transparent !important;
    color: #333333 !important;
    padding: 1rem !important;
}

.patitur-table tbody tr:hover,
table tbody tr:hover {
    background: rgba(0, 212, 170, 0.05) !important;
}

/* Standardized Buttons — .ui.button / .action-button / .filter-button /
   .clear-filter all dead at PR-8 audit; only .patitur-btn (6 auth pages)
   remains. The .ui.button.secondary / .clear-filter variant block was
   also removed (both dead). */
.patitur-btn {
    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%) !important;
    color: #0a1a1f !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3) !important;
}

.patitur-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 212, 170, 0.4) !important;
}

/* Danger Buttons */
.ui.button.red,
.delete-button {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff !important;
}

.ui.button.red:hover,
.delete-button:hover {
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4) !important;
}

/* Form Elements */
.ui.form .field label,
.ui.form label {
    color: #666666 !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

.ui.form input,
.ui.form select,
.ui.form textarea,
.ui.dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(0, 212, 170, 0.3) !important;
    color: #333333 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
}

.ui.form input:focus,
.ui.form select:focus,
.ui.form textarea:focus,
.ui.dropdown:focus {
    border-color: #00d4aa !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.2) !important;
    background: #ffffff !important;
}

.ui.form input::placeholder,
.ui.form textarea::placeholder {
    color: #999999 !important;
}

/* Dropdown Styling */
.ui.dropdown .menu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 212, 170, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
}

.ui.dropdown .menu .item {
    color: #333333 !important;
    padding: 0.75rem 1rem !important;
}

.ui.dropdown .menu .item:hover {
    background: rgba(0, 212, 170, 0.1) !important;
}

.ui.dropdown .menu .item.selected {
    background: rgba(0, 212, 170, 0.2) !important;
    color: #00d4aa !important;
}

/* Status Badges */
.ui.label,
.status-badge,
.severity-badge {
    border-radius: 4px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
}

.ui.label.green,
.status-badge.online,
.status-badge.active {
    background: #00d4aa !important;
    color: #0a1a1f !important;
}

.ui.label.red,
.status-badge.offline,
.status-badge.inactive,
.severity-badge.critical {
    background: #dc3545 !important;
    color: #ffffff !important;
}

.ui.label.orange,
.severity-badge.major {
    background: #fd7e14 !important;
    color: #ffffff !important;
}

.ui.label.yellow,
.severity-badge.warning {
    background: #ffc107 !important;
    color: #0a1a1f !important;
}

.ui.label.blue,
.severity-badge.minor {
    background: #0d6efd !important;
    color: #ffffff !important;
}

/* Action Buttons in Tables */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-buttons .ui.button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    min-width: auto !important;
}

.action-buttons .ui.button.blue {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
    color: #ffffff !important;
}

.action-buttons .ui.button.grey {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.action-buttons .ui.button.red {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff !important;
}

/* Loading States */
.ui.dimmer {
    background: rgba(10, 26, 31, 0.8) !important;
}

.ui.loader {
    color: #00d4aa !important;
}

/* Responsive Design — Semantic UI table cell tightening on mobile.
   The .section-container / .section-header / .ui.container blocks that
   used to live here were dropped when those classes were verified
   unused (PR-8 cruft cleanup). */
@media (max-width: 768px) {
    .ui.table thead th,
    .ui.table tbody td {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.875rem !important;
    }

    .action-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* Animation for better UX */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ui.segment,
.ui.table,
.filter-section {
    animation: fadeInUp 0.5s ease-out;
}

/* Override Semantic UI defaults — only .ui.header is still in use
   (.ui.container and .ui.divider had zero template matches at PR-8
   audit and were removed). */
.ui.header {
    color: #00b894 !important;
}

/* Legacy pagination overrides removed (2026-03-31).
   Pagination now uses Flowbite DS Tailwind classes in flowbite.html macros.
   See: memory-bank/tasks/application_and_tenant/figma-mcp/pagination_figma_alignment.md */

/* Fix text visibility issues — .muted-text and .secondary-text were
   dropped (zero template matches at PR-8 audit). */
.text-muted {
    color: #999999 !important;
    text-shadow: none !important;
}

/* Removed: .page-footer / .content-footer / .section-footer (dead),
   .usage-section / .network-overview / .organization-section /
   .data-collectors-section / .keys-section (all dead), and the
   ~130-line .inventory-container.* block (the .inventory-container
   class has zero template matches; the entire styling block was
   dead chrome left over from a pre-Tailwind layout). PR-8 audit. */

/* Ensure no background glitches anywhere */
* {
    box-sizing: border-box !important;
}

/* Removed: animate.css-era selectors (.app-body-container-view,
   .animated, .fadeIn, .animation-view, .view-header, .view-body) and
   the .container/.ui.container/.section-container/.inventory-container
   transparent-background fallback — all dead at PR-8 audit. */

/* Dashboard card tokens (Flowbite-like) */
.dashboard-card {
    border-radius: var(--border-border-radius-rounded-base, 12px);
    border: var(--border-border-width-border, 1px) solid
        var(--colors-border-border-base, #e5e7eb);
    background: var(--colors-background-bg-primary-soft, #fff);
    box-shadow: 0 1px 0.5px 0.05px rgba(29, 41, 61, 0.02);
}

.dashboard-card-title {
    color: var(--colors-text-text-heading, #101828);
    font-family: var(--typography-font-family-font-base, "Ubuntu Sans");
    font-size: var(--typography-font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--typography-line-height-leading-7, 28px);
}

.dashboard-metric-value {
    color: var(--colors-text-text-heading, #101828);
    font-family: var(--typography-font-family-font-base, "Ubuntu Sans");
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
}

.dashboard-metric-label {
    color: var(--colors-text-text-body, #4a5565);
    font-family: var(--typography-font-family-font-base, "Ubuntu Sans");
    font-size: var(--typography-font-size-text-base, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography-line-height-leading-6, 24px);
}

/* Dashboard header (title + CTA) */
.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--colors-border-border-base, #e5e7eb);
    background: var(--colors / background / bg-primary-soft, #fff);
    color: #1f8d79;
    font-weight: 600;
    font-size: 12px;
}

.dashboard-cta-button:hover {
    background: #f8fafc;
}

/* Alerts list layout to match Figma spacing */
.alerts-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-6, 24px);
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #f1f5f9; /* subtle */
    background: #ffffff;
}

.alert-item:hover {
    background: #f9fafb;
}

.alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    border: 1px solid var(--colors-border-border-base, #e5e7eb);
    background: #fff;
    color: #64748b; /* default */
}

.severity-critical {
    color: var(--colors / text / text-fg-danger-strong, #b42318);
    background: var(--colors / background / bg-danger-soft, #fee4e2);
    border-color: #fecaca;
}
.severity-major {
    color: var(--colors / text / text-heading, #101828);
    background: var(--colors / background / bg-warning-soft, #fff4e5);
    border-color: #fed7aa;
}
.severity-warning {
    color: var(--colors / text / text-heading, #101828);
    background: var(--colors / background / bg-warning-soft, #fef3c7);
    border-color: #fde68a;
}
.severity-minor {
    color: var(--colors / background / bg-brand, #1d4ed8);
    background: var(--colors / background / bg-brand-softer, #eff6ff);
    border-color: #bfdbfe;
}
.severity-neutral {
    color: #64748b;
    background: #f8fafc;
    border-color: #e5e7eb;
}

.alert-title {
    color: var(--colors-text-text-heading, #101828);
    font-weight: 600;
    font-size: 14px;
}

.alert-title:hover {
    color: #0ea5e9;
}

.alert-subtitle {
    color: var(--colors-text-text-body, #4a5565);
    font-size: 12px;
    margin-top: 2px;
}

.alert-content {
    flex: 1;
    min-width: 0;
}

/* Collector status headings */
.status-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-heading h5 {
    color: var(--colors-text-text-heading, #101828);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    border: 1px solid var(--colors-border-border-base, #e5e7eb);
}
.status-connected {
    color: #16a34a;
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.status-disconnected {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}
.status-other {
    color: #3b82f6;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.collector-name {
    font-size: 14px;
    color: #475569;
}

/* New status header row with icon pill + heading + divider */
.status-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.status-heading-text {
    color: var(--colors-text-text-heading, #101828);
    font-weight: 600;
    font-size: 16px;
    line-height: var(--typography-line-height-leading-6, 24px);
}
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--colors-border-border-base, #e5e7eb);
}
.status-pill-success {
    background: var(--colors / background / bg-success-soft, #ecfdf5);
    color: var(--colors / text / text-fg-success-strong, #047857);
}
.status-pill-danger {
    background: var(--colors / background / bg-danger-soft, #fee2e2);
    color: var(--colors / text / text-fg-danger-strong, #b91c1c);
}
.status-pill-brand {
    background: var(--colors / background / bg-brand-softer, #eff6ff);
    color: var(--colors / background / bg-brand, #1d4ed8);
}
.status-divider {
    height: 1px;
    background: var(--colors-border / border-base, #e5e7eb);
    margin: 12px 0;
}