/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


/* Solarized Light Theme for Bootstrap */
:root {
  /* Solarized Palette Defaults */
  --base03: #002b36;
  --base02: #073642;
  --base01: #586e75;
  --base00: #657b83;
  --base0: #839496;
  --base1: #93a1a1;
  --base2: #eee8d5;
  --base3: #fdf6e3;
  --yellow: #b58900;
  --orange: #cb4b16;
  --red: #dc322f;
  --magenta: #d33682;
  --violet: #6c71c4;
  --blue: #268bd2;
  --cyan: #2aa198;
  --green: #859900;

  /* Bootstrap Variable Overrides */
  --bs-body-bg: var(--base3);
  --bs-body-color: var(--base00);
  --bs-primary: var(--blue);
  --bs-secondary: var(--base01);
  --bs-success: var(--green);
  --bs-info: var(--cyan);
  --bs-warning: var(--yellow);
  --bs-danger: var(--red);
  --bs-light: var(--base2);
  --bs-dark: var(--base02);

  --bs-primary-rgb: 38, 139, 210;
  --bs-secondary-rgb: 88, 110, 117;
  --bs-success-rgb: 133, 153, 0;
  --bs-info-rgb: 42, 161, 152;
  --bs-warning-rgb: 181, 137, 0;
  --bs-danger-rgb: 220, 50, 47;
  --bs-light-rgb: 238, 232, 213;
  --bs-dark-rgb: 7, 54, 66;

  --bs-link-color: var(--blue);
  --bs-link-hover-color: var(--base03);
  --bs-border-color: var(--base2);
}

.card {
  background-color: var(--base3);
  border-color: var(--base2);
}

.card-header, .card-footer {
  background-color: var(--base2);
}

.list-group-item {
  background-color: var(--base3);
  border-color: var(--base2);
  color: var(--base00);
}

.bg-light {
  background-color: var(--base2) !important;
}

.bg-white {
  background-color: var(--base3) !important;
}

.text-muted {
  color: var(--base01) !important;
}

.text-dark {
  color: var(--base03) !important;
}

/* Real Book Style for Reading Screen */
.book-page-wrapper {
  background-color: var(--base3); /* Off-white page color */
  color: var(--base02); /* Charcoal text for high contrast but softer than pure black */
  font-family: 'Merriweather', 'Georgia', 'Times New Roman', serif;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  padding: 4rem 3rem;
  border-radius: 4px;
  /* Simulating physical page depth and shadow */
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.03),
               5px 0 15px rgba(0, 0, 0, 0.03),
               0 10px 20px rgba(0, 0, 0, 0.05);
  line-height: 1.8;
  font-size: 1.25rem;
  text-align: justify; /* Justified text for a true book feel */
  position: relative;
  /* Subtle inner gradient to simulate page curvature */
  background-image: linear-gradient(
    to right, 
    rgba(0,0,0,0.03) 0%, 
    rgba(0,0,0,0.0) 3%, 
    rgba(0,0,0,0.0) 97%, 
    rgba(0,0,0,0.03) 100%
  );
}

.book-page-wrapper p {
  margin-bottom: 0; /* Remove bottom margin for traditional indenting */
  text-indent: 2em; /* Indent all paragraphs */
}

/* First paragraph shouldn't be indented */
.book-page-wrapper p:first-of-type {
  text-indent: 0;
  margin-bottom: 1em; /* Add a bit of space below the first paragraph, or not */
}

/* Drop cap for the first letter of the chapter */
.book-page-wrapper p:first-of-type::first-letter {
  font-size: 3.8rem;
  font-weight: bold;
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
  margin-top: 0.05em;
  color: var(--base03); /* Deepest tone for the drop cap */
  text-transform: uppercase;
}

/* Timing Editor Hover Styles */
.sentence-content-display {
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.sentence-content-display:hover {
  background-color: var(--base2);
}