/*
 * MenetZero — Portal Design System
 * User spec: 14px primary · 12px secondary (lighter) · both portals
 */

:root {
    /* Primary text — 14px */
    --portal-14: 0.875rem;
    /* Secondary / helper text — 12px, lighter */
    --portal-12: 0.75rem;

    --ink-muted: #374151;
    --ink-secondary: #6b7280;
    --ink-placeholder: #9ca3af;

    --font-sans: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --portal-weight-body: 400;
    --portal-weight-medium: 500;
    --portal-weight-semibold: 600;

    /* Consistent line-height: 14px→20px, 12px→16px */
    --portal-lh-14: 1.428571;
    --portal-lh-12: 1.333333;

    --portal-space-stack: 0.25rem;
    --portal-space-field: 0.375rem;
    --portal-space-block: 1rem;
    --portal-space-section: 1.25rem;
    --portal-space-page-x: 1.5rem;
    --portal-space-page-y: 1.25rem;
}

/* ─── 1. Base: everything 14px ─── */
body.company-portal,
body.consultant-portal,
body.portal-auth {
    font-family: var(--font-sans);
    font-size: var(--portal-14);
    font-weight: var(--portal-weight-body);
    line-height: var(--portal-lh-14);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-shell,
.consultant-shell,
.portal-auth {
    font-family: var(--font-sans);
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
}

.app-shell .content-area,
.consultant-shell .content-area,
.app-shell p,
.app-shell li,
.app-shell td,
.app-shell th,
.app-shell label,
.consultant-shell p,
.consultant-shell li,
.consultant-shell td,
.consultant-shell th,
.consultant-shell label {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
}

/* ─── 2. Left nav — menu + section titles = 14px (both portals) ─── */
.app-shell .sidebar .nav-link,
.consultant-shell .sidebar .nav-link,
.app-shell .sidebar .nav-section-title,
.consultant-shell .sidebar .nav-section-title {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-medium);
}

.app-shell .sidebar .nav-section-title,
.consultant-shell .sidebar .nav-section-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-secondary);
}

.app-shell .sidebar-footer,
.consultant-shell .sidebar-footer,
.app-shell .sidebar-footer .text-xs,
.consultant-shell .sidebar-footer .text-xs,
.app-shell .sidebar-footer button,
.consultant-shell .sidebar-footer button {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
}

/* ─── Secondary text helper (12px + lighter) ─── */
.portal-text-secondary,
.app-shell .card-subtitle,
.consultant-shell .card-subtitle,
.app-shell .page-header p,
.consultant-shell .page-header p,
.cd-subtitle,
.app-shell .form-help,
.consultant-shell .form-help,
.app-shell .form-error,
.consultant-shell .form-error,
.app-shell .stat-card-delta,
.consultant-shell .stat-card-delta,
.app-shell .stat-card-label,
.consultant-shell .stat-card-label,
.cd-stat-label,
.cd-stat-meta,
.app-shell .content-area dt,
.consultant-shell .content-area dt,
.app-shell .badge,
.consultant-shell .badge,
.app-shell .table thead th,
.consultant-shell .table thead th,
.app-shell table.min-w-full thead th,
.consultant-shell table.min-w-full thead th,
.app-shell .badge-plan,
.consultant-shell .badge-plan {
    font-size: var(--portal-12) !important;
    line-height: var(--portal-lh-12) !important;
    font-weight: var(--portal-weight-body);
    color: var(--ink-secondary);
}

.app-shell .section-heading,
.consultant-shell .section-heading {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-semibold);
    color: var(--ink);
    text-transform: none;
    letter-spacing: -0.01em;
}

