/* ===================================================
   SolarDOOT — Unified UI Stylesheet (No KPI block)
   Ready to paste — Desktop / Tablet / Mobile
   =================================================== */

/* Root tokens */
:root{
  --sidebar-w: 300px;
  --sidebar-collapsed-w: 80px;
  --navy-1: #071E2B;
  --navy-2: #0f2b3f;
  --accent-blue: #1F7AEC;
  --add-blue: #2EA0FF;
  --surface: #F5F7FA;
  --card-shadow: 0 6px 18px rgba(2,24,43,0.08);
  --radius: 14px;
  --transition-fast: 180ms;
}

/* Resets */
*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  font-family:"Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
}
body{
  background:var(--surface);
  display:flex;
  min-width:320px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =======================
   SIDEBAR (fixed left)
   ======================= */

.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:var(--sidebar-w);
  height:100vh;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:linear-gradient(180deg,var(--navy-1),var(--navy-2));
  color:#fff;
  z-index:1200; /* above content; above topbar when overlaying */
  transition: width var(--transition-fast), transform var(--transition-fast);
  box-shadow:0 8px 30px rgba(2,24,43,0.12);
  overflow-y:auto;
  will-change:width,transform;
}

/* Collapse behaviour (desktop/tablet) */
body.sidebar-collapsed .sidebar{
  width:var(--sidebar-collapsed-w);
}
body.sidebar-collapsed .sidebar .mi-label,
body.sidebar-collapsed .sidebar .brand-text,
body.sidebar-collapsed .sidebar .user{
  display:none;
}
body.sidebar-collapsed .brand-avatar{
  margin-right:0;
}

/* Sidebar bottom */
.sidebar-bottom{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Sidebar logos & banner */
.dashboard-banner img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  display: block;
}
.logo-side{
  height:35px;
  width:auto;
  margin-left:auto;
  margin-right:auto;
  border-radius:6px;
}

/* Menu */
.menu{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  position:relative;
}
.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  background:transparent;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.menu-item:hover{
  background:rgba(255,255,255,0.06);
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}
.menu-item.active{
  background:rgba(255,255,255,0.06);
}
.mi-icon{
  min-width:26px;
  font-size:20px;
  display:flex;
  justify-content:center;
  color:#fff;
  transition:transform .18s ease;
}

/* Tooltip (collapsed sidebar) */
.sidebar-tooltip{
  position:absolute;
  left:calc(var(--sidebar-collapsed-w) + 12px);
  background:#072540;
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%);
  white-space:nowrap;
  transition:opacity .12s ease, transform .12s ease;
  z-index:2000;
}

/* Show tooltip when hovering a menu-item in collapsed mode.
   Supports both tooltip inside item or immediately after it. */
body.sidebar-collapsed .menu-item:hover .sidebar-tooltip,
body.sidebar-collapsed .menu-item:hover + .sidebar-tooltip{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) translateX(6px);
}

/* =======================
   TOPBAR (single authoritative rule)
   ======================= */


.topbar{
  position:sticky;
  top:0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  height:72px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  box-shadow:0 2px 10px rgba(2,24,43,0.06);
  z-index:1500; /* below sidebar when sidebar is overlaying (sidebar has 1600) */
  margin-left:var(--sidebar-w); /* pushes topbar right by sidebar width */
  transition: margin-left var(--transition-fast), padding var(--transition-fast);
  flex-shrink:0;
}

/* When sidebar collapsed */
body.sidebar-collapsed .topbar{
  margin-left:var(--sidebar-collapsed-w);
}

/* Mobile: topbar takes full width (sidebar overlays) */
@media (max-width:768px){
  .topbar{
    margin-left:0 !important;
    padding:0 14px;
  }
}

/* Tablet minor compression */
@media (min-width:769px) and (max-width:1024px){
  .topbar{ padding:0 16px; }
}

