/* ================================================
   DRAGONEYE THEME — Gold, orange, red over black
   This file defines all color and visual styles
   for the Dragoneye version of the site
   ================================================ */

/* Base colors for background and text */
body {
  background-color: #000000;        /* Deep black background */
  color: #ffcc00;                   /* Gold text as the default */
}

/* Headings — vivid themed hierarchy */
h1 { color: #ff0000; }              /* Bright red title */
h2 { color: #ffa500; }              /* Orange subtitle */
h3 { color: #ffcc00; }              /* Gold section headers */
h4 { color: #e6e6e6; }
h5 { color: #cccccc; }
h6 { color: #999999; }

/* Usage box — themed to match subtitle (h2) */
.usage-box {
  color: #ffa500;                   /* Orange like h2 */
  border: 1px solid #ffa500;        /* Matching border for theme unity */
}

/* Links and interactivity */
a {
  color: #cccccc;                   /* Light grey links */
}
a:hover {
  color: #ffffff;                   /* Light hover on dark theme; pairs with WKSA blue accents */
}

/* Containers: card and box backgrounds + borders */
.card {
  background-color: #220000;        /* Very dark red */
  border: 1px solid #ff0000;        /* Bright red border */
}

/* Dashboard: title + personal fields — single panel (not .card; avoids double chrome) */
.dashboard-page .dashboard-header-personal {
  background-color: #220000;
  border: 1px solid #ff0000;
}

.box {
  background-color: #330000;        /* Slightly lighter red background */
  border: 1px solid #ffcc00;        /* Gold border */
}

/* Table styling */
th, td {
  border: 1px solid #ffcc00;
}
th {
  background-color: #220000;
  color: #ffcc00;
}

/* Forms and field colors */
input, select, textarea {
  border-color: #ffcc00;            /* Gold border */
  background-color: #000000;        /* Black fill */
  color: #ffcc00;                   /* Gold text */
}

.dashboard-page .dashboard-reset-button {
  background-color: #ffcc00;
  color: #000000;
  border-color: #ffa500;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.dashboard-page .dashboard-reset-button:hover,
.dashboard-page .dashboard-reset-button:focus {
  background-color: #b30000;
  color: #ffffff;
  border-color: #ffcc00;
}

/* Focus ring effect */
input:focus, select:focus, textarea:focus {
  border-color: #ff0000;            /* Red highlight on focus */
}

/* Buttons — red/gold theme */
.btn {
  background-color: #ffcc00;        /* Gold fill */
  color: #000000;                   /* Black text */
  border-color: #ffa500;            /* Orange border */
}

.btn:hover {
  background-color: #001489;        /* WKSA flag field blue */
  color: #ffffff;
  border-color: #000f6a;
}

/* Visual separator */
hr {
  background-color: #ffcc00;
}

/* Blockquote styling */
blockquote {
  border-color: #ffcc00;
  background-color: #110000;        /* Deep red-black background */
  color: #ffcc00;
}

/* Code blocks */
code, pre {
  background-color: #110000;
  color: #ffcc00;
}

code a {
  color: #ff0000;
}

code a:hover {
  color: #ffffff;
}

/* Mobile top nav: no outer border (buttons keep their own outlines) */
@media (max-width: 768px) {
  .site-nav--mobile-top.card {
    border: none;
    border-radius: 6px;
  }

  body.about-page .site-nav--mobile-top.card {
    background-color: #220000;
    border: none;
    border-radius: 0 0 6px 6px;
  }
}

/* About page: footer Contact US — gold fill; border matches .card / top nav (1px #ff0000, same as header & main) */
body.about-page .about-contact-address.card,
body.about-page .about-contact-address.card:visited {
  display: block;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: #ffcc00;
  border: 1px solid #ff0000;
  color: #000000;
}

body.about-page .about-contact-address.card p {
  margin: 0;
  line-height: 1.35;
  font-size: 0.95rem;
  font-weight: 700;
  color: #000000;
}

body.about-page .about-contact-address.card strong {
  color: #000000;
}

body.about-page .about-contact-address.card:hover,
body.about-page .about-contact-address.card:focus-visible {
  background-color: #ffd54a;
  border-color: #ff0000;
}

/* Student dashboard: gold headings, white paragraphs and list items */
.dashboard-page h1,
.dashboard-page h2,
.dashboard-page h3,
.dashboard-page h4,
.dashboard-page h5,
.dashboard-page h6 {
  color: #ffcc00;
}

.dashboard-page p,
.dashboard-page li {
  color: #ffffff;
}

.dashboard-page h4 {
  text-align: center;
}

/* Native date picker: keep calendar icon visible & tappable (WebKit/Blink) */
.dashboard-page input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  padding: 0.2rem;
  margin-left: 0.25rem;
}

.dashboard-page input[readonly] {
  cursor: default;
  opacity: 0.95;
}

.dashboard-page .requirements-section-divider {
  border-top-color: rgba(255, 204, 0, 0.35);
}

.dashboard-page .requirement-section-heading {
  color: #ffcc00;
}

.dashboard-page .requirement-section-subtext {
  color: #e8e0d0;
}

.dashboard-page .requirement-major-section--by-status {
  background-color: #220000;
  border: 1px solid #ff0000;
}

.dashboard-page .requirement-rank-heading {
  color: #ffcc00;
}

.dashboard-page .requirement-type-heading {
  color: #ffcc00;
}

.dashboard-page .requirement-section-empty {
  color: #cccccc;
}

.dashboard-page .requirement-table td {
  color: #ffffff;
}

.dashboard-page .requirement-key {
  color: #aaaaaa;
  font-weight: 500;
}

.dashboard-page .dashboard-modal {
  background-color: #220000;
  border: 1px solid #ff0000;
}

.dashboard-page .dashboard-modal-title {
  color: #ffcc00;
}

.dashboard-page .dashboard-modal-body {
  color: #ffffff;
}

.dashboard-page .scroll-controls-btn {
  background-color: #ffcc00;
  color: #000000;
  border-color: #ffa500;
}

.dashboard-page .scroll-controls-btn:hover,
.dashboard-page .scroll-controls-btn:focus,
.dashboard-page .scroll-controls-btn:active {
  background-color: #00aa00;
  color: #ffffff;
  border-color: #ffffff;
}