/* ============================================================================
   District CSR Connect — Gurugram  |  Government portal theme
   ========================================================================== */
:root {
  --gov-navy: #0b3b66;
  --gov-navy-dark: #082c4d;
  --gov-blue: #1565a8;
  --gov-blue-soft: #e8f1fa;
  --gov-saffron: #e07a1f;
  --gov-green: #117a3d;
  --gov-primary: var(--gov-navy);
  --gov-accent: var(--gov-saffron);
  --ink: #1d2733;
  --muted: #5b6b7d;
  --line: #e4e9f0;
  --bg: #eef2f7;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(11, 59, 102, .06), 0 2px 8px rgba(11, 59, 102, .05);
  --shadow-md: 0 6px 22px rgba(11, 59, 102, .12);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 400px at 100% -50px, rgba(21, 101, 168, .07), transparent),
    var(--bg);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .metric-value, .display-4, .display-5 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -.01em;
}

/* ---- Emblem roundel --------------------------------------------------- */
.gov-emblem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, #f3d9b8 40%, var(--gov-saffron));
  color: var(--gov-navy-dark); font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: .8rem; letter-spacing: .02em;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.gov-emblem-sm { width: 38px; height: 38px; flex-basis: 38px; font-size: .72rem;
  background: radial-gradient(circle at 30% 25%, #fff, #dbe7f3 40%, var(--gov-blue)); color: #fff; }

/* ---- Top utility strip ------------------------------------------------ */
.gov-topbar {
  background: var(--gov-navy-dark);
  color: rgba(255, 255, 255, .82);
  font-size: .76rem; padding: .3rem 0;
  border-bottom: 2px solid var(--gov-saffron);
}
.gov-topbar i { color: var(--gov-saffron); }

/* ---- Navbar ----------------------------------------------------------- */
.gov-navbar {
  background: linear-gradient(100deg, var(--gov-navy-dark) 0%, var(--gov-navy) 45%, var(--gov-blue) 100%);
  padding-top: .55rem; padding-bottom: .55rem;
}
.gov-navbar .brand-text strong { font-size: 1.05rem; line-height: 1.1; font-weight: 700; }
.gov-navbar .brand-text small { font-size: .68rem; opacity: .8; letter-spacing: .01em; }
.gov-navbar .nav-link {
  font-size: .9rem; font-weight: 500; border-radius: 8px; padding: .4rem .7rem !important;
  transition: background .15s ease;
}
.gov-navbar .nav-link:hover { background: rgba(255, 255, 255, .12); }
.gov-navbar .nav-link i { opacity: .85; }

/* ---- Cards ------------------------------------------------------------ */
.card { border: 1px solid var(--line); border-radius: var(--radius); }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card-header { border-bottom: 1px solid var(--line); font-weight: 600; }
.card-header.bg-white { border-radius: var(--radius) var(--radius) 0 0; }

/* ---- Metric cards ----------------------------------------------------- */
.metric-card {
  border: 1px solid var(--line); border-left: 4px solid var(--gov-blue);
  border-radius: var(--radius); background: #fff;
  transition: transform .14s ease, box-shadow .14s ease;
}
.metric-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; }
.metric-card .metric-value { font-size: 1.7rem; font-weight: 800; color: var(--gov-navy); line-height: 1.1; }
.metric-card .metric-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; margin-top: .15rem;
}

.req-card { border: 1px solid var(--line); border-radius: var(--radius); transition: transform .14s ease, box-shadow .14s ease; }
.req-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; }

/* Make a whole metric card a clickable link without underline/colour changes */
.metric-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.metric-link:hover { color: inherit; }
.metric-link:hover .metric-card { border-left-color: var(--gov-accent); }
.metric-link .metric-label .bi { opacity: 0; transition: opacity .14s ease, transform .14s ease; }
.metric-link:hover .metric-label .bi { opacity: .7; }

/* ---- Buttons ---------------------------------------------------------- */
.btn { border-radius: 9px; font-weight: 600; font-size: .9rem; }
.btn-gov, .btn[style*="--gov-primary"] { box-shadow: 0 2px 8px rgba(11, 59, 102, .18); }
.btn-gov {
  background: linear-gradient(180deg, var(--gov-blue), var(--gov-navy));
  color: #fff; border: 0;
}
.btn-gov:hover { color: #fff; filter: brightness(1.08); }

/* ---- Hero ------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(700px 300px at 90% -40%, rgba(224, 122, 31, .35), transparent),
    linear-gradient(115deg, var(--gov-navy-dark) 0%, var(--gov-navy) 50%, var(--gov-blue) 100%);
  color: #fff; border-radius: 20px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5; pointer-events: none;
}
.hero h1 { font-weight: 800; }
.hero .btn-light { font-weight: 700; }

/* ---- Badges ----------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .6em; }

/* ---- Tables ----------------------------------------------------------- */
.table { --bs-table-bg: transparent; }
.table thead.table-light th {
  background: var(--gov-blue-soft); color: var(--gov-navy);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; border-bottom: 2px solid #cfe0ef;
}
.table-hover tbody tr:hover { background: var(--gov-blue-soft); }
.table-sm td, .table-sm th { font-size: .85rem; }

/* ---- Status timeline -------------------------------------------------- */
.status-timeline { display: flex; flex-wrap: wrap; gap: 0; }
.status-timeline .step {
  flex: 1; min-width: 90px; text-align: center; position: relative;
  font-size: .75rem; color: #aab6c4; padding-top: 28px; font-weight: 600;
}
.status-timeline .step::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: #d7dee7; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 2; border: 3px solid #fff; box-shadow: 0 0 0 1px #d7dee7;
}
.status-timeline .step::after {
  content: ""; height: 3px; background: #d7dee7;
  position: absolute; top: 9px; left: -50%; width: 100%; z-index: 1;
}
.status-timeline .step:first-child::after { display: none; }
.status-timeline .step.done { color: var(--gov-green); }
.status-timeline .step.done::before { background: var(--gov-green); box-shadow: 0 0 0 1px var(--gov-green); }
.status-timeline .step.done::after { background: var(--gov-green); }
.status-timeline .step.current { color: var(--gov-navy); }
.status-timeline .step.current::before {
  background: var(--gov-saffron); box-shadow: 0 0 0 4px rgba(224, 122, 31, .22);
}

/* ---- Login ------------------------------------------------------------ */
.login-wrap { min-height: calc(100vh - 230px); display: flex; align-items: center; }
.login-aside {
  background:
    radial-gradient(500px 240px at 110% -30%, rgba(224, 122, 31, .4), transparent),
    linear-gradient(150deg, var(--gov-navy-dark), var(--gov-blue));
  color: #fff; border-radius: 20px;
}

/* ---- Footer ----------------------------------------------------------- */
.gov-footer { background: #fff; border-top: 3px solid var(--gov-navy); }
.gov-footer strong { color: var(--gov-navy); }

/* ---- Misc ------------------------------------------------------------- */
.chart-box { position: relative; height: 280px; }
#map { height: 540px; border-radius: var(--radius); }
.form-label { font-weight: 600; font-size: .85rem; color: var(--ink); }
.form-control:focus, .form-select:focus {
  border-color: var(--gov-blue); box-shadow: 0 0 0 .2rem rgba(21, 101, 168, .15);
}
a { color: var(--gov-blue); }