/*
 * AQARK R96-B1 Product UI Convergence
 * Shared visual contract for public, customer/agent dashboards and admin.
 *
 * Goals:
 * - preserve canonical AQARK identity and the accepted R95/R2 public layer
 * - normalize spacing, typography, cards, forms, tables, tabs and navigation
 * - make protected surfaces feel like the same product as the public marketplace
 * - use logical properties and responsive rules for RTL/LTR parity
 */

:root {
    --aqp-navy: #212356;
    --aqp-navy-strong: #17183f;
    --aqp-ink: #172033;
    --aqp-muted: #667085;
    --aqp-subtle: #98a2b3;
    --aqp-canvas: #f5f7fb;
    --aqp-surface: #ffffff;
    --aqp-surface-soft: #f8fafc;
    --aqp-border: #e4e7ec;
    --aqp-border-strong: #d0d5dd;
    --aqp-blue: #2563eb;
    --aqp-blue-soft: #eff6ff;
    --aqp-green: #15803d;
    --aqp-green-soft: #ecfdf3;
    --aqp-amber: #b45309;
    --aqp-amber-soft: #fff7ed;
    --aqp-red: #b42318;
    --aqp-red-soft: #fff1f2;
    --aqp-purple: #7c3aed;
    --aqp-purple-soft: #f5f3ff;
    --aqp-radius-sm: 10px;
    --aqp-radius-md: 14px;
    --aqp-radius-lg: 18px;
    --aqp-radius-xl: 22px;
    --aqp-shadow-sm: 0 1px 2px rgba(16,24,40,.04);
    --aqp-shadow-md: 0 8px 24px rgba(16,24,40,.07);
    --aqp-shadow-lg: 0 18px 48px rgba(16,24,40,.10);
    --aqp-content: 1440px;
    --aqp-control-h: 46px;
    --aqp-transition: 160ms ease;
}

/* ---------- common page rhythm ---------- */

body[data-aqark-reference-layout] {
    background: var(--aqp-canvas);
    color: var(--aqp-ink);
    font-size: 15px;
    line-height: 1.55;
}

body[data-aqark-reference-layout] * {
    box-sizing: border-box;
}

body[data-aqark-reference-layout] :where(a, button, input, select, textarea) {
    transition:
        border-color var(--aqp-transition),
        box-shadow var(--aqp-transition),
        background-color var(--aqp-transition),
        color var(--aqp-transition),
        transform var(--aqp-transition);
}

body[data-aqark-reference-layout] :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18);
    outline-offset: 2px;
}

body[data-aqark-reference-layout] main {
    min-width: 0;
}

/* ---------- public shell finishing layer ---------- */

body[data-aqark-reference-layout="public"] {
    background: #fff;
}

body[data-aqark-reference-layout="public"] .aqark-public-header-v2 {
    border-bottom: 1px solid rgba(228, 231, 236, .9);
    box-shadow: 0 4px 18px rgba(16, 24, 40, .04);
    backdrop-filter: blur(12px);
}

body[data-aqark-reference-layout="public"] .aqark-home-search-v2 {
    border-radius: var(--aqp-radius-xl);
}

body[data-aqark-reference-layout="public"] :where(
    .aqark-property-results-v2,
    .aqark-property-detail-v2
) {
    --aqark-card-radius: var(--aqp-radius-lg);
}

body[data-aqark-reference-layout="public"] :where(
    [class*="property-card"],
    [class*="project-card"],
    [class*="developer-card"],
    [class*="agency-card"]
) {
    border-radius: var(--aqp-radius-lg);
}

body[data-aqark-reference-layout="public"] :where(
    [class*="property-card"],
    [class*="project-card"],
    [class*="developer-card"],
    [class*="agency-card"]
):hover {
    box-shadow: var(--aqp-shadow-md);
}

body[data-aqark-reference-layout="public"] footer {
    border-top: 1px solid var(--aqp-border);
}

/* ---------- protected top bars ---------- */

body[data-aqark-reference-layout="dashboard"] > header,
body[data-aqark-reference-layout="admin"] > header,
body[data-aqark-reference-layout="admin"] [data-aqark-admin-reference-header] {
    min-height: 68px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: var(--aqp-navy);
    box-shadow: 0 6px 24px rgba(33,35,86,.13);
}

