/* Secure24 shared action system.
   Blue is the only general-purpose primary action colour.
   Green is reserved for explicit success/approval actions. */

#content button,
.modal-card button:not(.close) {
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s24-space-2);
  min-height:var(--s24-control-h);
  max-width:100%;
  padding:9px 14px;
  border:1px solid var(--s24-line-strong);
  border-radius:var(--s24-radius-control);
  background:var(--s24-card);
  color:var(--s24-navy);
  font-family:var(--s24-font);
  font-size:var(--s24-fs-control);
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-transform:none;
  white-space:normal;
  cursor:pointer;
  box-shadow:var(--s24-shadow-0);
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease;
}

@media (hover:hover) {
  #content button:hover:not(:disabled),
  .modal-card button:not(.close):hover:not(:disabled) {
    border-color:#bfd0e1;
    background:var(--s24-soft-2);
    color:var(--s24-navy);
    box-shadow:var(--s24-shadow-0);
  }
}

#content button:active:not(:disabled),
.modal-card button:not(.close):active:not(:disabled) {
  transform:translateY(1px);
}

#content button:focus-visible,
.modal-card button:focus-visible,
.login-card button:focus-visible {
  outline:3px solid rgba(25,118,210,.16);
  outline-offset:2px;
}

#content button:disabled,
.modal-card button:not(.close):disabled {
  border-color:var(--s24-line);
  background:#f1f5f9;
  color:#94a3b8;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
  opacity:.8;
}

/* Primary creation, save, submit and continue actions. */
#content button.primary,
#content button[data-action="add"],
#content button[data-finance-action="new"],
#content button[data-expense-new],
.modal-card button.primary {
  border-color:var(--s24-blue);
  background:var(--s24-blue);
  color:#fff;
  box-shadow:none;
}

@media (hover:hover) {
  #content button.primary:hover:not(:disabled),
  #content button[data-action="add"]:hover:not(:disabled),
  #content button[data-finance-action="new"]:hover:not(:disabled),
  #content button[data-expense-new]:hover:not(:disabled),
  .modal-card button.primary:hover:not(:disabled) {
    border-color:var(--s24-blue-hover);
    background:var(--s24-blue-hover);
    color:#fff;
  }
}

/* Explicit approval and positive workflow actions only. */
#content button[data-invoice-action="Approved"],
#content button[data-expense-action="approve"],
#content button[data-expense-action="approve-payment"],
#content button[data-petty-approve],
#content button[data-rec-approve],
#content button[data-payroll-action="Approved"],
#content button.success,
.modal-card button.success {
  border-color:#b9decf;
  background:var(--s24-success-soft);
  color:#116c4a;
}

/* Warning/corrective actions. */
#content button.warning,
#content button[data-action*="return"],
#content button[data-invoice-action*="Returned"] {
  border-color:#ead7aa;
  background:var(--s24-warning-soft);
  color:#855604;
}

/* Destructive actions are visually explicit and never resemble primary actions. */
#content button.danger,
#content button[data-invoice-action="Cancelled"],
#content button[data-expense-action="cancel"],
#content button[data-action="user-status"][data-active="0"],
#content button[data-action*="delete"],
#content button[data-action*="deactivate"],
#content button[data-action*="reject"],
.modal-card button.danger {
  border-color:#efc7cc;
  background:var(--s24-danger-soft);
  color:#b52f38;
}

/* Compact action clusters and toolbars. */
.table-actions,
.record-actions,
.employee-card-actions,
.finance-toolbar-actions,
.finance-actions,
.payroll-toolbar-actions,
.payroll-actions,
.attendance-actions,
.scanner-controls,
.modal-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s24-space-2);
}

.finance-toolbar-actions,
.payroll-toolbar-actions,
.modal-actions {justify-content:flex-end}

#content .table-actions button,
#content .employee-card-actions button {
  min-height:36px;
  padding:7px 11px;
  font-size:12px;
}

/* Filters and module tabs share one neutral selected-state pattern. */
.status-filters,
.finance-tabs {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  width:fit-content;
  max-width:100%;
  padding:4px;
  border:1px solid var(--s24-line);
  border-radius:var(--s24-radius-card);
  background:#f1f5f9;
}

#content .status-filters button,
#content .finance-tabs button {
  min-height:34px;
  border-color:transparent;
  background:transparent;
  color:var(--s24-muted);
  box-shadow:none;
}

#content .status-filters button.active,
#content .finance-tabs button.active {
  border-color:#cddceb;
  background:#fff;
  color:var(--s24-blue);
  box-shadow:0 1px 3px rgba(13,43,87,.06);
}

#content .back-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width: 100%;
  min-height: 42px;
  color:var(--s24-navy);
  background:#fff;
  border-color:var(--s24-line-strong);
  box-shadow:none;
  font-weight:700;
  white-space:normal;
  text-align:left;
}

.section-head,
.employee-toolbar,
.finance-toolbar,
.payroll-toolbar {gap:var(--s24-space-3)}

.finance-file button {flex:0 0 auto}

.print-share-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:var(--s24-space-2);
}

@media (max-width:650px) {
  #content .back-button {width:100%;
    justify-content:flex-start;
    margin-bottom:12px;
    overflow-wrap:anywhere;
  }

  #content button,
  .modal-card button:not(.close) {
    min-height:var(--s24-control-h-mobile);
    padding:10px 13px;
  }

  .section-head > button,
  .employee-toolbar > button,
  .modal-card button.primary {
    width:100%;
  }

  .record-actions,
  .employee-card-actions,
  .finance-toolbar-actions,
  .finance-actions,
  .payroll-toolbar-actions,
  .payroll-actions,
  .attendance-actions,
  .scanner-controls,
  .modal-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

  .record-actions button,
  .employee-card-actions button,
  .finance-toolbar-actions button,
  .finance-actions button,
  .payroll-toolbar-actions button,
  .payroll-actions button,
  .attendance-actions button,
  .scanner-controls button,
  .modal-actions button {
    width:100%;
    min-width:0;
  }

  .finance-tabs {
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }

  #content .finance-tabs button {
    flex:0 0 auto;
    white-space:nowrap;
  }

  .finance-file {
    align-items:stretch;
    flex-direction:column;
  }

  .print-share-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

  .print-share-actions button {width:100%}
}

@media (max-width:360px) {
  .record-actions,
  .employee-card-actions,
  .finance-toolbar-actions,
  .finance-actions,
  .payroll-toolbar-actions,
  .payroll-actions,
  .attendance-actions,
  .scanner-controls,
  .modal-actions,
  .print-share-actions {
    grid-template-columns:1fr;
  }
}

/* Management Dashboard KPI cards remain grid cards even when permission-aware navigation renders them as buttons. */
#content .management-dashboard button.dashboard-kpi {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "label icon"
    "value value"
    "description description"
    "status status";
  align-items: initial;
  justify-content: initial;
  gap:5px;
  min-height:176px;
  padding:18px;
  border-width:1px 1px 1px 5px;
  background:linear-gradient(145deg,var(--tone-bg),#fff 76%);
  color:var(--s24-ink);
  text-align:left;
}

#content .management-dashboard button.dashboard-kpi:hover:not(:disabled) {
  background:linear-gradient(145deg,var(--tone-bg),#fff 76%);
}

@media (max-width:650px) {
  #content .management-dashboard button.dashboard-kpi {
    min-height:158px;
    padding:18px;
  }
}

@media (max-width:360px) {
  #content .management-dashboard button.dashboard-kpi {padding:15px}
}