/* Bauwerki Sign - Corporate Design */

:root {
  --color-orange: #e67e22;
  --color-charcoal: #34495e;
  --color-navy: #2c3e50;
  --color-warm-gray: #7f8c8d;
  --color-light-gray: #bdc3c7;
  --color-off-white: #ecf0f1;
  --color-bg: #f4f6f8;
}

/* ── Base ────────────────────────────────────────────────── */
body {
  background-color: var(--color-bg);
  color: var(--color-charcoal);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Global card shadow ───────────────────────────────────
   Targets any element that has both bg-white and rounded-2xl
   (i.e. all content cards). Adds a subtle elevation. */
.bg-white.rounded-2xl {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3 {
  letter-spacing: -0.01em;
}

/* ── Links ───────────────────────────────────────────────── */
a {
  color: var(--color-charcoal);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
a:hover { opacity: 0.75; }

/* ── Buttons ─────────────────────────────────────────────── */
button {
  cursor: pointer;
  font-family: inherit;
}

button.btn-primary, .btn-primary,
button[type="submit"] {
  background-color: var(--color-charcoal);
  color: #fff;
  border: none;
  font-weight: 600;
  transition: opacity 0.15s ease;
}
button.btn-primary:hover, .btn-primary:hover,
button[type="submit"]:hover { opacity: 0.88; }

button.btn-secondary, .btn-secondary {
  background-color: var(--color-off-white);
  color: var(--color-charcoal);
  border: 1.5px solid var(--color-light-gray);
  font-weight: 600;
  transition: opacity 0.15s ease;
}
button.btn-secondary:hover, .btn-secondary:hover { opacity: 0.8; }

button.btn-danger, .btn-danger {
  background-color: #fff0f0;
  color: #e74c3c;
  border: 1.5px solid #fcc;
  font-weight: 600;
}
button.btn-danger:hover, .btn-danger:hover { opacity: 0.88; }

/* ── Inputs ──────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
  border-color: #d1d5db;
  color: var(--color-navy);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.12);
}
input[type="checkbox"] { accent-color: var(--color-orange); }
select { cursor: pointer; }

/* ── Status badges ───────────────────────────────────────── */
.badge-success {
  background-color: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.badge-warning {
  background-color: #fffbeb;
  color: #d97706;
  border: 1px solid #fcd34d;
}
.badge-danger {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
  background-color: #fff;
  color: var(--color-warm-gray);
  border-top: 1px solid #e5e7eb;
}
footer a {
  color: var(--color-charcoal);
}
footer a:hover { opacity: 0.65; }

/* ── Tab buttons (settings) ──────────────────────────────── */
.active-tab {
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  color: var(--color-navy);
}
.tab-btn { color: var(--color-warm-gray); }

/* ── Active button mode states ───────────────────────────── */
#btnModeCamera.active, #btnModeGallery.active, #btnModeReport.active,
#btnModeEdit.active, #btnModeShare.active, #btnModeDelete.active {
  background-color: var(--color-off-white) !important;
  border-color: var(--color-charcoal) !important;
  color: var(--color-charcoal) !important;
  font-weight: 800;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.2s ease-out; }

/* ── Focus visible (keyboard nav) ─────────────────────────
   !important: every input/button/etc. in the app carries Tailwind's
   focus:outline-none utility (a class+pseudo-class selector, higher
   specificity than this bare pseudo-class), which otherwise wins and
   leaves keyboard users with no visible focus indicator at all. */
:focus-visible {
  outline: 2px solid var(--color-orange) !important;
  outline-offset: 2px !important;
}

/* ── Canvas drawing: prevent page scroll on touch ────────── */
#pane-draw,
#drawCanvas {
  touch-action: none;
}

/* ── Prevent overscroll bounce / address-bar jump ────────── */
html, body {
  overscroll-behavior: none;
}

/* landing.html's full-bleed hero uses 100vw-based negative margins; on a
   desktop with a visible vertical scrollbar, 100vw includes the scrollbar
   gutter, so the hero ends up a few px wider than the viewport and adds a
   stray horizontal scrollbar. `clip` (not `hidden`) kills that without
   turning <body> into a scroll container — `hidden` forces overflow-y to
   compute to `auto`, which broke vertical page scrolling. No page has
   intentional horizontal page scroll (wide tables/diagrams scroll inside
   their own containers). */
body {
  overflow-x: clip;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 14px; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Global instant tooltip ──────────────────────────────── */
/* Shown/positioned by base.html's delegated mouseover/focusin listener,
   replacing every title="" attribute's native ~1s hover delay app-wide. */
.global-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  background-color: #2c3e50;
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}