/* jail.css
   ============================================================
   Modes:
   - body.jail-page[data-jail-dark="0"] = normal / good / okay
   - body.jail-page[data-jail-dark="1"] = danger / thin ice / jail
   ============================================================
*/

/* ------------------------------------------------------------
   LIGHT MODE (good / still good / the best)
   ------------------------------------------------------------ */
body.jail-page[data-jail-dark="0"] {
  color: #1a1a1a;
}

/* glass cards (status box, log form, actions panel) */
body.jail-page[data-jail-dark="0"] .glass-card {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  box-shadow: 0 18px 32px rgba(0,0,0,0.18);
  color: #1a1a1a;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* headline-ish text inside cards */
body.jail-page[data-jail-dark="0"] .jail-status-text,
body.jail-page[data-jail-dark="0"] .jail-current-status-label,
body.jail-page[data-jail-dark="0"] .jail-form-label {
  color: #1a1a1a;
}

/* descriptive / helper text */
body.jail-page[data-jail-dark="0"] .jail-status-sub,
body.jail-page[data-jail-dark="0"] .jail-save-note,
body.jail-page[data-jail-dark="0"] .jail-form-hint,
body.jail-page[data-jail-dark="0"] .jail-legal {
  color: #444;
}

/* timestamp / meta text in the action list */
body.jail-page[data-jail-dark="0"] .jail-history-meta {
  color: #555;
}

/* input fields (light mode) */
body.jail-page[data-jail-dark="0"] .jail-input {
  background-color: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.25);
  color: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  font-size: 0.9rem;
}
body.jail-page[data-jail-dark="0"] .jail-input::placeholder {
  color: rgba(0,0,0,0.5);
}

/* "Add Action" button in light mode */
body.jail-page[data-jail-dark="0"] .jail-submit-btn {
  background: linear-gradient(90deg, #5bc0f8 0%, #7b4cff 100%);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  font-weight: 600;
  width: 100%;
  padding: 0.8rem 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* ------------------------------------------------------------
   DARK / TROUBLE MODE (thin ice / ice broken / jail)
   ------------------------------------------------------------ */
body.jail-page[data-jail-dark="1"] {
  color: #fff;
}

/* cards go charcoal in danger mode */
body.jail-page[data-jail-dark="1"] .glass-card {
  background: rgba(24,24,32,0.8);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.9);
  color: #fff;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* high priority text stays white */
body.jail-page[data-jail-dark="1"] .jail-status-text,
body.jail-page[data-jail-dark="1"] .jail-current-status-label,
body.jail-page[data-jail-dark="1"] .jail-form-label {
  color: #fff;
}

/* helper text is softer gray */
body.jail-page[data-jail-dark="1"] .jail-status-sub,
body.jail-page[data-jail-dark="1"] .jail-save-note,
body.jail-page[data-jail-dark="1"] .jail-form-hint,
body.jail-page[data-jail-dark="1"] .jail-legal {
  color: rgba(255,255,255,0.8);
}

body.jail-page[data-jail-dark="1"] .jail-history-meta {
  color: rgba(255,255,255,0.75);
}

/* inputs in trouble mode */
body.jail-page[data-jail-dark="1"] .jail-input {
  background-color: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
  font-size: 0.9rem;
}
body.jail-page[data-jail-dark="1"] .jail-input::placeholder {
  color: rgba(255,255,255,0.6);
}

/* Add Action button in trouble mode (white button pops on charcoal) */
body.jail-page[data-jail-dark="1"] .jail-submit-btn {
  background-color: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 8px;
  font-weight: 600;
  width: 100%;
  padding: 0.8rem 1rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.9);
  cursor: pointer;
}

/* =========================================================
   STATUS HEADER (top card)
   ========================================================= */

.jail-current-status-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  opacity: 0.9;
  margin-top: 0.25rem;
  color: inherit;
}

.jail-status-text {
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.6rem, 1vw + 1.2rem, 2rem);
  text-align: center;
  margin-top: 0.25rem;
  color: inherit;
}

.jail-status-sub {
  font-size: 0.95rem;
  font-weight: 500;
  max-width: 500px;
  margin: 0.5rem auto 1rem auto;
  text-align: center;
  line-height: 1.4;
  color: inherit;
  opacity: 0.9;
}

