/* @import 'ngx-toastr/toastr'; */

.toast-container {
  pointer-events: none !important;
  /* container ignore kare */
  z-index: 99999 !important;
}

.toast {
  pointer-events: auto !important;
  /* toast clickable */
  background: #1e1e2f !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  min-width: 300px;
  padding: 14px 16px 14px 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  position: relative;
}

.toast-top-right {
  top: 70px !important;
  /* header ke neeche */
  right: 20px !important;
}

.toast-success {
  border-left: 5px solid #00ff9c !important;
}

.toast-error {
  border-left: 5px solid #ff4d4f !important;
}

.toast-info {
  border-left: 5px solid #4da6ff !important;
}

.toast-warning {
  border-left: 5px solid #ffb020 !important;
}

.toast-close-button {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #ffffff !important;
  font-size: 18px;
  font-weight: bold;
  opacity: 0.9;
  text-shadow: none;
  pointer-events: auto !important;
  z-index: 100000;
}

.toast-close-button:hover {
  opacity: 1;
}

.toast-progress {
  background: rgba(255, 255, 255, 0.25) !important;
}



:root {
  --color-bg-primary: #363636;
  --color-header-footer: #2e2e2e;
  --color-text-light: #ffffff;
  --sidebarnew-width: 48px !important;
  /* new css */
  --sidebar-grid-color: linear-gradient(135deg, #56adff 0%, #b3dbd3 100%);
  /*#444;*/
  --color-bg-light: #fafafa;
  /*#2e2e2e;;*/
  --top-bg-color: #56adff;
  /*#363636;*/
  --profile-icons: gray;
  /*#fffff;*/
  --table-title-color: rgb(0, 0, 0);
  /*#fffff;*/
  --table-head-bg: #ededed;
  /*#00000;*/
  --select-color: #363636;
  /*#gray*/
  --new-btn-color: #5068D5;
  /*#2196f3*/
  --new-btn-color-hover: rgb(56, 72, 149);
  /*#1976d2*/
  --modal-box-section-title: #000000;
  /*#f2f2f2*/
  --dashboaard-tabs-bg: #dceaff;
  /*#363636*/
  --icon-border-color: #000000;
  /*#4da3ff*/
  --event-details-color: #000000;
  /* #b0b0b0 */
  --table-bg-odd: #ececec;
  /* transparent */
  --table-bg-thead: #f1f8ff;
  /* transparent */
  --tabs-active-color: #cce0ff;
  --table-border-color: #d7d7d7;
}

/* dark mode  */

body.dark-mode {
  --sidebar-grid-color: #444;
  --color-bg-light: #2e2e2e;
  --top-bg-color: #363636;
  --profile-icons: #ffffff;
  --table-title-color: #ffffff;
  --table-head-bg: #000000;
  --select-color: rgb(235, 235, 235);
  --new-btn-color: #2196f3;
  --new-btn-color-hover: #1976d2;
  --modal-box-section-title: #f2f2f2;
  --dashboaard-tabs-bg: #363636;
  --icon-border-color: #4da3ff;
  --event-details-color: #b0b0b0;
  --table-bg-odd: transparent;
  --table-bg-thead: transparent;
  --tabs-active-color: #626262;
  --table-border-color: #5e5e5e;
}

/* dark mode  */

.jss3 {
  flex-grow: 1;
}

.login-content {
  display: flex;
  align-items: start;
  justify-content: flex-start;
  transition: margin-left 0.3s ease, width 0.3s ease;
  height: 100vh;
  background-color: var(--color-bg-light);
}

.MuiTypography-noWrap-2292 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.MuiTypography-h6-2283 {
  font-size: 1.0714285714285714rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.0075em;
}

.MuiTypography-root-2273 {
  margin: 0;
  width: 200px;
}

.jss2304 {
  /* margin-left: -15px; */
  padding-left: 8px;
  border-radius: 4px;
  background-color: rgb(244, 67, 54);
}

:host {
  display: inline-block;
  overflow: hidden;
  text-align: initial;
  white-space: nowrap;
}


#mainContentView {
  overflow-x: auto;
}

.entry-area {
  overflow: auto;
  /* max-height: 94%;
  height: 100vh; */
}

/* @media (max-width: 768px) {
  .MuiTypography-h6-2283 {
    display: none;
  }
} */

/* login */
/* Custom Variables and Styling to maintain the dark theme appearance over Bootstrap defaults */
/* body.sidebar{
   --sidebarnew-width: 70px;
} */
.sidebar-top-background {
  position: fixed;
  top: 0;
  left: 0;
  height: 64px;
  /* Matches header height */
  width: var(--sidebarnew-width);
  background-color: var(--top-bg-color);
  z-index: 1041;
  transition: width 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  /* Content alignment inside the fixed area */
  display: flex;
  align-items: center;
  /* Added spacing inside the fixed bar for the menu icon */
  padding: 0 1rem;
}

/* 1. Left Sidebar (Fixed position) */
body.sidebar-expanded {
  --sidebarnew-width: 240px;
  /* New Width (Open) */
}

/* ===== BASE LAYOUT ===== */
.header,
.main-content {
  transition: margin-left .3s ease, width .3s ease;
}

.left-sidebar {
  width: 240px;
}

body:not(.sidebar-expanded) .left-sidebar {
  width: 48px;
}

/* 1. Left Sidebar (Fixed position) */
.left-sidebar {
  position: fixed;
  left: 0;
  /* FIXED: Sidebar starts BELOW the 64px fixed header */
  top: 64px;
  height: calc(100vh - 64px);
  /* Height spans the rest of the viewport */
  color: #FFFFFF;
  background: var(--sidebar-grid-color);
  display: flex;
  flex-direction: column;
  /* Use the variable and add transition */
  width: var(--sidebarnew-width);
  transition: width 0.3s ease;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 1050;
  /* box-shadow: 2px 0 4px rgba(0, 0, 0, 0.5); */
  /* Default: Center icons vertically */
  align-items: center;
  padding: 0;
  justify-content: space-between;
  padding-top: 10px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Closed state */
body:not(.sidebar-expanded) .sidebar {
  transform: translateX(-100%);
}


/* Align content to the left when expanded */
body.sidebar-expanded .left-sidebar {
  align-items: baseline;
  row-gap: 20px;
  padding-left: 1rem;
  transform: translateX(0);
}

body.sidebar-expanded .main-content {
  justify-content: flex-start;
}


/* Sidebar Item Styling */
.sidebar-icon-item {
  cursor: pointer;
  height: 44.58px;
  width: 100%;
  padding-top: 8px;
}

.sidebar-icon-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}



/* Styling for the N-icon element itself */
/* .sidebar-icon-item .n-icon {
            border: 1px solid #505050;
            border-radius: 50%;
            width: 32px;
            min-width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 700;
        } */

/* Styles for the text label next to the icon */
.sidebar-item-label {
  margin-left: 1rem;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  color: var(--color-text-light);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show label when sidebar is expanded */
body.sidebar-expanded .sidebar-item-label {
  opacity: 1;
  visibility: visible;
}


/* 2. Top Navigation Bar (Fixed top) */
.header {
  background-color: var(--color-bg-light);
  z-index: 1052 !important;
  position: fixed;
  /* Ensure it is explicitly fixed */
  padding: 0 22px;
  top: 0;
  height: 64px;
  /* Set height explicitly */
  /* CHANGES: Shift the header based on sidebar width */
  left: var(--sidebarnew-width);
  /* width: calc(100% - var(--sidebarnew-width)); */
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  transition: left 0.3s ease, width 0.3s ease;
  /* Add transition for shifting */
}

/* Header Logo Styling (Applied to the shifting logo in the header) */
.header .small-logo-icon {
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}



.main-content {
  margin-left: var(--sidebarnew-width);
  width: calc(100% - var(--sidebarnew-width));
  height: 100vh;
  display: flex;
  background: var(--color-bg-light);
  /* align-items: center; */
  justify-content: flex-start;
  /* padding: 1rem; */
  padding-top: 64px;
  transition: margin-left 0.3s ease, width 0.3s ease;
}


body.sidebar-expanded .header {
  margin-left: var(--sidebarnew-width);
  width: calc(100% - var(--sidebarnew-width));
}

body.sidebar-expanded #menuToggle {
  display: none;
}

body.sidebar-expanded .sidebar-icon-item {
  display: flex;
}



.login-card {
  max-width: 380px;
  /* padding: 2.5rem; */
  text-align: center;
  margin-top: 64px;
}

/* Custom Dark Form Input/Text Colors */


.footer-links p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  text-align: center;
  margin-top: 64px;
}

.side-icones-content {
  font-size: 0.8571428571428571rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  align-content: center;
}

.close-icon,
.menu-icon {
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;

}

.close-icon {
  fill: #fff;
}

.menu-icon {
  fill: var(--table-title-color);
  margin-right: 1rem;
}

.close-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/*background removing class from label*/
.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: #30303000;
  border-radius: var(--bs-border-radius);
}


.left-sidebar {
  /* width: 70px; */
  transition: all 0.3s ease;
}

.left-sidebar.expanded {
  width: 250px;
  /* expanded width */
}


.header {
  /* margin-left: 70px; */
  transition: all 0.3s ease;
}

.header.sidebar-open {
  margin-left: 250px;
}

/* new css */

