/* ======================================================================= 
   INWORKS ERP – RESPONSIVE PURPLE THEME
   ======================================================================= */

/* ---------- CSS Variables ---------- */
:root{
  --erp-purple:#7B2CBF;
  --erp-purple-2:#9D4EDD;
  --erp-dark:#5A1A9E;
  --erp-accent:#7c3aed;
  --card-bg:#ffffff;
  --muted:#6b6b6b;
  --success:#16a34a;
  --danger:#dc2626;
  --glass-bg: rgba(125,50,200,0.84);

  --sidebar-bg:#222;
  --sidebar-light:#2f2f2f;
  --sidebar-text:#f5f5f5;
  --sidebar-muted:#bcbcbc;

  --header-bg:#222;
  --header-height:72px;
}

/* ======================================================================= 
   GLOBAL BASE + RESET
   ======================================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Poppins',sans-serif;
}

html, body{
  height:100%;
}

body{
  background:#f5f7fb;
  color:#111;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

button{
  font-family:inherit;
  cursor:pointer;
}

/* Scrollbars (light) */
::-webkit-scrollbar{
  width:6px;
  height:6px;
}
::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.25);
  border-radius:3px;
}

/* ======================================================================= 
   HEADER (inc/header.php)
   ======================================================================= */

.erp-header{
  width:100%;
  height:var(--header-height);
  background:var(--header-bg);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  box-sizing:border-box;
  border-bottom:1px solid rgba(255,255,255,0.15);
  position:fixed;
  top:0;
  left:0;
  z-index:2000;
}

/* LEFT: logo + brand + toggle */
.erp-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.erp-logo{
  width:45px;
  height:45px;
  object-fit:contain;
}

.erp-brand{
  display:flex;
  flex-direction:column;
}

.erp-title{
  font-size:20px;
  font-weight:600;
}
.erp-title span{
  color:var(--erp-purple-2);
}

.erp-tag{
  font-size:12px;
  color:#cfcfcf;
  margin-top:-2px;
}

/* Mobile / desktop nav toggle in header */
.erp-toggle{
  display:none;
  background:none;
  color:#fff;
  border:none;
  outline:none;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:20px;
  margin-left:6px;
}

/* RIGHT: notification + user menu */
.erp-right{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Notification icon */
.erp-icon {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: #fff;
}

.erp-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #ff3b58;
    color: #fff;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 50%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
}



/* Dropdowns (user + notifications) */
.erp-dropdown{
  display:none;
  position:absolute;
  right:10px;
  top:calc(var(--header-height) - 2px);
  background:#2c2c2c;
  width:230px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  padding:10px 0;
  color:#fff;
  box-shadow:0 6px 15px rgba(0,0,0,0.25);
  animation:erpFadeIn 0.2s ease-in-out;
  z-index:2100;
}

.erp-dropdown a{
  display:block;
  padding:10px 16px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
}
.erp-dropdown a:hover{
  background:var(--erp-purple);
}

/* Notification dropdown */
.notif-dropdown h4{
  margin:0;
  padding:12px 16px;
  font-size:16px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.notif-list{
  max-height:220px;
  overflow-y:auto;
  padding:10px 16px;
  font-size:14px;
}

/* User menu button */
.erp-user-menu{
  position:relative;
}
.erp-user-btn{
  border:none;
  background:none;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  color:#fff;
}
.erp-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
}

/* Header animation */
@keyframes erpFadeIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}

/* ======================================================================= 
   SIDEBAR (inc/nav.php) – DESKTOP + MOBILE + OPTION B-2
   ======================================================================= */

.side-bar{
  width:260px;
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  position:fixed;
  left:0;
  top:var(--header-height);
  height:calc(100vh - var(--header-height));
  padding-top:10px;
  transition:transform 0.28s ease, width 0.28s ease;
  overflow-y:auto;
  z-index:1500;
}

.side-bar::-webkit-scrollbar{
  width:5px;
}
.side-bar::-webkit-scrollbar-thumb{
  background:#444;
}

/* User panel */
.user-p{
  text-align:center;
  margin-bottom:25px;
  padding:0 12px;
}
.user-p img{
  width:84px;
  height:84px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--erp-purple);
  margin:0 auto;
}
.user-p h4{
  margin-top:12px;
  font-weight:500;
  color:var(--sidebar-text);
}

/* Nav list */
#navList{
  list-style:none;
  padding:0;
  margin:0;
}
#navList li{
  margin:8px 0;
}
#navList li a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  text-decoration:none;
  color:var(--sidebar-muted);
  font-size:15px;
  border-left:3px solid transparent;
  transition:0.25s ease;
  white-space:nowrap;
  overflow:hidden;
}
#navList li a i{
  width:24px;
  font-size:18px;
}
#navList li a:hover{
  background:var(--sidebar-light);
  color:#fff;
  border-left:3px solid var(--erp-purple);
}

/* Active from JS (index.php, etc.) */
#navList li.active a{
  background:var(--sidebar-light);
  color:#fff;
  border-left:3px solid var(--erp-purple);
}

/* ---------- OPTION B-2: DESKTOP MINI SIDEBAR (toggle via body.sidebar-mini) ---------- */

@media(min-width:901px){
  body.sidebar-mini .side-bar{
    width:72px;
  }

  body.sidebar-mini .section-1{
    margin-left:72px;
  }

  body.sidebar-mini .user-p img{
    width:48px;
    height:48px;
  }
  body.sidebar-mini .user-p h4{
    display:none;
  }

  body.sidebar-mini #navList li a{
    justify-content:center;
    padding-inline:14px;
  }
}

/* ---------- MOBILE SLIDE-IN SIDEBAR + OVERLAY ---------- */

.erp-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;
  visibility:hidden;
  transition:0.28s ease;
  z-index:1400;
}

.erp-overlay.visible{
  opacity:1;
  visibility:visible;
}

/* On mobile, sidebar is hidden off-canvas by default, slides in with .open */
@media(max-width:900px){
  .side-bar{
    transform:translateX(-100%);
  }
  .side-bar.open{
    transform:translateX(0);
  }

  .erp-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  body.mobile-active{
    overflow:hidden;
  }
}

/* ======================================================================= 
   MAIN LAYOUT (body + section-1)
   ======================================================================= */

