/*
 * YES EDU phone and tablet look (below 992px): the green top bar and the dashboard home.
 * Desktop (992px and up) keeps its current design and is redesigned separately.
 *
 * Palette comes from the reference design: a deep school green that fades to mint, white cards, and pastel
 * circles with one saturated icon each. Dark mode swaps the tokens at the bottom of :root.
 */
:root {
    --ym-green-900: #0b5a31;
    --ym-green-700: #14803f;
    --ym-green-500: #2aa65c;
    --ym-mint: #eef8f2;
    --ym-card: #ffffff;
    --ym-ink: #10281c;
    --ym-muted: #5f7268;
    --ym-line: #e3eee7;
    --ym-ring: rgba(20, 128, 63, .35);
    --ym-shadow: 0 10px 30px rgba(11, 90, 49, .12);

    --ym-green-bg: #e1f5e9;  --ym-green-fg: #14803f;
    --ym-rose-bg: #fde7ec;   --ym-rose-fg: #d81e4a;
    --ym-orange-bg: #ffe9d9; --ym-orange-fg: #ee6a14;
    --ym-blue-bg: #e2eefd;   --ym-blue-fg: #1f6ee0;
    --ym-violet-bg: #ece6fd; --ym-violet-fg: #7340e6;
    --ym-amber-bg: #fef0d3;  --ym-amber-fg: #e8920a;
    --ym-teal-bg: #daf5ef;   --ym-teal-fg: #0c9a85;
    --ym-red-bg: #fde3e3;    --ym-red-fg: #c42727;
}

html[data-theme="dark"] {
    --ym-green-900: #07331d;
    --ym-green-700: #0f5f31;
    --ym-mint: #0f1a14;
    --ym-card: #17231c;
    --ym-ink: #e8f3ec;
    --ym-muted: #96aa9e;
    --ym-line: #243629;
    --ym-ring: rgba(94, 214, 140, .45);
    --ym-shadow: 0 10px 30px rgba(0, 0, 0, .35);

    --ym-green-bg: #1b3a28;  --ym-green-fg: #5fd68c;
    --ym-rose-bg: #3d1f29;   --ym-rose-fg: #ff7a98;
    --ym-orange-bg: #3d2a1a; --ym-orange-fg: #ffa05c;
    --ym-blue-bg: #1c2f4a;   --ym-blue-fg: #7db4ff;
    --ym-violet-bg: #2c2548; --ym-violet-fg: #b199ff;
    --ym-amber-bg: #3a2f14;  --ym-amber-fg: #ffc255;
    --ym-teal-bg: #153a35;   --ym-teal-fg: #4fdcc4;
    --ym-red-bg: #3d2020;    --ym-red-fg: #ff8a8a;
}

.ym-tone-green  { --bg: var(--ym-green-bg);  --fg: var(--ym-green-fg); }
.ym-tone-rose   { --bg: var(--ym-rose-bg);   --fg: var(--ym-rose-fg); }
.ym-tone-orange { --bg: var(--ym-orange-bg); --fg: var(--ym-orange-fg); }
.ym-tone-blue   { --bg: var(--ym-blue-bg);   --fg: var(--ym-blue-fg); }
.ym-tone-violet { --bg: var(--ym-violet-bg); --fg: var(--ym-violet-fg); }
.ym-tone-amber  { --bg: var(--ym-amber-bg);  --fg: var(--ym-amber-fg); }
.ym-tone-teal   { --bg: var(--ym-teal-bg);   --fg: var(--ym-teal-fg); }
.ym-tone-red    { --bg: var(--ym-red-bg);    --fg: var(--ym-red-fg); }

/* The sheet's rise (see .ym-hero). Registered as a length so it can follow the scroll position. */
@property --rise { syntax: '<length>'; inherits: true; initial-value: 0px; }
@keyframes ym-rise { to { --rise: 24px; } }

/* The dashboard home exists only on phones and tablets. */
.ym-home, .ym-hero { display: none; }

