/*
 * macOS visual layer for Panel 2.
 *
 * This file intentionally changes only presentation. It does not change the
 * existing DOM structure, widths, page flow, permissions, or JavaScript.
 */

:root {
  --mac-accent: #0a84ff;
  --mac-accent-hover: #0077ed;
  --mac-violet: #7657b5;
  --mac-green: #34c759;
  --mac-red: #ff3b30;
  --mac-orange: #ff9f0a;
  --mac-text: #1d1d1f;
  --mac-secondary: #6e6e73;
  --mac-tertiary: #8e8e93;
  --mac-line: rgba(60, 60, 67, 0.16);
  --mac-line-strong: rgba(60, 60, 67, 0.24);
  --mac-control: rgba(118, 118, 128, 0.12);
  --mac-surface: rgba(255, 255, 255, 0.94);
  --mac-surface-solid: #ffffff;
  --mac-canvas: #f2f2f7;
  --mac-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.06);
  --mac-shadow-window: 0 28px 80px rgba(0, 0, 0, 0.28),
    0 3px 12px rgba(0, 0, 0, 0.16);
  --mac-radius-control: 9px;
  --mac-radius-card: 14px;
  --mac-radius-window: 18px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --mac-text: #f5f5f7;
  --mac-secondary: #aeaeb2;
  --mac-tertiary: #8e8e93;
  --mac-line: rgba(235, 235, 245, 0.14);
  --mac-line-strong: rgba(235, 235, 245, 0.24);
  --mac-control: rgba(118, 118, 128, 0.28);
  --mac-surface: rgba(36, 36, 38, 0.94);
  --mac-surface-solid: #242426;
  --mac-canvas: #161617;
  --mac-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3),
    0 10px 28px rgba(0, 0, 0, 0.24);
}

html,
body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--mac-text);
  background-color: var(--mac-canvas) !important;
}

/* Existing panels keep their location and size; only their material changes. */
.header,
.page-header,
.nav-bar,
.filters,
.dashboard,
.table-container,
.card,
.panel,
.section,
.content-card,
.stats-card,
.settings-section {
  border: 1px solid var(--mac-line) !important;
  border-radius: var(--mac-radius-card) !important;
  box-shadow: var(--mac-shadow-card) !important;
  background-color: var(--mac-surface) !important;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

/* Top navigation resembles a macOS toolbar while preserving every link. */
.nav-bar {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72),
    rgba(255, 255, 255, 0.2)
  ) !important;
}

html[data-theme="dark"] .nav-bar {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.01)
  ) !important;
}

.nav-btn {
  color: var(--mac-text);
  background-color: var(--mac-control);
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, color 140ms ease,
    box-shadow 140ms ease, transform 80ms ease;
}

.nav-btn:hover {
  opacity: 1 !important;
  background-color: rgba(10, 132, 255, 0.12) !important;
  color: var(--mac-accent) !important;
}

.nav-btn:active {
  transform: scale(0.97);
}

/* Buttons: preserve semantic colors, add native depth and interaction. */
button,
.btn,
.copy-btn,
.delete-btn,
.btn-card,
.btn-modal,
.free-pill,
input[type="button"],
input[type="submit"] {
  border-radius: var(--mac-radius-control) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0)
  ) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.12) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: filter 120ms ease, transform 80ms ease, box-shadow 120ms ease,
    background-color 120ms ease;
}

button:hover,
.btn:hover,
.copy-btn:hover,
.delete-btn:hover,
.btn-card:hover,
.btn-modal:hover,
.free-pill:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  filter: brightness(1.045) saturate(1.02);
  opacity: 1 !important;
}

button:active,
.btn:active,
.copy-btn:active,
.delete-btn:active,
.btn-card:active,
.btn-modal:active,
.free-pill:active,
input[type="button"]:active,
input[type="submit"]:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.96);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14) !important;
}

.btn,
.btn-primary,
.btn-blue,
.btn-modal-primary {
  background-color: var(--mac-accent) !important;
  color: #fff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.btn-success,
.btn-green,
.btn-sdal,
.btn-modal-success {
  background-color: var(--mac-green) !important;
  color: #fff !important;
}

.btn-danger,
.delete-btn,
.btn-red {
  background-color: var(--mac-red) !important;
  color: #fff !important;
}

.btn-warning,
.btn-orange {
  background-color: var(--mac-orange) !important;
  color: #1d1d1f !important;
}

button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.18);
}

/* Native-looking text fields without changing their dimensions. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
select,
textarea {
  color: var(--mac-text) !important;
  background-color: color-mix(in srgb, var(--mac-surface-solid) 84%, var(--mac-control)) !important;
  border-color: var(--mac-line-strong) !important;
  border-radius: var(--mac-radius-control) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035),
    0 0 0 0 rgba(10, 132, 255, 0) !important;
  outline: none !important;
  transition: border-color 130ms ease, box-shadow 130ms ease,
    background-color 130ms ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--mac-accent) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2) !important;
  background-color: var(--mac-surface-solid) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--mac-tertiary) !important;
  opacity: 0.78;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--mac-accent) !important;
}

/* Tables retain the same columns and density. */
table {
  border-color: var(--mac-line) !important;
}

th {
  color: var(--mac-secondary);
  background-color: rgba(118, 118, 128, 0.08) !important;
  border-color: var(--mac-line) !important;
  font-weight: 600 !important;
}

td {
  border-color: var(--mac-line) !important;
}

tbody tr {
  transition: background-color 100ms ease;
}

tbody tr:hover {
  background-color: rgba(10, 132, 255, 0.07) !important;
}

/* Modal sheets use a macOS window material and traffic-light decoration. */
.modal,
.modal-overlay,
.crm-modal-overlay,
.crm-modal-overlay-top,
#incomingModal {
  background-color: rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.modal-content,
