:root {
  --action: #006666;
  --action-strong: #004f4f;
  --action-muted: #336666;
  --action-soft: #eef7f5;
  --action-soft-strong: #dff0ee;
  --action-line: #b6d5d3;
  --action-ring: rgba(0, 102, 102, .18);
  --action-glow: rgba(0, 102, 102, .24);
  --focus: 0 0 0 3px rgba(0, 102, 102, .16);
}

body[data-page] {
  --blue: var(--action);
  --blue-strong: var(--action-strong);
  accent-color: var(--action);
}

body[data-page][data-page] :is(.primary.primary, button.primary.primary, a.primary.primary):not(.pay):not(.danger):not(.link-danger) {
  border: 1px solid transparent !important;
  background: linear-gradient(135deg, var(--action-muted) 0%, var(--action) 52%, var(--action-strong) 100%) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(0, 102, 102, .18) !important;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
}

body[data-page][data-page] :is(.primary.primary, button.primary.primary, a.primary.primary):not(.pay):not(.danger):not(.link-danger):hover:not(:disabled) {
  background: linear-gradient(135deg, #3f7777 0%, var(--action) 44%, #003f3f 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px var(--action-glow) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] :is(.primary.primary, button.primary.primary, a.primary.primary):not(.pay):not(.danger):not(.link-danger):active:not(:disabled) {
  box-shadow: 0 5px 14px rgba(0, 102, 102, .18) !important;
  transform: translateY(0);
}

body[data-page][data-page] :is(.ghost.ghost, button.ghost.ghost, a.ghost.ghost):not(.link-danger) {
  border-color: var(--action-line) !important;
  background: linear-gradient(180deg, #fff 0%, var(--action-soft) 100%) !important;
  color: var(--action-muted) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .045) !important;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
}

body[data-page][data-page] :is(.ghost.ghost, button.ghost.ghost, a.ghost.ghost):not(.link-danger):hover:not(:disabled) {
  border-color: var(--action) !important;
  background: linear-gradient(180deg, #fff 0%, var(--action-soft-strong) 100%) !important;
  color: var(--action) !important;
  box-shadow: 0 8px 18px rgba(0, 102, 102, .12) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] :is(.ghost.ghost, button.ghost.ghost, a.ghost.ghost):not(.link-danger):active:not(:disabled) {
  box-shadow: 0 3px 10px rgba(0, 102, 102, .10) !important;
  transform: translateY(0);
}

body[data-page][data-page] :is(.primary.primary, .ghost.ghost, button.primary.primary, button.ghost.ghost, a.primary.primary, a.ghost.ghost):disabled,
body[data-page][data-page] :is(.primary.primary, .ghost.ghost, button.primary.primary, button.ghost.ghost, a.primary.primary, a.ghost.ghost)[aria-disabled="true"] {
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}

body[data-page][data-page] :is(
  .primary.primary,
  .ghost.ghost,
  .table-link.table-link,
  .link-danger.link-danger,
  .date-step.date-step,
  [class*="date-step"][class*="date-step"],
  .permission-mode-tabs a,
  .permission-help-button,
  .permission-effect-choice,
  .shift-photo-actions > summary
):focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--action-ring) !important;
}

