/* ================================================================
   SA Recruiters — iOS blue visual layer
   Shared surface language for directory, vacancy, search and saved views.
   ================================================================ */
:root{
  --ios-blue:var(--m-ink);
  --ios-blue-deep:var(--m-ink);
  --ios-blue-soft:var(--m-wash);
  --ios-blue-line:var(--border);
  --ios-surface:color-mix(in srgb,var(--card) 94%,#fff 6%)}

/* Welcome/auth screen: warm golden-hour brand screen. The base look is
   defined inline in index.html so it paints before any stylesheet arrives;
   these rules only keep the pill button consistent once CSS has loaded. */
#google-sign-in{height:56px;border:none;border-radius:999px;background:#dbdbdb;color:#1c1c1c;font-weight:600;box-shadow:0 18px 44px -14px rgba(0,0,0,.6)}
#google-sign-in:hover{background:#e5e5e5;transform:none;box-shadow:0 18px 44px -12px rgba(0,0,0,.66)}

/* Every secondary screen gets the same calm, blue-backed canvas. */
.screen:not(#screen-home) .screen-scroll{background:linear-gradient(180deg,color-mix(in srgb,var(--ios-blue-soft) 48%,var(--bg)) 0%,var(--bg) 180px)}
.screen:not(#screen-home) .screen-fixed{background:color-mix(in srgb,var(--card) 91%,transparent);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--ios-blue-line)}
.screen:not(#screen-home) .screen-title-group .logo-text{color:var(--ios-blue-deep);font-weight:850;letter-spacing:-.035em}
.screen:not(#screen-home) .screen-context{color:var(--ios-blue);font-weight:750}
.screen:not(#screen-home) .screen-close-btn{border-color:var(--ios-blue-line);background:var(--ios-blue-soft);color:var(--ios-blue)}
.screen:not(#screen-home) .theme-toggle{border-color:var(--ios-blue-line);background:var(--ios-blue-soft);color:var(--ios-blue)}
/* Site menu trigger (present in every screen's header) joins the iOS blue system too. */
.screen:not(#screen-home) .site-menu-trigger{width:50px;height:50px;border:2px solid color-mix(in srgb,var(--ios-blue) 72%,#fff);background:var(--ios-blue);color: var(--m-on-ink);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--ios-blue) 75%,transparent)}

/* Search fields are grouped, soft and unmistakably part of the blue system. */
.screen:not(#screen-home) .search-inner{height:48px;border:1px solid var(--ios-blue-line);border-radius:16px;background:var(--ios-surface);box-shadow:0 5px 16px rgba(0,0,0,0.06)}
.screen:not(#screen-home) .search-inner:focus-within{border-color:var(--ios-blue);box-shadow:0 0 0 4px var(--ios-blue-soft),0 5px 16px rgba(0,0,0,0.06)}

/* Agency/employer directories: iOS grouped-list card with blue identity accents. */
#screen-allagencies .hub-list,#screen-allemployers .hub-list{overflow:hidden;border:1px solid var(--ios-blue-line);border-radius:22px;background:var(--ios-surface);box-shadow:0 10px 26px rgba(0,0,0,0.07)}
#screen-allagencies .hub-row,#screen-allemployers .hub-row{min-height:78px;padding:14px 15px;background:transparent;border-top-color:var(--border)}
#screen-allagencies .hub-row:first-child,#screen-allemployers .hub-row:first-child{border-top:0}
#screen-allagencies .hub-row:active,#screen-allemployers .hub-row:active{background:var(--ios-blue-soft);transform:none}
#screen-allagencies .hub-row-avatar,#screen-allemployers .hub-row-avatar{border:2px solid var(--border);box-shadow:0 6px 16px rgba(0,0,0,0.14)}
#screen-allagencies .hub-row-title,#screen-allemployers .hub-row-title{color:var(--text);font-size:14px}
#screen-allagencies .hub-row-sub,#screen-allemployers .hub-row-sub{font-size:11px}

/* Vacancy folders and results become breathing, tappable iOS cards. */
.vac-folder-grid{gap:11px}
.vac-folder-card{border:1px solid var(--ios-blue-line);background:var(--ios-surface);box-shadow:0 7px 19px rgba(0,0,0,0.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.vac-folder-card:active{transform:scale(.985);border-color:var(--ios-blue);box-shadow:0 3px 10px rgba(0,0,0,0.12)}
.vac-folder-icon{background:linear-gradient(145deg,var(--m-wash),var(--m-wash));color:var(--ios-blue)}
.vacancy-directory-group,.vacancy-overview-section{margin:12px 0 16px;border:1px solid var(--ios-blue-line);border-radius:22px;background:var(--ios-surface);box-shadow:0 10px 26px rgba(0,0,0,0.065);overflow:hidden}
.vacancy-directory-group .directory-group-head,.vacancy-overview-section .directory-group-head{background:linear-gradient(135deg,var(--m-wash),var(--m-wash));border-bottom:1px solid var(--ios-blue-line)}
.vacancy-directory-group .vac-card,.vacancy-overview-section .vac-card{margin:0 10px;border-bottom:1px solid var(--border);border-radius:15px;background:transparent!important}
.vacancy-directory-group .vac-card:last-child,.vacancy-overview-section .vac-card:last-child{border-bottom:0}
.vacancy-directory-group .vac-card:active,.vacancy-overview-section .vac-card:active{background:var(--ios-blue-soft)!important}
.vac-card-main{padding:15px 12px}
.vac-logo{border:2px solid var(--border);box-shadow:0 5px 13px rgba(0,0,0,0.1)}
.vac-title{font-size:14px;font-weight:800;letter-spacing:-.02em}
.vac-company{font-size:12px}
.vac-save,.vac-share{background:var(--ios-blue-soft)}
.vac-save.saved{background:var(--m-wash)}
.vac-detail-inner{padding:0 12px 14px;border-top:1px solid var(--border)}
.vac-detail-icon{background:var(--ios-blue-soft);color:var(--ios-blue)}
.vac-apply{background:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 76%,#000) 100%);border-radius:14px;box-shadow:0 10px 22px -10px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .18s var(--ease),filter .18s}
.vac-apply-secondary{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);box-shadow:none}
.vac-close-btn{border-radius:14px}
.vac-result-meta{color:var(--ios-blue-deep)}
.vac-load-more{border-color:var(--ios-blue-line);background:var(--ios-blue-soft);color:var(--ios-blue);border-radius:15px}

/* Saved and search result lists use the same blue card rhythm. */
#saved-list .vac-card,#search-results .vac-card{margin:8px 0;border:1px solid var(--ios-blue-line);border-radius:19px;background:var(--ios-surface)!important;box-shadow:0 7px 18px rgba(0,0,0,0.055)}
#saved-list .vac-card-main,#search-results .vac-card-main{padding:15px 14px}
#saved-list .vac-card:active,#search-results .vac-card:active{background:var(--ios-blue-soft)!important}

/* Section labels and empty/loading states feel like native grouped screens. */
.screen:not(#screen-home) .section-head{color:var(--ios-blue-deep)}
.screen:not(#screen-home) .screen-intro{border-color:var(--ios-blue-line);background:linear-gradient(135deg,var(--m-wash),var(--m-wash))}
.screen:not(#screen-home) .empty-state,.screen:not(#screen-home) .screen-state{border-color:var(--ios-blue-line);background:var(--ios-surface);box-shadow:0 7px 18px rgba(0,0,0,0.05)}

[data-theme="dark"] .screen:not(#screen-home) .screen-scroll{background:linear-gradient(180deg,var(--m-wash),var(--bg) 230px)}
[data-theme="dark"] .screen:not(#screen-home) .screen-title-group .logo-text{color:var(--text)}
[data-theme="dark"] #screen-allagencies .hub-list,[data-theme="dark"] #screen-allemployers .hub-list,[data-theme="dark"] .vacancy-directory-group,[data-theme="dark"] .vacancy-overview-section{background:color-mix(in srgb,var(--card) 94%,var(--m-ink) 6%)}

@media(max-width:520px){
  .vacancy-directory-group,.vacancy-overview-section{border-radius:19px;margin-left:0;margin-right:0}
  #screen-allagencies .hub-list,#screen-allemployers .hub-list{border-radius:19px}
}


/* ================================================================
   UNIFIED SECTION HEADERS — every pushed screen (directory lists,
   admin tools, manager modes) shares the same header layout: one
   back control on the left, section title beside it, actions right.
   ================================================================ */
.vac-simple-header{display:flex;align-items:center;gap:10px}
.vac-simple-header .logo-text{flex:1 1 auto}
.screen:not(#screen-home) header .screen-close-btn{order:99}

/* Keep every vacancy category on the same card surface as General Vacancies.
   Category sections are grouping markup only; they must not change card width,
   background, spacing, or action controls. */
.vacancy-directory-group{
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  overflow: visible}
.vacancy-directory-group .vac-card{
  margin: 10px 0;
  border: 1px solid var(--ios-blue-line);
  border-radius: 18px;
  background: var(--ios-surface) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,0.055)}
.vacancy-directory-group .vac-card:last-child{
  border-bottom: 1px solid var(--ios-blue-line)}
.vacancy-directory-group .vac-card:active{
  background: var(--ios-blue-soft) !important}

/* The All Vacancies screen uses one card contract for every source.
   This deliberately scopes the shared surface to the vacancy section so
   General, Agency, Retail, Government, learnership, and imported listings
   cannot diverge because of their grouping markup. */
#screen-allvacancies .vac-card{
  margin: 10px 0;
  border: 1px solid var(--ios-blue-line);
  border-radius: 18px;
  background: var(--ios-surface) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,0.055)}
#screen-allvacancies .vac-card:last-child{
  border-bottom: 1px solid var(--ios-blue-line)}
#screen-allvacancies .vac-card:active{
  background: var(--ios-blue-soft) !important}
#screen-allvacancies .vac-card-main{
  padding: 15px 14px;
  gap: 13px}
#screen-allvacancies .vac-detail-inner{
  padding-left: 14px;
  padding-right: 14px}


/* Unified selection highlight: active/open/selected controls use the same
   blue wash as navigation-bar interactions instead of unrelated card colors. */
::selection{background:var(--ios-blue);color: var(--m-on-ink)}

.hub-tab.active,
[aria-selected="true"],
.is-selected,
.selected{
  background:var(--ios-blue-soft)!important;
  border-color:var(--ios-blue-line)!important;
  color:var(--ios-blue)!important}
.hub-tab.active{box-shadow:inset 0 0 0 1px var(--ios-blue-line)}

.vac-card.open .vac-card-main,
.vac-card:active .vac-card-main,
.vac-folder-card:active,
.branch-block.open .branch-block-head,
.branch-block-head:active,
.hub-contact-item:active,
.contact-card:focus-within,
.hub-row:active,
.hub-summary:active{
  background:var(--ios-blue-soft)!important}
.vac-card.open,
.branch-block.open,
.contact-card:focus-within,
[aria-selected="true"],
.is-selected,
.selected{
  border-color:var(--ios-blue-line)!important}
.vac-card.open .vac-title,
.branch-block.open .hub-contact-value,
.contact-card:focus-within .contact-card-head,
.hub-contact-item:active .hub-contact-value{
  color:var(--ios-blue)}

.vac-card:focus-visible,
.vac-folder-card:focus-visible,
.branch-block-head:focus-visible,
.hub-tab:focus-visible,
.contact-link:focus-visible,
.hub-contact-item:focus-visible,
.hub-summary:focus-visible{
  outline:3px solid var(--ios-blue-line);
  outline-offset:-2px}

/* Employer vacancy cards are direct siblings of the tab content now, so they
   retain the same flat list rhythm as cards in the main Vacancies screen. */
#screen-allemployers .hub-tab-content>.vac-card{margin:0;border-radius:0}
#screen-allemployers .hub-tab-content>.vac-card:last-of-type{border-bottom:0}