/* Modern Color Palette for Breedbase
 * Primary: #fa9b53 (warm orange)
 * Secondary: #425518 (olive green)
 * 
 * Color System:
 * --primary-orange: #fa9b53
 * --primary-orange-light: #fbb57a
 * --primary-orange-lighter: #fdd0a1
 * --primary-orange-dark: #e87d2b
 * --primary-orange-darker: #d66e1f
 * 
 * --secondary-green: #324010 (darker olive green)
 * --secondary-green-light: #425518
 * --secondary-green-lighter: #5a7425
 * --secondary-green-dark: #1f280a
 * --secondary-green-darker: #0f1405
 * 
 * --accent-warm: #ffecd6 (light peachy background)
 * --accent-cool: #e8f0e0 (light sage background)
 * 
 * --neutral-50: #fafafa
 * --neutral-100: #f5f5f5
 * --neutral-200: #e5e5e5
 * --neutral-300: #d4d4d4
 * --neutral-400: #a3a3a3
 * --neutral-500: #737373
 * --neutral-600: #525252
 * --neutral-700: #404040
 * --neutral-800: #262626
 * --neutral-900: #171717
 * 
 * --success: #5a7425
 * --warning: #fa9b53
 * --error: #dc2626
 * --info: #425518
 */

:root {
  --primary-orange: #fa9b53;
  --primary-orange-light: #fbb57a;
  --primary-orange-lighter: #fdd0a1;
  --primary-orange-dark: #e87d2b;
  --primary-orange-darker: #d66e1f;
  
  --secondary-green: #324010;
  --secondary-green-light: #425518;
  --secondary-green-lighter: #5a7425;
  --secondary-green-dark: #1f280a;
  --secondary-green-darker: #0f1405;
  
  --accent-warm: #ffecd6;
  --accent-cool: #e8f0e0;
  
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  
  --success: #5a7425;
  --warning: #fa9b53;
  --error: #dc2626;
  --info: #425518;
  
  --border-radius: 6px;
  --border-radius-sm: 4px;
  --border-radius-lg: 8px;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Override old blue theme with modern orange/green */

/* Links */
a:link {
  color: var(--secondary-green);
  text-decoration: none;
}

a:active {
  color: var(--secondary-green-dark);
  text-decoration: none;
}

a:visited {
  color: var(--secondary-green-light);
  text-decoration: none;
}

a:hover {
  color: var(--primary-orange);
  text-decoration: underline;
}

a.hidevisited:link,
a.hidevisited:active,
a.hidevisited:visited {
  color: var(--secondary-green);
}

a.hidevisited:hover {
  color: var(--primary-orange);
}

/* Primary brand color (replaces SGN blue #ccccff) */
#xtratbl {
  background-color: var(--accent-warm);
  border: 1px solid var(--neutral-300);
}

input, select, textarea {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-300);
  border-radius: var(--border-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 3px rgba(250, 155, 83, 0.1);
}

/* Status colors */
.bgcolorstatus1 a, .bgcolorstatus1 span.nolink {
  background-color: var(--neutral-200);
  border: 1px solid var(--neutral-400);
}

.bgcolorstatus2 a, .bgcolorstatus2 span.nolink {
  background-color: var(--accent-warm);
  border: 1px solid var(--primary-orange-light);
}

.bgcolorstatus3 a, .bgcolorstatus3 span.nolink {
  background-color: var(--accent-cool);
  border: 1px solid var(--secondary-green-light);
}

.bgcolorstatus4 a, .bgcolorstatus4 span.nolink {
  background-color: var(--primary-orange-lighter);
  border: 1px solid var(--primary-orange);
}

/* Alternating backgrounds */
.bgcoloralt2 {
  background-color: var(--neutral-50);
}

.bgcoloralt1 {
  background-color: white;
}

/* Selected/highlighted items */
.bgcolorselected {
  background-color: var(--accent-warm);
}