.body{
  display:flex;
  margin-top:var(--header-height);
}

/* Main content area */
.section-1{
  flex:1;
  padding:25px;
  margin-left:260px; /* space for sidebar on desktop */
  transition:margin-left 0.28s ease, padding 0.28s ease;
  min-height:calc(100vh - var(--header-height));
}

/* Mobile / tablet – no fixed sidebar space */
@media(max-width:900px){
  .section-1{
    margin-left:0;
    padding:15px;
  }
}

/* ======================================================================= 
   SHARED TITLES, FORMS, INPUTS, BUTTONS
   ======================================================================= */

/* Page section title (Add User, Edit User, Edit Task, Notifications, etc.) */
.section-1 .title{
  font-size:24px;
  font-weight:700;
  margin-bottom:18px;
  color:var(--erp-purple);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.section-1 .title a{
  font-size:14px;
  background:var(--erp-purple);
  color:#fff;
  padding:6px 12px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  transition:0.2s ease;
}
.section-1 .title a:hover{
  background:var(--erp-purple-2);
}

/* Generic form card */
.form-1{
  background:#ffffff;
  padding:24px 24px 28px;
  border-radius:16px;
  border:1px solid #eadfff;
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
  max-width:680px;
}

/* Input wrapper */
.input-holder{
  margin-bottom:18px;
}

/* Label */
.input-holder label,
.input-holder lable{
  display:block;
  font-size:15px;
  margin-bottom:6px;
  color:var(--erp-dark);
  font-weight:600;
}

/* Text inputs */
.input-1{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:14px;
  transition:0.2s ease;
  background:#fafafa;
}

.input-1:focus{
  border-color:var(--erp-purple);
  background:#fff;
  outline:none;
  box-shadow:0 0 0 3px rgba(123,44,191,0.18);
}

/* Primary submit / action button (edit / save) */
.edit-btn{
  background:var(--erp-purple);
  color:#fff;
  padding:12px 22px;
  border-radius:10px;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:0.25s ease;
  display:inline-block;
}

.edit-btn:hover{
  background:var(--erp-purple-2);
  transform:translateY(-2px);
}

/* Success & error alert boxes */
.success, .danger{
  padding:12px 16px;
  border-radius:10px;
  margin-bottom:16px;
  font-weight:600;
  font-size:14px;
}

.success{
  background:#c7f6d4;
  color:#0a6330;
  border-left:6px solid #16a34a;
}

.danger{
  background:#ffd5d8;
  color:#b10013;
  border-left:6px solid #dc2626;
}

/* Forms – mobile tweaks */
@media(max-width:600px){
  .form-1{
    padding:20px;
    max-width:100%;
    width:100%;
  }
  .edit-btn{
    width:100%;
    text-align:center;
  }
  .section-1 .title{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}

/* ============================================================
   PREMIUM MODERN DASHBOARD UI (FINAL CLEAN VERSION)
============================================================ */

/* MAIN WRAPPER */
.dashboard-wrapper {
    background: #fff;
    padding: 28px;
    border-radius: 22px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.07);
    margin: 20px auto;
}

/* ==========================================
   TOP BAR
========================================== */
.dash-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.welcome-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
}

.top-right-controls {
    display: flex;
    align-items: center;
    gap: 18px;
}

.search-box {
    width: 260px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #dedede;
    border-radius: 12px;
    outline: none;
}

.notif-icon {
    font-size: 20px;
    color: #444;
    cursor: pointer;
}

.profile-pic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* ==========================================
   METRIC CARD ROW
========================================== */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 22px;
    margin-bottom: 30px;
}

.metric-card {
    padding: 22px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transition: 0.25s;
}

.metric-card:hover {
    transform: translateY(-6px);
}