.top-status-icon {
  border-radius: 50%;
  padding: 12px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.top-status-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.profile-section {
  cursor: pointer;
  /* min-width: 180px; */
  min-width: auto;
  padding: 8px 8px;
}

.profile-section span {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  margin-left: 5px;
  color: var(--table-title-color);
}

.profile-section:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-toggle::after {
  display: none !important;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

.dropdown-menu {
  left: unset !important;
  /* left: -32px !important; */
  right: 0 !important;
}

.left-bar-anyicon {
  width: 100%;
}

body.sidebar-expanded .left-sidebar {
  padding-left: 0;
  row-gap: 0;
}

body.sidebar-expanded .sidebar-icon-item {
  padding: 10px 16px;
  align-items: center;
}


.profile-dropdown-menu {
  background-color: #424242 !important;
  position: absolute;
  width: 210px;
  height: fit-content !important;
  border-radius: 4px;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: none;
  transform-origin: top right;
  top: 20px;
  left: unset !important;
  right: 0px !important;
  color: white !important;
}

/* .last-icon {
  height: 77.3vh;
} */

.sidebar-icon-item i {
  color: #fff;
}

.sidebar-icon-item svg {
  fill: #fff;
}

/* .modal {
  margin-top: 64px;
} */

/* .modal-box h2{
  position: unset !important;
} */



/* create-admin */
/* ===== HEADINGS ===== */
h2 {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}


.error small {
  color: #ff4b4b;
  font-size: 12px;
}

input.ng-invalid.ng-touched,
textarea.ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
  border: 1px solid #ff4b4b;
}


/* ===== LABEL & INPUT ===== */
label {
  font-size: 13px;
  font-weight: 500;
  color: var(--table-title-color);
  margin-bottom: 6px;
  display: block;
}

input,
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-bg-light);
  border: 1px solid var(--table-border-color);
  border-radius: 6px;
  color: var(--select-color);
  font-size: 14px;
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #6a6aff;
}

textarea {
  height: 90px;
  resize: none;
}

/* ===== BUTTONS ===== */
button {
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

button:disabled {
  background: #404040;
  cursor: not-allowed;
}


/* ===== TABLE ===== */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #d1d1d1;
  padding: 12px;
  border-bottom: 1px solid #333;
}

td {
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid #2c2c2c;
}




/* ===== PAGE ===== */
.page {
  background: var(--color-bg-light);
  color: var(--table-title-color);
  min-height: 100vh;
  /* padding: 64px; */
  margin-left: var(--sidebarnew-width);
  width: calc(100% - var(--sidebarnew-width));
}

/* ===== CARD ===== */
.page .card {
  background: var(--color-bg-light);
  /* border-radius: 12px; */
  /* box-shadow: 0 0 25px #000; */
  padding: 18px;
  overflow: auto;
}

.section-title {
  /* margin: 22px 0 10px; */
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #333;
  padding-bottom: 6px;
  color: #f2f2f2;
}

/* ===== FORM GRID ===== */
.row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.col {
  flex: 1;
}

.col-100 {
  flex: 100%;
}


.primary {
  background: var(--new-btn-color);
  color: #fff;
  /* margin-right: 80px; */
}

.secondary {
  background: transparent;
  border: 1px solid #555;
  color: #ccc;
}

.primary:hover {
  background: var(--new-btn-color-hover);
}

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

.top-bar h1,
h2,
h3,
h4,
h5 {
  color: var(--table-title-color) !important;
}

.top-bar input {
  width: 300px;
  height: 38px;
  background: var(--color-bg-light);
  border: 1px solid #555;
  color: var(--table-title-color);
}

.top-bar select {
  width: auto;
}



.card table {
  color: var(--table-title-color);
}

.card table tr {
  border: 1px solid var(--table-border-color);
}

.card tbody tr:nth-of-type(odd) {
  background-color: var(--table-bg-odd);

}

.card table tr th {
  color: var(--table-title-color);
  border: 1px solid var(--table-border-color);
  background: var(--table-bg-thead);
}

.modal-box table tr th {
  color: var(--table-title-color);
  border: 1px solid var(--table-border-color);
  background: var(--table-bg-thead);
}

.modal-box .renew-info p {
  color: var(--table-title-color);
}

/* ===== ACTION BUTTON ===== */
.icon {
  background: transparent;
  border: 1px solid #444;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--table-title-color);
}

.icon:hover {
  background: #6a6aff;
  color: #fff;
}

/* ===== STATUS BADGE ===== */
.badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #6b7280;
}

.badge.active {
  background: #22c55e;
}

.badge.inactive {
  background: #dc3545;
  color: #fff;
}

/* ===== PAGINATION ===== */
.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ===== MODAL ===== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  height: auto !important;
}

.modal-box {
  /* background: #1a1a1d; */
  padding: 0px !important;
  border-radius: 12px;
  width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  overflow-x: hidden;
}

.modal-box form {
  padding: 20px;
}

.modal-box h2 {
  position: sticky;
  top: 0;
  background: var(--top-bg-color);
  /* padding-bottom: 10px; */
  z-index: 10;
  padding: 7px 14px;
  color: #fff !important;
}

.modal-box .row {
  gap: 12px;
}

.modal-box .section-title {
  color: var(--modal-box-section-title);
  border-bottom: 1px solid var(--profile-icons);
}




.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.page-btn {
  background: #26262b;
  border: 1px solid #444;
  color: #ddd;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background: #6a6aff;
  border-color: #6a6aff;
  color: #fff;
}

.page-btn.primary {
  background: #6a6aff;
  border-color: #6a6aff;
  color: #fff;
}

.page-btn:disabled {
  background: var(--color-bg-light);
  border-color: var(--profile-icons);
  color: var(--table-title-color);
  cursor: not-allowed;
}

.page-info {
  font-size: 13px;
  color: #b3b3b3;
}

/* ===== CONTAINER ADJUSTMENT ===== */
.container {
  display: flex;
  justify-content: center;
}



/* ================= NO DATA / EMPTY STATE ================= */

.no-data {
  text-align: center;
  padding: 40px 0;
  font-size: 16px;
  color: var(--table-title-color) !important;
  background-color: var(--color-bg-light) !important;
}

.empty-state {
  height: calc(100vh - 220px);
  /* header + tabs minus */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-light) !important;
}

.empty-content {
  text-align: center;
  color: var(--table-title-color) !important;
}

.empty-icon {
  font-size: 36px;
  color: #ff2f6d;
  margin-bottom: 12px;
}

.empty-content h2 {
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: 500;
}

.empty-content p {
  font-size: 14px;
  color: #b5b5b5;
  margin-bottom: 20px;
  line-height: 1.4;
}

.clear-filter-btn {
  background-color: transparent;
  border: 1px solid #3fa9f5;
  color: #3fa9f5;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}

.clear-filter-btn i {
  margin-right: 6px;
}

.clear-filter-btn:hover {
  background-color: rgba(63, 169, 245, 0.1);
}

/* ================= DATE RANGE FILTER (NO MATERIAL) ================= */

.filter-input-container {
  position: relative;
  /* background-color: #000000; */
  /* padding: 0.5rem; */
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  border: 1px solid #cbcbcb;
}

.filter-input-container input {
  background: var(--color-bg-light) !important;
  border: none !important;
  width: 100%;
  color: var(--table-title-color) !important;
  padding: 0.5rem;
  outline: none;
  font-size: 0.85rem;
}

/* .filter-input-container input:hover{
  border: 1px solid #ffffff;
} */

.filter-input-container input::placeholder {
  color: var(--table-title-color);
}

/* .filter-input-container input:focus {
  outline: none;
  border-color: #3fa9f5;
  box-shadow: 0 0 0 1px rgba(63, 169, 245, 0.3);
} */

/* Range dash */
.range-separator {
  color: #999;
  font-size: 12px;
  padding: 0 2px;
}

/* Remove browser default calendar icon background mismatch */
.filter-input-container input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}


.pagination-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: #b3b3b3;
}

.pagination-bar button {
  background: #2f2f2f;
  border: 1px solid #555;
  color: #fff;
  padding: 4px 12px;
  cursor: pointer;
}

.pagination-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.assign .sub .form-select {
  background-color: var(--color-bg-light) !important;
  color: var(--select-color) !important;
  padding: 6px 12px;
  border: 1px solid #838383;
  font-size: 14px;
}




/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* @import 'ngx-toastr/toastr';
@import url("assets/css/main.css");

:root {
  --color-bg-primary: #363636;
  --color-header-footer: #2e2e2e;
  --color-text-light: #ffffff;
  --sidebarnew-width: 48px !important;
} */

body {
  font-family: 'Inter', sans-serif;
  background-color: #303030 !important;
  color: var(--color-text-light) !important;
  margin: 0;
  /*padding-top: 64px;*/
  /* Space for the fixed header */
}





/* ----------------- FORM CONTROL ----------------- */
.form-control {
  border: none;
  border-bottom: 1px solid #505050;
  border-radius: 0;
  font-size: 14px;
  background-color: transparent !important;
  color: var(--table-title-color) !important;
  box-shadow: none;
  padding-left: 0;
  transition: border-bottom 0.3s;
}

.form-control:focus {
  border-bottom: 2px solid #1e88e5;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: white;
}

/* ----------------- FORM FLOATING LABEL ----------------- */
.form-floating>.form-control {
  padding: 1.5rem 0 0.5rem;
}

.form-floating>label {
  color: #a0a0a0;
  font-size: 14px;
  padding: 0.5rem 0 0;
  pointer-events: none;
  transition: all 0.2s ease-out;
  padding: 0 0 5px !important;
  align-content: end;
}

/* Focused or filled input */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select:focus~label,
.form-floating>.form-select:not([value=""]):valid~label {
  color: #1e88e5;
  transform: scale(0.85) translateY(-1rem) translateX(0.15rem);
}

