/* ── Brand tokens ── */
:root {
  --wa-navy:       #1E3A6E;
  --wa-navy-deep:  #16294F;
  --wa-navy-ink:   #0E1B36;
  --wa-teal:       #1ECFC8;
  --wa-teal-deep:  #14B0AA;
  --wa-bg-soft:    #F5F7FA;
  --wa-text:       #1A1A2E;
  --wa-text-mute:  #5B6478;
  --wa-border:     #E4E8F0;
  --wa-shadow-card: 0 1px 2px rgba(15,27,54,0.04), 0 8px 24px rgba(15,27,54,0.06);
  --wa-shadow-card-hover: 0 2px 4px rgba(15,27,54,0.05), 0 14px 36px rgba(15,27,54,0.10);
  --wa-bubble-out:  #d0f7f5;
  --wa-btn-text:    #06302F;
  --wa-auth-card-bg: #fff;
}

html {
  font-size: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--wa-bg-soft);
}

body > .container {
  flex: 1 0 auto;
}

/* Active nav link uses teal on the dark navbar */
.navbar-dark .nav-link.active {
  color: var(--wa-teal) !important;
}

/* ── Auth pages ── */
.wa-auth-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
    margin-bottom: 48px;
}

.wa-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--wa-auth-card-bg);
    border: 1px solid var(--wa-border);
    border-radius: 14px;
    padding: 36px 32px;
    box-shadow: var(--wa-shadow-card);
}

.wa-auth-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.wa-auth-mark img {
    height: 104px;
    width: 104px;
}

.wa-auth-mark span {
    font-size: 3.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.wa-auth-mark .wa  { color: var(--wa-navy); }
.wa-auth-mark .desk { color: var(--wa-teal); }

/* ── Normalise browser autofill styling ──
   Firefox dark mode paints autofilled inputs a default yellow-green via
   -moz-autofill-background; WebKit/Chrome locks the background and needs the
   inset box-shadow trick. Force both to a subtle navy tint instead. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(70, 90, 126, 0.4) inset !important;
    box-shadow: 0 0 0 1000px rgba(70, 90, 126, 0.4) inset !important;
    -webkit-text-fill-color: inherit !important;
    caret-color: inherit;
    transition: background-color 5000s ease-in-out 0s;
}

input:autofill,
textarea:autofill,
select:autofill {
    background-color: rgba(70, 90, 126, 0.4) !important;
    background-image: none !important;
    color: inherit !important;
}

/* Darker tint in dark mode — the light navy reads washed-out on a dark field. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(14, 27, 54, 0.9) inset !important;
    box-shadow: 0 0 0 1000px rgba(14, 27, 54, 0.9) inset !important;
}

[data-theme="dark"] input:autofill,
[data-theme="dark"] textarea:autofill,
[data-theme="dark"] select:autofill {
    background-color: rgba(14, 27, 54, 0.9) !important;
}

/* Native date/time pickers keep Bootstrap's white .form-control even in dark
   mode, but the global color-scheme:dark makes the browser draw the calendar
   indicator light-on-white — invisible, so the picker looks like it's missing.
   Pin these fields to a light scheme so the indicator stays dark and clickable. */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
input[type="month"].form-control {
    color-scheme: light;
}

.wa-auth-btn {
    background: var(--wa-teal);
    color: var(--wa-btn-text);
    border: none;
    font-weight: 600;
}

.wa-auth-btn:hover,
.wa-auth-btn:focus {
    background: var(--wa-teal-deep);
    color: var(--wa-btn-text);
}

/* ── Feedback floating button ── */
.wa-feedback-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1040;
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    border: none;
    background: var(--wa-teal);
    color: var(--wa-btn-text);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    cursor: pointer;
    transition: opacity .15s, box-shadow .15s;
    letter-spacing: .01em;
}

.wa-feedback-btn:hover {
    opacity: .85;
    box-shadow: 0 4px 14px rgba(0,0,0,.32);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Dark mode tokens ── */
[data-theme="dark"] {
  color-scheme: dark;
  --wa-bg-soft:     #161920;
  --wa-border:      #2d3244;
  --wa-text:        #e4e8f2;
  --wa-text-mute:   #7a8499;
  --wa-bubble-out:  #1b3a38;
  --wa-shadow-card: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3);
  --wa-shadow-card-hover: 0 2px 4px rgba(0,0,0,0.25), 0 14px 36px rgba(0,0,0,0.4);
  --wa-auth-card-bg: #1f2333;
}

/* ══════════════════════════════════════════════════════════════════════════
   Phone-width fixes (≤767px). Scoped to mobile so desktop rendering is untouched.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Inputs at 16px so iOS Safari does NOT auto-zoom on focus (and stay zoomed).
       The root font is 14px below 768px, so form controls would otherwise be 14px.
       (MOB A-M1 + half of B-H4 — kills the keyboard-zoom churn on the chat page.) */
    .form-control,
    .form-select,
    input,
    textarea {
        font-size: 16px;
    }

    /* The floating Feedback button sits bottom-left with a high z-index and, on the
       chat page, lands right on top of the compose bar's attach/emoji controls — a
       tap meant for "attach" opens the feedback modal. Hide it on phones; the desktop
       affordance is unchanged. (MOB B-H2) */
    .wa-feedback-btn {
        display: none;
    }

    /* ── Touch-target sizing (MOB B-M6) ──
       Bump the small controls that cluster tightly on data pages and the chat compose
       bar to a ~40px tap target so they're comfortably hittable with a thumb. Scoped to
       mobile so desktop density is unchanged. */

    /* Row-action button clusters (Contacts / Templates / Scheduled / Users). */
    .wa-dash-action .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 2px 6px 2px 0;
    }

    /* Chat compose bar: attach + emoji buttons. */
    .wa-attach-btn,
    #emojiBtn {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Chat sidebar refresh + filter "Apply" were ~26-28px. */
    .wa-cl-refresh-btn {
        width: 40px;
        height: 40px;
    }
    .wa-cl-filter-apply,
    .wa-filter-actions button[type="submit"] {
        min-height: 40px;
    }

    /* Toasts default to bottom-right, where they cover the chat compose bar on a phone.
       Pin them to the top instead. (MOB Low) */
    #wa-toast-container {
        top: 0;
        bottom: auto !important;
    }
}