:root {
  --msl-bg: #e9efeb;
  --msl-surface: #ffffff;
  --msl-surface-soft: #e1e9e4;
  --msl-text: #101914;
  --msl-muted: #405148;
  --msl-border: #aebdb4;
  --msl-primary: #245c43;
  --msl-primary-dark: #194431;
  --msl-accent: #d7a33d;
  --msl-danger: #a33a3a;
  --msl-radius: 14px;
  --msl-shadow: 0 10px 30px rgba(23, 33, 28, .08);
  --msl-header-height: 64px;
}

html, body {
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  background: var(--msl-bg);
  color: var(--msl-text);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: Poppins-Regular, "Segoe UI", Arial, sans-serif;
  line-height: 1.45;
}

.page {
  min-width: 0 !important;
  width: 100%;
  min-height: 100vh;
  height: auto;
  background: var(--msl-bg);
}

header {
  height: var(--msl-header-height);
  min-height: var(--msl-header-height);
  z-index: 90;
  background: rgba(23, 33, 28, .97);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.12);
  font-family: Poppins-SemiBold, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 3vw, 1.3rem);
  letter-spacing: .01em;
  padding: 0 64px;
  text-align: center;
}

main {
  min-height: 100vh;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: Poppins-SemiBold, "Segoe UI", sans-serif;
  color: var(--msl-text);
}

h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
p { color: var(--msl-muted); }

a { color: var(--msl-primary); }
a:hover { color: var(--msl-primary-dark); }

/* Inputs */
input, select, textarea {
  min-height: 44px;
  border: 1px solid #9eafa5 !important;
  border-radius: 10px !important;
  background: #f8faf9 !important;
  color: var(--msl-text) !important;
  box-shadow: inset 0 1px 2px rgba(20, 45, 32, .04) !important;
  padding: 9px 11px !important;
  font: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(36, 92, 67, .13) !important;
  border-color: var(--msl-primary) !important;
  background: #fff !important;
}

input:disabled, select:disabled, textarea:disabled {
  background: #edf0ee !important;
  color: #7f8984 !important;
}

input[type=submit], input[type=button], button.login100-form-btn {
  min-height: 46px;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--msl-primary) !important;
  color: #fff !important;
  font-family: Poppins-SemiBold, "Segoe UI", sans-serif;
  padding: 10px 18px !important;
  box-shadow: 0 4px 12px rgba(36,92,67,.18) !important;
}

input[type=submit]:hover, input[type=button]:hover, button.login100-form-btn:hover {
  background: var(--msl-primary-dark) !important;
}

/* Edit screens */
.editheader,
.editmenuheader,
.sublist {
  min-width: 0 !important;
}

.editheader {
  border-bottom: 1px solid var(--msl-border);
  background: var(--msl-surface);
}

.editheadertitle { color: var(--msl-primary); }
.editmenutitle { color: var(--msl-text); }

.form {
  background: var(--msl-surface);
  border: 1px solid var(--msl-border);
  border-radius: var(--msl-radius);
  box-shadow: var(--msl-shadow);
}

.icon_edit {
  border: 1px solid var(--msl-border) !important;
  border-radius: 10px !important;
  /* Do not use !important here: edit-page JavaScript changes the Save
     button background to green when there are unsaved changes. */
  background-color: #fff;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.icon_edit:hover {
  border-color: var(--msl-primary) !important;
  box-shadow: 0 4px 12px rgba(36,92,67,.12);
  transform: translateY(-1px);
}

.label {
  color: #35483e;
  font-family: Poppins-SemiBold, "Segoe UI", sans-serif;
}
.required { color: var(--msl-danger); }

/* Legacy row lists */
.row100,
.row100list,
.row100listshaded,
.row100listshadedgreen,
.row100white {
  min-height: 40px;
  height: auto;
  border-bottom: 1px solid var(--msl-border);
  background: var(--msl-surface);
}

