/* ═══════════════════════════════════════════════════════════
   RZ Service AI Panel — layout.css
   Topbar · Public-Nav · Page-Wrapper · Responsive
   Matches CS-dashboard.php horizontal layout exactly
   ═══════════════════════════════════════════════════════════ */

/* ── Page wrapper z-index base ──────────────────────────── */
.page-content {
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   CS TOPBAR (authenticated + public)
══════════════════════════════════════════════════════════ */
.cs-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--cs-border);
    background: rgba(3, 7, 18, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.cs-topbar__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    overflow: visible;
}

/* ── Brand ─────────────────────────────────────────────── */
.cs-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: inherit;
    flex-shrink: 0;
}

.cs-brand__mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--brand-gradient);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 10px 28px rgba(45, 212, 191, 0.25);
}

.cs-brand__text { line-height: 1.2; }

.cs-brand__title {
    font-family: var(--cs-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text-primary);
}

.cs-brand__sub {
    font-size: 0.62rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cs-muted);
}

/* ── Nav links ─────────────────────────────────────────── */
.cs-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-left: 1.2rem;
}

.cs-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.9rem;
    border-radius: var(--r-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: var(--t-fast);
    white-space: nowrap;
}

.cs-nav a:hover {
    border-color: rgba(45, 212, 191, 0.3);
    color: var(--text-primary);
}

.cs-nav a.is-active {
    background: linear-gradient(135deg, rgba(45,212,191,0.16), rgba(99,102,241,0.20));
    border-color: rgba(45,212,191,0.35);
    color: var(--text-primary);
}

.cs-nav a i {
    font-size: 0.82rem;
    opacity: 0.85;
}

/* ── Spacer ─────────────────────────────────────────────── */
.cs-topbar__spacer { flex: 1; }

/* ── Language switcher ──────────────────────────────────── */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 8px;
    margin-right: .5rem;
}
.lang-btn {
    font-size: .73rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px 5px;
    border-radius: 5px;
    letter-spacing: .04em;
    transition: color .15s, background .15s;
    cursor: pointer;
}
.lang-btn:hover {
    color: var(--cs-teal);
    background: rgba(45,212,191,.10);
}
.lang-btn--active {
    color: var(--cs-teal);
    font-weight: 700;
    background: rgba(45,212,191,.10);
}
.lang-sep {
    color: var(--border);
    font-size: .65rem;
    user-select: none;
}

/* ── Profile dropdown ──────────────────────────────────── */
.cs-profile {
    position: relative;
    z-index: 60;
    flex-shrink: 0;
}

.cs-profile__btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    border-radius: 13px;
    border: 1px solid var(--cs-border);
    background: rgba(15, 23, 42, 0.65);
    cursor: pointer;
    transition: var(--t-fast);
}

.cs-profile__btn:hover {
    border-color: rgba(45,212,191,0.35);
    background: rgba(15, 23, 42, 0.85);
}

.cs-profile__btn img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.cs-profile__meta { line-height: 1.2; }

.cs-profile__name {
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text-primary);
}

.cs-profile__tag {
    font-size: 0.68rem;
    color: var(--cs-muted);
}

.cs-profile__caret {
    font-size: 0.7rem;
    color: var(--cs-muted);
    margin-left: 0.2rem;
    transition: transform 0.2s;
}

.cs-profile.open .cs-profile__caret { transform: rotate(180deg); }

.cs-profile__dd {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 230px;
    padding: 0.6rem;
    border-radius: var(--cs-radius-sm);
    border: 1px solid var(--cs-border);
    background: rgba(10, 14, 28, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: var(--cs-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    pointer-events: none;
    /* bridge: fills gap so mouse can reach dropdown without closing */
    padding-top: 0.75rem;
}

/* opened only via .open class (click) — hover removed intentionally */
.cs-profile.open .cs-profile__dd {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* invisible hover-bridge covers the gap between button and dropdown */
.cs-profile__dd::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.cs-dd-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.65rem;
    border-radius: 9px;
    background: rgba(45,212,191,0.07);
    margin-bottom: 0.4rem;
}

.cs-dd-header img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
}

.cs-dd-header__name { font-weight: 600; font-size: 0.86rem; }
.cs-dd-header__id { font-size: 0.7rem; color: var(--cs-muted); }

.cs-dd-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.52rem 0.65rem;
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--t-fast);
}

.cs-dd-link:hover {
    background: rgba(45, 212, 191, 0.09);
    color: var(--text-primary);
}

.cs-dd-link i { width: 16px; text-align: center; font-size: 0.82rem; color: var(--cs-muted); }

.cs-dd-link.danger { color: #fca5a5; }
.cs-dd-link.danger:hover { background: rgba(239,68,68,0.10); color: #f87171; }
.cs-dd-link.danger i { color: #f87171; }

.cs-dd-divider {
    height: 1px;
    margin: 0.4rem 0;
    background: rgba(148,163,184,0.15);
}

/* ── Public nav (non-authenticated header) ───────────────── */
.pub-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--cs-border);
    background: rgba(3, 7, 18, 0.88);
    backdrop-filter: blur(18px);
}

.pub-nav__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pub-nav__spacer { flex: 1; }

/* ── Page wrapper ─────────────────────────────────────────── */
.page-wrapper {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.page-wrapper--wide {
    max-width: 1340px;
}

.page-wrapper--narrow {
    max-width: 820px;
}

/* ── Section header ─────────────────────────────────────── */
.section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.section-head h2 {
    font-family: var(--cs-display);
    font-size: 1.25rem;
    font-weight: 700;
    flex: 1;
}

.section-head p {
    font-size: 0.9rem;
    color: var(--cs-muted);
}

/* ── Two-column grid ────────────────────────────────────── */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.two-col--sidebar {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
    .cs-nav { display: none; }
    .two-col, .two-col--sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .cs-topbar__inner { padding: 0.75rem 1rem; gap: 0.5rem; }
    .cs-brand__text { display: none; }
    .page-wrapper { padding: 1.5rem 1rem 3rem; }
}