@import url('../../../../projects/gbhost/public/gbstyle/gbcommonstyle.scss');

.text-left {
  text-align: left;
  justify-content: flex-start;
}

.text-right {
  text-align: right;
  justify-content: flex-end;
}

.details-table-wrapper {
  max-height: calc(100vh - 200px);
  /* adjust as needed */
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.attendance-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.search-container {
  display: flex;
  justify-content: end;
  padding: 16px 12px 20px 12px;
}

.search-bar {
  height: 42px;
  border-radius: 12px;
  // padding: 12px;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  transition: width 0.25s ease;
  // // background: #f0f0f0;
  // width: fit-content;

}

.search-input {
  width: 250px;
  padding: 8px 12px;
  border-radius: 12px;
  font-family: Helvetica;
  font-weight: 400;
  font-size: 12px;
  background: var(--bg-surface);
}

.search-icon {
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.action-btns {
  display: flex;
  gap: 12px;
}

.search-container.space-btw {
  justify-content: space-between;
}

.SummaryTablethead th {
  padding: 10px;
  text-align: left;
  font-weight: 600;
}

.attendance-table tbody tr {
  background-color: var(--bg-surface);
  /* alternate row color */
}

.attendance-table tbody tr:hover {
  background-color: #f1ecfa;
}

.Approve-btn {
  border: 1px solid #66E2BD;
  color: #1EAE8A;
}

.Reject-btn {
  border: 1px solid #F9A8AE;
  color: #E63946;
}

.group-header {
  background-color: #F4E7FF;
  //   font-weight: bold;
}

.addnew-btn {
  background: var(--action-primary-default) !important;
  color: #FFFFFF;
}

.formbtn {
  background: #FFFFFF;
  width: 160px;
  height: 40px;
  gap: 2px;
  border-radius: 8px;
  border-width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-btn {
  background: var(--action-primary-default) !important;
  color: #FFFFFF;
  background: #FFFFFF;
  width: 160px;
  height: 40px;
  gap: 2px;
  border-radius: 8px;
  border-width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  /* 👈 only scroll area */
  overflow-x: hidden;
  min-height: 0;
  /* VERY IMPORTANT for flex scroll */
}

.approved-info-banner {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 12px 16px;
  border-radius: 8px;

  background: #f4edff;
  border: 1px solid #d6c2ff;

  color: #6f42c1;
  font-size: 14px;
  font-weight: 500;

  mat-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
}

.FormModal-Container {
  position: fixed;
  display: flex;
  z-index: 999;
  //   padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}


.FormModal_contentDecType {
  justify-content: center;
  background-color: #FFFFFF;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 98%;
  height: 96%;
  border-radius: 10px;
  overflow: hidden;
  // z-index: 1000;
}

/* --- Header cells --- */
table thead tr th {
  height: 32px !important;
  padding: 0 8px 0px 8px !important;
  line-height: 32px !important;
  font-size: 13px;
  /* adjust text size if needed */
  vertical-align: middle;
  text-align: left;
  background-color: var(--bg-surface);
}

/* --- Body cells --- */
table tbody tr td {
  height: 40px !important;
  padding: 0 8px 0px 8px !important;
  line-height: 20px !important;
  font-size: 13px;
  vertical-align: middle;
}

/* --- Ensure checkbox fits perfectly --- */
table td mat-checkbox,
table th mat-checkbox {
  display: flex;
  align-items: center;
  // justify-content: center;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

::ng-deep.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,
.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before {
  background-color: var(--action-primary-default) !important;
}

::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,
.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before {
  background-color: var(--action-primary-default) !important;
}

::ng-deep.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,
.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before {
  background-color: var(--action-primary-default) !important;
}

::ng-deep .mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
  border-color: var(--action-primary-default) !important;
}

::ng-deep .mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
  border-color: var(--action-primary-default) !important
}

::ng-deep.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
  border-color: var(--action-primary-default) !important;
  background-color: var(--action-primary-default) !important;
}

::ng-deep .mdc-checkbox__background {
  border-color: var(--mat-sys-inverse-surface) !important;
}

::ng-deep.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
  border-color: var(--action-primary-default) !important;
  background-color: var(--action-primary-default) !important;
}

::ng-deep.mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple {
  background-color: var(--action-primary-default) !important;
}

::ng-deep.mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple {
  background-color: var(--action-primary-default) !important;
}

::ng-deep.mdc-checkbox:active .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple {
  background-color: var(--action-primary-default) !important;
}

::ng-deep .mdc-checkbox__checkmark {
  color: #FFFFFF !important;
}

.search-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.mdc-radio__native-control {
  display: none !important;
}

::ng-deep .custom-checkbox .mdc-checkbox__background,
::ng-deep .col-checkbox .mdc-checkbox__background,
::ng-deep .checkbox-icon .mdc-checkbox__background {
  border: 1px solid #1A1A1A61;
  height: 21px;
  width: 21px;
}

.checkbox-cell {
  width: 40px;
  min-width: 40px;
  text-align: center;
}

.employee-name {
  min-width: 220px;
}

.disabled-cursor {
  cursor: not-allowed;
  opacity: 0.3;
}

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

.value {
  font-weight: 600;
  font-size: 14px;
}

.name {
  font-size: 15px;
}

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

/* ========== Enhanced UI Corrections for Both Tables ========== */

/* Remove problematic min-width from all cells */
.tbodytd,
.attendance-table td {
  padding: 10px;
  border-top: 1px solid #ddd;
  vertical-align: middle;
  min-width: unset !important;
}

/* Reduce gap between Employee Name and Code */
.employee-cell>div {
  display: grid;
  gap: 2px !important;
  line-height: 1.3;
}

.employee-cell>div>div {
  font-size: 11px;
  color: #666;
  font-weight: 400 !important;
}

.FormModal-Container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;

  // ✅ Ensure container can receive focus
  &:focus {
    outline: none;
  }
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.FormModal_contentDecType {
  position: relative;
  background: white;
  border-radius: 8px;
  max-width: 90vw;
  max-height: 95vh;
  overflow: auto;
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2),
    0 24px 38px 3px rgba(0, 0, 0, .14),
    0 9px 46px 8px rgba(0, 0, 0, .12);
  z-index: 1;
  padding: 24px;

  // ✅ Ensure content can receive focus
  &:focus {
    outline: none;
  }
}

