/* Douzone ERP Soft Navy Theme for Vue 3 SPA */

:root {
  --douzone-navy: #2C3E50;
  --douzone-slate: #34495E;
  --douzone-bg: #F4F6F9;
  --douzone-border: #CBD5E1;
  --douzone-input-bg: #FFFFFF;
  --douzone-readonly-bg: #ECF0F1;

  --status-pass: #2ECC71;
  --status-pass-bg: #E8F8F5;
  --status-pass-text: #117864;

  --status-warning: #F39C12;
  --status-warning-bg: #FEF9E7;
  --status-warning-text: #B9770E;

  --status-error: #E74C3C;
  --status-error-bg: #FDEDEC;
  --status-error-text: #922B21;

  --focus-highlight: #2980B9;
  --focus-box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.25);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--douzone-bg);
  color: var(--douzone-navy);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  height: 100vh;
  overflow: hidden;
}

.douzone-app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.douzone-header-toolbar {
  background-color: var(--douzone-navy);
  color: #FFFFFF;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #1A252F;
}

.douzone-header-toolbar .btn-douzone-action {
  background-color: #34495E;
  color: #FFFFFF;
  border: 1px solid #4A6572;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
  margin-left: 4px;
  cursor: pointer;
}

.douzone-header-toolbar .btn-douzone-action:hover {
  background-color: #415B76;
}

.douzone-summary-footer {
  background-color: var(--douzone-slate);
  color: #ECF0F1;
  padding: 6px 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #2C3E50;
}

.hotkey-badge {
  background-color: #2C3E50;
  color: #F1C40F;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
  font-family: monospace;
  margin-right: 4px;
}