/* Label after pseudo (if needed) */
.form-floating>.form-control:focus~label::after {
  background: transparent;
}

/* ----------------- BUTTONS ----------------- */
.btn-primary,
.btn-info {
  background-color: #1e88e5;
  border-color: #1e88e5;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  transition: background-color 0.25s, border-color 0.25s;
}

.btn-primary:hover,
.btn-info:hover {
  background-color: #1565c0;
  border-color: #1565c0;
}

/* Specific button ID */
#form-btn {
  padding: 5px 16px;
  font-size: 0.75rem;
  min-width: 64px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  line-height: 1.75;
  border-radius: 4px;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  margin-bottom: 16px;
  cursor: pointer;
}

/* ----------------- LOGO ----------------- */
.nandico-logo-text {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  margin: 0;
}

/* ----------------- OR SEPARATOR ----------------- */
.or-separator {
  display: flex;
  align-items: center;
  color: #a0a0a0;
  font-size: 0.875rem;
  margin: 1rem 0;
}

.or-separator::before,
.or-separator::after {
  content: '';
  flex-grow: 1;
  border-bottom: 1px solid #505050;
  margin: 0 1rem;
}

/* Custom Variables and Styling to maintain the dark theme appearance over Bootstrap defaults */

/* .sidebar-top-background {
  position: fixed;
  top: 0;
  left: 0;
  height: 64px;
  width: var(--sidebarnew-width);
  background-color: #424242;
  z-index: 1041;
  transition: width 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  display: flex;
  align-items: center;

  padding: 0 1rem;
} */

/* 1. Left Sidebar (Fixed position) */
/* Expanded State: Update the variable when body has this class */
/* body.sidebar-expanded {
  --sidebarnew-width: 240px;
} */


body.sidebar-expanded .main-content {
  margin-left: var(--sidebarnew-width);
  width: calc(100% - var(--sidebarnew-width));
}

/* dashboard page charts */

.dashboard-chart-area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
}


.chart-card {
  background: var(--color-bg-light);
  border-radius: 12px;
  padding: 15px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 20px 40px var(--table-head-bg);
}


.chart-card h4 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--table-title-color);
  text-align: center;
}


.chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}


@media (max-width: 600px) {
  .chart-wrap {
    height: 220px;
  }
}

@media (max-width: 992px) {
  .dashboard-chart-area {
    grid-template-columns: 1fr;
  }
}

/* dashboard page charts end */

/* dark light color area */

/* From Uiverse.io by MuhammadHasann */
.toggle-switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 52px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #73C0FC;
  transition: .4s;
  border-radius: 30px;
  border: 1px solid var(--profile-icons);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 20px;
  top: 2px;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.sun svg {
  position: absolute;
  top: 4px;
  left: 31px;
  z-index: 1;
  width: 17px;
  height: 17px;
  fill: white !important;

}

.moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 17px;
  height: 17px;
}

.input:checked+.toggle-slider {
  background-color: #183153;
}

.input:focus+.toggle-slider {
  box-shadow: 0 0 1px #183153;
}

.input:checked+.toggle-slider:before {
  transform: translateX(26px);
}

.main-content {
  height: auto;
}

/* When sidebar is expanded, main content needs to shift */
@media (max-width: 768px) {

  .header,
  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .sidebar-top-background {
    padding: 0;
  }

  .navbar {
    flex-wrap: nowrap !important;
  }

  .btn-default {
    font-size: 5pt !important;
  }

  .menu-icon {
    margin-right: 0;
  }

  .logo-section img {
    width: 117px;
  }

  .top-status-icon {
    padding: 8px;
    width: 34px;
  }

  .toggle-switch {
    width: 45px;
    height: 24px;
  }

  .toggle-slider:before {
    height: 18px;
    width: 18px;
  }

  .sun svg {
    top: 4px;
    left: 30px;
    /* z-index: 1; */
    width: 11px;
    height: 15px;
  }

  .input:checked+.toggle-slider:before {
    transform: translateX(21px);
  }

  /* .dropdown-menu{
  left: -180px !important;
} */

}


/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {

  .left-sidebar {
    display: none;
  }

  body.sidebar-expanded .left-sidebar {
    display: flex;
  }

  .profile-section span {
    display: none;
  }

  .dashboard-chart-area {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .header,
  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .editor-top-bar {
    flex-wrap: wrap;
    row-gap: 20px;
  }



}

/* Small Laptop */
@media (min-width: 992px) and (max-width: 1199px) {
  #mainContentView {
    overflow-x: auto;
  }

  .left-sidebar {
    display: none;
  }

  .header,
  .main-content {
    margin-left: 0;
    width: 100%;
  }

  body.sidebar-expanded .left-sidebar {
    display: flex;
  }

}

/* Laptop / Desktop */
@media (min-width: 1200px) and (max-width: 1599px) {
  .main-content {
    justify-content: flex-start;
    overflow: auto;
  }


  body.sidebar-expanded .user-creation-form {
    gap: 13px;
  }


}

/* When sidebar is expanded, main content needs to shift */
@media (max-width: 768px) {

  body.sidebar-expanded .header {
    margin-left: var(--sidebarnew-width) !important;
    width: calc(100% - var(--sidebarnew-width)) !important;
  }

  body.sidebar-expanded .main-content {
    margin-left: var(--sidebarnew-width) !important;
    width: calc(100% - var(--sidebarnew-width)) !important;
  }
}



/*
.close-icon, .menu-icon {
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
} */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-light) inset !important;
  -webkit-text-fill-color: var(--table-title-color) !important;
  caret-color: var(--table-title-color);
  transition: background-color 5000s ease-in-out 0s;
}




/*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Custom Variables and Styling to maintain the dark theme appearance over Bootstrap defaults */

/* Using btn-info for the secondary button to match the light blue */
.btn-info {
  background-color: #1e88e5 !important;
  border-color: #1e88e5 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-info:hover {
  background-color: #1565c0 !important;
  border-color: #1565c0 !important;
}

.or-separator {
  color: #a0a0a0;
  font-size: 0.875rem;
  margin-bottom: 16px;
  /* margin: 1.5rem 0; */
}

.or-separator::before,
.or-separator::after {
  content: '';
  flex-grow: 1;
  border-bottom: 1px solid #505050;
  margin: 0 1rem;
}


.status-icon {
  padding: 12px 14px;
  width: 48px;
  height: 44px;
}


.status-icon:active {
  background-color: rgba(255, 255, 255, 0.1);
}



/* body.sidebar-expanded .sidebar-icon-item {
  padding: 10px 16px;
  align-items: center;
} */

/* body.sidebar-expanded .left-sidebar {
  padding-left: 0;
  row-gap: 0;
} */



.left-bar-anyicon {
  width: 100%;
}

/* .last-icon {
  height: 73.3vh;
} */

/* body.sidebar-expanded .sidebar-icon-item:hover{
            background-color: rgba(255, 255, 255, 0.1);
        } */

.left-bar-anyicon.active {
  background-color: rgba(255, 255, 255, 0.2);
}

.sidebar-item-label {
  margin-left: 35px;
}

/* dashbord section css  */

/* Nandico Logo Icon Styling */
.nandico-icon-container {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* SVG icon color */
  color: var(--color-accent);
}

/* Top Tabs Styling */
.dashboard-tabs {
  border-bottom: 1px solid var(--color-border);
  padding: 0 40px;
  background-color: var(--dashboaard-tabs-bg);
  /* Match header for continuity */
  position: sticky;
  /* Make tabs stick to the top */
  top: 0;
  z-index: 600;

}

.tab-item {
  color: var(--table-title-color) !important;
  /* font-weight: 600; */
  padding: 15px 0;
  /* margin-right: 2rem; */
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.2s, color 0.2s;
  font-size: 11.14px;
  width: 160px;
  text-align: center;
}

.tab-item:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.tab-item:hover {
  color: #dddddd;
  background: var(--tabs-active-color);
}

.tab-item.active {
  color: white;
  border-bottom-color: #f50057;
  background: var(--tabs-active-color);
}

/* Table Header/Filter Row Styling */
.table-header-row {
  background-color: var(--table-head-bg);
  color: var(--color-text-light);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: 1rem;
  /* Defining 13 columns (40px + 12 flexible) */
  grid-template-columns: repeat(5, 1fr) 250px repeat(5, 1fr) repeat(3, 50px);
  align-items: end;
  font-size: 0.85rem;
  /* font-weight: 600; */
  position: sticky;
  /* Stick the filter row below the tabs */
  top: 0px;
  /* Adjusting for the height of the tabs container */
  z-index: 500;
  width: max-content;
}

.report-row {
  display: grid;
  grid-template-columns: repeat(5, 127px) 334px repeat(5, 127px) repeat(2, 58px) 120px;
  background: var(--color-bg-light);
  color: var(--table-title-color);
  padding: 8px 16px;
  border-bottom: 1px solid #9b9b9b;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 13px;
  /* text-align: center; */
}

.table-header-row-2 {
  grid-template-columns: 94px 124px 127px 127px 127px 295px 120px 120px 120px 120px 120px 50px 37px 50px;
}


.settings-grid {
  grid-template-columns: repeat(1, 170px) repeat(4, 307px) repeat(3, 110px) !important;
  top: 0;
}

.report-row {
  column-gap: 15px;
}