/* ─── 3. Buttons — all 14px ─── */
.app-shell .btn,
.app-shell .btn-primary,
.app-shell .btn-secondary,
.app-shell .btn-outline,
.app-shell .btn-ghost,
.app-shell .btn-danger,
.app-shell .btn-warning,
.app-shell .btn-sm,
.app-shell .btn-lg,
.app-shell .btn-xs,
.consultant-shell .btn,
.consultant-shell .btn-primary,
.consultant-shell .btn-secondary,
.consultant-shell .btn-outline,
.consultant-shell .btn-ghost,
.consultant-shell .btn-sm,
.consultant-shell .btn-lg,
.consultant-shell .btn-xs,
.portal-auth .btn,
.portal-auth .btn-primary,
.portal-auth .btn-secondary,
.app-shell .content-area a.btn,
.consultant-shell .content-area a.btn,
.app-shell .content-area button.btn,
.consultant-shell .content-area button.btn {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-medium);
}

/* Tailwind-style action buttons in content */
.app-shell .content-area a[class*='px-'][class*='py-']:not(.badge),
.app-shell .content-area button[class*='px-'][class*='py-']:not(.badge),
.consultant-shell .content-area a[class*='px-'][class*='py-']:not(.badge),
.consultant-shell .content-area button[class*='px-'][class*='py-']:not(.badge) {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
}

/* ─── 4. Alerts / success / error messages — 14px ─── */
.app-shell .alert,
.app-shell .alert-success,
.app-shell .alert-danger,
.app-shell .alert-warning,
.app-shell .alert-info,
.consultant-shell .alert,
.consultant-shell .alert-success,
.consultant-shell .alert-danger,
.consultant-shell .alert-warning,
.consultant-shell .alert-info,
.app-shell .flash-stack .alert,
.consultant-shell .flash-stack .alert,
.app-shell .content-area .mb-4.rounded-lg.border.px-4.py-3,
.consultant-shell .content-area .mb-4.rounded-lg.border.px-4.py-3,
.app-shell .content-area [role="alert"],
.consultant-shell .content-area [role="alert"] {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
}

/* ─── 5. Placeholders — lighter ─── */
.app-shell input::placeholder,
.app-shell textarea::placeholder,
.consultant-shell input::placeholder,
.consultant-shell textarea::placeholder,
.app-shell .form-control::placeholder,
.app-shell .form-textarea::placeholder,
.consultant-shell .form-control::placeholder,
.consultant-shell .form-textarea::placeholder,
.portal-auth input::placeholder,
.portal-auth textarea::placeholder {
    color: var(--ink-placeholder) !important;
    font-size: var(--portal-14);
    font-weight: var(--portal-weight-body);
    opacity: 1;
}

/* ─── 6. Consistent spacing (admin / legacy shells without portal-shell-inner) ─── */
.app-shell:not(:has(.portal-shell-inner)) .content-area,
.consultant-shell:not(:has(.portal-shell-inner)) .content-area {
    padding: var(--portal-space-page-y) var(--portal-space-page-x);
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.app-shell .page-header,
.consultant-shell .page-header,
.cd-page-head {
    margin-bottom: var(--portal-space-section);
    gap: var(--portal-space-block);
}

.app-shell .card-header,
.consultant-shell .card-header {
    padding: var(--portal-space-block) 1.25rem;
}

.app-shell .card-body,
.consultant-shell .card-body {
    padding: var(--portal-space-section);
}

.app-shell .form-group,
.consultant-shell .form-group {
    margin-bottom: var(--portal-space-block);
}

.app-shell .form-label,
.consultant-shell .form-label,
.portal-auth .form-label,
.app-shell .content-area label.block.text-sm,
.consultant-shell .content-area label.block.text-sm {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    font-weight: var(--portal-weight-medium);
    color: var(--ink);
    margin-bottom: var(--portal-space-field);
}

.app-shell .form-help,
.consultant-shell .form-help {
    margin-top: var(--portal-space-field);
}

.app-shell .flash-stack,
.consultant-shell .flash-stack {
    margin-bottom: var(--portal-space-block);
    gap: var(--portal-space-field);
}

/* ─── Primary UI elements stay 14px ─── */
.app-shell .header .page-title,
.consultant-shell .header .page-title {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-medium);
    color: var(--ink-muted);
}

.app-shell .header-btn,
.consultant-shell .header-btn,
.app-shell .dropdown-item,
.consultant-shell .dropdown-item {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
}

