/*
 * AFAQ 3.0 clean UI layer
 * One scoped compatibility layer for owner, investor, admin and consultant pages.
 * It intentionally never targets html/body visibility and never creates a full-screen overlay.
 */

.afaq-app,
.afaq-app * {
    box-sizing: border-box;
}

.afaq-app {
    --afaq-clean-navy: #0b2748;
    --afaq-clean-navy-2: #173d67;
    --afaq-clean-gold: #b88943;
    --afaq-clean-bg: #f5f7fa;
    --afaq-clean-card: #ffffff;
    --afaq-clean-border: #dfe6ee;
    --afaq-clean-text: #17283d;
    --afaq-clean-muted: #68768a;
    --afaq-clean-success: #15805a;
    --afaq-clean-warning: #9b6418;
    --afaq-clean-danger: #b42318;
    direction: rtl;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    color: var(--afaq-clean-text);
    background: var(--afaq-clean-bg);
    isolation: isolate;
}

.afaq-app [hidden] {
    display: none !important;
}

.afaq-app :where(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, a, button, th, td) {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal;
    overflow-wrap: anywhere;
}

.afaq-app :where(h1, h2, h3, h4, h5, h6) {
    color: var(--afaq-clean-navy);
    max-width: 100%;
}

/* Main shell */
.afaq-app .afaq-main:not(.afaq-main--standalone) {
    width: calc(100% - 270px);
    max-width: calc(100% - 270px);
    min-width: 0;
    min-height: 100vh;
    margin: 0 270px 0 0;
    background: var(--afaq-clean-bg);
    overflow: visible;
}

.afaq-app .afaq-content,
.afaq-app .afaq-workspace-content {
    width: 100%;
    max-width: 1540px;
    min-width: 0;
    margin-inline: auto;
    padding: 20px 24px 56px;
}

/* Compact sidebar: no dark backdrop and no page locking. */
.afaq-app .afaq-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 900;
    width: 270px;
    min-width: 270px;
    height: 100vh;
    padding: 16px 12px;
    overflow: hidden auto;
    background: #ffffff;
    border-inline-start: 1px solid var(--afaq-clean-border);
    box-shadow: -8px 0 26px rgba(11, 39, 72, .07);
}

.afaq-app .afaq-sidebar__brand {
    padding: 4px 8px 14px;
    margin: 0 0 10px;
}

.afaq-app .afaq-sidebar__logo {
    width: 70px;
    max-height: 70px;
    margin-bottom: 7px;
}

.afaq-app .afaq-sidebar__brand-text strong {
    font-size: 15px;
}

.afaq-app .afaq-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: visible;
}

.afaq-app .afaq-sidebar__group-title {
    margin: 10px 8px 2px;
    padding: 7px 6px 4px;
    font-size: 10px;
    border: 0;
}

.afaq-app .afaq-sidebar__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--afaq-clean-text) !important;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

.afaq-app .afaq-sidebar__link:hover {
    background: #f2f5f8;
    border-color: var(--afaq-clean-border);
}

.afaq-app .afaq-sidebar__link.is-active,
.afaq-app .afaq-sidebar__link[aria-current="page"] {
    color: #ffffff !important;
    background: var(--afaq-clean-navy);
    border-color: var(--afaq-clean-navy);
}

.afaq-app .afaq-sidebar__svg-icon,
.afaq-app .afaq-sidebar__link .dashicons {
    flex: 0 0 25px;
    width: 25px;
    min-width: 25px;
    height: 25px;
}

.afaq-app .afaq-sidebar__link-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit !important;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 800;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.afaq-app .afaq-sidebar-overlay,
.afaq-app [data-afaq-sidebar-overlay] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
}

/* Header and page identity */
.afaq-app .afaq-topbar,
.afaq-app .afaq-header {
    min-height: 64px;
    padding: 10px 22px;
    background: #ffffff;
    border-bottom: 1px solid var(--afaq-clean-border);
    box-shadow: 0 4px 14px rgba(11, 39, 72, .04);
}

