/*
  DMG bridge for the PKD runtime.
  This file maps the older PKD shell to the shared platform design tokens.
*/

:root {
  --bg: var(--dmg-bg-soft, #fff8df);
  --panel: var(--dmg-surface, #fffaf0);
  --ink: var(--dmg-ink, #1f2a1d);
  --muted: var(--dmg-muted, #64705b);
  --line: var(--dmg-line, #e3dac0);
  --accent: var(--dmg-green, #0f5a34);
  --accent-dark: var(--dmg-green-dark, #063b24);
  --danger: var(--dmg-danger, #b42318);
  --warning: var(--dmg-warning, #92400e);
  --focus: var(--dmg-olive, #7c8f3a);
  --shadow: var(--dmg-shadow, 0 10px 24px rgba(31, 42, 29, 0.06));
  --login-bg: var(--dmg-bg-soft, #fff8df);
  --login-card: var(--dmg-surface, #fffaf0);
  --login-ink: var(--dmg-ink, #1f2a1d);
  --login-muted: var(--dmg-muted, #64705b);
  --login-line: var(--dmg-line, #e3dac0);
  --login-accent: var(--dmg-green, #0f5a34);
  --login-accent-dark: var(--dmg-green-dark, #063b24);
  --login-danger: var(--dmg-danger, #b42318);
}

body,
.login-auth-body {
  background: var(--dmg-page-gradient, linear-gradient(180deg, #fff8df 0%, #f6f0d5 54%, #eef4df 100%));
  color: var(--dmg-ink, #1f2a1d);
}

.app-shell {
  background: var(--dmg-page-gradient, linear-gradient(180deg, #fff8df 0%, #f6f0d5 54%, #eef4df 100%));
}

.main {
  max-width: 1480px;
}

.sidebar {
  background:
    var(--dmg-sidebar-gradient, linear-gradient(180deg, rgba(6, 59, 36, 0.97), rgba(4, 38, 25, 0.98))),
    var(--dmg-hero-image, url("/assets/site/images/hero/home-banner.png")) center / cover no-repeat;
  background-blend-mode: multiply;
  box-shadow: 14px 0 32px rgba(31, 42, 29, 0.14);
}

.brand,
.mobile-brand {
  letter-spacing: 0;
}

.brand,
.nav-link,
.sidebar-account,
.quick-create,
.quick-row a,
.sidebar-logout,
.mobile-menu-toggle,
.sidebar-mobile-close,
.panel,
.alert,
.login-stage,
.login-banner-frame,
.login-field input,
.password-toggle,
.login-submit,
.login-feature-grid div {
  border-radius: var(--dmg-radius, 8px);
}

.brand:hover,
.nav-link:hover,
.sidebar-account:hover,
.sidebar-account.active {
  background: rgba(255, 250, 240, 0.12);
}

.brand-mark,
.brand span.brand-mark,
.mobile-brand-mark,
.login-brand-mark,
.login-logo,
.account-avatar {
  border-radius: 50%;
  letter-spacing: 0;
}

.brand-mark,
.brand span.brand-mark,
.mobile-brand-mark,
.login-brand-mark,
.login-logo {
  background: var(--dmg-bg-soft, #fff8df);
  border: 1px solid rgba(244, 213, 114, 0.48);
  box-shadow: 0 10px 22px rgba(4, 38, 25, 0.16);
}

.brand-mark img,
.mobile-brand-mark img,
.login-brand-mark img,
.login-logo img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}

.brand-mark b,
.mobile-brand-mark b,
.login-brand-mark b,
.login-logo b {
  color: var(--dmg-green, #0f5a34);
  letter-spacing: 0;
}

.brand-copy strong,
.mobile-brand-copy strong,
.nav-copy strong,
.account-copy strong {
  letter-spacing: 0;
}

.brand-copy small,
.mobile-brand-copy small,
.nav-copy small,
.account-copy small,
.app-version,
.app-copyright,
.nav-section-title,
.eyebrow,
.login-eyebrow {
  letter-spacing: 0;
}

.nav-link {
  min-height: 44px;
  border-color: rgba(255, 250, 240, 0.08);
  color: rgba(255, 250, 240, 0.88);
}

.nav-link:hover {
  border-color: rgba(244, 213, 114, 0.22);
  transform: none;
}

.nav-link.active,
.nav-link[aria-current="page"] {
  background: rgba(255, 250, 240, 0.16);
  border-color: rgba(244, 213, 114, 0.44);
  box-shadow: inset 3px 0 0 var(--dmg-gold, #f4d572);
}

.nav-link.active::after,
.nav-link[aria-current="page"]::after {
  background: var(--dmg-gold, #f4d572);
  box-shadow: 0 0 0 4px rgba(244, 213, 114, 0.14);
}

.nav-icon,
.nav-link.active .nav-icon,
.nav-link[aria-current="page"] .nav-icon {
  background: rgba(255, 250, 240, 0.12);
  color: #fff8df;
}

.nav-badge,
.nav-link.active .nav-badge,
.nav-link[aria-current="page"] .nav-badge {
  background: var(--dmg-status-warning-bg, #fff4cf);
  color: var(--dmg-status-warning-ink, #7b5a04);
  box-shadow: none;
}

.quick-create {
  background: var(--dmg-button-primary-bg, #0f5a34);
  box-shadow: 0 10px 22px rgba(4, 38, 25, 0.18);
}

.quick-create:hover,
.login-submit:hover,
.btn:hover {
  filter: none;
}

.quick-create span,
.quick-row a,
.sidebar-account {
  background: rgba(255, 250, 240, 0.1);
}

.sidebar-logout,
.sidebar-footer .btn.sidebar-logout {
  border-color: rgba(244, 213, 114, 0.28);
  background: rgba(255, 250, 240, 0.08);
  color: #fff8df;
  box-shadow: none;
}

.sidebar-logout:hover,
.sidebar-footer .btn.sidebar-logout:hover {
  background: rgba(244, 213, 114, 0.18);
  color: #fff8df;
}

.panel,
.login-stage,
.login-feature-grid div {
  background: var(--dmg-surface, #fffaf0);
  border-color: var(--dmg-line, #e3dac0);
  box-shadow: var(--dmg-shadow, 0 10px 24px rgba(31, 42, 29, 0.06));
}

.btn.primary,
.login-submit {
  border-color: var(--dmg-button-primary-bg, #0f5a34);
  background: var(--dmg-button-primary-bg, #0f5a34);
  color: #fff8df;
  box-shadow: 0 10px 22px rgba(4, 38, 25, 0.14);
}

.btn.primary:hover,
.login-submit:hover {
  background: var(--dmg-button-primary-bg-hover, #063b24);
  color: #fff8df;
}

.btn.ghost {
  background: var(--dmg-button-ghost-bg, #fffaf0);
  color: var(--dmg-green, #0f5a34);
}

.alert.success {
  border-color: var(--dmg-status-success-bg, #e8f3df);
  background: var(--dmg-status-success-bg, #e8f3df);
  color: var(--dmg-status-success-ink, #17663b);
}

.alert.danger,
.login-alert {
  border-color: var(--dmg-status-danger-bg, #fff1f0);
  background: var(--dmg-status-danger-bg, #fff1f0);
  color: var(--dmg-status-danger-ink, #b42318);
}

.alert.warning {
  border-color: var(--dmg-status-warning-bg, #fff4cf);
  background: var(--dmg-status-warning-bg, #fff4cf);
  color: var(--dmg-status-warning-ink, #7b5a04);
}

.login-shell {
  padding: 28px;
  background: var(--dmg-page-gradient, linear-gradient(180deg, #fff8df 0%, #f6f0d5 54%, #eef4df 100%));
}

.login-stage {
  width: min(1040px, 100%);
  min-height: min(650px, calc(100vh - 56px));
  overflow: hidden;
}

.login-visual {
  background:
    var(--dmg-auth-hero-gradient, linear-gradient(90deg, rgba(6, 59, 36, 0.84), rgba(15, 90, 52, 0.42))),
    var(--dmg-auth-hero-image, url("/assets/app/images/auth/auth-hero-banner.jpg")) center / cover no-repeat;
}

.login-panel {
  background: var(--dmg-surface-strong, #fffdf6);
  border-left-color: var(--dmg-line, #e3dac0);
}

.login-banner-frame {
  background: var(--dmg-surface-strong, #fffdf6);
  border-color: rgba(255, 250, 240, 0.42);
  box-shadow: 0 12px 28px rgba(4, 38, 25, 0.16);
}

.login-banner-frame img {
  object-position: center;
}

.login-feature-grid div {
  background: rgba(255, 250, 240, 0.88);
}

.login-card h2,
.login-banner-fallback strong {
  color: var(--dmg-ink-strong, #17351f);
  letter-spacing: 0;
}

.login-eyebrow {
  color: var(--dmg-green, #0f5a34);
}

.login-field input {
  border-color: var(--dmg-control-border, #d9d0b3);
  background: var(--dmg-control-bg, #fffef8);
  color: var(--dmg-ink, #1f2a1d);
}

.login-field input:focus {
  border-color: var(--dmg-control-border-hover, #b9c98d);
  box-shadow: var(--dmg-focus, 0 0 0 3px rgba(124, 143, 58, 0.18));
}

.password-toggle {
  background: var(--dmg-chip-bg, #f3efd9);
  color: var(--dmg-green, #0f5a34);
}

.password-toggle:hover {
  background: var(--dmg-button-ghost-bg-hover, #eef5dd);
}

/* Business screens: keep legacy page CSS, but force the visible UI language back to DMG. */
.filter-grid.panel,
.report-hero,
.report-nav-card,
.report-filter-panel,
.report-compact-panel,
.kanban-column[data-kanban-column],
.order-card[data-order-card],
.order-action-card,
.order-flow-block,
.order-quick-panel,
.order-quick-card,
.completed-metadata-form,
.content-grid.two > article.panel:not(.order-detail-panel),
.sch-staff-manager,
.sch-off-lock-modal,
.ms-app-header,
.ms-tabs,
.ms-panel,
.ms-calendar-day,
.ms-off-tile,
.ms-request-history,
.ms-off-dialog,
.ms-empty-state {
  border-color: var(--dmg-line, #e3dac0) !important;
  border-radius: var(--dmg-radius, 8px) !important;
  background: var(--dmg-surface, #fffaf0) !important;
  box-shadow: var(--dmg-shadow, 0 10px 24px rgba(31, 42, 29, 0.06)) !important;
}

.report-nav-card:hover,
.order-card[data-order-card]:hover,
.kanban-column.is-drag-over,
.ms-tabs > button:hover,
.ms-cycle-nav > a:hover,
.ms-week-nav-btn:hover:not(:disabled),
.ms-week-today:hover {
  border-color: var(--dmg-control-border-hover, #b9c98d) !important;
  background: var(--dmg-button-ghost-bg-hover, #eef5dd) !important;
  box-shadow: var(--dmg-shadow, 0 10px 24px rgba(31, 42, 29, 0.06)) !important;
  color: var(--dmg-green, #0f5a34) !important;
  transform: none !important;
}

.kanban-column[data-kanban-column] {
  min-height: calc(100vh - 238px);
  padding: 10px !important;
}

.kanban-column.is-drag-over,
.order-card.is-dragging {
  border-color: var(--dmg-olive, #7c8f3a) !important;
  box-shadow: inset 0 0 0 2px rgba(124, 143, 58, 0.16) !important;
}

.kanban-column[data-workflow-status="processing"],
.order-status-timeline[data-visual-status="processing"] {
  --accent: var(--dmg-green, #0f5a34) !important;
  --accent-soft: var(--dmg-status-info-bg, #e8f3df) !important;
}

.kanban-column[data-workflow-status="sent"],
.order-status-timeline[data-visual-status="sent"] {
  --accent: var(--dmg-gold-deep, #c89b35) !important;
  --accent-soft: var(--dmg-status-warning-bg, #fff4cf) !important;
}

.kanban-column[data-workflow-status="completed"],
.order-status-timeline[data-visual-status="completed"] {
  --accent: var(--dmg-success, #137333) !important;
  --accent-soft: var(--dmg-status-success-bg, #e8f3df) !important;
}

.kanban-column[data-workflow-status="cancelled"],
.order-status-timeline[data-visual-status="cancelled"] {
  --accent: var(--dmg-danger, #b42318) !important;
  --accent-soft: var(--dmg-status-danger-bg, #fff1f0) !important;
}

.kanban-column[data-workflow-status="processing"] {
  border-top-color: var(--dmg-green, #0f5a34) !important;
}

.kanban-column[data-workflow-status="sent"] {
  border-top-color: var(--dmg-gold-deep, #c89b35) !important;
}

.kanban-column[data-workflow-status="completed"] {
  border-top-color: var(--dmg-success, #137333) !important;
}

.kanban-column[data-workflow-status="cancelled"] {
  border-top-color: var(--dmg-danger, #b42318) !important;
}

.order-card.is-updating::after,
.kanban-hint strong,
.report-primary-link,
.report-filter-link:hover,
.profile-table a {
  color: var(--dmg-green, #0f5a34) !important;
}

.order-card.is-handoff {
  border-color: var(--dmg-gold, #f4d572) !important;
  box-shadow: 0 8px 18px rgba(200, 155, 53, 0.12) !important;
}

.order-flow-block,
.order-quick-panel,
.completed-metadata-form,
.report-filter-panel,
.sch-off-lock-head,
.ms-off-dialog-head {
  background: var(--dmg-surface-strong, #fffdf6) !important;
}

.order-flow-current,
.report-status,
.report-filter-link,
.ms-publication,
.ms-legend span,
.ms-week-summary-line span,
.ms-calendar-status,
.ms-off-mark,
.ms-off-red-chip,
.ms-off-outline-chip,
.ms-request-history > summary em,
.ms-history-status,
.ms-off-dialog-off > span {
  border-radius: var(--dmg-pill-radius, 999px) !important;
  letter-spacing: 0 !important;
}

.order-flow-current.processing,
.ms-publication.is-full,
.ms-publication.is-shift_visible,
.ms-publication.is-status_only,
.ms-publication.is-locked {
  background: var(--dmg-status-info-bg, #e8f3df) !important;
  color: var(--dmg-status-info-ink, #0f5a34) !important;
}

.order-flow-current.sent,
.order-quick-warning,
.quick-current-reason {
  background: var(--dmg-status-warning-bg, #fff4cf) !important;
  border-color: var(--dmg-status-warning-bg, #fff4cf) !important;
  color: var(--dmg-status-warning-ink, #7b5a04) !important;
}

.order-flow-current.completed {
  background: var(--dmg-status-success-bg, #e8f3df) !important;
  color: var(--dmg-status-success-ink, #17663b) !important;
}

.order-flow-current.cancelled,
.order-quick-danger {
  background: var(--dmg-status-danger-bg, #fff1f0) !important;
  border-color: var(--dmg-status-danger-bg, #fff1f0) !important;
  color: var(--dmg-status-danger-ink, #b42318) !important;
}

.status-step-list::before {
  background: var(--dmg-line, #e3dac0) !important;
}

.status-step-list::after,
.status-step.is-current .status-dot {
  background: var(--accent) !important;
}

.status-dot {
  border-color: var(--dmg-line-strong, #d2c7a8) !important;
  box-shadow: var(--dmg-shadow-sm, 0 1px 2px rgba(31, 42, 29, 0.05)) !important;
}

.status-step:hover .status-dot,
.status-step.is-passed .status-dot {
  border-color: var(--accent) !important;
}

.status-step.is-current .status-dot {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 6px var(--accent-soft), 0 8px 18px rgba(31, 42, 29, 0.12) !important;
}

.report-nav-icon,
.ms-app-icon,
.ms-tab-icon,
.ms-empty-icon,
.info-hub-icon {
  border-radius: var(--dmg-radius, 8px) !important;
  background: var(--dmg-status-info-bg, #e8f3df) !important;
  color: var(--dmg-green, #0f5a34) !important;
}

.report-progress i,
.profile-bar-track {
  background: var(--dmg-surface-muted, #f3efd9) !important;
}

.report-progress i::before,
.profile-bar-track span,
.profile-column span {
  background: var(--dmg-green, #0f5a34) !important;
}

.report-data-table tbody tr:hover,
.table-wrap tbody tr:hover {
  background: var(--dmg-bg-soft, #fff8df) !important;
}

.ms-page {
  --ms-ink: var(--dmg-ink, #1f2a1d) !important;
  --ms-muted: var(--dmg-muted, #64705b) !important;
  --ms-line: var(--dmg-line, #e3dac0) !important;
  --ms-soft: var(--dmg-surface-muted, #f3efd9) !important;
  --ms-blue: var(--dmg-green, #0f5a34) !important;
  --ms-blue-soft: var(--dmg-status-info-bg, #e8f3df) !important;
  --ms-green: var(--dmg-success, #137333) !important;
  --ms-green-soft: var(--dmg-status-success-bg, #e8f3df) !important;
  --ms-red: var(--dmg-danger, #b42318) !important;
  --ms-red-dark: var(--dmg-status-danger-ink, #b42318) !important;
  --ms-red-soft: var(--dmg-status-danger-bg, #fff1f0) !important;
  --ms-red-line: #f4beb8 !important;
  --ms-gray: var(--dmg-muted, #64705b) !important;
  color: var(--dmg-ink, #1f2a1d) !important;
}

.ms-app-header {
  background:
    var(--dmg-module-hero-gradient, linear-gradient(90deg, rgba(6, 59, 36, 0.92), rgba(15, 90, 52, 0.64))),
    var(--dmg-hero-image, url("/assets/site/images/hero/home-banner.png")) center / cover no-repeat !important;
  color: #fff8df !important;
}

.ms-app-brand h1,
.ms-app-brand p,
.ms-app-meta,
.ms-cycle-nav small,
.ms-cycle-nav span,
.ms-cycle-nav strong {
  color: inherit !important;
}

.ms-cycle-nav > a,
.ms-week-nav-btn,
.ms-week-today {
  border-color: var(--dmg-control-border, #d9d0b3) !important;
  border-radius: var(--dmg-radius, 8px) !important;
  background: var(--dmg-surface-strong, #fffdf6) !important;
  color: var(--dmg-green, #0f5a34) !important;
}

.ms-tabs {
  background: var(--dmg-surface-muted, #f3efd9) !important;
}

.ms-tabs > button {
  border-radius: var(--dmg-radius, 8px) !important;
  letter-spacing: 0 !important;
}

.ms-tabs > button[data-ms-tab="work"].is-active,
.ms-tabs > button[data-ms-tab="total"].is-active {
  background: var(--dmg-surface-strong, #fffdf6) !important;
  color: var(--dmg-green, #0f5a34) !important;
  box-shadow: var(--dmg-shadow-sm, 0 1px 2px rgba(31, 42, 29, 0.05)) !important;
}

.ms-tabs > button[data-ms-tab="off"].is-active {
  background: var(--dmg-status-danger-bg, #fff1f0) !important;
  color: var(--dmg-status-danger-ink, #b42318) !important;
  box-shadow: var(--dmg-shadow-sm, 0 1px 2px rgba(31, 42, 29, 0.05)) !important;
}

.ms-calendar-day.is-today,
.ms-off-tile.is-today {
  border-color: var(--dmg-gold-deep, #c89b35) !important;
  box-shadow: inset 0 0 0 1px rgba(200, 155, 53, 0.34) !important;
}

.ms-calendar-day.is-ca2 .ms-calendar-status.is-work {
  background: var(--dmg-olive, #7c8f3a) !important;
}

.sch-staff-manager-overlay,
.sch-off-lock-overlay,
.ms-off-dialog-overlay,
.kanban-status-modal {
  background: rgba(31, 42, 29, 0.42) !important;
}

.sch-approved-off-badge,
.sch-off-lock-head span,
.sch-off-lock-current strong,
.sch-off-lock-note,
.completed-metadata-head span {
  color: var(--dmg-green, #0f5a34) !important;
}

.sch-approved-off-badge {
  background: var(--dmg-green, #0f5a34) !important;
  color: #fff8df !important;
}

.sch-staff-day-cell.is-off-locked,
.sch-off-lock-current {
  border-color: var(--dmg-status-success-bg, #e8f3df) !important;
  background: var(--dmg-status-success-bg, #e8f3df) !important;
}

@media (max-width: 980px) {
  .login-shell {
    padding: 18px;
  }

  .login-stage {
    width: min(500px, 100%);
  }
}

@media (max-width: 640px) {
  .mobile-app-header {
    background: rgba(255, 250, 240, 0.96) !important;
    border-bottom-color: var(--dmg-line, #e3dac0) !important;
  }

  .mobile-brand {
    color: var(--dmg-ink, #1f2a1d) !important;
  }

  .mobile-menu-toggle {
    border-color: var(--dmg-line, #e3dac0) !important;
    background: var(--dmg-surface, #fffaf0) !important;
    color: var(--dmg-green, #0f5a34) !important;
  }

  .sidebar {
    border-radius: 0 var(--dmg-radius, 8px) var(--dmg-radius, 8px) 0 !important;
  }

  .sidebar-logout,
  .sidebar-footer .btn.sidebar-logout {
    border-radius: var(--dmg-radius, 8px) !important;
  }
}

@media (max-width: 520px) {
  .login-shell {
    padding: 12px;
  }

  .login-stage,
  .login-panel {
    min-height: calc(100vh - 24px);
  }
}