/* ============================================================================
 * APSE PN - Bootstrap 5 compatibility shim for the apse-pn (Bootstrap 2) template
 * ----------------------------------------------------------------------------
 * The template ships Bootstrap 2 (span/row-fluid) and defines none of Bootstrap
 * 5's form classes. Joomla 5 core pages (user PROFILE, CONTACT form) output BS5
 * markup, so without this they render unstyled. Scoped to #content so it only
 * touches the component area - never the template header/footer/columns.
 * Login/logout/reset are unaffected (the template has its own overrides).
 * ==========================================================================*/

/* --- Field rows: Joomla wraps fields in control-group/label/controls.
       Force a clean STACKED layout (override BS2's cramped horizontal form). --- */
#content .control-group{margin:0 0 16px;}
#content .control-group:after{content:"";display:table;clear:both;}
#content .control-label{display:block;float:none;width:auto;text-align:left;padding:0;margin:0 0 4px;font-weight:600;}
#content .controls{margin-left:0;}

/* --- Bootstrap 5 inputs --- */
#content .form-control,
#content .form-select{
  display:block;width:100%;max-width:520px;box-sizing:border-box;
  padding:8px 12px;font-size:14px;line-height:1.5;color:#333;
  background-color:#fff;border:1px solid #ccc;border-radius:4px;
}
#content textarea.form-control{max-width:100%;min-height:120px;}
#content .form-control:focus,
#content .form-select:focus{border-color:#66afe9;outline:0;box-shadow:0 0 6px rgba(102,175,233,.45);}
#content .form-control[readonly],#content .form-control:disabled{background:#eee;}

/* --- Labels / help text / validation --- */
#content .form-label{display:inline-block;margin-bottom:4px;font-weight:600;}
#content .form-text,#content small.form-text{display:block;margin-top:3px;color:#777;font-size:12px;}
#content .invalid-feedback,#content .form-control-feedback{color:#b94a48;font-size:12px;}

/* --- Checkboxes & radios (BS5 form-check) --- */
#content .form-check{position:relative;display:block;min-height:1.4rem;padding-left:1.6em;margin-bottom:6px;}
#content .form-check-input{float:left;margin-left:-1.6em;margin-top:.15em;}
#content .form-check-inline{display:inline-block;margin-right:1rem;padding-left:1.6em;}
#content .form-check-label{margin-bottom:0;}

/* --- Buttons: BS2 already styles .btn/.btn-primary; just space toolbars --- */
#content .btn-toolbar{margin:8px 0;}
#content .btn-toolbar .btn,#content .btn+.btn{margin-right:6px;}

/* --- BS5 utilities the BS2 template lacks --- */
#content .float-end{float:right!important;}
#content .float-start{float:left!important;}
#content .text-end{text-align:right!important;}
#content .d-none{display:none!important;}
#content .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#content .mb-1{margin-bottom:.25rem!important;}#content .mb-2{margin-bottom:.5rem!important;}
#content .mb-3{margin-bottom:1rem!important;}#content .mb-4{margin-bottom:1.5rem!important;}
#content .mt-2{margin-top:.5rem!important;}#content .mt-3{margin-top:1rem!important;}#content .mt-4{margin-top:1.5rem!important;}
#content .me-2{margin-right:.5rem!important;}#content .ms-2{margin-left:.5rem!important;}

/* --- Minimal BS5 grid (some core edit forms group fields in rows) --- */
#content .row{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px;}
#content .row > [class^="col-"],#content .row > [class*=" col-"]{padding-right:10px;padding-left:10px;box-sizing:border-box;}
#content .col-12{flex:0 0 100%;max-width:100%;}
#content .col-md-3{flex:0 0 25%;max-width:25%;}
#content .col-md-4{flex:0 0 33.3333%;max-width:33.3333%;}
#content .col-md-6{flex:0 0 50%;max-width:50%;}
#content .col-md-8{flex:0 0 66.6667%;max-width:66.6667%;}
#content .col-md-9{flex:0 0 75%;max-width:75%;}
@media (max-width:640px){
  #content .row{display:block;margin:0;}
  #content .row > [class^="col-"],#content .row > [class*=" col-"]{padding:0;max-width:100%;flex-basis:auto;}
}