.afaq-app :where(.afaq-page-header, .afaq-workspace-welcome, .afaq-owner-summary) {
    min-width: 0;
    border: 1px solid var(--afaq-clean-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(11, 39, 72, .05);
}

.afaq-app :where(.afaq-page-header h1, .afaq-page-header h2, .afaq-workspace-welcome h2, .afaq-owner-summary h2) {
    margin: 0;
    font-size: clamp(21px, 2vw, 30px);
    line-height: 1.35;
}

/* Cards and grids */
.afaq-app :where(.afaq-card, .afaq-panel, .afaq-workspace-panel, .afaq-project-card, .afaq-opportunity-card, .afaq-service-card, .afaq-stat-card) {
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--afaq-clean-border) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: var(--afaq-clean-text) !important;
    box-shadow: 0 5px 18px rgba(11, 39, 72, .05) !important;
}

.afaq-app :where(.afaq-grid, .afaq-cards-grid, .afaq-stats-grid, .afaq-workspace-metrics, .afaq-project-grid) {
    min-width: 0;
    gap: 14px;
}

.afaq-app :where(.afaq-card, .afaq-panel, .afaq-workspace-panel) > * {
    min-width: 0;
}

/* Buttons */
.afaq-app :where(.afaq-btn, button.afaq-btn, a.afaq-btn, input[type="submit"].afaq-btn) {
    min-height: 42px;
    max-width: 100%;
    padding: 9px 15px;
    border-radius: 10px;
    white-space: normal;
    line-height: 1.4;
}

.afaq-app .afaq-btn--primary {
    background: var(--afaq-clean-navy) !important;
    border-color: var(--afaq-clean-navy) !important;
    color: #ffffff !important;
}

/* Forms */
.afaq-app :where(.afaq-form, form[data-afaq-form], form[data-afaq-workspace-form]) {
    min-width: 0;
    max-width: 100%;
}

.afaq-app :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    max-width: 100%;
    min-height: 43px;
    border: 1px solid #ccd7e3;
    border-radius: 10px;
    background: #ffffff;
    color: var(--afaq-clean-text);
}

.afaq-app textarea {
    min-height: 110px;
    resize: vertical;
}

.afaq-app :where(.afaq-field, .afaq-form-row, .afaq-form-group) {
    min-width: 0;
    max-width: 100%;
}

.afaq-app :where(label:has(input[type="checkbox"]), label:has(input[type="radio"]), .afaq-checkbox, .afaq-radio) {
    min-height: 0 !important;
    height: auto !important;
    padding-block: 6px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

/* Tables */
.afaq-app .afaq-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--afaq-clean-border);
    border-radius: 12px;
    background: #ffffff;
}

.afaq-app table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.afaq-app :where(th, td) {
    padding: 11px 12px;
    vertical-align: middle;
    text-align: right;
    border-bottom: 1px solid #edf1f5;
}

.afaq-app th {
    background: #f5f7fa;
    color: var(--afaq-clean-navy);
    font-size: 12px;
}

/* Admin workspace tabs: labels must always remain visible. */
.afaq-app :where(.afaq-workspace-tabs, [data-afaq-dashboard-tabs], [data-afaq-tabs]) {
    display: flex;
    align-items: stretch;
    gap: 7px;
    max-width: 100%;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid var(--afaq-clean-border);
    border-radius: 13px;
    background: #ffffff;
}

.afaq-app :where(.afaq-workspace-tab, [data-afaq-tab]) {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 40px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--afaq-clean-text) !important;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
}

.afaq-app :where(.afaq-workspace-tab.is-active, [data-afaq-tab].is-active, [data-afaq-tab][aria-selected="true"]) {
    color: #ffffff !important;
    background: var(--afaq-clean-navy) !important;
    border-color: var(--afaq-clean-navy) !important;
}

