/* ═══════════════════════════════════════
   MOLD INSPECTOR PRO — Design System v2
   Premium UI Upgrade
   ═══════════════════════════════════════ */

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

:root {
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg: #f0f2f5;
  --border: #e2e8f0;
  --text: #1a202c;
  --muted: #64748b;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --blue: #4a86c8;
  --green: #27ae60;
  --orange: #e67e22;
  --red: #e74c3c;
  --purple: #7c3aed;
}

/* ── Global ── */
body { font-family:var(--font) !important; background:var(--bg) !important; color:var(--text) !important; }
*, *::before, *::after { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.sk, [style*="animation"], .mip-confetti, .mip-confetti * { transition:none !important; }
::selection { background:rgba(74,134,200,.15); color:inherit; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#c1c8d4; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#9aa5b4; }

/* ── Animations ── */
@keyframes mipFadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes mipFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes mipScaleIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
@keyframes mipSlideRight { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
@keyframes mipPop { 0% { transform:scale(1); } 50% { transform:scale(1.15); } 100% { transform:scale(1); } }
@keyframes mipCheckmark { 0% { transform:scale(0); opacity:0; } 50% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1); opacity:1; } }
@keyframes mipSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes mipProgressFill { from { width:0; } }
@keyframes mipDropIn { from { opacity:0; transform:translateY(-8px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Page entrance */
#app > div { animation:none; }

/* Cards fade up staggered */
div[style*="display:grid"] > div[style*="background:#fff"][style*="border-radius"] { animation:mipFadeUp .4s ease both; }
div[style*="display:grid"] > div[style*="background:#fff"]:nth-child(1) { animation-delay:0s; }
div[style*="display:grid"] > div[style*="background:#fff"]:nth-child(2) { animation-delay:.05s; }
div[style*="display:grid"] > div[style*="background:#fff"]:nth-child(3) { animation-delay:.1s; }
div[style*="display:grid"] > div[style*="background:#fff"]:nth-child(4) { animation-delay:.15s; }
div[style*="display:grid"] > div[style*="background:#fff"]:nth-child(5) { animation-delay:.2s; }
div[style*="display:grid"] > div[style*="background:#fff"]:nth-child(6) { animation-delay:.25s; }

/* ── Typography ── */
h2[style*="font-size:24px"], h2[style*="font-size:26px"], div[style*="font-size:24px"][style*="font-weight:700"],
div[style*="font-size:22px"][style*="font-weight:700"] { letter-spacing:-.3px !important; line-height:1.2 !important; }
div[style*="font-size:20px"][style*="font-weight:700"],
div[style*="font-size:18px"][style*="font-weight:700"] { letter-spacing:-.2px !important; line-height:1.25 !important; }
label[style*="text-transform:uppercase"] { font-family:var(--font) !important; font-weight:600 !important; letter-spacing:.5px !important; }

/* ── Inputs ── */
input, textarea, select { font-family:var(--font) !important; border-radius:var(--radius) !important; border:1.5px solid var(--border) !important; outline:none !important; }
input:focus, textarea:focus, select:focus { border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(74,134,200,.12) !important; }

/* ── Buttons ── */
button { font-family:var(--font) !important; cursor:pointer; }
button:active:not(:disabled) { transform:scale(.97); }
button:disabled { opacity:.6; cursor:not-allowed; }
button[style*="background:linear-gradient(135deg,#4a86c8"] { border-radius:var(--radius) !important; box-shadow:0 2px 8px rgba(74,134,200,.25) !important; }
button[style*="background:linear-gradient(135deg,#4a86c8"]:hover { box-shadow:0 6px 20px rgba(74,134,200,.35) !important; transform:translateY(-1px); }
button[style*="background:#27ae60"]:hover, button[style*="background:linear-gradient(135deg,#27ae60"]:hover { box-shadow:0 4px 12px rgba(39,174,96,.3) !important; transform:translateY(-1px); }
button[style*="background:#7c3aed"]:hover { box-shadow:0 4px 12px rgba(124,58,237,.3) !important; transform:translateY(-1px); }
button[style*="background:#1a6b3c"]:hover { box-shadow:0 4px 12px rgba(26,107,60,.3) !important; transform:translateY(-1px); }
button[style*="background:linear-gradient(135deg,#635bff"]:hover { box-shadow:0 6px 20px rgba(99,91,255,.35) !important; transform:translateY(-1px); }
button[style*="border:1px dashed"]:hover, button[style*="border:2px dashed"]:hover { background:#f8fafc !important; }
button[style*="background:#f0f4f8"][style*="border:1px solid #d0dae6"] { border-radius:8px !important; }
button[style*="background:#f0f4f8"][style*="border:1px solid #d0dae6"]:hover { background:#e8edf4 !important; }
button[style*="color:#d9534f"][style*="border:1px solid #d9534f"]:hover { background:#fef2f2 !important; }

/* ── Sidebar glassmorphism ── */
div[style*="width:240px"][style*="background:#1a2332"][style*="position:fixed"] { background:linear-gradient(180deg, rgba(26,35,50,.97) 0%, rgba(21,32,48,.98) 100%) !important; backdrop-filter:blur(12px) !important; }
div[style*="width:240px"][style*="background:#1a2332"] div[style*="padding:12px 20px"][style*="cursor:pointer"] { border-radius:0 8px 8px 0 !important; margin-right:8px !important; }
div[style*="width:240px"][style*="background:#1a2332"] div[style*="border-left:3px solid"][style*="background:#2c3e50"] { background:rgba(44,62,80,.5) !important; box-shadow:inset 3px 0 0 var(--blue), 0 0 12px rgba(74,134,200,.08) !important; }
div[style*="width:240px"] div[style*="border-bottom:1px solid #2c3e50"] { border-bottom-color:rgba(255,255,255,.06) !important; }
div[style*="width:240px"] div[style*="border-top:1px solid #2c3e50"] { border-top-color:rgba(255,255,255,.06) !important; }

/* ── Headers ── */
div[style*="border-bottom:1px solid #e0e0e0"] { border-bottom-color:var(--border) !important; box-shadow:0 1px 2px rgba(0,0,0,.03) !important; }

/* ── Cards ── */
div[style*="background:#fff"][style*="border-radius"][style*="border:1px solid"]:hover { box-shadow:var(--shadow-md) !important; }
div[style*="padding:16px"][style*="background:#fff"][style*="border-radius:10px"][style*="border:1px solid #d0dae6"] { border-color:var(--border) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; }
div[style*="border-radius:14px"][style*="padding:24px"][style*="text-align:center"][style*="border:1px solid #e8edf4"] { border-color:var(--border) !important; border-radius:16px !important; box-shadow:var(--shadow) !important; }
div[style*="border-radius:12px"][style*="padding:16px"][style*="text-align:center"][style*="border:1px solid #e8edf4"] { border-color:var(--border) !important; border-radius:14px !important; box-shadow:var(--shadow) !important; }
div[style*="border-radius:14px"][style*="padding:28px 20px"][style*="text-align:center"][style*="cursor:pointer"] { border-radius:16px !important; border-color:var(--border) !important; }

/* ── Tables ── */
div[style*="background:#f0f4f8"][style*="border-radius:8px"][style*="font-weight:700"][style*="text-transform:uppercase"] { background:#f8fafc !important; border:1px solid var(--border) !important; border-radius:10px !important; }
div[style*="border:1px solid #e8edf4"][style*="cursor:pointer"][style*="border-radius:8px"] { border-radius:10px !important; }

/* ── Status badges ── */
span[style*="border-radius:12px"][style*="font-weight:600"][style*="color:#fff"], span[style*="border-radius:10px"][style*="font-weight:600"][style*="color:#fff"] { letter-spacing:.3px !important; font-size:10px !important; padding:4px 10px !important; text-transform:uppercase !important; }

/* ── Editor nav ── */
div[style*="border-top:2px solid #d0dae6"][style*="display:flex"][style*="background:#fff"] { box-shadow:0 -2px 8px rgba(0,0,0,.04) !important; border-top:1px solid var(--border) !important; }
div[style*="border-top:1px solid #d0dae6"][style*="display:flex"][style*="background:#fff"][style*="position:fixed"][style*="bottom:0"] { box-shadow:0 -2px 8px rgba(0,0,0,.06) !important; border-top:1px solid var(--border) !important; }
button[style*="background:#dce8f5"] { background:rgba(74,134,200,.08) !important; }

/* ── Calendar ── */
div[style*="background:#fff"][style*="border-radius:6px"][style*="min-height:60px"] { border-radius:10px !important; border:1px solid var(--border) !important; }

/* ── Modals ── */
div[style*="background:rgba(0,0,0,.5)"][style*="position:fixed"] { backdrop-filter:blur(4px) !important; }
div[style*="background:rgba(0,0,0,.5)"] > div[style*="background:#fff"][style*="border-radius:14px"] { border-radius:18px !important; box-shadow:0 20px 60px rgba(0,0,0,.2) !important; animation:mipScaleIn .25s ease both; }

/* ── Progress bars ── */
div[style*="height:8px"][style*="background:#e0e0e0"] { height:10px !important; border-radius:6px !important; background:#edf2f7 !important; }
div[style*="height:8px"][style*="background:#e0e0e0"] > div { border-radius:6px !important; animation:mipProgressFill .8s ease both; }

/* ── Checklist ── */
div[style*="border-bottom:1px solid #dce8f5"][style*="padding:10px 0"] { padding:12px 0 !important; border-bottom-color:#f1f5f9 !important; }
button[style*="padding:6px 14px"][style*="border-radius:6px"][style*="font-weight:600"] { border-radius:8px !important; min-width:52px !important; }
button[style*="background:#4a86c8"][style*="padding:6px 14px"] { animation:mipPop .2s ease; }

/* ── Photos ── */
img[style*="width:80px"][style*="height:60px"][style*="object-fit:cover"] { border-radius:8px !important; }

/* ── Onboarding/Auth ── */
div[style*="background:#fff"][style*="border-radius:20px"][style*="padding:40px"][style*="box-shadow:0 12px 48px"],
div[style*="background:#fff"][style*="border-radius:20px"][style*="padding:36px"][style*="box-shadow:0 12px 48px"] { border-radius:20px !important; box-shadow:var(--shadow-lg) !important; border-color:var(--border) !important; animation:mipScaleIn .3s ease both; }

/* ── Toast ── */
#app ~ div[style*="position:fixed"][style*="top:16px"] { border-radius:10px !important; font-family:var(--font) !important; box-shadow:var(--shadow-lg) !important; animation:mipFadeUp .3s ease both !important; }

/* ── Skeleton ── */
.sk { border-radius:10px !important; }

/* ── Save indicator ── */
.mip-save-spin { width:12px; height:12px; border:2px solid #d0dae6; border-top-color:var(--blue); border-radius:50%; animation:mipSpin .6s linear infinite; display:inline-block; }
.mip-save-check { color:var(--green); animation:mipCheckmark .4s ease both; font-size:14px; }

/* ── Command palette ── */
.mip-palette-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding-top:20vh; animation:mipFadeIn .15s ease both; }
.mip-palette { background:#fff; border-radius:16px; width:520px; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,.2); overflow:hidden; animation:mipScaleIn .2s ease both; }
.mip-palette-input { width:100%; padding:16px 20px; font-size:16px; font-family:var(--font); border:none !important; border-bottom:1px solid var(--border) !important; border-radius:0 !important; outline:none !important; box-shadow:none !important; }
.mip-palette-input::placeholder { color:#a0aec0; }
.mip-palette-results { max-height:300px; overflow-y:auto; padding:8px; }
.mip-palette-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; font-size:14px; font-family:var(--font); color:var(--text); }
.mip-palette-item:hover, .mip-palette-item.mip-active { background:#f0f4f8; }
.mip-palette-item .mip-pi-icon { font-size:18px; width:28px; text-align:center; }
.mip-palette-item .mip-pi-label { font-weight:600; }
.mip-palette-item .mip-pi-hint { font-size:11px; color:var(--muted); margin-left:auto; }
.mip-palette-footer { padding:8px 16px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); display:flex; gap:16px; font-family:var(--font); }
.mip-palette-footer kbd { background:#edf2f7; padding:1px 5px; border-radius:4px; font-size:10px; border:1px solid #e2e8f0; }

/* ── Color-coded report cards ── */
.mip-status-draft { border-left:3px solid #5f6d7e !important; }
.mip-status-scheduled { border-left:3px solid #3b82f6 !important; }
.mip-status-sent { border-left:3px solid #2d7ff9 !important; }
.mip-status-complete { border-left:3px solid var(--orange) !important; }
.mip-status-paid { border-left:3px solid var(--green) !important; }
.mip-status-overdue { border-left:3px solid var(--red) !important; }

/* ── Keyboard hint ── */
.mip-kbd-hint { position:fixed; bottom:16px; right:16px; background:rgba(26,35,50,.9); color:#fff; padding:8px 14px; border-radius:8px; font-size:11px; font-family:var(--font); z-index:100; opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none; }
.mip-kbd-hint.mip-visible { opacity:1; transform:translateY(0); }
.mip-kbd-hint kbd { background:rgba(255,255,255,.15); padding:2px 6px; border-radius:3px; font-size:10px; margin:0 2px; }

/* ══════════════════════════
   THREE-DOT MENU
   ══════════════════════════ */

.mip-dot-btn {
  width: 32px;
  height: 32px;
  border: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  min-height: auto !important;
  line-height: 1 !important;
  position: relative;
  flex-shrink: 0;
}
.mip-dot-btn:hover {
  background: #f1f5f9 !important;
  color: #475569 !important;
}
.mip-dot-btn:active {
  transform: scale(.9) !important;
}

.mip-dot-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  z-index: 200;
  min-width: 160px;
  padding: 4px;
  animation: mipDropIn .15s ease both;
  overflow: hidden;
}

.mip-dot-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text);
  border: none !important;
  background: none !important;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  min-height: auto !important;
}
.mip-dot-menu-item:hover {
  background: #f1f5f9 !important;
}
.mip-dot-menu-item:active {
  transform: none !important;
}
.mip-dot-menu-item .mip-dm-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.mip-dot-menu-item.mip-danger {
  color: var(--red);
}
.mip-dot-menu-item.mip-danger:hover {
  background: #fef2f2 !important;
}

.mip-dot-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* Hide original action buttons when three-dot is active */
.mip-has-dot-menu > button:not(.mip-dot-btn) {
  display: none !important;
}

/* ── Print ── */
@media print { body { background:#fff !important; } .sk,.sk-side,.mip-palette-overlay,.mip-kbd-hint,.mip-dot-menu { display:none !important; } }

/* ── Mobile ── */
@media (max-width:900px) {
  button { min-height:44px; }
  input, textarea, select { font-size:16px !important; }
  div[style*="position:fixed"][style*="bottom:0"] { padding-bottom:env(safe-area-inset-bottom) !important; }
  div[style*="position:fixed"][style*="bottom:0"][style*="display:flex"][style*="background:#fff"] button { min-height:52px !important; }
  .mip-palette { width:95vw; }
  .mip-kbd-hint { display:none !important; }
  .mip-dot-btn { min-height:auto !important; }
  .mip-dot-menu-item { min-height:auto !important; }
}