/* iOS 4 Skeuomorphic Theme Override */
body, .bg-base, .bg-dark {
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    background-color: #15181f !important;
    background-image: 
        radial-gradient(ellipse at 50% 0%, #202632 0%, #12151b 100%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 0, transparent 4px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 1px, transparent 0, transparent 4px) !important;
    color: #f1f5f9 !important;
}

header, .navbar, .sticky-top {
    background: linear-gradient(to bottom, #4c688d 0%, #2b4970 50%, #1a3556 51%, #152d4b 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.35) !important;
    border-bottom: 1px solid #091728 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
}

.card, .auth-card, .card-module, .ios-card, .glass-panel {
    background: linear-gradient(to bottom, #232832 0%, #1a1e26 100%) !important;
    border: 1px solid #363d4a !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 3px 8px rgba(0,0,0,0.45) !important;
}

.card-header, .ios-card-header {
    background: linear-gradient(to bottom, #2f3644 0%, #202530 100%) !important;
    border-bottom: 1px solid #14171d !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.btn, button, .btn-ios {
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.4) !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.8) !important;
    transition: none !important;
}

.btn:active, button:active, .btn-ios:active {
    transform: translateY(1px);
    filter: brightness(0.85);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6) !important;
}

.btn-primary, .btn-cyan, .nav-link.active, .btn-outline-info {
    background: linear-gradient(to bottom, #5ba4e5 0%, #2b7cd1 50%, #1761b0 51%, #1b68bd 100%) !important;
    color: #fff !important;
}

.btn-danger, .btn-outline-danger {
    background: linear-gradient(to bottom, #e55b5b 0%, #d12b2b 50%, #b01717 51%, #bd1b1b 100%) !important;
    color: #fff !important;
}

.btn-secondary, .btn-dark, .nav-link, .btn-outline-secondary {
    background: linear-gradient(to bottom, #384252 0%, #1c222b 50%, #11151b 51%, #181d24 100%) !important;
    color: #cbd5e1 !important;
}

input, .form-control {
    background: #0f1218 !important;
    border: 1px solid #000 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.1) !important;
    border-radius: 6px !important;
    color: #fff !important;
}

.tab-content {
    background: transparent !important;
}

h1, h2, h3, h4, h5, h6, .brand-text, .card-title, .ios-card-title {
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.9) !important;
}

.text-secondary, .text-muted, .ios-label {
    color: #94a3b8 !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5) !important;
}

/* ==========================================================================
   APP SHELL & VIEWPORT MATH: iPhone 17 Pro Max (440x956) vs. Desktop (>= 768px)
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Strict Device Visibility Helpers */
@media screen and (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .iphone-only {
    display: none !important;
  }
}

/* 1. iPhone 17 Pro Max & Mobile Viewport (440px x 956px logical @ 3x DPR) */
@media screen and (max-width: 767px) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    touch-action: manipulation;
  }

  /* Ensure top headers sit flush at y=0 without double-counting Safari's status bar */
  header, .navbar, .sticky-top, .admin-sticky-header, #kpf-card-header {
    margin-top: 0 !important;
    padding-top: 8px;
  }

  @media (display-mode: standalone) {
    header, .navbar, .sticky-top, .admin-sticky-header, #kpf-card-header {
      padding-top: calc(max(54px, env(safe-area-inset-top, 54px)) + 8px);
    }
  }

  /* Containers get comfortable 14px horizontal inset (440 - 28 = 412px usable width) */
  .page-shell, .container, .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }

  /* Full-bleed native app card style on iPhone */
  .card, .glass-card, .card-module:not(#kpf-card-header), .credentials-vault, .method-card {
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
  }

  /* Form inputs fit thumb reach and prevent iOS Safari auto-zoom */
  input, .form-control, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Primary CTA buttons maintain 44-48px touch targets without inflating compact header buttons */
  .btn, .cta-button, .pill-action-btn {
    min-height: 44px;
    font-size: 14px;
  }

  /* Make tables and pre blocks horizontally scrollable rather than breaking layout */
  table, pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

/* 2. Standalone Home-Screen WebApp Safe Area Override */
@media screen and (max-width: 767px) and (display-mode: standalone) {
  header, .navbar, .sticky-top, .admin-sticky-header, #kpf-card-header {
    padding-top: max(48px, env(safe-area-inset-top, 48px));
  }
}