.closeicon {
  cursor: pointer;
  padding: 10px;

  mat-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }
}

// ✅ Better than sr-only for accessibility
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

// ✅ Ensure all interactive elements in modal are focusable
.FormModal-Container {

  button,
  a,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"]) {
    &:focus-visible {
      outline: 2px solid #1976d2;
      outline-offset: 2px;
    }
  }
}

/// Alignment Corrections

// ADD — unified table display, single layout engine
// box-shadow/border-radius preserved from removed block
.attendance-table {
  display: table;
  width: 98%;
  margin: 0 auto;
  border-collapse: collapse; // changed from separate to collapse for cleaner borders
  table-layout: fixed; // enforces column widths uniformly across ALL rows
  box-shadow: 0px 2px 4px 0px #00000033;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

// ADD — thead stays in normal table flow, no independent display
.attendance-table thead {
  display: table-header-group; // correct semantic value, not display:table
}

// ADD — tbody scrolls via max-height + overflow, but stays in table flow
// display:table-row-group keeps it in the SAME column calculation as thead
.attendance-table tbody {
  display: block; // must stay block for overflow-y to work
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

// ADD — this is the KEY fix: both thead row AND every tbody tr must be
// display:table with identical table-layout:fixed and width:100%
// This makes them each act as independent fixed tables that share widths
// via the class-based column width rules below
.attendance-table thead tr,
.attendance-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

// ADD — sticky header: works because thead tr is display:table,
// and th inside it can be sticky relative to the tbody scroll
.attendance-table thead tr th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bg-subtle);
}

// ADD — remove min-width that fights fixed layout, keep all other styles
.tbodytd,
.attendance-table td {
  padding: 10px;
  border-top: 1px solid #ddd;
  vertical-align: middle;
  min-width: unset; // min-width:200px removed — it broke fixed layout
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ADD — class-based column widths that survive isApproval toggling
// These target semantic class names, not position-dependent nth-child
// Apply these classes in your existing th/td elements (class addition only)
.col-checkbox {
  width: 3%;
}

.col-type {
  width: 12%;
}

.col-section {
  width: 6%;
}

.col-particulars {
  width: 25%;
}

.col-declared {
  width: 7%;
  text-align: right !important;
}

.col-approved {
  width: 7%;
  text-align: right !important;
}

.col-attachment {
  width: 3%;
}

.col-remarks {
  width: 20%;
}

.col-status {
  width: 9%;
}

// ADD — checkbox column overflow exception
.col-checkbox {
  overflow: visible;
  white-space: normal;
  text-align: center;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

// ADD — employee info rows in thead (the *ngFor td rows) need fixed layout too
.attendance-table thead tr:first-child {
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: var(--bg-muted);
}

// ═══════════════════════════════════════════════════
// PARTICULARS & REMARKS — wrap text, center vertically
// ═══════════════════════════════════════════════════

.col-particulars,
.col-remarks {
  white-space: normal !important; // override the global nowrap on td
  overflow: visible !important; // allow content to expand row height
  text-overflow: clip !important; // ellipsis is meaningless when wrapping
  word-break: break-word; // breaks very long single words gracefully
  vertical-align: middle !important;
  line-height: 1.4; // comfortable reading for wrapped text
  padding-top: 8px !important; // add breathing room when text wraps
  padding-bottom: 8px !important;
  height: auto !important; // override the fixed 40px height so row expands
}

// Header th for these two columns should also wrap cleanly
.attendance-table thead tr th.col-particulars,
.attendance-table thead tr th.col-remarks {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  vertical-align: middle !important;
  line-height: 1.4;
  height: auto !important;
}

// Since row height becomes dynamic, re-center all OTHER cells in the same row
// so they don't top-align when a particulars/remarks cell wraps
.attendance-table tbody tr td {
  vertical-align: middle;
}

// // Then col-remarks gets a bit more
// .attendance-table thead tr th.col-remarks,
// .attendance-table tbody tr td.col-remarks {
//   padding-left: 18px !important;
// }

/* compact dropdown for table */
.status-select {
  width: 120px;
  font-size: 13px;
}

/* remove material extra spacing */
::ng-deep .status-select .mat-mdc-form-field-infix {
  padding: 4px 0 !important;
  min-height: auto !important;
}

.userImage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  cursor: pointer;
  background-color: var(--button-primary-bg-active);
  color: var(--bg-surface);
  border-radius: 50%;
  font-size: 38px;

  /* Your typography */
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  font-style: normal; // "bold" is covered by weight
  font-size: 20px;
  line-height: 150%; // matches your request
  letter-spacing: 0;
  text-align: center;

  /* Optional: avoid shrinking in flex layouts */
  flex-shrink: 0;
}

.user-avatar-fallback {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--action-primary-default, #1976d2);
  color: white;
  font-weight: bold;
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-transform: uppercase;
}

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

.lightbox-container {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 800px;
  max-width: 90%;
}

.lightbox-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  height: 40px;
  align-items: center;
}