@media (max-width: 991.98px) {

    /* ------------------------------------------------------------ top bar
       Logo and tagline on the left; search, bell and a three-dots menu on the right. On the dashboard the bar
       is transparent and sits on top of the hero; on every other page it is a plain green bar. */
    #main-nav-for-chat {
        position: relative; z-index: 99; padding: 0 !important;
        background: linear-gradient(180deg, var(--ym-green-900), var(--ym-green-700));
    }
    /* The page reserves room at the top for the old bar; the hero starts at the very top instead. */
    /* The page pads its content 15px at the sides; the hero and the home blocks cancel exactly that, so they are as wide as
       the screen. (Using the viewport width instead would also count the scrollbar, making the page wider than the
       screen and pushing the cards to one side.) */
    body:has(.ym-hero) #main-content { --ym-gutter: 15px; position: relative; padding: 0 var(--ym-gutter) !important; }
    body:has(.ym-hero) #main-nav-for-chat { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; }

    .admin #main-nav-for-chat .header_iner {
        display: flex !important; align-items: center; justify-content: flex-start !important;
        gap: 12px; margin: 0;
        /* 36px under the status bar or notch (the header is pinned, so it stays compact), 16px at the sides, 44px buttons. */
        padding: calc(env(safe-area-inset-top, 0px) + 2.25rem) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: transparent !important; box-shadow: none !important; border: 0 !important;
    }
    .admin #main-nav-for-chat :is(.collaspe_icon, .redirect_links, .sidebar_icon, .profile_info, .theme-toggle,
        .header_right > .nice_Select, .header_right > .nice-select) { display: none !important; }
    /* The theme toggle is only hidden in the bar; it stays in the three-dots menu. */
    .admin #main-nav-for-chat .ym-more__menu .theme-toggle { display: inline-flex !important; }

    /* Dashboard: the logo stands on the hero's light glow with its tagline under it, no card and no bar. */
    body:has(.ym-home) .admin #main-nav-for-chat .ym-logo,
    body:has(.ym-home) #main-nav-for-chat .ym-logo { background: none; box-shadow: none; padding: 0; gap: 3px; }
    body:has(.ym-home) #main-nav-for-chat .small_logo_crm img { height: 46px; max-width: min(210px, 100%); }
    body:has(.ym-home) #main-nav-for-chat .ym-logo__tag { font-size: 12px; font-weight: 500; color: #12301f; }

    /* On narrow phones the logo says enough; the tagline would only be cut off. */
    @media (max-width: 420px) { body:has(.ym-home) #main-nav-for-chat .ym-logo__tag { display: none; } }

    /* Other pages keep a plain bar for now: the logo on a soft white card so any school's logo reads on the green. */
    .admin #main-nav-for-chat .small_logo_crm { order: 0; margin: 0 auto 0 0; display: block !important; flex: 1 1 0; min-width: 0; }
    .admin #main-nav-for-chat .ym-logo {
        display: inline-flex; flex-direction: column; gap: 2px; max-width: 100%; min-width: 0; padding: 6px 12px 7px;
        border-radius: 16px; background: rgba(255, 255, 255, .92); text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    }
    .admin #main-nav-for-chat .small_logo_crm img { height: 34px; width: auto; max-width: 170px; object-fit: contain; object-position: left center; max-width: 100%; }
    .admin #main-nav-for-chat .small_logo_crm img { max-width: min(170px, 100%); }
    .ym-logo__tag { font-size: 12px; line-height: 1.2; color: var(--ym-green-900); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .admin #main-nav-for-chat .gs { order: 1; margin: 0; }
    .admin #main-nav-for-chat .header_right { order: 2; margin: 0 0 0 auto; gap: 12px; flex: 0 0 auto; }
    .admin #main-nav-for-chat .header_right > .header_notification_warp { order: 1; display: flex !important; gap: 10px; }
    .admin #main-nav-for-chat .header_right > .ym-more { order: 2; }

    /* Search, bell and the three dots: the same white 44px circle. */
    .admin #main-nav-for-chat .gs__mobile-trigger,
    .admin #main-nav-for-chat #mobileSelectorDropdown,
    .admin #main-nav-for-chat .header_notification_warp li > a.bell_notification_clicker {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 44px; height: 44px; padding: 0; margin: 0 !important; border: 0; border-radius: 50%;
        background: rgba(255, 255, 255, .95) !important; color: #10281c !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .16); font-size: 17px; line-height: 1; cursor: pointer; position: relative;
    }
    /* The light/dark switch sits where the search button was; search is still in the bottom bar. */
    .admin #main-nav-for-chat .gs .gs__mobile-trigger { display: none !important; }
    .admin #main-nav-for-chat .ym-bar-theme { order: 1; margin: 0; display: inline-flex; }
    .admin #main-nav-for-chat .ym-bar-theme .theme-toggle {
        display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
        background: rgba(255, 255, 255, .95) !important; color: #10281c !important; box-shadow: 0 3px 10px rgba(0, 0, 0, .16); font-size: 17px; cursor: pointer;
        transition: transform .15s ease;
    }
    .admin #main-nav-for-chat .ym-bar-theme .theme-toggle:active { transform: scale(.92); }
    .admin #main-nav-for-chat .ym-bar-theme .theme-toggle .theme-toggle__sun { color: #f2a93b !important; }
    .admin #main-nav-for-chat .ym-bar-theme .theme-toggle .theme-toggle__moon { color: #2b3a67 !important; }
    .admin #main-nav-for-chat .gs__mobile-trigger i { color: #10281c !important; }
    .admin #main-nav-for-chat #mobileSelectorDropdown svg { color: #10281c !important; }
    .admin #main-nav-for-chat .header_notification_warp { margin: 0 !important; }
    .admin #main-nav-for-chat .header_notification_warp li > a.bell_notification_clicker img { width: 20px; height: 20px; }
    /* The unread count is a red dot, as in the design; the full count is in the notification panel. */
    .admin #main-nav-for-chat .header_notification_warp .notification_count {
        top: 6px; right: 6px; width: 12px; height: 12px; line-height: 12px; padding: 0; font-size: 0;
        border-radius: 50%; background: #e5322d !important; background-image: none !important; border: 2px solid #fff; box-sizing: content-box; transform: translate(35%, -35%);
    }
    .admin #main-nav-for-chat .header_notification_warp .notification_count.is-zero,
    .admin #main-nav-for-chat .header_notification_warp .pulse-ring { display: none !important; }

    /* The design has search, bell and the menu only; chat is one of the shortcuts. */
    .admin #main-nav-for-chat .header_notification_warp > li:not(:has(.show_notifications)) { display: none !important; }

    /* Three-dots menu: a card of rows that all follow one pattern, a tinted icon, a label, and a control or chevron on
       the right. Preferences first, then the account, then Log out set apart. */
    .admin #main-nav-for-chat .ym-more { display: block !important; }
    .admin #main-nav-for-chat .ym-more__menu {
        width: min(304px, calc(100vw - 32px)); min-width: 0; margin-top: 10px; padding: 6px !important;
        border: 1px solid var(--ym-line); border-radius: 24px; background: var(--ym-card); box-shadow: var(--ym-shadow);
    }
    .ym-more__group { display: grid; gap: 2px; padding: 4px 0; }
    .ym-more__group + .ym-more__group { border-top: 1px solid var(--ym-line); }

    .ym-more__row, .ym-more__field {
        display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; margin: 0; padding: 7px 12px 7px 8px;
        border: 0; border-radius: 16px; background: transparent; color: var(--ym-ink);
        font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: start; text-decoration: none; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .ym-more__row:hover, .ym-more__row:focus { background: var(--ym-mint); color: var(--ym-ink); text-decoration: none; }
    .ym-more__ico {
        flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
        background: var(--ym-green-bg); color: var(--ym-green-fg); font-size: 15px;
    }
    .ym-more__ico i { width: auto; color: inherit; }
    .ym-more__label { flex: 1; min-width: 0; }
    .ym-more__go { flex: none; font-size: 11px; color: var(--ym-muted); opacity: .8; }

    /* The two drop-downs read as rows: a small label above, the chosen value below, a chevron at the end. */
    .ym-more__field { cursor: default; }
    .ym-more__fieldbody { flex: 1; min-width: 0; display: grid; gap: 1px; }
    .ym-more__fieldbody small { font-size: 12px; line-height: 1.2; color: var(--ym-muted); }
    .ym-more__menu .nice-select {
        float: none; display: block; width: 100% !important; min-width: 0 !important; height: auto; min-height: 0;
        margin: 0; padding: 0 20px 0 0; border: 0; background: transparent; box-shadow: none;
        font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ym-ink);
    }
    .ym-more__menu .nice-select .current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ym-ink); }
    .ym-more__menu .nice-select::after {
        content: "078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; line-height: 1;
        right: 2px; top: 50%; margin-top: -5px; width: auto; height: auto; border: 0; transform: none; color: var(--ym-muted);
    }
    /* No ring around the selected value; keyboard focus tints the whole row instead. */
    .ym-more__menu .nice-select, .ym-more__menu .nice-select:focus, .ym-more__menu .nice-select:focus-visible, .ym-more__menu .nice-select:active { outline: 0 !important; box-shadow: none !important; }
    .ym-more__field:has(.nice-select:focus-visible), .ym-more__field:has(.nice-select.open) { background: var(--ym-mint); }
    .ym-more__menu .nice-select .list {
        left: auto; right: -8px; min-width: 232px !important; width: auto !important; max-height: 240px; overflow-y: auto;
        margin-top: 12px; padding: 6px !important; border: 1px solid var(--ym-line); border-radius: 18px;
        background: var(--ym-card); box-shadow: var(--ym-shadow);
    }
    .ym-more__menu .nice-select .option {
        min-height: 42px; padding: 0 14px; border-radius: 12px; line-height: 42px;
        font-size: 14px; font-weight: 500; color: var(--ym-ink); background: transparent;
    }
    .ym-more__menu .nice-select .option:hover, .ym-more__menu .nice-select .option.focus,
    .ym-more__menu .nice-select .option.selected.focus { background: var(--ym-mint); }
    /* The legacy plugin paints the chosen option purple; keep it in the app's green. */
    body.admin .ym-more__menu .nice-select .list .option.selected,
    body.admin .ym-more__menu .nice-select .list .option.selected.focus { font-weight: 700; color: var(--ym-green-700) !important; background: var(--ym-green-bg) !important; }
    html[data-theme="dark"] body.admin .ym-more__menu .nice-select .list .option.selected { color: var(--ym-green-fg) !important; }
    body.admin .ym-more__menu .nice-select .list .option { color: var(--ym-ink); }

    /* Two or three choices need no search box (the shared dropdown plugin adds one to every select). */
    .ym-more__menu .nice-select .nice-select-search-box { display: none !important; }
    /* "Select language" is a prompt, not a choice. */
    .ym-more__menu .nice-select .option[data-value="0"] { display: none !important; }

    .ym-more__theme { cursor: default; }
    .ym-more__theme:hover { background: transparent; }
    .ym-more__theme .theme-toggle { margin-left: auto; }

    /* Log out: set apart, and tinted rose like the drawer's. */
    .ym-more__row--danger { margin-top: 2px; background: var(--ym-rose-bg); color: var(--ym-rose-fg); font-weight: 600; }
    .ym-more__row--danger:hover, .ym-more__row--danger:focus { background: var(--ym-rose-bg); color: var(--ym-rose-fg); filter: brightness(.97); }
    .ym-more__row--danger .ym-more__ico { background: transparent; color: inherit; }

    #main-nav-for-chat :is(button, a):focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
    .ym-more__menu :is(button, a):focus-visible { outline: 3px solid var(--ym-ring); outline-offset: -3px; }

    /* ------------------------------------------------- dashboard home */
    /* The page under the pinned header. It starts 28px up, under the header's cut-out, so the first card
       sits right at the sheet's edge. */
    .ym-home {
        display: block; position: relative; z-index: 1;
        margin-inline: calc(-1 * var(--ym-gutter)); margin-top: -28px;
        padding-bottom: 0; background: var(--ym-card);
        font-family: inherit; color: var(--ym-ink);
    }
    .dash-legacy-top .dash-welcome, .dash-legacy-top .dash-stats { display: none; }
    .dash-legacy-top { margin-top: 20px; }

    /* The pinned header. Its bottom 28px is a cut-out with rounded top corners, so the page shows through as a
       white sheet; --rise (set while scrolling) lifts the cut-out, and the content scrolling under it is clipped
       along the curve. The hero ignores the pointer: only the bar's own buttons are clickable. */
    .ym-hero {
        --edge: 28px;
        will-change: mask-position;
        display: block; position: sticky; top: 0; z-index: 90; overflow: hidden; pointer-events: none;
        margin-inline: calc(-1 * var(--ym-gutter));
        /* 60px at the bottom: the 28px cut-out, up to 24px of rise, and a little air above the sheet. */
        padding: calc(env(safe-area-inset-top, 0px) + 7rem) max(20px, env(safe-area-inset-right, 0px)) 60px max(20px, env(safe-area-inset-left, 0px));
        background:
            radial-gradient(70% 38% at 18% 0%, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .35) 45%, transparent 75%),
            linear-gradient(180deg, #4cb87a 0%, var(--ym-green-500) 40%, #c6ebd4 100%);
        color: #fff;
        -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle var(--edge) at 100% 100%, transparent calc(var(--edge) - 1px), #000 var(--edge)), radial-gradient(circle var(--edge) at 0 100%, transparent calc(var(--edge) - 1px), #000 var(--edge));
        -webkit-mask-size: 100% calc(100% - var(--edge) - var(--rise, 0px)), var(--edge) var(--edge), var(--edge) var(--edge);
        -webkit-mask-position: 0 0, 0 calc(100% - var(--rise, 0px)), 100% calc(100% - var(--rise, 0px));
        -webkit-mask-repeat: no-repeat;
        mask-image: linear-gradient(#000, #000), radial-gradient(circle var(--edge) at 100% 100%, transparent calc(var(--edge) - 1px), #000 var(--edge)), radial-gradient(circle var(--edge) at 0 100%, transparent calc(var(--edge) - 1px), #000 var(--edge));
        mask-size: 100% calc(100% - var(--edge) - var(--rise, 0px)), var(--edge) var(--edge), var(--edge) var(--edge);
        mask-position: 0 0, 0 calc(100% - var(--rise, 0px)), 100% calc(100% - var(--rise, 0px));
        mask-repeat: no-repeat;
    }
    /* Night: a dark green sky with a moon and stars, the hills dimmed, the classroom lights on (the picture is in hero_art.blade.php) */
    html[data-theme="dark"] .ym-hero { background: radial-gradient(60% 36% at 84% 14%, rgba(197, 219, 255, .16) 0%, transparent 70%), linear-gradient(180deg, #06231a 0%, #0a3322 58%, #0f2a1d 100%); }
    html[data-theme="dark"] .ym-hero__land svg { filter: brightness(.5) saturate(.8); }
    html[data-theme="dark"] .ym-hero__land .ym-art-window { fill: #ffd166; }
    /* The animated picture: sky across the top, hills along the bottom. Both keep their drawing's proportions. */
    .ym-hero__sky { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 2 / 1; pointer-events: none; }
    .ym-hero__sky svg, .ym-hero__land svg { display: block; width: 100%; height: 100%; }
    .ym-hero__land {
        position: absolute; right: 0; bottom: 28px; width: min(100%, 340px); aspect-ratio: 400 / 110; pointer-events: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%); mask-image: linear-gradient(to right, transparent 0, #000 26%);
    }
    .ym-hero__land::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 29px; background: #0b5133; }
    .ym-hero__text { text-shadow: 0 1px 6px rgba(7, 51, 29, .55); }
    /* at night the sky is darker than that green glow, so the glow would read as a box behind the title */
    html[data-theme="dark"] .ym-hero__text { text-shadow: none; }
    .ym-hero__who { position: relative; display: flex; align-items: center; gap: 14px; }
    .ym-hero__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); background: #fff; }
    .ym-hero__text { min-width: 0; }
    .ym-hero__hello { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .92); }
    .ym-hero__name { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }

    .ym-card {
        position: relative; margin: 0 14px; padding: 18px 12px; border-radius: 28px;
        background: var(--ym-card); box-shadow: var(--ym-shadow); border: 1px solid var(--ym-line);
    }

    /* Shortcut buttons: four across on a phone, eight on a tablet. */
    /* The first block is the sheet itself: full width, no card edge, so the header's curve is the only edge. */
    .ym-actions.ym-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .ym-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 4px; margin-top: 0; padding: 34px 8px 22px; }
    .ym-action {
        display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0; min-width: 0;
        color: var(--ym-ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .ym-action:hover, .ym-action:focus { color: var(--ym-ink); text-decoration: none; }
    .ym-action__icon {
        display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%;
        background: var(--bg); color: var(--fg); font-size: 23px;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .ym-action:active .ym-action__icon { transform: scale(.92); }
    .ym-action:focus-visible { outline: none; }
    .ym-action:focus-visible .ym-action__icon { box-shadow: 0 0 0 3px var(--ym-card), 0 0 0 6px var(--ym-ring); }
    .ym-action__label { max-width: 100%; font-size: 12.5px; font-weight: 500; line-height: 1.25; text-align: center; overflow-wrap: break-word; hyphens: auto; }

    /* Narrow phones: a little smaller so "Communication" fits its column on one line. */
    @media (max-width: 480px) { .ym-action__label { font-size: 12px; } }
    @media (max-width: 400px) { .ym-action__label { font-size: 12px; } }

    .ym-lower { display: grid; gap: 14px; margin-top: 0; padding: 16px 0 18px; background: var(--ym-mint); border-top: 1px solid var(--ym-line); }
    .ym-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 6px 12px; }
    .ym-card__head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ym-ink); }
    .ym-card__head time { font-size: 12.5px; color: var(--ym-muted); }
    .ym-link { display: inline-flex; align-items: center; min-height: 44px; margin: -10px -6px; padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ym-green-700); text-decoration: none; white-space: nowrap; }
    html[data-theme="dark"] .ym-link { color: var(--ym-green-fg); }
    .ym-link i { font-size: 11px; margin-inline-start: 4px; }

    .ym-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ym-stat { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 55%, var(--ym-card)); min-width: 0; }
    .ym-stat--wide { grid-column: 1 / -1; }
    .ym-stat i { color: var(--fg); font-size: 18px; margin-bottom: 4px; }
    .ym-stat strong { font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--ym-ink); overflow-wrap: anywhere; }
    .ym-stat span { font-size: 12px; color: var(--ym-muted); }

    /* Recent notices. Each row leads with its date (the thing you scan by), then the title and a one-line snippet;
       notices from the last three days get an amber date tile and a "New" pill. Dividers start after the tile. */
    .ym-notice-list { list-style: none; margin: 0; padding: 0; }
    .ym-notice-list > li { position: relative; }
    .ym-notice-list > li + li::before { content: ""; position: absolute; top: 0; left: 78px; right: 6px; border-top: 1px solid var(--ym-line); }
    .ym-notice-list a:not(.ym-cta) {
        display: flex; align-items: center; gap: 14px; padding: 14px 6px; border-radius: 16px;
        color: var(--ym-ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .ym-notice-list a:not(.ym-cta):hover, .ym-notice-list a:not(.ym-cta):focus { color: var(--ym-ink); text-decoration: none; }
    .ym-notice-list a:not(.ym-cta):active { background: var(--ym-mint); }
    .ym-notice-list a:focus-visible { outline: 3px solid var(--ym-ring); outline-offset: -3px; }

    .ym-date {
        --bg: var(--ym-green-bg); --fg: var(--ym-green-fg);
        flex: none; display: grid; place-content: center; justify-items: center; gap: 1px; width: 52px; height: 56px;
        border-radius: 16px; background: var(--bg); color: var(--fg); text-align: center; font-size: 18px;
    }
    .ym-date--new { --bg: var(--ym-amber-bg); --fg: var(--ym-amber-fg); }
    .ym-date strong { font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--fg); }
    .ym-date small { font-size: 12px; font-weight: 500; line-height: 1.1; color: var(--fg); }

    .ym-notice__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
    .ym-notice-list .ym-notice__title {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
        font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ym-ink);
    }
    .ym-notice-list .ym-notice__snippet { font-size: 12.5px; line-height: 1.4; color: var(--ym-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ym-notice-list .ym-pill {
        display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
        background: var(--ym-amber-bg); color: var(--ym-amber-fg); font-size: 12px; font-weight: 600; line-height: 1.5;
    }
    .ym-notice__go { flex: none; font-size: 12px; color: var(--ym-muted); opacity: .7; }

    /* Nothing yet: say what goes here, and offer the next step to anyone who may add a notice. */
    .ym-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 12px 8px; text-align: center; }
    .ym-empty__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ym-green-bg); color: var(--ym-green-fg); font-size: 20px; }
    .ym-empty strong { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--ym-ink); }
    .ym-empty small { font-size: 12.5px; color: var(--ym-muted); }
    .ym-cta {
        display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0 20px; border-radius: 999px;
        background: var(--ym-green-700); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
    }
    .ym-cta:hover, .ym-cta:focus { color: #fff; text-decoration: none; filter: brightness(1.08); }
    .ym-cta:focus-visible { outline: 3px solid var(--ym-ring); outline-offset: 2px; }

}

