/* =========================================================
   mercweb-theme.css
   Shared site-wide UI theme for mercweb (MERC Ombudsman Portal)
   Look & feel aligned with the MPERC e-Filing Java application
   (teal identity, panel headers, clean cards)

   IMPORTANT: This file is purely cosmetic. It does not touch
   any PHP logic, form actions, session handling, or SQL.
   Link it once per page:
       <link rel="stylesheet" href="mercweb-theme.css">
   ========================================================= */

:root{
    --f2-teal-dark:#0a5c52;
    --f2-teal:#128276;
    --f2-teal-light:#2a9c8e;
    --f2-teal-bg:#e7f5f2;
    --f2-teal-border:#bfe0da;
    --f2-text:#20342f;
    --f2-border:#dbe6e4;
    --f2-row-alt:#f4f9f8;
    --f2-row-hover:#e6f3f0;
}

/* ---------- Page / layout wrapper ---------- */
.f2-page-wrap{
    max-width:1200px;
    margin:0 auto;
}

/* ---------- Panels / cards (forms, login boxes, side menus) ---------- */
.f2-card{
    background:#ffffff;
    border:1px solid var(--f2-border);
    border-radius:10px;
    box-shadow:0 2px 10px rgba(10,60,55,0.08);
    margin-bottom:24px;
    overflow:hidden;
}
.f2-panel-header{
    background:linear-gradient(180deg, var(--f2-teal), var(--f2-teal-dark));
    color:#ffffff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    text-align:center;
    padding:12px 20px;
}
.f2-panel-body{
    padding:22px 24px 18px;
}

/* ---------- Top masthead bar (optional, matches MPERC teal strip) ---------- */
.f2-topbar{
    background:linear-gradient(180deg, var(--f2-teal), var(--f2-teal-dark));
    color:#fff;
    text-align:center;
    font-weight:700;
    padding:10px 16px;
    letter-spacing:.3px;
}

/* ---------- Side navigation links (like MPERC "OTHER LINKS") ---------- */
.f2-side-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.f2-side-links a{
    display:block;
    text-align:center;
    background:#eef2f1;
    border:1px solid var(--f2-border);
    border-radius:6px;
    padding:10px 14px;
    color:var(--f2-teal-dark);
    font-weight:600;
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease;
}
.f2-side-links a:hover{
    background:var(--f2-teal-bg);
    border-color:var(--f2-teal-border);
}

/* ---------- Form fields ---------- */
.f2-field{
    display:flex;
    flex-direction:column;
    min-width:220px;
    flex:1 1 220px;
}
.f2-field label{
    font-size:13px;
    font-weight:700;
    color:var(--f2-teal-dark);
    margin-bottom:6px;
    letter-spacing:.2px;
}
.f2-select,
.f2-input{
    width:100%;
    padding:9px 12px;
    border:1px solid #cfd8e3;
    border-radius:6px;
    background:#f8fafc;
    font-size:14px;
    color:var(--f2-text);
    transition:border-color .15s ease, box-shadow .15s ease;
}
.f2-select:focus,
.f2-input:focus{
    outline:none;
    border-color:var(--f2-teal);
    box-shadow:0 0 0 3px rgba(14,110,98,0.18);
    background:#fff;
}
.f2-filter-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:20px;
}
.f2-actions{
    display:flex;
    gap:10px;
    flex:0 0 auto;
}

