/* =========================================================
   AllJobAssam App — Design System
   Signature: color-coded category chips + a "days-left" urgency
   pill that turns from calm green -> amber -> red as a deadline
   nears. Deep indigo/navy + warm gold, premium govt-portal feel.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --bg:        #F3F5FA;   /* cool pale indigo-white */
  --surface:   #FFFFFF;
  --surface-2: #ECEFF9;
  --ink:       #141B33;   /* deep navy-black */
  --ink-muted: #5B6480;
  --primary:      #1B2A6B;  /* deep indigo/navy */
  --primary-dark: #0F1B4D;
  --primary-tint: #E1E5F7;
  --accent:      #E8A93D;  /* warm gold */
  --accent-dark: #B87F16;
  --accent-tint: #FCEFD2;
  --danger:  #C63D3D; --danger-tint: #FBE0DE;
  --warn:    #C68A1E; --warn-tint:   #FBEDCB;
  --ok:      #1F8A57; --ok-tint:     #DCF3E7;
  --line:    #E1E4F0;
  --shadow-1: 0 1px 2px rgba(15,27,77,0.08), 0 1px 1px rgba(15,27,77,0.06);
  --shadow-2: 0 4px 16px rgba(15,27,77,0.14);
  --shadow-3: 0 12px 32px rgba(15,27,77,0.20);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* category colors */
  --cat-assam-govt: #1B2A6B;   --cat-assam-govt-tint: #E1E5F7;
  --cat-central-govt: #0E7C86; --cat-central-govt-tint: #DCF1F2;
  --cat-private: #C1560C;      --cat-private-tint: #FBE7D6;
  --cat-admit-card: #7A3FA0;   --cat-admit-card-tint: #EFE1F7;
  --cat-result: #1F8A57;       --cat-result-tint: #DCF3E7;
  --cat-other: #5B6480;        --cat-other-tint: #E7E9F2;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--accent-dark); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ---------- App shell ---------- */
