/* ===== Variables ===== */
:root {
  --svl-red: #CA1F25;
  --svl-red-hover: #a01820;
  --svl-dark-navy: #232731;
  --svl-darker-blue: #18294D;
  --primary-font: "Open Sans", "Noto Sans JP", sans-serif;
  --heading-font: "Oswald", "Noto Sans JP", sans-serif;
  
  /* Layout */
  --page-padding: 2rem;
  --label-width: 250px;
  --field-gap: 1.5rem;
  --field-offset: 120px; /* label-width + gap */
  
  /* Header */
  --header-height: 64px;
  
  /* Colors */
  --border-color: #ddd;
  --bg-light: #f9f9f9;
  --bg-disabled: #f5f5f5;
  --text-secondary: #666;
  --gray: #6c757d;
  --gray-hover: #5a6268;
}

/* ===== Fonts Import ===== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Oswald:wght@400;600;700&family=Noto+Sans+JP:wght@400;700&display=swap');

/* ===== Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--primary-font);
}

textarea {
  line-height: 1.5;
  height: calc(1.5em * 5 + 16px); /* 6 lines + padding */
  min-height: calc(1.5em * 5 + 16px);
  resize: vertical;
}

/* ===== Header ===== */
#header {
  background-color: var(--svl-darker-blue);
  display: flex;
  align-items: stretch;
  height: var(--header-height);
}

.site_title {
  background-color: var(--svl-red);
  background-image: url(/assets/logo.png);
  background-repeat: no-repeat;
  background-position: center left 1rem;
  background-size: auto 72px;
  height: var(--header-height);
  min-width: 180px;
  padding: 0 1rem 0 1rem;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
  margin-right: 10px;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

/* ===== Navigation ===== */
.tabs {
  list-style: none;
  display: flex;
  height: 100%;
  gap: 0;
}

.menu_item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.menu_item > a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.menu_item > a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdowns */
.menu_item.has_nested .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  z-index: 1000;
  border-top: 3px solid var(--svl-red);
}

.menu_item.has_nested:hover .menu {
  display: block;
}

.menu .menu_item {
  display: block;
  height: auto;
}

.menu .menu_item a {
  color: var(--svl-dark-navy);
  padding: 12px 20px;
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.menu .menu_item a:hover {
  background-color: var(--bg-light);
  border-left-color: var(--svl-red);
  padding-left: 23px;
}

#utility_nav {
  margin-left: auto;
}

/* ===== Dropdown Items ===== */
.menu .menu_item {
  display: block;
  height: auto;
}

.menu .menu_item a {
  color: var(--svl-dark-navy);
  padding: 12px 20px;
  font-size: 13px;
  border-left: 3px solid transparent;  /* ADD THIS - transparent border always present */
  transition: all 0.2s ease;
}

.menu .menu_item a:hover {
  background-color: var(--bg-light);
  border-left-color: var(--svl-red);  /* CHANGE THIS - only change color, not width */
  padding-left: 20px;  /* REMOVE the 23px, keep it same as default */
}

/* Settings menu dividers */
#api_docs > a {
  margin-bottom: 0;
  padding-bottom: 12px;
}

#lang_en {
  border-top: 1px solid #ddd;
}

#lang_en > a {
  padding-top: 12px;
}

#lang_ja {
  border-bottom: 1px solid #ddd;
  padding-bottom: 0;
  margin-bottom: 0;
}

#vehicle_types {
  margin-top: 0;
  padding-top: 0;
}

#vehicle_types > a {
  padding-top: 12px;
}


/* ===== Page Layout ===== */
.breadcrumb,
h1, h2#page_title, .page-title,
.action_items {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

#main_content_wrapper {
  padding-left: 0;
  padding-right: 0;
}

#main_content_wrapper > * {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

/* Allow table containers to be full width */
#main_content_wrapper .index_as_table,
#main_content_wrapper .paginated_collection,
#main_content_wrapper #collection_selection {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* ===== Breadcrumbs ===== */
.breadcrumb {
  display: none;
}

.breadcrumb a {
  color: var(--svl-red);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb_sep {
  color: #999;
  margin: 0 0.5rem;
}

/* ===== Typography ===== */
h1, h2#page_title, .page-title {
  font-family: var(--heading-font);
  font-size: 28px;
  font-weight: 700;
  color: var(--svl-dark-navy) !important;
  margin: 0 0 1.5rem 0;
}

