:root {
            --body-background:#EBEEF3;
            --white:#FFFFFF;
            --neutral:#5D7590;
            --theme-primary:#E2771C;

            --color-red-600: #FF0052;

        /* Color code  */
            /* Neutral Colors */
            --neutral-white: #ffffff;

            --neutral-50: #f6f7f9;
            --neutral-100: #ebeef3;
            --neutral-200: #d3dae4;
            --neutral-300: #adbbcc;
            --neutral-400: #8197af;
            --neutral-500: #5d7590;
            --neutral-600: #4d627c;
            --neutral-700: #3f5065; /* Base */
            --neutral-800: #374455;
            --neutral-900: #313b49;
            --neutral-950: #212730;

            --neutral-black: #000000;

            /* Primary Colors */
            --primary-50: #fdf7ed;
            --primary-100: #fae8cb;
            --primary-200: #f4d193;
            --primary-300: #efb35a;
            --primary-400: #ea9935;
            --primary-500: #e2771c; /* Base */
            --primary-600: #c95816;
            --primary-700: #a73d16;
            --primary-800: #882f18;
            --primary-900: #702817;
            --primary-950: #401308;

            /* Secondary Colors */
            --secondary-50: #f6f5f5;
            --secondary-100: #e7e6e6;
            --secondary-200: #d2d0cf;
            --secondary-300: #b2afae;
            --secondary-400: #8b8785;
            --secondary-500: #706c6a;
            --secondary-600: #605c5a;
            --secondary-700: #514f4d;
            --secondary-800: #464444;
            --secondary-900: #3e3d3b;
            --secondary-950: #2b2a29; /* Base */

            /* F - Yellow Colors */
            --f-yellow-50: #fffbea;
            --f-yellow-100: #fff1c5;
            --f-yellow-200: #ffe385;
            --f-yellow-300: #ffcd46;
            --f-yellow-400: #ffb71b;
            --f-yellow-500: #ff9300; /* Base */
            --f-yellow-600: #e26c00;
            --f-yellow-700: #bb4802;
            --f-yellow-800: #983808;
            --f-yellow-900: #7c2e0b;
            --f-yellow-950: #481500;

            /* F - Blue Colors */
            --f-blue-50: #edfaff;
            --f-blue-100: #d6f3ff;
            --f-blue-200: #b5ecff;
            --f-blue-300: #83e2ff;
            --f-blue-400: #48d0ff;
            --f-blue-500: #1eb2ff;
            --f-blue-600: #0695ff;
            --f-blue-700: #0081ff; /* Base */
            --f-blue-800: #0862c5;
            --f-blue-900: #0d559b;
            --f-blue-950: #0e335d;

            /* F - Green Colors */
            --f-green-50: #eafff4;
            --f-green-100: #cdfee3;
            --f-green-200: #a0facd;
            --f-green-300: #63f2b2;
            --f-green-400: #25e294;
            --f-green-500: #00bf77;
            --f-green-600: #00a467; /* Base */
            --f-green-700: #008356;
            --f-green-800: #006745;
            --f-green-900: #00553a;
            --f-green-950: #003022;

            /* F - Red Colors */
            --f-red-50: #ffeff2;
            --f-red-100: #ffe0e6;
            --f-red-200: #ffc6d4;
            --f-red-300: #ff97b0;
            --f-red-400: #ff5d87;
            --f-red-500: #ff2462;
            --f-red-600: #ff0052; /* Base */
            --f-red-700: #d70045;
            --f-red-800: #b40042;
            --f-red-900: #99023f;
            --f-red-950: #57001d;

            --radius-none: 0px;
            --radius-sm: 2px;
            --radius-md: 4px;
            --radius-lg: 8px;
            --radius-xl: 12px;
            --radius-2xl: 16px;
            --radius-3xl: 24px;
            --radius-4xl: 32px;
            --radius-5xl: 48px;
            --radius-full: 999px;

            --icon-width-normal:20px;
            --icon-height-normal:20px;

            /* Base font family */
            --font-family-base: "Be Vietnam Pro", Helvetica;

            /* Title Sizes */
            --font-title-1-size: 64px;
            --font-title-2-size: 40px;
            --font-title-3-size: 32px;

            /* Headings */
            --font-h1-size: 28px;
            --font-h2-size: 26px;
            --font-h3-size: 24px;
            --font-h4-size: 20px;

            /* Labels */
            --font-label-1-size: 17px;
            --font-label-2-size: 15px;
            --font-label-3-size: 13px;
            --font-label-4-size: 12px;
            --font-label-5-size: 11px;

            /* Body */
            --font-body-1-size: 16px;
            --font-body-2-size: 14px;
            --font-body-3-size: 12px;

            /* Tiny & Micro */
            --font-tiny-size: 10px;
            --font-micro-size: 9px;

            /* Common weights */
            --font-weight-regular: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;

            /* Common line heights */
            --line-tight: 1.2;
            --line-normal: 1.4;
            --line-loose: 1.6;

            /* Utility mix variables */
            --letter-spacing-normal: 0px;
            --letter-spacing-wide: 1px;
    } 

    *{
        line-height: 20px;
        font-family: "Be Vietnam Pro", sans-serif;
    }

      .white-icon{
        font-size: 28px;
        padding: 8px;
        border-radius: var(--radius-lg);
        background-color: var(--neutral-white);
      }

      .briefcase-color{
        color: var(--f-blue-600);
      }
      .coffee-color{
        color: var(--primary-600);
      }
      .clock-user-color{
        color: var(--f-green-600);
      }
      .clock-afternoon-color{
        color: var(--f-red-600);
      }

      .form-check-input:checked {
        background-color: var(--primary-500);
        border-color: var(--primary-500);
      }
      .form-check-input:focus {
      border-color: var(--primary-500);
      outline: 0;
      box-shadow: 0 0 0 .25rem rgba(226, 120, 28, 0.25); 
      }
    
    body {
        overflow-x: hidden;
        /* background: #f8f9fa; */
        margin: 0;
        /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
        font-size: .88rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        text-align: left;
        background-color: var(--body-background);
    }

    .arna-bg-green{
      background-color: var(--f-green-200) !important;
      
      border: var(--f-green-200) !important;
    }
    .announcement-mess{
      color: var(--neutral-800) !important;
      font-size: var(--font-body-1-size) !important;
      font-weight: var(--font-weight-semibold) !important;
    }
    .arna-bg-red{
      background-color: var(--f-red-200) !important;
      
      border: var(--f-red-200) !important;
    }
    .main-title-h4{
      font-size: var(--font-h4-size);
      font-weight: var(--font-weight-bold);
      color: var(--neutral-800);
    }
    .form-select{
      border-radius: var(--radius-lg) !important;
      color: var(--neutral-700);
      font-weight: var(--font-weight-medium);
    }
    
    .primary-linear-gradient-background{
        background: linear-gradient(to right, var(--primary-100), var(--primary-200)) !important;
    }
    .table-bg-none{
        background-color: transparent !important;
    }

    .arna-primary-btn{
      background-color: var(--primary-500);
      color: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      
    }
    .arna-primary-btn:hover{
      background-color: var(--primary-700);
      color: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);

    }

    .arna-secondary-btn{
      background-color: var(--secondary-500);
      color: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      
    }
    .arna-secondary-btn:hover{
      background-color: var(--secondary-700);
      color: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);

    }
    .custom-table th{
        padding: 12px 12px !important;
        font-size: var(--font-body-3-size);
        font-weight: var(--font-weight-medium);
        color: var(--neutral-500);
        background-color: var(--neutral-50);
    }

    .custom-table td{
        padding: 16px 12px !important;
        font-size: var(--font-body-2-size);
        font-weight: var(--font-weight-regular);
        color: var(--neutral-700);
        background-color: var(--neutral-white);
    }

    .table-border-neutral-200{
        border: 1px solid var(--neutral-200);
        
        /* border-radius: var(--radius-lg); */
    }

    .font-weight-regular{
        font-weight: var(--font-weight-regular);
    }
    .font-weight-semibold{
        font-weight: var(--font-weight-semibold);
    }
    

    .neutral-700{
        color: var(--neutral-700);
        font-weight: var(--font-weight-regular);
    }

    .neutral-500{
        color: var(--neutral-500);
        font-weight: var(--font-weight-regular);
    }

    .font-h4{
        font-size: var(--font-h4-size);
       
    }
    .font-body-1-size{
        font-size: var(--font-body-1-size);
    }
    

    .border-radious-lg{
        border-radius: var(--radius-lg) !important;
    }

    .g-background{
        /* background: linear-gradient(135deg, #eca66c, #f8ddc7) !important; */
        background: #eca66c !important;
    }

    .arrow-arna-color{
        color: #4f290a !important;
    }
    .dark-color{
        color: var(--neutral) !important;
        border: 0px solid #4f290a !important;
        background-color: var(--white);
        border-radius: var(--radius-lg);
    }
    .dark-color:hover{
        color: var(--theme-primary) !important;
        background-color: var(--white) !important;
    }


    /* Sidebar base */
    .sidebar {
        width: 240px;
        /* background-color: #fff; */
        color: #495057;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        transition: left width 1s;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* border-right: 1px solid #dee2e6; */
        /* box-shadow: 7px 0 60px rgba(0, 0, 0, 0.05); */
    }
    .profile-account {
    margin-top: auto;
}

    /* When shown */
    .sidebar.show {
        left: 0;
    }

    .sidebar.collapsed {
        width: 115px;
    }

    /* Menu links */
    .sidebar .nav-link {
        color: #495057;
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        font-size: var(--font-body-2-size);
    }

    .sidebar .nav-link .menu-text {
        flex-grow: 1;
        margin-left: 10px;
    }

    /* Active/Hover */
    .sidebar .nav-link:hover {
        
        border-radius: var(--radius-lg);
        background-color: var(--white);
        color: var(--theme-primary);
    }

    .sidebar .nav-link.active {
        border-radius: var(--radius-lg);
        background-color: var(--white);
        color: var(--theme-primary);
        font-weight: var(--font-weight-semibold) !important;
       
    }

    /* Arrow */
    .sidebar .nav-link[aria-expanded="true"] .arrow {
        transform: rotate(90deg);
    }

    .sidebar .arrow {
        transition: transform 0.3s;
    }

    /* Submenu */
    .submenu {
        padding-left: 20px;
    }

    /* Collapsed mode hide text but still allow clicks */
    .sidebar.collapsed .menu-text {
        display: none;
    }

    /* Logo full vs small */
    .logo-full {
        display: inline;
    }

    .logo-small {
        display: none;
        font-size: 22px;
        font-weight: bold;
    }

    .sidebar.collapsed .logo-full {
        display: none;
    }

    .sidebar.collapsed .logo-small {
        display: inline;
    }

    /* Main content */
    main {
        margin-left: 240px;
        padding: 20px;
        transition: margin-left 0.3s;
    }

    main.collapsed {
        margin-left: 120px;
    }

    /* Default sidebar width */
    footer {
        background-color: var(--body-background);
        margin-left: 241px; /* same as sidebar width */
        transition: margin-left 0.3s ease;
    }

    /* When sidebar is collapsed */
    .sidebar.collapsed ~ footer {
    margin-left: 116px; /* collapsed sidebar width */
    }

    .profile-account-1{
        font-size: var(--font-body-2-size);
        font-weight: var(--font-weight-semibold);

    }
    
    .profile-account-2{
        font-size: var(--font-body-3-size);
        font-weight: var(--font-weight-regular);
        
    }

    /* icon  */

    i.icon{
        font-size: 20px; /* important for icon font */
    }

   i.ph-sign-out {
    display: inline-block;
    width: 20px;
    height: 20px;
    color: var(--color-red-600);
    font-size: 20px; /* important for icon font */
    line-height: 1;
    }

    .date-range {
      padding: 5px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      width: 240px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--white);
      color: var(--neutral-700);
    }
    .arna-form-input{
      padding: 5px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--white);
      color: var(--neutral-700);
    }
    .main-title{
        color: var(--neutral-800);
        font-size: var(--font-body-1-size);
        font-weight: var(--font-weight-semibold);
    }
    .mute-title-medium{
        color: var(--neutral-400);
        font-size: var(--font-body-3-size);
        font-weight: var(--font-weight-medium);
    }
    .mute-title-regular{
        color: var(--neutral-400);
        font-size: var(--font-body-3-size);
        font-weight: var(--font-weight-regular);
    }

    .border-section{
        border: 1px solid var(--neutral-100);
        padding: 16px;
        border-radius: var(--radius-xl);
    }
    


    /* project-based-tasks-component.php */
    

    .task-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .nav-tabs {
      border: none;
    }

    .nav-tabs .nav-link {
      border: none;
      border-radius: var(--radius-md);
      padding: 4px 16px;
      font-weight: var(--font-weight-regular);
      color: #6c757d;
      font-size: var(--font-body-3-size);
    }

    .nav-tabs .nav-link.active {
      background-color: var(--primary-50);
      color: var(--primary-500);
      font-weight: var(--font-weight-semibold);
      
    }

    .badge-high {
      background-color: var(--f-red-50);
      color: var(--f-red-600);
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      border: 1px solid var(--f-red-200);
    }

    .badge-medium {
      background-color: var(--f-yellow-50);
      color: var(--f-yellow-600);
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      border: 1px solid var(--f-yellow-200);
    }

    .badge-low {
      background-color: var(--f-green-50);
      color: var(--f-green-600);
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      border: 1px solid var(--f-green-200);
    }

    .task-card {
      background: var(--neutral-white);
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius-lg);
      padding: 12px;
      transition: box-shadow 0.2s;
    }


    .task-date {
      font-size: var(--font-body-3-size);
      color: var(--neutral-400);
      font-weight: var(--font-weight-regular);
    }

    .filters select {
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius-lg);
      padding: 8px;
      font-size: var(--font-body-3-size);
      background-color: var(--neutral-white);
      font-weight: var(--font-weight-medium);
      color: var(--neutral-700);
    }

    .task-title {
      font-weight: var(--font-weight-medium);
      color: var(--neutral-700);
      margin-top: 6px;
      font-size: var(--font-body-2-size
      );
    }


    /* admin-project-task-component.php */
    .admin-chart-container {
      max-width: 950px;
    }

    .admin-chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .admin-chart-title {
      font-weight: 600;
      color: #343a40;
    }

    .admin-chart-filters {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .admin-chart-date {
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius-lg);
      padding: 4px;
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      /* background-color: #fff; */
      color: var(--neutral-700);
    }

    .admin-chart-period button {
      border: none;
      background: transparent;
      font-weight: var(--font-weight-regular);
      color: var(--neutral-500);
      padding: 4px 16px;
      border-radius: 6px;
      transition: all 0.2s;
    }

    .admin-chart-period button.active {
      background-color: var(--primary-50);
      color: var(--primary-500);
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-body-3-size);
      /* border: 1px solid #ffe0a3; */
    }

    .admin-chart-canvas {
      position: relative;
      height: 350px;
      width: 100%;
    }




    /* base link */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
  color: var(--neutral-700);
  font-weight: var(--font-weight-regular);
  border-color: var(--white);
  font-size: var(--font-body-2-size);
  padding: 8px 14px;     /* active border color */
  margin-left: 4px;

}

