/* Premium ERP Design System - Hollend Legacy Vault */

:root {
  --bg-primary: #0b0f19;
  --bg-secondary: #131a2e;
  --bg-tertiary: #1e294b;
  --accent-primary: #6366f1; /* Indigo */
  --accent-primary-hover: #4f46e5;
  --accent-secondary: #0ea5e9; /* Sky Blue */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --border-color: rgba(255, 255, 255, 0.08);
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --glass-bg: rgba(19, 26, 46, 0.8);
  --glass-blur: blur(16px);
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Accessibility Styles - Light Mode */
body.theme-light {
  --bg-primary: #f8fafc; /* Slate 50 */
  --bg-secondary: #ffffff; /* White */
  --bg-tertiary: #f1f5f9; /* Slate 100 */
  --text-primary: #0f172a; /* Slate 900 */
  --text-secondary: #475569; /* Slate 600 */
  --border-color: rgba(0, 0, 0, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}

/* Accessibility Styles - Font Scaling */
body.font-size-large,
body.font-size-large button,
body.font-size-large input,
body.font-size-large select,
body.font-size-large textarea,
body.font-size-large table,
body.font-size-large td,
body.font-size-large th,
body.font-size-large .logo-text h1,
body.font-size-large .logo-text span,
body.font-size-large .nav-btn {
  font-size: 17px !important;
}
body.font-size-large h1 { font-size: 26px !important; }
body.font-size-large h2 { font-size: 22px !important; }
body.font-size-large h3 { font-size: 19px !important; }

body.font-size-xlarge,
body.font-size-xlarge button,
body.font-size-xlarge input,
body.font-size-xlarge select,
body.font-size-xlarge textarea,
body.font-size-xlarge table,
body.font-size-xlarge td,
body.font-size-xlarge th,
body.font-size-xlarge .logo-text h1,
body.font-size-xlarge .logo-text span,
body.font-size-xlarge .nav-btn {
  font-size: 19px !important;
}
body.font-size-xlarge h1 { font-size: 30px !important; }
body.font-size-xlarge h2 { font-size: 26px !important; }
body.font-size-xlarge h3 { font-size: 22px !important; }

/* Accessibility Styles - Typography Legibility */
body.font-accessible,
body.font-accessible * {
  font-family: 'Comic Sans MS', 'Arial', sans-serif !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* App Layout */
.app-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.logo-icon {
  font-size: 32px;
  color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.15);
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.logo-image {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.logo-text h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.logo-text span {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-secondary);
  letter-spacing: 1px;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: var(--transition-fast);
  width: 100%;
  position: relative;
}

.nav-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.nav-btn.active {
  color: var(--text-primary);
  background: var(--accent-primary);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.nav-btn .material-symbols-outlined {
  font-size: 20px;
}

.badge {
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: auto;
}

.badge-warning {
  background: var(--warning);
  color: var(--bg-primary);
}

.sidebar-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-role {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.status-indicator {
  font-size: 10px;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--success);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--success);
}

/* Main Content Area */
.main-content {
  padding: 40px;
  overflow-y: auto;
  height: 100vh;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  width: 320px;
  transition: var(--transition-fast);
}

.header-search:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
  width: 380px;
}

.header-search input {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  width: 100%;
}

.header-search input::placeholder {
  color: var(--text-secondary);
}

.header-search .material-symbols-outlined {
  color: var(--text-secondary);
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background: var(--accent-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-primary-hover);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-secondary);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-full {
  width: 100%;
}

/* Tabs Panes */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dashboard Hero */
.dashboard-hero {
  margin-bottom: 32px;
}

.dashboard-hero h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}

.dashboard-hero p {
  color: var(--text-secondary);
  font-size: 15px;
}

/* KPI Cards */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.metric-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(99, 102, 241, 0.2);
}

.metric-card.urgent {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.metric-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-icon {
  color: var(--accent-primary);
  font-size: 24px;
}

.metric-value {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.metric-footer {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

/* Panels */
.panel {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 32px;
}

.panel-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
}

.panel-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.filters-header {
  flex-wrap: wrap;
  gap: 16px;
}

.filter-controls {
  display: flex;
  gap: 12px;
}

/* Tables */
.table-container {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.table th {
  padding: 16px 24px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.01);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.table-sm th, .table-sm td {
  padding: 10px 14px;
  font-size: 12px;
}

/* Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.won, .status-badge.yes, .status-badge.paid {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.status-badge.lost, .status-badge.no, .status-badge.cancelled {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.status-badge.outstanding, .status-badge.pending, .status-badge.not.invoiced {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.status-badge.quickbooks.ready {
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-secondary);
}

/* OECM Reports Section */
.oecm-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.01);
  border-bottom: 1px solid var(--border-color);
}

.panel-card {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.panel-card h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.row-group {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.row-group > div {
  flex: 1;
}

.split-result {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.result-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
}

.audit-summary-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  background: rgba(16, 185, 129, 0.08);
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.audit-summary-indicator.alert {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.audit-summary-indicator .status-icon {
  font-size: 32px;
}

.report-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 0 24px;
}

.report-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition-fast);
}

.report-tab-btn:hover {
  color: var(--text-primary);
}

.report-tab-btn.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: 600;
}