h2#page_title {
  margin: 1.5rem 0;
}

/* ActiveAdmin Title Bar - ensure dark text */
#title_bar,
#title_bar h2,
#title_bar #page_title {
  color: var(--svl-dark-navy) !important;
}

#title_bar {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 2rem;
  margin: 0 0 1.5rem 0;
  padding-top: 1rem;
}

#titlebar_left {
  flex: 1;
  min-width: 0;
}

#title_bar h2 {
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1;
}

.action_items {
  flex-shrink: 0;
  margin: 0;
}

fieldset legend, h2, h3 {
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  margin: 2rem 0 0.5rem 0;
  color: var(--svl-dark-navy);
}

/* ===== Action Items ===== */
.action_items {
  margin-bottom: 1.5rem;
}

.action_items a {
  background-color: var(--svl-red);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  display: inline-block;
  margin-right: 0.5rem;
  transition: background-color 0.2s ease;
}

.action_items a:hover {
  background-color: var(--svl-red-hover);
}

/* ===== Forms ===== */
form {
  max-width: 1000px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

ol {
  list-style: none;
  padding: 0;
}

/* Two-column layout */
.input,
li.input,
ol > li {
  display: grid;
  grid-template-columns: var(--label-width) 1fr;
  gap: var(--field-gap);
  align-items: start;
  margin-bottom: 1.5rem;
  list-style: none;
}

label {
  font-weight: 600;
  font-size: 14px;
  color: var(--svl-dark-navy);
  padding-top: 8px;
  text-align: right;
  font-family: var(--primary-font);
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  max-width: 500px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  font-family: var(--primary-font);
  background-color: #ffffff;
  transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--svl-red);
}

input[readonly],
select[disabled] {
  background-color: var(--bg-disabled);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Checkboxes */
.input.check_boxes,
li.input.check_boxes,
.choices-group {
  display: block;
  margin-bottom: 1.5rem;
}

.input.check_boxes > label,
.choices-group > label {
  display: grid;
  grid-template-columns: var(--label-width) 1fr;
  gap: var(--field-gap);
  text-align: right;
  margin-bottom: 0.5rem;
}

.choice,
.choices-group .choice {
  display: flex;
  align-items: center;
  margin-left: var(--field-offset);
  margin-bottom: 0.5rem;
}

.choice input[type="checkbox"],
.choice input[type="radio"] {
  width: auto;
  margin: 0 8px 0 0;
  cursor: pointer;
}

.choice label {
  font-weight: 400;
  text-align: left;
  padding-top: 0;
  cursor: pointer;
  margin: 0;
}

/* ===== Buttons ===== */
.actions,
.buttons {
  margin-top: 2rem;
  padding-left: var(--field-offset);
}

input[type="submit"],
button[type="submit"],
.button {
  background-color: var(--svl-red);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover {
  background-color: var(--svl-red-hover);
}

a.button.cancel {
  background-color: var(--gray);
  color: #ffffff;
  margin-left: 0.5rem;
}

a.button.cancel:hover {
  background-color: var(--gray-hover);
}

/* ===== Filters ===== */
.filter_form {
  background: var(--bg-light);
  padding: 1.5rem var(--page-padding);
  margin: 0 0 2rem 0;
  border-radius: 4px;
}

.filter_form h3 {
  font-family: var(--heading-font);
  font-size: 16px;
  margin: 0 0 1rem 0;
  color: var(--svl-dark-navy);
}

.filter_form_field {
  margin-bottom: 1rem;
}

.filter_form_field label {
  display: inline-block;
  width: 150px;
  font-weight: 600;
  font-size: 13px;
}

.filter_form_field input,
.filter_form_field select {
  display: inline-block;
  width: auto;
  min-width: 200px;
  margin-right: 1rem;
}

.filter_form input[type="submit"],
.clear_filters_btn {
  background-color: var(--svl-red);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  margin-right: 0.5rem;
  transition: background-color 0.2s ease;
}

.filter_form input[type="submit"]:hover,
.clear_filters_btn:hover {
  background-color: var(--svl-red-hover);
}

.clear_filters_btn {
  background-color: var(--gray);
}

.clear_filters_btn:hover {
  background-color: var(--gray-hover);
}



/* ===== Breadcrumbs ===== */

#titlebar_left {  
  padding-top: 1rem;
}

.breadcrumb {
  padding-top: 2.5rem;
  padding-bottom: 1rem;
  font-size: 13px;
  border: none;
  background: none;
}

.breadcrumb a {
  color: var(--svl-darker-blue);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
  color: var(--svl-dark-navy);
}

.breadcrumb_sep {
  color: #999;
  margin: 0 0.5rem;
}







/* ===== Checkboxes ===== */
.input.check_boxes,
li.input.check_boxes,
.choices-group {
  display: block;
  margin-bottom: 1.5rem;
}

.input.check_boxes > label,
.choices-group > label {
  display: grid;
  grid-template-columns: var(--label-width) 1fr;
  gap: var(--field-gap);
  text-align: right;
  margin-bottom: 0.5rem;
  font-weight: 600;
  padding-top: 0;
}

.choice,
.choices-group .choice {
  display: flex;
  align-items: center;
  margin-left: var(--field-offset);
  margin-bottom: 0.5rem;
}

.choice label {
  font-weight: 400;
  text-align: left;
  padding-top: 0;
  cursor: pointer;
  margin: 0;
}

input[type="checkbox"], input[type="radio"] {
  width: auto;
  margin: 0 1rem 0 0!important; /* Right margin for space after checkbox */
  cursor: pointer;
  flex-shrink: 0;
}





/* ===== Has Many Associations (nested forms) ===== */
.has_many_container {
  margin: 2rem 0;
  display: block !important; /* Override any grid from parent */
  grid-template-columns: none !important;
}

/* Hide the duplicate h3 that appears after the legend */
li.has_many_container > h3 {
  display: none !important;
}

/* Keep the fieldset legend visible */
fieldset.inputs > legend.fieldset-title {
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--svl-dark-navy);
  margin-bottom: 1rem;
  display: block;
}