/* ---------- Buttons ---------- */
.f2-btn{
    padding:9px 22px;
    border:none;
    border-radius:6px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.3px;
    cursor:pointer;
    transition:transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.f2-btn-primary{
    background:linear-gradient(180deg, var(--f2-teal), var(--f2-teal-dark));
    color:#fff;
    box-shadow:0 2px 6px rgba(10,92,82,0.35);
}
.f2-btn-primary:hover{
    background:linear-gradient(180deg,#0e6e62,#084a42);
    box-shadow:0 4px 10px rgba(10,92,82,0.45);
}
.f2-btn-secondary{
    background:linear-gradient(180deg, var(--f2-teal-light), var(--f2-teal));
    color:#fff;
    box-shadow:0 2px 6px rgba(28,132,120,0.3);
}
.f2-btn-secondary:hover{
    background:linear-gradient(180deg,#238a7d,#166b61);
    box-shadow:0 4px 10px rgba(28,132,120,0.4);
}

/* ---------- Tables (orders, listings, case tracking) ---------- */
.f2-table-wrapper{
    overflow-x:auto;
    border-radius:10px;
    border:1px solid var(--f2-border);
    box-shadow:0 2px 10px rgba(10,60,55,0.08);
}
table.f2-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    font-size:13.5px;
}
table.f2-table thead th{
    background:linear-gradient(180deg, var(--f2-teal), var(--f2-teal-dark)) !important;
    color:#ffffff !important;
    font-weight:700;
    text-align:left;
    padding:12px 14px;
    border:none;
    white-space:nowrap;
    position:sticky;
    top:0;
}
table.f2-table tbody td{
    padding:11px 14px;
    border-bottom:1px solid #e3ece9;
    border-right:1px solid #e3ece9;
    vertical-align:top;   /* prevents wrapped text from misaligning rows */
    color:var(--f2-text);
    line-height:1.4;
}
table.f2-table tbody td:last-child{
    border-right:none;
}
table.f2-table tbody tr:nth-child(even){
    background-color:var(--f2-row-alt);
}
table.f2-table tbody tr:hover{
    background-color:var(--f2-row-hover);
}

/* ---------- Badges (status / cause-of-grievance tags) ---------- */
.f2-badge{
    display:inline-block;
    background:var(--f2-teal-bg);
    color:var(--f2-teal-dark);
    border:1px solid var(--f2-teal-border);
    padding:3px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}
.f2-repno{
    font-weight:700;
    color:var(--f2-teal-dark);
}

/* ---------- Download / icon buttons ---------- */
.f2-download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:8px;
    background:#fff0f0;
    border:1px solid #ffd6d6;
    transition:background .15s ease;
}
.f2-download-btn:hover{
    background:#ffe2e2;
}
.f2-download-btn img{
    width:20px;
    height:20px;
}

/* ---------- Footer strip (optional, matches MPERC's black bottom bar) ---------- */
.f2-footer{
    background:#111111;
    color:#eaeaea;
    text-align:center;
    font-size:12.5px;
    padding:10px 16px;
}
.f2-footer a{
    color:#ffffff;
    font-weight:600;
}

/* ---------- Fixed navbar spacing fix ----------
   menu.php uses navbar-fixed-top (position:fixed), which floats
   over page content unless the body has matching top padding.
   Without this, the first heading/content can render underneath
   the nav bar and look like overlapping/duplicated text. */
body{
    padding-top:60px;
}
@media (max-width: 767px){
    body{ padding-top:0; } /* collapsed mobile navbar is not fixed-height */
}

/* =========================================================
   Bootstrap compatibility overrides
   These retheme the EXISTING navbar-default / footer markup
   in menu.php and footer.php WITHOUT changing their HTML.
   ========================================================= */
.navbar-default{
    background:linear-gradient(180deg, var(--f2-teal), var(--f2-teal-dark)) !important;
    border-color:var(--f2-teal-dark) !important;
    border-radius:0 !important;
}
.navbar-default .navbar-nav > li > a{
    color:#f2fbf9 !important;
    font-weight:600;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a{
    color:#ffffff !important;
    background:rgba(255,255,255,0.12) !important;
}
.navbar-default .navbar-toggle{
    border-color:rgba(255,255,255,0.4);
}
.navbar-default .navbar-toggle .icon-bar{
    background-color:#ffffff;
}
.navbar-default .navbar-brand{
    color:#ffffff !important;
    font-weight:700;
}

footer.footer{
    background:#0e1f1c;
    border-top:3px solid var(--f2-teal);
    padding:14px 0;
}
footer.footer p.text-muted{
    color:#dfeeec !important;
    margin:0;
    font-size:12.5px;
}
footer.footer a{
    color:#ffffff !important;
    font-weight:600;
    text-decoration:underline;
}

/* Generic buttons already in the codebase (btn-success / btn-light-azure etc.)
   nudged toward the teal identity where pages haven't been converted to f2-btn yet */
.btn-success{
    background:linear-gradient(180deg, var(--f2-teal), var(--f2-teal-dark)) !important;
    border-color:var(--f2-teal-dark) !important;
}
.btn-success:hover{
    background:linear-gradient(180deg,#0e6e62,#084a42) !important;
}

/* ---------- Homepage quick-action cards ---------- */
.f2-page-wrap a .f2-card{
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.f2-page-wrap a:hover .f2-card{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(10,60,55,0.15);
    border-color:var(--f2-teal);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
    .f2-filter-row{flex-direction:column; align-items:stretch;}
    .f2-actions{justify-content:flex-start;}
}