/* ================================================================
   toastr-theme.css — app-wide restyle of toastr 2.1.3 notifications
   ================================================================
   Loaded immediately AFTER assets/css/toastr.min.css in
   layouts/head-css.blade.php, layouts/add-css.blade.php and
   layouts/login-css.blade.php.  (add-css re-loads toastr.min.css a
   second time on pages that both @extends('layouts.master') and
   @include('layouts.add-css') — Config/add, Master/Assets/* — so the
   link has to exist in BOTH partials or those pages fall back to the
   vendor look.)

   Design: opaque light card + 4px coloured left rail, matching the
   Paytm / ICICI payment alerts (topbar/paytm-alert.css).  Replaces the
   stock translucent filled blocks, which were 80% opaque and sat on
   top of the fixed #page-topbar so the header bled through the text.

   TWO CASCADE TRAPS this file is written around
   ---------------------------------------------
   1. bootstrap.min.css ALSO defines `.toast` (width:350px,
      background hsla(0,0%,100%,.85), and `.toast:not(.show){display:none}`).
      toastr's toasts carry that same class name, so every rule here is
      prefixed with `#toast-container` instead of styling `.toast`.

   2. theme-overrides.css SECTION 1 repaints
      `body[data-layout-mode="dark"|"sepia"] div:not(.badge):not(.text-white)`
      with author !important at (0,3,2) — and .toast-title / .toast-message
      ARE divs.  A `body[data-layout-mode="dark"] .toast-title` rule is only
      (0,2,1) and LOSES even with !important.  The `#toast-container` prefix
      puts these at (1,1,1); the id column wins outright.

   z-index stays at the vendor's 999999 on purpose: a toast fired from
   inside a modal or a mobile bottom sheet (1090 / 1500) must stay visible.
   ================================================================ */


/* ── Position: clear the fixed topbar ────────────────────────────
   .navbar-header is 70px by default (app.min.css) and 60px from 993px up
   (custom.css:2687).  Vendor default is top:12px, which is why the toast
   used to land ON the header. */
#toast-container.toast-top-right,
#toast-container.toast-top-left,
#toast-container.toast-top-center,
#toast-container.toast-top-full-width {
    top: 82px !important;
}

@media (min-width: 993px) {
    #toast-container.toast-top-right,
    #toast-container.toast-top-left,
    #toast-container.toast-top-center,
    #toast-container.toast-top-full-width {
        top: 72px !important;
    }
}


/* ── The card ────────────────────────────────────────────────────
   --erp-toast-accent is re-set per type (and per theme) below; every
   coloured part of the card reads from it, so a theme arm only has to
   restate that one custom property. */
#toast-container > div {
    --erp-toast-accent: #6b7280;

    position: relative;
    opacity: 1 !important;                       /* the actual bug: vendor ships .8 */
    -ms-filter: none;
    filter: none;
    width: 360px;
    max-width: calc(100vw - 24px);
    margin: 0 0 10px;
    padding: 14px 36px 14px 46px;                /* left gutter = icon, right = close */
    background-color: var(--theme-bg-surface, #ffffff) !important;
    color: var(--theme-text-primary, #495057) !important;
    border: 1px solid var(--theme-border, #e9e9ef);
    border-left: 4px solid var(--erp-toast-accent);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    font-size: 13px;
    line-height: 1.45;
    overflow: hidden;
}

#toast-container > div:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
    filter: none;
}

/* Vendor shrinks the toast to 11em / 18em / 25em in three media blocks;
   collapse all of them onto the responsive width above. */
@media all and (max-width: 768px) {
    #toast-container > div {
        width: 360px;
        max-width: calc(100vw - 24px);
        padding: 14px 36px 14px 46px;
    }
}

/* Full-width / centred variants keep their own sizing rules. */
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
    width: 96%;
    max-width: 96%;
}


/* ── Icon (Font Awesome Free 5.13.0 — icons.min.css is on every layout
   that loads toastr) ─────────────────────────────────────────────
   A glyph rather than data-URI SVGs: it inherits `color`, so all four
   types across all three themes need one declaration each, not twelve. */
#toast-container > div::before {
    content: "\f05a";                            /* info-circle (default) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: 17px;
    top: 14px;
    font-size: 16px;
    line-height: 1.3;
    color: var(--erp-toast-accent);
}

/* The vendor paints a white PNG glyph via `#toast-container>.toast-X` with
   !important — (1,1,0), so a `#toast-container > div` reset (1,0,1) LOSES to it
   and the white blob survives on the dark-theme card.  Match its selector shape
   exactly; this file loads after toastr.min.css, so the tie goes to us. */