.row100:hover { background: #f1f6f3; }
.row100heading,
.row100heading_inline {
  background: #e8efeb !important;
  color: var(--msl-text);
  border-bottom: 1px solid #cbd8d1;
}

.propheading { color: var(--msl-primary-dark); }
.pointer { text-decoration: none; }

.scrolllistmain,
.scrolllist {
  scrollbar-color: #a9b8b0 transparent;
}

/* Login */
.login_message {
  width: min(92%, 520px);
  top: 0;
  padding: 100px 20px 18px;
  text-align: center;
  color: var(--msl-text);
  font-family: Poppins-SemiBold, "Segoe UI", sans-serif;
  font-size: 1.15rem;
}

.container-login100 {
  min-height: auto;
  background: var(--msl-bg);
  padding: 0 16px 40px;
}

.wrap-login100 {
  width: min(100%, 460px);
  border: 1px solid var(--msl-border);
  border-radius: 18px;
  box-shadow: var(--msl-shadow);
}

.login100-form {
  padding: 28px !important;
  gap: 18px;
}

.wrap-input100 {
  border-bottom: 0;
}

.label-input100 {
  position: static;
  width: auto;
  display: block;
  text-align: left;
  margin-bottom: 7px;
  color: var(--msl-muted);
  font-family: Poppins-Medium, "Segoe UI", sans-serif;
}

.input100 {
  width: 100%;
  min-height: 48px;
}

.login_forgotpassword { width: 100%; text-align: right; }
.container-login100-form-btn { width: 100%; }
.login100-form-btn { width: 100%; justify-content: center; }

/* Dashboard */
.dashboard {
  top: calc(var(--msl-header-height) + 26px) !important;
  width: min(94%, 1180px) !important;
  height: auto !important;
  margin: 0 auto 28px !important;
  padding: 22px 24px;
  background: linear-gradient(135deg, #fff, #f1f6f3);
  border: 1px solid var(--msl-border);
  border-radius: var(--msl-radius);
  box-shadow: var(--msl-shadow);
}

.dashboard p { margin: 10px 0 0; }
.dashboard_results {
  top: calc(var(--msl-header-height) + 30px) !important;
  width: min(94%, 1180px) !important;
  margin: 0 auto 40px !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
}

.dashboard_results > h2 {
  margin: 26px 0 10px;
}

/* Homepage */
.maintitle {
  min-height: 100vh;
  padding-top: var(--msl-header-height);
  background-position: center !important;
}

.title {
  top: auto !important;
  min-height: calc(100vh - var(--msl-header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.title h1 {
  color: #fff;
  font-size: clamp(1.7rem, 7vw, 3rem);
  line-height: 1.15;
  max-width: 800px;
}
.title p {
  margin-top: 16px !important;
  font-size: clamp(.95rem, 3.5vw, 1.15rem) !important;
  color: rgba(255,255,255,.92) !important;
}

@media (max-width: 780px) {
  :root { --msl-header-height: 58px; }

  header {
    padding: 0 58px;
    font-size: 1rem;
  }

  main { padding: 0 !important; }

  .no_access {
    top: 90px;
    left: 0;
    width: auto;
    margin: 0 16px;
    font-size: 1rem;
  }

  .wholecol, .leftcol, .rightcol, .left66, .left60, .left50, .left33, .left25 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .form {
    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    margin: 12px !important;
    padding: 14px 12px 18px;
    display: block !important;
  }

  /*
   * Legacy edit styles give .line100 a fixed 35px height. On mobile the
   * label and control are stacked, so that fixed height makes following
   * rows overlap. Let every row grow to its actual content height.
   */
  .line100 {
    display: flow-root !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  .label,
  .label_large {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    text-align: left !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: .82rem !important;
    color: var(--msl-muted) !important;
    font-family: Poppins-Medium, "Segoe UI", sans-serif;
  }

  .field,
  .field_large,
  .filefield {
    width: 100% !important;
    height: auto !important;
    min-height: 44px;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .field input:not([type=checkbox]):not([type=radio]),
  .field select,
  .field textarea,
  .field_large input,
  .field_large select,
  .filefield input {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  .editheader {
    height: auto !important;
    min-height: 52px;
    padding: 10px 12px;
  }

  .editheaderhelp { display: none; }
  .editheadertitle {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    font-size: 1.15rem !important;
  }

  .editmenuheader {
    height: auto !important;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
  }

  .editmenutitle {
    min-width: 0;
    flex: 1;
    float: none !important;
    font-size: 1rem !important;
  }

  .editmenubar {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }

  .editmenubaricons { float: none !important; padding: 0 !important; display: flex; gap: 6px; }
  .icon_edit { margin-right: 0 !important; }

  .dashboard {
    top: calc(var(--msl-header-height) + 16px) !important;
    width: calc(100% - 24px) !important;
    padding: 18px;
    margin-bottom: 18px !important;
  }

  .dashboard_results {
    top: calc(var(--msl-header-height) + 18px) !important;
    width: calc(100% - 24px) !important;
  }

  .dashboard_results > h2 { margin-top: 22px; }

  /* Mobile card lists. Heading rows are hidden; useful labels are injected per field. */
  .scrolllistmain {
    top: calc(var(--msl-header-height) + 8px) !important;
    height: auto !important;
    overflow: visible !important;
    padding: 10px 12px 80px;
  }

  .row100heading,
  .row100heading_inline,
  .row100heading_spacer,
  .row100heading_spacer_inline {
    display: none !important;
  }

  .scrolllistmain > .row100,
  .dashboard_results > .row100:not(:has(.row100heading_inline)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    border: 1px solid var(--msl-border) !important;
    border-radius: 14px;
    background: var(--msl-surface) !important;
    box-shadow: 0 4px 16px rgba(23,33,28,.05);
  }

  .scrolllistmain > .row100 > div,
  .dashboard_results > .row100:not(:has(.row100heading_inline)) > div {
    width: auto !important;
    float: none !important;
    height: auto !important;
    min-width: 0;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .scrolllistmain > .row100 > div::before,
  .dashboard_results > .row100:not(:has(.row100heading_inline)) > div::before {
    display: block;
    margin-bottom: 2px;
    color: var(--msl-muted);
    font-size: .68rem;
    font-family: Poppins-Medium, "Segoe UI", sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .log_date::before { content: "Date"; }
  .log_time::before { content: "Time"; }
  .log_clubname::before { content: "Range / Club"; }
  .log_manufacturer::before { content: "Manufacturer"; }
  .log_model::before { content: "Model"; }
  .log_serial_number::before { content: "Serial no."; }
  .log_calibre::before { content: "Calibre"; }
  .log_rounds::before { content: "Shots"; }
  .weapon_manufacturer::before { content: "Manufacturer"; }
  .weapon_model::before { content: "Model"; }
  .weapon_serial_number::before { content: "Serial no."; }
  .weapon_calibre::before { content: "Calibre"; }
  .weapon_rounds::before { content: "Rounds"; }
  .weapon_dateadded::before { content: "Added"; }
  .ammo_date::before { content: "Date"; }
  .ammo_calibre::before { content: "Calibre"; }
  .ammo_rounds::before { content: "Rounds"; }
  .ammo_purchased::before { content: "Purchased"; }
  .ammo_shot::before { content: "Shot"; }
  .ammo_inhand::before { content: "In hand"; }
  .clubs_clubname::before { content: "Range / Club"; }
  .clubs_address::before { content: "Address"; }
  .clubs_postcode::before { content: "Postcode"; }
  .clubs_telephone::before { content: "Telephone"; }
  .loginusers_fullname::before { content: "Name"; }
  .loginusers_loginusername::before { content: "Username"; }
  .loginusers_email::before { content: "Email"; }
  .loginusers_logindate::before { content: "Last login"; }
  .loginusers_logintime::before { content: "Time"; }

  .log_id, .weapon_id,
  .clubs_clubid, .clubs_security,
  .loginusers_userid, .loginusers_valid, .loginusers_ip,
  .loginusers_shooterid_rifle, .loginusers_shooterid_pistol, .loginusers_security {
    display: none !important;
  }

  .log_model, .log_serial_number, .log_calibre,
  .weapon_model, .weapon_serial_number, .weapon_calibre,
  .weapon_dateadded {
    display: block !important;
  }

  .log_addicon_mobile,
  .weapon_addicon_mobile {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    width: 54px !important;
    height: 54px;
    border-radius: 50%;
    background: var(--msl-primary);
    box-shadow: 0 8px 20px rgba(36,92,67,.28);
    display: grid !important;
    place-items: center;
  }

  .log_addicon_mobile img,
  .weapon_addicon_mobile img {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) invert(1);
  }

  .login_message { padding-top: 88px; }
  .login100-form { padding: 22px 18px !important; }

  .maintitle { background-image: linear-gradient(rgba(13,25,19,.35), rgba(13,25,19,.5)), url('/images/background_mobile.png') !important; }
}

@media (max-width: 430px) {
  .scrolllistmain > .row100,
  .dashboard_results > .row100:not(:has(.row100heading_inline)) {
    grid-template-columns: 1fr 1fr;
  }

  .log_clubname,
  .clubs_clubname,
  .clubs_address,
  .loginusers_fullname,
  .loginusers_loginusername,
  .loginusers_email {
    grid-column: 1 / -1;
  }
}

/* Mobile contrast improvements */
@media (max-width: 768px) {
  :root {
    --msl-bg: #e9efeb;
    --msl-surface: #ffffff;
    --msl-surface-soft: #e1e9e4;
    --msl-text: #101914;
    --msl-muted: #405148;
    --msl-border: #aebdb4;
  }

  body,
  .page {
    background: var(--msl-bg) !important;
  }

  .editheader {
    background: #ffffff !important;
    border-bottom: 1px solid #b7c4bc !important;
  }

  .editheadertitle {
    color: #174f38 !important;
    font-family: Poppins-SemiBold, "Segoe UI", sans-serif !important;
  }

  .editmenuheader {
    background: #f1f5f2 !important;
    border-bottom: 1px solid #c0ccc5 !important;
  }

  .editmenutitle {
    color: #18251e !important;
    font-family: Poppins-SemiBold, "Segoe UI", sans-serif !important;
  }

  .form {
    background: #ffffff !important;
    border: 1px solid #b6c3bb !important;
    box-shadow: 0 8px 24px rgba(22, 45, 33, .12) !important;
  }

  .label,
  .label_large {
    color: #35483e !important;
    font-family: Poppins-SemiBold, "Segoe UI", sans-serif !important;
    font-size: .84rem !important;
  }

  input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
  select,
  textarea {
    background: #f8faf9 !important;
    border: 1px solid #9eafa5 !important;
    color: #101914 !important;
    box-shadow: inset 0 1px 2px rgba(20, 45, 32, .04) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #718078 !important;
    opacity: 1 !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    background: #ffffff !important;
    border-color: #245c43 !important;
    outline: 3px solid rgba(36, 92, 67, .18) !important;
    box-shadow: 0 0 0 1px #245c43 !important;
  }

  input:disabled,
  select:disabled,
  textarea:disabled {
    background: #e5eae7 !important;
    border-color: #b5c0ba !important;
    color: #4d5b54 !important;
  }

  .icon_edit {
    border-color: #b5c2ba !important;
    box-shadow: 0 2px 5px rgba(20, 40, 30, .08) !important;
  }
}

/* Tablet / desktop edit-form sizing */
@media (min-width: 781px) {
  .form {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }

  .line100 {
    display: flow-root !important;
    width: 100% !important;
    height: auto !important;
    min-height: 46px !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .label,
  .label_large {
    min-height: 44px !important;
    height: auto !important;
    line-height: 44px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .field,
  .field_large,
  .filefield {
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .field input:not([type=checkbox]):not([type=radio]),
  .field select,
  .field textarea,
  .field_large input,
  .field_large select,
  .filefield input {
    min-height: 44px !important;
    margin: 0 !important;
  }

  /* Keep checkbox/radio rows vertically centred with the labels. */
  .field input[type=checkbox],
  .field input[type=radio] {
    min-height: 0 !important;
    margin-top: 11px !important;
  }
}

/* Desktop / tablet list framing */
@media (min-width: 781px) {
  .scrolllistmain {
    width: calc(100% - 48px) !important;
    max-width: 1500px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 1px solid #b6c3bb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(22, 45, 33, .10) !important;
    overflow: hidden !important;
  }

  .scrolllist {
    width: 100% !important;
  }

  .row100heading,
  .row100heading_inline {
    border-top: 0 !important;
  }

  .scrolllistmain .row100:last-child,
  .scrolllistmain .row100list:last-child,
  .scrolllistmain .row100listshaded:last-child {
    border-bottom: 0 !important;
  }
}

/* Desktop / tablet list headings, alignment and filters */
@media (min-width: 781px) {
  /* Keep the column headings aligned with the framed list below. */
  .row100heading,
  .row100heading_inline {
    width: calc(100% - 48px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Ammo filter row: give the select enough room and keep it inside the layout. */
  .sublist {
    width: calc(100% - 48px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .sublist select {
    width: auto !important;
    min-width: 140px !important;
    max-width: 260px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 5px 34px 5px 10px !important;
    box-sizing: border-box !important;
  }

  /* Centre the Date heading and Date values on list_ammo. */
  .ammo_date {
    text-align: center !important;
  }
}

/* Correct desktop/tablet list header alignment */
@media (min-width: 781px) {
  /*
   * The legacy heading is floated, so auto margins on .row100heading
   * cannot centre it. Centre the OUTER heading rows instead.
   */
  main > .row100 {
    width: calc(100% - 48px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  main > .row100 > .row100heading,
  main > .row100 > .row100heading_inline {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* Keep the normal column-title row neat. */
  main > .row100 > .row100heading:not(:has(select)) {
    height: 33px !important;
  }

  /*
   * The filter row contains a modern 38px select, so the old 33px
   * heading height clips it.
   */
  main > .row100:has(select) {
    height: 48px !important;
  }

  main > .row100 > .row100heading:has(select) {
    height: 48px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  main > .row100 > .row100heading:has(select) > .ammo_date,
  main > .row100 > .row100heading:has(select) > .ammo_calibre,
  main > .row100 > .row100heading:has(select) > .ammo_rounds {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  main > .row100 > .row100heading:has(select) > .ammo_calibre {
    justify-content: flex-start !important;
  }

  #filter {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 5px 34px 5px 10px !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* Centre Date in both the title row and the data rows. */
  .ammo_date,
  .propheading.ammo_date {
    text-align: center !important;
  }
}

/* Mobile navigation: allow the complete menu to scroll on short screens */
@media (max-width: 780px) {
  #nav-container {
    height: 100dvh !important;
    min-height: 0 !important;
  }

  #nav-content {
    top: var(--msl-header-height, 58px) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--msl-header-height, 58px)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  #nav-content ul {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 8px !important;
  }

  #nav-content .nav-logout {
    margin-top: 10px !important;
    padding-top: 10px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}