/* 1. Page background and basic font treatment */
body {
  background-color: #F4F0EB !important;
  color: #111111 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Keep headings clean without changing their size/layout. */
h1, h2, h3, h4, h5, h6,
.page-title,
.title {
  color: #111111 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
}

/* 2. Cards, panels, and main content containers */
.card,
.panel,
.well,
.box {
  background-color: #FFFFFF !important;
  border-color: rgba(17, 17, 17, 0.10) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

.card-header,
.panel-heading,
.box-header {
  background-color: #FFFFFF !important;
  border-bottom-color: rgba(17, 17, 17, 0.10) !important;
  color: #111111 !important;
  font-weight: 800 !important;
}

/* 3. Sidebar/menu: color only, no spacing or size changes */
.list-group-item,
.nav > li > a,
.nav-item > a {
  color: #111111 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
}

.list-group-item:hover,
.nav > li > a:hover,
.nav-item > a:hover {
  background-color: #F4F0EB !important;
  color: #000000 !important;
  text-decoration: none !important;
}

/* Active menu item. Keeps existing portal dimensions intact. */
.list-group-item.active,
.list-group-item.active:hover,
.nav > li.active > a,
.nav > li.active > a:hover,
.nav-item.active > a,
.nav-item.active > a:hover {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #FFFFFF !important;
}

/* Only recolor text/icons inside active items. Does not resize icons. */
.list-group-item.active *,
.nav > li.active > a *,
.nav-item.active > a * {
  color: #FFFFFF !important;
}

/* 4. Buttons: color treatment only, no forced width/height */
.btn-primary,
.btn-success,
button.btn-primary,
button.btn-success,
input[type="submit"].btn-primary,
input[type="submit"].btn-success {
  background-color: #A6FF2A !important;
  border-color: #A6FF2A !important;
  color: #000000 !important;
  border-radius: 5px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-success:hover,
button.btn-primary:hover,
button.btn-success:hover,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-success:hover {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #FFFFFF !important;
}

.btn-default,
.btn-secondary {
  border-color: rgba(17, 17, 17, 0.22) !important;
  color: #111111 !important;
  border-radius: 5px !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background-color: #F4F0EB !important;
  border-color: #111111 !important;
  color: #111111 !important;
}

/* 5. Form fields, date filters, and search inputs */
.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
  background-color: #FFFFFF !important;
  border-color: rgba(17, 17, 17, 0.18) !important;
  color: #111111 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: #0D2B1E !important;
  box-shadow: 0 0 0 2px rgba(166, 255, 42, 0.25) !important;
  outline: none !important;
}

/* Input group addons such as calendar icons or "to" separators. */
.input-group-addon,
.input-group-text {
  background-color: #F4F0EB !important;
  border-color: rgba(17, 17, 17, 0.18) !important;
  color: #0D2B1E !important;
  font-weight: 700 !important;
}

/* 6. Tables and DataTables: only subtle colors/typography */
.table thead th,
table.dataTable thead th {
  color: #111111 !important;
  font-weight: 800 !important;
  border-bottom-color: rgba(17, 17, 17, 0.18) !important;
}

.table tbody td,
table.dataTable tbody td {
  color: #222222 !important;
  border-top-color: rgba(17, 17, 17, 0.08) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #FAF8F3 !important;
}

.table-hover > tbody > tr:hover {
  background-color: #F4F0EB !important;
}

.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate {
  color: #555555 !important;
}

/* 7. Pagination: color only */
.pagination > li > a,
.pagination > li > span {
  color: #111111 !important;
  border-color: rgba(17, 17, 17, 0.14) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #FFFFFF !important;
}

/* 8. Links */
a {
  color: #0D2B1E !important;
}

a:hover,
a:focus {
  color: #000000 !important;
}

/* 9. Small status labels/badges, if used */
.label-success,
.badge-success {
  background-color: #0D2B1E !important;
  color: #FFFFFF !important;
}

.label-warning,
.badge-warning {
  background-color: #A6FF2A !important;
  color: #000000 !important;
}

/* 10. Optional icon color only.
   This does NOT resize icons. If icons still behave strangely, remove this section first. */
.fa,
.glyphicon,
.material-icons {
  color: #0D2B1E !important;
}

.active .fa,
.active .glyphicon,
.active .material-icons {
  color: #A6FF2A !important;
}

/* 11. Keyboard focus visibility */
a:focus,
button:focus,
.btn:focus,
.form-control:focus {
  outline: none !important;
}

/* 12. Icon recommendations for 144x144 transparent PNG menu icons:
   - Schedule: calendar outline
   - Buy Credits: credit card or ticket outline
   - Open Bookings: calendar check outline
   - Class Credits: stacked ticket/card outline
   - Stats: simple line chart or three horizontal bars
   - My Profile: user circle outline
   - Log Out: door/arrow outline
   - Admin Panel: dashboard grid outline
   - Front Desk Kiosk: monitor/tablet outline

   Style:
   - Transparent background
   - 144 x 144 PNG
   - Consistent 4px to 6px stroke
   - Dark green #0D2B1E or black #111111
   - No words inside icons
*/