/* ==========================================================================
   UM Indonesia Perpustakaan Portal - Modern redesign overlay
   Palette: navy #0055B1 / white #FFFFFF / orange #FF8C01
   Loaded last on purpose so it wins the cascade over the legacy stylesheets.
   ========================================================================== */

:root{
    --umid-navy: #0055B1;
    --umid-navy-dark: #003d80;
    --umid-orange: #FF8C01;
    --umid-bg: #f2f5f9;
    --umid-card: #ffffff;
    --umid-text: #1c2733;
    --umid-radius: 16px;
}

html, body{
    max-width: 100%;
    overflow-x: hidden; /* the markup nests <div class="container"> inside another
        .container (top-level wrapper + nav#main-nav's own .container), which makes
        Bootstrap 3's fixed-width breakpoints (e.g. 750px at the 768px boundary) add up
        to a few px more than the viewport right at that exact width (seen on real
        768px-wide tablets). This keeps that from ever producing a page-wide horizontal
        scrollbar without changing how anything looks. */
}
body{
    background: var(--umid-bg) !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    color: var(--umid-text);
}

h1,h2,h3,h4,h5,.panel-title{
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif !important;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#e6ebf1; }
::-webkit-scrollbar-thumb{ background:var(--umid-navy); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--umid-orange); }

a{ color: var(--umid-navy); }

/* ---- slim top brand strip (was solid green .system bar) ---- */
.system{
    background: linear-gradient(90deg, var(--umid-navy) 0%, var(--umid-navy-dark) 60%, var(--umid-orange) 100%) !important;
    height: 6px !important;
    min-width: 0 !important;
}