/* hover */
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
  color: var(--neutral-white);
  background-color: var(--primary-500);   /* your active color */
  border-color: var(--primary-500);  
  border-radius: var(--radius-lg);
  padding: 8px 14px;     
  font-size: var(--font-body-2-size);
  
}

/* ACTIVE page */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  color: var(--neutral-white);
  background-color: var(--primary-500);   /* your active color */
  border-color: var(--primary-500);  
  border-radius: var(--radius-lg);
  padding: 8px 14px;     
  font-size: var(--font-body-2-size);
  margin-left: 4px;margin-left: 4px;
}

/* DISABLED (prev/next when blocked) */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  color: var(--neutral-300);
  background-color: var(--neutral-100);
  border-color: var(--neutral-100);          /* disabled border color */
  pointer-events: none;
  border-radius: var(--radius-lg);
  padding: 8px;  
}


/* .emppanel-inout-time-classname-container,
  .emppanel-your-task-classname-container {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  } */

  .emppanel-inout-time-classname-summary div {
    flex: 1;
    /* border: 1px solid #e6e6e6; */
    border-radius: var(--radius-lg);
    padding: 10px;
    background-color: var(--neutral-50);

  }

  .emppanel-inout-time-classname-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .emppanel-inout-time-classname-date-days {
    display: flex;
    justify-content: space-between;
    /* margin-top: 15px; */
    text-align: center;
  }

  .emppanel-inout-time-classname-day {
    /* flex: 0.5; */
    text-align: center;
    padding: 8px 12px;
    cursor: pointer;
    /* font-weight: 500; */
    color: var(--neutral-500);
    border-radius: var(--radius-3xl);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
  }
  .emppanel-inout-time-classname-day span{
    font-size: var(--font-label-4-size);
    
  }
  .emppanel-inout-time-classname-day strong{
    font-size: var(--font-body-1-size);
    
  }

  .emppanel-inout-time-classname-time-title{
    font-size: var(--font-body-2-size);
    font-weight: var(--font-weight-semibold);
    color: var(--neutral-700);
  }
  .emppanel-inout-time-classname-time-small-title{
    font-size: var(--font-body-3-size);
    font-weight: var(--font-weight-regular);
    color: var(--neutral-500);
  }

  .emppanel-inout-time-classname-day span:first-child {
    font-size: 13px;
  }
  .emppanel-inout-time-classname-day span:last-child {
    font-size: 16px;
    font-weight: 600;
  }

  .emppanel-inout-time-classname-day.active {
    background-color: var(--primary-500);
    color: var(--neutral-white);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-label-4-size);
    border-radius: var(--radius-3xl);
    padding: 8px 12px;
  }
  

  .emppanel-inout-time-classname-arrow {
    font-size: 20px;
    color: #888;
    cursor: pointer;
  }

  .emppanel-inout-time-classname-card {
    border-radius: 12px;
    padding: 14px;
    font-weight: 500;
  }

  .blue { background-color: #e3f2fd; }
  .yellow { background-color: #fff8e1; }
  .green { background-color: #e8f5e9; }
  .pink { background-color: #fce4ec; }

  /* --- Tasks --- */
  .emppanel-your-task-classname-tab {
    padding: 4px 16px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: var(--neutral-white);
    font-weight: var(--font-weight-regular);
    color: var(--neutral-500);
    font-size: var(--font-body-3-size);
  }

  .emppanel-your-task-classname-tab.active {
    background: var(--primary-50);
    color: var(--primary-500);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
  }

  .emppanel-your-task-classname-title{
    font-size: var(--font-body-2-size);
    font-weight: var(--font-weight-medium);
    color: var(--neutral-700);

  }

  .emppanel-your-task-classname-subtitle{
    font-size: var(--font-body-3-size);
    font-weight: var(--font-weight-regular);
    color: var(--neutral-400);
  }
  .emppanel-your-task-classname-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 15px;
    background: #fff;
    margin-bottom: 10px;
  }

  .emppanel-your-task-classname-badge {
    
      font-size: var(--font-tiny-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      
  }
  
  .high { 
    background: var(--f-red-50); 
    color: var(--f-red-600);
    border: 1px solid var(--f-red-200); 
  }
  .medium { 
    background: var(--f-yellow-50); 
    color: var(--f-yellow-600);
    border: 1px solid var(--f-yellow-200); 
  }
  .low { 
    background: var(--f-green-50); 
    color: var(--f-green-600);
    border: 1px solid var(--f-green-200); 
  }
  .due{
    background: var(--f-blue-50); 
    color: var(--f-blue-600);
    border: 1px solid var(--f-blue-200); 
  }

  .due-yellow{
    background: var(--f-yellow-50); 
    color: var(--f-yellow-600);
    border: 1px solid var(--f-yellow-200); 
  }
  .due-red{
    background: var(--f-red-50); 
    color: var(--f-red-600);
    border: 1px solid var(--f-red-200); 
  }


  /* ------------------- chart and assets ---------------  */
  /* Shared card styling */
.emppanel-attedndance-chart-classname-container,
.emppanel-assets-classname-container {
  /* background: #fff; */
  /* border-radius: 16px; */
  /* padding: 20px; */
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); */
  height: 480px; /* fixed height */
  display: flex;
  flex-direction: column;
}


/* Chart Header */
.emppanel-attedndance-chart-classname-header,
.emppanel-assets-classname-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.emppanel-attedndance-chart-classname-select select {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 5px 10px;
  font-size: var(--font-body-3-size);
  color: vare
  var(--neutral-700);
}

/* Chart legend */
.emppanel-attedndance-chart-classname-legend {
  /* display: flex; */
  justify-content: space-around;
  margin-top: 5px;
  font-size: 13px;
}

.emppanel-attedndance-chart-classname-legend div {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  font-size: 14px;
}

.emppanel-attedndance-chart-classname-legend span {
  display: inline-block;
  width: 26px;
  height: 16px;
  /* border-radius: var(--radius-4xl); */
  /* margin-right: 8px; */
}

/* Chart center text */
.chart-center-text {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-h3-size);
  color: var(--neutral-700);
}

.chart-center-text small {
  display: block;
  font-size: var(--font-h3-size);
  color: var(--neutral-700);
}

/* Assets section */
.emppanel-assets-classname-scroll {
  overflow-y: auto;
  flex: 1;
  padding-right: 5px;
}

/* scrollbar styling */
.emppanel-assets-classname-scroll::-webkit-scrollbar {
  width: 6px;
}
.emppanel-assets-classname-scroll::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 4px;
}

/* Asset grid */
.emppanel-assets-classname-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Individual cards */
.emppanel-assets-classname-card {
  background: var(--neutral-50);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: left;
  /* border: 1px solid #f1f1f1; */
  transition: 0.3s;
}



.emppanel-assets-classname-card i {
  font-size: 28px;
  color: var(--primary-500);
  padding: 8px;
  background-color: var(--neutral-white);
  border-radius: var(--radius-lg);
}

.emppanel-assets-classname-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-body-2-size);
  margin-top: 5px;
  color: var(--neutral-700);
}