.app-shell .card-title,
.consultant-shell .card-title {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    font-weight: var(--portal-weight-semibold);
    color: var(--ink);
    margin-bottom: var(--portal-space-stack);
}

.app-shell .table tbody td,
.consultant-shell .table tbody td,
.app-shell table.min-w-full tbody td,
.consultant-shell table.min-w-full tbody td {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    color: var(--ink);
}

.app-shell .content-area input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']),
.app-shell .content-area textarea,
.app-shell .content-area select,
.consultant-shell .content-area input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']),
.consultant-shell .content-area textarea,
.consultant-shell .content-area select,
.app-shell .form-control,
.app-shell .form-select,
.app-shell .form-textarea,
.consultant-shell .form-control,
.consultant-shell .form-select,
.consultant-shell .form-textarea {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    color: var(--ink);
}

/* Page titles — primary 14px semibold; subtitle below = 12px secondary */
.app-shell .page-header h1,
.consultant-shell .page-header h1,
.cd-page-head h2 {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    font-weight: var(--portal-weight-semibold);
    margin-bottom: var(--portal-space-stack);
}

.app-shell .page-header p,
.consultant-shell .page-header p,
.cd-subtitle {
    margin-top: 0;
}

/* Stat numbers — primary 14px (labels/deltas = 12px via design system) */
.app-shell .stat-card-value,
.consultant-shell .stat-card-value,
.cd-stat-value {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-semibold);
}

.cd-stat-value span {
    font-size: var(--portal-12);
    color: var(--ink-secondary);
}

/* ─── Tailwind size utilities → locked to 14 / 12 ─── */
.app-shell .text-xs,
.consultant-shell .text-xs,
.portal-auth .text-xs {
    font-size: var(--portal-12) !important;
    line-height: var(--portal-lh-12) !important;
    color: var(--ink-secondary);
}

.app-shell .text-sm,
.app-shell .text-base,
.consultant-shell .text-sm,
.consultant-shell .text-base,
.portal-auth .text-sm,
.portal-auth .text-base {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
}

.app-shell .text-lg,
.app-shell .text-xl,
.app-shell .text-2xl,
.app-shell .text-3xl,
.consultant-shell .text-lg,
.consultant-shell .text-xl,
.consultant-shell .text-2xl,
.consultant-shell .text-3xl {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-semibold);
}

/* Grey / slate colours */
.app-shell .text-gray-900,
.app-shell .text-gray-800,
.app-shell .text-slate-900,
.app-shell .text-slate-800,
.consultant-shell .text-gray-900,
.consultant-shell .text-gray-800,
.consultant-shell .text-slate-900,
.consultant-shell .text-slate-800 {
    color: var(--ink) !important;
}

.app-shell .text-gray-600,
.app-shell .text-gray-700,
.app-shell .text-gray-500,
.app-shell .text-slate-600,
.app-shell .text-slate-700,
.app-shell .text-slate-500,
.consultant-shell .text-gray-600,
.consultant-shell .text-gray-700,
.consultant-shell .text-gray-500,
.consultant-shell .text-slate-600,
.consultant-shell .text-slate-700,
.consultant-shell .text-slate-500 {
    color: var(--ink-secondary) !important;
}

.app-shell .text-gray-400,
.app-shell .text-slate-400,
.consultant-shell .text-gray-400,
.consultant-shell .text-slate-400 {
    color: var(--ink-placeholder) !important;
}

.app-shell .border-gray-200,
.app-shell .border-gray-300,
.app-shell .border-slate-100,
.app-shell .border-slate-200,
.consultant-shell .border-gray-200,
.consultant-shell .border-gray-300,
.consultant-shell .border-slate-100,
.consultant-shell .border-slate-200 {
    border-color: var(--line) !important;
}

.app-shell .bg-gray-50,
.consultant-shell .bg-gray-50 {
    background-color: var(--canvas) !important;
}

.portal-auth {
    background: #ffffff;
    color: var(--ink);
}