/* Large Screen */
@media (min-width: 1600px) {

  .table-header-row {
    /* grid-template-columns: repeat(5, 135px) 313px repeat(5, 269px) 112px; */
    grid-template-columns: repeat(5, 135px) 313px repeat(auto-fit, 269px) 112px;
    grid-auto-flow: column;
    grid-auto-columns: 269px;
  }

  .report-row {
    /* grid-template-columns: repeat(5, 137px) 313px repeat(5, 267px) 120px;         */
    grid-template-columns: repeat(5, 135px) 313px repeat(auto-fit, 269px) 112px;
    grid-auto-flow: column;
    grid-auto-columns: 269px;
  }


  .settings-grid {
    grid-template-columns: repeat(1, 170px) repeat(4, 307px) repeat(3, 110px) !important;
    top: 0;
  }

  body.sidebar-expanded .settings-grid {
    grid-template-columns: repeat(1, 120px) repeat(4, 271px) repeat(3, 110px) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .table-header-row {
    /* grid-template-columns: repeat(5, 114px) 300px repeat(5, 227px) 125px; */
    grid-template-columns: repeat(5, 114px) 320px repeat(auto-fit, 227px) 120px;
    grid-auto-flow: column;
    grid-auto-columns: 227px;

  }

  .report-row {
    /* grid-template-columns: repeat(5, 115px) 300px repeat(5, 225px) 118px; */
    grid-template-columns: repeat(5, 114px) 320px repeat(auto-fit, 227px) 112px;
    grid-auto-flow: column;
    grid-auto-columns: 227px;
  }

  .settings-grid {
    grid-template-columns: repeat(1, 110px) repeat(4, 203px) repeat(3, 83px) !important;
  }

  body.sidebar-expanded .settings-grid {
    grid-template-columns: repeat(1, 100px) repeat(4, 190px) repeat(3, 65px) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .table-header-row {
    /* grid-template-columns: repeat(5, 125px) 300px repeat(5, 238px) 120px; */
    width: fit-content;
    grid-template-columns: repeat(5, 125px) 320px repeat(auto-fit, 238px) 120px;
    grid-auto-flow: column;
    grid-auto-columns: 238px;
  }

  .report-row {
    /* grid-template-columns: repeat(5, 127px) 300px repeat(5, 237px) 120px; */
    grid-template-columns: repeat(5, 127px) 320px repeat(auto-fit, 237px) 120px;
    grid-auto-flow: column;
    grid-auto-columns: 237px;
  }

  .settings-grid {
    grid-template-columns: repeat(1, 60px) repeat(4, 140px) repeat(3, 70px) !important;
  }

  body.sidebar-expanded .settings-grid {
    grid-template-columns: repeat(1, 50px) repeat(4, 103px) repeat(3, 59px) !important;
  }

}

/* --- TABLE ROW STYLES (New for simulation) --- */
.data-table-row {
  background-color: var(--color-bg-primary);
  color: var(--color-text-light);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: 1rem;
  /* Defining 13 columns (40px + 12 flexible) */
  grid-template-columns: 40px repeat(12, minmax(100px, 1fr));
  align-items: center;
  font-size: 0.85rem;
}

.data-cell {
  padding: 0.5rem 0.5rem 0.5rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Styles for the Status Pills */
.status-pill {
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
}

.status-pill.ready {
  background-color: #0d9488;
  color: #ccfbf1;
}

/* Teal-like for Ready */
.status-pill.pending {
  background-color: #ca8a04;
  color: #fef9c3;
}

/* Amber-like for Pending */




.header-cell {
  padding-right: 0.5rem;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.header-cell-title {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: var(--table-title-color);
}

.header-cell-title svg {
  fill: var(--profile-icons);
}

/* .filter-input-container {
  position: relative;
  background-color: #000000;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #505050;
} */

/* .filter-input-container input {
    background: none;
    border: none;
    width: 100%;
    color: var(--color-text-light);
    padding: 0;
    outline: none;
    font-size: 0.85rem;
  } */

.date-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #a0a0a0;
}

/* Generic Center Content Block (For other views like Settings, History) */
.center-content-view {
  text-align: center;
  padding: 5rem 1rem;
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

.center-content-view h4 {
  color: #cccccc;
  font-weight: 400;
}

.center-content-view p {
  color: #a0a0a0;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* No Result Found Block (Special case of center-content-view) */
.no-result-found {
  margin-top: 0;
  padding: 0;
  min-height: 0;
}

.clear-filter-btn {
  color: #1e88e5 !important;
  border-color: #1e88e5 !important;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* Pagination Footer */
.pagination-footer {
  position: fixed;
  bottom: 0;
  left: var(--sidebarnew-width);
  width: calc(100% - var(--sidebarnew-width));
  background-color: #2e2e2e;
  color: white;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #444;
  z-index: 1030;
  transition: left 0.3s ease, width 0.3s ease;
  padding-left: 0;
}

/* .pagination-footer .footer-clear-icon{
            width: 83.5%;
        } */

/* body.sidebar-expanded .pagination-footer {
            left: 60px;
            width: calc(100% - 60px);
        } */

/* body.sidebar-expanded .pagination-footer .footer-clear-icon{
             width: 74%;
        } */

.pagination-controls span,
.pagination-controls select {
  color: #a0a0a0;
  font-size: 0.85rem;
  margin-left: 1rem;
}

.pagination-controls select {
  background-color: #2e2e2e;
  border: 0;
  border-radius: 4px;
  padding: 2px 5px;
  outline: none;
}

.arrow-button {
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 0 0.5rem;
}

.arrow-button:disabled {
  color: #505050;
  cursor: not-allowed;
}

.not-found-btn {
  color: #2196f3;
  border: 1px solid rgba(33, 150, 243, 0.5);
  padding: 5px 15px;
  background: transparent;
  border-radius: 4px;
  font-size: 12px;
}

.not-found-btn:hover {
  background-color: rgba(33, 150, 243, 0.1);
}

/* setting tab css  */

/* --- USER MANAGEMENT STYLES --- */

/* 1. User Creation Form Layout (Sticky and Flexible) */
.user-creation-form {
  background-color: var(--color-bg-light);
  /* Dark background for the form area */
  padding: 1rem;
  display: flex;
  gap: 1rem;
  /* Space between form elements */
  flex-wrap: wrap;
  /* Allows wrapping on smaller screens */
  align-items: center;
  position: relative;
  /* Makes the form stick to the top */
  top: 0;
  z-index: 600;
  /* High z-index to stay above the table content */
}

/* 2. Styling for Inputs and Selects within the form */
.user-creation-form .form-control,
.user-creation-form .form-select {
  background-color: transparent !important;
  border: 1px solid var(--profile-icons) !important;
  color: var(--table-title-color);
  border-radius: 4px !important;
  padding: 10.5px 14px !important;
  font-size: 0.85rem !important;
  height: 37.38px !important;
}

/* Adjust placeholder color for dark theme */
.user-creation-form .form-control::placeholder {
  color: var(--table-title-color);
}

.card form input::placeholder {
  color: var(--select-color);
}

/* 3. Flexible and Fixed Width Groups */
.form-group-flex {
  flex-grow: 1;
  /* Allows these fields (Name, Email) to take up remaining space */
  min-width: 150px;
}

.form-group-contact {
  max-width: 211px;
  /* Specific width for Contact No. */
}

.form-group-contact input {
  max-width: 211px;
  /* Specific width for Contact No. */
}

.form-group-password {
  max-width: 232px;
  /* Specific width for Password */
}

.form-group-password input {
  width: 232px !important;
}



.form-group-roles {
  max-width: 180px;
  /* Specific width for Roles */
}

/* 4. Create User Button Styling */
.create-user-btn {
  background-color: var(--new-btn-color);
  color: var(--color-table-header);
  font-weight: 700;
  border: none;
  height: 40px;
  padding: 8px 22px;
  border-radius: 4px;
  transition: background-color 0.2s;
  font-size: 12px;
  letter-spacing: 0.02857em;
}

.create-user-btn:hover {
  background-color: var(--new-btn-color-hover);
}

/* 5. SETTINGS SPECIFIC GRID DEFINITION (Crucial for the table layout) */
/* Defines 8 columns for User Management Table: Id, Name, Role, Email, Contact No., Password, Active, Update */


/* 6. User Table Action Button Styling */
.user-table-action-btn {
  background: none;
  border: 1px solid #505050;
  color: #a0a0a0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.user-table-action-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* 7. Custom Checkbox Styling for 'Active' filter */
.custom-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid #505050;
  background-color: #363636;
  border-radius: 3px;
  cursor: pointer;
}

.custom-checkbox:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.form-select {
  cursor: text;
}


.form-select:focus {
  box-shadow: none !important;
}

/* .top-status-icon {
  border-radius: 50%;
  padding: 12px;
  width: 44px;
  height: 44px;
  cursor: pointer;
} */

/* .top-status-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
} */

/* .profile-section {
  cursor: pointer;
  min-width: 180px;
  padding: 8px 8px;
} */

/* .profile-section:hover {
  background-color: rgba(255, 255, 255, 0.1);
} */

.filter-input-container select {
  appearance: none;
  padding-right: 1.5rem;
  color: var(--select-color);
  cursor: pointer;
  background: var(--color-bg-light) !important;
  border: none;
  width: 100%;
  padding: 0.5rem;
  outline: none;
  font-size: 0.85rem;
  /* font-weight: 700; */
}



.filter-input-container select option {
  background: var(--color-bg-light);
  padding: 5px 15px !important;
}

/* top setting menu  */
/* Dropdown Menu Styles */
/* Dropdown Menu Styles */
.dropdown-menu {
  background-color: var(--color-bg-light) !important;
  position: absolute;
  margin-top: 0.5rem;
  width: 215px;
  height: 244px;
  border-radius: 4px;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: none;
  transform-origin: top right;
  top: 20px;
  right: 177px;
  color: var(--table-title-color) !important;
}

.dropdown-menu a {
  display: block;
  padding: 6px 16px;
  font-size: 13.71px;
  color: var(--text-light);
  text-decoration: none;
  transition: background-color 0.15s ease;
  font-weight: 400;
}

.dropdown-menu a:hover {
  background-color: rgba(73, 73, 73, 0.295);
}

/* profile dropdown menu style  */

.profile-dropdown-menu {
  background-color: var(--color-bg-light) !important;
  position: absolute;
  width: 210px;
  height: 178px;
  border-radius: 4px;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: none;
  transform-origin: top right;
  top: 20px;
  right: 15px;
  color: var(--table-title-color) !important;
}

.profile-dropdown-menu a {
  display: block;
  padding: 6px 16px;
  font-size: 13.71px;
  color: var(--text-light);
  text-decoration: none;
  transition: background-color 0.15s ease;
  font-weight: 400;
}

.profile-dropdown-menu a:hover {
  background-color: rgba(73, 73, 73, 0.295);
}

/* notification dropdown  */

.massage-dropdown-menu {
  background-color: #424242 !important;
  position: absolute;
  margin-top: 0.5rem;
  width: 355px;
  border-radius: 4px;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: none;
  transform-origin: top right;
  top: 43px;
  right: 40px;
  color: white !important;
}

.massage-dropdown-menu a {
  display: block;
  padding: 8px;
  font-size: 12px;
  color: var(--text-light);
  text-decoration: none;
  transition: background-color 0.15s ease;
  font-weight: 500;
  text-align: center;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
}

.massage-dropdown-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* notification dropdown  */

.notify--dropdown-menu {
  background-color: #424242 !important;
  position: absolute;
  margin-top: 0.5rem;
  width: 355px;
  border-radius: 4px;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: none;
  transform-origin: top right;
  top: 43px;
  right: 40px;
  color: white !important;
}

.notify--dropdown-menu a {
  display: block;
  padding: 8px;
  font-size: 12px;
  color: var(--text-light);
  text-decoration: none;
  transition: background-color 0.15s ease;
  font-weight: 500;
  text-align: center;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
}

.notify--dropdown-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* entry row design  */



.cell {
  padding: 4px 6px;
  line-height: 1.2;
  word-break: break-all;
}

.sub {
  font-size: 11px;
  opacity: 0.7;
}

.red {
  color: #ff5858 !important;
}

.icons .icn,
.action-icons .icn {
  background: transparent;
  border: 1px solid var(--icon-border-color);
  color: #4da3ff;
  padding: 5px 8px;
  font-size: 14px;
  margin-right: 4px;
  border-radius: 4px;
  cursor: pointer;
}

.icons .icn:hover,
.action-icons .icn:hover {
  background: var(--dashboaard-tabs-bg);
}

.complaint-text {
  font-size: 12px;
}

.history-row-icons {
  display: flex;
  /* justify-content: center; */
}

.history-row-icons .icn {
  margin-right: 0;
  border-radius: 2px;
  border-right: 0;
}

.history-row-icons .icn i {
  font-weight: 600;
}

.action-icons,
.reports,
.status {
  text-align: end;
}

.action-icons .icn {
  margin-right: 0 !important;
  border: 0;
  padding: 5px 6px;
  font-size: 13px;
}

.action-icons .icn i {
  font-weight: 600;
}

.icn-1,
.icn-2 {
  background: transparent;
  border: 1px solid #494949;
  color: #494949;
  padding: 5px 8px;
  font-size: 14px;
  margin-right: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 0;
  border-radius: 2px;
  /* border-right: 0; */
}

.icn-2 {
  border-right: 1px solid #494949;
}







/* history model  */

.history-modal-container {
  z-index: 100;
  /* Higher Z-index for the dark timeline */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1052;
}

.history-modal-content {
  background-color: #333333;
  /* Dark background */
  color: #f0f0f0;
  padding: 1.5rem;
  max-width: 650px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.history-modal-header {
  margin-bottom: 1.5rem;
  /* border-bottom: 1px solid #555; */
  padding-bottom: 0.75rem;
}

.history-modal-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--table-title-color);
}

.history-modal-header .modal-close-btn {
  color: #aaa;
}

.history-modal-header .modal-close-btn:hover {
  color: white;
}

.history-timeline {
  padding: 0 0 1rem 0;
  position: relative;
}

.timeline-event {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  /* Left content, Timeline middle, Right content */
  gap: 10px;
  margin-bottom: 25px;
  align-items: center;
}

.timeline-left {
  text-align: right;
  padding-right: 20px;
}

.timeline-right {
  text-align: left;
  padding-left: 20px;
}

.timeline-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
}

.timeline-center::before {
  content: '';
  position: absolute;
  top: -23px;
  bottom: -19px;
  width: 3px;
  background-color: #c5c5c5;
  z-index: 1;
}

.timeline-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--table-title-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  position: relative;
  z-index: 5;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border: 1px solid #007bff;
  background: var(--color-bg-light);
}

/* Specific dot colors based on the image */


.timeline-bubble {
  background-color: var(--color-bg-light);
  /* Darker than content but lighter than modal bg */
  padding: 0.75rem 1rem;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--table-title-color);
}

.timeline-bubble.left {
  margin-right: 0.5rem;
}

.timeline-bubble.right {
  margin-left: 0.5rem;
}

.event-details {
  font-size: 0.8rem;
  color: var(--event-details-color);
  margin-top: 0.25rem;
}

.history-footer {
  padding-top: 1rem;
  /* border-top: 1px solid #555; */
  display: flex;
  justify-content: end;
  gap: 1rem;
}

/* Custom buttons for history modal footer */
.history-btn {
  padding: 10px 15px;
  border-radius: 0.5rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.history-btn.dashboard {
  background-color: #d7d7d7;
  color: #121212;
}


.history-btn.study {
  background-color: #e91e63;
  /* Pink/Magenta */
  color: white;
}

.history-btn.study:hover {
  background-color: #d81b60;
}

.history-btn.close {
  background-color: #1e88e5;
  /* Indigo */
  color: white;
}

/* chat popup  */
/* popup area start  */
/*    .modal{top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;z-index:9999;}
             .hidden{display:none;}*/
.modal-box label {
  width: 180px;
  font-size: 15px;
  margin: 0px 2px;
  color: var(--profile-icons);
}

.modal-box label span {
  background: var(--color-bg-light);
  position: relative;
  left: 10px;
  top: 12px;
  font-size: 12px;
}

.modal-box {
  background: var(--color-bg-light) !important;
  padding: 20px;
  border-radius: 6px;
  width: 600px;
  color: #fff;
}

.modal-box form textarea {
  background: transparent;
  color: var(--table-title-color);
}

/* .modal-box form select{
   background: var(--color-bg-light) !important;
   color: var(--table-title-color);
   padding: 10px 12px;
   border: 1px solid #505050;
   font-size: 14px;
} */

.modal-box form button {
  background-color: var(--new-btn-color);
  color: var(--color-text-light);
  padding: 10px 26px;
  border-radius: 6px;

}

.modal-box form button:hover {
  background-color: var(--new-btn-color-hover);
}

.modal-box input {
  width: 100%;
  padding: 6px;
  margin-top: 4px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #757575;
  background: transparent;
  color: var(--table-title-color);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.save-btn {
  /* background: transparent; */
  background: var(--new-btn-color);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid #757575;
  font-size: 12px;
  margin-top: 8px;
}

.save-btn i {
  margin-right: 5px;
}

.close-btn {
  background: transparent;
  color: var(--new-btn-color);
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 12px;
}


/* Overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1052;
}

/* Popup box */
.popup-box {
  background: var(--color-bg-light);
  color: var(--table-title-color);
  width: 600px;
  padding: 25px;
  border-radius: 10px;
  /* color: white; */
  box-shadow: 0px 0px 10px #00000080;
}

.popup-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--table-title-color);
}

/* Message Input */
.msg-box {
  margin-top: 20px;
  background: var(--color-bg-light);
  color: var(--table-title-color);
  padding: 10px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.msg-icon {
  font-size: 18px;
  margin-right: 10px;
}

.msg-box input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--table-title-color);
  font-size: 15px;
}

.msg-send {
  font-size: 17px;
  padding-left: 10px;
  cursor: pointer;
  color: #d6325a;
  border-left: 1px solid gray;
}



/* Hidden */
.hidden {
  display: none;
}


/* password update popup  */

/* Overlay */
.pwd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1052;
}