.sgnblue {
  background-color: var(--accent-warm);
}

/* Alert and warning colors */
.alert {
  font-weight: 600;
  color: white;
  background-color: var(--error);
  border-radius: var(--border-radius-sm);
  padding: 0.5rem 1rem;
}

.warning {
  color: var(--error);
  background-color: #fef2f2;
  border-left: 4px solid var(--error);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm);
}

.news {
  color: var(--primary-orange-dark);
}

/* Info sections - modern styling */
.infosectionhead,
.infosectionhead_empty,
.sub_infosectionhead,
.sub_infosectionhead_empty {
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-50));
  border-bottom: 2px solid var(--primary-orange);
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
  padding: 0.75rem 1rem;
}

/* Buttons and interactive elements */
button.modesel_hi {
  color: white;
  background-color: var(--secondary-green);
  border-color: var(--secondary-green-dark);
  border-radius: var(--border-radius-sm);
  transition: all 0.15s ease;
}

button.modesel_hi:hover {
  background-color: var(--secondary-green-light);
  border-color: var(--secondary-green);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

button.modesel {
  color: white;
  background-color: var(--primary-orange);
  border-color: var(--primary-orange-dark);
  border-radius: var(--border-radius-sm);
  transition: all 0.15s ease;
}

button.modesel:hover {
  background-color: var(--primary-orange-dark);
  border-color: var(--primary-orange-darker);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Tab styling */
td.modesel_c_hi {
  background: var(--secondary-green);
  color: white;
}

td.modesel_c {
  background: var(--neutral-200);
}

/* Multilevel select - modern colors */
div.multilevel_modesel_level_1 {
  border: 1px solid var(--neutral-300);
  background-color: var(--accent-warm);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

div.multilevel_modesel_level_2 {
  border: 1px solid var(--neutral-300);
  background-color: var(--accent-cool);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

div.multilevel_modesel_level_0 a.multilevel_modesel_active,
div.multilevel_modesel_level_0 a.multilevel_modesel_parent_active {
  background-color: var(--accent-warm);
  color: var(--secondary-green-dark);
}

div.multilevel_modesel_level_1 a.multilevel_modesel_active,
div.multilevel_modesel_level_1 a.multilevel_modesel_parent_active {
  background-color: var(--accent-cool);
  color: var(--secondary-green-dark);
}

div.multilevel_modesel_level_2 a.multilevel_modesel_active,
div.multilevel_modesel_level_2 a.multilevel_modesel_parent_active {
  background-color: var(--secondary-green-light);
  color: white;
}

/* Pagination */
span.paginate_nav_currpage {
  font-weight: 600;
  border: 2px solid var(--primary-orange);
  color: var(--secondary-green-dark);
  background-color: var(--accent-warm);
  border-radius: var(--border-radius-sm);
  padding: 0.25rem 0.5rem;
}

/* Boxes - modern styling */
.boxbgcolor2 {
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-300);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.boxbgcolor3 {
  background-color: var(--accent-warm);
  border: 1px solid var(--primary-orange-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.boxbgcolor6 {
  background-color: var(--accent-cool);
  border: 1px solid var(--secondary-green-light);
  border-radius: var(--border-radius);
}

/* Toolbar */
a.toolbar_item:hover,
a.toolbar_item_first:hover {
  background: var(--accent-warm);
  border: 1px solid var(--primary-orange);
  color: var(--secondary-green-dark);
}

/* Developer bar */
div.devbar {
  background-color: var(--accent-cool);
  border-bottom: 2px solid var(--secondary-green);
}

/* BLAST hits */
td.blasthit_db {
  background: var(--accent-warm);
  border-left: 3px solid var(--primary-orange);
}

a.blasthit_db:hover {
  background: var(--accent-warm);
}

td.blasthit_id {
  background: var(--neutral-50);
}

/* Tables */
table.columnar_table {
  border: 1px solid var(--neutral-300);
  border-radius: var(--border-radius);
  overflow: hidden;
}

th.columnar_table {
  border-bottom: 2px solid var(--primary-orange);
  background: var(--neutral-100);
  font-weight: 600;
}

/* Optional show sections */
div.optional_show {
  border: 1px solid var(--neutral-300);
  background: var(--neutral-50);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

div.abstract_optional_show {
  background: var(--accent-warm);
  border: 1px solid var(--primary-orange-light);
  border-radius: var(--border-radius-sm);
}

/* Link styling for link buttons */
input.linkstyle {
  color: var(--secondary-green);
  background: white;
}

input.linkstyle:hover {
  color: var(--primary-orange);
}

/* Developer error box */
.developererrorbox {
  background-color: #fef2f2;
  border: 1px solid var(--error);
  border-left: 4px solid var(--error);
  border-radius: var(--border-radius);
}

/* Minor box */
div.minorbox {
  border: 1px solid var(--neutral-300);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-sm);
}

/* Deprecated notice */
div.deprecated {
  border: 1px dashed var(--error);
  background-color: #fef2f2;
  color: var(--error);
  border-radius: var(--border-radius-sm);
}

/* Tooltips */
#simpleTooltip {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--neutral-300);
  background: white;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-md);
}

/* Info tables */
th.sub_info_table,
th.info_table {
  background: var(--neutral-100);
  border-bottom: 1px solid var(--neutral-300);
}

/* Highlighted text */
.highlighted, .badseq {
  background: var(--accent-warm);
  border-radius: 2px;
  padding: 0 2px;
}

.hilite {
  background: var(--accent-warm);
  border-radius: 2px;
  padding: 0 2px;
}

/* Forum topics */
.topicbox {
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-300);
  border-radius: var(--border-radius);
}

.topicdescbox {
  background-color: var(--accent-cool);
  border: 1px solid var(--neutral-300);
  border-top: 0;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* Publication styles */
div.publication_embedded .detail {
  border: 1px solid var(--neutral-300);
  background: var(--neutral-50);
  border-radius: var(--border-radius);
}

div.publication_embedded .citation {
  background: var(--neutral-100);
  border-radius: var(--border-radius-sm);
}

/* Search forms */
input.quicksearch.field {
  border: 1px solid var(--neutral-300);
  background: white;
  border-radius: var(--border-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.quicksearch.field:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 3px rgba(250, 155, 83, 0.1);
}

/* Headings - add subtle color */
.boxheading {
  border-bottom: 2px solid var(--primary-orange);
  color: var(--secondary-green-dark);
}

/* Modern card-like borders */
.boxbgcolor1,
.boxbgcolor5 {
  border: 1px solid var(--neutral-300);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

/* Context help */
a.context_help {
  color: var(--neutral-600);
}

a.context_help:hover {
  color: var(--primary-orange);
}

/* Sequence methionine highlight */
.sequence .methionine {
  color: var(--secondary-green-dark);
  font-weight: 600;
}

/* Cross-reference rich display */
div.xref_rich_gbrowse2 {
  border: 1px solid var(--neutral-300);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

/* ===== Bootstrap Button Overrides ===== */

/* Primary button - use secondary green */
.btn-primary {
  color: #fff !important;
  background-color: var(--secondary-green) !important;
  border-color: var(--secondary-green-dark) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff !important;
  background-color: var(--secondary-green-light) !important;
  border-color: var(--secondary-green) !important;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff !important;
  background-color: var(--secondary-green-dark) !important;
  border-color: var(--secondary-green-darker) !important;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus {
  color: #fff !important;
  background-color: var(--secondary-green-darker) !important;
  border-color: var(--secondary-green-darker) !important;
}

/* Success button - use green light */
.btn-success {
  color: #fff !important;
  background-color: var(--secondary-green-light) !important;
  border-color: var(--secondary-green) !important;
}

.btn-success:hover,
.btn-success:focus {
  color: #fff !important;
  background-color: var(--secondary-green-lighter) !important;
  border-color: var(--secondary-green-light) !important;
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #fff !important;
  background-color: var(--secondary-green) !important;
  border-color: var(--secondary-green-dark) !important;
}

/* Info button - use primary orange */
.btn-info {
  color: #fff !important;
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange-dark) !important;
}

.btn-info:hover,
.btn-info:focus {
  color: #fff !important;
  background-color: var(--primary-orange-dark) !important;
  border-color: var(--primary-orange-darker) !important;
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff !important;
  background-color: var(--primary-orange-darker) !important;
  border-color: var(--primary-orange-darker) !important;
}

/* Warning button - use orange */
.btn-warning {
  color: #fff !important;
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange-dark) !important;
}

.btn-warning:hover,
.btn-warning:focus {
  color: #fff !important;
  background-color: var(--primary-orange-dark) !important;
  border-color: var(--primary-orange-darker) !important;
}

.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #fff !important;
  background-color: var(--primary-orange-darker) !important;
  border-color: var(--primary-orange-darker) !important;
}

/* Danger button - keep red but modernize */
.btn-danger {
  color: #fff !important;
  background-color: var(--error) !important;
  border-color: #b91c1c !important;
}

.btn-danger:hover,
.btn-danger:focus {
  color: #fff !important;
  background-color: #b91c1c !important;
  border-color: #991b1b !important;
}

.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  color: #fff !important;
  background-color: #991b1b !important;
  border-color: #7f1d1d !important;
}

/* Default button - modern neutral */
.btn-default {
  color: var(--neutral-700) !important;
  background-color: white !important;
  border-color: var(--neutral-300) !important;
}

.btn-default:hover,
.btn-default:focus {
  color: var(--neutral-800) !important;
  background-color: var(--neutral-50) !important;
  border-color: var(--neutral-400) !important;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: var(--neutral-900) !important;
  background-color: var(--neutral-100) !important;
  border-color: var(--neutral-400) !important;
}

/* Link button - use secondary green */
.btn-link {
  color: var(--secondary-green);
}

.btn-link:hover,
.btn-link:focus {
  color: var(--primary-orange);
  text-decoration: underline;
}

/* Add modern transitions and shadows to all buttons */
.btn {
  transition: all 0.15s ease-in-out;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn:hover,
.btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.btn:active,
.btn.active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.btn-link {
  box-shadow: none;
  transform: none;
}

.btn-link:hover,
.btn-link:focus {
  box-shadow: none;
  transform: none;
}

/* ===== DataTables Sorting Arrows Override ===== */

/* Remove default DataTables background images and use modern CSS arrows */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-image: none !important;
  cursor: pointer;
  position: relative;
  padding-right: 30px !important;
}

/* Unsorted state - show both arrows faded */
table.dataTable thead .sorting::after {
  content: " ↕";
  position: absolute;
  right: 10px;
  color: var(--neutral-400);
  font-size: 12px;
  opacity: 0.5;
}

/* Ascending sort - show up arrow in orange */
table.dataTable thead .sorting_asc::after {
  content: " ▲";
  position: absolute;
  right: 10px;
  color: var(--primary-orange);
  font-size: 10px;
  font-weight: bold;
}

/* Descending sort - show down arrow in orange */
table.dataTable thead .sorting_desc::after {
  content: " ▼";
  position: absolute;
  right: 10px;
  color: var(--primary-orange);
  font-size: 10px;
  font-weight: bold;
}

/* Hover state for sortable columns */
table.dataTable thead .sorting:hover,
table.dataTable thead .sorting_asc:hover,
table.dataTable thead .sorting_desc:hover {
  background-color: var(--accent-warm) !important;
}

/* Disabled sorting states */
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
  opacity: 0.3;
  cursor: not-allowed;
}