/* Global Styles & Variables */
:root {
  --bg-color: linear-gradient(135deg, #eef3f7, #ffffff);
  --primary-color: #0072C5;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
  --font-color: #333;
  --card-bg: #fff;
  --label:#777;
  --card-border-color: #ddd;
   --border-color: #374151;
  
  --header-bg: #0056b3;
  --header-color: #fff;
  --input-bg: #fff;
  /* --btn-primary-bg: #28a745;
  --btn-primary-hover-bg: #218838;
  --btn-secondary-bg: #dc3545;
  --btn-secondary-hover-bg: #c82333; */
  --status-green: #28a745;
  --status-yellow: #ffc107;
  --status-purple: #8a2be2;
  --status-red: #dc3545;
  --btn-primary-bg: #007bff;
  /* Bright blue */
  --btn-primary-hover-bg: #0056b3;
  /* Darker blue on hover */
  --btn-secondary-bg: #6c757d;
  /* Gray tone */
  --btn-secondary-hover-bg: #5a6268;
  /* Darker gray on hover */
  --text-color: #212529;
  --background-color: #ffffff;
  --accent-color: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.25);
  --btn-start: #2563eb;
  --btn-end: #3b82f6;
}

/* Kendo dropdown/list styling to match app blue theme */
.k-list-container .k-list .k-item,
.k-animation-container .k-list .k-item {
  color: var(--text-color);
}

/* hovered item */
.k-list .k-item.k-state-hover,
.k-list .k-item:hover,
.k-animation-container .k-list .k-item.k-state-hover {
  background: var(--btn-primary-bg) !important;
  color: #fff !important;
}

/* selected item */
.k-list .k-item.k-state-selected,
.k-animation-container .k-list .k-item.k-state-selected {
  background: var(--btn-primary-bg) !important;
  color: #fff !important;
}

/* Dropdown input/selection focus ring */
.k-dropdown-wrap.k-state-focused,
.k-picker-wrap.k-state-focused,
.k-dropdown-wrap:focus,
.k-picker-wrap:focus {
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  border-color: var(--btn-primary-bg) !important;
}

/* ensure calendar header/use blue accent */
.k-calendar .k-header,
.k-calendar th {
  background: var(--btn-primary-bg) !important;
  color: #fff !important;
}

.k-picker-wrap .k-input {
    display: inline;
    border-radius: 3px !important;
}


/* ---------- Dark Theme ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: linear-gradient(135deg, #1f2937, #111827);
    --card-bg: #1e293b;
    --text-color: #f9fafb;
   --border-color: #ccc;
    --label: #f9fafb;
    --input-bg: #111827;
    --accent-color: #60a5fa;
    --accent-glow: rgba(96, 165, 250, 0.3);
    --btn-start: #2563eb;
    --btn-end: #60a5fa;
    --btn-primary-bg: #3399ff;
    --btn-primary-hover-bg: #66b2ff;
    --btn-secondary-bg: #555b61;
    --btn-secondary-hover-bg: #70757a;
    --background-color: #1e1e1e;
  }
}

.MainContainerClass {
  flex: 1;
  width: 100%
}

.container-fluid {
  margin-top: 98px;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
    /* align-items: center; */
  justify-content: center;
  padding: 0px 10%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

header,
footer {
  background: #0072c5;
  color: #fff;
  padding: 1em;
  width: 100%;
}

.MidNightCensusHeaderClass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 1000;
}

.MidnightCensusDropDownBtn {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
}

.MidnightCensusDropDownOptionsClass {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  z-index: 1000;
}

.MidnightCensusDropDownOptionsClass div {
  color: black;
  padding: 12px;
  cursor: pointer;
}

.MidnightCensusDropDownOptionsClass div:hover {
  background: #eee;
}

.MidnightCensusDropDownMenu {
  position: relative;
  display: inline-block;
  font-family: Arial;
}

.MidnightCensusDropDownBtn {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
}


.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 90%;
  max-width: 400px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background-color: var(--card-bg);
}

.card {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--card-border-color);
  overflow: hidden;
}