/* the little 🚨 siren badge when you're in trouble */
.jail-siren {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s;
}
.jail-siren.active {
  animation: jailSirenFlash 0.4s infinite alternate ease-in-out;
  opacity: 1;
}
@keyframes jailSirenFlash {
  0%   { filter: drop-shadow(0 0 4px #ff0033) brightness(1);   transform: rotate(-5deg) scale(1); }
  100% { filter: drop-shadow(0 0 10px #ff0033) brightness(2);  transform: rotate(5deg)  scale(1.1); }
}

/* =========================================================
   SLIDER / SCALE
   ========================================================= */

.jail-slider-wrapper {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.jail-slider {
  width: 100%;
  accent-color: #444; /* thumb visible on pale track */
  margin: 0.5rem 0 1rem 0;
}

/* row of labels under the slider */
.jail-label-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: 0.5rem;
  column-gap: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  max-width: 620px;
  margin: 0 auto;
}

.jail-label {
  flex: 1 1 auto;
  min-width: 70px;
  white-space: nowrap;
  color: inherit;
}

/* emphasize ends of the scale */
.jail-label[data-type="bad"] {
  color: #b00020;
  font-weight: 700;
}
.jail-label[data-type="good"] {
  color: #008a2e;
  font-weight: 700;
}

.jail-save-note {
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
  max-width: 620px;
  margin: 0.75rem auto 0 auto;
  color: inherit;
  opacity: 0.9;
}

/* =========================================================
   "LOG AN ACTION" FORM BOX (left column)
   ========================================================= */

.jail-action-form .jail-form-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: inherit;
}

.jail-form-hint {
  font-size: 0.8rem;
  line-height: 1.3;
  margin-top: 0.4rem;
  color: inherit;
  opacity: 0.9;
}

.jail-legal {
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  margin-top: 0.75rem;
  opacity: 0.9;
  color: inherit;
}

/* =========================================================
   ACTIONS PANEL (right column)
   ========================================================= */

/* Remove the helper text line completely (❌ deletes & recalculates) */
.actions-panel-note {
  display: none;
}

/* Scroll container holding the action cards */
.jail-history-panel {
  max-height: 260px;
  overflow-y: auto;
  padding: 0;
  margin: 0;

  /* Firefox scrollbar colors */
  scrollbar-width: thin;
  scrollbar-color: rgba(123,76,255,0.4) rgba(0,0,0,0.15);
}

/* WebKit scrollbar styling */
.jail-history-panel::-webkit-scrollbar {
  width: 8px;
}
.jail-history-panel::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
}
.jail-history-panel::-webkit-scrollbar-thumb {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(123,76,255,0.6) 0%,
    rgba(91,192,248,0.4) 70%
  );
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.jail-history-panel::-webkit-scrollbar-thumb:hover {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(123,76,255,0.8) 0%,
    rgba(91,192,248,0.6) 70%
  );
}

/* ---------------------------------------------------------
   ACTION CARD BASE LAYOUT
   --------------------------------------------------------- */

.jail-history-item {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  position: relative;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  border: 1px solid transparent; /* overridden by mode */
}

/* stack spacing between cards */
.jail-history-item + .jail-history-item {
  margin-top: 0.5rem;
}

/* Top + bottom rows inside card */
.jail-history-row1,
.jail-history-row2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.jail-history-row1 {
  margin-bottom: 0.5rem;
}

.jail-history-desc {
  font-weight: 600;
  flex: 1;
  margin-right: 0.5rem;
  word-break: break-word;
}

.jail-history-meta {
  font-size: 0.8rem;
  line-height: 1.2;
}

/* points badge */
.jail-delta-badge {
  min-width: 54px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  color: #fff;
  background: #28a745;
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.jail-delta-badge.positive {
  background: #28a745;
}
.jail-delta-badge.negative {
  background: #dc3545;
}

/* delete button */
.jail-delete-btn-inline {
  font-size: 0.8rem;
  line-height: 1.2;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  border: 1px solid transparent;
}

/* ---------------------------------------------------------
   LIGHT MODE styling for each action card
   --------------------------------------------------------- */
body.jail-page[data-jail-dark="0"] .jail-history-item {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  color: #1a1a1a;
  box-shadow: 0 8px 16px rgba(0,0,0,0.14);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
body.jail-page[data-jail-dark="0"] .jail-history-item:hover {
  background: rgba(255,255,255,0.8);
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
  transform: translateY(-2px);
}

body.jail-page[data-jail-dark="0"] .jail-history-desc {
  color: #1a1a1a;
}
body.jail-page[data-jail-dark="0"] .jail-history-meta {
  color: #555;
}

body.jail-page[data-jail-dark="0"] .jail-delete-btn-inline {
  background: rgba(220,53,69,0.08);
  border-color: rgba(0,0,0,0.15);
  color: #c81f36;
}
body.jail-page[data-jail-dark="0"] .jail-delete-btn-inline:hover {
  background: rgba(220,53,69,0.12);
}

/* ---------------------------------------------------------
   DARK / DANGER MODE styling for each action card
   --------------------------------------------------------- */
body.jail-page[data-jail-dark="1"] .jail-history-item {
  background: rgba(34,34,38,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.8);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
body.jail-page[data-jail-dark="1"] .jail-history-item:hover {
  background: rgba(45,45,55,0.9);
  box-shadow: 0 10px 22px rgba(0,0,0,0.9);
  transform: translateY(-2px);
}

body.jail-page[data-jail-dark="1"] .jail-history-desc {
  color: #fff;
}
body.jail-page[data-jail-dark="1"] .jail-history-meta {
  color: rgba(255,255,255,0.75);
}

body.jail-page[data-jail-dark="1"] .jail-delete-btn-inline {
  background: rgba(220,53,69,0.18);
  border-color: rgba(255,255,255,0.25);
  color: #ff6b81;
}
body.jail-page[data-jail-dark="1"] .jail-delete-btn-inline:hover {
  background: rgba(220,53,69,0.25);
}

body.jail-page[data-jail-dark="1"] .jail-delta-badge {
  box-shadow: 0 4px 10px rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.2);
}

/* =========================================================
   EMPTY STATE (No actions logged)
   ========================================================= */

/* Base empty-state styling */
.jail-history-item.text-center.text-muted.small {
  text-align: center !important;
  font-size: 0.9rem !important;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Light / normal mode empty state */
body.jail-page[data-jail-dark="0"] .jail-history-item.text-center.text-muted.small {
  background: rgba(255,255,255,0.8);
  border: 1px dashed rgba(0,0,0,0.15);
  color: #333;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Dark / danger mode empty state */
body.jail-page[data-jail-dark="1"] .jail-history-item.text-center.text-muted.small {
  background: rgba(0,0,0,0.4);
  border: 1px dashed rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
}