/*
 PMB OPAC - mukr-modern.css
 Minimal invasive modern theme for OPAC. Drop-in CSS that overrides legacy UI.
 Author: ChatGPT for MUKR
*/

/* 1. CSS variables - easy theming */
:root{
  --bg:#f7f7f8;
  --panel:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#0ea5e9; /* cyan-500 */
  --primary-600:#0284c7;
  --primary-50:#e0f2fe;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.08);
  --focus:0 0 0 3px rgba(14,165,233,.18);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14;
    --panel:#0f1720;
    --text:#e5e7eb;
    --muted:#9aa3af;
    --border:#1f2937;
    --primary:#38bdf8;
    --primary-600:#0ea5e9;
    --primary-50:#172036;
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-lg:0 10px 30px rgba(0,0,0,.55);
  }
}

/* 2. Base reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,Roboto,"Open Sans",Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* 3. Layout container helpers */
.opac_container,#container,.container{max-width:1200px;margin:0 auto;padding:16px}

/* 4. Hide legacy banners and noisy bars */
#bandeau,.bandeau,.header_images,.accueil_bandeau,.vignette,table[width="100%"] .vignette,.toplinks,.barre,.service_links{display:none!important}

/* 5. Clean header bar */
.header-modern{background:var(--primary);color:#fff;padding:28px 16px;margin:0 0 12px;border-radius:10px}
.header-modern .brand{display:flex;align-items:center;gap:12px;max-width:1200px;margin:0 auto}
.header-modern .brand .title{font-size:22px;font-weight:800;letter-spacing:.2px}
.header-modern .brand .subtitle{opacity:.95;font-weight:400;font-size:14px}

/* 6. Search area - single row */
.search-wrap{max-width:860px;margin:20px auto 8px;display:flex;gap:8px}
.search-wrap input[type="text"],
.search-wrap input[type="search"],
form[name="search_simple"] input[type="text"],
form[name="search_simple"] input[type="search"]{
  flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);outline:none;color:var(--text)
}
.search-wrap input[type="text"]:focus,
.search-wrap input[type="search"]:focus{border-color:var(--primary);box-shadow:var(--focus)}
.search-wrap .btn,
.search-wrap input[type="submit"],
input[type="submit"][value],
input[type="button"][value="OK"],
button.btn-primary{
  padding:12px 16px;border-radius:12px;border:0;cursor:pointer;background:var(--primary);color:#fff;font-weight:700
}
.search-wrap .btn:hover,button.btn-primary:hover{background:var(--primary-600)}
.search-helpers{text-align:center;font-size:14px;color:var(--muted);margin-bottom:8px}

/* 7. Grid and cards */
.grid{display:grid;gap:12px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14px}

/* 8. Login panel */
.login-panel, #login, form[action*="empr_login"]{max-width:380px;margin-left:auto}
.login-panel .title{font-weight:800;margin-bottom:8px}
.login-panel input[type="text"],.login-panel input[type="password"]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;background:var(--panel);color:var(--text)}
.login-panel .actions{display:flex;gap:8px;align-items:center}
.login-panel .muted{font-size:13px;color:var(--muted)}

/* 9. Buttons generic */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);background:var(--panel);border-radius:10px;color:var(--text);font-weight:600}
.btn:hover{box-shadow:var(--shadow)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}

/* 10. Tables - results lists */
.table,table.result,.liste_expl,table.list{
  width:100%;border-collapse:separate;border-spacing:0 8px
}
.table tr,table.result tr,.liste_expl tr,table.list tr{background:var(--panel);border:1px solid var(--border)}
.table td,.table th,table.result td,table.result th,.liste_expl td,.liste_expl th{padding:12px 14px;vertical-align:top}
.table tr:hover,table.result tr:hover,.liste_expl tr:hover{box-shadow:var(--shadow-lg)}
.table th,table.result th{color:var(--muted);font-weight:700;background:transparent;border-bottom:0}

/* 11. Record sheet - details view */
.notice, .record, .record-container{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.notice h1, .record h1{margin-top:0;font-size:22px}
.notice .meta, .record .meta{color:var(--muted);font-size:14px}
.notice .badges .badge, .badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--primary-50);color:var(--primary);font-size:12px;font-weight:700}

/* 12. Facets and left column */
.facets,.leftcol,.search_criteria{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.facets h3{margin:0 0 8px;font-size:15px}
.facets ul{list-style:none;margin:0;padding:0}
.facets li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border)}
.facets li:last-child{border-bottom:0}

/* 13. Tabs */
.tabs, .onglets{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:8px 0}
.tabs a, .onglets a{padding:10px 12px;border:1px solid var(--border);border-bottom:0;background:var(--panel);border-top-left-radius:10px;border-top-right-radius:10px;color:var(--text)}
.tabs a.active,.onglets a.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* 14. Forms */
input[type="text"],input[type="password"],input[type="search"],select,textarea{
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text)
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--focus);border-color:var(--primary)}
label{font-weight:600;color:var(--muted)}

/* 15. Alerts */
.alert{padding:12px 14px;border-radius:10px;margin:8px 0}
.alert-info{background:var(--primary-50);color:var(--primary)}
.alert-success{background:rgba(16,185,129,.12);color:var(--success)}
.alert-warning{background:rgba(245,158,11,.12);color:var(--warning)}
.alert-danger{background:rgba(239,68,68,.12);color:var(--danger)}

/* 16. Pagination */
.pagination,.pagin{display:flex;gap:6px;justify-content:center;margin:10px 0}
.pagination a,.pagin a{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel);font-size:14px}
.pagination .active,.pagin .active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 17. Footer */
.footer-modern{margin:24px auto 16px;max-width:1200px;color:var(--muted);font-size:13px;text-align:center}

/* 18. Utility helpers */
.mt-0{margin-top:0}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.text-center{text-align:center}

/* 19. Mobile tweaks */
@media(max-width:768px){
  .opac_container,#container,.container{padding:12px}
  .search-wrap{margin-top:12px}
}

/* 20. Optional compact mode class */
.compact .card,.compact .notice,.compact .record{padding:12px;border-radius:10px}
.compact .search-wrap input{padding:10px 12px}