#toast-container > .toast-info,
#toast-container > .toast-error,
#toast-container > .toast-success,
#toast-container > .toast-warning {
    background-image: none !important;
}

#toast-container > .toast-warning::before { content: "\f071"; }   /* exclamation-triangle */
#toast-container > .toast-error::before   { content: "\f06a"; }   /* exclamation-circle */
#toast-container > .toast-success::before { content: "\f058"; }   /* check-circle */
#toast-container > .toast-info::before    { content: "\f05a"; }   /* info-circle */


/* ── Title / message ─────────────────────────────────────────────── */
#toast-container > div .toast-title {
    color: var(--erp-toast-accent) !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 3px;
}

#toast-container > div .toast-message {
    color: var(--theme-text-primary, #495057) !important;
    font-size: 13px;
    line-height: 1.45;
    word-wrap: break-word;
}

/* Vendor hard-codes these to #FFF — invisible on a light card. */
#toast-container > div .toast-message a,
#toast-container > div .toast-message label {
    color: var(--erp-toast-accent) !important;
    text-decoration: underline;
}

#toast-container > div .toast-message a:hover {
    color: var(--erp-toast-accent) !important;
    opacity: 0.8;
    text-decoration: underline;
}


/* ── Close button ────────────────────────────────────────────────
   Vendor: white text on a white text-shadow, floated into the title row.
   Pull it out of the float flow so long titles can't crowd it. */
#toast-container > div .toast-close-button {
    position: absolute;
    top: 9px;
    right: 10px;
    float: none;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    opacity: 1 !important;
    filter: none;
    color: var(--theme-text-muted, #6b7280) !important;
    text-shadow: none !important;
}

#toast-container > div .toast-close-button:hover,
#toast-container > div .toast-close-button:focus {
    color: var(--erp-toast-accent) !important;
    opacity: 1 !important;
    filter: none;
}


/* ── Progress bar ───────────────────────────────────────────────── */
#toast-container > div .toast-progress {
    height: 3px;
    background-color: var(--erp-toast-accent);
    opacity: 0.85;
    filter: none;
    border-radius: 0 0 0 6px;
}


/* ── Accents: LIGHT (default) ───────────────────────────────────── */
#toast-container > .toast-success { --erp-toast-accent: #16a34a; }
#toast-container > .toast-error   { --erp-toast-accent: #dc2626; }
#toast-container > .toast-warning { --erp-toast-accent: #d97706; }
#toast-container > .toast-info    { --erp-toast-accent: #0284c7; }


/* ── Accents: DARK (dark / midnight / amoled all set data-layout-mode="dark")
   Card surface + ink come from --theme-bg-surface / --theme-text-primary
   above, which already carry per-theme values, so only the rail colour
   needs restating — brighter, for contrast against #2a2f34. */
body[data-layout-mode="dark"] #toast-container > .toast-success { --erp-toast-accent: #4ade80; }
body[data-layout-mode="dark"] #toast-container > .toast-error   { --erp-toast-accent: #f87171; }
body[data-layout-mode="dark"] #toast-container > .toast-warning { --erp-toast-accent: #fbbf24; }
body[data-layout-mode="dark"] #toast-container > .toast-info    { --erp-toast-accent: #38bdf8; }

body[data-layout-mode="dark"] #toast-container > div {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
}

body[data-layout-mode="dark"] #toast-container > div:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}


/* ── Accents: SEPIA (warm light variant) ─────────────────────────
   Sepia is the case the old filled toasts got wrong: theme-overrides
   painted the card #b8860b and then SECTION 1 forced #5c4b32 ink on top
   of it.  Light card + dark warm ink resolves it. */
body[data-layout-mode="sepia"] #toast-container > .toast-success { --erp-toast-accent: #4a7c2f; }
body[data-layout-mode="sepia"] #toast-container > .toast-error   { --erp-toast-accent: #a33a2a; }
body[data-layout-mode="sepia"] #toast-container > .toast-warning { --erp-toast-accent: #b06f10; }
body[data-layout-mode="sepia"] #toast-container > .toast-info    { --erp-toast-accent: #2f6a8a; }