body[data-page][data-page] :is(.table-link.table-link, .panel-head > a):not(.link-danger):not(.primary):not(.ghost) {
  color: var(--action) !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body[data-page][data-page] :is(.table-link.table-link, .panel-head > a):not(.link-danger):not(.primary):not(.ghost):hover {
  color: var(--action-strong) !important;
}

body[data-page][data-page] :is(
  .row-actions .table-link,
  [class*="row-actions"] .table-link,
  [class*="actions"] .table-link,
  [class*="action-cell"] .table-link,
  .table-link.action,
  .close-shift-action.close-shift-action,
  .cash-handover-row-action.cash-handover-row-action
) {
  border: 1px solid var(--action-line) !important;
  background: var(--action-soft) !important;
  color: var(--action) !important;
}

body[data-page][data-page] :is(
  .row-actions .table-link,
  [class*="row-actions"] .table-link,
  [class*="actions"] .table-link,
  [class*="action-cell"] .table-link,
  .table-link.action,
  .close-shift-action.close-shift-action,
  .cash-handover-row-action.cash-handover-row-action
):hover {
  border-color: var(--action) !important;
  background: var(--action) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(0, 102, 102, .16) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] :is(.link-danger.link-danger, button.link-danger.link-danger, a.link-danger.link-danger) {
  color: var(--red) !important;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
}

body[data-page][data-page] :is(
  .row-actions .link-danger,
  [class*="row-actions"] .link-danger,
  [class*="actions"] .link-danger,
  [class*="action-cell"] .link-danger,
  .link-danger.action
) {
  border: 1px solid #fecdd3 !important;
  background: #fff1f2 !important;
  color: var(--red) !important;
}

body[data-page][data-page] :is(
  .row-actions .link-danger,
  [class*="row-actions"] .link-danger,
  [class*="actions"] .link-danger,
  [class*="action-cell"] .link-danger,
  .link-danger.action
):hover {
  border-color: #fda4af !important;
  background: #ffe4e6 !important;
  color: #be123c !important;
  box-shadow: 0 7px 16px rgba(220, 53, 69, .12) !important;
  transform: translateY(-1px);
}

/* Semantic button tones. Keep these names away from .action-confirm, which is the global confirm dialog. */
body[data-page][data-page] :is(.action-tone-confirm.action-tone-confirm, button.action-tone-confirm.action-tone-confirm, a.action-tone-confirm.action-tone-confirm) {
  border: 1px solid #8fd7aa !important;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #047857 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .16) !important;
}

body[data-page][data-page] :is(.action-tone-confirm.action-tone-confirm, button.action-tone-confirm.action-tone-confirm, a.action-tone-confirm.action-tone-confirm):hover:not(:disabled) {
  border-color: #6ee7b7 !important;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 58%, #065f46 100%) !important;
  color: #fff !important;
  box-shadow: 0 11px 24px rgba(22, 163, 74, .24) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] :is(.action-tone-delete.action-tone-delete, button.action-tone-delete.action-tone-delete, a.action-tone-delete.action-tone-delete) {
  border: 1px solid #fecdd3 !important;
  background: linear-gradient(180deg, #fff7f7 0%, #ffe4e6 100%) !important;
  color: #be123c !important;
  box-shadow: 0 6px 14px rgba(225, 29, 72, .08) !important;
}

body[data-page][data-page] :is(.action-tone-delete.action-tone-delete, button.action-tone-delete.action-tone-delete, a.action-tone-delete.action-tone-delete):hover:not(:disabled) {
  border-color: #fda4af !important;
  background: linear-gradient(180deg, #fff1f2 0%, #fecdd3 100%) !important;
  color: #9f1239 !important;
  box-shadow: 0 10px 22px rgba(225, 29, 72, .16) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] :is(.action-tone-muted.action-tone-muted, button.action-tone-muted.action-tone-muted, a.action-tone-muted.action-tone-muted) {
  border: 1px solid #cbd5e1 !important;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
  color: #475569 !important;
  box-shadow: 0 6px 14px rgba(71, 85, 105, .08) !important;
}

body[data-page][data-page] :is(.action-tone-muted.action-tone-muted, button.action-tone-muted.action-tone-muted, a.action-tone-muted.action-tone-muted):hover:not(:disabled) {
  border-color: #94a3b8 !important;
  background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%) !important;
  color: #334155 !important;
  box-shadow: 0 9px 20px rgba(71, 85, 105, .14) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] :is(.date-step.date-step, a[class*="date-step"], button[class*="date-step"], span[class*="date-step"]) {
  border-color: var(--action-line) !important;
  background: var(--action-soft) !important;
  color: var(--action) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .045) !important;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
}

body[data-page][data-page] :is(.date-step.date-step, a[class*="date-step"], button[class*="date-step"]):hover {
  border-color: var(--action) !important;
  background: var(--action-soft-strong) !important;
  color: var(--action-strong) !important;
  box-shadow: 0 8px 18px rgba(0, 102, 102, .12) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] :is(.date-step.date-step, [class*="date-step"])[aria-disabled="true"] {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

body[data-page][data-page] :is(
  .orders-date-bar > strong,
  .status-pill:not(.good):not(.warn):not(.bad),
  .badge:not(.good):not(.warn):not(.bad),
  .mini-badge:not(.good):not(.warn):not(.bad)
) {
  background: var(--action-soft) !important;
  color: var(--action-muted) !important;
  border-color: var(--action-line) !important;
}

body[data-page="pos"] .payment-method-options button.is-active {
  border-color: var(--action) !important;
  background: linear-gradient(135deg, var(--action-muted), var(--action)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 102, 102, .16) !important;
}

body[data-page="pos"] .payment-summary div:nth-child(2) {
  border-color: var(--action-line) !important;
  background: var(--action-soft) !important;
}

body[data-page="pos"] .payment-summary div:nth-child(2) strong {
  color: var(--action-strong) !important;
}

body[data-page][data-page] .permission-mode-tabs a:hover {
  border-color: var(--action-line) !important;
  background: var(--action-soft) !important;
  color: var(--action) !important;
}

body[data-page][data-page] .permission-mode-tabs a.is-active {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--action-muted), var(--action)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 102, 102, .20) !important;
}