/* COLOR VARIANTS */
.metric-card.purple  { background:#a66bff; }
.metric-card.red     { background:#ff6b6b; }
.metric-card.orange  { background:#ffb347; }
.metric-card.blue    { background:#4a90e2; }
.metric-card.pink    { background:#e66bff; }
.metric-card.violet  { background:#6a00f4; }
.metric-card.green   { background:#4caf50; }
.metric-card.teal    { background:#2bbbad; }

/* METRIC CARD CONTENT */
.metric-icon {
    font-size: 26px;
    opacity: 0.9;
    margin-bottom: 10px;
}

.metric-value {
    font-size: 30px;
    font-weight: 700;
}

.metric-label {
    font-size: 14px;
    opacity: 0.85;
}

/* ==========================================
   TABLE SECTION
========================================== */
.table-section {
    margin-top: 10px;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.dash-table thead {
    background: #f3f4ff;
}

.dash-table th,
.dash-table td {
    padding: 14px 18px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

.see-btn {
    background: #e8efff;
    border: none;
    padding: 6px 14px;
    border-radius: 10px;
    cursor: pointer;
}

/* ==========================================
   RESPONSIVE DESIGN
========================================== */
@media(max-width: 900px){
    .metrics-row {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media(max-width:768px){
    .metrics-row {
        grid-template-columns: repeat(2,1fr);
        gap: 18px;
    }
}

@media(max-width:480px){
    .dashboard-wrapper { padding: 20px; }
    .metrics-row { grid-template-columns: repeat(2,1fr); gap: 14px; }

    .metric-card {
        padding: 18px;
        border-radius: 16px;
    }

    .metric-value { font-size: 22px; }
    .metric-label { font-size: 12.5px; }
}

/* ======================================================================= 
   GENERIC BUTTON BASE (used in multiple pages)
   ======================================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:10px;
  border:none;
  background:var(--erp-purple);
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:0.2s ease;
}
.btn:hover{
  background:var(--erp-purple-2);
}

/* Small variant */
.btn.small{
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
}

/* Utility colors */
.btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.35);
}
.btn.danger{
  background:var(--danger);
}

/* Title + button (My Tasks, etc.) */
.title .btn{
  background:var(--erp-purple);
  color:#fff !important;
  padding:8px 16px;
  font-size:14px;
  border-radius:10px;
  font-weight:600;
}
.title .btn:hover{
  background:var(--erp-dark);
  transform:translateY(-2px);
}

@media(max-width:600px){
  .title .btn{
    margin-top:8px;
    display:inline-block;
  }
}

/* ========== LIVE SEARCH BOX ========== */
.live-search-box {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 6px 20px rgba(0,0,0,0.15);
    max-height: 220px;
    overflow-y: auto;
    display: none;
    z-index: 999;
}

.live-search-box div {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.live-search-box div:hover {
    background: #f4e7ff;
}

/* ======================================================================= 
   USERS PAGE (user.php)
   ======================================================================= */

.page-wrap{
  padding:20px;
}

/* Header of Manage Users */
.users-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
}

.users-header h2{
  margin:0;
  font-size:26px;
  color:var(--erp-dark);
  font-weight:700;
}

.add-user-btn{
  background:var(--erp-purple);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:6px;
}
.add-user-btn:hover{
  background:var(--erp-purple-2);
}

/* Filters */
.user-filters{
  display:flex;
  gap:12px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.filter-select,
.clear-btn,
#searchBox{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #dcd3ff;
  font-size:14px;
}

.clear-btn{
  background:#fff;
  color:var(--erp-purple);
  border:1px solid #dcd3ff;
}
.clear-btn:hover{
  background:var(--erp-purple);
  color:#fff;
}

/* Search box */
.search-box-wrapper{
  position:relative;
  flex:1;
  min-width:260px;
}
.search-box-wrapper i{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  color:#888;
}
#searchBox{
  padding-left:36px;
}

/* Suggestions list */
.suggestion-box{
  position:absolute;
  background:#fff;
  width:100%;
  top:42px;
  left:0;
  border:1px solid #ddd;
  border-radius:8px;
  display:none;
  z-index:40;
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
}
.suggestion-item{
  padding:10px;
  cursor:pointer;
}
.suggestion-item:hover{
  background:#f5efff;
}

/* Users grid */
.users-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:18px;
}

.user-card{
  background:#fff;
  border-radius:14px;
  padding:18px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
  border:1px solid #eadfff;
  transition:0.3s ease;
}
.user-card:hover{
  transform:translateY(-4px);
}

/* LEFT SIDE (avatar + info) */
.user-card-left{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.user-avatar{
  width:68px;
  height:68px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--erp-purple);
}

.user-name{
  margin:0;
  font-size:18px;
  font-weight:700;
}
.username{
  font-size:13px;
  color:#777;
}

/* Role pill */
.role-pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
  margin-top:6px;
  color:#fff;
}
.role-pill.admin{background:#e63946;}
.role-pill.manager{background:#0d6efd;}
.role-pill.staff{background:var(--erp-purple);}

.user-meta{
  margin-top:6px;
}
.user-meta p{
  font-size:13px;
  margin:2px 0;
}

/* RIGHT BUTTONS */
.user-btns{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Empty state */
.empty-state{
  padding:40px;
  font-size:18px;
  text-align:center;
  color:#666;
  grid-column:1/-1;
}

/* Responsive Users Page */
@media(max-width:768px){
  .users-header{
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
  }
  .user-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .user-btns{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
  }
  .user-avatar{
    width:55px;
    height:55px;
  }
}

/* ======================================================================= 
   TASKS PAGE (tasks.php)
   ======================================================================= */

/* Summary container */
.summary-container{
  background:#ffffff;
  border-radius:22px;
  padding:35px 40px;
  margin-bottom:35px;
  border:1px solid #e9dfff;
  box-shadow:0 10px 28px rgba(123,44,191,0.10);
}

/* Header row: profile & back link */
.summary-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.summary-left{
  display:flex;
  align-items:center;
  gap:22px;
}

.summary-photo img{
  width:110px;
  height:110px;
  border-radius:50%;
  border:5px solid #b88cff;
  object-fit:cover;
}

.summary-info h2{
  font-size:26px;
  font-weight:700;
  color:#4b1ca5;
  margin:0;
}

.summary-info .username{
  font-size:16px;
  color:#6d5f97;
  margin-left:6px;
}

.summary-info .role{
  background:#6A35FF;
  color:#fff;
  padding:5px 12px;
  border-radius:20px;
  font-size:13px;
  margin-left:10px;
  font-weight:600;
}

.back-link{
  font-size:17px;
  color:var(--erp-purple);
  font-weight:600;
  text-decoration:none;
}
.back-link:hover{ text-decoration:underline; }

/* Summary stats boxes */
.summary-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:30px;
}

.stat-box{
  flex:1;
  text-align:center;
  background:#ffffff;
  border-radius:18px;
  padding:18px 10px;
  box-shadow:0 6px 22px rgba(0,0,0,0.06);
  border-left:8px solid transparent;
}

.stat-green{border-left-color:#2ECC71;}
.stat-blue{border-left-color:#3498DB;}
.stat-red{border-left-color:#E74C3C;}
.stat-purple{border-left-color:#9B59B6;}

.stat-box h3{
  font-size:26px;
  margin-bottom:5px;
  font-weight:700;
}

.stat-box p{
  font-size:14px;
  color:#555;
  font-weight:600;
}

/* Responsive stats */
@media(max-width:850px){
  .summary-stats{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:480px){
  .summary-stats{
    grid-template-columns:1fr;
  }
  .summary-photo img{
    width:80px;
    height:80px;
  }
}
@media(max-width:600px){
  .summary-header a.back-link{
    margin-top:10px;
  }
}

/* Progress area */
.progress-area{
  margin-top:30px;
  background:#faf7ff;
  padding:22px;
  border-radius:18px;
  border:1px solid #e8d7ff;
}

.progress-bar-wrapper{
  margin-top:12px;
  width:100%;
  height:12px;
  background:#eadeff;
  border-radius:20px;
  overflow:hidden;
}
.progress-fill{
  height:12px;
  background:linear-gradient(90deg,#6A35FF,#A266FF);
  border-radius:20px;
}

/* Task toolbar */
.task-toolbar{
  background:#ffffff;
  padding:14px 18px;
  border-radius:14px;
  box-shadow:0 6px 22px rgba(0,0,0,0.06);
  border:1px solid #eadfff;
  margin-bottom:20px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.task-toolbar .small-btn{
  background:var(--erp-purple);
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  border:none;
  font-weight:600;
  box-shadow:0 6px 16px rgba(123,44,191,0.18);
}

.task-toolbar .small-btn.alt{
  background:#fff;
  color:var(--erp-purple);
  border:1px solid #e8d6ff;
}

@media(max-width:800px){
  .task-toolbar .small-btn{
    flex:1;
    min-width:150px;
  }
}

/* Task table view */
.main-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
}

.main-table thead th{
  background:var(--erp-purple);
  color:#fff;
  padding:14px 10px;
  border:none;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.main-table tbody tr{
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  border-radius:14px;
}
.main-table tbody tr td{
  padding:14px 12px;
  border-bottom:none !important;
  font-size:15px;
  color:#333;
}

/* Rounded edges */
.main-table tbody tr td:first-child{
  border-radius:14px 0 0 14px;
}
.main-table tbody tr td:last-child{
  border-radius:0 14px 14px 0;
}

/* Priority badges */
.priority-badge{
  padding:6px 12px !important;
  border-radius:30px !important;
  font-size:13px !important;
  color:#fff;
  text-transform:capitalize;
}
.priority-badge.low{background:#B8B8B8;}
.priority-badge.medium{background:#597DFF;}
.priority-badge.high{background:#FF8F2F;}
.priority-badge.urgent{background:#E63946;}

/* Edit/Delete buttons */
.edit-btn.table,
.delete-btn{
  padding:8px 12px !important;
  border-radius:8px !important;
  font-size:13px !important;
  font-weight:600 !important;
  text-decoration:none;
}
.edit-btn.table{background:var(--erp-purple);color:#fff;}
.edit-btn.table:hover{background:var(--erp-purple-2);}
.delete-btn{background:#e63946;color:#fff;}
.delete-btn:hover{background:#c82733;}

/* Table responsiveness */
@media(max-width:900px){
  .main-table thead{display:none;}
  .main-table tbody tr{
    display:block;
    margin-bottom:14px;
    padding:14px;
  }
  .main-table td{
    display:flex;
    justify-content:space-between;
    padding:10px 6px;
    border-bottom:1px solid #eee !important;
    font-size:14px;
  }
  .main-table td:last-child{
    border-bottom:none !important;
  }
  .main-table td::before{
    content:attr(data-label);
    font-weight:600;
    color:var(--erp-dark);
    margin-right:10px;
  }
}

/* Task card view */
.task-cards-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:18px;
  margin-top:20px;
}

.task-card{
  background:#fff;
  padding:18px;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
  border:1px solid #eadfff;
  position:relative;
  overflow:hidden;
  transition:.2s ease;
}
.task-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,0.10);
}

/* Ribbon */
.priority-ribbon{
  position:absolute;
  top:14px;
  right:-38px;
  width:140px;
  text-align:center;
  color:#fff;
  font-weight:700;
  transform:rotate(45deg);
  padding:6px 0;
  font-size:12px;
}
.priority-ribbon.low{background:#6c757d;}
.priority-ribbon.medium{background:#0d6efd;}
.priority-ribbon.high{background:#fd7e14;}
.priority-ribbon.urgent{background:#e63946;}

.tc-title{
  font-size:18px;
  font-weight:700;
  color:#3c246f;
  margin-bottom:8px;
}

.tc-desc{
  font-size:14px;
  color:#666;
  margin-bottom:12px;
  height:40px;
  overflow:hidden;
}

.tc-meta-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:14px;
}

.tc-status{
  display:inline-block;
  margin-top:8px;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:700;
  text-transform:capitalize;
}
.tc-status.pending{background:#ffe8a3;color:#7d5200;}
.tc-status.completed{background:#c7f6d4;color:#0a6530;}
.tc-status.overdue{background:#ffd5d8;color:#b10013;}

.tc-actions{
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  gap:10px;
}

.tc-btn{
  padding:8px 14px;
  border-radius:8px;
  font-size:14px;
  text-decoration:none;
  font-weight:600;
  transition:.2s;
  text-align:center;
  flex:1;
}
.tc-btn.edit{
  background:var(--erp-purple);
  color:#fff;
}
.tc-btn.edit:hover{
  background:var(--erp-purple-2);
}
.tc-btn.delete{
  background:#e63946;
  color:#fff;
}
.tc-btn.delete:hover{
  background:#c82733;
}

@media(max-width:480px){
  .task-cards-wrapper{
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  }
}

/* =================================================================== 
   CREATE TASK PAGE – MODERN ERP FORM
   =================================================================== */

.task-wrapper{
  max-width:820px;
  background:#fff;
  padding:32px;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(123,44,191,0.12);
  border:1px solid #eadfff;
  margin-top:20px;
}

.task-label{
  font-weight:600;
  margin-bottom:6px;
  display:block;
  color:var(--erp-dark);
  font-size:15px;
}

.input-modern{
  width:100%;
  padding:12px 14px;
  background:#faf8ff;
  border-radius:12px;
  border:1px solid #d9c8ff;
  outline:none;
  font-size:15px;
  transition:.25s;
}
.input-modern:focus{
  border-color:var(--erp-purple);
  box-shadow:0 0 0 3px rgba(123,44,191,0.22);
}

.textarea-modern{
  min-height:140px;
  resize:vertical;
  border-radius:12px !important;
}

.task-grid,
.task-grid-2{
  display:grid;
  gap:16px;
  margin-bottom:20px;
}
.task-grid{
  grid-template-columns:repeat(3,1fr);
}
.task-grid-2{
  grid-template-columns:repeat(2,1fr);
}

.full-width{
  grid-column:1 / -1;
}

.btn-create{
  width:100%;
  background:linear-gradient(90deg,var(--erp-purple),var(--erp-purple-2));
  padding:14px 20px;
  border:none;
  border-radius:12px;
  color:#fff;
  font-size:16px;
  font-weight:600;
  margin-top:5px;
  cursor:pointer;
  transition:.25s ease;
  box-shadow:0 6px 20px rgba(124,58,237,0.25);
}
.btn-create:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(124,58,237,0.35);
}

.auto-assigned-note{
  background:#f3f0ff;
  padding:12px 14px;
  border-radius:10px;
  border-left:4px solid var(--erp-purple);
  font-size:14px;
  color:#5a1a9e;
}

@media(max-width:900px){
  .task-grid{grid-template-columns:1fr;}
  .task-grid-2{grid-template-columns:1fr;}
  .task-wrapper{padding:22px;}
}

/* =================================================================== 
   EDIT TASK PAGE (Employee)
   =================================================================== */

.erp-card{
  background:#ffffff;
  padding:28px 28px 32px;
  border-radius:18px;
  border:1px solid #eadfff;
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
  max-width:680px;
}

.erp-title-xl,
.erp-title{
  font-size:24px;
  font-weight:700;
  color:var(--erp-purple);
  margin-bottom:16px;
}

.erp-card p{
  font-size:15px;
  margin:8px 0;
  color:#444;
}

.task-preview{
  width:120px;
  height:auto;
  border-radius:12px;
  margin-top:8px;
  border:2px solid #ece3ff;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.update-btn{
  background:var(--erp-purple);
  color:#fff;
  padding:12px 22px;
  border-radius:10px;
  border:none;
  font-weight:600;
  cursor:pointer;
  margin-top:14px;
  transition:.25s ease;
  width:100%;
  box-shadow:0 6px 16px rgba(123,44,191,0.20);
}
.update-btn:hover{
  background:var(--erp-purple-2);
  transform:translateY(-2px);
}

.back-btn{
  display:inline-block;
  margin-top:16px;
  color:var(--erp-purple);
  font-weight:600;
  text-decoration:none;
  background:#f6f0ff;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid #eadfff;
  transition:.2s;
}
.back-btn:hover{
  background:var(--erp-purple);
  color:#fff;
}

#progressWrapper{display:none;}

@media(max-width:600px){
  .erp-card{
    padding:20px;
    width:100%;
  }
  .update-btn{
    width:100%;
  }
  .task-preview{
    width:90px;
  }
}


/* =================================================================== 
   ADMIN EDIT TASK PAGE – Priority flags
   =================================================================== */

.priority-flags{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:8px;
  margin-bottom:18px;
}

.priority-option{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:15px;
  color:#444;
}
.priority-option input{
  transform:scale(1.2);
  cursor:pointer;
}

/* Colored flags */
.flag{
  width:18px;
  height:18px;
  border-radius:4px;
  display:inline-block;
}
.flag-urgent{background:#dc3545;}
.flag-high{background:#fd7e14;}
.flag-medium{background:#0d6efd;}
.flag-low{background:#6c757d;}

textarea.input-1{
  resize:vertical;
  border-radius:12px;
  padding-top:12px;
  min-height:120px;
}

/* =================================================================== 
   FORGOT PASSWORD PAGE
   =================================================================== */

.forgot-wrap{
  max-width:480px;
  background:#fff;
  padding:32px 28px;
  margin:25px auto;
  border-radius:18px;
  border:1px solid #eadfff;
  box-shadow:0 10px 28px rgba(123,44,191,0.10);
}

.forgot-wrap h2{
  font-size:26px;
  font-weight:700;
  color:var(--erp-purple);
  margin-bottom:10px;
}

.forgot-wrap p{
  font-size:15px;
  color:#555;
  margin-bottom:20px;
}

.forgot-wrap label{
  font-weight:600;
  margin-bottom:6px;
  color:var(--erp-dark);
  display:block;
}

.forgot-wrap input[type="text"],
.forgot-wrap input[type="email"]{
  width:100%;
  padding:14px 16px;
  border:1px solid #d8c9f8;
  background:#faf7ff;
  border-radius:12px;
  font-size:15px;
  outline:none;
  transition:.25s;
}
.forgot-wrap input:focus{
  border-color:var(--erp-purple);
  box-shadow:0 0 0 3px rgba(123,44,191,0.18);
  background:#fff;
}

/* Submit Button */
.btn-erp{
  width:100%;
  background:linear-gradient(90deg,#7B2CBF,#9D4EDD);
  border:none;
  padding:14px 20px;
  color:#fff;
  border-radius:12px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(123,44,191,0.20);
  transition:.25s ease;
}
.btn-erp:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(123,44,191,0.30);
}

/* Messages */
.msg-error, .msg-success{
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:12px;
}
.msg-error{
  background:#ffe5e5;
  color:#c70000;
  border-left:5px solid #c70000;
}
.msg-success{
  background:#e5ffe9;
  color:#177d39;
  border-left:5px solid #16a34a;
}

/* Link Back to Login */
.forgot-wrap a{
  color:var(--erp-purple);
  text-decoration:none;
  font-weight:600;
}
.forgot-wrap a:hover{
  text-decoration:underline;
}

@media(max-width:600px){
  .forgot-wrap{
    padding:22px;
    margin:15px;
  }
  .forgot-wrap h2{
    font-size:22px;
  }
}

/* ============================================================ 
   LOGIN PAGE — ERP PURPLE THEME
   ============================================================ */

.login-body{
  background:linear-gradient(135deg,#7B2CBF,#5A1A9E);
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  padding:20px;
}

.login-card{
  width:100%;
  max-width:420px;
  padding:40px 35px;
  background:rgba(255,255,255,0.88);
  border-radius:16px;
  box-shadow:0 6px 30px rgba(0,0,0,0.25);
  backdrop-filter:blur(10px);
  animation:fadeInLogin 0.4s ease-out;
}

.login-card h3{
  font-size:28px;
  font-weight:700;
  color:#5A1A9E;
  text-align:center;
  margin-bottom:5px;
}

.login-card p{
  text-align:center;
  color:#666;
  margin-bottom:25px;
}

.login-input{
  width:100%;
  padding:12px 14px;
  border:1px solid #bbb;
  border-radius:8px;
  margin-bottom:15px;
  font-size:15px;
  transition:0.25s;
}
.login-input:focus{
  border-color:#7B2CBF;
  box-shadow:0 0 0 3px rgba(123,44,191,0.25);
  outline:none;
}

.login-btn{
  width:100%;
  padding:12px;
  border-radius:10px;
  background:#7B2CBF;
  border:none;
  color:white;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
  margin-top:5px;
}
.login-btn:hover{
  background:#9D4EDD;
}

/* Login messages */
.msg-error-login{
  background:#ffe6e6;
  border-left:5px solid #d60000;
  border-radius:6px;
  padding:10px;
  margin-bottom:15px;
}
.msg-success-login{
  background:#e6ffef;
  border-left:5px solid #1fad5c;
  border-radius:6px;
  padding:10px;
  margin-bottom:15px;
}

@keyframes fadeInLogin{
  from{opacity:0;transform:translateY(15px);}
  to{opacity:1;transform:translateY(0);}
}

/* Logo */
.login-logo{
  width:70px;
  height:70px;
  border-radius:12px;
  object-fit:cover;
  margin:0 auto 16px;
  display:block;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* =================================================================== 
   IMAGE POPUP VIEWER
   =================================================================== */

.task-thumb{
  width:50px;
  height:50px;
  border-radius:8px;
  object-fit:cover;
  cursor:pointer;
  transition:.2s;
  border:2px solid #e5d9ff;
  box-shadow:0 3px 8px rgba(0,0,0,0.10);
}
.task-thumb:hover{
  transform:scale(1.07);
}

.image-popup{
  display:none;
  position:fixed;
  z-index:2000;
  inset:0;
  background:rgba(0,0,0,0.75);
  justify-content:center;
  align-items:center;
  padding:20px;
}

.image-popup img{
  max-width:90%;
  max-height:90%;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,0.30);
  animation:fadeInPopup .25s ease;
}

/* Close button */
.close-btn{
  position:absolute;
  top:20px;
  right:25px;
  font-size:38px;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  z-index:2100;
  transition:.25s;
}
.close-btn:hover{
  color:var(--erp-purple-2);
}

@keyframes fadeInPopup{
  from{opacity:0;transform:scale(0.97);}
  to{opacity:1;transform:scale(1);}
}

/* =================================================================== 
   NOTIFICATIONS PAGE
   =================================================================== */

.notifications-empty{
  text-align:center;
  padding:25px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
  color:var(--muted);
  font-size:16px;
  font-weight:500;
}

/* Notification type badge */
.nt-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:18px;
  font-weight:600;
  font-size:13px;
  text-transform:capitalize;
}
.nt-task{background:#7B2CBF;color:#fff;}
.nt-alert{background:#E63946;color:#fff;}
.nt-info{background:#3498DB;color:#fff;}
.nt-update{background:#FF8F2F;color:#fff;}

.unread-row{
  background:#f6f0ff !important;
  border-left:4px solid var(--erp-purple);
}

/* Notifications table tweaks */
.main-table th{
  background:var(--erp-purple) !important;
  color:#fff !important;
  font-weight:600;
}
.main-table td{
  font-size:15px;
  vertical-align:middle;
}
.main-table tr:hover{
  background:#fbf8ff;
  transition:.2s;
}

.notification-date{
  color:var(--muted);
  font-weight:500;
}

.nt-msg{
  font-weight:600;
  color:#4a1ca0;
}
.nt-important{
  color:#E63946;
  font-weight:700;
}

/* =================================================================== 
   PERFORMANCE DASHBOARD
   =================================================================== */

.perf-wrap{
  padding:28px;
  margin-top:var(--header-height);
  max-width:1280px;
  margin-inline:auto;
}

.perf-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

.perf-user-photo img{
  width:95px;
  height:95px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid rgba(124,58,237,0.15);
  box-shadow:0 8px 20px rgba(124,58,237,0.15);
}

.perf-user-info h1{
  font-size:20px;
  font-weight:700;
  color:#2b0b63;
  margin:0;
}

.perf-user-meta{
  color:var(--muted);
  font-size:14px;
  margin-top:4px;
}

/* Toolbar Buttons */
.small-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.small-toolbar .btn{
  padding:8px 16px;
  border-radius:10px;
  background:var(--erp-purple);
  color:#fff;
  font-weight:600;
  border:none;
  box-shadow:0 4px 16px rgba(124,58,237,0.24);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:0.25s ease;
}
.small-toolbar .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(124,58,237,0.3);
}
.small-toolbar .btn.alt{
  background:#fff;
  border:1px solid #e8d6ff;
  color:var(--erp-purple);
  box-shadow:none;
}
.small-toolbar .btn.alt:hover{
  background:#faf5ff;
}

/* KPI Grid */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:20px;
}

.kpi{
  background:#fff;
  border-radius:14px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

.kpi .icon{
  width:54px;
  height:54px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}

.kpi h3{
  font-size:14px;
  color:var(--muted);
  margin:0;
}

.kpi .val{
  font-size:20px;
  font-weight:800;
  margin-top:2px;
  color:#2b0b63;
}

/* KPI Colors */
.kpi.complete .icon{background:linear-gradient(135deg,#16a34a,#4ade80);}
.kpi.pending .icon{background:linear-gradient(135deg,#2563eb,#60a5fa);}
.kpi.overdue .icon{background:linear-gradient(135deg,#dc2626,#fb7185);}
.kpi.nodead .icon{background:linear-gradient(135deg,#7c3aed,#a78bfa);}

/* Performance Layout */
.perf-grid{
  display:grid;
  grid-template-columns:350px 1fr;
  gap:24px;
  margin-top:24px;
}

.left-card,
.right-card{
  background:#fff;
  padding:20px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

/* Metrics */
/* ============================================================
   ULTRA-COMPACT DASHBOARD CARDS — FIXED NO-EMPTY-SPACE VERSION
============================================================ */

.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
    justify-content: start;
    gap: 10px;
    margin-bottom: 20px;
}

/* Compact auto-size card */
.metric-card {
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transition: 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    height: auto;
    color: #fff;

    /* 💡 Removes width forcing — the main fix */
    width: auto;
    min-width: 120px;

    background-size: 140% 140%;
    animation: gradientShift 6s ease infinite;
}

.metric-card:hover {
    transform: translateY(-3px);
}

/* Fix sizing on small screens */
@media(max-width: 600px){
    .metrics-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Very small screens */
@media(max-width: 420px){
    .metrics-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .metric-card {
        min-width: auto; /* ensure fit */
        padding: 12px;
    }
}


/* Heatmap */
.heatmap table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.heatmap th,
.heatmap td{
  padding:8px;
  border:1px solid #e8e1f8;
  text-align:center;
  font-size:13px;
}

.heatmap .zero{background:#fff;color:#666;}
.heatmap .low{background:#eef4ff;}
.heatmap .mid{background:#dbeafe;}
.heatmap .high{background:#c7f9d2;}

/* Productivity Bar */
.productivity-bar{
  height:12px;
  background:#eee;
  border-radius:12px;
  overflow:hidden;
}

.productivity-fill{
  height:100%;
  background:linear-gradient(90deg,#f59e0b,#fb923c);
}

/* Badges */
.badge{
  display:inline-block;
  background:#fb923c;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  color:#fff;
}
.badge.platinum{background:#E5E4E2;color:black;}
.badge.gold{background:#f59e0b;}
.badge.silver{background:#94a3b8;}
.badge.bronze{background:#fb923c;}

/* Charts */
.charts-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.chart-card{
  padding:14px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

.chart-title{
  margin:0 0 10px 0;
  font-size:15px;
  color:#4b0082;
  font-weight:700;
}

/* Performance responsive */
@media(max-width:1100px){
  .perf-grid{grid-template-columns:1fr;}
  .charts-grid{grid-template-columns:1fr;}
}
@media(max-width:800px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .kpi-grid{grid-template-columns:1fr;}
}

/* ====================================================================== 
   PROFILE PAGE
   ====================================================================== */

.profile-card{
  max-width:420px;
  background:#fff;
  padding:25px;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(124,58,237,0.12);
  border:1px solid #e9dcff;
}

.profile-table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
}

.profile-table td{
  padding:10px 12px;
  font-size:15px;
  border-bottom:1px solid #f1e8ff;
}

.profile-table tr:last-child td{
  border-bottom:none;
}

.profile-table td:first-child{
  font-weight:600;
  color:#5a1a9e;
  width:40%;
}

.profile-table td:last-child{
  color:#333;
}

@media(max-width:600px){
  .profile-card{
    width:100%;
    padding:18px;
  }
  .profile-table td{
    padding:8px 6px;
    font-size:14px;
  }
}

/* ==========================================================
   FIXED & UNIFIED SIDEBAR SYSTEM
========================================================== */

/* Desktop sidebar (permanent) */
.side-bar {
    width: 260px;
    height: 100vh;
    background: var(--sidebar-bg);
    position: fixed;
    top: 0;
    left: 0;
    padding-top: calc(var(--header-height) + 10px);
    overflow-y: auto;
    z-index: 1500;
    transition: transform .28s ease;
}

/* Mobile: hidden by default */
@media(max-width: 900px) {
    .side-bar {
        transform: translateX(-100%);
    }
    .side-bar.open {
        transform: translateX(0%);
    }
}

/* Overlay */
.erp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
    z-index: 1400;
}
.erp-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Main content shift fix */
@media(max-width: 900px){
    .section-1 {
        margin-left: 0 !important;
    }
}

/* Ensure header always above sidebar */
.erp-header {
    z-index: 2001 !important;
}

/* Toggle button visible only on mobile */
@media(max-width: 900px){
    .erp-toggle {
        display: inline-flex !important;
    }
}
/* View Switch Buttons */
.view-switch {
    display: flex;
    gap: 12px;
    margin: 15px 0 25px 0;
}

.view-btn {
    padding: 8px 18px;
    border-radius: 8px;
    background: #ffffff;
    border: 2px solid var(--erp-purple);
    color: var(--erp-purple);
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
    font-size: 14px;
}

.view-btn:hover {
    background: var(--erp-purple);
    color: #fff;
    transform: translateY(-2px);
}

.view-btn.active {
    background: var(--erp-purple);
    color: white;
    border-color: var(--erp-purple);
    box-shadow: 0 4px 12px rgba(123, 44, 191, 0.35);
}

/* Footer aligned with main-content */
.erp-footer {
    margin-left: 260px;          /* same as sidebar width */
    background: #f5f5f5;
    padding: 18px 0;
    text-align: center;
    border-top: 1px solid #ddd;
}

/* When sidebar is collapsed */
.body.sidebar-collapsed .erp-footer {
    margin-left: 70px;           /* collapsed sidebar width */
}

/* When sidebar is hidden on mobile */
@media(max-width: 768px) {
    .erp-footer {
        margin-left: 0 !important;
    }
}

.footer-inner {
    font-size: 14px;
    color: #555;
}
.footer-small {
    font-size: 12px;
    color: #888;
}
/* Notification Dropdown */
.notif-dropdown {
    width: 320px;
    background: #ffffff;
    color: #333;
    position: absolute;
    top: 55px;
    right: 10px;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    display: none;
    overflow: hidden;
    z-index: 5000;
}

.notif-header {
    padding: 14px 18px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid #eee;
    background: #f8f8ff;
}

.notif-list {
    max-height: 320px;
    overflow-y: auto;
}

.notif-item {
    padding: 12px 18px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.notif-item:hover {
    background: #f5f5ff;
}

.notif-message {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #333;
}

.notif-time {
    font-size: 12px;
    color: #777;
}

.notif-empty {
    padding: 18px;
    text-align: center;
    color: #777;
}

/* ================================
   PREMIUM UI UPGRADE — SETTINGS
================================ */

.animated-fadein { animation: fadein .5s ease; }
@keyframes fadein { from{opacity:0; transform:translateY(10px);} to{opacity:1;} }

.premium-grid { display:flex; gap:24px; flex-wrap:wrap; }
.premium-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.premium-card {
    background:#fff;
    padding:22px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.photo-card { width:280px; text-align:center; }
.info-card { flex:1; }

.shadow-soft { box-shadow:0 4px 14px rgba(0,0,0,0.08); }

.settings-label { font-weight:600; color:#444; margin-bottom:3px; display:block; }

.premium-input {
    border:1px solid #ddd;
    border-radius:12px;
    padding:10px 14px;
}

.settings-btn.primary {
    background:linear-gradient(90deg,#7B2CBF,#9D4EDD);
    color:#fff;
    border-radius:12px;
    padding:10px 16px;
    border:0;
    cursor:pointer;
}

.settings-btn.danger {
    background:#e53935;
    color:#fff;
    border-radius:12px;
}

.alert {
    padding:10px 14px;
    border-radius:10px;
    margin-bottom:8px;
    font-size:14px;
}
.alert.error { background:#ffe1e1; color:#b30000; }
.alert.success { background:#e9ffe9; color:#047c3f; }

.divider { border:0; border-top:1px solid #eee; margin:18px 0; }
.verified-tag { background:#d1ffd8; padding:3px 8px; border-radius:8px; color:#0a7a26; font-size:11px; }
/* ==========================================================
   SUPER PREMIUM SETTINGS UI
========================================================== */

.fade-in-up { 
    animation: fadeinUp .45s ease both;
}
@keyframes fadeinUp {
    from { opacity:0; transform: translateY(12px); }
    to   { opacity:1; transform: translateY(0); }
}

.settings-container { max-width:1150px; margin:auto; }

.settings-header { margin-bottom:26px; }
.settings-title { font-size:28px; font-weight:700; color:#222; }
.settings-subtitle { color:#666; margin-top:5px; }

.alert-box {
    padding:12px 16px; 
    border-radius:12px;
    margin-bottom:12px;
    font-size:14px;
    display:flex; 
    align-items:center;
    gap:8px;
}
.alert-box.error { background:#ffe0e0; color:#b60606; }
.alert-box.success { background:#e6ffe6; color:#0d7f3b; }

.settings-main-grid {
    display:flex;
    gap:24px;
    flex-wrap:wrap;
}

.settings-card {
    background:#fff;
    padding:22px;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,0.06);
}

.settings-profile-card {
    width:290px;
    text-align:center;
}

.avatar-wrapper {
    position:relative;
    width:120px;
    height:120px;
    margin: auto;
}
.avatar-ring {
    position:absolute;
    inset:0;
    border-radius:50%;
    border:3px solid #7B2CBF;
    opacity:.3;
}
.avatar-photo {
    width:100%; 
    height:100%; 
    border-radius:50%; 
    object-fit:cover;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.username-display {
    margin-top:12px; 
    font-size:18px; 
    font-weight:700;
}

.fullname-display { 
    font-size:14px; 
    color:#777; 
}

.input-label {
    font-weight:600; 
    margin-bottom:5px; 
    display:block;
}

.input-field, .input-file {
    width:100%;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid #ddd;
    background:#fafafa;
    transition:.2s;
}
.input-field:focus {
    border-color:#7B2CBF;
    background:#fff;
}

.settings-right-column {
    flex:1;
    min-width:320px;
}

.section-title {
    font-size:18px;
    font-weight:600;
    margin-bottom:12px;
    color:#333;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    border-radius:12px;
    cursor:pointer;
    border:none;
    font-weight:600;
}
.btn.primary {
    background:linear-gradient(90deg,#7B2CBF,#9D4EDD);
    color:white;
}
.btn.danger {
    background:#e53935;
    color:white;
}
.btn.full {
    width:100%;
}

.settings-grid-2 {
    display:grid;
    gap:20px;
    grid-template-columns:1fr 1fr;
}

.mini-title { font-weight:600; font-size:15px; margin-bottom:6px; }

.contact-current { color:#444; margin-bottom:6px; }

.verified-tag {
    background:#d8ffe0;
    padding:3px 8px;
    border-radius:8px;
    color:#0f7c2f;
    font-size:11px;
}

.otp-box {
    background:#faf6ff;
    border:1px solid #ecd8ff;
    padding:18px;
    border-radius:12px;
}

/* ===========================================
   MOBILE-FIRST NOTIFICATION DRAWER (FINAL)
=========================================== */
/* ==========================================================
   NOTIFICATION DROPDOWN (Desktop + Mobile Optimized)
   Matches Inworks ERP UI Theme
========================================================== */

/* Parent dropdown container */
.notif-dropdown {
    position: absolute;
    top: 58px;
    right: 0;
    width: 350px;
    max-height: 450px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border: 1px solid #eee;
    display: none;
    z-index: 9999;
    overflow: hidden;
    animation: fadeInDrop 0.25s ease-out;
}

/* Smooth dropdown animation */
@keyframes fadeInDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header */
.notif-header {
    background: #6b28e6;       /* Purple theme */
    color: #fff;
    padding: 14px 18px;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Notification list container */
.notif-list {
    max-height: 380px;
    overflow-y: auto;
    padding: 0;
}

/* Scrollbar styling */
.notif-list::-webkit-scrollbar {
    width: 6px;
}
.notif-list::-webkit-scrollbar-thumb {
    background: rgba(120, 54, 240, 0.6);
    border-radius: 8px;
}
.notif-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Individual notification item */
.notif-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notif-item:hover {
    background: #f7f3ff;   /* light purple hover */
}

/* Unread bubble highlight */
.notif-item.unread {
    background: #f2ebff;
    border-left: 4px solid #8e3ffc;
}

/* Notification text */
.notif-message {
    font-size: 15px;
    font-weight: 500;
    color: #2d2d2d;
    margin-bottom: 4px;
    line-height: 1.4;
}

/* Date and time */
.notif-time {
    font-size: 12px;
    color: #777;
}

/* Empty state */
.notif-empty {
    text-align: center;
    padding: 25px 10px;
    color: #666;
    font-size: 15px;
}

/* Divider (if used dynamically) */
.notif-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 0;
}

/* ==========================================================
   MOBILE RESPONSIVE DROPDOWN (FULL WIDTH SLIDE PANEL)
========================================================== */

@media (max-width: 768px) {

    .notif-dropdown {
        position: fixed;
        top: 0;
        right: -100%;
        padding-right: 150px;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        border-radius: 0;
        box-shadow: -4px 0 18px rgba(0,0,0,0.25);
        animation: none;
        transition: right 0.25s ease-out;
    }

    .notif-dropdown.open {
        right: 0;
    }

    .notif-header {
        padding: 18px;
        font-size: 18px;
    }

    .notif-list {
        height: calc(100vh - 70px);
        max-height: none;
        overflow-y: auto;
    }

    /* Dark overlay behind panel */
    #notifOverlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(2px);
        z-index: 9998;
    }

    #notifOverlay.active {
        display: block;
    }
}

/* ===============================
   FORCE NOTIFICATION DOT VISIBILITY
   =============================== */

/* Ensure button allows absolute children */
.erp-icon,
.notif-btn {
    position: relative !important;
    overflow: visible !important;
}

/* =========================================
   Unread dot inside notification dropdown
========================================= */

/* Make notif item relative */
.notif-item {
    position: relative;
    padding-right: 36px; /* space for dot */
}

/* Green dot for unread notifications */
.notif-item.unread::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    background: #22c55e; /* green */
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ffffff;
}