/* ============================================================
   AlignMatch Platform Theme Override
   platform-theme.css

   HOW TO USE:
   Add ONE line to base.html, after all other CSS links:
   <link rel="stylesheet" href="{{ url_for('static', filename='css/platform-theme.css') }}">

   This file overrides main.css and component styles.
   Zero HTML changes required.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   1. CSS VARIABLE OVERRIDES
   Replaces blue primary palette with AlignMatch green
   ============================================================ */
:root {
    /* Replace blue primary with AlignMatch green */
    --primary-50:  #f0fdf4;
    --primary-100: #dcfce7;
    --primary-200: #bbf7d0;
    --primary-500: #16a34a;
    --primary-600: #166534;
    --primary-700: #14532d;

    /* AlignMatch brand colours */
    --am-forest:       #0b2d1a;
    --am-green:        #166534;
    --am-green-bright: #16a34a;
    --am-green-vivid:  #22c55e;
    --am-green-pale:   #dcfce7;
    --am-green-pale2:  #bbf7d0;
    --am-green-accent: #4ade80;

    /* App background — very subtle green tint */
    --app-bg: #f8faf9;

    /* Platform font */
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   2. SIDEBAR — Dark forest green, readable text
   ============================================================ */
.sidebar {
    background: #1a4d2e !important;   /* lighter than #0b2d1a — readable */
    border-right: none !important;
}

/* Sidebar brand / logo area */
.sidebar__brand-link {
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    padding: var(--space-4) !important;
    margin-bottom: 6px !important;
    border-radius: 0 !important;
}

.sidebar__brand-link:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #ffffff !important;
}

/* ── Sidebar brand / logo — AlignMatch wordmark ── */

/* Hide EVERYTHING original — img tag and subtitle text node */
.sidebar__brand-link img,
.sidebar__logo {
    display: none !important;
}

/* Brand link wrapper */
.sidebar__brand-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    padding: 16px 16px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    margin-bottom: 6px !important;
    gap: 0 !important;
}

.sidebar__brand-link:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #ffffff !important;
}

/* Icon square — forest green with chevron A */
.sidebar__brand-link::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #166534 !important;
    border-radius: 8px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 19L12 7l7 12'/%3E%3Cpath d='M8 14h8'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
}

/* "AlignMatch" wordmark text */
.sidebar__brand-link::after {
    content: 'AlignMatch' !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    display: block !important;
    line-height: 1.1 !important;
}

/* "Talent Intelligence" subtitle */
.sidebar__subtitle {
    color: rgba(167, 243, 208, 0.8) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-top: 3px !important;
    display: block !important;
}

/* Nav section labels */
.sidebar__section-label,
.sidebar__nav-section {
    color: rgba(255,255,255,0.35) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 12px 16px 4px !important;
}

/* ALL nav items — fully visible white text */
.sidebar__item,
.sidebar__link,
.sidebar__link span,
.sidebar__text {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.sidebar__link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    border-left: 3px solid transparent !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    border-radius: 0 !important;
}

.sidebar__link:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    border-left-color: rgba(74,222,128,0.5) !important;
}

.sidebar__link:hover .sidebar__text,
.sidebar__link:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Active nav item — bright and clear */
.sidebar__link--active,
.sidebar__link.sidebar__link--active {
    background: rgba(0,0,0,0.2) !important;
    color: #ffffff !important;
    border-left-color: #4ade80 !important;
    font-weight: 600 !important;
}