body[data-aqark-reference-layout="dashboard"] > header,
body[data-aqark-reference-layout="admin"] > header {
    padding-inline: clamp(16px, 3vw, 34px);
}

body[data-aqark-reference-layout="dashboard"] > header a,
body[data-aqark-reference-layout="admin"] > header a,
body[data-aqark-reference-layout="admin"] [data-aqark-admin-reference-header] a {
    font-size: .9rem;
}

body[data-aqark-reference-layout="dashboard"] > header :where(input, select),
body[data-aqark-reference-layout="admin"] > header :where(input, select),
body[data-aqark-reference-layout="admin"] [data-aqark-admin-reference-header] :where(input, select) {
    min-height: 40px;
    border-radius: 999px;
}

/* ---------- protected page canvas ---------- */

body[data-aqark-reference-layout="dashboard"] > main,
body[data-aqark-reference-layout="admin"] > main {
    width: min(100%, var(--aqp-content));
    max-width: var(--aqp-content) !important;
    margin-inline: auto;
    padding:
        clamp(20px, 3vw, 36px)
        clamp(16px, 3vw, 36px)
        clamp(32px, 5vw, 56px);
}

body[data-aqark-reference-layout] [data-aqark-account-shell] {
    gap: clamp(18px, 2.2vw, 30px);
    align-items: flex-start;
}

body[data-aqark-reference-layout] [data-aqark-account-sidebar] {
    flex: 0 0 276px;
    width: 276px;
    max-width: 276px;
    position: sticky;
    top: 86px;
    border: 1px solid var(--aqp-border);
    border-radius: var(--aqp-radius-xl);
    background: var(--aqp-surface);
    box-shadow: var(--aqp-shadow-sm);
    overflow: hidden;
}

body[data-aqark-reference-layout] [data-aqark-account-content] {
    min-width: 0;
    flex: 1 1 0%;
}

/* physical-left admin sidebar keeps its existing placement */
body[data-aqark-reference-layout="admin"] [data-aqark-admin-physical-left-sidebar] {
    align-self: flex-start;
}

/* ---------- shared navigation ---------- */

body[data-aqark-reference-layout] [data-aqark-account-sidebar] nav,
body[data-aqark-reference-layout] [data-aqark-account-sidebar] [role="navigation"] {
    padding: 10px;
}

body[data-aqark-reference-layout] [data-aqark-account-sidebar] a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 11px;
    color: #475467;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
}

body[data-aqark-reference-layout] [data-aqark-account-sidebar] a:hover {
    background: #f2f4f7;
    color: var(--aqp-navy);
}

body[data-aqark-reference-layout] [data-aqark-account-sidebar] a:is(
    .active,
    [aria-current="page"],
    [data-active="true"]
) {
    background: #eef2ff;
    color: var(--aqp-navy);
    box-shadow: inset 3px 0 0 #4f46e5;
}

html[dir="rtl"] body[data-aqark-reference-layout] [data-aqark-account-sidebar] a:is(
    .active,
    [aria-current="page"],
    [data-active="true"]
) {
    box-shadow: inset -3px 0 0 #4f46e5;
}

/* ---------- page title / section hierarchy ---------- */

body[data-aqark-reference-layout] [data-aqark-account-content] :where(h1) {
    margin: 0 0 6px;
    color: #101828;
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
}

body[data-aqark-reference-layout] [data-aqark-account-content] :where(h2) {
    color: #101828;
    font-size: 1.05rem;
    font-weight: 760;
    line-height: 1.35;
}

body[data-aqark-reference-layout] [data-aqark-account-content] :where(h3) {
    color: #344054;
    font-size: .96rem;
    font-weight: 720;
}

body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    .text-xs,
    [class*="text-[10px]"],
    [class*="text-[11px]"]
) {
    font-size: .8125rem !important;
    line-height: 1.4 !important;
}

/* ---------- profile / security / settings cards ---------- */

