/* =========================================================================
 * Partner Portal — mobile-friendly overrides.
 * Plain CSS. Loaded AFTER custom.css via header.jspf -> responsive.css link.
 *
 * Breakpoints (Bootstrap 3.3.6 conventions):
 *   xs  : <  768px  (phones)
 *   sm  : >= 768px  (tablets portrait)
 *   md  : >= 992px  (tablets landscape / small desktop)
 *   lg  : >= 1200px (desktop)
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * Re-base the hidemobile / hidedesktop boundary to 992px (was 1280px in
 * custom.css). 1280 was too aggressive — anything below was treated as mobile.
 * --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .hidedesktop { display: none !important; }
    .hidemobile  { display: block !important; }
    .mdl-layout__drawer-button,
    .pp-menu-toggle,
    .pp-drawer-backdrop { display: none !important; }
}

@media (max-width: 991px) {
    .hidemobile  { display: none !important; }
    .hidedesktop { display: block !important; }
}

/* ---------------------------------------------------------------------------
 * Mobile hamburger button (rendered by header.jspf inside the logged-in guard).
 * Visible only below the md breakpoint.
 * --------------------------------------------------------------------------- */
.pp-menu-toggle {
    display: none;
    position: fixed;
    top: 14px;
    left: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.06);
    color: #444;
    font-size: 22px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    z-index: 1100;
}

.pp-menu-toggle:focus,
.pp-menu-toggle:hover {
    background-color: rgba(0, 0, 0, 0.12);
    outline: 0;
}

@media (max-width: 991px) {
    .pp-menu-toggle { display: block; }
}

/* Backdrop shown when the drawer is open on mobile — tap to close. */
.pp-drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 900;
}

.pp-drawer-backdrop.is-visible {
    display: block;
}

/* MDL's drawer is z-index 4 by default; lift it above our backdrop. */
@media (max-width: 991px) {
    .mdl-layout__drawer.is-visible {
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
    }
}

/* ---------------------------------------------------------------------------
 * Header / login chrome — give the logo room for the hamburger on mobile.
 * --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Pull the header content right so the fixed hamburger doesn't overlap the logo. */
    header.graybg .mdl-layout__header-row { padding-left: 64px; }
    .main-logo { max-width: 180px; }
    .main-logo img { max-height: 48px; width: auto; }
    /* The desktop quicklinks bar is hidden via .hidemobile;
       collapse its wrapper height so we don't get a stray gap. */
    .quicklinks-bg > .mdl-navigation > .text-center.hidemobile { padding: 0; }
}

@media (max-width: 600px) {
    header.graybg .mdl-layout__header-row {
        height: auto !important;
        min-height: 60px;
        padding: 8px 12px 8px 56px;
    }
    .main-logo { max-width: 140px; }
    .loginc { font-size: 12px; line-height: 1.4; }
    .loginc a { display: inline-block; padding: 2px 0; }
    .loginc .letterlimit { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
 * Tables: ensure horizontal scroll at every breakpoint (Bootstrap 3 only
 * activates .table-responsive overflow-x:auto below 768px; on tablets in
 * landscape, wide tables still got cut off).
 * --------------------------------------------------------------------------- */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991px) {
    .table-responsive {
        border: 1px solid #e2e2e2;
        border-radius: 3px;
        margin-bottom: 15px;
    }
    .table-responsive > table {
        margin-bottom: 0;
    }
    /* A subtle visual cue that the table is scrollable. */
    .table-responsive::after {
        content: "";
        display: block;
        height: 2px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.08));
        margin-top: -2px;
    }
}

/* ---------------------------------------------------------------------------
 * Home dashboard tile grid (.iconlist on home.jsp).
 * Default tiles are 140x140 fixed. On phones we want a clean 2-column grid.
 * --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    ul.iconlist {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }
    ul.iconlist li {
        flex: 0 0 calc(50% - 16px);
        width: auto;
        margin: 8px;
        min-height: 120px;
        height: auto;
    }
}

@media (max-width: 400px) {
    ul.iconlist li {
        flex: 0 0 calc(50% - 12px);
        margin: 6px;
        min-height: 110px;
    }
    ul.iconlist li a span { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
 * Forms & buttons: bigger touch targets, full-width inputs on phones.
 * Touch target minimum is 44px (Apple HIG) / 48dp (Material).
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .mdl-textfield {
        width: 100% !important;
        padding-bottom: 16px;
    }
    .mdl-textfield__input {
        font-size: 16px;     /* prevents iOS Safari zoom-on-focus */
    }
    .form-control {
        font-size: 16px;
        min-height: 40px;
    }
    .btn,
    .mdl-button {
        min-height: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Stack the Sign-in / Forgot-password row on login.jsp */
    .loginDetails .pull-left,
    .loginDetails .pull-right {
        float: none !important;
        text-align: center;
        padding: 6px 0;
    }
}

/* ---------------------------------------------------------------------------
 * Bootstrap 3 modals are sane on phones by default, but the alert modal
 * (#partnerPoratlMessageModal) at layout.jsp is full-screen-ish on small
 * devices — add safe-area padding and prevent body scroll-leak.
 * --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .modal-dialog {
        margin: 16px;
    }
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 12px;
    }
}

/* ---------------------------------------------------------------------------
 * Misc helpers carried over from the old responsive.css (the LESS syntax
 * was dead — these are the ones that were actually doing something).
 * --------------------------------------------------------------------------- */
@media (min-width: 320px) and (max-width: 991px) {
    .pdt30   { padding: 0 0 20px; }
    .pdtb50  { padding: 25px 0; }
    .floatnone { float: none !important; margin: 0 auto !important; }
}

@media (max-width: 767px) {
    table caption { border-bottom: 1px solid #ddd; }
    /* Container paddings tighter on phones to recover horizontal space. */
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    .col-xs-12 { padding-left: 8px; padding-right: 8px; }
}

/* ---------------------------------------------------------------------------
 * Quicklinks drawer: make each link a comfortable tap target on mobile.
 * --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .mdl-layout__drawer .mdl-navigation__link {
        padding: 14px 24px;
        font-size: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    .mdl-layout__drawer .mdl-navigation__link:last-child {
        border-bottom: 0;
    }
    .mdl-layout__drawer .mdl-layout-title {
        padding: 18px 24px 14px;
        font-size: 18px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 4px;
    }
}