.sidebar__link--active .sidebar__text {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.sidebar__link--active svg,
.sidebar__link--active .sidebar__icon {
    color: #4ade80 !important;
    stroke: #4ade80 !important;
}

/* Nav icons — always visible */
.sidebar__icon {
    opacity: 1 !important;
    stroke: rgba(255,255,255,0.85) !important;
    flex-shrink: 0 !important;
}

/* Sidebar user footer */
.sidebar__user-name {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

.sidebar__user-role {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.7rem !important;
}

.sidebar__user-role a {
    color: rgba(167,243,208,0.8) !important;
}

.sidebar__user-avatar {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar__user-avatar svg {
    stroke: rgba(255,255,255,0.7) !important;
}

/* ============================================================
   3. TOP HEADER — Purposeful redesign
   Hide "About" landing nav · Keep: toggle | right: actions + user
   ============================================================ */
.top-header {
    background: #ffffff !important;
    border-bottom: 2px solid #e5e7eb !important;
    height: 64px !important;
    padding: 0 24px !important;
    box-shadow: 0 1px 4px rgba(11,45,26,0.06) !important;
}

/* ── Hide "About" dropdown — belongs on landing page, not the app ── */
.header__nav,
.header__dropdown {
    display: none !important;
}

/* Hide hamburger — no collapsible sidebar in current layout */
.header__menu-toggle {
    display: none !important;
}

/* ── Right side action icons ── */
.header__actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.header__action {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #6b7280 !important;
    padding: 8px !important;
    border-radius: 7px !important;
    transition: all 0.18s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header__action:hover {
    background: #f0fdf4 !important;
    color: #166534 !important;
}

/* Notification badge */
.header__badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 16px !important;
    height: 16px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ── User section ── */
.header__user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 12px !important;
    border-left: 1px solid #e5e7eb !important;
    margin-left: 8px !important;
}

.header__user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #bbf7d0 !important;
    flex-shrink: 0 !important;
}

.header__user-avatar svg {
    stroke: #166534 !important;
}

.header__user-name {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

/* Logout — subtle, turns red on hover */
.header__logout {
    font-size: 0.78rem !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.18s !important;
}

.header__logout:hover {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    background: #fff5f5 !important;
}



/* ============================================================
   4. GLOBAL BUTTONS
   ============================================================ */
.btn--primary,
.btn-primary,
button.btn--primary {
    background: var(--am-green) !important;
    border-color: var(--am-green) !important;
    color: #ffffff !important;
}

.btn--primary:hover,
.btn-primary:hover {
    background: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
}

/* Outline / secondary buttons */
.btn--secondary,
.btn-secondary,
.btn--outline {
    border-color: var(--am-green) !important;
    color: var(--am-green) !important;
}

.btn--secondary:hover,
.btn-secondary:hover,
.btn--outline:hover {
    background: var(--am-green-pale) !important;
}

/* ============================================================
   5. APP BACKGROUND
   ============================================================ */
body {
    background-color: var(--app-bg) !important;
    font-family: var(--font-family) !important;
}

.content-area {
    background: var(--app-bg) !important;
}

/* ============================================================
   6. DASHBOARD — Metric cards
   ============================================================ */
.metric-card {
    border-top: 2px solid var(--am-green-bright) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}

.metric-card:hover {
    box-shadow: 0 4px 16px rgba(22,101,52,0.1) !important;
    transform: translateY(-1px) !important;
}

/* Metric icons — green background */
.metric-card__icon {
    background: var(--am-green-pale) !important;
    color: var(--am-green-bright) !important;
}

.metric-card__icon svg,
.metric-card__icon .icon {
    color: var(--am-green-bright) !important;
    stroke: var(--am-green-bright) !important;
}

/* Metric value */
.metric-card__value {
    color: var(--gray-900) !important;
}

/* ============================================================
   7. MATCH RESULTS — Score pills & progress bars
   ============================================================ */

/* Score badges — high scores green, mid amber */
.match-score,
.score-badge,
[class*="score-pill"],
[class*="match-score"] {
    font-weight: 700 !important;
    border-radius: 12px !important;
}

/* Inject mini progress bar under candidate name in match rows */
.match-row__name,
.candidate-name-cell {
    position: relative !important;
}

/* Score colour overrides */
.score-high, .score--high, [class*="score-high"] {
    background: var(--am-green-pale) !important;
    color: var(--am-green) !important;
}

.score-medium, .score--medium, [class*="score-medium"] {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.score-low, .score--low, [class*="score-low"] {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* Rank badges / number circles */
.rank-badge,
.rank-number,
[class*="rank-badge"] {
    background: var(--am-green) !important;
    color: #ffffff !important;
}

/* Progress bars throughout app */
.progress-bar,
.progress__fill,
[class*="progress-fill"],
[class*="progress-bar"] {
    background: var(--am-green-bright) !important;
}

.progress-track,
.progress__track,
[class*="progress-track"] {
    background: var(--gray-100) !important;
}

/* ============================================================
   8. CANDIDATE & JOB PROFILE CARDS
   ============================================================ */

/* Section headers inside profile cards */
.profile-section__header,
.card-section-title,
.section-header--profile,
[class*="profile-section"] > h3,
[class*="profile-section"] > h4 {
    color: var(--am-green) !important;
    border-left: 3px solid var(--am-green-bright) !important;
    padding-left: 8px !important;
    background: var(--am-green-pale) !important;
}

/* Highlighted values (career stage, scores) */
.value--primary,
.profile-value--highlight,
[class*="value-highlight"],
.career-stage-value,
.growth-value {
    color: var(--am-green-bright) !important;
}

/* Cultural fit dimension cards */
.cultural-fit-card,
.dimension-card,
[class*="culture-card"],
[class*="cultural-card"] {
    border: 1px solid var(--gray-200) !important;
    border-radius: 8px !important;
}

/* Cultural fit score colours */
.dimension-score--high,
[class*="score-high"] {
    color: var(--am-green-bright) !important;
}

.dimension-score--medium,
[class*="score-medium"] {
    color: #d97706 !important;
}

/* Skill tags */
.skill-tag,
.tag,
[class*="skill-tag"],
[class*="tech-tag"],
.badge--skill {
    background: var(--am-green-pale) !important;
    color: var(--am-green) !important;
    border: 1px solid var(--am-green-pale2) !important;
}

/* Quality assessment badge — HIGH */
.quality-badge--high,
.assessment-high,
[class*="quality-high"] {
    background: var(--am-green-pale) !important;
    color: var(--am-green) !important;
    border-color: var(--am-green-pale2) !important;
}

/* Psychometric verdict pills */
.verdict-positive,
.verdict--positive,
[class*="verdict-pos"] {
    background: var(--am-green-pale) !important;
    color: var(--am-green) !important;
}

/* ============================================================
   9. TABLES
   ============================================================ */
.table-header,
thead tr,
.table__header-row {
    background: var(--app-bg) !important;
    border-bottom: 2px solid var(--am-green-pale2) !important;
}

.table__row:hover,
tr:hover td {
    background: var(--am-green-pale) !important;
    transition: background 0.15s !important;
}

/* Table action links */
.table__action,
.table-action-link {
    color: var(--am-green) !important;
}

.table__action:hover,
.table-action-link:hover {
    color: var(--primary-700) !important;
}

/* ============================================================
   10. FORMS & INPUTS
   ============================================================ */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--am-green-bright) !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.12) !important;
    outline: none !important;
}

/* Focus ring for checkboxes / radios */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(22,163,74,0.2) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--am-green-bright) !important;
}