.afaq-app :where(.afaq-workspace-tab span, [data-afaq-tab] span) {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
}

/* Notifications: a small white popover only, never a black/full-screen modal. */
.afaq-app [data-afaq-notifications] {
    position: relative;
    z-index: 950;
}

.afaq-app .afaq-notifications-popover__backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
}

.afaq-app [data-afaq-notifications-panel] {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    z-index: 999 !important;
    width: min(390px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(520px, calc(100vh - 100px)) !important;
    overflow: hidden !important;
    flex-direction: column !important;
    border: 1px solid var(--afaq-clean-border) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: var(--afaq-clean-text) !important;
    box-shadow: 0 18px 46px rgba(11, 39, 72, .18) !important;
}

.afaq-app [data-afaq-notifications]:not(.is-open) [data-afaq-notifications-panel],
.afaq-app [data-afaq-notifications-panel][hidden] {
    display: none !important;
}

.afaq-app [data-afaq-notifications].is-open [data-afaq-notifications-panel]:not([hidden]) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.afaq-app [data-afaq-notifications-list] {
    overflow: auto;
    max-height: 380px;
}

.afaq-app .afaq-notification-item {
    background: #ffffff !important;
    color: var(--afaq-clean-text) !important;
    border-bottom: 1px solid #edf1f5;
}

.afaq-app .afaq-notification-item.is-unread {
    background: #f7f2e9 !important;
}

/* Status/next-step readability */
.afaq-app :where(.afaq-next-action, .afaq-next-step, .afaq-status-card, [data-afaq-live-next-action]) {
    min-width: 0;
    max-width: 100%;
}

.afaq-app :where(.afaq-notice, .afaq-alert) {
    max-width: 100%;
    border-radius: 11px;
}

/* Never allow a plugin element to become a generic black screen. */
.afaq-app :where(.afaq-modal-backdrop, .afaq-overlay, .afaq-screen-overlay):not(.is-open):not(.is-active) {
    display: none !important;
}

/* Mobile */
@media (max-width: 1024px) {
    .afaq-app .afaq-main:not(.afaq-main--standalone) {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .afaq-app .afaq-sidebar {
        width: min(86vw, 310px);
        min-width: min(86vw, 310px);
        transform: translateX(110%);
        transition: transform .22s ease;
        box-shadow: -10px 0 30px rgba(11, 39, 72, .14);
    }

    .afaq-app.is-sidebar-open .afaq-sidebar,
    .afaq-app.afaq-sidebar-open .afaq-sidebar,
    .afaq-app .afaq-sidebar.is-open {
        transform: translateX(0);
    }

    .afaq-app .afaq-content,
    .afaq-app .afaq-workspace-content {
        padding: 14px 12px 82px;
    }

    .afaq-app :where(.afaq-workspace-metrics, .afaq-stats-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .afaq-app .afaq-topbar,
    .afaq-app .afaq-header {
        min-height: 58px;
        padding: 8px 11px;
    }

    .afaq-app :where(.afaq-page-header, .afaq-workspace-welcome, .afaq-owner-summary, .afaq-card, .afaq-panel, .afaq-workspace-panel) {
        border-radius: 12px !important;
    }

    .afaq-app :where(.afaq-page-header, .afaq-workspace-welcome, .afaq-owner-summary) {
        padding: 14px !important;
        display: block !important;
    }

    .afaq-app :where(.afaq-grid, .afaq-cards-grid, .afaq-project-grid, .afaq-workspace-metrics, .afaq-stats-grid) {
        grid-template-columns: 1fr !important;
    }

    .afaq-app .afaq-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .afaq-app .afaq-actions .afaq-btn {
        width: 100%;
    }

    .afaq-app [data-afaq-notifications-panel] {
        position: fixed !important;
        top: 68px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 86px) !important;
    }

    .afaq-app table {
        min-width: 650px;
    }
}