body[data-aqark-reference-layout] .aqr-settings-card {
    margin-block: 0 20px;
    border: 1px solid var(--aqp-border);
    border-radius: var(--aqp-radius-lg);
    background: var(--aqp-surface);
    box-shadow: var(--aqp-shadow-sm);
    overflow: hidden;
}

body[data-aqark-reference-layout] .aqr-settings-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #f0f2f5;
    background: linear-gradient(180deg, #fff 0%, #fcfcfd 100%);
}

body[data-aqark-reference-layout] .aqr-settings-card-head + * {
    padding-inline: 22px;
}

body[data-aqark-reference-layout] .aqr-settings-card > form {
    padding: 20px 22px 22px;
}

body[data-aqark-reference-layout] .aqr-settings-card--danger {
    border-color: #fecdd3;
    background: #fffdfd;
}

body[data-aqark-reference-layout] .aqr-settings-card--danger .aqr-settings-card-head {
    background: var(--aqp-red-soft);
    border-bottom-color: #ffe4e6;
}

body[data-aqark-reference-layout] .aqr-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

body[data-aqark-reference-layout] .aqr-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

body[data-aqark-reference-layout] .aqr-settings-form {
    display: grid;
    gap: 18px;
}

body[data-aqark-reference-layout] .aqr-settings-form label,
body[data-aqark-reference-layout] .aqr-settings-otp-form label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: .875rem;
    font-weight: 700;
}

body[data-aqark-reference-layout] .aqr-settings-input,
body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea
) {
    width: 100%;
    min-height: var(--aqp-control-h);
    padding: 10px 13px;
    border: 1px solid var(--aqp-border-strong);
    border-radius: var(--aqp-radius-sm);
    background: #fff;
    color: #101828;
    font-size: .925rem;
    line-height: 1.35;
    box-shadow: 0 1px 2px rgba(16,24,40,.02);
}

body[data-aqark-reference-layout] [data-aqark-account-content] textarea {
    min-height: 112px;
    resize: vertical;
}

body[data-aqark-reference-layout] .aqr-settings-input:hover,
body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    input, select, textarea
):hover {
    border-color: #b8c0cc;
}

body[data-aqark-reference-layout] .aqr-settings-input:focus,
body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    input, select, textarea
):focus {
    border-color: #8098f9;
    box-shadow: 0 0 0 4px rgba(79,70,229,.10);
    outline: none;
}

body[data-aqark-reference-layout] .aqr-settings-otp-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

/* ---------- content buttons ---------- */

body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    button,
    input[type="submit"],
    a[role="button"]
) {
    min-height: 42px;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 750;
}

body[data-aqark-reference-layout] [data-aqark-account-content] button:not(
    [class*="bg-"],
    [class*="text-"]
) {
    padding: 9px 15px;
    border: 1px solid var(--aqp-navy);
    background: var(--aqp-navy);
    color: #fff;
}

/* ---------- tables ---------- */

body[data-aqark-reference-layout] .aqr-settings-table-wrap,
body[data-aqark-reference-layout] [data-aqark-account-content] .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--aqp-border);
    border-radius: var(--aqp-radius-md);
    background: #fff;
}

body[data-aqark-reference-layout] .aqr-settings-table,
body[data-aqark-reference-layout] [data-aqark-account-content] table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-size: .875rem;
}

body[data-aqark-reference-layout] .aqr-settings-table th,
body[data-aqark-reference-layout] [data-aqark-account-content] table th {
    padding: 12px 14px;
    background: #f8fafc;
    color: #475467;
    font-size: .78rem;
    font-weight: 800;
    text-align: start;
    white-space: nowrap;
    border-bottom: 1px solid var(--aqp-border);
}

body[data-aqark-reference-layout] .aqr-settings-table td,
body[data-aqark-reference-layout] [data-aqark-account-content] table td {
    padding: 13px 14px;
    color: #344054;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}

body[data-aqark-reference-layout] [data-aqark-account-content] table tbody tr:last-child td {
    border-bottom: 0;
}

body[data-aqark-reference-layout] [data-aqark-account-content] table tbody tr:hover td {
    background: #fcfcfd;
}

/* ---------- tabs / segmented controls ---------- */

body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    [role="tablist"],
    .tabs,
    .aq-tabs
) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--aqp-border);
    border-radius: 12px;
    background: #f8fafc;
}

