@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --ndu-bg: #f6f3ea;
  --ndu-sidebar: #f3eee3;
  --ndu-card: #ffffff;
  --ndu-border: #ddd6c8;
  --ndu-border-soft: #ebe5d8;
  --ndu-green: #0f6b57;
  --ndu-green-dark: #0b5646;
  --ndu-green-soft: #e7f2ee;
  --ndu-text: #1f2937;
  --ndu-muted: #6b7280;
  --ndu-white: #ffffff;
  --ndu-shadow: 0 6px 18px rgba(15, 107, 87, 0.06);
}

/* force Montserrat on desk/helpdesk app */
html,
body,
#app,
#app *,
#app div,
#app span,
#app p,
#app a,
#app button,
#app input,
#app textarea,
#app select,
#app th,
#app td,
#app label {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* main background */
html,
body,
#app,
.layout-main,
.min-h-screen,
.h-screen {
  background: var(--ndu-bg) !important;
  color: var(--ndu-text) !important;
}

/* top bar */
header,
.layout-header,
div[class*="header"] {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--ndu-border-soft) !important;
  backdrop-filter: blur(8px);
}

/* sidebar */
aside,
div[class*="sidebar"],
nav[class*="sidebar"] {
  background: var(--ndu-sidebar) !important;
  border-right: 1px solid var(--ndu-border-soft) !important;
}

aside .font-semibold,
aside .font-bold,
aside .text-2xl,
aside .text-lg {
  color: var(--ndu-green-dark) !important;
}

/* sidebar items */
aside a,
aside button,
aside .sidebar-link,
aside [role="button"] {
  border-radius: 12px !important;
  color: var(--ndu-text) !important;
  transition: all 0.18s ease !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

aside a:hover,
aside button:hover,
aside .sidebar-link:hover {
  background: rgba(15, 107, 87, 0.08) !important;
}

aside .bg-gray-100,
aside .bg-surface-selected,
aside .text-ink-white,
aside [class*="selected"] {
  background: var(--ndu-green-soft) !important;
  color: var(--ndu-green-dark) !important;
  border: 1px solid rgba(15, 107, 87, 0.12) !important;
}

/* content cards */
main .card,
main [class*="card"],
main .bg-white,
main .bg-surface-card,
main .bg-surface-modal {
  background: var(--ndu-card) !important;
  border: 1px solid var(--ndu-border) !important;
  box-shadow: var(--ndu-shadow) !important;
  border-radius: 16px !important;
}

/* tables */
table {
  background: #fff !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

thead th {
  background: #f8f6f0 !important;
  color: var(--ndu-green-dark) !important;
  border-bottom: 1px solid var(--ndu-border) !important;
  font-weight: 700 !important;
}

tbody tr td {
  border-bottom: 1px solid #eee7db !important;
  color: var(--ndu-text) !important;
}

tbody tr:hover td {
  background: #fbfaf7 !important;
}

/* inputs */
input,
select,
textarea,
.form-control,
[role="textbox"] {
  background: #fff !important;
  border: 1px solid var(--ndu-border) !important;
  border-radius: 12px !important;
  color: var(--ndu-text) !important;
  box-shadow: none !important;
}

input:hover,
select:hover,
textarea:hover,
.form-control:hover {
  border-color: #cfc6b6 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
[role="textbox"]:focus {
  border-color: var(--ndu-green) !important;
  box-shadow: 0 0 0 3px rgba(15, 107, 87, 0.12) !important;
  outline: none !important;
}

/* buttons */
button,
.btn,
[role="button"] {
  border-radius: 12px !important;
  transition: all 0.18s ease !important;
  font-weight: 600 !important;
}

/* keep Create dark */
.btn-primary,
button[class*="primary"],
button.bg-gray-900,
.bg-gray-900 {
  background: #111827 !important;
  border: 1px solid #111827 !important;
  color: #fff !important;
}

.btn-primary:hover,
button[class*="primary"]:hover,
button.bg-gray-900:hover,
.bg-gray-900:hover {
  background: #000000 !important;
  border-color: #000000 !important;
}

/* headings */
h1,
h2,
h3,
h4,
h5,
h6,
.font-bold,
.font-semibold,
.text-lg,
.text-xl,
.text-2xl {
  color: var(--ndu-green-dark) !important;
}

/* links */
a,
.text-primary,
[class*="text-primary"] {
  color: var(--ndu-green-dark) !important;
}

a:hover {
  color: var(--ndu-green) !important;
}

/* muted text */
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-ink-gray-5,
.text-ink-gray-6,
.text-ink-gray-7 {
  color: var(--ndu-muted) !important;
}

/* onboarding / getting started panel */
.fixed.z-50.right-0,
.fixed.z-50.right-0 * {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.fixed.z-50.right-0 {
  background: #ffffff !important;
  border: 1px solid var(--ndu-border) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08) !important;
  border-radius: 18px !important;
}

.fixed.z-50.right-0 .text-base.font-medium,
.fixed.z-50.right-0 .font-medium,
.fixed.z-50.right-0 .text-lg {
  color: var(--ndu-green-dark) !important;
}

.fixed.z-50.right-0 .text-p-base,
.fixed.z-50.right-0 .text-gray-600,
.fixed.z-50.right-0 .text-ink-gray-6,
.fixed.z-50.right-0 .text-ink-gray-7 {
  color: var(--ndu-muted) !important;
}

/* dropdowns / menus */
[role="listbox"],
[role="menu"],
[class*="dropdown-menu"],
[class*="popover-content"] {
  background: #fff !important;
  border: 1px solid var(--ndu-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

/* editor */
.ProseMirror,
.tiptap,
[class*="editor"] {
  background: #fff !important;
  color: var(--ndu-text) !important;
}

/* pills / badges */
[class*="badge"],
[class*="pill"] {
  border-radius: 999px !important;
}

/* footer hide */
footer,
.page-footer,
.website-footer,
[class*="footer"] {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  aside,
  div[class*="sidebar"],
  nav[class*="sidebar"] {
    background: var(--ndu-card) !important;
  }

  .fixed.z-50.right-0 {
    border-radius: 14px !important;
  }
}

/* ============================================
   NEW TICKET PAGE CUSTOMIZATIONS
   ============================================ */

/* 1. Full width — #app prefix beats Helpdesk built CSS */
#app .flex.flex-col.gap-5.py-6.h-full.flex-1.self-center.overflow-auto.mx-auto.w-full.max-w-4xl.px-5 {
  max-width: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* 2. Submit button — exact class from console */
#app button.bg-surface-gray-2.text-ink-gray-4 {
  background: var(--ndu-green) !important;
  color: #fff !important;
  border: none !important;
}

#app button.bg-surface-gray-2.text-ink-gray-4:hover {
  background: var(--ndu-green-dark) !important;
}

/* Submit button when disabled — keep muted */
#app button.bg-surface-gray-2.text-ink-gray-4:disabled {
  background: #a8c5bb !important;
  color: #fff !important;
  cursor: not-allowed !important;
}