.card-header {
  background-color: var(--header-bg);
  color: var(--header-color);
  padding: 15px 20px;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid var(--card-border-color);
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 20px;
  text-align: center;
  background-color: #f1f1f1;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}




.btn-primary {
  background-color: var(--btn-primary-bg);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}

.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg);
}
.btn-danger {
  background-color: var(--status-red);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}
.btn-Success {
  background-color: var(--status-green);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}

.btn-danger:hover {
  background-color: var(--status-red);
}
.btn-Success:hover {
  background-color: var(--status-green);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover-bg);
}


.btn-link {
  background: none;
  border: none;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  margin-left: 5px;
}

.btn-link:hover {
  color: var(--header-bg);
}

/* Warning Page */
.warning-container .card-body p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Login Page */
.login-container .form-group {
  margin-bottom: 1rem;
}

.login-container label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.login-container input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  /* Important for width */
}

.login-container .form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

/* Main Menu */
.main-menu-container .user-info {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.main-menu-container .menu-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main-menu-container .menu-item {
  display: block;
  background: #e9ecef;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  color: var(--font-color);
  font-weight: 500;
  transition: background-color 0.2s;
}

.main-menu-container .menu-item:hover {
  background-color: #d8dde2;
}

/* Observation List */
.observation-list-container {
  max-width: 1000px;
}

.list-header {
  margin-bottom: 1rem;
}

.list-header .back-link {
  text-decoration: none;
  color: var(--primary-color);
  margin-bottom: 1rem;
  display: inline-block;
}

.list-header h1 {
  text-align: center;
}

.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.search-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 250px;
}

.legend {
  display: flex;
}

/* Styles moved from ViewMidNightCensusHistoryTab.html to central stylesheet */
#frmViewMidNightCensusHistoryTab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 20px;
  overflow: visible; /* allow child scrollbars to be visible outside the form */
}

.viewMidnightCensusContainerClass {
  /* width: 56vh;
  max-width: 900px; */
  display: flex;
  flex-direction: column;
  gap: 16px;
  width:90%;
  height:100%;
  background: var(--bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 20px;
  border: 1px solid var(--border-color);
  overflow: visible; /* allow child scrollbars to be visible */
}

/* Make sure the history form and surrounding layout do not clip horizontal scrollbars */
#frmViewMidNightCensusHistoryTab, .viewMidnightCensusContainerClass {
  overflow: visible;
}

/* Prefer natural table width, but fallback to 900px to guarantee scrollbar on small screens */
.viewMidnightCensusTableWrapper table.viewMidnightCensusHistoryTableCls {
  display: table !important;
  width: auto !important;
  min-width: -webkit-max-content; /* Safari/Chrome */
  min-width: -moz-max-content; /* Firefox fallback */
  min-width: max-content;
  min-width: 858px;
  table-layout: auto !important;
}

.viewMidnightCensusTableWrapper { -webkit-overflow-scrolling: touch; }

/* --- Date Section --- */
.viewMidnightCensusDateBlockCls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.viewMidnightCensusDateCls {
  display: flex;
  flex-direction: column;
}

#frmViewMidNightCensusHistoryTab label {
  font-size: 13px;
  color: var(--text-color);
  opacity: 0.8;
}

#frmViewMidNightCensusHistoryTab input[type="date"] {
  padding: 8px;
  font-size: 15px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  outline: none;
  background: transparent;
  color: var(--text-color);
}