/* --- Profile display list tidy --- */
#content .com-users-profile dt{font-weight:600;padding-top:6px;}
#content .com-users-profile dd{margin:0 0 8px;}

/* ============================================================================
 * Frontend module EDIT tooltips (admin-only; the jmodedit / #tip-* helpers).
 * The old template lacks BS5 tooltip styling, so these render as always-visible
 * blocks. Make them behave as real hover tooltips (hidden until the edit icon is
 * hovered). Only logged-in editors ever see these; members are unaffected.
 * ==========================================================================*/
[id^="mod-"]{position:relative;}
[role="tooltip"][id^="tip-"]{
  display:none;position:absolute;top:100%;left:0;z-index:2000;
  max-width:320px;margin-top:4px;padding:6px 10px;white-space:normal;text-align:left;
  background:#2b2b2b;color:#fff;font-size:12px;line-height:1.4;font-weight:normal;
  border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.jmodedit:hover + [role="tooltip"][id^="tip-"],
[role="tooltip"][id^="tip-"]:hover{display:block;}

/* ============================================================================
 * Page title banner - match the original site.
 * Joomla 3 output the menu Page Heading as <h2>/div.contentheading (styled 35px,
 * centred, white by template.css). Joomla 5 outputs <div class="page-header"><h1>,
 * which only picked up the plain dark-grey 22px h1 rule. Re-apply the title look
 * to the J5 element, and hide the Joomla breadcrumb (the original didn't show it,
 * and it pushes the title off the teal strip onto the white area on some pages).
 * ==========================================================================*/
.page-header{margin:0 0 36px !important;padding:0 !important;border:0 !important;background:none !important;}
.page-header h1{
  color:#fff !important;text-align:center !important;
  font-size:35px !important;font-weight:normal !important;line-height:1.2;
  font-family:'Open Sans', sans-serif;margin:0 !important;padding:0 !important;
}
#bread-crumbs{display:none !important;}

/* ============================================================================
 * More Bootstrap-5 classes used by core views (MFA captive, login, etc.)
 * that the BS2 template doesn't define. Kept scoped to #content.
 * ==========================================================================*/
#content .users-mfa-captive{max-width:640px;margin:0 auto;}
#content .card{background:none;border:0;}          /* keep transparent so the white title stays readable over the teal */
#content .card-body{padding:0;}
#content .row > .col-sm-3{flex:0 0 25%;max-width:25%;}
#content .row > .col-sm-9{flex:0 0 75%;max-width:75%;}
#content .row > .col-sm-12{flex:0 0 100%;max-width:100%;}
#content .row > .offset-sm-3{margin-left:25%;}
#content .col-form-label{padding-top:7px;font-weight:600;}
@media (max-width:640px){
  #content .row > .col-sm-3,#content .row > .col-sm-9{flex:0 0 100%;max-width:100%;}
  #content .row > .offset-sm-3{margin-left:0;}
}
#content .my-3{margin-top:1rem !important;margin-bottom:1rem !important;}
#content .me-3{margin-right:.75rem !important;}
#content .btn-sm{padding:4px 10px;font-size:12px;}
#content .btn-danger{background:#c9302c !important;color:#fff !important;}
#content .btn-secondary{background:#6c757d !important;color:#fff !important;}

/* MFA captive: gap below the title so the message/form clears the teal band */
#content #users-mfa-title{margin-bottom:28px !important;}


/* Hide the auto-generated MFA Backup Codes method from the members' methods page */
.com-users-methods-list-method-name-backupcodes { display: none !important; }

/* Hide the 'Turn Off' (disable-all-MFA) box on the members' MFA methods page */
#com-users-methods-reset-container { display: none !important; }

/* Template bootstrap.css maps .icon-* to a missing IcoMoon font - force Joomla's FontAwesome instead */
[class^="icon-"], [class*=" icon-"] { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }

/* JUI bootstrap.css sets .icon-*::before to the missing IcoMoon font - override the pseudo-element to FontAwesome */
[class^="icon-"]::before, [class*=" icon-"]::before { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }