/* =====================================================
   IPCRM Login – Custom Styles
   ===================================================== */

@font-face {
  font-family: 'IPACCTFONT';
  src: url('ipacct.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-ipacct,
.ipcrm-brand-text-inner,
.ipacct-logo-big {
  font-family: 'IPACCTFONT', 'Arial Black', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Nothing on this page is ever wider than the screen. The card is one flex row
   inside another, and a flex item's default min-width is auto — it refuses to
   shrink below its content, which is how a single nowrap tab label used to push
   the whole card sideways. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ---------- Body ---------- */
.loginCont {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #f7f8fb;
  min-height: 100vh;
  /* Mobile browsers count the collapsing URL bar inside 100vh, so a page sized to
     it is taller than what you can actually see and the form sits under the fold.
     dvh is the visible height; the line above stays as the fallback. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* ---------- Login Card ---------- */
.login-card {
  display: flex;
  flex-direction: column;
  max-width: 1020px;
  width: 100%;
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  overflow: hidden;
  min-height: 460px;
}
@media (min-width: 768px) { .login-card { flex-direction: row; } }

/* ---------- Left Panel ---------- */
.left-panel {
  background: linear-gradient(160deg, #035699 0%, #023d6e 55%, #022d52 100%);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}
@media (min-width: 768px) { .left-panel { width: 42%; padding: 3rem 2.5rem; min-width: 0; } }

/* Decorative circles */
.deco-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.dc-1 { width:200px; height:200px; top:-70px;    right:-70px; background:rgba(255,255,255,0.08); }
.dc-2 { width:240px; height:240px; bottom:-90px; left:-80px;  background:rgba(255,255,255,0.06); }
.dc-3 { width:100px; height:100px; top:45%;      right:10px;  background:rgba(255,255,255,0.06); }

/* ---------- White Logo Box ---------- */
.logo-white-box {
  width: 200px;
  height: 240px;
  background: white;
  border-radius: 1.75rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  z-index: 2;
  margin-bottom: 1.2rem;
}

.logo-img-container {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem 0.5rem 1rem;
  overflow: hidden;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.12);
  opacity: 1;
  transition: transform 0.35s ease;
}
.logo-img:hover { transform: scale(1.2); }

/* IPCRM brand text */
.ipcrm-brand-text-inner {
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 1px;
  padding-bottom: 1rem;
  flex-shrink: 0;
}
.ipcrm-brand-text-inner .ip  { color: #035699; font-weight: 400; }
.ipcrm-brand-text-inner .crm { color: #cc0202; font-weight: 900; }

/* ---------- CRM Portal Text ---------- */
.crm-portal-text {
  color: rgba(255,255,255,0.9);
  font-weight: 900;
  font-size: 3rem;
  position: relative;
  z-index: 2;
  letter-spacing: -0.02em;
  margin-top: 0.6rem;
  margin-bottom: 2.4rem;
}

/* ---------- Feature Pills ---------- */
.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-top: 0.8rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
  transition: all 0.2s;
}
.pill:hover { background: rgba(255,255,255,0.18); color: white; }

.pill svg, .pill-icon {
  color: #a8d4f5;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.pill-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.35);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ---------- Right Panel ---------- */
.right-panel {
  padding: 2rem 1.75rem;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
@media (min-width: 768px) { .right-panel { width: 58%; padding: 2.5rem 2.5rem; min-width: 0; } }

/* ---------- Form Headings ---------- */
.form-heading    { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-bottom: 0.25rem; }
.form-subheading { font-size: 0.875rem; color: #94a3b8; margin-bottom: 1.5rem; }

/* ---------- Tab Bar ---------- */
.tab-bar {
  display: flex;
  background: #f1f5f9;
  border-radius: 0.75rem;
  padding: 0.25rem;
  margin-bottom: 1.25rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.tab-btn {
  /* Sized by content, not 50/50 — the LCO label is much longer than "Admin
     Login" and an even split would wrap it onto two lines. */
  flex: 1 1 auto;
  /* Without this the nowrap label below sets an unshrinkable minimum and the tab
     bar — and with it the whole card — grows wider than a phone screen. */
  min-width: 0;
  padding: 0.6rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  background: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.tab-active   { background: white !important; color: #1d4ed8 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.tab-inactive { background: transparent; color: #64748b; }
.tab-btn:not(.tab-active):hover { color: #475569; }

/* ---------- Auth Badge ---------- */
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0369a1;
  margin-bottom: 1.1rem;
}

/* ---------- Form Fields ---------- */
.field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.field-wrap {
  position: relative;
  margin-bottom: 1rem;
  max-width: 460px;
}

.input-icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #033566;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  color: #1e293b;
  transition: all 0.2s;
  font-family: inherit;
}
.form-input:focus {
  border-color: #035699;
  box-shadow: 0 0 0 3px rgba(3,86,153,0.12);
  background: white;
  outline: none;
}

.password-toggle {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #033566;
  padding: 0.2rem;
  display: flex;
  align-items: center;
}
.password-toggle:hover { color: #023d6e; }
.password-toggle #eyeIcon {
  font-size: 1.15rem;
  line-height: 1;
  filter: grayscale(0.15);
}
.password-toggle:hover #eyeIcon { filter: none; transform: scale(1.08); }

/* ---------- Submit Button ---------- */
.btn-submit {
  width: 100%;
  max-width: 460px;
  padding: 0.9rem;
  background: linear-gradient(135deg, #035699 0%, #023d6e 100%);
  color: white;
  font-weight: 800;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(3,86,153,0.35);
  margin-bottom: 1.5rem;
}
.btn-submit:hover    { opacity: 0.92; transform: translateY(-1px); }
.btn-submit:active   { transform: scale(0.98); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- LCO Picker ---------- */
.lco-picker-wrap {
  background: #f0f9ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  max-width: 460px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.picker-title  { font-size: 0.75rem; font-weight: 700; color: #1e40af; }
.picker-reset  { font-size: 0.75rem; color: #64748b; background: none; border: none; text-decoration: underline; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
.server-list   { display: flex; flex-direction: column; gap: 0.5rem; max-height: 140px; overflow-y: auto; }
.server-item   { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; background: white; border: 1px solid #e0e7ff; border-radius: 0.5rem; cursor: pointer; transition: background 0.15s; }
.server-item:hover { background: #eef2ff; }

/* ---------- Footer ---------- */
.login-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
  max-width: 460px;
  margin: 0 auto;
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: #0f172a;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.ipacct-logo-big { font-size: 1.3rem; font-weight: 900; line-height: 1; }
.login-version {
  max-width: 460px;
  margin: 1.25rem auto 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: #000000;
  /* Plain arrow, not the text I-beam. */
  cursor: default;
}
.ipacct-blue { color: #035699; }
.ipacct-red  { color: #cc0202; }

/* ---------- Flash Messages ---------- */
.flash-messages { margin-bottom: 1rem; }
.flash-msg { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 500; border: 1px solid; margin-bottom: 0.5rem; }
.flash-error   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.flash-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.flash-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ---------- Spinner ---------- */
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; margin-right: 0.25rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ----------

   The card is two panels: a blue branding panel and the form. Above 768px they
   sit side by side and everything fits. Below that they stack, and the branding
   panel was rendering at its full desktop size — a 210px logo box, a 2rem
   "CRM Portal", three pills, one of which is a whole sentence. That is roughly a
   phone screen's worth of decoration ABOVE the username field, so the form
   opened below the fold and the page had to be scrolled to sign in.

   So the breakpoints below do not just shrink type. Under 768px the branding
   panel becomes a compact header band, and under 640px the marketing pills come
   out entirely: on a phone the job of this page is the two fields and the
   button, and those should be on screen the moment it loads.
   ------------------------------------------------------------------------- */

/* ===== Tablet and below: branding becomes a header band ===== */
@media (max-width: 767px) {
  .loginCont  { padding: 0.75rem; }
  .login-card { min-height: 0; border-radius: 1.25rem; }

  /* Logo and wordmark side by side instead of stacked — same elements, a third
     of the height. */
  .left-panel {
    flex-direction: row;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
  }
  .logo-white-box {
    flex-direction: row;
    width: auto;
    height: auto;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0;
    border-radius: 0.9rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    align-items: center;
  }
  .logo-img-container     { width: 44px; flex: 0 0 44px; padding: 0; }
  .logo-img               { transform: none; }
  .ipcrm-brand-text-inner { font-size: 1.6rem; padding-bottom: 0; }

  .brand-divider   { display: none; }
  .crm-portal-text { font-size: 1.35rem; margin: 0; }

  /* Decorative circles are sized for a tall panel; in a short band they only
     crowd the logo. */
  .deco-circle { display: none; }

  /* Out for the whole stacked range, not just phones. The first pill is a full
     sentence — dropped into this horizontal band it wraps to several lines and
     the band stops being a band. */
  .feature-pills { display: none; }

  .right-panel { padding: 1.5rem 1.25rem; }

  .field-wrap, .btn-submit, .lco-picker-wrap,
  .login-footer, .login-version { max-width: 100%; }

  /* 16px is the threshold under which iOS Safari zooms the page on focus. That
     zoom is what made the layout look broken and overflowing the moment someone
     tapped the username field — it is a viewport zoom, not a layout bug, but it
     reads as one. Anything >= 16px leaves the page where it is. */
  .form-input { font-size: 16px; }
}

/* ===== Phones ===== */
@media (max-width: 640px) {
  .form-heading    { font-size: 1.25rem; }
  .form-subheading { font-size: 0.8rem; margin-bottom: 1rem; }
  .right-panel-header { gap: 0.75rem; margin-bottom: 1rem; }

  .auth-badge { font-size: 0.7rem; padding: 0.35rem 0.75rem; margin-bottom: 0.9rem; }
  .btn-submit { margin-bottom: 1rem; }
  .login-footer   { font-size: 0.9rem; padding-top: 0.75rem; }
  .ipacct-logo-big { font-size: 1.15rem; }
  .login-version  { margin-top: 0.75rem; font-size: 0.75rem; }
}

/* ===== Small phones (iPhone SE, Galaxy A0x — 360px and under) ===== */
@media (max-width: 400px) {
  .loginCont  { padding: 0.5rem; }
  .right-panel { padding: 1.25rem 1rem; }

  /* Two nowrap labels cannot share 360px. Let them wrap and drop the icons —
     the words are what identify the tab, not the glyph. */
  .tab-bar     { padding: 0.2rem; }
  .tab-btn     { white-space: normal; font-size: 0.68rem; padding: 0.5rem 0.35rem; line-height: 1.25; }
  .tab-btn svg { display: none; }

  .ipcrm-brand-text-inner { font-size: 1.35rem; }
  .crm-portal-text        { font-size: 1.1rem; }
  .logo-img-container     { width: 36px; flex: 0 0 36px; }

  /* nowrap here would push "Powered by IPACCT" off the edge on a 320px screen. */
  .login-footer { white-space: normal; text-align: center; flex-wrap: wrap; }
}

/* ===== Landscape phones — wide but only ~350px tall =====
   The stacked layout has no chance here, so go back to side-by-side early and
   strip the vertical padding rather than let the form fall off the bottom. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .loginCont      { padding: 0.5rem; align-items: flex-start; }
  .login-card     { flex-direction: row; min-height: 0; }
  .left-panel     { width: 38%; flex-direction: column; gap: 0.5rem; padding: 1rem 0.75rem; }
  .right-panel    { width: 62%; padding: 1rem 1.25rem; }
  .feature-pills  { display: none; }
  .form-subheading { margin-bottom: 0.75rem; }
  .auth-badge     { margin-bottom: 0.75rem; }
  .field-wrap     { margin-bottom: 0.7rem; }
  .btn-submit     { padding: 0.7rem; margin-bottom: 0.75rem; }
  .login-footer, .login-version { display: none; }
}

/* ===== Short desktop windows (1366x768 laptops with the card at full height,
   and anyone running the browser at half screen height) ===== */
@media (min-width: 768px) and (max-height: 700px) {
  .login-card             { min-height: 0; }
  .left-panel             { padding: 1.5rem 2rem; }
  .right-panel            { padding: 1.5rem 2.5rem; }
  .logo-white-box         { width: 150px; height: 180px; margin-bottom: 0.75rem; }
  .ipcrm-brand-text-inner { font-size: 2.4rem; padding-bottom: 0.5rem; }
  .crm-portal-text        { font-size: 2rem; margin-top: 0.3rem; margin-bottom: 1.2rem; }
}

/* ===== Large screens: let the card use the room instead of stranding it in the
   middle of a 27-inch monitor at 1020px. ===== */
@media (min-width: 1600px) {
  .login-card { max-width: 1180px; }
}

/* =========================================================================
   NEW RULES – Right Panel Header (Welcome back + Company Logo)
   ========================================================================= */
.right-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Borderless logo – blends into the page, landscape/rectangular, auto‑scaling */
.company-logo-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    flex-shrink: 0;
}

.company-logo-right img {
    display: block;
    height: auto;
    width: auto;
    max-height: 72px;     /* larger, clearly visible */
    max-width: 260px;     /* landscape/rectangular */
    object-fit: contain;  /* preserves original aspect ratio */
}

/* "Add Logo" placeholder shown when no company logo is configured */
.company-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Tablet */
@media (max-width: 1024px) {
    .company-logo-right img { max-height: 60px; max-width: 200px; }
}

/* Mobile – stays beside the welcome text, scaled down. The gap is set by the
   phone breakpoint above; repeating it here would only undo it, since this block
   is later in the file and wins on equal specificity. */
@media (max-width: 640px) {
    .company-logo-right img { max-height: 48px; max-width: 140px; }
}

/* Small phones – "Welcome back" and the logo are sharing 320-360px by now, so the
   logo yields. It is allowed to shrink (no flex-shrink: 0 here) rather than
   squeeze the heading into a two-line wrap. */
@media (max-width: 400px) {
    .company-logo-right     { flex-shrink: 1; min-width: 0; }
    .company-logo-right img { max-height: 36px; max-width: 96px; }
}