/* Has many add button - NOT full width */
.has_many_add,
a.has_many_add,
.button.has_many_add {
  background-color: var(--svl-red);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  display: inline-block !important;
  width: auto !important;
  margin-bottom: 1.5rem;
  transition: background-color 0.2s ease;
  border: none;
  cursor: pointer;
}

.has_many_add:hover,
a.has_many_add:hover,
.button.has_many_add:hover {
  background-color: var(--svl-red-hover);
}

/* Has many items/fieldsets */
fieldset.has_many_fields {
  background-color: var(--bg-light);
  padding: 1.5rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  position: relative;
}

/* Nested form inner ol - reset list */
fieldset.has_many_fields > ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Fields inside nested forms - use two column grid */
fieldset.has_many_fields > ol > li.input,
fieldset.has_many_fields > ol > li.select,
fieldset.has_many_fields > ol > li.text,
fieldset.has_many_fields > ol > li.datepicker {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  gap: 1rem !important;
  align-items: start;
  margin-bottom: 1rem;
  list-style: none;
}

/* Labels inside nested forms */
fieldset.has_many_fields label.label {
  font-weight: 600;
  font-size: 14px;
  color: var(--svl-dark-navy);
  padding-top: 8px;
  text-align: right;
}

/* Inputs inside nested forms */
fieldset.has_many_fields input[type="text"],
fieldset.has_many_fields textarea,
fieldset.has_many_fields select {
  width: 100%;
  max-width: 400px;
}

/* Remove button container - NO grid layout */
fieldset.has_many_fields > ol > li:has(.has_many_remove) {
  display: block !important;
  grid-template-columns: none !important;
  text-align: left;
  margin-top: 1rem;
}

/* Remove button for has_many items */
.has_many_remove,
a.has_many_remove,
.button.has_many_remove {
  background-color: var(--gray);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  display: inline-block !important;
  width: auto !important;
  transition: background-color 0.2s ease;
  border: none;
  cursor: pointer;
}

.has_many_remove:hover,
a.has_many_remove:hover,
.button.has_many_remove:hover {
  background-color: var(--gray-hover);
}

/* Required field asterisk styling */
abbr[title] {
  color: var(--svl-red);
  text-decoration: none;
  font-weight: bold;
}




/* ===== Submit Buttons ===== */
.actions,
.buttons {
  margin-top: 2rem;
  padding-left: 0; /* Remove offset for right alignment */
  display: flex;
  justify-content: flex-end; /* Right align the buttons */
  gap: 0.5rem;
}

