/* ===========================================================================
   The admin banner: the same bar as the student area (the home page's green,
   the gold rule under it, the name in bold, an outlined Sign out), with the
   Administration / Instructor Section / Student Section switch beside the name.
   Drawn by inc/menu_top_admin.htm.

   After any change to this file, bump ?v= where it is linked (the Laravel
   layout layouts/legacy-admin-head.blade.php; inc/menu_top_admin.htm on prod):
   Cloudflare keeps a copy of each address for hours. Plain ASCII: the admin
   pages are sent as ISO-8859-1.
   =========================================================================== */

/* The bar runs edge to edge: no page margin around it (the office login page
   has no <body> of its own to say so, as the legacy pages' leftMargin=0 did). */
body { margin: 0; }
.ez-banner, .ez-banner * { box-sizing: border-box; }
.ez-banner {
    background: #0b9569;
    border-bottom: 5px solid #d7a50b;
    color: #fff;
    font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
    text-align: left;
}
/* Three columns: the name on the left, the three sections in the middle, Sign
   out on the right. The outer two share the space equally, so the middle stays
   centred even when there is no Sign out (the login page). */
.ez-banner-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 22px;
    width: min(1180px, calc(100% - 40px));
    min-height: 86px;   /* the student bar measures 86px plus its 5px rule */
    margin: 0 auto;
    padding: 11px 0;
}

/* The school's name, exactly as the student bar shows it: 14px bold Arial. */
.ez-banner .ez-banner-brand {
    flex: none;
    font: 600 14px/1.2 Arial, Helvetica, sans-serif;
}
/* The colour goes on its own rule: style_admin.css colours every a:link, and
   only a selector with :link of its own outweighs that. Keeping the size off
   it lets the narrow-screen sizes below win with a plain class. */
.ez-banner a.ez-banner-brand:link,
.ez-banner a.ez-banner-brand:visited,
.ez-banner a.ez-banner-brand:hover { color: #fff; text-decoration: none; }

/* Which part of the system this is, and the way to the other two. */
.ez-banner-sections { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ez-banner .ez-banner-brand { grid-column: 1; justify-self: start; }
.ez-banner .ez-banner-signout { grid-column: 3; justify-self: end; }
.ez-banner-sections a,
.ez-banner-sections a:link,
.ez-banner-sections a:visited,
.ez-banner-sections span {
    padding: 6px 12px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .86);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.ez-banner-sections a:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.ez-banner-sections .is-current { background: #fff; color: #07794f; }

/* Sign out, at the far right, the same as in the student area. */
.ez-banner a.ez-banner-signout,
.ez-banner a.ez-banner-signout:link,
.ez-banner a.ez-banner-signout:visited {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    color: #fff;
    font: 400 13.5px/1 Arial, Helvetica, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.ez-banner a.ez-banner-signout:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.ez-banner a.ez-banner-signout:focus-visible,
.ez-banner-sections a:focus-visible,
.ez-banner a.ez-banner-brand:focus-visible { outline: 2px solid #e6ad00; outline-offset: 2px; }

@media (max-width: 900px) {
    .ez-banner-bar { width: calc(100% - 28px); }

}
/* Below 768px the admin menu becomes a 42px button fixed in the top left
   corner (menu_top_admin/nav.css), so the bar starts after it. */
@media (max-width: 767px) {
    .ez-banner-bar { display: flex; flex-wrap: wrap; width: auto; margin: 0 14px 0 62px; }
    .ez-banner .ez-banner-brand { flex: 1 1 auto; }
    .ez-banner-sections { order: 3; flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 600px) {
    /* Name and Sign out share the first line; the three sections go under. */
    .ez-banner-bar { gap: 10px; }
    .ez-banner-bar { min-height: 0; }
    .ez-banner .ez-banner-brand { flex: 1 1 0; min-width: 0; }
    .ez-banner a.ez-banner-signout:link,
    .ez-banner a.ez-banner-signout:visited { height: 32px; padding: 0 10px; font-size: 12.5px; }
    .ez-banner-sections a, .ez-banner-sections span { padding: 5px 10px; font-size: 12.5px; }
}

/* Each section has a long and a short name; the short one is for phones. */
.ez-banner-sections em { font-style: normal; }
.ez-banner-sections .ez-short { display: none; }

/* Phones: the three sections are one switch across the bar, three equal parts,
   instead of pills that wrap onto a second line. */
@media (max-width: 767px) {
    .ez-banner-sections {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        padding: 3px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .16);
    }
    .ez-banner-sections a,
    .ez-banner-sections a:link,
    .ez-banner-sections a:visited,
    .ez-banner-sections span {
        overflow: hidden;
        padding: 7px 6px;
        text-align: center;
        text-overflow: ellipsis;
    }
}
@media (max-width: 520px) {
    .ez-banner-sections .ez-long { display: none; }
    .ez-banner-sections .ez-short { display: inline; }
}

/* Page tabs: the banner's links are the pages used most (the office's
   Students, Calendar, Requests and Messages; the instructor's Today,
   Calendar and Payroll), each with an icon, and a count where one waits.
   They replace the section switch for a signed-in office or instructor. */
.ez-banner-sections.is-tabs a,
.ez-banner-sections.is-tabs span { position: relative; }
.ez-banner-sections.is-tabs i { margin-right: 6px; }
.ez-banner-sections.is-tabs .nav-count,
.ez-banner-sections.is-tabs .sms-nav-badge { margin-left: 5px; }
@media (max-width: 767px) {
    .ez-banner-sections.is-tabs { grid-template-columns: repeat(var(--ez-tabs, 3), minmax(0, 1fr)); }
}
/* The tabs are for phones only: on a wider screen the menu bar has the same
   pages. With .is-wide (the office, whose menu button sits beside the name)
   they span the whole banner, out from under the name's 62px indent. */
.ez-banner-sections.is-tabs.is-phone { display: none; }
@media (max-width: 767px) {
    .ez-banner-sections.is-tabs.is-phone { display: grid; }
    .ez-banner-sections.is-tabs.is-wide { flex-basis: calc(100% + 48px); margin-left: -48px; }
}
/* Four tabs on a phone: the icon above a short name, the count on the icon. */
@media (max-width: 520px) {
    .ez-banner-sections.is-tabs.is-stacked { border-radius: 16px; }
    .ez-banner-sections.is-tabs.is-stacked a,
    .ez-banner-sections.is-tabs.is-stacked span {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 2px 5px;
        border-radius: 13px;
        font-size: 11.5px;
    }
    .ez-banner-sections.is-tabs.is-stacked i { margin: 0; font-size: 17px; }
    .ez-banner-sections.is-tabs.is-stacked .nav-count,
    .ez-banner-sections.is-tabs.is-stacked .sms-nav-badge {
        position: absolute;
        top: 2px;
        left: calc(50% + 5px);
        min-width: 16px;
        margin: 0;
        padding: 0 4px;
        font-size: 10px;
        line-height: 15px;
    }
}