/* ============================================================
   11. LOGIN / AUTH PAGES
   ============================================================ */
.auth-container {
    background: var(--am-forest) !important;
    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    min-height: 100vh !important;
}

.auth-card {
    box-shadow: 0 24px 60px rgba(0,0,0,0.4) !important;
    border: none !important;
    border-radius: 12px !important;
}

/* Auth header — add AlignMatch wordmark styling */
.auth-header h2 {
    font-family: 'DM Serif Display', serif !important;
    color: var(--am-forest) !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
}

.auth-header p {
    color: var(--gray-500) !important;
}

/* Auth form inputs focus */
.auth-form .form-control:focus {
    border-color: var(--am-green-bright) !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.12) !important;
}

/* Auth submit button */
.auth-form .btn-block,
.auth-form button[type="submit"],
.auth-form input[type="submit"] {
    background: var(--am-green) !important;
    border-color: var(--am-green) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: background 0.2s !important;
}

.auth-form .btn-block:hover,
.auth-form button[type="submit"]:hover {
    background: var(--primary-700) !important;
}

/* Auth footer links */
.auth-footer a {
    color: var(--am-green-bright) !important;
    font-weight: 600 !important;
}

.auth-footer a:hover {
    color: var(--am-green) !important;
}

/* ============================================================
   12. MODALS
   ============================================================ */
.modal__header,
.modal-header {
    border-bottom: 2px solid var(--am-green-pale) !important;
}

.modal__title,
.modal-title {
    color: var(--am-forest) !important;
}

.modal__close:hover,
.modal-close:hover {
    color: var(--am-green) !important;
}