input[type="submit"],
button[type="submit"],
.button {
  background-color: var(--svl-red);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover {
  background-color: var(--svl-red-hover);
}

/* Cancel/delete button - styled like a gray button */
.actions a,
.buttons a {
  background-color: var(--gray);
  color: #ffffff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.actions a:hover,
.buttons a:hover {
  background-color: var(--gray-hover);
  text-decoration: none;
}

.cancel { text-align: center; }

/* ===== Footer ===== */
#footer {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-bottom: 6rem;
  margin-top: 3rem;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}














/* ===== Two-Column Layout (Main Content + Sidebar) ===== */
/* Sidebar below main content */
#active_admin_content {
  display: block;
}

#main_content_wrapper {
  width: 100%;
}

#sidebar {
  width: 100%;
  margin-top: 2rem;
}

/* ===== Collection Selection Table ===== */
#collection_selection table {
  width: 100%;
}

/* ===== Sidebar Filters ===== */
.sidebar {
  background-color: #ffffff;
  padding: 0;
}

.sidebar_section.panel {
  margin: 0;
  padding: 1.5rem;
  border: none;
  border-radius: 0;
}

.sidebar_section h3 {
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--svl-dark-navy);
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--svl-red);
}

/* Filter form fields */
.filter_form_field {
  margin-bottom: 1.5rem;
}

.filter_form_field label.label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--svl-dark-navy);
  margin-bottom: 0.5rem;
  text-align: left;
}

/* Filter inputs and selects - stack vertically */
.filter_form_field.select_and_search select {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
}

.filter_form_field input[type="text"],
.filter_form_field .datepicker {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 0.5rem;
}

.filter_form_field input[type="text"]:last-child,
.filter_form_field .datepicker:last-child {
  margin-bottom: 0;
}

