/* ========================================================================== 
   UI-R1 — TenderRadar global redesign shell
   Visual-only foundation for the 2026 redesign. Existing wording, routes,
   permissions, IDs and JavaScript contracts are intentionally untouched.
   The palette reuses the established warm TenderRadar polish tokens.
   ========================================================================== */

:root {
  --ui-r1-page: #f3efe6;
  --ui-r1-surface: #fbfaf6;
  --ui-r1-surface-raised: #fffdf9;
  --ui-r1-surface-muted: #f7f2e9;
  --ui-r1-border: #ded8ca;
  --ui-r1-border-strong: #cabfa8;
  --ui-r1-ink: #1a1712;
  --ui-r1-muted: #6f675a;
  --ui-r1-accent: #d1471f;
  --ui-r1-accent-dark: #a93618;
  --ui-r1-accent-soft: #fbe7de;
  --ui-r1-success: #2f7a52;
  --ui-r1-warning: #9a5b15;
  --ui-r1-danger: #a8321f;
  --ui-r1-radius-sm: 8px;
  --ui-r1-radius: 12px;
  --ui-r1-radius-lg: 16px;
  --ui-r1-shadow-sm: 0 1px 2px rgba(45, 38, 29, 0.05);
  --ui-r1-shadow: 0 10px 28px -22px rgba(45, 38, 29, 0.45);
  --ui-r1-shadow-float: 0 18px 45px -28px rgba(45, 38, 29, 0.5);
}

body,
.auth-page,
.supplier-page,
.search-page-body,
.analytics-body,
.tender-detail-body {
  background: var(--ui-r1-page);
  color: var(--ui-r1-ink);
}

/* Main tender portal: move from a dark control rail to the clean light shell
   approved for the redesign, while retaining every existing navigation item. */
@media (min-width: 961px) {
  :root {
    --sidebar-width: 258px;
  }
}

.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--ui-r1-page);
}

.sidebar {
  padding: 18px 14px 16px;
  background: var(--ui-r1-surface);
  color: var(--ui-r1-ink);
  border-right: 1px solid var(--ui-r1-border);
  box-shadow: 8px 0 28px -30px rgba(45, 38, 29, 0.6);
}

.brand {
  gap: 12px;
  padding: 2px 5px 17px;
  border-bottom: 1px solid var(--ui-r1-border);
}

.brand-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #e4c6b5;
  border-radius: 11px;
  background: var(--ui-r1-accent-soft);
  color: var(--ui-r1-accent);
  box-shadow: none;
}

.brand strong {
  color: var(--ui-r1-ink);
  font-size: 18px;
}

.brand span {
  color: var(--ui-r1-muted);
  font-size: 9px;
}

.market-nav {
  margin: 14px -3px 0;
  padding: 0 3px;
  scrollbar-color: #c8beae transparent;
}

.market-nav::-webkit-scrollbar-thumb {
  background: #c8beae;
}

.market-nav::-webkit-scrollbar-thumb:hover {
  background: #a99d8b;
}

.nav-label,
.portal-auth-action-label {
  color: #8a8174;
}

.country-group.expanded {
  background: var(--ui-r1-surface-muted);
}

.country-button {
  color: #4f493f;
}

.country-button:hover {
  background: #f0ebe2;
  color: var(--ui-r1-ink);
}

.country-button.active {
  background: var(--ui-r1-accent-soft);
  color: #7f2b14;
}

.country-button.active::after {
  background: var(--ui-r1-accent);
}

.source-list {
  border-left-color: #d9d0c2;
}

.source-button {
  color: #6b6358;
}

.source-button::before {
  background: #c8beae;
}

.source-button:hover {
  background: #f0ebe2;
  color: var(--ui-r1-ink);
}

.source-button:hover::before,
.source-button.active::before {
  background: var(--ui-r1-accent);
}

.source-button.active {
  background: #f4eee5;
  color: #6f2816;
}

.service-status {
  margin-top: 12px;
  border: 1px solid var(--ui-r1-border);
  border-bottom: 0;
  background: var(--ui-r1-surface-raised);
}

.service-status strong {
  color: var(--ui-r1-ink);
}

.service-status span {
  color: var(--ui-r1-muted);
}

.portal-auth-user-panel {
  border-color: var(--ui-r1-border);
  background: var(--ui-r1-surface-raised);
}

