/* =========================================================
   YOGEXA BRAND SYSTEM
   Primary: premium slate-blue palette
   Accent: mint #98ddc5
   ========================================================= */

:root {
    --yogexa-primary: #365184;
    --yogexa-primary-strong: #29406d;
    --yogexa-primary-deep: #20345a;
    --yogexa-primary-soft: #a9c5da;
    --yogexa-primary-pale: #e8f0f6;
    --yogexa-accent: #98ddc5;
    --yogexa-accent-strong: #56c79f;
    --yogexa-accent-deep: #2e8d6c;
    --yogexa-bg: #f7fafc;
    --yogexa-surface: #ffffff;
    --yogexa-surface-soft: #f0f5f9;
    --yogexa-text: #17263a;
    --yogexa-muted: #66758a;
    --yogexa-border: #dce6ee;
    --yogexa-shadow: 0 12px 30px rgba(32, 52, 90, 0.09);
    --yogexa-radius: 16px;

    /* Existing theme variables retained for backward compatibility. */
    --lexpro-page-bg: var(--yogexa-bg);
    --lexpro-surface: var(--yogexa-surface);
    --lexpro-surface-soft: var(--yogexa-surface-soft);
    --lexpro-text: var(--yogexa-text);
    --lexpro-text-strong: #102039;
    --lexpro-muted: var(--yogexa-muted);
    --lexpro-border: var(--yogexa-border);
    --lexpro-input-border: #c8d5e0;
    --lexpro-sidebar: var(--yogexa-primary-deep);
    --lexpro-sidebar-hover: #2a4676;
    --lexpro-sidebar-active: var(--yogexa-primary);
    --lexpro-sidebar-text: #eaf2f8;
}

html, body {
    accent-color: var(--yogexa-primary);
}

body:not(.lexpro-dark) {
    background: var(--yogexa-bg);
    color: var(--yogexa-text);
}