.lightbox-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.lightbox-icon {
  cursor: pointer;
}

.close-icon {
  cursor: pointer;
}

.Apply-Button {
  // display: flex;
  align-items: center;
  gap: 4px !important;
  //   width: 250px;
  height: 32px !important;
  padding: 7px 16px;
  font-family: Helvetica;
  font-size: 14px !important;
  font-weight: 700;
  color: #1A1A1ADE;
  background: transparent;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

// ─── Employee group spacer row ──────────────────────────────────────────────
.employee-group-spacer-body {
  display: table-row-group;
}

.employee-group-spacer td {
  height: 12px;
  background: var(--bg-subtle, #f5f5f5);
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  padding: 0 !important;
}

.lightbox-footer {
  display: flex;
  align-items: anchor-center;
  justify-content: end;
  font-weight: 400;
}

.save-btn {
  background: var(--action-primary-default) !important;
  color: #FFFFFF;
  background: #FFFFFF;
  width: 60px;
  height: 40px;
  gap: 2px;
  border-radius: 8px;
  border-width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}


@media screen and (max-width: 1024px) {
  ::ng-deep .search-container {
    flex-wrap: wrap !important;
    gap: 12px !important;
    height: auto !important;
    justify-content: flex-start !important;
  }

  ::ng-deep .search-bar {
    width: 100% !important;
    max-width: none !important;
  }

  ::ng-deep .search-input {
    width: 100% !important;
  }

  ::ng-deep .FilterBy-Options {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  ::ng-deep .action-btns {
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  ::ng-deep .formbtn {
    flex: 1 1 calc(33.333% - 12px) !important;
    width: auto !important;
    padding: 0 12px !important;
  }

  ::ng-deep .details-table-wrapper {
    overflow-x: auto !important;
    max-height: calc(100vh - 280px) !important;
  }

  ::ng-deep .attendance-table,
  ::ng-deep .attendance-table thead tr,
  ::ng-deep .attendance-table thead tr:first-child,
  ::ng-deep .attendance-table tbody tr {
    min-width: 950px !important;
  }

  ::ng-deep .lightbox-container {
    width: 95% !important;
    max-width: 95% !important;
  }
}

@media screen and (max-width: 767px) {
  ::ng-deep .search-container {
    padding: 12px 8px !important;
  }

  ::ng-deep .FilterBy-Options {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  ::ng-deep .FilterBy-Options mat-radio-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  ::ng-deep .action-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }

  ::ng-deep .formbtn {
    width: 100% !important;
    flex: none !important;
    justify-content: center !important;
  }

  ::ng-deep .FormModal_contentDecType {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 16px 12px !important;
  }

  ::ng-deep .lightbox-container {
    padding: 16px !important;
    border-radius: 8px !important;
  }

  ::ng-deep .lightbox-header {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  
  ::ng-deep .lightbox-footer {
    justify-content: flex-end !important;
    width: auto !important;
    margin-top: 0 !important;
  }
  
  ::ng-deep .lightbox-footer .save-btn {
    width: 80px !important;
    min-width: 80px !important;
    flex: 0 0 auto !important;
  }
  
  ::ng-deep .attendance-table thead tr:first-child td {
    padding: 8px !important;
  }
  
  ::ng-deep .col-employee > div {
    gap: 8px !important;
  }
  
  ::ng-deep .userImage,
  ::ng-deep .user-avatar-fallback {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
}

@media screen and (max-width: 480px) {
  ::ng-deep .details-table-wrapper {
    max-height: calc(100vh - 320px) !important;
  }
  
  ::ng-deep .approved-info-banner {
    flex-direction: column !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 10px !important;
  }
}