/* 3. Computer / Desktop Viewport (High-Density Command Deck Layout) */
@media screen and (min-width: 768px) {
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  .page-shell {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #app-viewport, .container-fluid {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Multicolumn desktop arrangement for cards and methods */
  .form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   RETRO CONSTRAINT: no modern effects anywhere (iOS 4.0 / Win95 era)
   ========================================================================== */
*, *::before, *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Mobile Safari / PWA: iOS 4 chrome, momentum scrolling, no tap flash, safe areas */
@media screen and (max-width: 767px) {
  html { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; }
  body {
    -webkit-overflow-scrolling: touch;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  input, select, textarea, button {
    -webkit-appearance: none;
    appearance: none;
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  select { background-image: linear-gradient(to bottom, #fff 0%, #ccc 100%) !important; color: #000 !important; }
}

/* ==========================================================================
   DESKTOP / ELECTRON: Windows 95 look (mouse pointer, >= 768px)
   ========================================================================== */
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
  :root {
    --w95-face: #c0c0c0;
    --w95-hi: #ffffff;
    --w95-light: #dfdfdf;
    --w95-shadow: #808080;
    --w95-dark: #000000;
    --w95-title: #000080;
    --w95-desk: #008080;

    --bg-primary: #008080; --bg-surface: #c0c0c0; --bg-card: #c0c0c0; --bg-card-hover: #dfdfdf;
    --text-primary: #000; --text-secondary: #202020; --text-muted: #404040;
    --border-color: #808080; --border-glow: #808080; --box-shadow-card: none;
    --card-radius: 0; --btn-radius: 0;
    --font-body: Tahoma, Arial, sans-serif; --font-heading: Tahoma, Arial, sans-serif;
    --font-code: "Courier New", monospace;
    --canvas-bg: #008080; --card-bg: #c0c0c0; --card-border: #808080;
    --text-main: #000; --text-sub: #202020;
    --font-family: Tahoma, Arial, sans-serif; --font-mono: "Courier New", monospace;
  }

  *, *::before, *::after { border-radius: 0 !important; text-shadow: none !important; }
  [class*="ambient"] { display: none !important; }

  .card *, .card-module *, .glass-panel *, .glass-card *, .method-card *, .panel * { color: #000 !important; }
  .card-header *, .ios-card-header *, .modal-header * { color: #fff !important; }
  nav, [class*="nav-pills"], [class*="tabs"], [class*="tab-bar"] {
    background: var(--w95-face) !important;
    border: 0 !important;
    box-shadow: inset -1px -1px 0 var(--w95-dark), inset 1px 1px 0 var(--w95-hi) !important;
  }

  html, body, body.bg-base, .bg-base, .bg-dark {
    font-family: "MS Sans Serif", Tahoma, "Microsoft Sans Serif", Arial, sans-serif !important;
    font-size: 12px !important;
    background: var(--w95-desk) !important;
    background-image: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }

  header, .navbar, .sticky-top, .admin-sticky-header, #kpf-card-header {
    background: linear-gradient(to right, var(--w95-title) 0%, #1084d0 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .card, .auth-card, .card-module, .ios-card, .glass-panel, .glass-card,
  .method-card, .credentials-vault, .modal-content, .dropdown-menu, .panel {
    background: var(--w95-face) !important;
    color: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset -1px -1px 0 var(--w95-dark), inset 1px 1px 0 var(--w95-hi),
                inset -2px -2px 0 var(--w95-shadow), inset 2px 2px 0 var(--w95-light) !important;
  }

  .card-header, .ios-card-header, .modal-header {
    background: linear-gradient(to right, var(--w95-title) 0%, #1084d0 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: bold;
  }

  .btn, button, .btn-ios, .btn-primary, .btn-cyan, .btn-danger, .btn-secondary,
  .btn-dark, .btn-outline-info, .btn-outline-danger, .btn-outline-secondary, .nav-link {
    background: var(--w95-face) !important;
    color: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    filter: none !important;
    box-shadow: inset -1px -1px 0 var(--w95-dark), inset 1px 1px 0 var(--w95-hi),
                inset -2px -2px 0 var(--w95-shadow), inset 2px 2px 0 var(--w95-light) !important;
  }

  .btn:active, button:active, .btn-ios:active, .nav-link.active {
    transform: none !important;
    filter: none !important;
    box-shadow: inset 1px 1px 0 var(--w95-dark), inset -1px -1px 0 var(--w95-hi),
                inset 2px 2px 0 var(--w95-shadow), inset -2px -2px 0 var(--w95-light) !important;
    padding-top: 2px; padding-left: 2px;
  }

  input, .form-control, select, textarea {
    background: #fff !important;
    color: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-hi),
                inset 2px 2px 0 var(--w95-dark), inset -2px -2px 0 var(--w95-light) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    min-height: 0;
  }

  h1, h2, h3, h4, h5, h6, .brand-text, .card-title, .ios-card-title {
    color: #000 !important;
    text-shadow: none !important;
  }
  header h1, header h2, header h3, header .brand-text, .card-header .card-title,
  .card-header h1, .card-header h2, .card-header h3, .modal-header * { color: #fff !important; }

  .text-secondary, .text-muted, .ios-label { color: #404040 !important; text-shadow: none !important; }
  a { color: #0000ee; }

  table { border-collapse: separate; border-spacing: 0; background: #fff; color: #000; }
  th { background: var(--w95-face); color: #000;
       box-shadow: inset -1px -1px 0 var(--w95-shadow), inset 1px 1px 0 var(--w95-hi); }
  td { border: 1px solid var(--w95-light); }

  ::-webkit-scrollbar { width: 16px; height: 16px; }
  ::-webkit-scrollbar-track { background: var(--w95-light); }
  ::-webkit-scrollbar-thumb {
    background: var(--w95-face);
    box-shadow: inset -1px -1px 0 var(--w95-dark), inset 1px 1px 0 var(--w95-hi),
                inset -2px -2px 0 var(--w95-shadow), inset 2px 2px 0 var(--w95-light);
  }
}