.portal-auth-user-panel::before {
  background: var(--ui-r1-border);
}

.portal-auth-user-copy::before {
  border-color: #e0d6c8;
  background: #f0e9de;
  color: #6f5b49;
}

.portal-auth-user-copy > span {
  color: #8a8174;
}

.portal-auth-user-copy > strong {
  color: var(--ui-r1-ink);
}

.portal-auth-user-copy > small {
  border-color: #ebc4b2;
  background: var(--ui-r1-accent-soft);
  color: #9c391d;
}

.portal-auth-user-toggle:hover {
  background: #f5f0e8;
}

.portal-auth-user-chevron {
  color: #8b8174;
}

.portal-auth-user-actions a {
  border-color: var(--ui-r1-border);
  background: #fff;
  color: #4f493f;
}

.portal-auth-user-actions a:hover {
  border-color: #d4b49f;
  background: #fff8f3;
  color: #7f2b14;
}

.portal-auth-logout-form button {
  border-color: #ddcfc3;
  background: #fffaf7;
  color: #8b3928;
}

.main-content {
  padding: 0 28px 48px;
  background: var(--ui-r1-page);
}

.hero {
  margin: 18px 0 22px;
  border: 1px solid var(--ui-r1-border);
  border-radius: var(--ui-r1-radius-lg);
  background: var(--ui-r1-surface-raised);
  color: var(--ui-r1-ink);
  box-shadow: var(--ui-r1-shadow);
}

.hero::before,
.hero::after {
  display: none;
}

.hero > div {
  padding-top: 30px;
  padding-bottom: 28px;
}

.hero .eyebrow,
#loading-indicator {
  color: var(--ui-r1-accent);
}

.hero h1 {
  color: var(--ui-r1-ink);
  font-size: clamp(27px, 3vw, 38px);
}

.hero p,
.hero-meta {
  color: var(--ui-r1-muted);
}

.hero-meta strong {
  color: var(--ui-r1-ink);
}

.hero-meta button {
  border-color: var(--ui-r1-border-strong);
  background: var(--ui-r1-surface);
  color: var(--ui-r1-ink);
}

.hero-meta button:hover {
  border-color: #d6ab94;
  background: #fff5ee;
}

/* Fixed notification control becomes part of the clean top-right utility area. */
.portal-notification-center {
  top: 18px;
  right: 24px;
}

.portal-notification-toggle {
  border-color: var(--ui-r1-border) !important;
  background: rgba(255, 253, 249, 0.96) !important;
  color: var(--ui-r1-ink) !important;
  box-shadow: var(--ui-r1-shadow-sm) !important;
}

.portal-notification-toggle:hover {
  border-color: #d6b19d !important;
  background: #fff8f3 !important;
}

.portal-notification-panel {
  border-color: var(--ui-r1-border) !important;
  background: var(--ui-r1-surface-raised) !important;
  box-shadow: var(--ui-r1-shadow-float) !important;
}
/* ========================================================================== 
   UI-R1 — shared component rhythm
   One card language, one control language and one data-table language.
   ========================================================================== */

.stat-card,
.work-summary-card,
.search-panel,
.results-section,
.attention-dashboard,
.auth-card,
.account-card,
.account-panel,
.ops-section,
.ops-metric,
.ops-check-card,
.supplier-header,
.supplier-summary,
.supplier-toolbar,
.analysis-upload-card,
.analysis-result,
.search-hero,
.search-filter-card,
.search-results-card,
.panel,
.tender-workspace-hero,
.workspace-command-bar,
.tender-workspace-summary,
.workspace-panel {
  border-color: var(--ui-r1-border) !important;
  background: var(--ui-r1-surface-raised) !important;
  box-shadow: var(--ui-r1-shadow-sm) !important;
}

.stat-card,
.work-summary-card,
.search-panel,
.results-section,
.attention-dashboard {
  border-radius: var(--ui-r1-radius) !important;
}

.stat-card {
  min-height: 92px;
  padding: 17px 18px;
}

.stat-card:hover,
.work-summary-card:hover {
  transform: translateY(-1px);
  border-color: #d4c8b8 !important;
  box-shadow: var(--ui-r1-shadow) !important;
}

.stat-card:nth-child(3) {
  border-color: #efd2c4 !important;
  background: #fff9f5 !important;
}

.stat-symbol {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f2ece3;
  color: #705d4d;
}

