/**
 * typography.css — Type scale, badges, sidebar nav, and embed-mode layout.
 *
 * Owns: global font smoothing, heading/body type scale, status badges, match
 *       score tiers, closing-status colours, tender card typography, sidebar
 *       nav + collapse behaviour, floating toggle button, embed mode overrides,
 *       and global transition defaults.
 *
 * Load order: theme.css → layout.css → tendera-ui.css → typography.css
 *
 * NOTE: .section-label is defined here (single source of truth).
 *       tendera-ui.css must NOT redeclare it.
 */


/* ─── Global base ────────────────────────────────────────────────────────── */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}


/* ─── Type scale ─────────────────────────────────────────────────────────── */

.page-title,
.feed-title,
.section-heading-lg {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.card-title,
.tender-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.sub-heading,
.section-heading-sm {
  font-size: 1rem;
  font-weight: 600;
}

/* Eyebrow label above a section (e.g. "SAVED", "PIPELINE") */
.section-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 0.6rem;
}

/* Page intro / subtitle text */
.sub {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.body-text,
.step-body,
.guide-section-inner p {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
}

.meta-line,
.key-details,
.tender-meta {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-tertiary);
}


/* ─── Badges ─────────────────────────────────────────────────────────────── */

.tender-trade-badge,
.trade-pill,
.region-pill {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 999px;
}

/* Profile pills get a subtle filled background */
.trade-pill,
.region-pill {
  background: rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.25);
  font-size: 0.78rem;
}

.source-badge,
.tender-state {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 999px;
}


/* ─── Match score tiers ──────────────────────────────────────────────────── */
/*
 * Colour tiers are ordered gold > purple > teal > green > grey.
 * Percentage thresholds: ≥80% gold, ≥60% purple, ≥40% teal, ≥21% green, else grey.
 * See scoreTender() in dashboard-new.html for the scoring algorithm.
 */