/* --- Radio Buttons --- */
.viewMidnightCensusRadionBtnBlockClass {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.viewMidnightCensusRadionBtnClass {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
}

.content-wrapper{
  width: 100% !important; /* Full width */
  box-sizing: border-box; /* Prevent overflow issues */
}

/* --- Table --- */
.viewMidnightCensusHistoryTableCls {
  width: 100%;
  border-collapse: collapse;
}

.viewMidnightCensusHistoryTableCls th,
.viewMidnightCensusHistoryTableCls td {
  text-align: left;
  padding: 10px;
  border: 1px solid var(--border-color);
  font-size: 14px;
}

.viewMidnightCensusHistoryTableCls th {
  background: #428bca;
  color: #f5f5f5;
  text-align: center;
}

.viewMidnightCensusActionBtnClass {
  padding: 8px 14px;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  margin-right: 6px;
  cursor: pointer;
}

.viewMidnightCensuseViewBtnClass { background: #eee; color: #223; }
.viewMidnightCensuseEditBtnClass { background: #89c2d9; color: #fff; }
.viewMidnightCensusDeleteBtnClass { background: #008CBA; color: #fff; }

/* --- Pagination --- */
.viewMidnightCensusPaginationBlock {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  font-size: 15px;
  color: var(--text-color);
}

.viewMidnightCensusPaginationBtnclass {
  padding: 6px 14px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  background: var(--table-header-bg);
  color: var(--text-color);
  transition: 0.3s;
}

.viewMidnightCensusPaginationBtnclass:disabled { opacity: 0.5; cursor: not-allowed; }

.emrWebPopupHeader { display: flex; justify-content: space-between; padding: 7px; align-items: center; flex-wrap: wrap; }
.emrWebPopupheading { display: flex; align-items: center; gap: 10px; }
.emrWebModalPopupHeading { color: #fff !important; font-size: 17px !important; font-weight: normal !important; }
.emrWebIconsBlock { display: flex; align-items: center; column-gap: 5px; }
.emrWebPopupCrossMarkIconClass { height: 22px; width: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='14px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 5L4.99998 19M5.00001 5L19 19' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / cover no-repeat; cursor: pointer; display: block; }

#frmViewMidNightCensusHistoryTab input.form-control { width: 100%; margin: auto; text-align: center; }

/* Modal overlay for history view: centered, responsive, and accessible */
.ViewPopupOverlayClass {
  position: fixed;
  inset: 0; /* top/right/bottom/left */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 3000; /* ensure it's above app UI and other popups */
  padding: 1rem; /* breathing room on small screens */
  overflow-y: auto; /* scroll when content taller than viewport */
  -webkit-overflow-scrolling: touch;
  transition: opacity 180ms ease;
  pointer-events: auto;
}

/* optional utility classes to toggle visibility */
.ViewPopupOverlayClass.closed { opacity: 0; pointer-events: none; }
.ViewPopupOverlayClass.open { opacity: 1; pointer-events: auto; }

@media (max-height: 480px) {
  .ViewPopupOverlayClass { align-items: flex-start; padding-top: 1.25rem; }
}

/* Prevent body scroll when modal open (toggle with .modal-open on body from JS if available) */
body.modal-open { overflow: hidden; }

.ViewMidNightCensusContentClass {
  background: var(--background-color);
  width: 100%;
  max-width: 920px;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  overflow: hidden; /* allow internal scroll area */
}

/* header stays fixed; the body area scrolls */
.ViewMidNightCensusContentClass > .emrWebPopupHeader { flex: 0 0 auto; }
.ViewMidNightCensusContentClass > div:not(.emrWebPopupHeader) { flex: 1 1 auto; overflow-y: auto; padding: 16px; }

.ViewMidNightCensusContentClass ul { list-style: none; padding: 0; margin: 0; border: 2px solid #eee }
.ViewMidNightCensusContentClass li { padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color 0.2s; }
.ViewMidNightCensusContentClass li:last-child { border-bottom: none; }
.ViewMidNightCensusContentClass li:hover { background-color: #f1f1f1; }
.ViewMidNightCensusCloseBtncls { display: flex; justify-content: center; align-items: center; gap: 1rem; }

/* Ensure popups appear above Kendo widget popups too. Use explicit high stacking so modals are on top. */
.ViewPopupOverlayClass { z-index: 3000 !important; }
.ViewMidNightCensusContentClass { z-index: 3100 !important; pointer-events: auto; }

.flexbodyclass { display: flex; flex-direction: column; /* limit popup height to viewport and allow internal scrolling when content is tall */ max-height: 70vh; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

.emrWebPopupHeader { background: var(--primary-color) !important; color: #f9fafb !important; display: flex; justify-content: space-between; padding: 8px; font-size: 17px; }

/* Make popup body scrollable while preserving header/footer */
.ViewMidNightCensusContentClass>.emrWebPopupHeader { flex: 0 0 auto; }
.ViewMidNightCensusContentClass>div:not(.emrWebPopupHeader) { flex: 1 1 auto; overflow-y: auto; padding: 12px; }

.viewpopupBtnclass { display: flex; justify-content: center; gap: 10px; padding: 12px; }

/* ADP popup field layout */
.adp-flex-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
}

.adp-flex-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.adp-flex-field label {
  width: 110px; /* fixed label column */
  font-weight: 600;
  color: var(--text-color);
}

.adp-flex-field input[type=number],
.adp-flex-field input[type=text] {
  width: 160px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: var(--text-color);
}

/* make primary/secondary buttons a bit larger inside modal */
.ViewMidNightCensusContentClass .btn-primary,
.ViewMidNightCensusContentClass .btn-secondary {
  min-width: 90px;
  padding: 8px 14px;
  border-radius: 6px;
}

/* ensure cross icon remains top-right and tappable */
.emrWebIconsBlock > div { cursor: pointer; }


/* Ensure the list table can scroll horizontally when viewport is narrow */
.viewMidnightCensusTableWrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; position: relative; }
.viewMidnightCensusTableWrapper table.viewMidnightCensusHistoryTableCls { display: table !important; width: auto !important; min-width: max-content; min-width: 100%; table-layout: auto !important; }

/* scrollbar styling for better visibility on desktop */
.viewMidnightCensusTableWrapper::-webkit-scrollbar { height: 10px; }
.viewMidnightCensusTableWrapper::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 6px; }

input[type=radio] { margin: 0px !important; }
.btn { width: 70px; }

.legend-item {
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
}

.legend-item.green {
  background-color: var(--status-green);
}

.legend-item.yellow {
  background-color: var(--status-yellow);
}

/* Kendo datepicker/input placeholder visibility */
.KendoDatePickerClass::placeholder,
.k-input::placeholder,
input.KendoDatePickerClass::placeholder {
  color: rgba(0,0,0,0.45) !important;
  opacity: 1;
}

/* vendor prefixes */
.KendoDatePickerClass::-webkit-input-placeholder { color: rgba(0,0,0,0.45) !important; }
.KendoDatePickerClass:-ms-input-placeholder { color: rgba(0,0,0,0.45) !important; }
.KendoDatePickerClass::-ms-input-placeholder { color: rgba(0,0,0,0.45) !important; }
.KendoDatePickerClass::-moz-placeholder { color: rgba(0,0,0,0.45) !important; opacity:1; }
.k-input::-webkit-input-placeholder { color: rgba(0,0,0,0.45) !important; }
.k-input:-ms-input-placeholder { color: rgba(0,0,0,0.45) !important; }
.k-input::-ms-input-placeholder { color: rgba(0,0,0,0.45) !important; }
.k-input::-moz-placeholder { color: rgba(0,0,0,0.45) !important; opacity:1; }


.legend-item.purple {
  background-color: var(--status-purple);
}

.legend-item.red {
  background-color: var(--status-red);
}

.patient-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.patient-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: 8px solid;
}

.patient-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.patient-card.green {
  border-left-color: var(--status-green);
}

.patient-card.yellow {
  border-left-color: var(--status-yellow);
}

.patient-card.purple {
  border-left-color: var(--status-purple);
}

.patient-card.red {
  border-left-color: var(--status-red);
}

.patient-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.patient-info {
  flex-grow: 1;
}

.patient-name {
  font-weight: 600;
  font-size: 1.1rem;
}

.patient-dob {
  color: #666;
}

.patient-status {
  text-align: right;
}

.due-time {
  font-size: 1.2rem;
  font-weight: 700;
}

.monitoring-level,
.monitoring-interval {
  font-size: 0.9rem;
  color: #555;
  font-weight: bold;
}

/* Observation Task Page */
.observation-task-container {
  max-width: 900px;
}

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

.due-time-display {
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 20px;
}

.patient-header {
  text-align: center;
  margin-bottom: 2rem;
}

.patient-img-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #eee;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  width:300px
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #555;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.form-group input[readonly] {
  background-color: #e9ecef;
  cursor: not-allowed;
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  border-top: 1px solid #eee;
  padding-top: 2rem;
}

/* Modals */
.modal-overlay {
  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: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center;
}

.modal-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-content li {
  padding: 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modal-content li:last-child {
  border-bottom: none;
}

.modal-content li:hover {
  background-color: #f1f1f1;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Pravallika - Modern Flex Tab Design - 19 Oct 2025 */

/* Wrapper */
.modern-tab-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height:78vh;
  /* background: #f9fafc; */
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 10px 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: 'Segoe UI', Roboto, sans-serif;
      margin-top: 10px;
}

/* Tab Navigation */
.modern-tabs {
      display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid var(--border-color);
 
}

/* Tab Items */
.modern-tab-item {
  position: relative;
}

/* .modern-tab-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  background: transparent;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
} */

/* Hover Effect */
/* .modern-tab-link:hover {
  color: #007bff;
  background: rgba(0, 123, 255, 0.1);
} */

/* Active Tab */
/* .modern-tab-item.active .modern-tab-link {
  color: #007bff;
  background: #ffffff;
  border-bottom: 2px solid transparent;
  font-weight: 600;
} */

/* Animated Underline */
.modern-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background-color: #007bff;
  transition: all 0.3s ease;
}

/* When Active */
.modern-tab-item.active~.modern-underline {
  width: 100%;
}

/* Tab Content */
.modern-tab-content {
  flex-grow: 1;
  padding: 20px 15px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  border-top: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Tab Pane */
.tab-pane {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.tab-pane.active {
  width: 100%;
  overflow: auto;
  align-content: center;
  height: 100%;
  display: block;

}

/* Smooth Fade Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .modern-tab-item.active .modern-tab-link:hover {
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
} */


.form-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}



.KendoDatePickerClass {

  border-radius: 10px !important;
  /* border: 1px solid var(--border-color) !important; */
  /* padding: 8px 10px; */
  /* background-color: var(--input-bg) !important; */
  color: var(--text-color);
  /* transition: all 0.3s ease; */
  width:200px;
}

/* .KendoDatePickerClass:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 6px var(--accent-glow);
} */

.KendoDatePickerClass:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 8px var(--accent-glow);
  outline: none;
}

input[type="text"],
input[type="number"],
input[type="number"].form-control,
input[type="text"].form-control,
input[kendo-auto-complete] {
  height: auto !important;
  padding: 4px 8px !important;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #dedede;
  color: black;
}

.k-i-calendar:before {
  content: "" !important;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg fill="%233b82f6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 16H5V9h14v11Z"/></svg>') no-repeat center;
  background-size: 16px;
}


  .k-list-container,
  .k-list,
  .k-popup {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid #c5c5c5 !important;
  }

  .k-list .k-item {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
  }

  .k-list .k-item.k-state-hover {
    background-color: var(--font-color) !important;
    color: var(--text-color) !important;
  }

  .k-list .k-item.k-state-selected {
    background-color: #0078d4 !important;
    color: var(--text-color) !important;
  }

  .k-dropdown .k-dropdown-wrap,
  .k-dropdown .k-input {
    background-color: var(--card-bg)!important;
    color: var(--text-color) !important;
    border-color: #c5c5c5 !important;
  }

  .k-dropdown .k-select {
    background-color: #2b2b2b !important;
    border-left: 1px solid #c5c5c5 !important;
  }

  .emrWebPreviousIconClass {
    height: 15px;
    width: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.5 19.5L8.5 12L15.5 4.5' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / cover no-repeat;
    cursor: pointer;
    display: block;
     filter: invert(34%) sepia(93%) saturate(2207%) hue-rotate(202deg) brightness(97%) contrast(101%);
}

.emrWebNextIconClass {
    height: 15px;
    width: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.5 4.5L15.5 12L8.5 19.5' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / cover no-repeat;
    cursor: pointer;
    display: block;
     filter: invert(34%) sepia(93%) saturate(2207%) hue-rotate(202deg) brightness(97%) contrast(101%);
}

.emrWebViewIconClass{
    height: 20px;
    width: 20px;
    background: url('https://api.iconify.design/carbon/view.svg?color=%23007bff&width=25') no-repeat center / cover;
    cursor: pointer;
    display: block;
    position: relative;
    filter: invert(34%) sepia(93%) saturate(2207%) hue-rotate(202deg) brightness(97%) contrast(101%);
}

.emrWebEditIconClass{
    height: 15px;
    width: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cg clip-path='url(%23clip0_12_970)'%3E%3Cpath d='M13.5642 1.6975C13.646 1.77951 13.6919 1.89058 13.6919 2.00638C13.6919 2.12217 13.646 2.23324 13.5642 2.31525L12.6516 3.22875L10.9016 1.47875L11.8142 0.565251C11.8963 0.483232 12.0075 0.437157 12.1236 0.437157C12.2396 0.437157 12.3508 0.483232 12.4329 0.565251L13.5642 1.69663V1.6975ZM12.033 3.8465L10.283 2.0965L4.32162 8.05875C4.27346 8.1069 4.23721 8.16562 4.21575 8.23025L3.51137 10.3425C3.4986 10.381 3.49678 10.4223 3.50613 10.4618C3.51548 10.5013 3.53563 10.5374 3.56431 10.5661C3.593 10.5947 3.6291 10.6149 3.66858 10.6242C3.70806 10.6336 3.74936 10.6318 3.78787 10.619L5.90012 9.91463C5.96466 9.89342 6.02338 9.85747 6.07162 9.80963L12.033 3.84738V3.8465Z' fill='%23767676'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.875 11.8125C0.875 12.1606 1.01328 12.4944 1.25942 12.7406C1.50556 12.9867 1.8394 13.125 2.1875 13.125H11.8125C12.1606 13.125 12.4944 12.9867 12.7406 12.7406C12.9867 12.4944 13.125 12.1606 13.125 11.8125V6.5625C13.125 6.44647 13.0789 6.33519 12.9969 6.25314C12.9148 6.17109 12.8035 6.125 12.6875 6.125C12.5715 6.125 12.4602 6.17109 12.3781 6.25314C12.2961 6.33519 12.25 6.44647 12.25 6.5625V11.8125C12.25 11.9285 12.2039 12.0398 12.1219 12.1219C12.0398 12.2039 11.9285 12.25 11.8125 12.25H2.1875C2.07147 12.25 1.96019 12.2039 1.87814 12.1219C1.79609 12.0398 1.75 11.9285 1.75 11.8125V2.1875C1.75 2.07147 1.79609 1.96019 1.87814 1.87814C1.96019 1.79609 2.07147 1.75 2.1875 1.75H7.875C7.99103 1.75 8.10231 1.70391 8.18436 1.62186C8.26641 1.53981 8.3125 1.42853 8.3125 1.3125C8.3125 1.19647 8.26641 1.08519 8.18436 1.00314C8.10231 0.921094 7.99103 0.875 7.875 0.875H2.1875C1.8394 0.875 1.50556 1.01328 1.25942 1.25942C1.01328 1.50556 0.875 1.8394 0.875 2.1875V11.8125Z' fill='%23767676'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12_970'%3E%3Crect width='14' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") center / cover no-repeat;
    cursor: pointer;
    display: block;
}

.emrWebTrashIconClass{
    height: 15px;
    width: 15px;
    background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.8125 4.8125C4.92853 4.8125 5.03981 4.85859 5.12186 4.94064C5.20391 5.02269 5.25 5.13397 5.25 5.25V10.5C5.25 10.616 5.20391 10.7273 5.12186 10.8094C5.03981 10.8914 4.92853 10.9375 4.8125 10.9375C4.69647 10.9375 4.58519 10.8914 4.50314 10.8094C4.42109 10.7273 4.375 10.616 4.375 10.5V5.25C4.375 5.13397 4.42109 5.02269 4.50314 4.94064C4.58519 4.85859 4.69647 4.8125 4.8125 4.8125V4.8125ZM7 4.8125C7.11603 4.8125 7.22731 4.85859 7.30936 4.94064C7.39141 5.02269 7.4375 5.13397 7.4375 5.25V10.5C7.4375 10.616 7.39141 10.7273 7.30936 10.8094C7.22731 10.8914 7.11603 10.9375 7 10.9375C6.88397 10.9375 6.77269 10.8914 6.69064 10.8094C6.60859 10.7273 6.5625 10.616 6.5625 10.5V5.25C6.5625 5.13397 6.60859 5.02269 6.69064 4.94064C6.77269 4.85859 6.88397 4.8125 7 4.8125V4.8125ZM9.625 5.25C9.625 5.13397 9.57891 5.02269 9.49686 4.94064C9.41481 4.85859 9.30353 4.8125 9.1875 4.8125C9.07147 4.8125 8.96019 4.85859 8.87814 4.94064C8.79609 5.02269 8.75 5.13397 8.75 5.25V10.5C8.75 10.616 8.79609 10.7273 8.87814 10.8094C8.96019 10.8914 9.07147 10.9375 9.1875 10.9375C9.30353 10.9375 9.41481 10.8914 9.49686 10.8094C9.57891 10.7273 9.625 10.616 9.625 10.5V5.25Z' fill='%23EF4444'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6875 2.625C12.6875 2.85706 12.5953 3.07962 12.4312 3.24372C12.2671 3.40781 12.0446 3.5 11.8125 3.5H11.375V11.375C11.375 11.8391 11.1906 12.2842 10.8624 12.6124C10.5342 12.9406 10.0891 13.125 9.625 13.125H4.375C3.91087 13.125 3.46575 12.9406 3.13756 12.6124C2.80937 12.2842 2.625 11.8391 2.625 11.375V3.5H2.1875C1.95544 3.5 1.73288 3.40781 1.56878 3.24372C1.40469 3.07962 1.3125 2.85706 1.3125 2.625V1.75C1.3125 1.51794 1.40469 1.29538 1.56878 1.13128C1.73288 0.967187 1.95544 0.875 2.1875 0.875H5.25C5.25 0.642936 5.34219 0.420376 5.50628 0.256282C5.67038 0.0921873 5.89294 0 6.125 0L7.875 0C8.10706 0 8.32962 0.0921873 8.49372 0.256282C8.65781 0.420376 8.75 0.642936 8.75 0.875H11.8125C12.0446 0.875 12.2671 0.967187 12.4312 1.13128C12.5953 1.29538 12.6875 1.51794 12.6875 1.75V2.625ZM3.60325 3.5L3.5 3.55163V11.375C3.5 11.6071 3.59219 11.8296 3.75628 11.9937C3.92038 12.1578 4.14294 12.25 4.375 12.25H9.625C9.85706 12.25 10.0796 12.1578 10.2437 11.9937C10.4078 11.8296 10.5 11.6071 10.5 11.375V3.55163L10.3967 3.5H3.60325ZM2.1875 2.625V1.75H11.8125V2.625H2.1875Z' fill='%23EF4444'/%3E%3C/svg%3E") center / cover no-repeat;
    cursor: pointer;
    display: block;
}

/* Wrapper to handle label position */
.float-label-wrapper {
    position: relative;
   min-width: 300px;
}

/* Style the label */
.float-label-wrapper label {
    position: absolute;
    left: 10px;
    transform: translateY(-60%);
    color: var(--label);
    background: var(--card-bg);
    padding: 0 5px;
    transition: all 0.2s ease;
    pointer-events: none;
    font-weight: 100;
}



/* Adjust dropdown style to look smooth */
.kendo-ddl-custom {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: var(--card-bg);
    width: 100%;
}

.form-control.k-widget {
    padding: 0;
    width: 100%;
}

.emrWebProfileIcon {
    height: 25px;
    width: 25px;
    background: url('https://api.iconify.design/lucide/user.svg?color=%23007bff') no-repeat center / 60%;
    border-radius: 50%;
    background-color: #e6f0ff; /* light blue background */
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}