.emppanel-assets-classname-date {
  font-size: var(--font-body-3-size);
  color: var(--neutral-400);
}

    .badge-pending {
      background-color: var(--f-yellow-50);
      color: var(--f-yellow-600);
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      border: 1px solid var(--f-yellow-200);
    }

    .badge-closed {
      background-color: var(--f-green-50);
      color: var(--f-green-600);
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      border: 1px solid var(--f-green-200);
    }

    .badge-inprogress {
      background-color: var(--f-blue-50);
      color: var(--f-blue-600);
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      border: 1px solid var(--f-blue-200);
    }

    .badge-secondary {
      background-color: var(--secondary-50);
      color: var(--secondary-600);
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      border: 1px solid var(--secondary-200);
    }

    .badge-red {
      background-color: var(--f-red-50);
      color: var(--f-red-600);
      font-size: var(--font-body-3-size);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-md);
      padding: 4px 8px;
      border: 1px solid var(--f-red-200);
    }

    .primary-btn{
          background: var(--primary-50);
          color: var(--primary-500);
          font-weight: var(--font-weight-semibold);
          border-radius: var(--radius-lg);
          padding: 4px 10px !important;
    }

    .badge-pending-text {
      color: var(--f-yellow-600);
      font-weight: var(--font-weight-medium);
      font-size: var(--font-body-3-size);
    }

    .badge-closed-text {
      color: var(--f-green-600);
      font-weight: var(--font-weight-medium);
      font-size: var(--font-body-3-size);
    }

    .badge-inprogress-text {
      color: var(--f-blue-600);
      font-weight: var(--font-weight-medium);
      font-size: var(--font-body-3-size);
    }

    .badge-secondary-text {
      color: var(--secondary-600);
      font-weight: var(--font-weight-medium);
      font-size: var(--font-body-3-size);
    }

    .badge-red-text {  
      color: var(--f-red-600);
      font-weight: var(--font-weight-medium);
      font-size: var(--font-body-3-size);
    }

    .primary-btn-text{  
          color: var(--primary-500);
          font-weight: var(--font-weight-medium);
          font-size: var(--font-body-3-size);  
    }

    

    .yellow-50-back {
      background-color: var(--f-yellow-50);
      color: var(--f-yellow-600);
      padding: 16px;
        border-radius: var(--radius-xl);
      border: 1px solid var(--f-yellow-200);
    }

    .bg-yellow-50-back {
      background-color: var(--f-yellow-50);
      border-radius: var(--radius-md);
      
    }


    /* ===== Calendar Styles ===== */