.portal-auth .auth-form .form-label,
.portal-auth .form-label {
    display: block;
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    font-weight: var(--portal-weight-medium);
    color: var(--ink);
    margin-bottom: var(--portal-space-field);
}

.portal-auth .auth-eyebrow {
    margin: 0 0 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--portal-weight-medium);
}

.portal-auth .auth-title {
    font-size: var(--portal-14);
    font-weight: var(--portal-weight-semibold);
    line-height: var(--portal-lh-14);
    color: var(--ink);
    margin: 0 0 0.375rem;
}

.portal-auth .auth-lead {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    color: var(--ink-secondary);
    margin: 0 0 1.25rem;
}

.portal-auth .auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    font-size: var(--portal-12);
    line-height: var(--portal-lh-12);
    color: var(--ink-secondary);
    text-transform: lowercase;
}

.portal-auth .auth-divider::before,
.portal-auth .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.portal-auth .auth-footer {
    margin: 1.25rem 0 0;
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    color: var(--ink-secondary);
}

.portal-auth .auth-footer-sub {
    margin: 0.5rem 0 0;
    font-size: var(--portal-12);
    line-height: var(--portal-lh-12);
    color: var(--ink-secondary);
}

.portal-auth .form-group {
    margin-bottom: 1rem;
}

.portal-auth .form-group.mb-0 {
    margin-bottom: 0;
}

.portal-auth form.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.portal-auth .form-input,
.portal-auth .auth-form input[type="text"],
.portal-auth .auth-form input[type="email"],
.portal-auth .auth-form input[type="password"],
.portal-auth .auth-form input[type="tel"] {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-body);
    color: var(--ink) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.12s var(--easing), box-shadow 0.12s var(--easing);
    -webkit-appearance: none;
    appearance: none;
}

.portal-auth .form-input:hover,
.portal-auth .auth-form input:hover {
    border-color: var(--ink-subtle) !important;
}

.portal-auth .form-input:focus,
.portal-auth .auth-form input:focus {
    outline: none;
    border-color: var(--brand) !important;
    box-shadow: var(--shadow-ring);
}

.portal-auth .form-input::placeholder,
.portal-auth .auth-form input::placeholder {
    color: var(--ink-placeholder) !important;
    opacity: 1;
}

.portal-auth .form-input[readonly],
.portal-auth .auth-form input[readonly] {
    background-color: var(--canvas) !important;
    color: var(--ink-secondary) !important;
    cursor: not-allowed;
}

.portal-auth .form-error {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    color: var(--danger);
    margin-top: 0.375rem;
}

.portal-auth .alert {
    font-size: var(--portal-14);
    line-height: var(--portal-lh-14);
    margin-bottom: 1rem;
}

.portal-auth .btn {
    min-height: 2.5rem;
}

.portal-auth .btn-full {
    width: 100%;
}

.portal-auth .btn svg,
.portal-auth .btn img {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.portal-auth .glass {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
}

.portal-auth .glass ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.portal-auth .glass .text-base,
.portal-auth .glass .text-sm,
.portal-auth .glass li {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
}

.portal-auth .glass .rounded-full.text-sm {
    font-size: var(--portal-12) !important;
    line-height: var(--portal-lh-12) !important;
    font-weight: var(--portal-weight-medium);
}

.portal-auth--company .brand-gradient {
    background: linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%);
}

.portal-auth--consultant .brand-gradient {
    background: linear-gradient(135deg, #021d71 0%, #1563eb 55%, #4d8ef7 100%);
}

.portal-auth--consultant {
    --brand: #1563eb;
    --brand-dark: #1254c9;
    --brand-darker: #021d71;
    --brand-soft: #eef4fe;
    --brand-softer: #d6e4fd;
    --shadow-ring: 0 0 0 3px rgb(21 99 235 / 0.18);
}

.portal-auth .brand-gradient {
    position: relative;
    overflow: hidden;
}

.portal-auth .brand-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

/* ─── Inner-page components (Quick Input, subscriptions, etc.) ─── */
.app-shell .scope-block__title,
.consultant-shell .scope-block__title,
.app-shell .callout-panel__title,
.consultant-shell .callout-panel__title,
.app-shell .source-card__title,
.consultant-shell .source-card__title,
.app-shell .empty-state__title,
.consultant-shell .empty-state__title {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-semibold);
    color: var(--ink);
}