/* Topbar sub-elements */
.topbar-left{ display:flex; align-items:center; gap:14px; }
.logo-top{ height:40px; width:auto; border-radius:6px; }
.icon-btn{
  width:44px;height:44px;
  border:none;border-radius:10px;
  background:linear-gradient(180deg,#072540,#153E60);
  display:flex;justify-content:center;align-items:center;
  color:#fff;cursor:pointer;
}
.page-title{
  font-size:20px;
  color:#0b2f42;
  font-weight:700;
  margin:0;
}

/* =======================
   MAIN WRAPPER & CONTENT
   ======================= */

.main-wrapper{
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition: margin-left var(--transition-fast), width var(--transition-fast);
  max-width:100% !important;   /* force full width */
}


/* Collapsed */
body.sidebar-collapsed .main-wrapper{
  margin-left:var(--sidebar-collapsed-w);
  width:calc(100% - var(--sidebar-collapsed-w));
}

/* Mobile — main occupies full width while sidebar overlays */
@media (max-width:768px){
  .main-wrapper{
    margin-left:0 !important;
    width:100% !important;
  }
}

/* Content */
.content{
  padding:22px;
  overflow:auto;
  height:calc(100vh - 72px);
  -webkit-overflow-scrolling:touch;
}

/* =======================
   Profile Menu
   ======================= */

.profile{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}
.avatar{
  width:44px;height:44px;
  border-radius:50%;
  object-fit:cover;
}
.profile-menu{
  position:absolute;
  right:0;
  top:64px;
  width:260px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 28px rgba(2,24,43,0.18);
  padding:12px 0;
  display:none;
  animation:pmFade .22s ease;
}
@keyframes pmFade{ from{ opacity:0;transform:translateY(-6px); } to{ opacity:1;transform:translateY(0); } }
.pm-item{
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#092437;
  font-size:15px;
  text-decoration:none;
}
.pm-item:hover{ background:rgba(31,122,236,0.08); }
.logout{ color:#d62828 !important; }




/* =======================
   Hybrid & Summary Panels
   ======================= */

.hybrid-wrapper{
  display:flex;
  gap:28px;
  margin:22px 0;
  flex-wrap:nowrap;
}
.hybrid-group{
  width:300px;
  background:#fff;
  border:1px solid #d9dce1;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(2,24,43,0.06);
}
.hybrid-title{
  background:#f3f5f8;
  padding:10px 0;
  font-size:15px;
  font-weight:700;
  text-align:center;
  border-bottom:1px solid #e2e6ea;
}
.hybrid-kpi-card{
  margin:12px;
  padding:14px;
  background:#fff;
  border-radius:10px;
  text-align:center;
  box-shadow:0 2px 10px rgba(2,24,43,0.05);
  transition:.15s;
}
.hybrid-kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(2,24,43,0.10);
}

.summary-wrapper{
  display:flex;
  gap:28px;
  margin:22px 0;
}
.summary-group{
  width:300px;
  background:#fff;
  border:1px solid #dce2e6;
  border-radius:10px;
  box-shadow:0 3px 12px rgba(2,24,43,0.06);
  overflow:hidden;
}
.summary-title{
  background:#f3f5f8;
  padding:10px 0;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:#0b2839;
  border-bottom:1px solid #e2e6ea;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.summary-card{
  margin:12px;
  padding:14px;
  background:#fff;
  border-radius:10px;
  text-align:center;
  font-weight:700;
  box-shadow:0 2px 10px rgba(2,24,43,0.05);
  transition:.15s ease;
}
.summary-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(2,24,43,0.12);
}

/* Responsive Panels */
@media (max-width:650px){
  .summary-wrapper,
  .hybrid-wrapper{
    flex-direction:column;
    gap:20px;
  }
  .summary-group,
  .hybrid-group{
    width:100%;
  }
}

/* =======================
   Mobile Sidebar Drawer (alternate rules)
   ======================= */

/* For slightly larger devices where you want drawer behavior below 992px */
@media (max-width:992px){
  :root{ --sidebar-w: 0px; } /* ensures topbar/main take full width */
  .sidebar{
    transform: translateX(-110%);
    width: 260px;
  }
  .sidebar.open, body.sidebar-open .sidebar{
    transform: translateX(0);
  }
  .main-wrapper{
    margin-left:0;
    width:100%;
  }
}

/* Utility button */
.sdoot-btn { color: #fff !important; font-weight:700; }
.sdoot-btn:hover { color:#fff !important; }

/* Accessibility: focus outlines for keyboard users */
a:focus, button:focus, .menu-item:focus {
  outline: 3px solid rgba(31,122,236,0.18);
  outline-offset: 2px;
}


/* End of stylesheet (KPI section intentionally excluded) */


/* ============================================
   KPI CARD — Unified, Professional Component
   ============================================ */

.kpi-card {
    padding: 14px 16px;
    border-radius: 14px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: var(--card-shadow);
    position: relative;
    transition: 0.25s ease;
    overflow: hidden;
}

/* Hover elevation */
.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(2, 24, 43, 0.15);
}

/* Premium ring effect */
.kpi-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: inherit;
    border: 2px solid transparent;
    transition: border-color 0.25s ease;
    pointer-events: none;
}