/* Tablet: roomier hero, eight shortcuts in a row, summary and notices side by side. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ym-hero { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
    .ym-hero__avatar { width: 60px; height: 60px; }
    .ym-hero__name { font-size: 22px; }
    .ym-hero__hello { font-size: 14px; }
    .ym-card { margin: 0 28px; }
    .ym-actions { grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: 0; padding: 40px 24px 26px; }
    .ym-action__icon { width: 64px; height: 64px; font-size: 26px; }
    .ym-lower { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 20px 28px 24px; align-items: start; }
    .ym-lower .ym-card { margin: 0; }
}

/* Where the browser supports scroll-driven animations, the first 24px of scrolling lifts the sheet 24px, in step with
   the page; elsewhere the script in mobile_home.blade.php sets --rise. */
@supports (animation-timeline: scroll()) {
    @media (max-width: 991.98px) {
        .ym-hero { animation: ym-rise linear both; animation-timeline: scroll(root block); animation-range: 0px 24px; }
    }
}

/* ------------------------------------------------------------ notifications panel
   One card for every width. On desktop it drops down from the bell; on phones and tablets it floats under the header.
   Rows: a bell circle, up to two lines of text with the time under it, and one check button to mark it read. */
.header_notification_warp .Menu_NOtification_Wrap.ym-notif {
    display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 24px); max-height: min(70vh, 560px);
    right: 0; top: 100%; margin-top: 14px; padding: 0; overflow: hidden;
    background: var(--ym-card); color: var(--ym-ink); border: 1px solid var(--ym-line); border-radius: 24px; box-shadow: var(--ym-shadow);
    transform: translateY(-8px) scale(.98) !important; transform-origin: top right; opacity: 0; visibility: hidden; z-index: 120;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* !important: an old narrow-screen rule centres this panel with an !important transform. */