/* ---- hero (logo + welcome + subtitle) ---- */
.umid-hero{
    background: linear-gradient(135deg, var(--umid-navy) 0%, #0068d6 55%, var(--umid-navy-dark) 100%);
    padding: 40px 20px 46px;
    text-align: center;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 10px 30px rgba(0,85,177,.25);
    position: relative;
    overflow: hidden;
}
.umid-hero::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(circle at 15% 20%, rgba(255,140,1,.25) 0%, transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(255,255,255,.12) 0%, transparent 40%);
    pointer-events:none;
}
.umid-hero img{
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.umid-hero .welcome{
    position: relative;
    z-index: 1;
    margin-top: 18px !important;
    font-size: 28pt !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.umid-hero-subtitle{
    position: relative;
    z-index: 1;
    color: #ffd9ad !important;
    font-weight: 600;
    font-size: 15pt;
    margin: 6px 0 0 !important;
    letter-spacing: .3px;
}

/* ---- announcement ticker (top ".flex bg-gray-200" bar) ---- */
.panel-heading .flex{
    background: var(--umid-navy) !important;
    border-radius: 10px;
    overflow: hidden;
    margin: 6px 0;
}
.panel-heading .flex .bg-secondary{
    background: var(--umid-orange) !important;
}
.panel-heading .flex marquee{
    color: #fff !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 0;
}

/* ---- panels / sections ---- */
.panel.panel-primary{
    background: var(--umid-card) !important;
    border: none !important;
    border-radius: var(--umid-radius) !important;
    box-shadow: 0 4px 22px rgba(15,40,80,.07) !important;
    margin: 0 auto 28px !important;
    max-width: 1300px;
    overflow: hidden;
}
.panel.panel-primary .panel-heading{
    background: var(--umid-navy) !important;
    border: none !important;
    border-bottom: 4px solid var(--umid-orange) !important;
    padding: 16px 22px !important;
}
.panel.panel-primary .panel-heading .panel-title,
.panel.panel-primary .panel-heading h2,
.panel.panel-primary .panel-heading h3{
    color: #fff !important;
    font-weight: 700 !important;
    margin: 0;
    letter-spacing: .2px;
}
.panel.panel-primary .panel-body{
    padding: 22px !important;
}

/* ---- icon cards (used across every section: buku, jurnal, ebooks, MoU, etc.) ---- */
.icon{
    float: left;
    padding: 0 !important;
    margin: 10px;
    width: 168px;
    background: var(--umid-card);
    border: 1px solid #e9edf3;
    border-top: 3px solid var(--umid-orange);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(15,40,80,.06);
    text-align: center;
    padding: 18px 12px !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.icon:hover{
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0,85,177,.18);
    border-color: var(--umid-navy);
}
.icon img{
    height: 72px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    transition: transform .3s ease !important;
}
.icon:hover img{
    transform: scale(1.08) !important;
}
.icon a{
    text-decoration: none !important;
    color: var(--umid-text);
    font-size: 12.5px;
    font-weight: 600;
    display: block;
}

/* ---- "menu atas" quick-links table (Fasilitas / Tentang Kami / ...) ---- */
.panel-body table{
    border-collapse: separate;
    border-spacing: 14px;
    margin: 0 auto;
}
.panel-body table td{
    background: var(--umid-card);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(15,40,80,.06);
    border: 1px solid #e9edf3;
    padding: 16px 10px !important;
    transition: transform .25s ease, box-shadow .25s ease;
    vertical-align: top !important;
}
.panel-body table td:hover{
    transform: translateY(-5px);
    box-shadow: 0 14px 26px rgba(0,85,177,.16);
}
.panel-body table td a{
    text-decoration: none !important;
    color: var(--umid-text) !important;
    font-size: 12.5px;
    font-weight: 700;
}
.panel-body table td img{
    background: linear-gradient(145deg, #eaf2ff, #dceaff);
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 8px;
}

/* ---- popup modals ---- */
.window{
    border-radius: 18px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.35) !important;
    border-top: 6px solid var(--umid-orange) !important;
}
.window h2,
.window h4{
    color: var(--umid-navy) !important;
}
.window a{
    color: var(--umid-navy);
    font-weight: 600;
}
.window hr{
    border-color: var(--umid-orange) !important;
    opacity: .5;
}

/* ---- footer ---- */
.footer{
    background: linear-gradient(120deg, var(--umid-navy-dark), var(--umid-navy)) !important;
    color: #fff !important;
    border-radius: 24px 24px 0 0;
    padding: 26px 16px 20px !important;
    margin-top: 40px !important;
}
.footer strong{ color: #fff !important; }
.footer marquee{ color: #ffd9ad !important; font-weight:600; }
.socmed img{
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    padding: 8px;
    width: 26px !important;
    height: 26px !important;
    transition: background .25s ease, transform .25s ease;
}
.socmed img:hover{
    background: var(--umid-orange);
    transform: translateY(-3px);
}

/* ---- responsive ---- */
@media (max-width: 768px){
    .umid-hero .welcome{ font-size: 20pt !important; }
    .icon{ width: 130px; }
    .panel.panel-primary .panel-body{ padding: 14px !important; }
}

/* ---- "menu atas" quick-links table (Fasilitas / Tentang Kami / ...) ----
   The <td> cells in index.php carry fixed HTML width="100/170/180/190"
   attributes with no responsive fallback. On phone/tablet widths those
   add up to well over 1000px and force horizontal page overflow, since
   a plain <table> (unlike the .icon cards above, which float and wrap)
   never reflows its cells on its own. Reflow it into a stacked grid
   below tablet width and override the legacy width= attributes, which
   otherwise win over unqualified CSS because HTML attributes and CSS
   width apply to the same box but the attribute is what originally
   shipped, so !important is used here to guarantee the override. */
.panel-body{
    overflow-x: hidden; /* safety net: no fixed-width leftover can push the page sideways */
}
@media (max-width: 900px){
    .panel-body table,
    .panel-body table tbody,
    .panel-body table tr{
        display: block !important;
        width: 100% !important;
    }
    .panel-body table td{
        display: inline-block !important;
        width: 30% !important;
        margin: 6px 1.5% !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
    }
}
@media (max-width: 600px){
    .panel-body table td{
        width: 44% !important;
    }
}
@media (max-width: 420px){
    .panel-body table td{
        width: 100% !important;
        margin: 6px 0 !important;
    }
}