/* Athom tablet & background overrides */

/* Fixed background image */
html, body { height: 100%; background: transparent; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/athom.jpg') no-repeat center center / cover;
  /* Slight tone to keep text readable */
  filter: saturate(1) brightness(0.98);
}

/* So content remains legible over the photo */
.container, .card, .header, .topbar, .table, .meta {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
}

/* Sticky topbar for tablets */
.topbar {
  position: sticky;
  top: 0;
  backdrop-filter: blur(4px);
  background-color: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(4px);
}

/* Touch-friendly targets */
:root { --touch-min: 44px; }
.btn, button, input[type=submit] { min-height: var(--touch-min); padding: 10px 14px; }
input, select, textarea { font-size: 16px; min-height: var(--touch-min); padding: 10px 12px; }
.btn-open { min-height: var(--touch-min); }
.actions .btn, .btn-outline, .btn-danger-outline { min-height: var(--touch-min); }

/* Avoid accidental zoom / improve touch behavior */
button, .btn { touch-action: manipulation; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0.1); }

/* Make wide tables usable on tablets */
.card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Zebra & iPad tweaks */
@media (max-width: 1180px) {
  .table td, .table th { padding: 10px 8px; }
}
@media (max-width: 1024px) {
  .topbar { gap: 8px; }
  .search input[type=text] { min-width: 180px; }
  .table td.actions-cell { width: auto; }
  .actions { gap: 8px; }
}
@media (max-width: 820px) {
  .proj-cell { gap: 10px; }
  .actions { justify-content: flex-start; }
  .actions input[type=email] { width: 100%; }
}

/* Light shadow to lift cards from the photo */
.card, .topbar { box-shadow: 0 3px 10px rgba(0,0,0,0.06); border-radius: 10px; }

/* Ensure logos look crisp on photo */
.brand-logo img { image-rendering: -webkit-optimize-contrast; }

/* === NEW: widen container to 1150px on desktop to reduce horizontal scroll === */
.container { max-width: 1150px; margin: 0 auto; }
@media (max-width: 1180px){
  .container { max-width: calc(100% - 24px); }
}