.header_notification_warp .Menu_NOtification_Wrap.ym-notif.active { opacity: 1; visibility: visible; transform: none !important; }

.ym-notif__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px 20px; }
.ym-notif__head h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ym-ink); }
.ym-notif__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: #e5322d; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.ym-notif__all { flex: none; padding: 6px 4px; font-size: 13px; font-weight: 600; color: var(--ym-green-700); text-decoration: none; }
html[data-theme="dark"] .ym-notif__all { color: var(--ym-green-fg); }
.ym-notif__all:hover, .ym-notif__all:focus { color: var(--ym-green-700); text-decoration: underline; }

.ym-notif__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 4px; }
.ym-notif__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 16px; }
.ym-notif__item + .ym-notif__item { margin-top: 2px; }
.ym-notif__item:hover { background: var(--ym-mint); }
.ym-notif__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ym-green-bg); color: var(--ym-green-fg); font-size: 15px; }
.ym-notif__text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ym-notif__text p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0;
    font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ym-ink); overflow-wrap: anywhere;
}
.ym-notif__text time { font-size: 12px; line-height: 1.2; color: var(--ym-muted); }
.ym-notif__read {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: 2px;
    border-radius: 50%; background: transparent; border: 1.5px solid var(--ym-line); color: var(--ym-green-700); font-size: 13px; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html[data-theme="dark"] .ym-notif__read { color: var(--ym-green-fg); }
.ym-notif__read:hover, .ym-notif__read:focus { background: var(--ym-green-700); border-color: var(--ym-green-700); color: #fff; text-decoration: none; }
.ym-notif__read:focus-visible, .ym-notif__all:focus-visible, .ym-notif__foot a:focus-visible { outline: 3px solid var(--ym-ring); outline-offset: 2px; }

.ym-notif__empty { display: grid; justify-items: center; gap: 4px; padding: 26px 20px 30px; text-align: center; }
.ym-notif__empty .ym-notif__ico { width: 56px; height: 56px; font-size: 20px; margin-bottom: 8px; }
.ym-notif__empty strong { font-size: 15px; font-weight: 600; color: var(--ym-ink); }
.ym-notif__empty small { font-size: 12.5px; color: var(--ym-muted); }

.ym-notif__foot { flex: none; padding: 8px 12px 12px; border-top: 1px solid var(--ym-line); }
.ym-notif__foot a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 14px;
    background: var(--ym-mint); color: var(--ym-ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.ym-notif__foot a:hover, .ym-notif__foot a:focus { color: var(--ym-ink); text-decoration: none; filter: brightness(.97); }
.ym-notif__foot a i { font-size: 11px; color: var(--ym-green-700); }

@media (max-width: 991.98px) {
    /* Phones and tablets: the header is pinned, so the card floats just under the buttons (fixed, not tied to the bell). */
    .admin #main-nav-for-chat .header_notification_warp .Menu_NOtification_Wrap.ym-notif {
        position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6.4rem); left: 12px; right: 12px; width: auto; max-width: none; margin-top: 0;
        max-height: calc(100vh - env(safe-area-inset-top, 0px) - 6.4rem - 88px);
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .admin #main-nav-for-chat .header_notification_warp .Menu_NOtification_Wrap.ym-notif { left: auto; right: 16px; width: 400px; }
}
@media (prefers-reduced-motion: reduce) {
    .header_notification_warp .Menu_NOtification_Wrap.ym-notif { transition: none; }
}

/* ------------------------------------------------------------ bottom menu
   The phone bottom menu (partials/mobile_bottom_nav.blade.php) is shown below 768px by its own styles; here it also
   shows on tablets (up to 991px), where the top bar no longer has a menu button, and takes the dashboard's green. */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.admin { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    body.admin .mobile-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        display: flex; justify-content: space-around; align-items: stretch;
        height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px env(safe-area-inset-bottom, 0px);
        background: #fff; border-top: 1px solid #eef0f6; box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
    }
    body.admin .mobile-bottom-nav__item {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        padding: 0; border: 0; background: none; color: #64748b; font-size: 12px; font-weight: 500; line-height: 1;
        text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    body.admin .mobile-bottom-nav__item i { font-size: 19px; }
    body.admin .mobile-bottom-nav__item:hover, body.admin .mobile-bottom-nav__item:focus { color: #64748b; text-decoration: none; }
}
@media (max-width: 991.98px) {
    .admin .mobile-bottom-nav__item.is-active, .admin .mobile-bottom-nav__item.is-active:hover { color: var(--ym-green-700); }
    .admin .mobile-bottom-nav__item:focus-visible { outline-color: var(--ym-green-700); }
}
html[data-theme="dark"] .admin .mobile-bottom-nav__item.is-active { color: var(--ym-green-fg); }

@media (prefers-reduced-motion: reduce) {
    .ym-action__icon { transition: none; }
}

/* Hero artwork (resources/views/backEnd/dashboard/hero_art.blade.php), from the field tracker's top bar. Each loop starts and ends in the
   same pose, so there is no jump when it repeats. */
/* The sun: the bloom breathes slowly, the core wavers a hair, and the shafts of
   light sway together while each swells and fades on its own. */
@keyframes ym-art-glow {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.07); opacity: 1; }
}
@keyframes ym-art-flicker {
  0%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.04); opacity: 0.94; }
  75% { transform: scale(0.99); opacity: 1; }
}
@keyframes ym-art-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes ym-art-shaft {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
/* A bird crosses the sky at a steady pace, fading in and out at the edges. */
@keyframes ym-art-cross {
  0% { transform: translateX(-70px); opacity: 0; }
  8% { opacity: 0.8; }
  92% { opacity: 0.8; }
  100% { transform: translateX(250px); opacity: 0; }
}
/* While crossing it drifts up and down a little, tilting with the climb. */
@keyframes ym-art-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-4deg); }
  75% { transform: translateY(3px) rotate(4deg); }
}
/* Wing beats: four quick flaps, then a glide with the wings held a little up.
   --wing is 1 for the left wing and -1 for the right, so they mirror each other. */