.pwd-hide {
  display: none;
}

/* Popup Box */
.pwd-box {
  background: var(--color-bg-light);
  padding: 30px;
  width: 600px;
  border-radius: 8px;
  color: var(--table-title-color);
}

/* Title */
.pwd-title {
  font-size: 17.14px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Input Row */
.pwd-input-row {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

/* Inputs */
.pwd-input {
  /* flex: 1; */
  padding: 12px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid #666;
  color: var(--table-title-color);
  font-size: 14px;
  cursor: text;
}

/* Action Buttons */
.pwd-actions {
  display: flex;
  justify-content: end;
}

.pwd-submit {
  background: none;
  border: none;
  color: var(--new-btn-color);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.pwd-close {
  background: none;
  border: none;
  color: #ff0077;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

/* signature update  */

.sig-modal {
  background: rgba(255, 255, 255, 0.6);
}

.sig-hide {
  display: none !important;
}

.sig-box {
  background: var(--color-bg-light);
  width: 600px;
  padding: 25px;
  border-radius: 6px;
  color: var(--table-title-color);
}

.sig-title {
  font-size: 17.14px;
  margin-bottom: 24px;
  font-weight: 500;
}

.sig-sub {
  font-size: 13.71px;
  margin-bottom: 25px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  color: var(--table-title-color);
}

.sig-field {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.sig-input {
  width: 100%;
  padding: 14px 12px;
  font-size: 16px;
  color: var(--table-title-color);
  background: var(--color-bg-light);
  border: 1px solid var(--profile-icons);
  border-radius: 5px;
  cursor: text;
}

.sig-input:focus {
  border-color: var(--new-btn-color);
  outline: none;
}

/* Default Label */
.sig-label {
  position: absolute;
  top: 14px;
  left: 12px;
  font-size: 14px;
  color: var(--profile-icons);
  pointer-events: none;
  transition: 0.2s ease;
}

/* CLICK / FOCUS par label upar chala jaaye */
.sig-input:focus+.sig-label {
  top: -8px;
  left: 8px;
  font-size: 12px;
  background: var(--color-bg-light);
  padding: 0 6px;
  color: var(--new-btn-color);
}

/* If value filled -> label stays at top */
.sig-input:not(:placeholder-shown)+.sig-label {
  top: -8px;
  left: 8px;
  font-size: 12px;
  background: var(--color-bg-light);
  padding: 0 6px;
  color: var(--table-title-color);
}

.sig-file {
  background: var(--color-bg-light);
  color: var(--table-title-color);
  margin-bottom: 27px;
  font-size: 13px;
  cursor: pointer;
}

.sig-labels {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 500;
  color: var(--table-title-color);
  column-gap: 240px;
}

.sig-submit {
  width: 100%;
  padding: 6px 16px;
  background: var(--new-btn-color);
  border: none;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
}

.sig-close {
  color: var(--new-btn-color);
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
}

.sig-submit:hover {
  background-color: var(--new-btn-color-hover);
}

/* .sig-close:hover {
  background-color: var(--new-btn-color-hover);
} */

/* update desclaimer  */

/* Background Overlay */
.upd-disc-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}



/* Popup Box */
.upd-disc-box {
  width: 520px;
  background: var(--color-bg-light);
  padding: 25px;
  border-radius: 8px;
  color: var(--table-title-color);
}

/* Heading */
.upd-disc-title {
  font-size: 20px;
  margin-bottom: 25px;
}

.upd-disc-sub {
  text-align: center;
  font-size: 14px;
  margin-bottom: 18px;
  color: var(--table-title-color);

}

/* Label */
.upd-disc-label {
  font-size: 14px;
  color: var(--table-title-color);
  margin-bottom: 6px;
  display: block;
}

/* Input + Button row */
.upd-disc-inputbox {
  width: 100%;
  border: 1px solid #777;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  margin-bottom: 20px;
  background: var(--color-bg-light);
}

.upd-disc-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--table-title-color);
  font-size: 14px;
}

/* ADD DISCLAIMER button inside input */
.upd-disc-btn {
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.upd-disc-btn i {
  margin-right: 5px;
}

/* Submit Button */
.upd-disc-submit,
.upd-disc-disclaimer {
  width: 100%;
  background: var(--new-btn-color);
  border: none;
  padding: 6px 16px;
  color: white;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 12px;
  font-weight: 500;
}

.upd-disc-submit,
.upd-disc-disclaimer:hover {
  background: var(--new-btn-color-hover);
}

/* .upd-disc-disclaimer {
  background: transparent;
  border: 1px solid gray;
} */

/* Close link */
.upd-disc-close {
  text-align: right;
  display: block;
  font-size: 13px;
  color: #ff4f8b;
  cursor: pointer;
}

.upd-disc-close:hover {
  background-color: rgba(33, 150, 243, 0.1);
}


/* FULL SCREEN DISCLAIMER POPUP */
.full-disc-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.70);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.full-disc-box {
  width: 100%;
  height: 100%;
  background: #3b3b3b;
  border-radius: 6px;
  padding: 35px 20px 60px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.full-disc-title {
  color: white;
  margin-bottom: 10px;
  font-size: 20px;
}

#fullDisclaimerEditor {
  width: 100%;
  height: 100%;
  background: white;
  border: none;
  resize: none;
  padding: 0;
}

.full-disc-footer {
  position: absolute;
  bottom: 15px;
  right: 20px;
  display: flex;
  gap: 10px;
}

.full-disc-save {
  background: #2196f3;
  border: none;
  padding: 10px 20px;
  color: white;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.full-disc-close {
  background: #ff0055;
  border: none;
  padding: 10px 20px;
  color: white;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}


/* Update report margins  */
.margin-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.margin-popup.hidden {
  display: none;
}

.margin-popup-box {
  width: 600px;
  background: var(--color-bg-light);
  color: var(--table-title-color);
  padding: 25px;
  border-radius: 6px;
}

.margin-title {
  color: var(--table-title-color);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}



.margin-popup-box input {
  background: var(--color-bg-light);
  color: var(--table-title-color);
  padding: 10px 12px !important;
  font-size: 13.71px !important;
}


.margin-file {
  margin: 20px 0;
  /* padding: 10.5px 14px; */
  font-size: 14px;
  /* border: 1px solid gray; */
  border-radius: 4px;
}

.margin-submit {
  width: 100%;
  padding: 10px;
  background: var(--new-btn-color);
  border: none;
  color: white;
  border-radius: 5px;
  margin-top: 15px;
  cursor: pointer;
}

.margin-close-btn {
  background: none;
  color: #2196f3;
  border: none;
  margin-top: 15px;
  cursor: pointer;
  float: right;
  font-size: 13px;
}

.margin-close-btn:hover {
  background-color: rgba(33, 150, 243, 0.1);
}

/* study table setting  */
/* Modal Background */
.custom-modal {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Modal Box */
.custom-modal-content {
  background: var(--color-bg-light);
  color: var(--table-title-color);
  width: 600px;
  padding: 25px;
  border-radius: 8px;
  animation: fadeIn 0.3s ease-in-out;
}

.custom-modal-content h2 {
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 18px;
}

.subtitle {
  font-size: 13.71px;
  margin-bottom: 40px;
  color: var(--table-title-color);
  text-align: center;
}

.custom-modal-content label {
  font-size: 13.71px;
  color: var(--table-title-color);
}





@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.custom-modal.hidden {
  display: none;
}

.study-table-span {
  display: flex;
  margin-bottom: 18px;
  font-size: 11px;
  color: var(--table-title-color);
}

.study-settings .form-group-roles {
  max-width: 300px;
}

.study-settings .form-group-roles label {
  font-size: 13.71px;
  color: var(--table-title-color);
}

.study-settings .form-group-roles select {
  width: 180px;
  border: 0;
  background: transparent !important;
  border-bottom: 1px solid var(--profile-icons);
  border-radius: 0;
  color: var(--select-color);
  font-size: 15px;
  padding-left: 0;
  font-weight: 400;
}

.study-settings .form-group-roles select option {
  background: var(--color-bg-light);
  color: var(--select-color) !important;
  border: 0;
}


/* report editor  */

.reporteditor-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.reporteditor-overlay.hidden {
  display: none;
}

/* Toggle Switch */
.toggle-group {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  align-items: center;
}

.toggle-group span {
  font-size: 13.71px;
  color: var(--table-title-color);
}

.switch {
  position: relative;
  width: 26px;
  height: 10px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #888;
  border-radius: 20px;
  transition: .3s;
}

.slider:before {
  content: "";
  height: 16px;
  width: 16px;
  background: white;
  position: absolute;
  top: -3px;
  left: -2px;
  border-radius: 50%;
  transition: .3s;
}

input:checked+.slider {
  background: #ff0055;
}

input:checked+.slider.slider-red {
  background: #ff0055;
}

input:checked+.slider:before {
  transform: translateX(12px);
}

.reporteditor-overlay .popup-box h2 {
  font-size: 20px;
}


/* Contact Info Popup edit  */

.ci-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.ci-overlay.hidden {
  display: none;
}

.ci-popup {
  width: 600px;
  background: var(--color-bg-light);
  color: var(--table-title-color);
  padding: 25px;
  border-radius: 8px;
  /* color: #fff; */
}

.ci-popup h2 {
  margin-bottom: 8px;
  font-size: 18px;
}

.ci-subtitle {
  text-align: center;
  color: var(--table-title-color);
  margin-bottom: 20px;
}

.ci-field {
  margin-bottom: 15px;
  padding-top: 23px;
}

.ci-field label {
  display: block;
  margin-bottom: 0x;
  color: var(--table-title-color);
  font-size: 14px;
  font-weight: 600;
}

.ci-field input {
  /* width:100%; */
  background: transparent;
  border: none;
  border-bottom: 1px solid #aaa;
  padding: 6px 0;
  color: var(--table-title-color);
  margin-right: 30px;
}

.ci-upload-btn {
  margin-top: 8px;
  background: #6b6b6b;
  color: var(--table-title-color);
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: not-allowed;
  transition: 0.3s;
  font-size: 13px;
  font-weight: 600;
}

.ci-upload-btn.active {
  background: #2196f3;
  color: var(--table-title-color);
  cursor: pointer;
}

.ci-submit-btn {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: var(--new-btn-color);
  color: var(--table-title-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.ci-close-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  background: none;
  color: #4da3ff;
  border: none;
  cursor: pointer;
}


/* Customize Table Columns popup  */
.ctc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ctc-overlay.hidden {
  display: none;
}

.ctc-modal {
  width: 520px;
  background: var(--color-bg-light);
  color: var(--table-title-color);
  padding: 24px;
  border-radius: 6px;
}

.ctc-modal h2 {
  margin: 0 0 20px;
  font-size: 18px;
}

.ctc-subtitle {
  text-align: center;
  font-size: 13px;
  color: var(--table-title-color);
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.00938em;
}

.ctc-info {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--table-title-color);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.00938em;
}

.ctc-select {
  padding: 7px;
  background: var(--color-bg-light);
  color: var(--select-color);
  border: 1px solid #666;
  /* color: #fff; */
  border-radius: 4px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
}


.visible {
  display: flex;
  /* ya block – jo aap use kar rahe ho */
}

/* Report Summary popup  */

.summary-ctc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* .summary-ctc-modal.hidden {
    display: none;
} */

.summary-ctc-content {
  background: #3f3f3f;
  color: #fff;
  width: 650px;
  padding: 20px;
  border-radius: 6px;
}

.summary-ctc-content h2 {
  font-size: 17.14px;
}

.summary-ctc-subtitle {
  font-size: 13px;
  color: #bbb;
  margin-bottom: 15px;
  font-weight: 500;
}

.summary-ctc-label {
  font-size: 13px;
  display: block;
  margin-bottom: 5px;
}

.summary-ctc-select {
  width: 100%;
  padding: 8px;
  background: #4b4b4b;
  border: none;
  color: #fff;
  margin-bottom: 20px;
}

.summary-ctc-columns {
  display: grid;
  grid-template-columns: 2fr;
  gap: 15px;
}

.sortable-col {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap;
}

.summary-ctc-item {
  width: 288px;
  background: #4a4a4a;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
}

.summary-ctc-item:active {
  cursor: grabbing;
}

.report-table-input {
  width: auto;
  padding: 8px;
  font-size: 15px;
}

.drag {
  font-size: 18px;
  opacity: 0.6;
}

.toggle {
  width: 32px;
  height: 16px;
  background: #888;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
}

.toggle::after {
  content: "";
  width: 14px;
  height: 14px;
  background: #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 50%;
  transition: 0.2s;
}

.toggle.on {
  background: #2196f3;
}

.toggle.on::after {
  left: 17px;
}

.drag-ghost {
  opacity: 0.4;
}

.drag-chosen {
  background: #616161;
}

/* body.sidebar-expanded .main-content .table-header-row {
  grid-template-columns: 83px 111px 111px 111px 101px 337px 133px 128px 300px 320px 320px 32px 38px 104px;
}

body.sidebar-expanded .main-content .table-main .report-row {
  grid-template-columns: 83px 111px 111px 111px 101px 337px 133px 128px 300px 300px 300px 32px 38px 104px;
}

body.sidebar-expanded .main-content .table-header-row-2 {
  grid-template-columns: 70px 96px 96px 96px 97px 305px 110px 110px 110px 110px 100px 40px 40px 60px;
} */

/* .logo-section {
  padding: 0 16px;
} */

.logo-section img {
  width: 140px;
  margin-right: 10px;
  /* background-color: white */
}


/* The button that opens the popup */


.sv-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.sv-popup.hidden {
  display: none;
}

.sv-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.sv-popup-box {
  position: relative;
  width: 100%;
  height: 100%;
  /* Matching dark theme from the original image/context */
  background: var(--color-bg-light);
  margin: auto;
  display: flex;
  flex-direction: column;
}

/* Header */
.sv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #333;
  color: var(--table-title-color);
  flex-shrink: 0;
}

.sv-close {
  cursor: pointer;
  font-size: 22px;
  padding: 5px;
  line-height: 1;
}

/* Body */
.sv-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Sidebar */
.sv-sidebar {
  width: 300px;
  min-width: 250px;
  background: var(--color-bg-light);
  border-right: 1px solid #333;
  overflow-y: auto;
  flex-shrink: 0;
}

.sv-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sv-sidebar li {
  padding: 12px 16px;
  color: var(--table-title-color);
  cursor: pointer;
  border-bottom: 1px solid #333;
  transition: background 0.1s;
  font-size: 0.9em;
}

/* Active style matching the original design context */
.sv-sidebar li.active {
  background: var(--dashboaard-tabs-bg);
  color: var(--table-title-color);
  font-weight: 600;
  border-left: 5px solid #007bff;
  padding-left: 11px;
}

.sv-sidebar li:hover:not(.active) {
  background: var(--dashboaard-tabs-bg);
  color: var(--table-title-color);
}

/* Content (Video Display Area) */
.sv-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  color: var(--table-title-color);
  background: var(--color-bg-light);
  /* Slightly darker background for content area */
  overflow: hidden;
}

.sv-content h2 {
  font-size: 1.6em;
  margin-top: 0;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.sv-video {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--color-bg-light);
}

/* iframe should be visible and fill the container */
.sv-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* Removed all thumbnail/play button related styles (.yt-thumb, .yt-play-btn, etc.) */

/* Responsive adjustments */
@media (max-width: 768px) {
  .sv-body {
    flex-direction: column;
  }

  .sv-sidebar {
    width: 100%;
    height: 30vh;
    border-right: none;
    border-bottom: 1px solid #333;
  }

  .sv-content {
    padding: 10px;
  }
}



.report-list-title {
  padding: 20px;
  margin: 0;
  padding-bottom: 0;
  font-weight: 500;
}


/* ================= STATUS DASHBOARD RESPONSIVE ================= */

/* Mobile first */
@media (max-width: 767px) {

  .left-sidebar {
    display: none;
  }

  .profile-section span {
    display: none;
  }

  body.sidebar-expanded .left-sidebar {
    display: flex;
  }


  .table-wrap {
    overflow: auto;
  }

  #headerLogoText img {
    width: 100px;
  }

  #settings-menu {
    right: 0;
  }

  body.sidebar-expanded .navbar {
    flex-wrap: nowrap !important;
  }

  .main-profile-section #profile-container {
    width: 50px;
  }

  #mainContentView {
    overflow-x: auto;
  }

  /* .entry-area {
    overflow: auto;
  } */

  .modal-box {
    width: auto;
  }

  .fixed-top {
    padding: 0 5px;
  }

  .logo-section {
    padding: 0;
  }

  .dashboard-tabs {
    padding: 0 20px;
  }

  .dashboard-tabs .tab-item {
    width: 105px;
  }

  .pagination-footer {
    width: 100%;
    left: 0;
  }

  body.sidebar-expanded .pagination-footer {
    left: 240px;
  }

  .report-row {
    grid-template-columns: repeat(5, 112px) 322px repeat(5, 116px) 100px;
    width: fit-content;
  }

  .table-header-row {
    grid-template-columns: repeat(5, 112px) 315px repeat(5, 111px) 122px;
    width: fit-content;
  }

  .massage-dropdown-menu {
    width: 326px;
    right: 10px;
  }

  #editModal .modal-box label {
    width: 150px !important;
  }

  #historyModal .modal-box {
    width: 355px;
    padding: 10px;
  }

  .timeline-bubble {
    padding: 8px;
    font-size: 12px;
  }

  .timeline-right {
    padding-left: 0;
  }

  .timeline-event {
    grid-template-columns: 135px 50px 1fr;
  }

  .history-btn.dashboard,
  .history-btn.study,
  .history-btn.close {
    font-size: 12px;
  }

  .sortable-col {
    gap: 15px;
  }

  .summary-ctc-item {
    width: 185px;
  }

  .pwd-box {
    width: 341px;
  }

  .pwd-input-row {
    flex-wrap: wrap;
  }

  .pwd-input-row input {
    width: 250px;
  }

  .top-bar input {
    width: 135px;
  }

  .top-bar button {
    margin: 0;
    font-size: 13px;
  }

  .dashboard-chart-area {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  body.sidebar-expanded .dashboard-chart-area {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  body.sidebar-expanded .stats-row {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  }

  .dropdown-menu {
    left: -180px !important;
  }

  .editor-top-bar {
    flex-wrap: wrap;
    row-gap: 20px;
  }

}

/* Tablet */

.main-profile-section svg {
  fill: var(--profile-icons);
}

.user-creation-form .form-group-roles .form-select {
  padding: 0 26px !important;
  --bs-form-select-bg-img: url() !important;
  background-color: var(--color-bg-light) !important;
  color: var(--select-color) !important;
  padding-left: 14px !important;
}



/* login page start  */

/* Custom Dark Form Input/Text Colors */
.login-content .login-card .form-control {
  border: none !important;
  border-bottom: 1px solid #334155 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
}



.login-content .login-card .form-floating>.form-control {
  padding: 30px 0 5px !important;
}

.login-content .login-card .form-floating>label {
  padding: 0 0 5px !important;
  align-content: end;
}



.login-content .login-card .form-control,
.form-control:focus {
  background-color: transparent !important;
  border: none;
  border-bottom: 1px solid #505050;
  color: var(--table-title-color) !important;
  box-shadow: none !important;
  padding-left: 0;
  border-radius: 0;
}


.login-content .login-card .form-label {
  color: #a0a0a0 !important;
  /* Original muted text color */
  font-size: 0.875rem;
  margin-bottom: 0 !important;
}

.login-content .login-card .form-floating>.form-control:not(:placeholder-shown)~label.label-set {
  padding-bottom: 20px !important;
  font-size: 11.71px;
  border: 0 !important;
}

.login-content .login-card .form-floating>.form-control:not(:placeholder-shown)~.label-set::after {
  background-color: transparent !important;

}



.login-content .login-card .form-floating>.form-control:focus~label.label-set {
  padding-bottom: 20px !important;
  font-size: 11.71px;
  border: 0 !important;
}

.login-content .login-card .form-floating>.form-control:focus {
  border-bottom: 2px solid #1e88e5 !important;
}

/* .nandico-logo-text {
            font-size: 2rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: lowercase;
            margin: 0;
        } */

/* Custom button colors to match original design */
.login-content .login-card .btn-primary {
  background-color: #1e88e5 !important;
  border-color: #1e88e5 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* border-radius: 0.5rem !important; */
}

.login-content .login-card .btn-primary:hover {
  background-color: rgb(56, 72, 149);
  border-color: rgb(56, 72, 149);
}

#form-btn {
  padding: 5px 16px;
  font-size: 0.75rem;
  min-width: 64px;
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  line-height: 1.75;
  border-radius: 4px !important;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
  background-color: #5068D5 !important;
  border-color: #5068D5;
}

