// Screens for Variant 1: Light Liquid Glass (Apple iOS 26 default)

const lightTheme = {
  dark: false,
  studio: false,
  bg: '#f7f8fa',
  bgGradient: 'linear-gradient(180deg, #ffffff 0%, #f7f8fa 60%, #f4f5f7 100%)',
  pageBg: '#f7f8fa',
  card: '#FFFFFF',
  cardAlt: '#f4f5f7',
  text: '#1a1d2b',
  textSec: '#6b7280',
  textTer: 'rgba(26,29,43,0.34)',
  accent: '#6c8388',
  accentSoft: 'rgba(108,131,136,0.12)',
  onAccent: '#FFFFFF',
  green: '#4f7a5b',
  greenSoft: 'rgba(79,122,91,0.14)',
  orange: '#b07a3c',
  orangeSoft: 'rgba(176,122,60,0.14)',
  red: '#b0474b',
  redSoft: 'rgba(176,71,75,0.10)',
  purple: '#6c6f8a',
  sep: 'rgba(26,29,43,0.08)',
  // Interaction surfaces
  chip: 'rgba(26,29,43,0.06)', // soft panel / icon tile fill
  chipStrong: 'rgba(26,29,43,0.09)', // segmented track
  solidBg: '#1a1d2b', // primary ink buttons + selected chips
  solidFg: '#ffffff', // text on solidBg
  sheetBg: '#FFFFFF',
  inputBg: '#FFFFFF',
  inputBorder: 'rgba(26,29,43,0.14)',
  scrim: 'rgba(12,16,20,0.42)',
  grabber: 'rgba(26,29,43,0.18)',
  shadowCard: '0 1px 2px rgba(26,29,43,0.03), 0 6px 18px rgba(26,29,43,0.05)'
};

const darkTheme = {
  dark: true,
  bg: '#000000',
  bgGradient: 'linear-gradient(180deg, #0a0a0c 0%, #000000 60%, #000000 100%)',
  pageBg: '#000000',
  card: '#1C1C1E',
  cardAlt: '#2C2C2E',
  text: '#FFFFFF',
  textSec: 'rgba(235,235,245,0.62)',
  textTer: 'rgba(235,235,245,0.32)',
  accent: '#0A84FF',
  accentSoft: 'rgba(10,132,255,0.22)',
  onAccent: '#FFFFFF',
  green: '#30D158',
  greenSoft: 'rgba(48,209,88,0.20)',
  orange: '#FF9F0A',
  orangeSoft: 'rgba(255,159,10,0.20)',
  red: '#FF453A',
  redSoft: 'rgba(255,69,58,0.20)',
  purple: '#BF5AF2',
  sep: 'rgba(84,84,88,0.55)',
  chip: 'rgba(120,120,128,0.28)',
  chipStrong: 'rgba(120,120,128,0.36)',
  solidBg: '#48484A',
  solidFg: '#ffffff',
  sheetBg: '#1C1C1E',
  inputBg: '#2C2C2E',
  inputBorder: 'rgba(84,84,88,0.6)',
  scrim: 'rgba(0,0,0,0.6)',
  grabber: 'rgba(235,235,245,0.3)',
  shadowCard: '0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4)'
};

// Theme context — every screen reads its palette via useTheme()
const ThemeContext = React.createContext(lightTheme);
const useTheme = () => React.useContext(ThemeContext);

// ─── Studio design (AudioFlow design system) ────────────────
// Near-monochrome: ink on white/greys, one desaturated teal-grey accent, grey shadows,
// hairline translucent-ink borders, larger card radii. SF/system font (already app default).
const studioTheme = {
  dark: false,
  studio: true,
  bg: '#ffffff',
  bgGradient: 'linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%)',
  pageBg: '#f7f8fa',
  card: '#ffffff',
  cardAlt: '#f4f5f7',
  text: '#1a1d2b',
  textSec: 'rgba(26,29,43,0.60)',
  textTer: 'rgba(26,29,43,0.34)',
  accent: '#6c8388',
  accentSoft: 'rgba(108,131,136,0.12)',
  onAccent: '#ffffff',
  green: '#4d7c5a', greenSoft: 'rgba(77,124,90,0.14)',
  orange: '#b07a3c', orangeSoft: 'rgba(176,122,60,0.14)',
  red: '#a8443f', redSoft: 'rgba(168,68,63,0.10)',
  purple: '#6c6f88',
  sep: 'rgba(26,29,43,0.10)',
  chip: 'rgba(26,29,43,0.06)',
  chipStrong: 'rgba(26,29,43,0.10)',
  solidBg: '#1a1d2b', solidFg: '#ffffff',
  sheetBg: '#ffffff',
  inputBg: '#ffffff', inputBorder: 'rgba(26,29,43,0.14)',
  scrim: 'rgba(12,16,20,0.42)', grabber: 'rgba(26,29,43,0.18)',
  shadowCard: '0 1px 2px rgba(26,29,43,0.05), 0 10px 30px rgba(26,29,43,0.07)',
  radiusCard: 20, radiusPill: 999,
  accents: ['#6c8388', '#4d6266']
};