.match-badge {
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.match-badge.tier-gold {
  background: rgba(212,160,23,0.15);
  color: #a07800;
  border: 1px solid rgba(212,160,23,0.35);
}
.match-badge.tier-purple {
  background: rgba(124,58,237,0.1);
  color: #7c3aed;
  border: 1px solid rgba(124,58,237,0.3);
}
.match-badge.tier-teal {
  background: rgba(0,0,0,0.1);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.match-badge.tier-green {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.3);
}
.match-badge.tier-grey {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}
[data-theme="light"] .match-badge.tier-grey { color: var(--text-tertiary); }


/* ─── Closing-date status ────────────────────────────────────────────────── */

.status-close,
.status {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  margin-top: 0.3rem;
}
.status-close.urgent, .status.urgent { color: #dc2626; }
.status-close.soon,   .status.soon   { color: #d97706; }
.status-close.ok,     .status.ok     { color: var(--text-tertiary); }
.status-close.closed, .status.closed { color: var(--text-tertiary); font-weight: 400; }


/* ─── Tender card typography ─────────────────────────────────────────────── */

.tender .tender-title    { font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.tender .tender-trade-row { margin-top: 0.35rem; }
.tender .key-details     { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 0.3rem; }
.tender .tender-value    { margin-bottom: 0.2rem; }
.tender .source-badge    { display: inline; margin-left: 0.25rem; }
.tender .desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  /* Clamp description to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.5rem;
}
.tender .card-row      { margin-top: 0.6rem; justify-content: flex-end; }
.tender .card-row-btns { font-size: 0.8rem; font-weight: 500; }


/* ─── Sidebar nav ────────────────────────────────────────────────────────── */

.sidebar-logo             { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.sidebar-logo-icon        { background: #000; color: #fff; }
.sidebar-nav-link         { color: var(--text-secondary); }
.sidebar-nav-link:hover   { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.sidebar-nav-link.active  { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
/* Consistent icon stroke — active state does not change icon weight */
#sidebar .sidebar-nav-link svg { stroke-width: 1.8; }
.sidebar-user-avatar      { background: rgba(0,0,0,0.15); color: var(--text-primary); }
[data-theme="dark"] .sidebar-user-avatar { background: rgba(255,255,255,0.15); }
.sidebar-plan-badge.bg-aqua { background: #000; color: #fff; }
.sidebar-nav-item         { font-size: 0.875rem; font-weight: 400; }
.sidebar-nav-item.active  { font-weight: 500; }
.sidebar-user-name        { font-size: 0.875rem; font-weight: 500; }
.sidebar-plan-badge       { font-size: 0.65rem; font-weight: 600; }


/* ─── Sidebar collapse ───────────────────────────────────────────────────── */
/*
 * The sidebar is position:fixed so it doesn't occupy space in the flex layout.
 * The sibling div uses margin-left: 11.75rem to compensate.
 * When collapsed, width becomes 0 and the sibling fills the full viewport.
 * The floating toggle button (.sidebar-menu-toggle-btn) is created by
 * js/sidebar-collapse.js and is always visible to allow reopening.
 */

#sidebar .sidebar-logo-icon { width: 17px; height: 17px; min-width: 17px; }

#sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
  width: 11.75rem !important;
  min-width: 11.75rem !important;
  transition: width 0.2s ease;
  overflow: hidden;
  /* Use CSS vars so dark mode applies via data-theme attribute, not media query */
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
#sidebar .sidebar-logo,
#sidebar .p-4.pb-3 .sidebar-collapse-hide { color: var(--text-primary) !important; }
#sidebar .p-3 { border-color: var(--border) !important; }

/* Push content right when sidebar is open */
#sidebar + div { margin-left: 11.75rem; transition: margin-left 0.2s ease; }

/* Collapsed — content fills full width; header gets left padding for the toggle button */
#sidebar.collapsed + div {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  transition: margin-left 0.2s ease, padding-left 0.2s ease;
}
#sidebar.collapsed + div header { padding-left: 5rem !important; }
#sidebar.collapsed + div .main-content,
#sidebar.collapsed + div .guide-content,
#sidebar.collapsed + div .howto-content,
#sidebar.collapsed + div .pipeline-board,
#sidebar.collapsed + div .tenders { max-width: none !important; width: 100% !important; }

#sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Internal padding/spacing */
#sidebar .p-4.pb-3 { padding: 0.75rem 1rem !important; }
#sidebar nav { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 2.5rem !important; }
#sidebar nav .sidebar-nav-link { margin-top: 0 !important; }
#sidebar nav .sidebar-nav-link + .sidebar-nav-link { margin-top: 1.15rem !important; }
#sidebar .sidebar-nav-link {
  padding: 0.5rem !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
#sidebar .sidebar-nav-link .sidebar-collapse-hide {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
#sidebar .p-3 { padding-left: 1rem !important; padding-right: 1rem !important; }

/* Hide text labels when collapsed; show icons only */
#sidebar.collapsed .sidebar-collapse-hide { display: none !important; }
#sidebar.collapsed .sidebar-logo-icon { display: none !important; }

/* Hide logo/wordmark when expanded (replaced by floating button) */
#sidebar:not(.collapsed) .sidebar-logo-icon { display: none !important; }
#sidebar:not(.collapsed) .sidebar-logo     { display: none !important; }
#sidebar:not(.collapsed) .p-4.pb-3 > a    { display: none !important; }

/* Icon-only layout when collapsed */
#sidebar.collapsed .sidebar-nav-link  { justify-content: center; padding: 0.5rem; }
#sidebar.collapsed .sidebar-nav-link svg { flex-shrink: 0; display: block; visibility: visible; }
#sidebar.collapsed .p-4.pb-3         { flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem; }
#sidebar.collapsed .sidebar-toggle   { width: 24px; height: 24px; }
#sidebar.collapsed .sidebar-toggle svg { width: 16px; height: 16px; }
#sidebar.collapsed .p-4.pb-3 > a    { flex: none; justify-content: center; }
#sidebar.collapsed .sidebar-user-section { display: none !important; }
#sidebar.collapsed .sidebar-collapse-show { display: flex !important; }

/* Inline toggle buttons are hidden — the floating .sidebar-menu-toggle-btn is used instead */
#sidebarCollapseBtn,
#sidebarExpandBtn,
#sidebarExpandBtnTop { display: none !important; }

.sidebar-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0; border: none; border-radius: 6px;
  background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s ease;
}
.sidebar-toggle:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); }

/* Floating collapse/expand button — created by js/sidebar-collapse.js */
.sidebar-menu-toggle-btn {
  position: fixed; left: 0.75rem; top: 1rem; z-index: 102;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.15s, color 0.15s;
}
.sidebar-menu-toggle-btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); }


/* ─── Header ─────────────────────────────────────────────────────────────── */

.header-page-title { font-size: 1rem; font-weight: 600; }
.header-link       { font-size: 0.875rem; font-weight: 400; color: var(--text-secondary); }
.header-pro-badge  { font-size: 0.65rem; font-weight: 700; }


/* ─── Button font-size overrides ─────────────────────────────────────────── */
/* Keep button sizes in sync with the type scale defined in this file */
.btn-primary, .btn-ghost, .btn-portal { font-size: 0.875rem; font-weight: 500; }
.save-btn, .btn-pipeline, .remove-btn { font-size: 0.8rem; font-weight: 500; }


/* ─── Profile page ───────────────────────────────────────────────────────── */

.profile-card-heading { font-size: 0.875rem; font-weight: 600; }
.profile input, .profile textarea, .profile select { font-size: 0.875rem; font-weight: 400; }


/* ─── How-to / Tendering guide ───────────────────────────────────────────── */

.step-label { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }
.step-title { font-size: 1rem; font-weight: 600; }
.step-body  { font-size: 0.875rem; font-weight: 400; line-height: 1.65; }
.step-body strong { font-weight: 600; }


/* ─── Embed mode ─────────────────────────────────────────────────────────── */
/*
 * When a page is loaded inside app.html's iframe (?embed=1), embed-check.js
 * adds the embed-body class to <html> and <body>. The sidebar in the iframe
 * is hidden; layout adjusts to fill the iframe's viewport.
 */

html.embed-body #sidebar,
body.embed-body #sidebar { display: none !important; }

html.embed-body #sidebar + div,
body.embed-body #sidebar + div { margin-left: 0 !important; }

/* When the PARENT sidebar is collapsed (signalled via postMessage),
   pad the header left so content clears the floating toggle button */
body.embed-body.sidebar-collapsed header { padding-left: 5rem !important; }
body.embed-body.sidebar-collapsed .main-content,
body.embed-body.sidebar-collapsed .guide-content,
body.embed-body.sidebar-collapsed .howto-content,
body.embed-body.sidebar-collapsed .pipeline-board,
body.embed-body.sidebar-collapsed .tenders { max-width: none !important; width: 100% !important; }

/* Never show the floating button inside an embedded page */
.embed-body .sidebar-menu-toggle-btn { display: none !important; }


/* ─── Global transitions ─────────────────────────────────────────────────── */
/*
 * Applied broadly so interactive elements feel consistent.
 * More specific transitions on individual components take precedence.
 */
a, button, .tender, .card, .section-card, .guide-section,
.save-btn, .btn-pipeline, .remove-btn, .state-filter-btn {
  transition: all 0.15s ease;
}