/* Vishleshan 2.0 Command Centre — Indian Oil brand theme
   Palette inspired by Indian Oil: orange (#F37021), deep navy (#0A2A66),
   with a warm accent. Used site-wide via CSS variables. */
:root{
  --io-orange:#F37021;      /* primary brand orange */
  --io-orange-dark:#D95F12;
  --io-navy:#0A2A66;        /* deep corporate blue */
  --io-navy-dark:#071d47;
  --io-red:#E4002B;         /* IOCL accent red */
  --io-sky:#1e63c9;
  --ink:#0f172a;
  --paper:#f6f7fb;
}

body{background:var(--paper)}

/* Brand gradients */
.brand-gradient{background:linear-gradient(120deg,var(--io-navy) 0%,var(--io-sky) 100%)}
.brand-gradient-orange{background:linear-gradient(120deg,var(--io-orange) 0%,var(--io-orange-dark) 100%)}
.sidebar-bg{background:linear-gradient(180deg,var(--io-navy-dark) 0%,var(--io-navy) 100%)}

/* Buttons */
.btn-primary{background:var(--io-orange);color:#fff}
.btn-primary:hover{background:var(--io-orange-dark)}
.btn-navy{background:var(--io-navy);color:#fff}
.btn-navy:hover{background:var(--io-navy-dark)}

/* Sidebar links */
.navlink{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;color:#dbe4f5}
.navlink:hover{background:rgba(255,255,255,.10)}
.navlink.active{background:var(--io-orange);color:#fff;box-shadow:0 6px 16px rgba(243,112,33,.35)}

/* Sidebar section grouping */
.nav-section{margin:.35rem .5rem;padding:.5rem;border-radius:.75rem;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.nav-heading{display:flex;align-items:center;gap:.4rem;padding:.15rem .5rem .4rem;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7f93b8}
.nav-heading::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--io-orange);display:inline-block}

/* Reference-inspired: menu item with left-border active accent */
.menu-item{display:flex;align-items:center;gap:.65rem;padding:.6rem .85rem;border-radius:.6rem;font-size:13px;font-weight:500;color:#c3cee3;transition:all .15s;border-left:3px solid transparent}
.menu-item i{font-size:1.05rem;color:#8ea3c9}
.menu-item:hover{background:rgba(255,255,255,.06);color:#fff}
.menu-item.menu-active{background:linear-gradient(90deg,rgba(243,112,33,.18),rgba(243,112,33,.04));border-left-color:var(--io-orange);color:#fff;font-weight:600}
.menu-item.menu-active i{color:var(--io-orange)}

/* Cards & dropdown */
.card-hover{transition:transform .15s, box-shadow .15s}
.card-hover:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(0,0,0,.14)}
.dropdown-menu{position:absolute;right:0;top:2.75rem;width:12rem;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;box-shadow:0 16px 40px -12px rgba(0,0,0,.25);padding:.4rem;z-index:60}

/* ===== Revamp components ===== */
/* Animated gradient hero header */
@keyframes heroShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero{background:linear-gradient(120deg,#071d47,#0A2A66,#F37021,#0A2A66);background-size:300% 300%;animation:heroShift 14s ease infinite;color:#fff;border-radius:1.25rem}

/* Section header with icon chip */
.section-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.section-head .chip{width:2rem;height:2rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--io-orange),var(--io-orange-dark));font-size:1rem}
.section-head h3{font-weight:700;color:#0f172a;font-size:.95rem}

/* Stat tile with accent strip + hover lift */
.tile{position:relative;background:#fff;border:1px solid #e6e9f0;border-radius:1rem;padding:1.1rem 1.15rem;overflow:hidden;transition:transform .15s, box-shadow .15s}
.tile:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(10,42,102,.35)}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--io-orange)}
.tile .tval{font-size:2rem;font-weight:800;line-height:1;color:#0f172a}
.tile .tlbl{font-size:.72rem;color:#64748b;text-transform:uppercase;letter-spacing:.06em}
.tile .ticon{position:absolute;right:.7rem;top:.7rem;font-size:1.4rem;opacity:.18}

/* Distribution bar row */
.dist-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.dist-track{flex:1;height:.55rem;border-radius:999px;background:#eef2f7;overflow:hidden}
.dist-fill{height:100%;border-radius:999px;transition:width .5s ease}

/* Donut ring for open vs resolved */
.ring{--v:0;--c:var(--io-orange);width:130px;height:130px;border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--v)*1%), #eef2f7 0);
  display:flex;align-items:center;justify-content:center}
.ring::after{content:"";position:absolute;width:96px;height:96px;border-radius:50%;background:#fff}
.ring .ring-in{position:relative;z-index:1;text-align:center}

/* Tabs */
.tab-btn{padding:.45rem .9rem;border-radius:.55rem;font-size:.875rem;font-weight:600;color:#64748b;background:transparent}
.tab-btn:hover{color:var(--io-navy)}
.tab-btn.active{background:var(--io-navy);color:#fff}

/* Accent chip */
.accent-bar{height:4px;background:linear-gradient(90deg,var(--io-orange),var(--io-red),var(--io-navy))}

/* Scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:5px}
::-webkit-scrollbar-track{background:transparent}