.stat-card:nth-child(3) .stat-symbol {
  background: var(--ui-r1-accent-soft);
  color: var(--ui-r1-accent);
}

.stat-card strong {
  font-size: 27px;
}

.warning {
  border-color: #ead0a9;
  border-left-color: #b97625;
  border-radius: var(--ui-r1-radius);
  background: #fff9ee;
  box-shadow: none;
}

/* Controls across the standalone pages and the tender dashboard share the
   same compact enterprise height and warm focus treatment. */
.portal-global-search input,
.search-field input,
.search-field select,
.search-grid input,
.search-grid select,
.knowledge-search-form input,
.search-filter-card select,
.analytics-filters select,
.supplier-toolbar input,
.supplier-toolbar select,
.auth-page input,
.auth-page select,
.ops-shell input,
.ops-shell select,
.analysis-page input,
.analysis-page select {
  border-color: var(--ui-r1-border-strong) !important;
  border-radius: var(--ui-r1-radius-sm) !important;
  background: #fff !important;
  color: var(--ui-r1-ink) !important;
  box-shadow: none !important;
}

.portal-global-search input:focus,
.search-field input:focus,
.search-grid input:focus,
.knowledge-search-form input:focus,
.auth-page input:focus,
.ops-shell input:focus,
.analysis-page input:focus,
select:focus-visible {
  border-color: var(--ui-r1-accent) !important;
  box-shadow: 0 0 0 3px rgba(209, 71, 31, 0.13) !important;
}