.app-shell .scope-block__subtitle,
.consultant-shell .scope-block__subtitle,
.app-shell .callout-panel__body,
.consultant-shell .callout-panel__body,
.app-shell .source-card__meta,
.consultant-shell .source-card__meta,
.app-shell .empty-state__text,
.consultant-shell .empty-state__text {
    font-size: var(--portal-12) !important;
    line-height: var(--portal-lh-12) !important;
    font-weight: var(--portal-weight-body);
    color: var(--ink-secondary);
}

.app-shell .content-area .table td .text-xs,
.consultant-shell .content-area .table td .text-xs {
    font-size: var(--portal-12) !important;
    color: var(--ink-secondary) !important;
}

.app-shell .content-area input::placeholder,
.app-shell .content-area textarea::placeholder,
.consultant-shell .content-area input::placeholder,
.consultant-shell .content-area textarea::placeholder,
.app-shell .form-control::placeholder,
.app-shell .form-textarea::placeholder {
    color: var(--ink-placeholder) !important;
    opacity: 1;
}

/* ─── Typography lock (loads last — wins over page CSS & consultant skin) ─── */
.app-shell .content-area h1,
.app-shell .content-area h2,
.app-shell .content-area h3,
.app-shell .content-area h4,
.app-shell .content-area h5,
.app-shell .content-area h6,
.consultant-shell .content-area h1,
.consultant-shell .content-area h2,
.consultant-shell .content-area h3,
.consultant-shell .content-area h4,
.consultant-shell .content-area h5,
.consultant-shell .content-area h6,
.cd-page-head h2,
.cd-card-title,
.cd-pack-name {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-semibold) !important;
    color: var(--ink) !important;
}

.consultant-shell .cd-stat-value,
.consultant-shell .cd-pack-price {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-semibold) !important;
    letter-spacing: normal !important;
}

.app-shell .stat-card-value .text-sm,
.consultant-shell .stat-card-value .text-sm,
.cd-stat-value span,
.cd-pack-price span {
    font-size: var(--portal-12) !important;
    line-height: var(--portal-lh-12) !important;
    font-weight: var(--portal-weight-body) !important;
    color: var(--ink-secondary) !important;
}

/* Quick Input form classes */
.form-label-horizontal,
.main-information-panel__title,
.additional-data-section h3,
form[data-source-id] h3,
.scope2-reporting-block > summary {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
    font-weight: var(--portal-weight-medium) !important;
    color: var(--ink) !important;
}

.form-help-text-under-label,
.form-help-text,
.main-information-panel__subtitle,
.additional-data-section p,
.scope2-reporting-block__intro {
    font-size: var(--portal-12) !important;
    line-height: var(--portal-lh-12) !important;
    color: var(--ink-secondary) !important;
}

.form-input,
.form-input-select,
.form-textarea,
input[type="text"].form-input,
input[type="number"].form-input,
input[type="email"].form-input,
input[type="url"].form-input,
textarea.form-input,
select.form-input-select,
.form-error-text {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
}

.app-shell .form-label,
.consultant-shell .form-label,
.app-shell .content-area label,
.consultant-shell .content-area label {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
}

/* Pages with scoped inline styles (reports, etc.) */
.report-kpi .kpi-label,
.report-meta-item .label,
.activity-table th {
    font-size: var(--portal-12) !important;
    line-height: var(--portal-lh-12) !important;
}

.report-kpi .kpi-value,
.report-meta-item .value,
.activity-table td,
.moccae-notice,
.export-readiness-error,
.export-readiness-warning {
    font-size: var(--portal-14) !important;
    line-height: var(--portal-lh-14) !important;
}

.report-kpi .kpi-unit {
    font-size: var(--portal-12) !important;
    line-height: var(--portal-lh-12) !important;
}