/* ============================================================
   VirPhone brand polish + mobile optimization – Yeti admin
   (ActiveAdmin). Loaded on all authenticated pages.
   ============================================================ */

/* ---------- Brand buttons ---------- */
body.active_admin a.button,
body.active_admin button[type="submit"],
body.active_admin input[type="submit"] {
  background-image: linear-gradient(135deg, #00b8d4 0%, #0284c7 100%);
  background-color: #0284c7;
  color: #fff !important;
  border: none;
  border-radius: 8px !important;
  text-shadow: none;
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(2, 132, 199, .28);
  transition: filter .15s ease, transform .15s ease;
}
body.active_admin a.button:hover,
body.active_admin button[type="submit"]:hover,
body.active_admin input[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff !important;
}
body.active_admin a.button:active { transform: translateY(0); }

/* ---------- Panels & cards ---------- */
body.active_admin .panel {
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
}
body.active_admin .panel > h3 { border-radius: 10px 10px 0 0; }

/* ---------- Tables: readable, tabular numbers ---------- */
body.active_admin table th, body.active_admin table td { white-space: nowrap; }
body.active_admin table.index_table td { font-variant-numeric: tabular-nums; }
body.active_admin table.index_table tbody tr:hover td { background: rgba(2, 132, 199, .05); }

/* ---------- Mobile optimization ---------- */
@media (max-width: 900px) {
  /* Header: scrollable nav instead of wrap-crash */
  #header { padding: 5px 6px; height: auto; }
  #header ul.tabs {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #header ul.tabs::-webkit-scrollbar { display: none; }
  #header ul.tabs li { white-space: nowrap; flex: 0 0 auto; }
  #header h1 { padding: 0 10px; max-width: 42vw; overflow: hidden; }
  #header h1 img { max-height: 22px; }

  /* Utility bar: tighter, drop the clock on small screens */
  #header #utility_nav { padding-right: 8px; gap: 10px; }

  /* Title / breadcrumbs breathe */
  body.active_admin #title_bar { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  body.active_admin .breadcrumb { padding: 8px 12px 2px; }

  /* Content & sidebar stack cleanly */
  body.active_admin #active_admin_content .with_sidebar { display: block; }
  body.active_admin #sidebar { width: 100%; float: none; margin: 0 0 16px 0; }
  body.active_admin #sidebar .panel { border-radius: 10px; }

  /* Wide index tables scroll inside their container */
  body.active_admin .paginated_collection,
  body.active_admin #active_admin_content .index {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 16px inputs prevent iOS zoom-on-focus */
  body.active_admin input[type="text"],
  body.active_admin input[type="password"],
  body.active_admin input[type="email"],
  body.active_admin input[type="number"],
  body.active_admin select,
  body.active_admin textarea {
    font-size: 16px;
    min-height: 40px;
  }
  body.active_admin a.button { padding: 12px 16px; }
}
@media (max-width: 560px) {
  #vp-live-clock { display: none; }
  body.active_admin .pagination { font-size: .95em; flex-wrap: wrap; }
}