.app-shell{
  max-width:480px; margin:0 auto; min-height:100vh; background:var(--bg);
  position:relative; display:flex; flex-direction:column; box-shadow:0 0 60px rgba(15,27,77,0.10);
}
@media (min-width:481px){
  body{background:linear-gradient(180deg,#E7EAF5,#D9DEF0);}
  .app-shell{margin-top:18px; margin-bottom:18px; border-radius:28px; overflow:hidden; min-height:calc(100vh - 36px);}
}

/* ---------- Top App Bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; background:var(--primary); color:#fff;
  padding:14px 18px calc(14px + env(safe-area-inset-top,0)) 18px;
  padding-top:calc(14px + env(safe-area-inset-top,0));
  display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-2);
}
.topbar .back-btn{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.14); border:none; color:#fff; cursor:pointer; flex:none;
}
.topbar .back-btn:active{background:rgba(255,255,255,0.28);}
.topbar h1{font-family:var(--font-display); font-size:17px; font-weight:700; margin:0; letter-spacing:.1px; flex:1; line-height:1.25;}
.topbar .eyebrow{display:block; font-family:var(--font-body); font-weight:500; font-size:11px; opacity:.78; letter-spacing:.4px; text-transform:uppercase;}
.topbar .brand-mark{width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; flex:none;}
.topbar .search-btn{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.14); border:none; color:#fff; cursor:pointer; flex:none;}

/* ---------- Content ---------- */
.content{flex:1; padding:16px 16px 24px; padding-bottom:calc(96px + env(safe-area-inset-bottom,0));}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(155deg,var(--primary) 0%, #14205A 55%, #0F1B4D 100%);
  color:#fff; border-radius:var(--radius-lg); padding:22px 20px 20px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-2);
}
.hero::after{content:""; position:absolute; right:-30px; top:-30px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(232,169,61,.35),transparent 70%);}
.hero .kicker{font-size:11.5px; text-transform:uppercase; letter-spacing:1px; color:var(--accent-tint); opacity:.9; font-weight:600;}
.hero h2{font-family:var(--font-display); font-size:21px; line-height:1.32; margin:6px 0 8px; font-weight:800;}
.hero p{font-size:13px; line-height:1.55; margin:0 0 16px; color:#DCE0F2; max-width:36ch;}
.hero-stats{display:flex; gap:10px; position:relative; z-index:1;}
.hero-stat{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:8px 12px; flex:1;}
.hero-stat b{display:block; font-family:var(--font-mono); font-size:16px;}
.hero-stat span{font-size:10px; color:#C7CDE8;}

/* ---------- Category chip row (horizontal scroll) ---------- */
.cat-scroll{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 6px; margin:16px -2px 4px; scrollbar-width:none;}
.cat-scroll::-webkit-scrollbar{display:none;}
.cat-chip{
  flex:none; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700;
  background:var(--surface); border:1.4px solid var(--line); color:var(--ink-muted); white-space:nowrap;
}
.cat-chip.active{background:var(--primary); border-color:var(--primary); color:#fff;}

/* ---------- Section headers ---------- */
.section-title{display:flex; align-items:baseline; justify-content:space-between; margin:22px 2px 10px;}
.section-title h3{font-family:var(--font-display); font-size:15px; font-weight:800; margin:0; color:var(--ink);}
.section-title a, .section-title span{font-size:11.5px; color:var(--ink-muted); font-weight:600;}

/* ---------- Job card ---------- */
.job-list{display:flex; flex-direction:column; gap:10px;}
.job-card{
  background:var(--surface); border-radius:var(--radius-md); padding:14px; box-shadow:var(--shadow-1);
  border:1px solid var(--line); display:flex; gap:12px; position:relative;
}
.job-card:active{box-shadow:var(--shadow-2);}
.job-thumb{width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none; background:var(--surface-2);}
.job-thumb-fallback{width:56px; height:56px; border-radius:12px; flex:none; background:var(--primary-tint); color:var(--primary); display:flex; align-items:center; justify-content:center;}
.job-body{flex:1; min-width:0;}
.job-top-row{display:flex; align-items:center; gap:6px; margin-bottom:5px; flex-wrap:wrap;}
.cat-pill{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:3px 8px; border-radius:999px;}
.new-pill{font-size:9.5px; font-weight:800; letter-spacing:.4px; padding:3px 8px; border-radius:999px; background:var(--accent); color:var(--primary-dark);}
.job-title{font-family:var(--font-display); font-size:13.5px; font-weight:700; line-height:1.35; margin:0 0 5px; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.job-meta{font-size:11px; color:var(--ink-muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.urgency-pill{font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; font-family:var(--font-mono);}
.urgency-red{background:var(--danger-tint); color:var(--danger);}
.urgency-amber{background:var(--warn-tint); color:var(--warn);}
.urgency-green{background:var(--ok-tint); color:var(--ok);}

/* ---------- Category pill color variants ---------- */
.cat-assam-govt{background:var(--cat-assam-govt-tint); color:var(--cat-assam-govt);}
.cat-central-govt{background:var(--cat-central-govt-tint); color:var(--cat-central-govt);}
.cat-private{background:var(--cat-private-tint); color:var(--cat-private);}
.cat-admit-card{background:var(--cat-admit-card-tint); color:var(--cat-admit-card);}
.cat-result{background:var(--cat-result-tint); color:var(--cat-result);}
.cat-other{background:var(--cat-other-tint); color:var(--cat-other);}

/* ---------- Job detail page ---------- */
.job-hero{background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); border:1px solid var(--line); margin-bottom:16px;}
.job-hero img{width:100%; height:170px; object-fit:cover; display:block; background:var(--surface-2);}
.job-hero-body{padding:16px;}
.job-hero h2{font-family:var(--font-display); font-size:18px; line-height:1.35; margin:8px 0 10px;}
.facts-table{width:100%; border-collapse:collapse; margin-top:6px;}
.facts-table tr{border-bottom:1px solid var(--line);}
.facts-table tr:last-child{border-bottom:none;}
.facts-table td{padding:9px 4px; font-size:12.5px; vertical-align:top;}
.facts-table td:first-child{color:var(--ink-muted); font-weight:600; width:42%;}
.facts-table td:last-child{color:var(--ink); font-weight:600;}
.panel{background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-1); border:1px solid var(--line); padding:16px; margin-bottom:14px;}
.panel h4{font-family:var(--font-display); font-size:13px; font-weight:700; margin:0 0 10px; color:var(--ink);}
.panel p{font-size:13px; line-height:1.65; color:var(--ink-muted); margin:0;}

.btn-primary{
  width:100%; padding:14px; border:none; border-radius:14px; background:var(--primary); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer; box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary:active{background:var(--primary-dark);}
.btn-gold{background:var(--accent); color:var(--primary-dark);}
.btn-gold:active{background:var(--accent-dark); color:#fff;}
.btn-ghost{width:100%; padding:12px; border-radius:14px; border:1.6px solid var(--line); background:transparent; color:var(--ink); font-weight:600; font-size:13px; cursor:pointer; text-align:center;}
.btn-row{display:flex; gap:10px; margin-top:4px;}
.btn-row .btn-primary, .btn-row .btn-ghost{flex:1;}

/* ---------- Search ---------- */
.search-bar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1.6px solid var(--line); border-radius:14px; padding:11px 14px; margin-bottom:6px;}
.search-bar input{border:none; outline:none; flex:1; font-size:14px; background:transparent; color:var(--ink);}
.search-bar svg{flex:none; color:var(--ink-muted);}

/* ---------- Ad slot ---------- */
.ad-slot{background:var(--surface-2); border:1px dashed var(--line); border-radius:14px; padding:14px; text-align:center; font-size:10.5px; color:var(--ink-muted); margin:16px 0; min-height:60px; display:flex; align-items:center; justify-content:center;}

/* ---------- Bottom Navigation ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40; max-width:480px; margin:0 auto;
  background:var(--surface); border-top:1px solid var(--line); display:flex;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom,0)); box-shadow:0 -4px 18px rgba(15,27,77,0.10);
}
.bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; border-radius:12px; color:var(--ink-muted); font-size:10.5px; font-weight:600;}
.bottom-nav a.active{color:var(--primary);}
.bottom-nav a.active .nav-ic{background:var(--primary-tint);}
.nav-ic{width:38px; height:26px; border-radius:13px; display:flex; align-items:center; justify-content:center;}

/* ---------- Empty state ---------- */
.empty-state{text-align:center; padding:40px 20px; color:var(--ink-muted);}
.empty-state svg{margin-bottom:12px; opacity:.5;}
.empty-state p{font-size:13px; line-height:1.6;}

/* ---------- Misc ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; background:var(--primary-tint); color:var(--primary); font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
.footer-note{text-align:center; font-size:11px; color:var(--ink-muted); margin-top:20px; line-height:1.6;}
.footer-note a{color:var(--primary); font-weight:600;}
::selection{background:var(--accent-tint);}