body[data-page][data-page] :is(
  .permission-bulk-actions .ghost.is-applied-blue,
  .permission-group-tools .ghost.is-applied-blue,
  .template-permission-group-actions .ghost.is-applied-blue,
  .permission-help-button,
  .permission-card-rights summary b,
  .permission-group summary b,
  .permission-override-panel summary b,
  .role-template-editor summary b,
  .role-template-group summary b,
  .template-permission-group-count,
  .permission-popup-group h4 small,
  .permission-detail-row small i
) {
  border-color: var(--action-line) !important;
  background: var(--action-soft) !important;
  color: var(--action) !important;
}

body[data-page][data-page] :is(.permission-help-button, .permission-effect-choice):hover {
  border-color: var(--action) !important;
  background: var(--action-soft-strong) !important;
  color: var(--action-strong) !important;
}

body[data-page][data-page] .permission-effect-choice.is-selected:not([data-row-effect-value="allow"]):not([data-row-effect-value="deny"]) {
  border-color: var(--action) !important;
  background: var(--action-soft-strong) !important;
  color: var(--action-strong) !important;
}

body[data-page][data-page] .template-role-link.is-active {
  border-color: var(--action) !important;
  background: var(--action-soft) !important;
  box-shadow: inset 3px 0 0 var(--action) !important;
}

body[data-page][data-page] :is(.shift-photo-actions > summary, details[class*="actions"] > summary) {
  border-color: var(--action-line) !important;
  background: var(--action-soft) !important;
  color: var(--action) !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body[data-page][data-page] :is(.shift-photo-actions > summary, details[class*="actions"] > summary):hover {
  border-color: var(--action) !important;
  background: var(--action-soft-strong) !important;
  color: var(--action-strong) !important;
  box-shadow: 0 7px 16px rgba(0, 102, 102, .12) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] :is(
  .dkca-nav,
  .warehouse-date-arrow,
  .market-funds-filter-shell > summary,
  .market-funds-date-range-shell > summary,
  .market-funds-entry-extra > summary
) {
  border-color: var(--action-line) !important;
  background: var(--action-soft) !important;
  color: var(--action) !important;
}

body[data-page][data-page] :is(
  .dkca-nav,
  .warehouse-date-arrow,
  .market-funds-filter-shell > summary,
  .market-funds-date-range-shell > summary,
  .market-funds-entry-extra > summary
):hover {
  border-color: var(--action) !important;
  background: var(--action-soft-strong) !important;
  color: var(--action-strong) !important;
}

body[data-page][data-page] :is(
  .dkca-btn-blue,
  .dkca-btn-submit,
  .schedule-bulk-toggle.is-active,
  .schedule-bulk-edit:not(:disabled),
  .attendance-qr-kiosk-button.is-home
) {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--action-muted), var(--action)) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(0, 102, 102, .16) !important;
}