#form-btn:hover {
  background-color: rgb(56, 72, 149) !important;
  border-color: rgb(56, 72, 149) !important;
}

.login-content .login-card .form-floating>label {
  color: #a0a0a0 !important;
  font-size: 14px;
  /* Position label correctly for the floating effect */
  /* padding: 1rem 0; */
}

/* Adjust floating label text color when focused/filled */
.login-content .login-card .form-floating>.form-control:focus~label,
.login-content .login-card .form-floating>.form-control:not(:placeholder-shown)~label,
.login-content .login-card .form-floating>.form-select:focus~label,
.login-content .login-card .form-floating>.form-select:not([value=""]):valid~label {
  /* Change label color to primary blue when active/focused */
  color: #1e88e5 !important;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  padding: 1rem 0 !important;
}

.login-content .login-card .form-floating>.form-control:focus~label::after {
  background: transparent !important;
}

/* Using btn-info for the secondary button to match the light blue */
.login-content .login-card .btn-info {
  background-color: #1e88e5 !important;
  border-color: #1e88e5 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.login-content .login-card .btn-info:hover {
  background-color: #1565c0 !important;
  border-color: #1565c0 !important;
}

.login-content .login-card .or-separator {
  color: #a0a0a0;
  font-size: 0.875rem;
  margin-bottom: 16px;
  /* margin: 1.5rem 0; */
}