/* ============================================================
   13. ALERTS & STATUS
   ============================================================ */
.alert-success {
    background: var(--am-green-pale) !important;
    border-color: var(--am-green-pale2) !important;
    color: var(--am-green) !important;
}

.alert-info {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: var(--am-green) !important;
}

/* ============================================================
   14. LINKS
   ============================================================ */
a {
    color: var(--am-green-bright) !important;
}

a:hover {
    color: var(--am-green) !important;
}

/* Exception — white links on dark backgrounds */
.sidebar a,
.auth-container a.btn,
.btn--primary a {
    color: inherit !important;
}

/* ============================================================
   15. PAGE TITLE
   ============================================================ */
.page-title {
    color: var(--am-forest) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
}

/* ============================================================
   16. SECTION TITLES & CARDS
   ============================================================ */
.section-title {
    color: var(--gray-900) !important;
    font-weight: 700 !important;
}

.card {
    border-radius: 10px !important;
    transition: box-shadow 0.2s !important;
}

.card:hover {
    box-shadow: 0 4px 16px rgba(11,45,26,0.08) !important;
}

/* Card header accent */
.card__header,
.card-header {
    border-bottom: 1px solid var(--gray-100) !important;
}

/* ============================================================
   17. LOADING / SPINNER
   ============================================================ */
.spinner,
.loading-spinner,
[class*="spinner"] {
    border-top-color: var(--am-green-bright) !important;
    border-color: var(--am-green-pale) !important;
    border-top-color: var(--am-green-bright) !important;
}

/* ============================================================
   18. SCROLLBAR (webkit)
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--am-green-pale2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--am-green-bright);
}

/* ============================================================
   19. UTILITY CLASS OVERRIDES
   ============================================================ */
.text-primary { color: var(--am-green-bright) !important; }
.bg-primary    { background: var(--am-green) !important; }
.border-primary { border-color: var(--am-green-bright) !important; }

/* ============================================================
   20. ADMIN PROMPT MANAGEMENT
   ============================================================ */
.prompt-card,
.prompt-version-card {
    border-left: 3px solid var(--am-green-bright) !important;
}

.prompt-active-badge,
.version-badge--active {
    background: var(--am-green-pale) !important;
    color: var(--am-green) !important;
    border: 1px solid var(--am-green-pale2) !important;
}

/* ============================================================
   END OF PLATFORM THEME
   platform-theme.css — AlignMatch v1.0
   ============================================================ */

/* ============================================================
   SIDEBAR WORDMARK — reuse landing page am-wordmark classes
   Override colours for dark sidebar background
   ============================================================ */

/* Remove ::before and ::after injected content — no longer needed */
.sidebar__brand-link::before,
.sidebar__brand-link::after {
    display: none !important;
    content: none !important;
}

/* Brand link wrapper */
.sidebar__brand-link {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    margin-bottom: 6px !important;
    text-decoration: none !important;
}

/* Wordmark layout */
.am-wordmark--sidebar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    animation: none !important;  /* skip animation on sidebar — already loaded */
}

/* Icon background — slightly lighter green on dark sidebar */
.am-wordmark--sidebar .am-wm-bg {
    fill: #166534 !important;
}

/* SVG stroke paths — emerald green */
.am-wordmark--sidebar .am-wm-path,
.am-wordmark--sidebar .am-wm-path-1,
.am-wordmark--sidebar .am-wm-path-2 {
    stroke: #4ade80 !important;
}

.am-wordmark--sidebar .am-wm-dot {
    fill: #4ade80 !important;
}

/* "Align" — white on dark bg */
.am-wordmark--sidebar .am-wm-align {
    color: #ffffff !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.05rem !important;
}

/* "Match" — emerald green */
.am-wordmark--sidebar .am-wm-match {
    color: #4ade80 !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.05rem !important;
}

/* "Talent Intelligence" subtitle */
.am-wordmark--sidebar .am-wm-sub {
    color: rgba(167, 243, 208, 0.75) !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    display: block !important;
}

/* Wordmark text stack */
.am-wordmark--sidebar .am-wordmark-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.am-wordmark--sidebar .am-wm-name {
    line-height: 1 !important;
    display: block !important;
}