/* ==========================================================================
   PakCat — Modern theme overlay (colors, type, cards, buttons)
   Pure restyle: no markup/JS changes. Loaded LAST so it wins.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root{
  --pc-green:#2e7d32; --pc-green-l:#43a047; --pc-green-d:#1b5e20;
  --pc-blue:#2c4a9a;  --pc-blue-l:#3a5bc7;  --pc-blue-d:#1c3070;
  --pc-bg:#f4f6fb; --pc-card:#ffffff; --pc-ink:#1f2733; --pc-muted:#8a94a6;
  --pc-radius:14px; --pc-shadow:0 6px 24px rgba(20,30,60,.08);
  --pc-shadow-lg:0 12px 34px rgba(20,30,60,.12);
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
  color:var(--pc-ink); background:var(--pc-bg) !important;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.navbar-brand{ font-family:'Poppins','Inter',sans-serif !important; letter-spacing:-.01em; }

/* ---- Hero heading (Welcome to PakCat) ---- */
h1{ font-weight:800 !important; }

/* ---- Search category tabs: COLOUR ONLY (keep the page's original layout) ---- */
.filterButtons.active, .tablink.active, .filterButtons.opt.active{
  background:linear-gradient(135deg,var(--pc-green),var(--pc-green-l)) !important;
  color:#fff !important;
}

/* ---- Search bar ---- */
.btn-search{
  background:linear-gradient(135deg,var(--pc-blue),var(--pc-blue-l)) !important;
  border:none !important; color:#fff !important; font-weight:700 !important;
  letter-spacing:.6px !important; transition:filter .15s ease !important;
}
.btn-search:hover{ filter:brightness(1.08); }

/* ---- Generic buttons ---- */
.btn{ border-radius:10px !important; font-weight:600 !important; }
.btn-primary, .button_clr.signin, .signin{
  background:var(--pc-blue) !important; border-color:var(--pc-blue) !important; color:#fff !important;
}
.btn-primary:hover, .signin:hover{ background:var(--pc-blue-d) !important; }
.btn-success{ background:var(--pc-green) !important; border-color:var(--pc-green) !important; }
.btn-success:hover{ background:var(--pc-green-d) !important; }
.btn-danger{ border-radius:10px !important; }
.button_clr.cancel, .cancel{ background:#eef1f8 !important; color:var(--pc-blue-d) !important; border:none !important; }

/* ---- Inputs ---- */
.form-control{ border-radius:10px !important; border:1px solid #e3e8f0 !important; box-shadow:none !important; }
.form-control:focus{ border-color:var(--pc-blue-l) !important; box-shadow:0 0 0 3px rgba(58,91,199,.15) !important; }

/* ---- Cards / panels ---- */
.stat-card, .panel-box, .login-wrap{ border-radius:var(--pc-radius) !important; box-shadow:var(--pc-shadow) !important; border:none !important; }
.stat-card{ transition:transform .15s ease, box-shadow .15s ease; }
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--pc-shadow-lg) !important; }