const studioDarkTheme = {
  dark: true,
  studio: true,
  bg: '#0c1014',
  bgGradient: 'linear-gradient(180deg, #0e1216 0%, #0c1014 100%)',
  pageBg: '#0c1014',
  card: '#151a1f',
  cardAlt: '#1c222a',
  text: '#f2f4f6',
  textSec: 'rgba(242,244,246,0.62)',
  textTer: 'rgba(242,244,246,0.34)',
  accent: '#8aa1a6',
  accentSoft: 'rgba(138,161,166,0.20)',
  onAccent: '#0c1014',
  green: '#6fae86', greenSoft: 'rgba(111,174,134,0.20)',
  orange: '#c79a5e', orangeSoft: 'rgba(199,154,94,0.20)',
  red: '#cf6b64', redSoft: 'rgba(207,107,100,0.20)',
  purple: '#9a9db8',
  sep: 'rgba(242,244,246,0.12)',
  chip: 'rgba(242,244,246,0.08)',
  chipStrong: 'rgba(242,244,246,0.14)',
  solidBg: '#f2f4f6', solidFg: '#0c1014',
  sheetBg: '#151a1f',
  inputBg: '#1c222a', inputBorder: 'rgba(242,244,246,0.16)',
  scrim: 'rgba(0,0,0,0.6)', grabber: 'rgba(242,244,246,0.28)',
  shadowCard: '0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4)',
  radiusCard: 20, radiusPill: 999,
  accents: ['#8aa1a6', '#6c8388']
};

// Accent swatches for the built-in light/dark themes too
lightTheme.accents = ['#6c8388', '#4d6266', '#1a1d2b', '#4f7a5b', '#b07a3c', '#6c6f8a'];
darkTheme.accents = ['#0A84FF', '#5E5CE6', '#30D158', '#FF9F0A', '#FF375F', '#BF5AF2'];

const THEMES = { light: lightTheme, dark: darkTheme, studio: studioTheme, studioDark: studioDarkTheme };
const THEME_META = [
  { id: 'studio', label: 'Studio' },
  { id: 'studioDark', label: 'Studio Dunkel' }];