/* Filter buttons */
.filter_form .buttons {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter_form input[type="submit"] {
  width: 100%;
  background-color: var(--svl-red);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.filter_form input[type="submit"]:hover {
  background-color: var(--svl-red-hover);
}

.clear_filters_btn {
  width: 100%;
  background-color: var(--gray);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s ease;
}

.clear_filters_btn:hover {
  background-color: var(--gray-hover);
}

/* ===== Empty State / Blank Slate ===== */
.blank_slate_container {
  display: none !important;
}

.blank_slate {
  display: none !important;
}

.blank_slate a {
  display: none !important;
}

.blank_slate a:hover {
  display: none !important;
}

/* ===== Batch Actions ===== */
.table_tools {
  display: none !important;
}

/* Show batch actions only when index table exists */
.index_content:has(.index_table.index) .table_tools {
  display: block !important;
}

.batch_actions_selector {
  display: inline-block;
}

.dropdown_menu_button {
  background-color: var(--gray);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown_menu_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dropdown_menu_button:hover:not(.disabled) {
  background-color: var(--gray-hover);
}

/* Dropdown menu styling */
.dropdown_menu_list_wrapper {
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-top: 0.5rem;
  z-index: 1000;
}

.dropdown_menu_list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.dropdown_menu_list li a {
  display: block;
  padding: 8px 16px;
  color: var(--svl-dark-navy);
  text-decoration: none;
  font-size: 13px;
  transition: background-color 0.2s ease;
}

.dropdown_menu_list li a:hover {
  background-color: var(--bg-light);
}



/* ===== Sidebar Filters ===== */
.sidebar {
  background-color: #ffffff;
  padding: 0;
}

.sidebar_section.panel {
  margin: 0;
  padding: 1.5rem;
  border: none;
  border-radius: 0;
}

.sidebar_section h3 {
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--svl-dark-navy);
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--svl-red);
}

/* Filter form fields - flex layout for label + inputs on one line */
.filter_form_field {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.filter_form_field label.label {
  font-weight: 600;
  font-size: 13px;
  color: var(--svl-dark-navy);
  text-align: right;
  padding-top: 8px;
  margin: 0;
  min-width: 80px;
  flex-shrink: 0;
}

/* Right side container for inputs */
.filter_form_field {
  flex-wrap: wrap;
}

.filter_form_field > *:not(label) {
  flex: 1;
  min-width: 150px;
}

/* Date range fields - inputs side by side or stacked */
.filter_form_field.filter_date_range input {
  width: calc(50% - 0.25rem);
  display: inline-block;
}

.filter_form_field.filter_date_range input:first-of-type {
  margin-right: 0.5rem;
}

/* Select and search fields */
.filter_form_field.select_and_search select {
  width: 100%;
  margin-bottom: 0.5rem;
}

.filter_form_field.select_and_search input {
  width: 100%;
}

/* All filter inputs and selects */
.filter_form_field select,
.filter_form_field input[type="text"],
.filter_form_field .datepicker {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--primary-font);
}

.filter_form_field select:focus,
.filter_form_field input:focus {
  outline: none;
  border-color: var(--svl-red);
}

/* Filter buttons */
.filter_form .buttons {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter_form input[type="submit"] {
  width: 100%;
  background-color: var(--svl-red);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.filter_form input[type="submit"]:hover {
  background-color: var(--svl-red-hover);
}

.clear_filters_btn {
  width: 100%;
  background-color: var(--gray);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s ease;
}

.clear_filters_btn:hover {
  background-color: var(--gray-hover);
}



/* ===== jQuery UI Datepicker Styling ===== */
.ui-datepicker {
  background-color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 1rem !important;
  font-family: var(--primary-font) !important;
  width: auto !important;
}

/* Datepicker header */
.ui-datepicker .ui-datepicker-header {
  background-color: var(--svl-darker-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  position: relative !important;
}

.ui-datepicker .ui-datepicker-title {
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #ffffff !important;
  line-height: 1.8 !important;
}

.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Navigation arrows */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  border: none !important;
  background: none !important;
  transition: background-color 0.2s ease !important;
}

.ui-datepicker .ui-datepicker-prev {
  left: 0.5rem !important;
}

.ui-datepicker .ui-datepicker-next {
  right: 0.5rem !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block !important;
  text-indent: -9999px !important;
  position: relative !important;
  background: none !important;
}

/* Arrow icons - simple triangles */
.ui-datepicker .ui-datepicker-prev span::after,
.ui-datepicker .ui-datepicker-next span::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
}

.ui-datepicker .ui-datepicker-prev span::after {
  border-width: 6px 8px 6px 0 !important;
  border-color: transparent #ffffff transparent transparent !important;
  transform: translate(-60%, -50%) !important;
}

.ui-datepicker .ui-datepicker-next span::after {
  border-width: 6px 0 6px 8px !important;
  border-color: transparent transparent transparent #ffffff !important;
  transform: translate(-40%, -50%) !important;
}

/* Calendar table */
.ui-datepicker .ui-datepicker-calendar {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

.ui-datepicker .ui-datepicker-calendar th {
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--svl-dark-navy) !important;
  padding: 0.5rem !important;
  text-align: center !important;
}

.ui-datepicker .ui-datepicker-calendar td {
  padding: 2px !important;
  text-align: center !important;
}

.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
  display: block !important;
  padding: 0.5rem !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  color: var(--svl-dark-navy) !important;
  border: none !important;
  background: none !important;
  transition: all 0.2s ease !important;
}

/* Hoverable dates */
.ui-datepicker .ui-datepicker-calendar td a:hover,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover {
  background-color: var(--bg-light) !important;
  color: var(--svl-dark-navy) !important;
}

/* Today's date */
.ui-datepicker .ui-datepicker-today a,
.ui-datepicker .ui-datepicker-today a.ui-state-highlight {
  background-color: var(--svl-red) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.ui-datepicker .ui-datepicker-today a:hover,
.ui-datepicker .ui-datepicker-today a.ui-state-highlight:hover {
  background-color: var(--svl-red-hover) !important;
  color: #ffffff !important;
}

/* Selected date */
.ui-datepicker .ui-datepicker-current-day a {
  background-color: var(--svl-darker-blue) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Disabled/other month dates */
.ui-datepicker .ui-datepicker-other-month,
.ui-datepicker .ui-datepicker-unselectable {
  opacity: 0.3 !important;
}

/* Weekend styling */
.ui-datepicker .ui-datepicker-week-end a {
  color: var(--text-secondary) !important;
}



/* ===== Select/Dropdown Styling ===== */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Select dropdown menu (options) - limited styling available */
select option {
  padding: 8px 12px;
  background-color: #ffffff;
  color: var(--svl-dark-navy);
  font-size: 14px;
}

select option:hover,
select option:focus,
select option:checked {
  background-color: var(--bg-light);
  color: var(--svl-dark-navy);
}

/* For filter form selects specifically */
.filter_form_field select {
  background-color: #ffffff;
  color: var(--svl-dark-navy);
}

.filter_form_field select:hover {
  border-color: var(--svl-red);
}

/* Form selects */
form select,
.input select {
  background-color: #ffffff;
  color: var(--svl-dark-navy);
}




/* ============================================================================
   ACTIVEADMIN TABLE IMPROVEMENTS
   ============================================================================ */

/* Table Container */
.index_as_table {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

/* Table Base Styling */
.index_table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: #fff;
}

/* Table Headers */
.index_table thead th {
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  color: #495057;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 12px;
  border-bottom: 2px solid #dee2e6;
  white-space: nowrap;
}

/* Sortable Column Headers */
.index_table thead th.sortable a {
  color: #495057;
  text-decoration: none;
  display: block;
  padding: 0;
}

.index_table thead th.sortable a:hover {
  color: #2c3e50;
}

.index_table thead th.sorted-asc a,
.index_table thead th.sorted-desc a {
  color: #2c3e50;
  font-weight: 700;
}

/* Table Body Rows */
.index_table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid #e9ecef;
}

.index_table tbody tr:hover {
  background-color: #f8f9fa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Alternate Row Colors (Zebra Striping) */
.index_table tbody tr.odd {
  background-color: #ffffff;
}

.index_table tbody tr.even {
  background-color: #f8f9fa;
}

.index_table tbody tr.odd:hover,
.index_table tbody tr.even:hover {
  background-color: #e3f2fd;
}

/* Table Cells */
.index_table tbody td {
  padding: 14px 12px;
  color: #495057;
  font-size: 14px;
  vertical-align: middle;
}

/* ID Column */
.index_table .col-id {
  font-weight: 600;
  color: #6c757d;
}

.index_table .col-id a {
  color: #007bff;
  text-decoration: none;
  font-weight: 600;
}

.index_table .col-id a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Status Tags */
.status_tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status_tag.yes,
.status_tag.active {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status_tag.no,
.status_tag.inactive {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Action Links */
.table_actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.table_actions a {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* View Link */
.table_actions .view_link {
  background-color: #e7f3ff;
  color: #0066cc;
  border: 1px solid #99ccff;
}

.table_actions .view_link:hover {
  background-color: #cce5ff;
  border-color: #66b2ff;
}

/* Edit Link */
.table_actions .edit_link {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.table_actions .edit_link:hover {
  background-color: #ffe69c;
  border-color: #ffd966;
}

/* Delete Link */
.table_actions .delete_link {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.table_actions .delete_link:hover {
  background-color: #f1b0b7;
  border-color: #e3969c;
}

/* Checkbox Column */
.col-selectable {
  width: 40px;
  text-align: center;
}

.col-selectable input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

/* Actions Column */
.col-actions {
  width: 200px;
  text-align: right;
}

/* Pagination Information */
.pagination_information {
  padding: 16px 20px;
  font-size: 14px;
  color: #6c757d;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
}

.pagination_information b {
  color: #2c3e50;
  font-weight: 600;
}

/* Download Links */
.download_links {
  padding: 12px 20px;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  display: flex;
  gap: 12px;
  align-items: center;
}

.download_links span {
  font-weight: 600;
  color: #6c757d;
  font-size: 13px;
}

.download_links a {
  padding: 6px 14px;
  background-color: #fff;
  color: #495057;
  text-decoration: none;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.download_links a:hover {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* Batch Actions Panel */

/* Empty State */
.index_content .blank_slate {
  display: none !important;
}

.blank_slate_contents {
  display: none !important;
}

/* Apply table styling to show and edit pages */
.show_page table,
.edit_page table,
form table,
.attributes_table {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: #fff;
}

.show_page table th,
.edit_page table th,
form table th,
.attributes_table th {
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  color: #495057;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 12px;
  border-bottom: 2px solid #dee2e6;
  text-align: left;
}

.show_page table td,
.edit_page table td,
form table td,
.attributes_table td {
  padding: 14px 12px;
  color: #495057;
  font-size: 14px;
  vertical-align: middle;
  border-bottom: 1px solid #e9ecef;
}

.show_page table tr:hover,
.attributes_table tbody tr:hover {
  background-color: #f8f9fa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.show_page table tr.odd,
.attributes_table tbody tr.odd {
  background-color: #ffffff;
}

.show_page table tr.even,
.attributes_table tbody tr.even {
  background-color: #f8f9fa;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .table_actions {
    flex-direction: column;
    gap: 4px;
  }
  
  .table_actions a {
    display: block;
    text-align: center;
  }
  
  .index_table thead th {
    font-size: 11px;
    padding: 12px 8px;
  }
  
  .index_table tbody td {
    font-size: 13px;
    padding: 10px 8px;
  }
}

/* Specific Column Width Improvements */
.col-display_order {
  width: 100px;
  text-align: center;
}

.col-active {
  width: 80px;
  text-align: center;
}

.col-code {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  color: #6c757d;
  background-color: #f8f9fa;
}

.col-created_at,
.col-updated_at {
  white-space: nowrap;
  color: #6c757d;
  font-size: 13px;
}

/* Japanese Text Optimization */
.col-name_ja {
  font-weight: 500;
  color: #2c3e50;
}

/* Hover Effect for Resource Links */
.index_table tbody tr:hover .col-name_ja,
.index_table tbody tr:hover .col-name_en {
  color: #007bff;
}

/* Selection Highlight */
.index_table tbody tr.selected {
  background-color: #e3f2fd !important;
  border-left: 3px solid #007bff;
}

/* Filter Sidebar */
#sidebar {
  padding: 20px;
  border-radius: 4px;
}

#filters_sidebar_section {
  background: #fff;
  padding: 20px;
}

/* New Button */
.action_item a {
  background: linear-gradient(180deg, #28a745 0%, #218838 100%);
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
  transition: all 0.2s ease;
}

.action_item a:hover {
  background: linear-gradient(180deg, #218838 0%, #1e7e34 100%);
  box-shadow: 0 4px 6px rgba(40, 167, 69, 0.4);
  transform: translateY(-1px);
}

/* Batch Action Buttons */
input[type="submit"].batch_action_button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="submit"].batch_action_button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0;max-width:100%;resize:none;height:18px;vertical-align:bottom;font-family:sans-serif;overflow:hidden;word-break:keep-all}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;padding-bottom:5px;padding-right:5px;position:relative}.select2-container--default .select2-selection--multiple.select2-selection--clearable{padding-right:25px}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:bold;height:20px;margin-right:10px;margin-top:5px;position:absolute;right:0;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:inline-block;margin-left:5px;margin-top:5px;padding:0;padding-left:20px;position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-right:1px solid #aaa;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#999;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px;position:absolute;left:0;top:0}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color:#f1f1f1;color:#333;outline:none}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-left:1px solid #aaa;border-right:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{float:left;margin-left:10px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--group{padding:0}.select2-container--default .select2-results__option--disabled{color:#999}.select2-container--default .select2-results__option--selected{background-color:#ddd}.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;padding-bottom:5px;padding-right:5px}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;display:inline-block;margin-left:5px;margin-top:5px;padding:0}.select2-container--classic .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#888;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;outline:none}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option--group{padding:0}.select2-container--classic .select2-results__option--disabled{color:grey}.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}

body.sessions {
  background-color: var(--gray);
  font-family: var(--primary-font);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.login-container {
  max-width: 360px;
  width: 100%;
  padding: 40px;
  background-color: var(--svl-red);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.login-container img {
  max-width: 200px;
  margin-bottom: 30px;
}

.login-container h1 {
  color: #ffffff;
  font-family: var(--heading-font);
  margin-bottom: 30px;
  font-size: 24px;
}

.login-container input[type="text"], .login-container input[type="password"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus {
  outline: none;
  border-color: var(--svl-red);
}

.login-container input[type="submit"] {
  width: 100%;
  padding: 12px 20px;
  background-color: var(--svl-darker-blue);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.login-container input[type="submit"]:hover {
  background-color: var(--svl-dark-navy);
}

.login-container .alert {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffcccc;
  padding: 10px;
  border-radius: 4px;
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
}

.login-container .alert.hidden {
  background-color: transparent;
  color: transparent;
}






/*


 */