/* College App App - Custom Styles */

/* Color palette */
:root {
  --periwinkle-light: #e4f4f2;
  --periwinkle-dark: #2a9d8f;

  /* Wire teal into Bulma 1.0's primary color (HSL: 173, 58%, 39%) */
  --bulma-primary-h: 173deg;
  --bulma-primary-s: 58%;
  --bulma-primary-l: 39%;

  /* Transparent body so html gradient shows through */
  --bulma-body-background-color: transparent;

  /* Override Bulma 1.0 font family CSS custom properties */
  --bulma-family-primary: 'Open Sans', sans-serif;
  --bulma-family-secondary: 'Open Sans', sans-serif;
  --bulma-family-sans-serif: 'Open Sans', sans-serif;
  --bulma-family-code: monospace;
}

html {
  background: radial-gradient(ellipse at 60% 10%, #bde4df 0%, var(--periwinkle-light) 60%);
  min-height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: transparent !important;
  min-height: 100vh;
}

/* Serif for display headings and navbar */
.title, .subtitle, h1, h2, h3,
.navbar, .navbar-item, .navbar-brand {
  font-family: 'Libre Baskerville', Georgia, serif;
}


/* Status colors for college list rows */
.status-applying { background-color: #effaf5 !important; }
.status-likely { background-color: #eff5fb !important; }
.status-considering { background-color: #fffaeb !important; }
.status-unlikely { background-color: #feecf0 !important; }
.status-not_applying { background-color: #f5f5f5 !important; }
.status-applied { background-color: #eff1fa !important; }
.status-accepted { background-color: #dbf5e8 !important; }
.status-deferred { background-color: #fff3d6 !important; }
.status-waitlisted { background-color: #fff3d6 !important; }
.status-rejected { background-color: #fde0e6 !important; }
.status-enrolled { background-color: #ebf0f7 !important; }

/* Active navbar item */
.navbar-item.is-active {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Boxes: semi-transparent so the gradient shows through */
.box {
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(2px);
}

/* Tables: transparent background, white rows */
.table {
  background-color: transparent !important;
}
.table thead tr {
  background-color: rgba(255, 255, 255, 0.6);
}
.table tbody tr {
  background-color: rgba(255, 255, 255, 0.55);
}
.table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Table improvements */
.table td, .table th {
  vertical-align: middle;
}

.table-container {
  overflow-x: auto;
}

/* Character counter styling */
.char-counter {
  font-size: 0.8rem;
  color: #7a7a7a;
}
.char-counter.is-over {
  color: #f14668;
  font-weight: bold;
}
.char-counter.is-near {
  color: #ffe08a;
}