.portal-global-search button,
.knowledge-search-form button,
.analysis-primary,
.supplier-primary-button,
.ops-filter-actions button,
.auth-form button[type="submit"] {
  border-color: var(--ui-r1-ink) !important;
  border-radius: var(--ui-r1-radius-sm) !important;
  background: var(--ui-r1-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.portal-global-search button:hover,
.knowledge-search-form button:hover,
.analysis-primary:hover,
.supplier-primary-button:hover,
.ops-filter-actions button:hover,
.auth-form button[type="submit"]:hover {
  border-color: var(--ui-r1-accent) !important;
  background: var(--ui-r1-accent) !important;
}

.secondary-button,
.supplier-secondary-button,
.supplier-header-actions a,
.account-header-actions a,
.account-header-actions button,
.ops-header-actions a,
.detail-secondary-button,
.detail-soft-button,
.search-top-actions a,
.analytics-topbar a,
.analysis-back {
  border-color: var(--ui-r1-border) !important;
  border-radius: var(--ui-r1-radius-sm) !important;
  background: var(--ui-r1-surface-raised) !important;
  color: var(--ui-r1-ink) !important;
  box-shadow: none !important;
}

.secondary-button:hover,
.supplier-secondary-button:hover,
.supplier-header-actions a:hover,
.account-header-actions a:hover,
.account-header-actions button:hover,
.ops-header-actions a:hover,
.detail-secondary-button:hover,
.detail-soft-button:hover,
.search-top-actions a:hover,
.analytics-topbar a:hover,
.analysis-back:hover {
  border-color: #d5b19c !important;
  background: #fff7f1 !important;
  color: #7d2c15 !important;
}

/* Data surfaces use warm, low-contrast headers rather than dark bands. */
.ops-table thead th,
.audit-table thead th,
.supplier-list table thead th,
.analytics-main table thead th {
  border-bottom-color: var(--ui-r1-border-strong) !important;
  background: var(--ui-r1-surface-muted) !important;
  color: #756c60 !important;
}

.ops-table tbody td,
.audit-table tbody td,
.supplier-list table tbody td,
.analytics-main table tbody td {
  border-bottom-color: #eee8de !important;
}

.ops-table tbody tr:hover,
.audit-table tbody tr:hover,
.supplier-list table tbody tr:hover,
.analytics-main table tbody tr:hover {
  background: #fffaf6 !important;
}

/* Status colours stay the existing TenderRadar semantic colours. */
.status-badge.active,
.ops-status-pill.ok,
.ops-status-pill.info,
.ops-status-pill.active,
.ops-status-pill.loaded {
  background: #e4f1e9 !important;
  color: #24603f !important;
}

.ops-status-pill.warning,
.ops-status-pill.empty,
.ops-status-pill.unknown {
  background: #fff1d9 !important;
  color: #8a5113 !important;
}

.ops-status-pill.error,
.ops-status-pill.missing,
.ops-status-pill.failed,
.ops-status-pill.invalid {
  background: #f8e5e1 !important;
  color: #8b2f26 !important;
}

/* Standalone page headers now look like one product family. */
.tender-detail-topbar,
.search-topbar,
.analytics-topbar {
  min-height: 66px;
  padding-top: 11px;
  padding-bottom: 11px;
  border-bottom-color: var(--ui-r1-border) !important;
  background: rgba(251, 250, 246, 0.96) !important;
  box-shadow: 0 1px 0 rgba(45, 38, 29, 0.02);
}

.tender-detail-brand-icon,
.search-brand-icon {
  border: 1px solid #e4c6b5 !important;
  border-radius: 10px !important;
  background: var(--ui-r1-accent-soft) !important;
  color: var(--ui-r1-accent) !important;
  box-shadow: none !important;
}

.tender-detail-brand,
.search-brand,
.analytics-brand {
  color: var(--ui-r1-ink) !important;
}

.tender-detail-brand small,
.search-brand small,
.analytics-brand span {
  color: var(--ui-r1-muted) !important;
}

.tender-detail-main,
.search-main,
.analytics-main,
.analysis-page,
.supplier-shell,
.account-shell,
.ops-shell {
  color: var(--ui-r1-ink);
}

.tender-detail-main,
.search-main,
.analytics-main {
  padding-top: 24px;
}

.account-header,
.ops-header,
.supplier-header,
.analysis-topbar {
  border-color: var(--ui-r1-border) !important;
}

.account-header h1,
.ops-header h1,
.supplier-header h1,
.analysis-hero h1,
.analytics-heading h1,
.search-hero h1 {
  color: var(--ui-r1-ink) !important;
  letter-spacing: -0.025em;
}

.account-header p,
.ops-header p,
.supplier-subtitle,
.analysis-hero p,
.analytics-heading p,
.search-hero p {
  color: var(--ui-r1-muted) !important;
}

.auth-card-kicker,
.auth-eyebrow,
.supplier-eyebrow,
.search-eyebrow,
.analytics-heading .eyebrow,
.analysis-section-heading,
.eyebrow {
  color: var(--ui-r1-accent) !important;
}
/* ========================================================================== 
   UI-R1 — responsive shell safeguards
   ========================================================================== */

@media (max-width: 1180px) {
  .main-content {
    padding-left: 22px;
    padding-right: 22px;
  }

  .stats-grid {
    gap: 12px;
  }
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    top: auto;
    height: auto;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--ui-r1-border);
    box-shadow: none;
  }

  .brand {
    padding-bottom: 12px;
  }

  .market-nav {
    max-height: 42vh;
  }

  .service-status,
  .portal-auth-user-panel {
    max-width: none;
  }

  .main-content {
    padding: 0 18px 40px;
  }

  .hero {
    margin-top: 14px;
  }

  .portal-notification-center {
    top: 14px;
    right: 16px;
  }
}

@media (max-width: 720px) {
  .main-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero,
  .stat-card,
  .work-summary-card,
  .search-panel,
  .results-section,
  .attention-dashboard,
  .auth-card,
  .ops-section,
  .supplier-header,
  .supplier-toolbar,
  .search-hero,
  .search-filter-card,
  .search-results-card,
  .panel {
    border-radius: 10px !important;
  }

  .hero > div {
    padding: 22px 18px 20px;
  }

  .stat-card {
    min-height: 82px;
    padding: 14px;
  }

  .tender-detail-topbar,
  .search-topbar,
  .analytics-topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .account-header,
  .ops-header,
  .supplier-header {
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .portal-notification-center {
    right: 10px;
  }

  .brand-icon,
  .tender-detail-brand-icon,
  .search-brand-icon {
    width: 38px;
    height: 38px;
  }

  .country-button,
  .source-button {
    min-height: 38px;
  }

  .account-header-actions,
  .ops-header-actions,
  .supplier-header-actions,
  .search-top-actions,
  .tender-detail-top-actions {
    width: 100%;
  }

  .account-header-actions a,
  .account-header-actions button,
  .ops-header-actions a,
  .supplier-header-actions a,
  .supplier-header-actions button,
  .search-top-actions a,
  .tender-detail-top-actions a,
  .tender-detail-top-actions button {
    flex: 1 1 auto;
  }
}