/* 
   Every page imports this file FIRST, then its own page-level CSS.

   Rules :
   1. NEVER hard-code colors — always use var(--color-xxx).
   2. NEVER hard-code font-sizes — always use var(--fs-xxx).
   3. NEVER hard-code spacing — always use var(--space-xxx).
   4. NEVER put in this file any page-specific layout styles.
   ============================================================ */

/*1. DESIGN TOKENS  (CSS Custom Properties)*/
:root {
  /* Color Palette */
  
  /* Backgrounds */
  --color-bg-primary:    #0a0e1a;     /* deepest background        */
  --color-bg-secondary:  #111827;     /* cards / sections          */
  --color-bg-tertiary:   #1a2035;     /* elevated cards / inputs   */
  --color-bg-hover:      #1e2a45;     /* hover state on cards      */

  /* Brand / Accent */
  --color-accent:        hwb(247 42% 10%);     /* primary purple            */
  --color-accent-hover:  #6e65af;     /* purple hover              */
  --color-accent-light:  #a78bfa;     /* light purple for tags     */
  --color-accent-glow:   rgba(108, 92, 231, 0.25);

  --color-green:         #10b981;     /* success / active badges   */
  --color-green-soft:    rgba(16, 185, 129, 0.15);
  --color-red:           #ef4444;     /* error / rejected          */
  --color-red-soft:      rgba(239, 68, 68, 0.15);
  --color-yellow:        #f59e0b;     /* warning / pending         */
  --color-yellow-soft:   rgba(245, 158, 11, 0.15);
  --color-cyan:          #22d3ee;     /* info / links              */

  /* Text */
  --color-text-primary:  #f1f5f9;     /* headings & body text      */
  --color-text-secondary:#94a3b8;     /* muted / descriptions      */
  --color-text-tertiary: #64748b;     /* placeholders              */
  --color-text-inverse:  #0a0e1a;     /* text on light backgrounds */

  /* Borders */
  --color-border:        #1e293b;     /* subtle dividers           */
  --color-border-hover:  #334155;     /* border on hover / focus   */

  /* Gradient */
  --gradient-accent:     linear-gradient(135deg, #6c5ce7 0%, #a78bfa 100%);
  --gradient-cta:        linear-gradient(135deg, #6c5ce7 0%, #22d3ee 100%);

  /* Typography */
  --font-family:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                          Roboto, Oxygen, sans-serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   2rem;       /* 32px */
  --fs-3xl:   2.5rem;     /* 40px */
  --fs-4xl:   3rem;       /* 48px */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.75;

  /*  Spacing Scale  */
  --space-xs:   0.25rem;  /*  4px */
  --space-sm:   0.5rem;   /*  8px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4rem;     /* 64px */
  --space-4xl:  6rem;     /* 96px */

  /*  Borders & Radius  */
  --radius-sm:   0.375rem;  /*  6px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-full: 9999px;    /* pill  */

  /*  Shadows  */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--color-accent-glow);

  /*  Transitions  */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /*  Layout  */
  --container-max:     1200px;
  --nav-height:        72px;
}


/*2. CSS RESET  (Minimal, modern)*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;               /* 16px base */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  min-height: 100vh;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

table {
  border-collapse: collapse;
}

fieldset {
  border: none;
}


/* 3. BASE TYPOGRAPHY */
h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold);     line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold);     line-height: var(--lh-tight); }
h3 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h4 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h5 { font-size: var(--fs-base); font-weight: var(--fw-medium);  line-height: var(--lh-normal);}
h6 { font-size: var(--fs-sm);  font-weight: var(--fw-medium);   line-height: var(--lh-normal);}

p {
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

small {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}


/* 4. UTILITY CLASSES  (the most reusable ones) */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-glow);
}

.btn-outline {
  border: 1px solid var(--color-border-hover);
  color: var(--color-text-primary);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-ghost {
  color: var(--color-text-secondary);
  background: transparent;
}
.btn-ghost:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

/* Form inputs */
.input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast);
}
.input::placeholder {
  color: var(--color-text-tertiary);
}
.input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

textarea.input {
  resize: vertical;
  min-height: 120px;
}

/* Badges / Tags */
.badge {
  display: inline-flex;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.badge-green  { background: var(--color-green-soft);  color: var(--color-green);  }
.badge-red    { background: var(--color-red-soft);    color: var(--color-red);    }
.badge-yellow { background: var(--color-yellow-soft); color: var(--color-yellow); }

/* Card */
.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-normal);
}
.card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}

/* Section spacing */
.section {
  padding: var(--space-3xl) 0;
}

/* Text helpers */
.text-accent   { color: var(--color-accent); }
.text-green    { color: var(--color-green);  }
.text-muted    { color: var(--color-text-secondary); }
.text-center   { text-align: center; }
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================
   NAVBAR AUTH STATE — Logged-in user menu
   ============================================================ */

.nav-user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-user-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  cursor: pointer;
  transition: all var(--transition-normal);
}
.nav-user-trigger:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-hover);
}

.nav-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #fff;
  flex-shrink: 0;
}
.nav-user-avatar--seeker {
  background: var(--gradient-accent);
}
.nav-user-avatar--company {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.nav-user-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-role {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-user-role--seeker {
  background: var(--color-accent-glow);
  color: var(--color-accent-light);
}
.nav-user-role--company {
  background: var(--color-yellow-soft);
  color: var(--color-yellow);
}

.nav-user-chevron {
  font-size: 10px;
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast);
}
.nav-user-menu.open .nav-user-chevron {
  transform: rotate(180deg);
}

/* Dropdown */
.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-normal);
  z-index: 1000;
}
.nav-user-menu.open .nav-user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-user-dropdown__header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xs);
}
.nav-user-dropdown__email {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}

.nav-user-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
}
.nav-user-dropdown__item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.nav-user-dropdown__item i,
.nav-user-dropdown__item .dropdown-icon {
  width: 18px;
  text-align: center;
  color: var(--color-text-tertiary);
}
.nav-user-dropdown__item:hover i,
.nav-user-dropdown__item:hover .dropdown-icon {
  color: var(--color-accent);
}

.nav-user-dropdown__divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-xs) 0;
}

.nav-user-dropdown__item--logout {
  color: var(--color-red);
}
.nav-user-dropdown__item--logout:hover {
  background: var(--color-red-soft);
  color: var(--color-red);
}
.nav-user-dropdown__item--logout i {
  color: var(--color-red);
}

@media (max-width: 600px) {
  .nav-user-name { display: none; }
  .nav-user-role { display: none; }
  .nav-user-dropdown { right: -10px; min-width: 200px; }
}