/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: "Roboto", sans-serif;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.page-wrap {
  min-height: 603px;
  overflow: hidden;
  padding: 20px;
}
.ems-header {
  background: oldlace;
  padding: 10px 0px;
  text-align: center;
  color: #006400;
}
.ems-session-header {
  background: oldlace;
  padding: 10px 0px;
  color: #006400;
}
.ems-required-field {
  color: #ff0000;
}

.ems-greyout-future-date {
  color: #babdb6;
}

.ems-highlight-offday {
  background-color: #8ae234;
}

.ems-highlight-leaveday {
  background-color: #ffdead;
}

.ems-link-center {
  margin-top: 13px;
  padding-right: 2cm;
}

.right-panel {
  padding: 25px 0px;
  color: black;
  top: 0px;
  right: 10px;
  margin-top: 5px;
  text-align: right;
  position: absolute;
  float: right;
}

.ems-checkinout {
  margin-top: 10px;
  padding: 20px 0px 10px 0px;
  background-color: #f7f7f7;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.ems-footer {
  background: #ccc;
  padding: 10px 0px;
  text-align: center;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.less-hours-badge {
  padding: 3.5px !important;
  border-radius: 4px !important;
  margin: -3px -3px 0px 0px !important;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */

.hidden {
  display: none !important;
  visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

.ems-calendar th {
  background-color: #e0e0e0;
  color: #333;
}
.ems-calendar td {
  background-color: #fcfcfc;
}
.ems-calendar col.ems-calendar-sun,
.ems-calendar th:first-child,
.ems-calendar td:first-child {
  background-color: #f9f2ec;
}
.ems-calendar th:first-child {
  color: #d9534f;
}

.ems-employee-event-banner{
  margin:10px 15px;
  border-radius:4px;
}

.ui-datepicker-calendar td.ui-datepicker-sunday a {
  color: #dc2626;
}

@keyframes btn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary action buttons - teal cyan from sidebar gradient for contrast on green-tinted bg */
button.bg-green-500, a.bg-green-500 {
  background-color: #06b7d3 !important;
}
button.bg-green-500:hover, a.bg-green-500:hover {
  background-color: #05a3bd !important;
}

/* Focus ring - match teal button color instead of green-500 */
.focus\:ring-green-500:focus {
  --tw-ring-color: #06b7d3 !important;
}
.focus\:border-green-500:focus {
  border-color: #06b7d3 !important;
}

/* DataTable pagination overrides (jquery.dataTables.css uses !important) */
.dataTables_wrapper .dataTables_paginate {
  padding-top: 16px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  margin: 0 2px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #8bc442 !important;
  border-color: #8bc442 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #d1d5db !important;
  cursor: default !important;
  background: #f9fafb !important;
  border-color: transparent !important;
}

button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover,
input[type="button"]:not(:disabled):hover {
  cursor: pointer;
}

/* DataTable shared styles (filter, length, info, table display) */
.dataTables_wrapper .dataTables_filter { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_filter label { font-size: 13px; color: #6b7280; font-weight: 500; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.dataTables_wrapper .dataTables_filter input { background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 6px 12px; font-size: 14px; outline: none; transition: box-shadow 0.15s; width: 200px; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: #8bc442; box-shadow: 0 0 0 3px rgba(139,196,66,0.15); }
.dataTables_wrapper .dataTables_length { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_length label { font-size: 13px; color: #6b7280; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.dataTables_wrapper .dataTables_length select { background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 4px 8px; font-size: 14px; outline: none; }
.dataTables_wrapper .dataTables_info { font-size: 13px; color: #9ca3af; padding: 16px 0 8px; }
.dataTables_wrapper table.dataTable { border-collapse: separate; border-spacing: 0; width: 100% !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.dataTables_wrapper table.dataTable thead tr,
.dataTables_wrapper table.dataTable thead tr.ems-th-row-admin {
  background: linear-gradient(357deg, rgb(8, 57, 65) 0%, rgb(16, 90, 100) 50%, rgb(32, 140, 150) 100%);
}
.dataTables_wrapper table.dataTable thead th {
  color: #fff;
  background-color: transparent;
  padding: 12px 20px 12px 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: none;
  position: relative;
}
.dataTables_wrapper table.dataTable thead th.sorting::after,
.dataTables_wrapper table.dataTable thead th.sorting_asc::after,
.dataTables_wrapper table.dataTable thead th.sorting_desc::after {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
}
.dataTables_wrapper table.dataTable thead th.sorting_asc::after {
  content: '\25B2';
  color: rgba(255,255,255,0.9);
}
.dataTables_wrapper table.dataTable thead th.sorting_desc::after {
  content: '\25BC';
  color: rgba(255,255,255,0.9);
}
.dataTables_wrapper table.dataTable tbody tr {
  background: #ffffff;
}
.dataTables_wrapper table.dataTable tbody tr:hover {
  background: #f0fdfa;
}
table.display td {
  padding: 11px 14px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
}

/* Employee leave DataTable overrides */
#leaveRequest_wrapper { padding: 12px 8px; }
#leaveRequest_wrapper .dataTables_filter { margin-bottom: 12px; }
#leaveRequest_wrapper table.dataTable tbody td { padding: 14px 16px; }
#leaveRequest_wrapper table.dataTable thead th { padding: 14px 16px; }
#leaveRequest_wrapper table.dataTable { border-collapse: collapse; }
#leaveRequest_wrapper .dataTables_filter label { font-size: 13px; color: #6b7280; }
#leaveRequest_wrapper .dataTables_filter input { border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px 12px; font-size: 13px; outline: none; margin-left: 6px; }
#leaveRequest_wrapper .dataTables_filter input:focus { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.15); }
#leaveRequest_wrapper .dataTables_paginate { margin-top: 16px; text-align: center; padding-bottom: 8px; }
#leaveRequest_wrapper .dataTables_paginate .paginate_button { padding: 6px 12px; margin: 0 3px; border-radius: 8px; font-size: 13px; color: #374151; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; }
#leaveRequest_wrapper .dataTables_paginate .paginate_button.current { background: #22c55e; color: white; border-color: #22c55e; }
#leaveRequest_wrapper .dataTables_paginate .paginate_button.current:hover { background: #16a34a; }
#leaveRequest_wrapper .dataTables_paginate .paginate_button:hover { background: #e5e7eb; color: #111827; }
#leaveRequest_wrapper .dataTables_info { font-size: 13px; color: #9ca3af; margin-top: 8px; padding-left: 4px; }
#applyLeaveBtn { transition: opacity 0.2s ease; }
#applyLeaveBtn:hover { opacity: 0.85; }

/* ==========================================================================
   EMS Utility Classes (extracted from repeated Tailwind patterns)
   ========================================================================== */

/* --- Cards --- */
.ems-card-admin {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  overflow: hidden;
  margin-bottom: 24px;
}
.ems-card-employee {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Card Header with justify-between */
.ems-card-header-admin {
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #06b7d3, #8bc442);
  border-radius: 12px 12px 0 0;
}
/* Card Header without justify-between */
.ems-card-header-simple-admin {
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  background: linear-gradient(135deg, #06b7d3, #8bc442);
  border-radius: 12px 12px 0 0;
}

.ems-card-header-admin .ems-btn-primary-admin,
.ems-card-header-simple-admin .ems-btn-primary-admin {
  background: linear-gradient(357deg, rgb(8, 55, 63) 0%, rgb(15, 87, 97) 50%, rgb(31, 136, 146) 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border: none;
  transition: background 0.3s ease 0.05s, box-shadow 0.2s ease 0.05s;
}
.ems-card-header-admin .ems-btn-primary-admin:hover,
.ems-card-header-simple-admin .ems-btn-primary-admin:hover {
  background: linear-gradient(357deg, rgb(12, 70, 80) 0%, rgb(20, 105, 118) 50%, rgb(40, 155, 168) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Card Title */
.ems-card-title-admin {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ems-card-title-admin svg { color: rgba(255,255,255,0.8); }

/* Stat Card */
.ems-stat-card-admin {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  padding: 16px;
}
@media (min-width: 640px) {
  .ems-stat-card-admin {
    padding: 20px;
  }
}
.ems-stat-card-admin.ems-stat-card-gradient {
  background: linear-gradient(357deg, rgb(8, 57, 65) 0%, rgb(16, 90, 100) 50%, rgb(32, 140, 150) 100%);
  color: oklch(1 0 0);
}
.ems-stat-card-admin.ems-stat-card-gradient .stat-label {
  color: oklch(1 0 0 / 0.7);
}
.ems-stat-card-admin.ems-stat-card-gradient .stat-value-red { color: #fca5a5; }
.ems-stat-card-admin.ems-stat-card-gradient .stat-value-green { color: #86efac; }
.ems-stat-card-admin.ems-stat-card-gradient .stat-value-blue { color: #93c5fd; }
.ems-stat-card-admin.ems-stat-card-gradient .stat-value-amber { color: #fcd34d; }

/* --- Form Inputs --- */
.ems-input-admin {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  outline: none;
  transition: box-shadow 0.15s;
}
.ems-input-admin:focus {
  border-color: #06b7d3;
  box-shadow: 0 0 0 3px rgba(6,183,211,0.15);
}

.ems-input-employee {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  padding: 10px 16px;
  font-size: 14px;
  color: #374151;
  outline: none;
  transition: box-shadow 0.15s;
}
.ems-input-employee:focus {
  border-color: #06b7d3;
  box-shadow: 0 0 0 3px rgba(6,183,211,0.15);
}
.ems-input-employee::placeholder {
  color: #9ca3af;
}

/* --- Labels --- */
.ems-label-admin {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 4px;
}
.ems-label-employee {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

/* --- Buttons --- */
.ems-btn-primary-admin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #06b7d3;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.ems-btn-primary-admin:hover {
  background-color: #05a3bd;
}

.ems-btn-submit-admin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background-color: #06b7d3;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.ems-btn-submit-admin:hover {
  background-color: #05a3bd;
}

.ems-btn-cancel-admin {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #6b7280;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
  cursor: pointer;
  border: 0;
}
.ems-btn-cancel-admin:hover {
  background-color: #e5e7eb;
}

.ems-btn-edit-admin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: #eff6ff;
  color: #1d4ed8;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.ems-btn-edit-admin:hover {
  background-color: #dbeafe;
}

.ems-btn-delete-admin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: #fef2f2;
  color: #b91c1c;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.ems-btn-delete-admin:hover {
  background-color: #fee2e2;
}

.ems-btn-deactivate-admin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: #fffbeb;
  color: #b45309;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.ems-btn-deactivate-admin:hover {
  background-color: #fef3c7;
}

.ems-btn-view-admin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: #f0fdfa;
  color: #0f766e;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.ems-btn-view-admin:hover {
  background-color: #ccfbf1;
}

.ems-btn-primary-employee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background-color: #06b7d3;
  color: #fff;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.ems-btn-primary-employee:hover {
  background-color: #05a3bd;
}

.ems-btn-cancel-employee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #6b7280;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.15s;
}
.ems-btn-cancel-employee:hover {
  background-color: #e5e7eb;
}

.ems-btn-login {
  width: 100%;
  padding: 10px 0;
  background-color: #06b7d3;
  color: #fff;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin-bottom: 12px;
}
.ems-btn-login:hover {
  background-color: #05a3bd;
}
.ems-btn-login:focus {
  outline: none;
  box-shadow: 0 0 0 2px #06b7d3, 0 0 0 4px rgba(6,183,211,0.15);
}
.ems-btn-login:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Alerts --- */
.ems-alert-success-admin {
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Tables --- */
.ems-th-row-admin {
  background-color: #f9fafb;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Sidebar Navigation --- */
.ems-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  transition: all 0.15s;
}
.ems-nav-link:hover {
  color: #fff;
  background-color: rgba(255,255,255,0.15);
}

.ems-nav-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  transition: all 0.15s;
}
.ems-nav-logout:hover {
  color: #fff;
}

.ems-logout-bar-admin {
  background: linear-gradient(271deg, rgb(178 74 74) 0%, rgb(178 147 147) 50%, rgb(130 94 94) 100%);
  border-top: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}
.ems-logout-bar-admin:hover {
  opacity: 0.9;
}

.admin-time-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.admin-sidebar-avatar {
  background-color: color-mix(in oklab, #000000 20%, #0000004d);
}

.ems-logout-bar-employee {
  background: linear-gradient(357deg, rgb(66 68 69 / 99%) 0%, rgb(88 88 88) 50%, rgb(32 140 150 / 78%) 100%);
  border-top: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}
.ems-logout-bar-employee:hover {
  opacity: 0.9;
}

/* --- Modals --- */
.ems-modal-header-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}
.ems-modal-footer-admin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #f3f4f6;
  background-color: rgba(249,250,251,0.5);
  border-radius: 0 0 12px 12px;
}

/* --- Status Badges --- */
.status-badge, .leave-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.status-badge:before, .leave-status-badge:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.status-badge.active,
.status-badge.approved,
.leave-status-badge.approved {
  background: linear-gradient(to right, #f0fdf4, #dcfce7);
  color: #15803d;
}
.status-badge.active:before,
.status-badge.approved:before,
.leave-status-badge.approved:before { background: #22c55e; }
.status-badge.inactive,
.leave-status-badge.rejected {
  background: linear-gradient(to right, #fef2f2, #fecaca);
  color: #991b1b;
}
.status-badge.inactive:before,
.leave-status-badge.rejected:before { background: #ef4444; }
.leave-status-badge.pending {
  background: linear-gradient(to right, #fefce8, #fef3c7);
  color: #92400e;
}
.leave-status-badge.pending:before { background: #f59e0b; }