body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    [role="tab"],
    .tab,
    .aq-tab
) {
    min-height: 38px;
    padding: 8px 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #667085;
    font-size: .875rem;
    font-weight: 720;
}

body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    [role="tab"][aria-selected="true"],
    .tab.active,
    .aq-tab.active
) {
    background: #fff;
    color: var(--aqp-navy);
    box-shadow: var(--aqp-shadow-sm);
}

/* ---------- utility cards / empty states / notices ---------- */

body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    .card,
    .panel,
    [data-card],
    [data-aqark-card]
) {
    border: 1px solid var(--aqp-border);
    border-radius: var(--aqp-radius-lg);
    background: var(--aqp-surface);
    box-shadow: var(--aqp-shadow-sm);
}

body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    .alert,
    [role="alert"]
) {
    border-radius: var(--aqp-radius-md);
    padding: 12px 14px;
    font-size: .875rem;
    line-height: 1.5;
}

body[data-aqark-reference-layout] [data-aqark-account-content] :where(
    .badge,
    [data-badge]
) {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-inline: 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 760;
}

/* ---------- admin content density ---------- */

body[data-aqark-reference-layout="admin"] [data-aqark-account-content] {
    font-size: .925rem;
}

body[data-aqark-reference-layout="admin"] [data-aqark-account-content] :where(
    .p-1, .p-2, .px-1, .px-2, .py-1, .py-2
) {
    --aqp-density-guard: 1;
}

/* ---------- footer convergence ---------- */

body[data-aqark-reference-layout] footer {
    margin-top: auto;
    border-top: 1px solid var(--aqp-border);
    background: #fff;
    color: #667085;
}

body[data-aqark-reference-layout="dashboard"] footer,
body[data-aqark-reference-layout="admin"] footer {
    font-size: .825rem;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    body[data-aqark-reference-layout] [data-aqark-account-sidebar] {
        flex-basis: 244px;
        width: 244px;
        max-width: 244px;
    }
}

@media (max-width: 900px) {
    body[data-aqark-reference-layout="dashboard"] > main,
    body[data-aqark-reference-layout="admin"] > main {
        padding: 18px 14px 36px;
    }

    body[data-aqark-reference-layout] [data-aqark-account-shell] {
        display: block;
    }

    body[data-aqark-reference-layout] [data-aqark-account-sidebar] {
        position: static;
        width: 100%;
        max-width: none;
        margin-bottom: 18px;
    }

    body[data-aqark-reference-layout] [data-aqark-account-sidebar] nav,
    body[data-aqark-reference-layout] [data-aqark-account-sidebar] [role="navigation"] {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 9px;
        scrollbar-width: thin;
    }

    body[data-aqark-reference-layout] [data-aqark-account-sidebar] a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    body[data-aqark-reference-layout] .aqr-settings-grid,
    body[data-aqark-reference-layout] .aqr-security-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body[data-aqark-reference-layout] {
        font-size: 14px;
    }

    body[data-aqark-reference-layout="dashboard"] > header,
    body[data-aqark-reference-layout="admin"] > header {
        min-height: 60px;
        padding-inline: 12px;
    }

    body[data-aqark-reference-layout] .aqr-settings-card {
        border-radius: 14px;
    }

    body[data-aqark-reference-layout] .aqr-settings-card-head,
    body[data-aqark-reference-layout] .aqr-settings-card > form {
        padding: 16px;
    }

    body[data-aqark-reference-layout] .aqr-settings-card-head + * {
        padding-inline: 16px;
    }

    body[data-aqark-reference-layout] .aqr-settings-input,
    body[data-aqark-reference-layout] [data-aqark-account-content] :where(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        input[type="number"],
        input[type="search"],
        input[type="url"],
        select,
        textarea
    ) {
        min-height: 44px;
        font-size: 16px; /* prevent iOS form zoom */
    }

    body[data-aqark-reference-layout] [data-aqark-account-content] :where(
        h1
    ) {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-aqark-reference-layout] *,
    body[data-aqark-reference-layout] *::before,
    body[data-aqark-reference-layout] *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}