.inner-header {
  padding: 20px 24px;
  background: transparent;
  border-bottom: 1px solid var(--border-color);
}

/* Forms */
.form-container {
  padding: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.col-span-2 {
  grid-column: span 2;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  outline: none;
  width: 100%;
  transition: var(--transition-fast);
}

.form-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
}

.input-hint {
  font-size: 11px;
  color: var(--text-secondary);
}

/* File Upload Zone */
.file-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  background: rgba(255, 255, 255, 0.01);
}

.file-dropzone:hover {
  border-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.02);
}

.file-dropzone .material-symbols-outlined {
  font-size: 40px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.file-dropzone p {
  font-size: 13px;
  color: var(--text-secondary);
}

.file-name-display {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent-secondary);
  font-weight: 600;
}

/* Modals */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
  animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-large {
  max-width: 900px;
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-content form {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-grow: 1;
  padding: 24px;
}

.modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: rgba(255, 255, 255, 0.01);
}

/* Wizard steps */
.wizard-steps {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.01);
}

.step {
  flex: 1;
  text-align: center;
  padding: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
}

.step.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: 600;
}

.wizard-pane {
  display: none;
}

.wizard-pane.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

/* Quote Builder specific layout */
.quote-builder-controls {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
}

.quote-totals {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  margin-top: 16px;
  font-size: 15px;
}

.quote-totals strong {
  font-size: 18px;
  color: var(--accent-secondary);
}

/* Grid layout for settings */
.setting-form {
  max-width: 600px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Login Page Overlay Styles */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.4s ease-out;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-header img {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

.login-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.login-header p {
  font-size: 13px;
  color: var(--text-secondary);
}

.login-error {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--danger);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
  animation: shake 0.3s ease-in-out;
}

.btn-full {
  width: 100%;
  justify-content: center;
  padding: 12px;
}

/* User profile section in sidebar footer */
.user-profile-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.user-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-secondary) !important;
}

/* Shake Animation for login error */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Social SSO Buttons */
.btn-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.btn-google {
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}
.btn-google:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-microsoft {
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}
.btn-microsoft:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.sso-icon {
  flex-shrink: 0;
  display: inline-block;
}

/* ── Entity gating ──────────────────────────────────────────────────────────
   One codebase serves Hollend Hub and the GWiZ ERP Hub. Sections that
   belong to only one of them carry data-entity, and the server stamps
   data-app-entity on <html> for the non-default entity.

   GWiZ sections are hidden by default and revealed by the attribute, so
   Hollend renders exactly as before and needs no attribute of its own. The
   reveal rules restate the display each element actually uses, since the
   default here is display:none rather than a value worth reverting to.

   Placed above the responsive block deliberately: those rules restyle
   .nav-btn, and anything appended after them would win at every width.
   ------------------------------------------------------------------------- */

.nav-btn[data-entity="gwiz"],
.tab-pane[data-entity="gwiz"],
.metrics-grid[data-entity="gwiz"],
.card[data-entity="gwiz"],
.btn[data-entity="gwiz"],
p[data-entity="gwiz"] {
  display: none;
}

html[data-app-entity="gwiz"] .nav-btn[data-entity="gwiz"] { display: flex; }
html[data-app-entity="gwiz"] .tab-pane[data-entity="gwiz"].active { display: block; }
html[data-app-entity="gwiz"] .metrics-grid[data-entity="gwiz"] { display: grid; }
html[data-app-entity="gwiz"] .card[data-entity="gwiz"] { display: block; }
html[data-app-entity="gwiz"] .btn[data-entity="gwiz"] { display: inline-flex; }
html[data-app-entity="gwiz"] p[data-entity="gwiz"] { display: block; }

/* Hollend-only surfaces disappear wholesale for the GWiZ entity. */
html[data-app-entity="gwiz"] [data-entity="hollend"] { display: none !important; }

