/* Cleaned approvals styles — only rules referenced by ApprovalCard.razor and ApprovalConfirmModal.razor */

/* Card */
.approval-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: #ffffff;
  border: none;
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
  margin-bottom: 1rem;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .12s ease;
}
.approval-card:hover {
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}

.approval-card,
.approval-card.status-assisting,
.approval-card.status-rejected,
.approval-card.status-in-review,
.approval-card.status-pending-approval,
.approval-card.status-finalized,
.approval-card.status-scheduled,
.approval-card.status-published {
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    /* Neutralize the global status colors from ScheduleCard.css (calendar cards)
       so the approval card only shows a single left indicator (see .left-border). */
    border: none !important;
    border-left: none !important;
    color: inherit !important;
}

/* Status / left indicator */
.left-border {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 8px 0 0 8px;
}
.border-pending   { background: #f59e0b; } /* orange */
.border-rejected  { background: #ef4444; } /* red */
.border-approved  { background: #22c55e; } /* green */

/* Prevent global status text/icon colors (from ScheduleCard.css) from bleeding
   into approval cards; only the left-border strip should convey status. */
.approval-card .bi-shop,
.approval-card .fw-bold,
.approval-card .fw-semibold,
.approval-card .store-line {
  color: #23303b !important;
}

/* Tags */
.tags { margin-bottom: .5rem; }
.tag { padding: 0.2rem .45rem; border-radius: 6px; font-size: .78rem; margin-right: .35rem; display:inline-block; }
.tag-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

/* Text lines */
.store-line { font-weight: 600; margin-bottom: .25rem; }
.meta-line  { color: #6b7280; font-size: .95rem; margin-bottom: .4rem; }
.pmm-line   { color: #23303b; font-size: .95rem; }

/* Middle column lines */
.crew-line, .assist-line, .labor-line {
  margin-bottom: .45rem;
  color: #23303b;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.crew-id { font-weight:600; margin-left:.25rem; }

/* Card notes (used in card markup) */
.card-notes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #4b5563;
}
.card-notes .notes-text {
  color: #111827;
  margin-top: .25rem;
  word-break: break-word;
  max-width: 100%;
  font-size: 1rem;
  font-weight: 400;
}

/* view link used in card */
.approvals-container .view-schedule-link,
.approvals-container .view-schedule-link:hover,
.approvals-container .view-schedule-link:focus {
  color: #1b67a8;
  text-decoration: underline !important;
  font-weight: 600;
}

/* Chips: reduced padding and font-size for compact approved/rejected chips */
.chip {
  display: inline-block;
  padding: .13rem .5rem;   /* reduced vertical padding */
  border-radius: 6px;
  font-weight: 600;
  font-size: .96rem;        /* slightly smaller text */
  line-height: 1;
}
.chip.approved { background:#e6f7ee; color:#1b7a4a; border:1px solid #c8eecf; }
.chip.rejected { background:#ffecec; color:#a94442; border:1px solid #f2c6c6; }
.chip.pending  { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }



/* Approvals page toolbar & tabs */
.approvals-container { padding: 0; background: #eef2f6; min-height: 100vh; overflow-x: hidden; }
.approvals-header-wrap { background: #ffffff; padding-top: 1.25rem; border-bottom: 1px solid #e5e9ef; width: 100%; }
.approvals-header-wrap h2 { margin-bottom: 1rem; }
.approvals-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:0; margin-top: 0.75rem; }
.approvals-container .tabs { display:flex; gap:.5rem; }
.approvals-container .tab { border:none; background:transparent; padding:.5rem 1rem; border-bottom:2px solid transparent; cursor:pointer; }
.approvals-container .tab.active { border-color:#1b67a8; font-weight:600; }
.approvals-container .controls { display:flex; gap:1rem; align-items:center; }
.view-filter-label { font-weight: 500; color: #344054; white-space: nowrap; }
.tab-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1;
  color: #fff;
  background: #ef4444;
  box-shadow: none;
  vertical-align: middle;
}

/* Manager label */
.manager-label {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: flex-start;
  font-weight: 600;
  color: #111827;
}
.manager-label .bi { font-size: 1rem; color: #475569; }
.manager-label .past-note { color: #ef4444; font-weight: 700; }

/* Manager comment + date stacked to match Figma (date below comment) */
.approval-card .manager-comment {
  margin-bottom: .35rem;
  font-size: 1rem;
  font-weight: 400;
  word-break: break-word;
  color: #111827;
}
.approval-card .manager-date {
  font-size: 1rem;
  font-weight: 400;
  color: #111827;
}

/* Full-width reject (used when past count date) */
.btn-reject-full {
  width: 100%;
  min-width: 0;
  padding: .45rem .85rem;
  min-height: 36px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
  background: transparent;
  color: #ef4444;
  border: 1px solid #ef4444;
}
.btn-reject-full:hover,
.btn-reject-full:focus {
  background: rgba(239,68,68,0.06);
  color: #b91c1c;
  border-color: #ef4444;
  text-decoration: none;
  box-shadow: none;
  outline: none;
}

/* Grid-based manager buttons used in card */
.manager-approval-row .btn,
.manager-approval-row .btn-approve,
.manager-approval-row .btn-reject {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  min-height: 38px;
  min-width: 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: none;
  cursor: pointer;
  justify-content: center;
}
.manager-approval-row .btn-approve,
.manager-approval .btn-approve {
  background: transparent;
  color: #1f7a44;
  border: 1px solid #1f7a44;
}
.manager-approval-row .btn-approve .bi,
.manager-approval .btn-approve .bi {
  color: #1f7a44;
  font-size: 1.05rem;
}
.manager-approval-row .btn-approve:hover,
.manager-approval-row .btn-approve:focus {
  background: rgba(31,122,68,0.06);
  color: #166535;
  border-color: #166535;
  text-decoration: none;
  box-shadow: none;
}
.manager-approval-row .btn-reject,
.manager-approval .btn-reject {
  background: transparent;
  color: #ef4444;
  border: 1px solid #ef4444;
}
.manager-approval-row .btn-reject .bi {
  color: #ef4444;
  font-size: 1.05rem;
}
.manager-approval-row .btn-reject:hover,
.manager-approval-row .btn-reject:focus {
  background: rgba(239,68,68,0.06);
  color: #b91c1c;
  border-color: #ef4444;
  text-decoration: none;
  box-shadow: none;
}

/* Responsive small adjustments used by card */
@media (max-width: 900px) {
  .approval-card { flex-direction: column; }
  .left-border { height: 6px; width: 100%; border-radius: 8px 8px 0 0; position: relative; }
  .card-notes, .card-right, .card-middle, .card-left { width: 100%; padding: .5rem 0; text-align: left; }
}

/* ===== Approval confirmation modal styles (used by ApprovalConfirmModal.razor) ===== */
.approval-confirm-modal {
  z-index: 99999;
}

/* Force modal action buttons visible (overrides global .btn rules) */
.approval-confirm-modal .btn,
.approval-confirm-modal .modal-footer,
.approval-confirm-modal .modal-footer .btn {
  display: inline-flex !important;
  gap: .75rem;
  align-items: center;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Confirm / Cancel action button styles */
.confirm-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: .5rem .9rem !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  visibility: visible !important;
  cursor: pointer !important;
  font-weight: 600;
  font-size: .95rem;
}

/* Approve (green) */
.confirm-action-btn.approve-mode {
  background-color: #1f7a44 !important;
  border: 1px solid #166535 !important;
  color: #ffffff !important;
}
.approval-confirm-modal .confirm-action-btn.approve-mode:disabled {
  background-color: #a3d0b1 !important;
  border-color: #166535 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.9 !important;
}

/* Reject (red) */
.confirm-action-btn.reject-mode {
  background-color: #ef4444 !important;
  border: 1px solid #b91c1c !important;
  color: #ffffff !important;
}
.approval-confirm-modal .confirm-action-btn.reject-mode:disabled {
  background-color: #f7b3b3 !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.9 !important;
}

/* Cancel outlined */
.cancel-action-btn {
  background: transparent !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  padding: .5rem .9rem !important;
  border-radius: 8px !important;
}

/* Ensure modal content stacks and footer spans full width, right-align buttons */
.approval-confirm-modal > .bg-white {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Footer must be a full-width flex container aligned to the right */
.approval-confirm-modal .modal-footer {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-end !important;
  gap: .75rem !important;
  padding: 0 !important;
  margin-top: .75rem !important;
}

/* Keep Cancel left of Confirm but both on the right */
.approval-confirm-modal .modal-footer .cancel-action-btn {
  margin-right: .25rem !important;
}

/* Textarea styling for approval modal */
.approval-confirm-modal textarea.form-control {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.9375rem;
  color: #374151;
  resize: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.approval-confirm-modal textarea.form-control:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.approval-confirm-modal textarea.form-control::placeholder {
  color: #9ca3af;
  font-size: 0.9375rem;
}

.approval-confirm-modal textarea.form-control:disabled {
  background-color: #f9fafb;
  cursor: not-allowed;
}


/* Compact filter controls used on Approved tab (small dropdowns / date pickers) */
.filter-controls .date-control {
  min-width: 140px;
}
.filter-controls .form-control-sm,
.filter-controls .form-select-sm {
  height: calc(1.5rem + .5rem); /* keep controls compact */
  padding: .25rem .5rem;
  font-size: .875rem;
}
.filter-controls .form-check-label {
  font-size: .9rem;
}

/* Add small styles for inline Approved-tab filters (Start/End + checkbox) */
.filter-controls .filter-date {
  width: 170px;
  border-radius: 8px;
  padding: .35rem .6rem;
  border: 1px solid rgba(16,24,40,0.06);
  background: #fff;
  height: 38px;
  box-shadow: none;
}

.filter-controls .form-check {
  margin-left: .25rem;
}

/* small screens: stack controls */
@media (max-width: 700px) {
  .controls .filter-controls {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .filter-controls .filter-date { width: 140px; }
}

/* Approved-tab inline filters (inside the tab content, right-aligned) */
.approved-filters .filter-date {
  width: 170px;
  border-radius: 8px;
  padding: .28rem .5rem;
  border: 1px solid rgba(16,24,40,0.06);
  background: #fff;
  height: 36px;
  box-shadow: none;
  -webkit-appearance: none; /* remove default date input arrows where desired */
}

/* keep the checkbox label vertically centered and compact */
.approved-filters .form-check {
  margin-left: .25rem;
  margin-right: .25rem;
}

/* spacing for very small screens: stack the filters */
@media (max-width: 700px) {
  .approved-filters {
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start; /* left-align on mobile for readability */
  }
  .approved-filters .filter-date { width: 140px; }
}

/* small label tweak for filters (label placed in Approvals page) */
.approved-filters-panel .filter-label {
  margin-bottom: 4px;
  color: #6b7280;
  font-size: 0.85rem;
}

/* BlazorDatePicker styles (pure-Blazor calendar popover) */
.bl-datepicker-wrapper { position: relative; display: inline-block; }
.bl-datepicker-wrapper .form-control { min-width: 170px; cursor: pointer; }
.bl-datepicker-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 260px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(16,24,40,0.08);
  padding: .5rem;
  z-index: 1050;
}
.bl-datepicker-header { padding: .25rem .25rem; }
.bl-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; padding: .25rem 0; }
.bl-weekday { font-size: .75rem; }
.bl-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.bl-day {
  width: 100%;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  color: #111827;
}
.bl-day:hover { background: rgba(16,24,40,0.04); }
.bl-day.selected { background: #1f7a44; color: #fff; }
.btn-outline-transparent { background: transparent; border: none; color: #9aa3ab; }

/* Panel background stays subtle */
.approved-filters-panel {
  width: 100%;
  max-width: 560px;
  background: #f8fafb; /* light panel background */
  border-radius: 8px;
  padding: 8px 12px;
  align-items: center;
  box-shadow: none;
  display: flex;
}

/* Individual filter box (Start/End) — gray border per request */
.approved-filters-panel .filter-box {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db; /* subtle gray outline */
  background: #ffffff;
  font-size: 0.9rem;
  height: 44px;
  box-sizing: border-box;
}

/* Keep placeholder text muted and aligned */
.approved-filters-panel .filter-box .text-muted.small {
  font-size: 0.92rem;
  color: #6b7280;
}

/* Ensure invisible native date input still works and doesn't show native UI */
.approved-filters-panel input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Checkbox spacing */
.approved-filters-panel .form-check {
  margin-left: 8px;
}

/* Responsive: stack on small screens */
@media (max-width: 700px) {
  .approved-filters-panel {
    flex-wrap: wrap;
    gap: 8px;
  }
  .approved-filters-panel > div[style*="width:160px"] {
    width: 140px !important;
  }
}

/* Empty state in approvals */
.approvals-empty { min-height: 240px; }
.approvals-empty h4 { color: #111827; font-size: 1.05rem; }
.approvals-empty p  { color: #6b7280; max-width: 560px; }

.approval-list-scroller {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* prevent horizontal scroll */
    /* overflow-y controlled by ContainerStyle (e.g. overflow:auto; max-height:...) */
}

.row.mx-0 {
    margin-left: 0;
    margin-right: 0;
}
/* keep grid inside wrapper */
.row > .col-12.px-2 {
    padding-left: .75rem;
    padding-right: .75rem;
    box-sizing: border-box;
}

/* Request Type chip (Create / Delete) */
.request-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
}
.request-type-chip .chip-icon {
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 900;
}

/* Create — green outlined, light green fill */
.request-type-chip.chip-create {
  background-color: #f0fdf4;
  color: #16a34a;
  border: 1.5px solid #16a34a;
  box-shadow: none;
}

/* Delete — rose outlined, light rose fill */
.request-type-chip.chip-delete {
  background-color: #fff1f2;
  color: #e11d48;
  border: 1.5px solid #e11d48;
  box-shadow: none;
}