/* ============================================================
   VirPhone brand theme – customer portal (port 8080)
   Applies on top of the compiled Yeti client: remaps Tailwind
   blue tokens to the VirPhone cyan-blue brand scale, polishes the
   login page, and adds mobile optimizations.
   ============================================================ */

:root {
  --vp-brand: #00b8d4;
  --vp-brand-deep: #0284c7;
  --vp-brand-navy: #12151c;
  --vp-radius: 10px;

  /* Remap Tailwind blue scale to VirPhone brand (sky) scale:
     every primary action, link, and chart series goes brand. */
  --color-blue-50: #f0f9ff;
  --color-blue-100: #e0f2fe;
  --color-blue-200: #bae6fd;
  --color-blue-300: #7dd3fc;
  --color-blue-400: #38bdf8;
  --color-blue-500: #0ea5e9;
  --color-blue-600: #0284c7;
  --color-blue-700: #0369a1;
  --color-blue-800: #075985;
  --color-blue-900: #0c4a6e;
}

/* ---------- Shared chrome polish ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.45) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.45); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.7); }
::-webkit-scrollbar-track { background: transparent; }

button { cursor: pointer; }
:focus-visible { outline: 2px solid rgba(0,184,212,.6); outline-offset: 2px; }

/* Cards and charts: consistent, elevated, modern */
.chart-card, .rate-plans-container, .number-lists-container, .contact-list {
  border-radius: var(--vp-radius);
}

/* Tables: readable + mobile scrollable */
.table { font-variant-numeric: tabular-nums; }
.table thead th { white-space: nowrap; }
@media (max-width: 768px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .table thead th, .table tbody td { padding-left: 12px; padding-right: 12px; }
}

/* Touch-friendly buttons on small screens */
@media (max-width: 768px) {
  button:not([class*="rounded-full"]), a[class*="btn"] { min-height: 42px; }
}

/* ---------- Login page ---------- */
.login-form-container {
  background: linear-gradient(180deg, #0b0e14 0%, #12151c 55%, #0b0e14 100%) !important;
}
.login-form-container::before {
  content: "";
  display: block;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--vp-brand), var(--vp-brand-deep), #7c3aed);
}
.login-title { letter-spacing: .01em; }

/* Inputs: brand focus ring */
#auth input:focus, .login-form input:focus, .login-form-container input:focus {
  border-color: var(--vp-brand) !important;
  box-shadow: 0 0 0 3px rgba(0, 184, 212, .22) !important;
  outline: none !important;
}

/* Sign-in button: brand gradient */
.login-form button[type="submit"],
.login-form-container button[type="submit"],
#auth button[class*="w-full"] {
  background-image: linear-gradient(135deg, #00b8d4 0%, #0284c7 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--vp-radius) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 4px 14px rgba(2, 132, 199, .35);
}
.login-form button[type="submit"]:hover,
.login-form-container button[type="submit"]:hover,
#auth button[class*="w-full"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, .45);
}
.login-form button[type="submit"]:active,
.login-form-container button[type="submit"]:active {
  transform: translateY(0);
}

/* Login footer */
.login-footer { opacity: .9; }

/* ---------- Login page: mobile optimization ---------- */
@media (max-width: 880px) {
  #auth { flex-direction: column !important; }
  #auth .background {
    min-height: 34vh !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .login-form-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 26px 20px 34px !important;
  }
  .login-logo-image { max-width: 180px !important; max-height: 52px !important; }
  .login-logo { margin-top: 22px !important; }
  .login-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 420px) {
  .login-form-container { padding: 20px 14px 28px !important; }
}

/* ---------- Auth hero background fallback ---------- */
/* If the rotate script has not painted a photo yet, show a brand
   gradient so the hero area is never a flat gray box. */
#auth .background {
  background-color: #121a26;
  background-image: linear-gradient(135deg, #12151c 0%, #12232f 45%, #0b2a3a 100%);
  background-size: cover;
  background-position: center;
}