/* Aging buckets, coloured by how overdue they are. */
.aging-row td.aging-current { color: var(--text-secondary); }
.aging-row td.aging-warn { color: #d98324; }
.aging-row td.aging-bad { color: #d9534f; font-weight: 600; }

/* Panel shown when Stripe or QuickBooks is not wired up on this deployment. */
.integration-notice {
  padding: 16px 18px;
  border: 1px dashed var(--border, rgba(255,255,255,0.18));
  border-radius: var(--radius-md, 8px);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.integration-notice strong { color: var(--text-primary); }

@media (max-width: 768px) {
  .app-container {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .sidebar {
    height: auto !important;
    position: static !important;
    padding: 16px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
  }
  
  .sidebar-header {
    margin-bottom: 16px !important;
  }
  
  .sidebar-menu {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .nav-btn {
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  
  .sidebar-footer {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--border-color) !important;
  }
  
  .main-content {
    padding: 16px !important;
  }
  
  .dashboard-hero {
    padding: 20px 16px !important;
  }
  
  .dashboard-hero h2 {
    font-size: 20px !important;
  }
  
  .dashboard-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .card {
    padding: 16px !important;
  }
  
  .table-container {
    overflow-x: auto !important;
  }
  
  .modal-container {
    width: 95% !important;
    padding: 20px !important;
  }
}

@media (max-width: 480px) {
  .logo-text h1 {
    font-size: 16px !important;
  }
  .nav-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  
  .login-card {
    padding: 24px 16px !important;
    margin: 12px !important;
  }
  
  .login-header h2 {
    font-size: 20px !important;
  }
}

/* ======================================================================
 * Global search dropdown
 *
 * The wrapper becomes the positioning context so the panel hangs off the field
 * rather than off the page; without position: relative here it would anchor to the
 * nearest positioned ancestor, which is the top bar, and sit in the wrong place at
 * every width.
 * ====================================================================== */
.header-search {
  position: relative;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  /* Above the tables and the sticky top bar, which is what it overlaps. */
  z-index: 60;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--bg-secondary, #fff);
  border: 1px solid var(--border-color, #d5d9e0);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.search-result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.25rem 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

/* Hover and keyboard highlight are the same state: a list where arrowing looks
   different from pointing is a list you have to learn twice. */
.search-result:hover,
.search-result.is-active {
  background: var(--bg-tertiary, rgba(99, 102, 241, 0.1));
}

.search-result:focus-visible {
  outline: 3px solid var(--accent-primary, #6366f1);
  outline-offset: -2px;
}

.search-result__cat {
  grid-row: 1 / span 2;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-tertiary, rgba(99, 102, 241, 0.12));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.search-result__label { font-weight: 600; font-size: 0.9rem; }

.search-result__detail {
  grid-column: 2;
  font-size: 0.78rem;
  color: var(--text-secondary, #667085);
  /* One line, truncated: a long client name must not make one row three deep and
     push the rest of the list out of view. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result__status {
  grid-row: 1 / span 2;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-color, #d5d9e0);
  font-size: 0.68rem;
  white-space: nowrap;
}

/* Empty and error states are shown, not implied by an absent panel -- a dropdown that
   simply does not appear is indistinguishable from a broken key. */
.search-empty {
  margin: 0;
  padding: 0.7rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #667085);
}

.search-empty--error { color: var(--danger, #b3261e); }

/* ======================================================================
 * Sticky top bar
 *
 * Supplied as `.navbar-sticky`, which is not a class anything here carries. The
 * element it describes is `.top-bar`, and it was not sticky: it sits inside
 * .main-content, which is the scroll container (overflow-y: auto; height: 100vh),
 * so the search field and the New Project / Record Bill buttons scrolled away on
 * every long table.
 *
 * position: sticky resolves against the nearest scrollable ancestor, so top: 0 here
 * pins it to the top of .main-content rather than the viewport -- which is the
 * intended behaviour, and only works because that element is the scroller.
 *
 * The background is not optional. A sticky bar without one lets table rows scroll
 * visibly underneath the text. --bg-surface was supplied but is not a token in this
 * project; --bg-primary is the page background and the correct one, since the bar sits
 * on the page rather than on a card.
 *
 * The negative margin and matching padding let the bar's background span the full
 * width of .main-content's 40px padding. Without it a 40px strip either side shows
 * rows sliding past a bar that appears to float.
 * ====================================================================== */
.top-bar {
  position: sticky;
  top: 0;
  /* Above the tables and the panel chrome. The search dropdown is z-index 60 inside
     this element, so it rides along rather than competing. */
  z-index: 100;
  margin-left: -40px;
  margin-right: -40px;
  padding: 12px 40px;
  background-color: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ======================================================================
 * Metrics grid: no track wider than the space it has
 *
 * Supplied as `.erp-grid-container`, which nothing carries; `.metrics-grid` is the
 * grid in question, used on five panels.
 *
 * Two deliberate departures from the snippet:
 *
 * The floor stays at 200px rather than rising to 280px. auto-fit never makes a track
 * narrower than its minimum, so raising the floor makes a narrow viewport overflow
 * SOONER, not later -- the opposite of the stated intent. What prevents the overflow
 * is min(100%, ...), which resolves to the floor where there is room and to the
 * container's own width where there is not, so the track shrinks instead of
 * overhanging.
 *
 * overflow-x: hidden is not set on the grid. It does not prevent overflow, it hides
 * it -- the card would still be cut off, just silently, which is how this class of bug
 * survives unnoticed. body already carries it as a last-resort backstop; the fix
 * belongs in the track sizing.
 * ====================================================================== */
.metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Workspace panel actions ────────────────────────────────────────────────
   A section heading with its action pinned to the right. The tables used to
   carry their titles in a <th colspan="3">, which left nowhere to put a button
   and made the title a table header that described no column.
   ------------------------------------------------------------------------- */
.section-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.section-actions__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

/* The inline mail/reply affordances inside table rows. Sized to the text beside
   them rather than to the icon font's own box, which is taller than a row. */
.workspace-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-primary);
  text-decoration: none;
  vertical-align: middle;
}

.workspace-action:hover,
.workspace-action:focus-visible {
  text-decoration: underline;
}

.workspace-action .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

/* Table links read as links: the tables carry no underlines by default, so an
   anchor in a cell was indistinguishable from the text around it. */
.table td a:not(.workspace-action) {
  color: var(--accent-primary);
  text-decoration: none;
}

.table td a:not(.workspace-action):hover,
.table td a:not(.workspace-action):focus-visible {
  text-decoration: underline;
}

/* Visually hidden, still announced. Used for the row actions, whose icon alone
   would be read as "mail" with no indication of which row it belongs to. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Workspace dialogs ──────────────────────────────────────────────────────
   The preview frame, the event detail list and the composer. They reuse .modal
   and .modal-content; only what those do not already provide is here.
   ------------------------------------------------------------------------- */

/* .modal-content has no body rule of its own -- the project dialog puts its
   padding on the form inside it -- so the workspace dialogs declare one. */
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: 70vh;
}

.preview-frame {
  width: 100%;
  /* Tall enough for a page of a PDF without pushing the footer off a laptop
     screen; the modal scrolls if the viewport is shorter. */
  height: min(70vh, 720px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}

.event-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0 0 20px;
}

.event-facts dt {
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event-facts dd {
  margin: 0;
  color: var(--text-primary);
}

.event-subhead {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.event-attendees {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-attendees li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}

.event-status {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* The response, coloured only where it carries information. "No reply" stays
   muted: an unanswered invitation is not a problem to flag. */
.event-status[data-status="accepted"] { color: var(--success); }
.event-status[data-status="declined"] { color: var(--danger); }

.event-self { color: var(--text-secondary); }

.event-description {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 13px;
  /* Rendered as text, so the newlines in it are the only formatting it has. */
  white-space: pre-wrap;
}

.event-empty {
  color: var(--text-secondary);
  margin: 0;
}

.compose-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.compose-tool {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}

.compose-tool:hover,
.compose-tool:focus-visible {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.compose-editor {
  min-height: 180px;
  max-height: 40vh;
  overflow-y: auto;
  text-align: left;
  white-space: pre-wrap;
}

.compose-editor:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.compose-status {
  margin: 0;
  margin-right: auto;
  font-size: 13px;
  color: var(--text-secondary);
}

.signature-editor {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.signature-editor summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
}

.signature-hint {
  margin: 8px 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.signature-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.signature-status {
  font-size: 12px;
  color: var(--text-secondary);
}

.ticket-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.convert-enquiry {
  margin-top: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.convert-enquiry summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
}

.convert-subject {
  margin: 8px 0 4px;
  font-weight: 600;
}

.convert-message {
  margin: 0;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  color: var(--text-secondary);
}

.metric-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.metric-ok { color: var(--success); }
.metric-warn { color: var(--warning, #f59e0b); }
.metric-bad { color: var(--danger); }

.keyword-add {
  display: flex;
  gap: 8px;
  padding: 12px 24px 20px;
  flex-wrap: wrap;
}

.keyword-add .form-input { flex: 1 1 200px; }

.keyword-row-actions {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Login card: the password path, collapsed
   ---------------------------------------------------------------------------
   A passkey cannot be typed into the wrong website and SSO carries the
   organisation's own MFA, so both sit above this. The password still works and
   is one press away -- collapsed, not removed.
   --------------------------------------------------------------------------- */

.login-password > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.login-password > summary::-webkit-details-marker {
  display: none;
}

.login-password > summary::after {
  content: ' ▾';
  opacity: 0.6;
}

.login-password[open] > summary::after {
  content: ' ▴';
}

.login-password > summary:hover,
.login-password > summary:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}