.login-content .login-card .or-separator::before,
.login-content .login-card .or-separator::after {
  content: '';
  flex-grow: 1;
  border-bottom: 1px solid #505050;
  margin: 0 1rem;
}

.login-content .login-card .footer-links p {
  color: #000000b3;
  font-size: 0.75rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  text-align: center;
  margin-top: 64px;
}



.table-data-title {
  color: var(--table-title-color);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.00938em;
  margin-top: 8px;
  margin-left: 15px;
  font-size: 13.71px;
  margin-bottom: 0;
}


.error {
  color: red;
}

.chat-input {
  border: 1px solid rgb(187, 187, 187);
}

.span-text {
  font-size: 12px;
  color: var(--table-title-color);
}

.left-sidebar-top,
.left-sidebar-bottom {
  width: var(--sidebarnew-width);
  /* padding-top: 10px; */
}

.card-select select {
  background: var(--color-bg-light);
  color: var(--select-color);
}


.card-footer button {
  background-color: var(--new-btn-color);
  color: var(--color-text-light);
  padding: 10px 26px;
  border-radius: 6px;
}

/* dashboard page  */

.page .dashboard {
  padding: 20px;
  /* background: radial-gradient(circle at top, #1b1f27, #0b0d11);
  min-height: 100vh;
  color: #e5e7eb; */
}