/* Text styling */
.kpi-label {
    font-size: 18px;
    font-weight: 700;
    opacity: 0.9;
}
.kpi-value {
    font-size: 24px;
    font-weight: 800;
    margin-top: 8px;
}


/* ============================================
   Professional KPI Color Palette
   ============================================ */

/* Primary KPIs */
.pending      { background: #F28B82; color: #fff; }
.done         { background: #81C995; color: #fff; }
.status       { background: #FBCB66; color: #000; }
.newly        { background: #8AB4F8; color: #fff; }

/* Mid-tier KPIs */
.states       { background: #D3E3FD; color: #0b1720; }
.captains     { background: #E8EAED; color: #0b1720; }
.droots       { background: #DADCE0; color: #0b1720; }
.customers    { background: #4285F4; color: #fff; }

/* Project KPIs */
.domestic     { background: #FDE7C8; color: #0b1720; }
.commercial   { background: #C8E6C9; color: #0b1720; }
.revenue      { background: #CDE4FB; color: #0b1720; }

/* Newly Applied */
.applied1     { background: #EDF2FA; color: #0b1720; }
.applied2     { background: #E5F5EC; color: #0b1720; }

/* Message KPIs */
.msg1         { background: #FFE8D5; color: #0b1720; }
.msg2         { background: #EFE8FF; color: #0b1720; }


/* ============================================
   High-Impact Bold KPI Colors
   ============================================ */

.kpi-blue     { background: #1E88E5; color: #fff; }
.kpi-green    { background: #43A047; color: #fff; }
.kpi-red      { background: #E53935; color: #fff; }
.kpi-orange   { background: #FB8C00; color: #fff; }
.kpi-yellow   { background: #FDD835; color: #000; }


/* ============================================
   Hover Ring Color Mapping
   ============================================ */

/* Professional KPI Rings */
.pending:hover::before      { border-color: #ffb3ae; }
.done:hover::before         { border-color: #9be4b2; }
.status:hover::before       { border-color: #ffe3a8; }
.newly:hover::before        { border-color: #bcd6ff; }

.states:hover::before       { border-color: #e7efff; }
.captains:hover::before     { border-color: #f1f3f4; }
.droots:hover::before       { border-color: #e6e8e9; }
.customers:hover::before    { border-color: #8db5ff; }

.domestic:hover::before     { border-color: #ffeacc; }
.commercial:hover::before   { border-color: #d0f3d1; }
.revenue:hover::before      { border-color: #d8ecff; }

.applied1:hover::before     { border-color: #d7e4f6; }
.applied2:hover::before     { border-color: #d9f7e8; }

.msg1:hover::before         { border-color: #ffe1c3; }
.msg2:hover::before         { border-color: #e2ceff; }

/* Bold KPI Rings */
.kpi-blue:hover::before     { border-color: #90c9ff; }
.kpi-green:hover::before    { border-color: #a9e8b5; }
.kpi-red:hover::before      { border-color: #ffb5b5; }
.kpi-orange:hover::before   { border-color: #ffd2a6; }
.kpi-yellow:hover::before   { border-color: #fff3a6; }


/* ============================================
   KPI Area Layout
   ============================================ */

.kpi-area {
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
}

/* ==============================
   Responsive KPI Grid System
   ============================== */

/* Default (Desktop – 4 columns) */
.kpi-grid {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
}

/* Large Tablets (3 columns) — below 1200px */
@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets (2 columns) — below 900px */
@media (max-width: 900px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (1 column) — below 550px */
@media (max-width: 550px) {
    .kpi-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* MOBILE drawer (ONLY below 768px) */
@media (max-width:768px){
  :root{ --sidebar-w: 0px; }
  .sidebar{
    transform: translateX(-110%);
    width: 260px;
  }
  .sidebar.open{
    transform: translateX(0);
  }
  .main-wrapper{
    margin-left:0;
    width:100%;
  }
}


.sdoot-btn {
    color: #fff !important;
    font-weight: 700;
}

.sdoot-btn:hover {
    color: #fff !important;
}