/* App shell */
body:not(.lexpro-dark) .sidebar {
    background: linear-gradient(180deg, var(--yogexa-primary-deep) 0%, #182d4f 100%) !important;
}
body:not(.lexpro-dark) .nav-item:hover {
    background: rgba(152, 221, 197, 0.12) !important;
}
body:not(.lexpro-dark) .nav-item.active {
    background: rgba(152, 221, 197, 0.18) !important;
    box-shadow: inset 3px 0 0 var(--yogexa-accent);
}
.brand-logo, .logo {
    background: linear-gradient(135deg, var(--yogexa-primary) 0%, var(--yogexa-accent-deep) 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(54,81,132,.22);
}
.brand-text h2, .brand-name, .brand strong {
    letter-spacing: .035em;
}

/* Cards / surfaces */
body:not(.lexpro-dark) .card,
body:not(.lexpro-dark) .panel,
body:not(.lexpro-dark) .page-card,
body:not(.lexpro-dark) .stat-card,
body:not(.lexpro-dark) .action-card,
body:not(.lexpro-dark) .table-card,
body:not(.lexpro-dark) .login-card,
body:not(.lexpro-dark) .form-card,
body:not(.lexpro-dark) .plan {
    border-color: var(--yogexa-border) !important;
    box-shadow: var(--yogexa-shadow);
}

/* Buttons / actions */
.btn-primary,
button.btn-primary,
.nav-btn.primary,
.plan-btn,
.brand-action.primary {
    background: var(--yogexa-primary) !important;
    border-color: var(--yogexa-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
button.btn-primary:hover,
.nav-btn.primary:hover,
.plan-btn:hover,
.brand-action.primary:hover {
    background: var(--yogexa-primary-strong) !important;
    border-color: var(--yogexa-primary-strong) !important;
}

a, .panel-link {
    color: var(--yogexa-primary);
}

/* Inputs */
input:focus, select:focus, textarea:focus {
    border-color: var(--yogexa-primary) !important;
    box-shadow: 0 0 0 3px rgba(54,81,132,.12) !important;
    outline: none !important;
}

/* Pricing */
.plan[data-plan-code="SMALL_FIRM"] {
    border: 2px solid var(--yogexa-primary) !important;
    transform: translateY(-4px);
}
.plan .popular, .popular {
    background: var(--yogexa-accent) !important;
    color: #173c31 !important;
}
.plan .price {
    color: var(--yogexa-primary-deep) !important;
}
.plan.selected {
    box-shadow: 0 0 0 3px rgba(152,221,197,.38), var(--yogexa-shadow) !important;
}

/* Authentication / public pages */
.brand-side {
    background: linear-gradient(145deg, var(--yogexa-primary-deep) 0%, var(--yogexa-primary) 62%, #486e9f 100%) !important;
}
.eyebrow {
    color: var(--yogexa-accent-deep) !important;
}
.brand-side .eyebrow, .brand-side .brand-subtitle {
    color: #dcecf0 !important;
}
.trial-box, .trial-note {
    border-color: rgba(152,221,197,.55) !important;
}

/* Case document chip */
.case-documents {
    min-width: 150px;
}
.case-document-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 210px;
    padding: 7px 10px;
    border: 1px solid var(--yogexa-border);
    border-radius: 10px;
    background: var(--yogexa-primary-pale);
    color: var(--yogexa-primary-deep) !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.case-document-link:hover {
    background: #dceaf3;
    border-color: var(--yogexa-primary-soft);
}
.case-document-link .doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.case-document-more {
    display: block;
    margin-top: 5px;
    color: var(--yogexa-muted);
    font-size: 11px;
}

/* Accessible document viewer */
.yogexa-pdf-viewer {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    background: rgba(13,27,48,.72);
    padding: 24px;
}
.yogexa-pdf-viewer.open { display: flex; }
.yogexa-pdf-shell {
    width: min(1180px, 100%);
    height: min(92vh, 980px);
    margin: auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
}
.yogexa-pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--yogexa-primary-deep);
    color: white;
}
.yogexa-pdf-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}
.yogexa-pdf-actions { display:flex; gap:8px; }
.yogexa-pdf-actions button, .yogexa-pdf-actions a {
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.10);
    color: #fff !important;
    border-radius: 9px;
    padding: 7px 10px;
    text-decoration: none;
    cursor: pointer;
}
.yogexa-pdf-frame {
    width: 100%;
    flex: 1;
    border: 0;
    background: #eef2f6;
}
@media (max-width: 700px) {
    .yogexa-pdf-viewer { padding: 0; }
    .yogexa-pdf-shell { width:100%; height:100vh; border-radius:0; }
    .plan[data-plan-code="SMALL_FIRM"] { transform:none; }
}

/* Dark mode keeps the same YOGEXA identity. */
body.lexpro-dark .sidebar {
    background: linear-gradient(180deg, #152843 0%, #0e1d33 100%) !important;
}
body.lexpro-dark .btn-primary {
    background: #6f94c0 !important;
    border-color: #6f94c0 !important;
}
body.lexpro-dark a { color: #a9c5da; }


/* =========================================================
   YOGEXA consistency fixes — sidebar, case document action,
   PDF viewer and Reports dark mode
   ========================================================= */

/* Keep the Sign Out area identical on every authenticated page. */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
}
.sidebar .nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.sidebar-footer {
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
}
.logout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(15, 30, 52, .82) !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
.logout-button:hover {
    background: rgba(46, 77, 112, .95) !important;
}

/* Keep case document action centered and visually aligned with row actions. */
.case-documents {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-height: 40px !important;
}
.case-document-link {
    min-height: 36px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Native-PDF loading state. */
.yogexa-pdf-viewer.loading .yogexa-pdf-frame {
    opacity: .6;
}

/* Reports page: complete dark-mode coverage for controls/cards that use
   page-specific classes rather than the shared card/input classes. */
body.lexpro-dark .filters,
body.lexpro-dark .summary-card,
body.lexpro-dark .report-card,
body.lexpro-dark .report-head {
    background: var(--lexpro-surface, #111827) !important;
    color: var(--lexpro-text, #e5e7eb) !important;
    border-color: var(--lexpro-border, #334155) !important;
}
body.lexpro-dark .filters .field label,
body.lexpro-dark .filters .activity-toggle,
body.lexpro-dark .report-title,
body.lexpro-dark .summary-value {
    color: var(--lexpro-text-strong, #f9fafb) !important;
}
body.lexpro-dark .filters input,
body.lexpro-dark .filters select,
body.lexpro-dark .button {
    background: var(--lexpro-surface-soft, #182235) !important;
    color: var(--lexpro-text, #e5e7eb) !important;
    border-color: var(--lexpro-input-border, #475569) !important;
}
body.lexpro-dark .button.primary {
    background: var(--yogexa-primary, #35588a) !important;
    color: #fff !important;
    border-color: var(--yogexa-primary, #35588a) !important;
}
body.lexpro-dark .summary-label,
body.lexpro-dark .summary-help,
body.lexpro-dark .report-meta,
body.lexpro-dark .page-heading p {
    color: var(--lexpro-muted, #94a3b8) !important;
}
body.lexpro-dark .report-card table,
body.lexpro-dark .report-card th,
body.lexpro-dark .report-card td {
    color: var(--lexpro-text, #e5e7eb) !important;
    border-color: var(--lexpro-border, #334155) !important;
}
body.lexpro-dark .report-card th {
    background: var(--lexpro-surface-soft, #182235) !important;
}
body.lexpro-dark .report-card tbody tr:hover {
    background: rgba(152, 221, 197, .06) !important;
}

/* =========================================================
   YOGEXA sidebar top-alignment fix
   Prevent the brand/header block from shrinking on pages whose
   navigation is taller than the viewport. This keeps the sidebar
   header aligned consistently with Messages, Billing and Users.
   ========================================================= */
.sidebar .brand {
    flex: 0 0 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    box-sizing: border-box !important;
}

/* =========================================================
   YOGEXA LEGAL / COPYRIGHT FOOTER — polished alignment
   ========================================================= */
.yogexa-legal-footer {
    width: 100%;
    box-sizing: border-box;
    padding: 22px 28px 24px;
    margin-top: 0;
    border-top: 1px solid rgba(53, 88, 138, 0.18);
    background: #f4f6f8;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.yogexa-legal-footer .legal-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
}

.yogexa-legal-footer a {
    color: #35558f;
    font-weight: 700;
    text-decoration: none;
    transition: color .18s ease;
}

.yogexa-legal-footer a:hover,
.yogexa-legal-footer a:focus-visible {
    color: #2f8f78;
    text-decoration: underline;
}

.yogexa-legal-footer .legal-separator {
    color: #98ddc5;
    font-weight: 800;
}

body.lexpro-dark .yogexa-legal-footer,
html.lexpro-dark .yogexa-legal-footer,
html[data-theme="dark"] .yogexa-legal-footer {
    background: #0f172a;
    border-top-color: rgba(152, 221, 197, 0.16);
    color: #9fb3cf;
}

body.lexpro-dark .yogexa-legal-footer a,
html.lexpro-dark .yogexa-legal-footer a,
html[data-theme="dark"] .yogexa-legal-footer a {
    color: #98ddc5;
}

body.lexpro-dark .yogexa-legal-footer a:hover,
html.lexpro-dark .yogexa-legal-footer a:hover,
html[data-theme="dark"] .yogexa-legal-footer a:hover {
    color: #bee9da;
}

@media (max-width: 640px) {
    .yogexa-legal-footer {
        padding: 18px 16px 20px;
        font-size: 12px;
    }
    .yogexa-legal-footer .legal-footer-inner {
        gap: 6px 10px;
    }
}

/* =========================================================
   YOGEXA AUTH SURFACE FIX
   Keep Login / Create Account right side as ONE clean surface.
   Prevent the shared card theme from drawing a second pale/white
   panel behind the authentication forms.
   ========================================================= */
.form-side {
    background: var(--yogexa-bg, #f7fafc) !important;
}

.form-side > .login-card,
.form-side > .form-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.form-side::before,
.form-side::after,
.form-side > .login-card::before,
.form-side > .login-card::after,
.form-side > .form-card::before,
.form-side > .form-card::after {
    box-shadow: none !important;
}

body.lexpro-dark .form-side,
html.lexpro-dark .form-side,
html[data-theme="dark"] .form-side {
    background: #0b1220 !important;
}

body.lexpro-dark .form-side > .login-card,
body.lexpro-dark .form-side > .form-card,
html.lexpro-dark .form-side > .login-card,
html.lexpro-dark .form-side > .form-card,
html[data-theme="dark"] .form-side > .login-card,
html[data-theme="dark"] .form-side > .form-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}