/* STATS */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  /* background-color: rgba(255, 255, 255, 0.2); */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 20px 40px var(--table-head-bg);
}

.stat-card h3 {
  margin: 0;
  font-size: 24px;
}

.stat-card span {
  font-size: 13px;
  color: #9ca3af;
}



/* COLOR STRIP */
.green {
  border-left: 4px solid #22c55e;
}

.orange {
  border-left: 4px solid #f59e0b;
}

.purple {
  border-left: 4px solid #a855f7;
}

.blue {
  border-left: 4px solid #5855f7;
}

/* CONTENT */
.content-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.glass-box {
  border-radius: 16px;
  padding: 18px;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 30px 60px var(--table-head-bg);
  max-width: 100%;
}

/* CHART */
/* .chart-box {
  height: 260px;
} */

/* canvas {
  width: 100% !important;
  height: 100% !important;
} */

canvas#statusPieChart {
  width: 360px !important;
  height: 360px !important;
  margin: auto !important;
}

/* ACTIVITY */
.activity-box h4 {
  margin-bottom: 12px;
}

.activity-box li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px;
}

/* RESPONSIVE */
@media(max-width: 900px) {
  .content-row {
    grid-template-columns: 1fr;
  }
}

.page .card .card-header {
  background-color: var(--dashboaard-tabs-bg) !important;
  color: var(--table-title-color);
}

.page .card .card-body .card-select {
  justify-content: space-between;
}

.page .card .card-body .card-select input {
  background: var(--color-bg-light);
  border: 1px solid #555;
  color: var(--table-title-color);
  cursor: text;
}

.card form input {
  color: var(--table-title-color);
  background: var(--color-bg-light);
}

.card table .edit {
  /* background-color: var(--new-btn-color); */
  background-color: #7367f0;
  color: #fff;
}

.card table .edit:disabled {
  background-color: #afafaf;
}

.card table .danger {
  background-color: rgb(139, 0, 0);
  color: #fff;
}

/* admin accounts  */

.btn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}


/* Colors */
.account-action-btn .btn.info {
  background: #0dcaf0;
  color: #000;
}

.account-action-btn .btn.warning {
  background: #ffc107;
  color: #000;
}

.account-action-btn .btn.danger {
  background: #dc3545;
  color: #fff;
}

.account-action-btn .btn.success {
  background: #198754;
  color: #fff;
}

.account-action-btn .btn.teal {
  background: #20c997;
  color: #000;
}



.card .table-wrap .btn-grid .small {
  font-size: 13px;
}

.pdf {
  border: none;
}

.pdf svg {
  fill: #ff402f;
}

.pdf:hover {
  background: none !important;

}

.p-label {
  font-size: 12px;
  color: var(--table-title-color);
}

.p-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--table-title-color);
}

.p-sub {
  font-size: 12px;
  color: #8f8f8f;
}

/* ✅ Template section */
.template-box {
  background: var(--color-bg-light);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.dark-select {
  background-color: var(--color-bg-light) !important;
  color: var(--table-title-color) !important;
  padding: 8px 12px;
  border: 1px solid #505050;
  font-size: 14px;
}

.ck-reset_all :not(.ck-reset_all-excluded *),
.ck.ck-reset,
.ck.ck-reset_all,
.ck.ck-editor__main>.ck-editor__editable {
  background: var(--color-bg-light) !important;
  color: var(--table-title-color) !important;
}

/* ✅ CKEditor Dark */
:host ::ng-deep .ck-editor__editable {
  min-height: 60vh;
  background: var(--color-bg-light) !important;
  color: var(--table-title-color) !important;
  border: 1px solid #444 !important;
}

:host ::ng-deep .ck-toolbar {
  background: var(--color-bg-light) !important;
  border: 1px solid #444 !important;
}


.thumbnails {
  overflow-y: auto !important;
  padding: 10px !important;
  background: var(--dashboaard-tabs-bg) !important;
  border-radius: 0 !important;

}

.thumbnailSelector {
  margin: 0 !important;
  width: auto !important;
}

dicom-viewer .btn-group {
  background: var(--dashboaard-tabs-bg) !important;
  width: 100% !important;
  border-radius: 0 !important;

}

dicom-viewer .btn-default {
  background-color: transparent !important;
  color: var(--profile-icons) !important;
  border-color: #ffffff63 !important;
  font-size: 17pt !important;
}

dicom-viewer .btn-group .btn-group {
  width: auto !important;
}

a.list-group-item {
  width: fit-content;
}

.csthumbnail {
  width: 131px !important;
  height: 77px !important;
}




.ticket-info {
  padding: 10px;
}

.ticket-info td {
  color: var(--table-title-color);
}

.reply-box {
  color: var(--table-title-color);
  padding: 10px;
}

.modal-box .section-title {
  padding: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
}

button.secondary {
  background-color: #000000 !important;
}

.modal-box h2 .btn-close {
  font-size: 15px;
}

/* Professional Dark Tooltip */
.sidebar-tooltip {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  font-size: 12px !important;
  /* padding: 6px 12px !important; */
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  /* z-index: 99999 !important; */
}

::ng-deep .mat-mdc-tooltip-trigger {
  z-index: 9999 !important;
}


.modal-box table td {
  color: var(--table-title-color);
}

.modal-box table tbody tr:nth-of-type(odd) {
  background-color: var(--table-bg-odd);

}

dicom-viewer .btn-group button.custom-active {
  color: #5068d5 !important;
  border-bottom: 2px solid #5068d5 !important;
}



.page-loader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100000; /* 🔥 modal se bhi upar */
}


.spinner {
  width: 45px;
  height: 45px;
  border: 5px solid #e0e0e0;
  border-top: 5px solid #3f51b5;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.page-loader p {
  margin-top: 12px;
  font-weight: 500;
  color: #444;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.blur {
  filter: blur(2px);
  pointer-events: none;
}