.calendar-container {
    width: 100%;
    /* height: 90vh; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}

.calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 1rem;
}

.calendar-header h2 {
    font-size: var(--font-body-1-size);
    font-weight: var(--font-weight-bold)
}

.calendar-header button {
    padding: 8px 12px;
    border: none;
    background: var(--primary-500);
    color: var(--neutral-white);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    flex-grow: 1;
}

.day-cell {
    border: 1px solid var(--neutral-100);
    /* text-align: center; */
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
}


.day-cell.future {
    background-color: var(--neutral-100);
}


.day-cell.green { background-color: var(--neutral-white); color: var(--neutral-700); }
.day-cell.yellow { background-color: var(--neutral-white); color: var(--neutral-700);}
.day-cell.red { background-color: var(--secondary-500); color: var(--neutral-50); }
.day-cell.pink { background-color: var(--f-blue-500); color: var(--neutral-50);}
.day-cell.orange { background-color: var(--primary-500); color: var(--neutral-50); }

.day-number {
    font-weight: bold;
    font-size: 16px;
}

.status-label {
    font-size: 12px;
}

/* ===== Details Card ===== */
.details-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    padding: 20px;
    z-index: 999;
    width: 350px;
    text-align: left;
}
.details-card button {
    margin-top: 10px;
    padding: 6px 10px;
    background: var(--primary-500);
    color: var(--neutral-white);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
}