.modal-box,
.crm-modal,
.dialog,
#incomingModal > div {
  position: relative;
  overflow: auto;
  color: var(--mac-text);
  background-color: var(--mac-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: var(--mac-radius-window) !important;
  box-shadow: var(--mac-shadow-window) !important;
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
}

#incomingModal > div::before,
#_histMod > div::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 18px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 19px 0 0 #febc2e, 38px 0 0 #28c840;
  z-index: 4;
  pointer-events: none;
}

#incomingModal > div > div:first-child,
#_histMod > div > div:first-child {
  padding-left: 64px !important;
}

#incomingModal #incAddForm button {
  color: #fff !important;
  background-color: var(--mac-accent) !important;
}

#incomingModal button[onclick*="closeIncomingModal"] {
  color: var(--mac-secondary) !important;
  background-color: var(--mac-control) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

#ordersFilters > .btn {
  color: #fff !important;
  background-color: var(--mac-accent) !important;
  border-color: rgba(0, 92, 196, 0.44) !important;
}

.modal-content,
.modal-box {
  padding-top: max(42px, env(safe-area-inset-top)) !important;
}

.modal-content::before,
.modal-box::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 17px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
  z-index: 3;
  pointer-events: none;
}

/* The order editor already has its own .mac-traffic element. */
#orderModal .modal-content {
  padding-top: 20px !important;
}

#orderModal .modal-content::before {
  display: none !important;
}

#orderModal .mac-traffic {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  min-height: 14px;
  margin: 0 0 12px !important;
}

#orderModal .mac-traffic span {
  width: 12px !important;
  height: 12px !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.16) !important;
}

#orderModal .mac-traffic span:nth-child(1) {
  background: #ff5f57 !important;
}

#orderModal .mac-traffic span:nth-child(2) {
  background: #febc2e !important;
}

#orderModal .mac-traffic span:nth-child(3) {
  background: #28c840 !important;
}

#orderModalFooter {
  background: transparent !important;
  border-top-color: var(--mac-line) !important;
}

#orderModalFooter .fbtn {
  min-height: 34px;
  border: 1px solid var(--mac-line-strong) !important;
}

#orderModalFooter #saveOrderBtn {
  color: #fff !important;
  background-color: var(--mac-accent) !important;
  border-color: rgba(0, 92, 196, 0.44) !important;
}

#orderModalFooter #copyOrderBtn {
  color: var(--mac-text) !important;
  background-color: var(--mac-control) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.52),
    rgba(255, 255, 255, 0.08)
  ) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

#orderModalFooter .fbtn:last-child {
  color: var(--mac-red) !important;
  background-color: var(--mac-control) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.52),
    rgba(255, 255, 255, 0.08)
  ) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

#orderModal .pct-btn {
  color: var(--mac-text) !important;
  background-color: var(--mac-control) !important;
  border-color: var(--mac-line) !important;
  box-shadow: none !important;
}

/* Consistent macOS action hierarchy in every standard modal. The unused ID
   in :is() raises specificity without coupling the rule to one modal. */
:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.btn,
:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.btn-modal,
:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.copy-btn {
  color: var(--mac-text) !important;
  background-color: var(--mac-control) !important;
  border: 1px solid var(--mac-line-strong) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.52),
    rgba(255, 255, 255, 0.08)
  ) !important;
}

:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.btn-success,
:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.btn-primary,
:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.btn-modal-primary,
:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button[type="submit"].btn {
  color: #fff !important;
  background-color: var(--mac-accent) !important;
  border-color: rgba(0, 92, 196, 0.44) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0)
  ) !important;
}

:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.btn-danger,
:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.delete-btn {
  color: #fff !important;
  background-color: var(--mac-red) !important;
  border-color: rgba(167, 0, 0, 0.38) !important;
}

:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button.btn-warning {
  color: #1d1d1f !important;
  background-color: var(--mac-orange) !important;
  border-color: rgba(169, 95, 0, 0.3) !important;
}

:is(#_macSpecificityBoost, [id$="Modal"]) .modal-content button[onclick*="close"]:not(.btn-danger) {
  color: var(--mac-red) !important;
  background-color: var(--mac-control) !important;
  border-color: var(--mac-line-strong) !important;
}

/* Order footer has explicit roles that override the generic modal hierarchy. */
#orderModalFooter #saveOrderBtn {
  color: #fff !important;
  background-color: var(--mac-accent) !important;
}

#orderModalFooter #copyOrderBtn {
  color: var(--mac-text) !important;
  background-color: var(--mac-control) !important;
}

.modal-content h2,
.modal-content h3,
.modal-box h2,
.modal-box h3,
.crm-modal h2,
.crm-modal h3 {
  color: var(--mac-text) !important;
  letter-spacing: -0.02em;
}

.close,
.modal-close,
.close-btn {
  display: inline-grid;
  place-items: center;
  color: var(--mac-secondary) !important;
  background-color: var(--mac-control) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* Custom call-history window keeps its dark content but gets macOS framing. */
#_histMod {
  background-color: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

#_histMod > div {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--mac-radius-window) !important;
  box-shadow: var(--mac-shadow-window) !important;
}

/* macOS-like scrollbars. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 60, 67, 0.3) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  min-height: 34px;
  background-color: rgba(60, 60, 67, 0.28);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background-color: rgba(235, 235, 245, 0.24);
}

@media (max-width: 767px) {
  .modal,
  .modal-overlay,
  .crm-modal-overlay,
  .crm-modal-overlay-top {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }

  .modal-content,
  .modal-box,
  .crm-modal,
  .dialog {
    border-radius: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}