@keyframes ym-art-wing {
  0% { transform: rotate(calc(var(--wing) * 12deg)); }
  9% { transform: rotate(calc(var(--wing) * 36deg)); }
  18% { transform: rotate(calc(var(--wing) * -24deg)); }
  27% { transform: rotate(calc(var(--wing) * 36deg)); }
  36% { transform: rotate(calc(var(--wing) * -24deg)); }
  45% { transform: rotate(calc(var(--wing) * 34deg)); }
  54% { transform: rotate(calc(var(--wing) * -20deg)); }
  68%, 100% { transform: rotate(calc(var(--wing) * 10deg)); }
}
/* The flag cloth: each strip rises and falls by --a, offset in time from its neighbour, so a wave runs from the pole to the free edge. */
@keyframes ym-art-wave {
  0%, 100% { transform: translateY(calc(var(--a) * -1px)); }
  50% { transform: translateY(calc(var(--a) * 1px)); }
}
.ym-art-wave { animation: ym-art-wave 1.3s ease-in-out infinite; }
@keyframes ym-art-flag {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  25% { transform: skewY(-9deg) scaleX(0.86); }
  50% { transform: skewY(0deg) scaleX(1.04); }
  75% { transform: skewY(9deg) scaleX(0.88); }
}
@keyframes ym-art-window {
  0%, 100% { fill: #7fcfa3; }
  50% { fill: #ffe7a3; }
}
@keyframes ym-art-door {
  0%, 38%, 70%, 100% { transform: scaleX(1); }
  46%, 60% { transform: scaleX(0.25); }
}
@keyframes ym-art-smoke {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20% { opacity: 0.55; }
  100% { transform: translate(7px, -17px) scale(1.7); opacity: 0; }
}
.ym-art-glow {
  animation: ym-art-glow 7s ease-in-out infinite;
}
.ym-art-flicker {
  animation: ym-art-flicker 4.6s ease-in-out infinite;
}
.ym-art-sway {
  animation: ym-art-sway 16s ease-in-out infinite;
}
.ym-art-shaft {
  animation: ym-art-shaft 10s ease-in-out infinite;
}
.ym-art-cross {
  animation: ym-art-cross 15s linear infinite;
}
.ym-art-bob {
  animation: ym-art-bob 3s ease-in-out infinite;
}
.ym-art-wing {
  animation: ym-art-wing 1.5s ease-in-out infinite;
}
.ym-art-flag {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: ym-art-flag 1.6s ease-in-out infinite;
}
.ym-art-window {
  animation: ym-art-window 3.4s ease-in-out infinite;
}
.ym-art-door {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: ym-art-door 7s ease-in-out infinite;
}
.ym-art-smoke {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: ym-art-smoke 4.2s ease-out infinite;
}

/* Still artwork for anyone who has asked their device for less motion. The birds and smoke are drawn at rest, so they are simply hidden. */
@media (prefers-reduced-motion: reduce) {
    .ym-art-glow, .ym-art-flicker, .ym-art-sway, .ym-art-shaft, .ym-art-cross, .ym-art-bob, .ym-art-wing, .ym-art-flag, .ym-art-wave, .ym-art-window, .ym-art-door, .ym-art-smoke { animation: none !important; }
    .ym-art-shaft { opacity: 0.6; }
    .ym-art-cross { opacity: 0.6; }
}

/* The old violet/blue theme colours become the green theme on phones and tablets, everywhere: ticks, radios, links, active states,
   headings and body text all read these variables. (html:root beats the :root block written into every page's head.) */
@media (max-width: 991.98px) {
    html:root { --primary-color: #14803f; --gradient_1: #14803f; --gradient_2: #14803f; --gradient_3: #2aa65c; }
    html:root:not([data-theme="dark"]) { --base_color: #10281c; --text-color: #5f7268; }
    html:root[data-theme="dark"] { --primary-color: #2aa65c; --gradient_1: #2aa65c; --gradient_2: #2aa65c; --gradient_3: #5fd68c; }
}
@media (max-width: 991.98px) {
    #main-content code { color: var(--ym-green-fg, #14803f); }
}

/* Night artwork (hero_art.blade.php), at every width: by day the sun, birds and clouds; in dark mode a crescent moon and twinkling stars instead */
.ym-art-moon, .ym-art-stars { display: none; }
html[data-theme="dark"] .ym-art-moon, html[data-theme="dark"] .ym-art-stars { display: inline; }
html[data-theme="dark"] .ym-art-sun, html[data-theme="dark"] .ym-hero__sky .ym-art-cross { display: none; }
html[data-theme="dark"] .ym-art-clouds { opacity: .07; }
@keyframes ym-art-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.ym-art-star { animation: ym-art-twinkle 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ym-art-star { animation: none; opacity: .8; } }