:root{
    --sidebar-w: 200px;
    --accent: #1abc9c;
    --muted: #6b7280;
    --card: #ffffff;
    --bg: #f4f6f9;
    --glass: rgba(255,255,255,0.85);
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter, "Segoe UI", Roboto, Arial;
    background:var(--bg);
    color:#111827;
  }
  h4{font-size:18px;font-weight:600;}
  

  /* Sidebar */
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:var(--sidebar-w);
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    color:#e6f3f0;
    padding:22px 16px;
    display:flex;
    flex-direction:column;
    gap:18px;
    box-shadow: 4px 0 20px rgba(10,20,30,0.15);
    z-index:50;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:6px;
  }
  .brand .logo{
    width:46px;height:46px;border-radius:10px;
    /*background:linear-gradient(135deg,var(--accent),#16a085);*/
    display:flex;align-items:center;justify-content:center;
    font-weight:700;color:white;font-size:20px;
    box-shadow: 0 6px 18px rgba(16,185,129,0.18);
  }
  .brand h1{font-size:16px;margin:0;font-weight:600;letter-spacing:0.2px}
  .nav{
    margin-top:6px; display:flex;flex-direction:column; gap:6px;
  }
  .nav a{
    display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;
    color:#000;text-decoration:none;font-size:14px;transition:all .18s ease;
  }
  .nav a i{width:20px;text-align:center}
  .nav a:hover{background:rgba(255,255,255,0.04);transform:translateX(6px);color:blue;}

  .sidebar-footer{margin-top:auto;font-size:13px;color:rgba(255,255,255,0.6)}
  
  /* Topbar */
  .topbar{
    position:fixed;
    left:var(--sidebar-w);
    right:0;
    top:0;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    padding:0 20px;
    background:#fff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
    z-index:40;
  }
  .top-actions{display:flex;align-items:center;gap:10px}
  .icon-btn{
    width:44px;
    height:44px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    /*border:1px solid rgba(16,24,40,0.04);*/
    background:transparent;position:relative;
    transition:all .15s ease;
  }

  .icon-badge{
    position:absolute;right:6px;top:6px;background:crimson;color:white;font-size:11px;padding:2px 6px;border-radius:999px;
  }

  /* Profile / notifications dropdowns */
  .dropdown{
    position:absolute;
    right:0;
    top:56px;
    background:var(--card);
    min-width:220px;
    border-radius:0px;
    padding:10px;
    box-shadow:0 10px 30px rgba(11,20,34,0.12);
    display:none;
    z-index:60;
    border:1px solid #000;
  }
  .dropdown.show{
      display:block
      
  }
  .dropdown .item{
      padding:8px;
      border-radius:8px;
      display:flex;
      gap:10px;
      align-items:center;
      color:#0f1724
  }
  .dropdown .item:hover{
      background:#f3f6f8;
  }

  /* Main area */
  .main{
    margin-left:var(--sidebar-w);
    padding:57px 22px 22px;
    min-height:100vh;
  }
  .grid{
    display:grid;
    grid-template-columns: repeat(12,1fr);
    gap:16px;
  }
  .card{
    background:var(--card);
    border-radius:0px;
    padding:14px;
    box-shadow: 0 6px 20px rgba(12,20,35,0.04);
  }

  /* Quick actions */
  .quick{
    grid-column: span 12;
    display:flex;gap:12px;flex-wrap:wrap;
  }
  /*.quick .qa{*/
  /*  flex:1 1 150px; min-width:0px; padding:14px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#f8fafb);*/
  /*  display:flex;flex-direction:column;gap:6px;align-items:flex-start;cursor:pointer;*/
  /*  transition:transform .14s ease, box-shadow .14s ease;*/
  /*}*/
  /*.qa:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(12,20,35,0.06)}*/
  .qa small{color:var(--muted);font-size:12px}

  /* Chart area */
  .chart-card{grid-column: span 8; display:flex;flex-direction:column; gap:12px}
  .mini-cards{grid-column: span 4; display:flex;flex-direction:column; gap:12px}
  .mini-cards .mini{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:8px;background:#fff;border:1px solid rgba(15,23,42,0.04)}

  /* Tables */
  .table-card{grid-column: span 6;}
  table{width:100%;border-collapse:collapse;font-size:14px}
  table th, table td{padding:10px;border-bottom:1px solid #eef2f7;text-align:left}
  table th{background:transparent;color:white;font-weight:600;font-size:13px}

  /* Responsive */
  @media (max-width:1000px){
    :root{--sidebar-w:72px}
    .sidebar{width:72px;padding:16px;align-items:center}
    .brand h1{display:none}
    .nav a span{display:none}
    .topbar{left:72px}
    .main{margin-left:72px;padding-top:84px}
    .chart-card{grid-column: span 12}
    .mini-cards{grid-column: span 12;flex-direction:row;overflow:auto}
    .mini-cards .mini{min-width:200px}
  }
  @media (max-width:640px){
    .sidebar{display:none}
    .topbar{left:0}
    .main{margin-left:0;padding-top:84px}
    .grid{padding:0}
  }
  
  /* Stylish table design */
.table-card table {
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.table-card table thead {
  background:#242764;
  color: white;
}

.table-card table th {
  padding: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}

.table-card table tbody tr {
  transition: background 0.2s ease, transform 0.1s ease;
}

.table-card table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.table-card table tbody tr:hover {
  background: #eafaf6;
  transform: scale(1.01);
}

.table-card table td {
  padding: 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 14px;
  color: #374151;
}

.table-card table tbody tr:last-child td {
  border-bottom: none;
}
/*project*/
        /* Stylish table header */
        table.dataTable thead {
            background: linear-gradient(90deg, #1abc9c, #16a085);
            color: white;
        }
        table.dataTable thead th {
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }
        /* Hover effect */
        table.dataTable tbody tr:hover {
            background-color: #eafaf6;
            transition: background 0.3s;
        }
        /* Action buttons spacing */
        .btn-group .btn {
            padding: 5px 10px;
            font-size: 13px;
        }
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        float: none;
        margin: 31px auto 0;
        max-width: 1078px;

        /* Fix for sidebar overlap */
        margin-left: var(--sidebar-w); /* Push right by sidebar width */
    }
}

.main-content-wrapper {
    margin-left: var(--sidebar-w);
    display: flex;
    justify-content: center; /* Center horizontally */
}
.btn:hover{background-color:green !important;border-color:#000;}
.dropdown-menu .show{border-radius:0px;}