function rfHexToRgba(hex, a) {
  let h = (hex || '').replace('#', '');
  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
  const n = parseInt(h, 16);
  if (isNaN(n)) return hex;
  return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${a})`;
}
// Returns a theme with the chosen accent applied (or the base theme unchanged).
function applyAccent(base, accent) {
  if (!accent || accent === base.accent) return base;
  return { ...base, accent, accentSoft: rfHexToRgba(accent, base.dark ? 0.22 : 0.14) };
}

// Tiny SF-style icon factory
const Icon = ({ d, size = 17, color = 'currentColor', sw = 1.8, fill = false }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill={fill ? color : 'none'} stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    <path d={d} />
  </svg>;


const icons = {
  trailer: 'M3 16h2m14 0h2M5 16a2 2 0 104 0M15 16a2 2 0 104 0M3 16V8a1 1 0 011-1h14a2 2 0 012 2v7M3 16h12',
  speaker: 'M8 4h8a1 1 0 011 1v14a1 1 0 01-1 1H8a1 1 0 01-1-1V5a1 1 0 011-1zM12 9.5a2 2 0 100 0.001M12 15.5a3 3 0 100 0.001',
  mic: 'M12 2a3 3 0 00-3 3v6a3 3 0 006 0V5a3 3 0 00-3-3zM5 11a7 7 0 0014 0M12 18v3M9 21h6',
  cable: 'M4 12a4 4 0 014-4h2v8H8a4 4 0 01-4-4zM20 12a4 4 0 01-4 4h-2V8h2a4 4 0 014 4zM10 12h4',
  cal: 'M4 6a2 2 0 012-2h12a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM4 10h16M8 2v4M16 2v4',
  euro: 'M18 7a6 6 0 00-9 0M18 17a6 6 0 01-9 0M5 10h10M5 14h10',
  doc: 'M6 2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zM14 2v6h6M9 14h6M9 18h4',
  bell: 'M12 2a6 6 0 016 6v4l2 3H4l2-3V8a6 6 0 016-6zM10 19a2 2 0 004 0',
  plus: 'M12 5v14M5 12h14',
  search: 'M11 4a7 7 0 100 14 7 7 0 000-14zM21 21l-5.2-5.2',
  filter: 'M4 6h16M7 12h10M10 18h4',
  back: 'M15 6l-6 6 6 6',
  chev: 'M9 6l6 6-6 6',
  more: 'M5 12h.01M12 12h.01M19 12h.01',
  pin: 'M12 2v8M12 10l-4 4M12 10l4 4M9 14h6l-2 7h-2l-2-7z',
  camera: 'M4 8a2 2 0 012-2h2l2-2h4l2 2h2a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V8zM12 17a4 4 0 100-8 4 4 0 000 8z',
  check: 'M5 12l5 5L20 7',
  arrow: 'M5 12h14M13 5l7 7-7 7',
  sound: 'M3 9v6h4l5 4V5L7 9H3zM16 8a5 5 0 010 8M19 5a9 9 0 010 14',
  star: 'M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z',
  download: 'M12 4v12M6 10l6 6 6-6M4 20h16',
  edit: 'M4 20h4l11-11-4-4L4 16v4zM14 5l4 4'
};

// ─────────────────────────────────────────────────────────────
// Equipment glyphs — solid, filled (like the user's reference speaker)
// ─────────────────────────────────────────────────────────────
function EqGlyph({ kind = 'speaker', size = 26, color = '#1c1c1e' }) {
  const common = { width: size, height: size, viewBox: '0 0 24 24' };
  switch (kind) {
    case 'speaker':
      return (
        <svg {...common} fill={color}>
          <path fillRule="evenodd" clipRule="evenodd" d="M6.6 2h10.8A2.6 2.6 0 0120 4.6v14.8a2.6 2.6 0 01-2.6 2.6H6.6A2.6 2.6 0 014 19.4V4.6A2.6 2.6 0 016.6 2Zm5.4 3.05a2.75 2.75 0 100 5.5 2.75 2.75 0 000-5.5ZM12 11.5a3.6 3.6 0 100 7.2 3.6 3.6 0 000-7.2Z" />
        </svg>);

    case 'mic':
      return (
        <svg {...common}>
          <rect x="9" y="2" width="6" height="12" rx="3" fill={color} />
          <path d="M5.8 11a6.2 6.2 0 0012.4 0" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" />
          <path d="M12 17.4V21M9 21h6" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>);

    case 'mixer':
      return (
        <svg {...common} fill={color}>
          <path fillRule="evenodd" clipRule="evenodd" d="M3.6 4h16.8A1.6 1.6 0 0122 5.6v12.8a1.6 1.6 0 01-1.6 1.6H3.6A1.6 1.6 0 012 18.4V5.6A1.6 1.6 0 013.6 4Zm3.4 2.4a1.05 1.05 0 00-1.05 1.05v2.6a1.05 1.05 0 102.1 0v-2.6A1.05 1.05 0 007 6.4Zm5 0a1.05 1.05 0 00-1.05 1.05v6a1.05 1.05 0 102.1 0v-6A1.05 1.05 0 0012 6.4Zm5 0a1.05 1.05 0 00-1.05 1.05v1.4a1.05 1.05 0 102.1 0v-1.4A1.05 1.05 0 0017 6.4Z" />
        </svg>);

    case 'trailer':
      return (
        <svg {...common} fill={color}>
          <rect x="2.5" y="6" width="15.5" height="9" rx="1.6" />
          <path d="M18 11.4h2.7a1.2 1.2 0 011.2 1.2v.95a.7.7 0 01-.7.7H18z" />
          <circle cx="7" cy="17.4" r="2.2" />
          <circle cx="13.6" cy="17.4" r="2.2" />
        </svg>);

    case 'light':
      return (
        <svg {...common} fill={color}>
          <path d="M4.6 4.5h9.4a2 2 0 012 2v6a2 2 0 01-2 2H4.6a2 2 0 01-2-2v-6a2 2 0 012-2Z" />
          <path d="M16.2 7.6l4.4-2.1a.9.9 0 011.3.8v8.8a.9.9 0 01-1.3.8l-4.4-2.1z" />
          <path d="M6.5 18v2.2M12.1 18v2.2" stroke={color} strokeWidth="2" strokeLinecap="round" />
        </svg>);

    case 'cable':
      return (
        <svg {...common}>
          <path d="M4 12a4 4 0 014-4h2v8H8a4 4 0 01-4-4zM20 12a4 4 0 01-4 4h-2V8h2a4 4 0 014 4zM10 12h4" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>);

    case 'case':
      return (
        <svg {...common} fill={color}>
          <path d="M3.5 7.5h17A1.5 1.5 0 0122 9v8.5A1.5 1.5 0 0120.5 19h-17A1.5 1.5 0 012 17.5V9A1.5 1.5 0 013.5 7.5Z" />
          <path d="M8.5 7.5V6A1.5 1.5 0 0110 4.5h4A1.5 1.5 0 0115.5 6v1.5" fill="none" stroke={color} strokeWidth="2" />
        </svg>);

    case 'light2':
    case 'par':
      return (
        <svg {...common} fill={color}>
          <circle cx="12" cy="9" r="6" />
          <path d="M9 15h6l-1 5h-4z" />
        </svg>);

    default:
      return <svg {...common} fill={color}><circle cx="12" cy="12" r="9" /></svg>;
  }
}

// ─────────────────────────────────────────────────────────────
// Themed PNG icon — swaps between light/dark image based on theme.
// Use for richly-colored / detailed icons that don't fit the stroke pattern.
// ─────────────────────────────────────────────────────────────
function ImgIcon({ light, dark, size = 22, alt = '', style }) {
  const t = useTheme();
  const src = t && t.dark ? dark : light;
  return (
    <img src={src} alt={alt} width={size} height={size}
    style={{ width: size, height: size, objectFit: 'contain', display: 'block', ...style, opacity: "0.35" }} />);


}

// Canonical themed icon paths for the new equipment + logistik glyphs.
// Per user request: use the colored/filled (dark) version in BOTH light and dark modes.
const IMG_ICONS = {
  equipment: { light: 'assets/icon-equipment-dark.png', dark: 'assets/icon-equipment-dark.png' },
  truck: { light: 'assets/icon-truck-dark.png', dark: 'assets/icon-truck-dark.png' },
  // Line-art glyphs (black on transparent) — invert in dark mode.
  warenhaus: { light: 'assets/icon-warenhaus.png', dark: 'assets/icon-warenhaus.png', invertDark: true },
  lager: { light: 'assets/icon-lager.png', dark: 'assets/icon-lager.png', invertDark: true },
  lieferwagen: { light: 'assets/icon-lieferwagen.png', dark: 'assets/icon-lieferwagen.png', invertDark: true }
};

const EQ_GLYPHS = ['speaker', 'mic', 'mixer', 'trailer', 'light', 'cable', 'case', 'par'];
const EQ_EMOJIS = ['🔊', '🎤', '🎚️', '🎛️', '🚚', '🚐', '💡', '🔌', '📦', '🎸', '🥁', '⚡'];

// Equipment avatar — photo > emoji > glyph, on a soft tile
function EqAvatar({ item = {}, size = 54, radius = 12 }) {
  const t = useTheme();
  const glyphInk = t.dark ? 'rgba(235,235,245,0.85)' : '#1c1c1e';
  const tile = {
    width: size, height: size, borderRadius: radius, flexShrink: 0, background: 'transparent',
    display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden'
  };
  if (item.photo) {
    return (
      <div style={tile}>
        <img src={item.photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>);

  }
  if (item.emoji) {
    return <div style={tile}><span style={{ fontSize: Math.round(size * 0.62), lineHeight: 1 }}>{item.emoji}</span></div>;
  }
  return <div style={tile}><EqGlyph kind={item.ic} size={Math.round(size * 0.6)} color={glyphInk} /></div>;
}

// Downscale + compress an uploaded image to a data URL (keeps localStorage small)
function compressImage(file, maxSize = 480) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = (e) => {
      const img = new Image();
      img.onerror = reject;
      img.onload = () => {
        let { width, height } = img;
        const scale = Math.min(1, maxSize / Math.max(width, height));
        width = Math.max(1, Math.round(width * scale));
        height = Math.max(1, Math.round(height * scale));
        const canvas = document.createElement('canvas');
        canvas.width = width;canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        try {resolve(canvas.toDataURL('image/jpeg', 0.82));}
        catch (err) {reject(err);}
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

// ─────────────────────────────────────────────────────────────
// Liquid Glass primitives
// ─────────────────────────────────────────────────────────────
function Glass({ children, dark = false, radius = 22, style = {}, padding = 0, tint }) {
  return (
    <div style={{
      position: 'relative', borderRadius: radius, overflow: 'hidden',
      boxShadow: dark ?
      '0 2px 6px rgba(0,0,0,0.35), 0 10px 30px rgba(0,0,0,0.18)' :
      '0 1px 2px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06)',
      ...style
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backdropFilter: 'blur(30px) saturate(200%)',
        WebkitBackdropFilter: 'blur(30px) saturate(200%)',
        background: tint || (dark ? 'rgba(28,28,30,0.45)' : 'rgba(255,255,255,0.55)')
      }} />
      {/* Glossy specular sheen — the "liquid" highlight running across the top */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: radius, pointerEvents: 'none',
        background: dark
          ? 'linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 26%, rgba(255,255,255,0) 55%)'
          : 'linear-gradient(160deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0) 58%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, borderRadius: radius,
        boxShadow: dark ?
        'inset 1px 1px 1px rgba(255,255,255,0.12), inset -1px -1px 1px rgba(255,255,255,0.06)' :
        'inset 1px 1px 1px rgba(255,255,255,0.85), inset -1px -1px 1px rgba(255,255,255,0.4)',
        border: dark ? '0.5px solid rgba(255,255,255,0.14)' : '0.5px solid rgba(255,255,255,0.5)',
        pointerEvents: 'none'
      }} />
      <div style={{ position: 'relative', padding }}>{children}</div>
    </div>);

}

function Phone({ children, dark = false, bg }) {
  // Document-flow wrapper: grows with its content so the PAGE scrolls
  // (no fixed height, no inner overflow clip). Stays position:relative as a
  // positioning context for in-flow decorations; full-screen overlays use
  // position:fixed so they pin to the viewport regardless of scroll.
  return (
    <div style={{
      width: '100%', minHeight: '100dvh',
      position: 'relative', background: bg || (dark ? '#000' : '#F2F2F7'),
      fontFamily: '-apple-system, "SF Pro Text", system-ui',
      WebkitFontSmoothing: 'antialiased',
      letterSpacing: -0.2,
      paddingTop: 'env(safe-area-inset-top)',
    }}>
      {children}
    </div>);

}

// ─────────────────────────────────────────────────────────────
// Tab bar (liquid glass floating)
// ─────────────────────────────────────────────────────────────
function TabBar({ active = 'home', dark = false, theme }) {
  const t = theme || lightTheme;
  const items = [
  { id: 'home', d: 'M3 12L12 3l9 9M5 10v10h14V10' },
  { id: 'cal', d: icons.cal },
  { id: 'add', d: icons.plus, isAdd: true },
  { id: 'eur', d: icons.euro },
  { id: 'doc', d: icons.doc }];

  return (
    <div style={{ position: 'absolute', bottom: 22, left: 12, right: 12, zIndex: 30 }}>
      <Glass dark={dark} radius={32} padding="8px 10px">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
          {items.map((i) => {
            if (i.isAdd) {
              return (
                <div key={i.id} style={{
                  width: 44, height: 44, borderRadius: 22, background: t.accent,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: `0 4px 14px ${t.accent}50`
                }}>
                  <Icon d={icons.plus} color="#fff" size={22} sw={2.4} />
                </div>);

            }
            const isActive = i.id === active;
            return (
              <div key={i.id} style={{
                width: 44, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <Icon d={i.d} color={isActive ? t.accent : dark ? 'rgba(255,255,255,0.6)' : 'rgba(60,60,67,0.55)'} size={22} sw={isActive ? 2.2 : 1.8} />
              </div>);

          })}
        </div>
      </Glass>
    </div>);

}

// ─────────────────────────────────────────────────────────────
// 1. DASHBOARD
// ─────────────────────────────────────────────────────────────
function DashboardLight() {
  const t = lightTheme;
  const equipment = [
  { name: 'JBL EON 712', cat: 'Aktivlautsprecher', status: 'Vermietet', until: 'bis Sa', color: t.green, ic: icons.speaker, photo: 'linear-gradient(135deg, #1c1c1e 0%, #3a3a3c 100%)' },
  { name: 'Anhänger 750kg', cat: 'Kastenanhänger', status: 'Verfügbar', until: '', color: t.textSec, ic: icons.trailer, photo: 'linear-gradient(135deg, #c4d1de 0%, #8a9bb0 100%)' },
  { name: 'Shure SM58 (×4)', cat: 'Mikrofon-Set', status: 'Vermietet', until: 'bis Mi', color: t.green, ic: icons.mic, photo: 'linear-gradient(135deg, #2a2a2a 0%, #555 100%)' },
  { name: 'Yamaha MG10XU', cat: 'Mischpult', status: 'Wartung', until: '', color: t.orange, ic: icons.cable, photo: 'linear-gradient(135deg, #232c3a 0%, #4a5568 100%)' }];


  return (
    <Phone>
      <div style={{ height: '100%', overflow: 'auto', paddingBottom: 100 }}>
        {/* Greeting + title */}
        <div style={{ padding: '8px 20px 0' }}>
          <div style={{ fontSize: 13, color: t.textSec, fontWeight: 500 }}>Mittwoch, 20. Mai</div>
          <div style={{ fontSize: 32, fontWeight: 700, color: t.text, letterSpacing: -0.8, marginTop: 2 }}>Übersicht</div>
        </div>

        {/* Quick stats */}
        <div style={{ padding: '18px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <Glass radius={20} padding="14px 16px">
            <div style={{ fontSize: 12, color: t.textSec, fontWeight: 500 }}>Aktive Mieten</div>
            <div style={{ fontSize: 28, fontWeight: 700, color: t.text, marginTop: 4, letterSpacing: -0.5 }}>7</div>
            <div style={{ fontSize: 11, color: t.green, fontWeight: 500, marginTop: 2 }}>+2 diese Woche</div>
          </Glass>
          <Glass radius={20} padding="14px 16px">
            <div style={{ fontSize: 12, color: t.textSec, fontWeight: 500 }}>Umsatz Mai</div>
            <div style={{ fontSize: 28, fontWeight: 700, color: t.text, marginTop: 4, letterSpacing: -0.5 }}>2.480 €</div>
            <div style={{ fontSize: 11, color: t.green, fontWeight: 500, marginTop: 2 }}>+18%</div>
          </Glass>
        </div>

        {/* Categories */}
        <div style={{ padding: '24px 20px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontSize: 18, fontWeight: 600, color: t.text, letterSpacing: -0.3 }}>Mein Equipment</div>
          <div style={{ fontSize: 14, color: t.accent, fontWeight: 500 }}>Alle 23</div>
        </div>

        {/* Category chips */}
        <div style={{ padding: '0 16px', display: 'flex', gap: 8, overflowX: 'auto' }}>
          {[['Alle', true], ['Tontechnik', false], ['Anhänger', false], ['Kabel', false]].map(([label, sel]) =>
          <div key={label} style={{
            padding: '7px 14px', borderRadius: 100, fontSize: 13, fontWeight: 600,
            background: sel ? t.text : 'rgba(120,120,128,0.12)',
            color: sel ? '#fff' : t.text, flexShrink: 0
          }}>{label}</div>
          )}
        </div>

        {/* Equipment cards */}
        <div style={{ padding: '14px 16px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {equipment.map((e) =>
          <div key={e.name} style={{ background: '#fff', borderRadius: 18, padding: 12, display: 'flex', gap: 12, alignItems: 'center', boxShadow: '0 1px 2px rgba(0,0,0,0.04)' }}>
              <div style={{ width: 54, height: 54, borderRadius: 12, background: e.photo, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon d={e.ic} color="rgba(255,255,255,0.85)" size={26} sw={1.6} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 600, color: t.text, letterSpacing: -0.2 }}>{e.name}</div>
                <div style={{ fontSize: 12, color: t.textSec, marginTop: 1 }}>{e.cat}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: e.color }}>{e.status}</div>
                {e.until && <div style={{ fontSize: 11, color: t.textSec, marginTop: 1 }}>{e.until}</div>}
              </div>
            </div>
          )}
        </div>
      </div>
      <TabBar active="home" theme={t} />
    </Phone>);

}

// ─────────────────────────────────────────────────────────────
// 2. KALENDER
// ─────────────────────────────────────────────────────────────
function KalenderLight() {
  const t = lightTheme;
  const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
  const items = [
  { name: 'JBL EON 712', cat: 'Aktivlautsprecher', start: 1, span: 4, color: '#007AFF', who: 'Hochzeit Müller' },
  { name: 'Shure SM58 ×4', cat: 'Mikrofon-Set', start: 2, span: 2, color: '#34C759', who: 'Vereinsfest' },
  { name: 'Anhänger 750kg', cat: 'Kastenanhänger', start: 0, span: 1, color: '#FF9500', who: 'P. Schmidt' },
  { name: 'Yamaha MG10XU', cat: 'Mischpult', start: 3, span: 3, color: '#AF52DE', who: 'Hochzeit Müller' },
  { name: 'DJ Kabelset', cat: 'Zubehör', start: 4, span: 3, color: '#FF3B30', who: 'Geburtstag K.' }];


  return (
    <Phone>
      <div style={{ height: '100%', overflow: 'auto', paddingBottom: 100 }}>
        <div style={{ padding: '8px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontSize: 13, color: t.textSec, fontWeight: 500 }}>Kalenderwoche 21</div>
            <div style={{ fontSize: 32, fontWeight: 700, color: t.text, letterSpacing: -0.8, marginTop: 2 }}>Mai 2026</div>
          </div>
          <Glass radius={18} padding="8px 12px">
            <div style={{ fontSize: 13, fontWeight: 600, color: t.text }}>Woche</div>
          </Glass>
        </div>

        {/* Day header */}
        <div style={{ padding: '18px 16px 0', display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
          {days.map((d, i) =>
          <div key={d} style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 11, color: t.textSec, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.4 }}>{d}</div>
              <div style={{
              marginTop: 4, fontSize: 17, fontWeight: 600,
              color: i === 2 ? '#fff' : t.text,
              background: i === 2 ? t.accent : 'transparent',
              width: 30, height: 30, borderRadius: 15, display: 'flex',
              alignItems: 'center', justifyContent: 'center', margin: '4px auto 0'
            }}>{18 + i}</div>
            </div>
          )}
        </div>

        {/* Bookings */}
        <div style={{ padding: '20px 16px 0', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {items.map((it, idx) => {
            const cellW = (328 - 6 * 4) / 7;
            const left = it.start * (cellW + 4);
            const width = it.span * cellW + (it.span - 1) * 4;
            return (
              <div key={idx} style={{ position: 'relative', height: 44 }}>
                <div style={{
                  position: 'absolute', left, width, top: 0, bottom: 0,
                  background: it.color + 'EE', borderRadius: 10,
                  padding: '6px 10px', overflow: 'hidden',
                  boxShadow: `0 1px 3px ${it.color}40`
                }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.name}</div>
                  <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.8)', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.who}</div>
                </div>
              </div>);

          })}
        </div>

        {/* Today list */}
        <div style={{ padding: '24px 20px 8px', fontSize: 16, fontWeight: 600, color: t.text, letterSpacing: -0.3 }}>Heute · Mi 20.5</div>
        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ background: '#fff', borderRadius: 16, padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 6, height: 36, background: t.green, borderRadius: 3 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>Abholung · JBL EON 712</div>
              <div style={{ fontSize: 12, color: t.textSec, marginTop: 1 }}>14:00 · Hochzeit Müller</div>
            </div>
          </div>
          <div style={{ background: '#fff', borderRadius: 16, padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 6, height: 36, background: t.orange, borderRadius: 3 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>Rückgabe · Anhänger 750kg</div>
              <div style={{ fontSize: 12, color: t.textSec, marginTop: 1 }}>17:30 · P. Schmidt</div>
            </div>
          </div>
        </div>
      </div>
      <TabBar active="cal" theme={t} />
    </Phone>);

}

// ─────────────────────────────────────────────────────────────
// 3. OBJEKT DETAIL
// ─────────────────────────────────────────────────────────────
function DetailLight() {
  const t = lightTheme;
  return (
    <Phone>
      {/* Hero photo area */}
      <div style={{
        height: 320, position: 'relative',
        background: 'linear-gradient(160deg, #1c1c1e 0%, #2c2c2e 50%, #48484a 100%)',
        marginTop: -47
      }}>
        {/* speaker silhouette */}
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 130, height: 220, borderRadius: 16, background: '#0a0a0a', boxShadow: '0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around', padding: '24px 0' }}>
            <div style={{ width: 70, height: 70, borderRadius: 35, background: 'radial-gradient(circle at 35% 35%, #444 0%, #1a1a1a 50%, #000 100%)', border: '1.5px solid #2a2a2a' }} />
            <div style={{ width: 40, height: 40, borderRadius: 20, background: 'radial-gradient(circle at 35% 35%, #333 0%, #111 60%, #000 100%)', border: '1px solid #222' }} />
            <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontWeight: 600, letterSpacing: 1 }}>JBL</div>
          </div>
        </div>

        {/* Nav glass pills */}
        <div style={{ position: 'absolute', top: 56, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', zIndex: 10 }}>
          <Glass dark radius={22} padding="10px 12px">
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Icon d={icons.back} color="#fff" size={20} sw={2.2} />
            </div>
          </Glass>
          <div style={{ display: 'flex', gap: 8 }}>
            <Glass dark radius={22} padding="10px 12px">
              <Icon d={icons.star} color="#fff" size={20} sw={1.8} />
            </Glass>
            <Glass dark radius={22} padding="10px 12px">
              <Icon d={icons.more} color="#fff" size={20} sw={2.4} />
            </Glass>
          </div>
        </div>

        {/* Photo counter */}
        <div style={{ position: 'absolute', bottom: 16, right: 16, zIndex: 10 }}>
          <Glass dark radius={14} padding="5px 10px">
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon d={icons.camera} color="#fff" size={13} sw={2} />
              <span style={{ fontSize: 12, color: '#fff', fontWeight: 600 }}>1 / 6</span>
            </div>
          </Glass>
        </div>
      </div>

      <div style={{ height: 'calc(100% - 273px)', overflow: 'auto', paddingBottom: 100, marginTop: -20, position: 'relative', background: t.bg, borderTopLeftRadius: 28, borderTopRightRadius: 28, zIndex: 5 }}>
        <div style={{ padding: '20px 20px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontSize: 12, color: t.textSec, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.6 }}>Aktivlautsprecher</div>
            <div style={{ fontSize: 11, color: t.green, fontWeight: 600, padding: '3px 8px', background: t.greenSoft, borderRadius: 10 }}>● VERMIETET</div>
          </div>
          <div style={{ fontSize: 24, fontWeight: 700, color: t.text, letterSpacing: -0.5, marginTop: 4 }}>JBL EON 712</div>
          <div style={{ fontSize: 14, color: t.textSec, marginTop: 2 }}>1.300 W · 12″ · Bluetooth</div>
        </div>

        {/* Quick stats grid */}
        <div style={{ padding: '20px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[
          ['Tagespreis', '45 €'],
          ['Auslastung', '78%'],
          ['Einsätze', '42']].
          map(([k, v]) =>
          <div key={k} style={{ background: '#fff', borderRadius: 14, padding: 12, textAlign: 'center' }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: t.text, letterSpacing: -0.3 }}>{v}</div>
              <div style={{ fontSize: 11, color: t.textSec, marginTop: 2 }}>{k}</div>
            </div>
          )}
        </div>

        {/* Current rental */}
        <div style={{ padding: '20px 20px 8px', fontSize: 15, fontWeight: 600, color: t.text, letterSpacing: -0.3 }}>Aktuell vermietet</div>
        <div style={{ padding: '0 16px' }}>
          <div style={{ background: '#fff', borderRadius: 16, padding: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>Hochzeit Müller</div>
                <div style={{ fontSize: 12, color: t.textSec, marginTop: 2 }}>18. – 22. Mai · 4 Tage</div>
              </div>
              <div style={{ fontSize: 16, fontWeight: 700, color: t.text }}>180 €</div>
            </div>
          </div>
        </div>

        <div style={{ padding: '20px 20px 8px', fontSize: 15, fontWeight: 600, color: t.text, letterSpacing: -0.3 }}>Verlauf</div>
        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[['Vereinsfest TSV', 'Apr · 2 Tage', '90 €'], ['Konzert Open Air', 'Mär · 3 Tage', '135 €']].map(([w, d, p]) =>
          <div key={w} style={{ background: '#fff', borderRadius: 14, padding: '12px 14px', display: 'flex', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: t.text }}>{w}</div>
                <div style={{ fontSize: 11, color: t.textSec, marginTop: 2 }}>{d}</div>
              </div>
              <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>{p}</div>
            </div>
          )}
        </div>
      </div>
      <TabBar active="home" theme={t} />
    </Phone>);

}

// ─────────────────────────────────────────────────────────────
// 4. FINANZEN
// ─────────────────────────────────────────────────────────────
function FinanzenLight() {
  const t = lightTheme;
  const bars = [62, 78, 45, 88, 95, 110, 132, 98];
  const months = ['O', 'N', 'D', 'J', 'F', 'M', 'A', 'M'];
  const max = Math.max(...bars);

  return (
    <Phone>
      <div style={{ height: '100%', overflow: 'auto', paddingBottom: 100 }}>
        <div style={{ padding: '8px 20px 0' }}>
          <div style={{ fontSize: 13, color: t.textSec, fontWeight: 500 }}>Mai 2026</div>
          <div style={{ fontSize: 32, fontWeight: 700, color: t.text, letterSpacing: -0.8, marginTop: 2 }}>Finanzen</div>
        </div>

        {/* Hero number */}
        <div style={{ padding: '16px 16px 0' }}>
          <Glass radius={24} padding="20px 22px">
            <div style={{ fontSize: 13, color: t.textSec, fontWeight: 500 }}>Umsatz dieses Jahr</div>
            <div style={{ fontSize: 38, fontWeight: 700, color: t.text, letterSpacing: -1, marginTop: 4 }}>14.820 €</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 3, color: t.green, fontSize: 13, fontWeight: 600 }}>
                <Icon d="M5 15l7-7 7 7" size={13} sw={2.4} />
                <span>+24%</span>
              </div>
              <span style={{ fontSize: 12, color: t.textSec }}>ggü. Vorjahr</span>
            </div>

            {/* Bar chart */}
            <div style={{ marginTop: 18, display: 'flex', alignItems: 'flex-end', gap: 8, height: 80 }}>
              {bars.map((v, i) =>
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <div style={{
                  width: '100%', height: v / max * 70, borderRadius: 4,
                  background: i === bars.length - 1 ? t.accent : 'rgba(0,122,255,0.22)'
                }} />
                  <div style={{ fontSize: 9, color: t.textSec, fontWeight: 600 }}>{months[i]}</div>
                </div>
              )}
            </div>
          </Glass>
        </div>

        {/* Split */}
        <div style={{ padding: '14px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <div style={{ background: '#fff', borderRadius: 18, padding: 14 }}>
            <div style={{ fontSize: 12, color: t.textSec, fontWeight: 500 }}>Offen</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: t.orange, marginTop: 4, letterSpacing: -0.4 }}>420 €</div>
            <div style={{ fontSize: 11, color: t.textSec, marginTop: 2 }}>3 Rechnungen</div>
          </div>
          <div style={{ background: '#fff', borderRadius: 18, padding: 14 }}>
            <div style={{ fontSize: 12, color: t.textSec, fontWeight: 500 }}>Bezahlt</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: t.green, marginTop: 4, letterSpacing: -0.4 }}>2.060 €</div>
            <div style={{ fontSize: 11, color: t.textSec, marginTop: 2 }}>12 Rechnungen</div>
          </div>
        </div>

        {/* Transactions */}
        <div style={{ padding: '24px 20px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: t.text, letterSpacing: -0.3 }}>Letzte Zahlungen</div>
          <div style={{ fontSize: 13, color: t.accent, fontWeight: 500 }}>Alle</div>
        </div>
        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 1 }}>
          {[
          ['Hochzeit Müller', 'JBL EON · 4 Tage', '180 €', t.green, 'Bezahlt'],
          ['Vereinsfest TSV', 'SM58 Set · 2 Tage', '60 €', t.green, 'Bezahlt'],
          ['Geburtstag K.', 'Anhänger · 1 Tag', '40 €', t.orange, 'Offen'],
          ['Open Air', 'Komplett-Set', '320 €', t.green, 'Bezahlt']].
          map(([w, c, p, col, st], i, arr) =>
          <div key={i} style={{
            background: '#fff', padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 12,
            borderTopLeftRadius: i === 0 ? 18 : 0, borderTopRightRadius: i === 0 ? 18 : 0,
            borderBottomLeftRadius: i === arr.length - 1 ? 18 : 0, borderBottomRightRadius: i === arr.length - 1 ? 18 : 0,
            borderBottom: i < arr.length - 1 ? `0.5px solid ${t.sep}` : 'none'
          }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: col + '22', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon d={icons.euro} color={col} size={18} sw={2} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>{w}</div>
                <div style={{ fontSize: 11, color: t.textSec, marginTop: 1 }}>{c}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{p}</div>
                <div style={{ fontSize: 10, color: col, fontWeight: 600, marginTop: 1 }}>{st}</div>
              </div>
            </div>
          )}
        </div>
      </div>
      <TabBar active="eur" theme={t} />
    </Phone>);

}

// ─────────────────────────────────────────────────────────────
// 5. DOKUMENTE / VERTRÄGE
// ─────────────────────────────────────────────────────────────
function DokumenteLight() {
  const t = lightTheme;
  return (
    <Phone>
      <div style={{ height: '100%', overflow: 'auto', paddingBottom: 100 }}>
        <div style={{ padding: '8px 20px 0' }}>
          <div style={{ fontSize: 13, color: t.textSec, fontWeight: 500 }}>23 Dateien · 4 Verträge offen</div>
          <div style={{ fontSize: 32, fontWeight: 700, color: t.text, letterSpacing: -0.8, marginTop: 2 }}>Dokumente</div>
        </div>

        {/* Search */}
        <div style={{ padding: '14px 16px 0' }}>
          <div style={{ background: 'rgba(120,120,128,0.12)', borderRadius: 12, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon d={icons.search} color={t.textSec} size={16} sw={2} />
            <span style={{ fontSize: 15, color: t.textSec }}>Suchen</span>
          </div>
        </div>

        {/* Folder grid */}
        <div style={{ padding: '20px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
          ['Mietverträge', 12, t.accent],
          ['Übergabe-Protokolle', 8, t.green],
          ['Rechnungen', 14, t.orange],
          ['Versicherungen', 3, '#AF52DE']].
          map(([n, c, col]) =>
          <div key={n} style={{ background: '#fff', borderRadius: 18, padding: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: col + '22', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon d={icons.doc} color={col} size={20} sw={1.8} />
              </div>
              <div style={{ fontSize: 14, fontWeight: 600, color: t.text, marginTop: 10 }}>{n}</div>
              <div style={{ fontSize: 11, color: t.textSec, marginTop: 2 }}>{c} Dateien</div>
            </div>
          )}
        </div>

        {/* Pending action */}
        <div style={{ padding: '22px 20px 8px', fontSize: 16, fontWeight: 600, color: t.text, letterSpacing: -0.3 }}>Zu unterschreiben</div>
        <div style={{ padding: '0 16px' }}>
          <div style={{ background: 'linear-gradient(135deg, #FFF9F0 0%, #FFFFFF 100%)', borderRadius: 18, padding: 16, border: `1px solid ${t.orange}40` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 8, height: 8, borderRadius: 4, background: t.orange }} />
              <div style={{ fontSize: 11, color: t.orange, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4 }}>Wartet auf Signatur</div>
            </div>
            <div style={{ fontSize: 15, fontWeight: 600, color: t.text, marginTop: 8 }}>Mietvertrag · JBL EON 712</div>
            <div style={{ fontSize: 12, color: t.textSec, marginTop: 2 }}>Hochzeit Müller · 18.–22. Mai · 180 €</div>
            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              <div style={{ flex: 1, background: t.text, color: '#fff', borderRadius: 10, padding: '10px 0', textAlign: 'center', fontSize: 13, fontWeight: 600 }}>Senden</div>
              <div style={{ background: 'rgba(120,120,128,0.12)', color: t.text, borderRadius: 10, padding: '10px 14px', fontSize: 13, fontWeight: 600 }}>Vorschau</div>
            </div>
          </div>
        </div>

        {/* Recent files */}
        <div style={{ padding: '22px 20px 8px', fontSize: 16, fontWeight: 600, color: t.text, letterSpacing: -0.3 }}>Zuletzt</div>
        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column' }}>
          {[
          ['Übergabeprotokoll_JBL.pdf', 'Heute · 9:42', 'PDF'],
          ['Rechnung_2026-042.pdf', 'Gestern', 'PDF'],
          ['Foto_Anhaenger_Schaden.heic', 'Mo, 18.5', 'IMG'],
          ['Versicherung_Anhaenger.pdf', '15.5.', 'PDF']].
          map(([n, d, k], i, arr) =>
          <div key={n} style={{
            background: '#fff', padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12,
            borderTopLeftRadius: i === 0 ? 16 : 0, borderTopRightRadius: i === 0 ? 16 : 0,
            borderBottomLeftRadius: i === arr.length - 1 ? 16 : 0, borderBottomRightRadius: i === arr.length - 1 ? 16 : 0,
            borderBottom: i < arr.length - 1 ? `0.5px solid ${t.sep}` : 'none'
          }}>
              <div style={{ width: 32, height: 38, borderRadius: 6, background: k === 'IMG' ? '#AF52DE22' : t.accentSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700, color: k === 'IMG' ? '#AF52DE' : t.accent }}>{k}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{n}</div>
                <div style={{ fontSize: 11, color: t.textSec, marginTop: 1 }}>{d}</div>
              </div>
              <Icon d={icons.more} color={t.textSec} size={16} sw={2.4} />
            </div>
          )}
        </div>
      </div>
      <TabBar active="doc" theme={t} />
    </Phone>);

}

Object.assign(window, {
  lightTheme, darkTheme, studioTheme, studioDarkTheme, THEMES, THEME_META, applyAccent, rfHexToRgba,
  ThemeContext, useTheme, icons, Icon, ImgIcon, IMG_ICONS, Glass, Phone, TabBar, EqAvatar, EqGlyph,
  DashboardLight, KalenderLight, DetailLight, FinanzenLight, DokumenteLight
});