body[data-page][data-page] :is(
  .dkca-btn-blue,
  .dkca-btn-submit,
  .schedule-bulk-toggle.is-active,
  .schedule-bulk-edit:not(:disabled),
  .attendance-qr-kiosk-button.is-home
):hover {
  background: linear-gradient(135deg, #3f7777, var(--action-strong)) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(0, 102, 102, .22) !important;
  transform: translateY(-1px);
}

body[data-page][data-page] .schedule-bulk-toggle:not(.is-active) {
  border-color: var(--action) !important;
  background: #fff !important;
  color: var(--action) !important;
}

body[data-page][data-page] .schedule-pill.is-selected {
  outline-color: var(--action) !important;
}

body[data-page][data-page] :is(
  .market-funds-receipt-upload > span,
  .warehouse-task-edit-list label > span,
  .schedule-history-panel summary b,
  .order-shift-ketca-modal .ketca-prep-group-head,
  .order-shift-ketca-modal .ketca-prep-group-head small,
  .table-card.readonly b
) {
  border-color: var(--action-line) !important;
  background: var(--action-soft) !important;
  color: var(--action) !important;
}

body[data-page][data-page] :is(
  .market-funds-receipt-upload > span,
  .warehouse-task-edit-list label > span
):hover {
  border-color: var(--action) !important;
  background: var(--action-soft-strong) !important;
  color: var(--action-strong) !important;
}

/* Mobile modal sizing system. Desktop modal sizes stay page-owned. */
@media (max-width: 760px) {
  :root {
    --app-modal-mobile-gap-x: 8px;
    --app-modal-mobile-gap-y: 12px;
    --app-modal-mobile-radius: 10px;
    --app-modal-mobile-backdrop: rgba(15, 23, 42, .68);
    --app-modal-mobile-shadow: 0 20px 60px rgba(15, 23, 42, .34);
  }

  body.modal-open,
  body.document-viewer-open,
  body.market-funds-camera-open,
  body.market-funds-balance-open,
  body.market-funds-receipt-viewer-open,
  body.shift-photo-modal-open,
  body.shift-photo-viewer-open,
  body.shift-photo-camera-open,
  body.accounting-modal-open,
  body.notification-modal-open,
  body.dkd-resubmit-modal-open,
  body.dkd-employee-min-modal-open {
    overflow: hidden !important;
  }

  body[data-page][data-page] :is(
    .action-confirm,
    .crud-modal,
    .payroll-modal,
    .market-funds-balance-modal,
    .market-funds-receipt-viewer,
    .market-funds-camera,
    .document-viewer,
    .shift-photo-modal,
    .shift-photo-viewer,
    .shift-photo-camera,
    .close-shift-history-modal,
    .dkd-resubmit-modal,
    .dkd-employee-min-modal,
    .notification-modal-backdrop,
    .report-modal,
    .attendance-report-modal,
    .attendance-report-admin-modal,
    .schedule-attendance-modal,
    .accounting-setup-modal,
    .accounting-purchase-modal
  ):not([hidden]) {
    box-sizing: border-box !important;
    inset: 0 !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    min-height: 100dvh !important;
    display: grid !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    padding:
      max(var(--app-modal-mobile-gap-y), env(safe-area-inset-top))
      var(--app-modal-mobile-gap-x)
      max(var(--app-modal-mobile-gap-y), env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  body[data-page][data-page] :is(
    .action-confirm-backdrop,
    .crud-modal-backdrop,
    .payroll-modal-backdrop,
    .market-funds-balance-backdrop,
    .market-funds-receipt-viewer-backdrop,
    .market-funds-camera-backdrop,
    .document-viewer-backdrop,
    .shift-photo-modal-backdrop,
    .shift-photo-viewer-backdrop,
    .close-shift-history-backdrop,
    .dkd-resubmit-backdrop,
    .dkd-employee-min-backdrop,
    .notification-modal-backdrop,
    .report-modal-backdrop,
    .attendance-report-backdrop,
    .attendance-report-admin-backdrop,
    .schedule-modal-backdrop,
    .accounting-setup-backdrop,
    .accounting-purchase-backdrop
  ) {
    background: var(--app-modal-mobile-backdrop) !important;
  }

  /* The global confirmation is a native dialog, so its own ::backdrop provides the dim layer. */
  body[data-page][data-page] .action-confirm .action-confirm-backdrop {
    background: transparent !important;
  }

  body[data-page][data-page] :is(
    .action-confirm-card,
    .crud-modal-card,
    .payroll-modal-card,
    .market-funds-balance-panel,
    .market-funds-receipt-viewer-panel,
    .market-funds-camera-panel,
    .document-viewer-card,
    .shift-photo-modal-panel,
    .shift-photo-viewer-panel,
    .close-shift-history-card,
    .dkd-resubmit-card,
    .dkd-employee-min-card,
    .warehouse-modal-panel,
    .warehouse-settings-modal,
    .uniform-modal-panel,
    .uniform-status-modal,
    .uniform-settings-modal,
    .uniform-return-modal-panel,
    .uniform-list-modal,
    .accounts-permission-modal,
    .accounts-editor-modal,
    .account-manager-modal,
    .account-allowance-modal,
    .account-option-modal,
    .accounts-resigned-modal,
    .market-funds-list-modal,
    .market-funds-photo-settings-modal,
    .cash-handover-modal-card,
    .close-shift-modal-card,
    .order-shift-setup-modal-card,
    .order-shift-ketca-modal,
    .orders-detail-modal-card,
    .anomaly-list-modal,
    .notification-modal,
    .notification-accounts-modal,
    .notification-preview-modal,
    .report-modal-panel,
    .attendance-report-dialog,
    .attendance-report-admin-dialog,
    .schedule-modal-card,
    .accounting-setup-dialog,
    .accounting-purchase-dialog
  ) {
    box-sizing: border-box !important;
    width: calc(100dvw - (var(--app-modal-mobile-gap-x) * 2)) !important;
    max-width: calc(100dvw - (var(--app-modal-mobile-gap-x) * 2)) !important;
    max-height: calc(100dvh - (var(--app-modal-mobile-gap-y) * 2) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
    border-radius: var(--app-modal-mobile-radius) !important;
    box-shadow: var(--app-modal-mobile-shadow) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page][data-page] :is(
    .market-funds-receipt-viewer-panel,
    .document-viewer-card,
    .shift-photo-viewer-panel
  ) {
    width: calc(100dvw - (var(--app-modal-mobile-gap-x) * 2)) !important;
    max-width: calc(100dvw - (var(--app-modal-mobile-gap-x) * 2)) !important;
  }

  body[data-page][data-page] :is(
    .crud-modal-card > .crud-modal-close,
    .warehouse-modal-panel > .crud-modal-close,
    .uniform-modal-panel > .crud-modal-close,
    .accounts-editor-modal > .crud-modal-close,
    .accounts-permission-modal > .crud-modal-close
  ) {
    top: 12px !important;
    right: 12px !important;
  }
}