/* bg button  */

    .arna-bg-primary-btn{
      background-color: var(--primary-500);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;
      
    }
    .arna-bg-primary-btn:hover{
      background-color: var(--primary-700);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;

    }

    .badge-bg-secondary{
      background-color: var(--secondary-500);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;
      
    }
    .badge-bg-secondary:hover{
      background-color: var(--secondary-700);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;

    }

    .badge-bg-inprogress{
      background-color: var(--f-blue-500);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;
      
    }
    .badge-bg-inprogress:hover{
      background-color: var(--f-blue-700);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;

    }

    .badge-bg-closed{
      background-color: var(--f-green-500);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;
      
    }
    .badge-bg-closed:hover{
      background-color: var(--f-green-700);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;

    }

    .badge-bg-pending{
      background-color: var(--f-yellow-500);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;
      
    }
    .badge-bg-pending:hover{
      background-color: var(--f-yellow-700);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;

    }

    .badge-bg-red{
      background-color: var(--f-red-500);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;
      
    }
    .badge-bg-red:hover{
      background-color: var(--f-red-700);
      color: var(--neutral-white);
      border-radius: var(--radius-md);
      padding: 5px 12px !important;
      font-size: var(--font-body-2-size);
      font-weight: var(--font-weight-regular);
      text-decoration: none;

    }
    
     .bg-att-yellow{
      background-color: var(--f-yellow-400);
    
      display: block;
    }

    .bg-att-green{
      background-color: var(--f-green-500);
      display: block;
    }
    .font-size-arna{
      font-size: 0.6rem;
    }
     .custom-file {
      border: 1px solid var(--primary-500);
      padding: 6px;
      border-radius: 6px;
    }

    .custom-file::file-selector-button {
      background-color: var(--primary-500);
      color: var(--neutral-white);
      border: none;
      padding: 6px 16px;
      border-radius: 4px;
      cursor: pointer;
    }

    .custom-file::file-selector-button:hover {
      background-color: var(--primary-700);
      color: var(--neutral-white);
    }