/* ---- Tables ---- */
.table{ border-radius:12px; overflow:hidden; }
.table thead th, .table-clean thead th{ background:#f7f9fc !important; color:var(--pc-muted) !important;
  text-transform:uppercase; font-size:12px; letter-spacing:.4px; border-bottom:2px solid #eef1f7 !important; }
.table-striped>tbody>tr:nth-of-type(odd){ background:#f8fafd !important; }
.table-hover>tbody>tr:hover{ background:#eef4ff !important; }

/* ---- Alerts ---- */
.alert{ border:none !important; border-radius:12px !important; box-shadow:var(--pc-shadow) !important; }
.alert-success{ background:#e8f5e9 !important; color:#1b5e20 !important; }
.alert-danger{ background:#fdecea !important; color:#b71c1c !important; }

/* ---- Admin navigation ---- */
.pc-admin-nav{
  position:relative;
  z-index:20;
  background:#fff;
  border-bottom:1px solid #e4e9f1;
  box-shadow:0 4px 18px rgba(20,30,60,.06);
}
.pc-admin-nav__inner{
  width:min(1600px, 100%);
  min-height:78px;
  margin:0 auto;
  padding:10px 28px;
  display:flex;
  align-items:center;
  gap:24px;
}
.pc-admin-brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:182px;
  color:var(--pc-blue-d) !important;
  text-decoration:none !important;
}
.pc-admin-brand img{ display:block; width:auto; height:48px; object-fit:contain; }
.pc-admin-brand span{
  padding-left:11px;
  border-left:1px solid #dfe5ee;
  color:#6d7890;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
}
.pc-admin-links{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.pc-admin-links a,
.pc-admin-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:9px 10px;
  border-radius:8px;
  color:#506078 !important;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none !important;
  white-space:nowrap;
  transition:color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pc-admin-links a:hover,
.pc-admin-action:hover{
  color:var(--pc-blue) !important;
  background:#f1f4fa;
}
.pc-admin-links a.is-active{
  color:#fff !important;
  background:var(--pc-blue);
  box-shadow:0 4px 10px rgba(44,74,154,.2);
}
.pc-admin-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
  padding-left:12px;
  border-left:1px solid #e4e9f1;
}
.pc-admin-action{ color:var(--pc-blue) !important; }
.pc-admin-action--logout{ color:#a14c4c !important; }
.pc-admin-action--logout:hover{ color:#8e3030 !important; background:#fff1f1; }
.pc-admin-rule{ height:4px; background:var(--pc-blue); }

@media (max-width:1180px){
  .pc-admin-nav__inner{ gap:14px; padding:10px 18px; }
  .pc-admin-brand{ min-width:160px; }
  .pc-admin-brand span{ display:none; }
  .pc-admin-links a{ padding-left:8px; padding-right:8px; font-size:12px; }
  .pc-admin-action{ padding-left:8px; padding-right:8px; font-size:12px; }
}
@media (max-width:860px){
  .pc-admin-nav__inner{ flex-wrap:wrap; padding:10px 16px 8px; }
  .pc-admin-brand{ min-width:0; }
  .pc-admin-actions{ margin-left:auto; border-left:0; padding-left:0; }
  .pc-admin-links{
    order:3;
    flex-basis:100%;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .pc-admin-links::-webkit-scrollbar{ display:none; }
  .pc-admin-links a{ flex:0 0 auto; }
}
@media (max-width:480px){
  .pc-admin-nav__inner{ padding-left:12px; padding-right:12px; }
  .pc-admin-brand img{ height:42px; }
  .pc-admin-action{ min-height:34px; padding:7px; font-size:0; }
  .pc-admin-action i{ font-size:15px; }
}

/* ---- Search results province sidebar links ---- */
a{ transition:color .12s ease; }

/* ==========================================================================
   Admin layout + action buttons (external; moved out of inline <style>)
   ========================================================================== */
.admin-wrap{ max-width:1150px; margin:24px auto; padding:0 16px; }
.admin-wrap h1{ font-weight:700; margin-bottom:18px; }
.navbar-default .admin-links > li > a{ color:var(--pc-blue); font-weight:600; }
.navbar-default .admin-links > li > a:hover{ color:var(--pc-blue-d); background:#eef1f8; border-radius:8px; }
.navbar-default .admin-links > li.active > a{ color:#fff; background:var(--pc-blue); border-radius:8px; }

/* Action buttons: Edit / Test / Delete */
.pc-actions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.pc-actions form{ display:inline; margin:0; }
.btn-icn{
  display:inline-flex; align-items:center; gap:5px; border:none !important; border-radius:8px !important;
  padding:5px 12px !important; font-size:13px !important; font-weight:600 !important; line-height:1.4;
  cursor:pointer; text-decoration:none !important; transition:all .15s ease !important; box-shadow:none !important;
}
.btn-icn i{ font-size:12px; }
.btn-edit{ background:#eef1f8 !important; color:var(--pc-blue) !important; }
.btn-edit:hover{ background:var(--pc-blue) !important; color:#fff !important; }
.btn-del{ background:#fdecec !important; color:#c0392b !important; }
.btn-del:hover{ background:#c0392b !important; color:#fff !important; }
.btn-test{ background:#e8f5e9 !important; color:var(--pc-green-d) !important; }
.btn-test:hover{ background:var(--pc-green) !important; color:#fff !important; }

/* Inline test-result text */
.test-res{ font-size:12px; font-weight:600; white-space:nowrap; }
.test-ok{ color:var(--pc-green-d); }
.test-fail{ color:#c0392b; }
.test-run{ color:var(--pc-muted); }

/* Status pills in the libraries table */
.pill{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.pill-active{ background:#e8f5e9; color:#1b5e20; }
.pill-off{ background:#eceff3; color:#8a94a6; }
.pill-dead{ background:#fdecec; color:#c0392b; }

/* ==========================================================================
   Fixes: restore stat-card / panel padding, widen content, tidy row actions
   ========================================================================== */
.admin-wrap{ max-width:1360px; padding:0 24px; }
.stat-card{ padding:18px 20px !important; text-align:center; }
.stat-card .num{ font-size:30px; font-weight:700; color:var(--pc-blue); line-height:1.1; }
.stat-card .lbl{ color:var(--pc-muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }
.panel-box{ padding:20px 22px !important; }
.panel-box h3{ margin-top:0; font-weight:700; font-size:18px; }

/* keep the three action buttons on one line, a touch smaller */
.pc-actions{ flex-wrap:nowrap; }
.btn-icn{ padding:4px 10px !important; font-size:12.5px !important; }

/* a little breathing room in admin tables */
.admin-wrap .table > tbody > tr > td,
.admin-wrap .table > thead > tr > th{ vertical-align:middle; padding:10px 12px; }

/* Wider admin content to match the ~98% container width */
.admin-wrap{ width:98%; max-width:1600px; padding:0; }

/* ==========================================================================
   Widen the PUBLIC search pages (home + results) — was capped at 1000px
   ========================================================================== */
.s130 form{ max-width:1150px !important; }
.s130{ padding-left:24px !important; padding-right:24px !important; }
/* content containers on public pages (nav uses container-fluid, so it's untouched) */
.container{ width:96% !important; max-width:1560px !important; }

/* ==========================================================================
   Consistent typography (was inconsistent / oversized)
   ========================================================================== */
body{ font-size:15px; line-height:1.55; }
h1{ font-size:26px !important; }
h2{ font-size:22px !important; }
h3{ font-size:18px !important; }
h4{ font-size:16px !important; }
p, td, th, li, label, input, select, .intro{ font-size:15px; }
.intro{ line-height:1.6 !important; }
/* the "Welcome to PakCat" hero — big but not enormous */
.s130 form > p:first-of-type{ font-size:40px !important; }

/* ==========================================================================
   Result-card buttons (the boxy "+" toggle and Add-to-Cart)
   ========================================================================== */
.result-toggle{
  width:34px; height:34px; border:none; border-radius:8px;
  background:#eef1f8; color:var(--pc-blue); font-size:20px; font-weight:700;
  line-height:1; cursor:pointer; transition:all .15s ease;
}
.result-toggle:hover{ background:var(--pc-blue); color:#fff; }
.btn-a, .btn-default-a, .btn-sm-a{
  background:var(--pc-green) !important; color:#fff !important; border:none !important;
  border-radius:8px !important; padding:6px 14px !important; font-weight:600 !important;
  font-size:13px !important; transition:all .15s ease !important;
}
.btn-a:hover, .btn-default-a:hover{ background:var(--pc-green-d) !important; color:#fff !important; }

/* ==========================================================================
   Redesigned search category bar — VISUAL ONLY (no padding/display/width
   changes, so the percentage-width layout is preserved)
   ========================================================================== */
#options{
  background:#ffffff !important;
  border-radius:16px !important;
  box-shadow:0 6px 20px rgba(20,30,60,.08) !important;
}
.filterButtons, .tablink{
  background:transparent !important;
  color:var(--pc-blue) !important;
  border:none !important;
  border-radius:12px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  transition:background .15s ease, color .15s ease !important;
}
.filterButtons:hover, .tablink:hover{ background:#eef2fb !important; color:var(--pc-blue-d) !important; }
.filterButtons.active, .tablink.active, .filterButtons.opt.active{
  background:linear-gradient(135deg, var(--pc-green), var(--pc-green-l)) !important;
  color:#ffffff !important;
  box-shadow:0 4px 12px rgba(46,125,50,.28) !important;
}
.button_drop, .button_drop.dropdown-toggle{
  background:transparent !important;
  color:var(--pc-blue) !important;
  border:none !important;
  border-radius:12px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
.button_drop:hover{ background:#eef2fb !important; color:var(--pc-blue-d) !important; }

/* ==========================================================================
   Province / Library-type dropdowns (native <select> inside .button_drop)
   — recolor the dark-blue selects to match the clean bar
   ========================================================================== */
#options .button_drop{ padding:4px !important; overflow:visible; }
#provence, #lib_type{
  background:#eef2fb !important;
  color:var(--pc-blue) !important;
  border:none !important;
  border-radius:10px !important;
  height:auto !important;
  min-height:42px;
  width:100% !important;
  font-weight:600 !important;
  font-size:14px !important;
  text-align-last:center !important;
  padding:8px 8px !important;
  cursor:pointer;
  outline:none !important;
}
#provence:hover, #lib_type:hover{ background:#e2e9f6 !important; }
#provence option, #lib_type option{ color:#1f2733 !important; background:#fff !important; font-weight:500; }

/* ==========================================================================
   One-row search bar (home): text box + field/province/type dropdowns + SEARCH
   ========================================================================== */
.pc-searchbar{
  display:flex !important; align-items:stretch; gap:10px; flex-wrap:wrap;
  background:#fff; border-radius:18px; padding:12px;
  box-shadow:0 10px 30px rgba(20,30,60,.10); margin-top:3vh;
}
.pc-searchbar .pc-search-input{
  flex:1 1 300px; display:flex; align-items:center; gap:10px;
  background:#f3f5fb; border-radius:12px; padding:0 16px; min-height:54px;
}
.pc-searchbar .pc-search-input svg{ fill:#8a94a6; flex:0 0 auto; }
.pc-searchbar .pc-search-input input{
  border:none !important; background:transparent !important; outline:none !important; box-shadow:none !important;
  width:100% !important; height:auto !important; font-size:16px !important; margin:0 !important; padding:0 !important;
}
.pc-searchbar .pc-field{
  flex:0 0 auto; min-width:150px; border:none !important; background:#f3f5fb !important;
  color:var(--pc-blue) !important; border-radius:12px !important; padding:0 14px !important;
  min-height:54px !important; height:auto !important; font-weight:600 !important; font-size:14px !important;
  cursor:pointer; outline:none !important; text-align-last:left !important; width:auto !important;
}
.pc-searchbar .pc-field:hover{ background:#e7ecf8 !important; }
.pc-searchbar .pc-field option{ color:#1f2733; background:#fff; font-weight:500; }
.pc-searchbar .pc-search-btn{
  flex:0 0 auto; border:none !important; border-radius:12px !important; min-height:54px !important;
  padding:0 34px !important; font-weight:700 !important; letter-spacing:.6px !important; color:#fff !important;
  background:linear-gradient(135deg,var(--pc-blue),var(--pc-blue-l)) !important; cursor:pointer;
}
.pc-searchbar .pc-search-btn:hover{ filter:brightness(1.08); }

/* ==========================================================================
   FORCE the home search onto ONE row (override earlier width:100% on selects)
   ========================================================================== */
.pc-searchbar{ flex-wrap:nowrap !important; padding:10px !important; align-items:stretch !important; }
.pc-searchbar .pc-search-input{ flex:1 1 auto !important; min-width:150px !important; }
.pc-searchbar .pc-field,
.pc-searchbar #provence,
.pc-searchbar #lib_type{
  flex:0 0 auto !important;
  width:158px !important; min-width:0 !important; max-width:170px !important;
  min-height:54px !important; height:54px !important;
  text-align-last:left !important;
  background:#f3f5fb !important; color:var(--pc-blue) !important;
  border:none !important; border-radius:12px !important; font-weight:600 !important; font-size:14px !important;
  padding:0 12px !important; cursor:pointer; outline:none !important;
}
.pc-searchbar .pc-search-btn{ flex:0 0 auto !important; }

/* on small screens, let it wrap gracefully */
@media (max-width: 920px){
  .pc-searchbar{ flex-wrap:wrap !important; }
  .pc-searchbar .pc-search-input{ flex:1 1 100% !important; }
  .pc-searchbar .pc-field, .pc-searchbar #provence, .pc-searchbar #lib_type{ flex:1 1 30% !important; width:auto !important; max-width:none !important; }
  .pc-searchbar .pc-search-btn{ flex:1 1 100% !important; }
}