/* ================================================================
   SchoolDigger Developer Portal — Custom Stylesheet
   Target: Match widgets.schooldigger.com modern style
   Loads AFTER bootstrap 5.3 + bs3-compat.css
   ================================================================ */

/* --- Base --- */
html {
  height: 100%;
  background-color: #f5f6f8;
  color: #212529;
}

body {
  background-color: #f5f6f8;
  color: #555;
  min-height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.lead {
  font-size: 1.05rem;
  color: #6c757d;
}

/* --- Focus indicators for accessibility --- */
*:focus-visible {
  outline: 2px solid #ffab00;
  outline-offset: 2px;
}

.btn:focus-visible {
  outline: 2px solid #ffab00;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 171, 0, 0.3);
}

a:focus-visible {
  outline: 2px solid #ffab00;
  outline-offset: 2px;
  border-radius: 2px;
}


/* --- Headings --- */
h1:not(.swagger-ui *) {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #1a1a2e;
}

h2:not(.swagger-ui *) {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  color: #1a1a2e;
}

h3:not(.swagger-ui *) {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #1a1a2e;
}

h4:not(.swagger-ui *),
h5:not(.swagger-ui *),
h6:not(.swagger-ui *) {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #1a1a2e;
}

h2 i {
  padding-right: 0.3em;
}


/* --- Links --- */
a {
  text-decoration: none;
  color: #0d6efd;
}

a:hover {
  color: #0a58ca;
  text-decoration: underline;
}


/* ================================================================
   NAVIGATION — Dark gradient matching widgets.schooldigger.com
   ================================================================ */
.navbar, .navbar-inverse {
  border: none;
  position: static;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  color: white;
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-nav > li > a {
  padding-top: 18px !important;
  padding-bottom: 12px !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.navbar-default .navbar-nav li a,
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-brand {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-brand:hover {
  color: #fff;
}

ul.navbar-inverse {
  background-color: transparent;
}

ul.navbar-inverse li.active a {
  background-color: transparent !important;
}

.navbar-collapse {
  padding-right: 0;
}

.navbar-form {
  padding-right: 0;
}

.container.tabbed {
  position: relative;
  top: 5px;
  margin-top: -5px;
}

/* Flash messages — bold, unmissable toast-style banners */
#flash-messages {
  top: 50px;
  z-index: 1040;
}

#flash-messages .navbar.alert {
  background: none !important;
  background-image: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0;
  text-transform: none;
  font-size: 1rem;
  min-height: auto;
  animation: flashSlideDown 0.3s ease-out;
}

@keyframes flashSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

#flash-messages .navbar.alert .container {
  padding: 1rem 2rem;
  display: block;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.6;
}

#flash-messages .navbar.alert .container a {
  text-decoration: underline;
  font-weight: 600;
}

#flash-messages .navbar.alert .container p {
  margin: 0.25em 0;
}

#flash-messages .navbar.alert .close {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  font-size: 1.5rem;
  padding: 0;
  margin: 0;
  line-height: 1;
  transition: opacity 0.15s;
}

#flash-messages .navbar.alert .close:hover {
  opacity: 1;
}

/* Info — bold blue */
#flash-messages .navbar.alert-info,
#flash-messages .navbar.alert.alert-info {
  background: linear-gradient(135deg, #0d6efd 0%, #3d8bfd 100%) !important;
  color: #fff;
}

#flash-messages .navbar.alert-info *,
#flash-messages .navbar.alert-info .close {
  color: #fff;
}

/* Danger — bold red */
#flash-messages .navbar.alert-danger,
#flash-messages .navbar.alert.alert-danger {
  background: linear-gradient(135deg, #c62828 0%, #dc3545 100%) !important;
  color: #fff;
}

#flash-messages .navbar.alert-danger *,
#flash-messages .navbar.alert-danger .close {
  color: #fff;
}

/* Success — bold green */
#flash-messages .navbar.alert-success,
#flash-messages .navbar.alert.alert-success {
  background: linear-gradient(135deg, #15703d 0%, #198754 100%) !important;
  color: #fff;
}

#flash-messages .navbar.alert-success *,
#flash-messages .navbar.alert-success .close {
  color: #fff;
}

/* Warning — bold amber with dark text */
#flash-messages .navbar.alert-warning,
#flash-messages .navbar.alert.alert-warning {
  background: linear-gradient(135deg, #f9a825 0%, #ffc107 100%) !important;
  color: #3e2723;
}

#flash-messages .navbar.alert-warning *,
#flash-messages .navbar.alert-warning .close {
  color: #3e2723;
}

.navbar-default .navbar-nav li a {
  color: #333;
}


/* ================================================================
   HOME PAGE — Hero/jumbotron area
   ================================================================ */
.page-header {
  display: block;
  background-position: center center;
  background-image: url('/images/api-min.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
  border-bottom: none;
}

.jumbotron.page-header {
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
  min-height: 0;
}

.jumbotron.page-header h1 {
  margin-left: -5px;
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
}

.page-header + section {
  background-color: #fff;
  color: #333;
}

.page-header + section .panel {
  color: #333;
}

section h6 {
  color: #1a1a2e;
}


/* ================================================================
   SECTIONS & CONTAINERS — Clean white backgrounds
   ================================================================ */
section, .section, .full {
  background-color: #fff;
}

section + section {
  border-top: 1px solid #e0e0e0;
}

section.sdDarkBlue,
section.invert {
  border-top: none;
}

.container {
  padding-bottom: 4em;
  padding-top: 2em;
  padding-left: 30px;
  padding-right: 30px;
  background-color: #fff;
}

/* Spacing between consecutive containers */
.container + .container {
  margin-top: 0;
}

.invert .container {
  background-color: rgba(26, 26, 46, 0.05);
}

.page-header + section .container,
header .container {
  background-color: transparent;
}

header .container {
  padding-top: 0;
  padding-bottom: 0;
}

.page-header .container {
  padding-top: 2em;
  padding-bottom: 2em;
}

#main-content > .full > .container {
  min-height: 600px;
}

article {
  padding-bottom: 1em;
}

article.panel {
  padding-bottom: 0;
}

main {
  display: block;
}


/* ================================================================
   FOOTER — Clean and minimal
   ================================================================ */
footer {
  padding-bottom: 2em;
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: normal;
  background-color: #1a1a2e;
  color: rgba(255, 255, 255, 0.7);
}

footer a,
footer .list-inline > li {
  color: rgba(255, 255, 255, 0.7);
}

footer a:hover {
  color: #fff;
  text-decoration: none;
}

footer .list-inline > li {
  padding-left: 0;
  padding-right: 0;
  display: block;
  float: left;
}

footer .powered-by {
  text-indent: -119988px;
  overflow: hidden;
  background-image: url('/images/powered-by-3scale-light.png');
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 109px;
  height: 19px;
  display: block;
  text-decoration: none;
  line-height: 19px;
  margin-top: -3px;
}

footer .container {
  background-color: transparent;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}


/* ================================================================
   BUTTONS
   ================================================================ */
.btn-widget {
  background: #ffab00;
  color: #1a237e;
  font-weight: 700;
  font-size: 17px;
  padding: 12px 32px;
  border-radius: 6px;
  border: none;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
}

.btn-widget:hover,
.btn-widget:focus {
  background: #ffc107;
  color: #1a237e;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Override green buttons to match site theme */
.btn-success {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-color: #0f3460;
  color: #fff;
}

.btn-success:hover,
.btn-success:focus {
  background: linear-gradient(135deg, #22224a 0%, #1c2d52 50%, #134a80 100%);
  border-color: #134a80;
  color: #fff;
}

.panel-body .button a, .button a,
.panel-body a.btn, a.btn {
  text-decoration: none;
}

.button-icon {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

.btn {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ================================================================
   FORMS
   ================================================================ */
form abbr.required {
  display: none;
}

label {
  font-size: 11px;
}

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 10px;
}

fieldset {
  padding-bottom: 2em;
}

fieldset:first-of-type {
  padding-top: 2em;
}


/* ================================================================
   TABLES & TABLE PANELS
   ================================================================ */
.table thead > tr > th, .table tbody > tr > th,
.table tfoot > tr > th, .table thead > tr > td,
.table tbody > tr > td, .table tfoot > tr > td {
  border-top: none;
  border-bottom: none;
}

.table thead {
  text-transform: uppercase;
  font-size: 0.85rem;
}

.panel.table thead > tr > th, .panel.table tbody > tr > th,
.panel.table tfoot > tr > th, .panel.table thead > tr > td,
.panel.table tbody > tr > td, .panel.table tfoot > tr > td {
  padding: 10px 15px 5px 15px;
  margin: 0;
  background-color: transparent;
  border-collapse: separate !important;
}

.panel.table thead > tr > th,
.panel.table thead > tr > td {
  padding-top: 45px;
}

.panel.table tbody.panel-body > tr:first-child > th,
.panel.table tbody.panel-body > tr:first-child > td {
  padding-top: 15px;
}

.panel.table tbody.panel-body.panel-footer > tr:last-child > th,
.panel.table tbody.panel-body.panel-footer > tr:last-child > td,
.panel.table tfoot > tr:last-child > th,
.panel.table tfoot > tr:last-child > td {
  padding-bottom: 25px;
}

/* Rounded corners for panel tables */
.panel.table thead > tr:first-child > th:first-child,
.panel.table thead > tr:first-child > td:first-child {
  border-top-left-radius: 3px;
}

.panel.table thead > tr:last-child > th:last-child,
.panel.table thead > tr:last-child > td:last-child {
  border-top-right-radius: 3px;
}

.panel.table tbody.panel-body.panel-footer > tr:last-child > th:first-child,
.panel.table tbody.panel-body.panel-footer > tr:last-child > td:first-child,
.panel.table tfoot > tr:last-child > th:first-child,
.panel.table tfoot > tr:last-child > td:first-child {
  border-bottom-left-radius: 3px;
}

.panel.table tbody.panel-body.panel-footer > tr:last-child > th:last-child,
.panel.table tbody.panel-body.panel-footer > tr:last-child > td:last-child,
.panel.table tfoot > tr:last-child > th:last-child,
.panel.table tfoot > tr:last-child > td:last-child {
  border-bottom-right-radius: 3px;
}

.panel.table tbody > tr > th.empty,
.panel.table tbody > tr > td.empty {
  padding-bottom: 90px;
}


/* ================================================================
   PANELS — Clean card-like appearance
   ================================================================ */
.panel {
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 0.375rem;
}

.panel-default {
  background-color: #fff;
}

.panel-default > .panel-heading {
  color: #6c757d;
  background-color: #f8f9fa;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: normal;
}

.panel-default > .panel-heading strong {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.panel-default > .panel-heading a {
  text-transform: none;
  font-size: 14px;
  font-weight: normal;
}

.panel-heading a:hover {
  text-decoration: none;
}

.panel-default > .panel-heading.important {
  font-weight: bold;
  padding-top: 45px;
}

.panel-default > .panel-heading i {
  font-variant: normal;
}

.panel-default > .panel-body,
.panel-default > .panel-body.panel-footer {
  background-color: #fff;
}

.panel-body a, p a, table a {
  text-decoration: underline;
}

.panel-body a:hover, p a:hover, table a:hover {
  text-decoration: underline;
}

.panel-body .nav a, .nav a,
.panel-body a.navbar-brand, a.navbar-brand {
  text-decoration: none;
}

.panel-body > h5 {
  margin-top: 0;
}

.panel-body > h2 {
  margin-top: 0;
}

.panel.form-panel {
  margin-top: 2em;
}

.panel-body, .panel-body.panel-footer {
  padding: 15px;
}

.panel-default > .panel-footer.important {
  padding-top: 45px;
}

.panel-default > .panel-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #eee;
}


/* ================================================================
   INVERTED SECTIONS
   ================================================================ */
section.invert {
  background-color: #1a1a2e;
}

.invert * {
  color: white !important;
}

.invert .panel {
  background-color: rgba(255, 255, 255, 0.05);
}

.invert .panel-heading {
  background-color: rgba(255, 255, 255, 0.1);
}

.invert .panel-body, .invert .panel-body.panel-footer {
  background-color: rgba(255, 255, 255, 0.08);
}

.invert .panel-footer {
  background-color: rgba(255, 255, 255, 0.12);
  border-top: none;
  padding-top: 1em;
  padding-bottom: 1em;
}


/* ================================================================
   TABS — Active tab blue highlight
   ================================================================ */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

.nav-tabs > li > a {
  border-style: solid;
  border-color: #ccc;
  border-bottom-color: transparent;
  border-width: 1px;
}


/* ================================================================
   BADGES
   ================================================================ */
.badge {
  background-color: #6c757d;
}


/* ================================================================
   CODE / PRE
   ================================================================ */
pre:not(.swagger-ui *) {
  border: none;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
}

code:not(.swagger-ui *) {
  background-color: #f8f9fa;
  padding: 0.125rem 0.25rem;
  border-radius: 0.2rem;
  color: #d63384;
}


/* ================================================================
   MISC ELEMENTS
   ================================================================ */
hr {
  border: 0;
  border-top: 1px solid #dee2e6;
  margin: 2em 0;
  opacity: 1;
}

dd {
  margin-bottom: 15px;
}

article.jumbotron {
  margin-bottom: 2em;
}

.sign-out {
  font-size: 16px;
}

.fa-chevron-left {
  margin-right: 5px;
}

/* Messages */
.read * {
  color: #6c757d;
}

pre.message {
  padding: 0;
  margin: 0;
  border: none;
  word-break: normal;
  background-color: transparent;
  font-size: 14px;
}


/* ================================================================
   DEFINITION LISTS
   ================================================================ */
@media (min-width: 768px) {
  .dl-horizontal dt {
    width: 22.5%;
  }

  .dl-horizontal dd {
    margin-left: 26%;
  }

  .wide.dl-horizontal dt {
    width: 30.5%;
  }

  .wide.dl-horizontal dd {
    margin-left: 34.5%;
  }
}

dl + dl {
  margin-top: 60px;
}


/* ================================================================
   SSO / AUTH PROVIDERS
   ================================================================ */
ul.list-auth-provider {
  padding: 1em 0;
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-bottom: 1px solid #eee;
  list-style: none;
  text-align: center;
}

ul.list-auth-provider li {
  display: inline-block;
}

.list-auth-provider .auth-provider {
  display: block;
  text-decoration: none;
  margin-bottom: 12px;
}

.list-auth-provider .auth-provider:hover {
  text-decoration: none;
}

.fa-auth0:before {
  content: "\f005";
}

.fa-keycloak:before {
  content: '‹›';
  font-size: 18px;
  line-height: 0;
  top: 1px;
}


/* ================================================================
   PLACEHOLDERS
   ================================================================ */
::placeholder {
  color: #999;
}


/* ================================================================
   CHANGELOG — sdContent / sdTH tables
   ================================================================ */
.sdContent {
  background-color: #fff;
  padding: 0;
}

.sdTH {
  background: #1a1a2e;
  color: white;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.6em 1em;
}

.sdContent .table-bordered {
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  overflow: hidden;
  margin-top: 0;
}

.sdContent tr {
  border: none;
  background-color: #fff;
}

.sdContent tr:nth-child(even) {
  background-color: #f8f9fa;
}

.sdContent td {
  padding: 0.6em 1em;
  font-size: 0.9rem;
  border-color: #e0e0e0;
  vertical-align: top;
}

.sdContent td:nth-child(1) {
  font-weight: 600;
  white-space: nowrap;
  color: #333;
}

.sdContent td:nth-child(2) {
  white-space: nowrap;
  color: #555;
}

.sdContent li {
  background-image: url('/images/yes.svg');
  background-repeat: no-repeat;
  background-position: 0 1px;
  padding-left: 30px;
}

.sdContent ul {
  padding: 0;
  list-style-type: none;

}

/* Changelog tabs — remove border lines */
.signup-panel .nav-tabs {
  margin-bottom: 0;
  border-bottom: none;
}

.tab-pane h3 {
  display: none;
}

.sdDarkBlue {
  background-color: #1a1a2e;
}

.sdBlue {
  background-color: #16213e;
  color: rgba(255, 255, 255, 0.9);
}

.sdBlue.container,
.sdDarkBlue .container {
  background-color: transparent;
}

.sdBlue h1, .sdBlue h2, .sdBlue h3,
.sdBlue h4, .sdBlue h5, .sdBlue h6 {
  color: white;
}

.sdBlue a {
  color: #90caf9;
}

.sdBlue a:hover {
  color: #fff;
}

.sdBlue hr {
  border-color: rgba(255, 255, 255, 0.2);
}

.sdBlue .panel {
  color: #333;
}


/* ================================================================
   TERMS OF USE (Word-pasted HTML)
   ================================================================ */
.WordSection1 {
  max-width: 100%;
}

.MsoNormal {
  margin: 0 0 10pt 0;
  line-height: 1.4;
  font-size: 11pt;
}

.MsoListParagraph,
.MsoListParagraphCxSpFirst,
.MsoListParagraphCxSpMiddle,
.MsoListParagraphCxSpLast {
  margin: 0 0 10pt 0.5in;
  line-height: 1.4;
  font-size: 11pt;
}

.MsoListParagraphCxSpFirst,
.MsoListParagraphCxSpMiddle {
  margin-bottom: 0;
}


/* ================================================================
   PLAN CARDS
   ================================================================ */
.plan-details {
  display: block;
  padding-left: 1em;
}

.plan-details-links {
  display: block;
  padding-left: 1.5em;
}


/* ================================================================
   IMAGE CONTAINERS
   ================================================================ */
.image-container {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.image-container img {
  max-width: 100%;
  height: auto;
}


/* =============================================================
   SWEEPING STYLE UPDATE — Added 2026-04-02
   Visual polish for all pages. No HTML changes.
   To revert: delete everything below this comment block.
   ============================================================= */

/* ===== FORM POLISH ===== */
/* Modern input styling across all forms (login, signup, password, account, etc.) */
.form-control {
  border-radius: 0.375rem;
  border: 1px solid #ced4da;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Better form group spacing */
.form-group {
  margin-bottom: 1.25rem;
}

/* Submit button polish for login/signup/password pages */
.btn-lg {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}

/* btn-default -> subtle outlined button */
.btn-default {
  background-color: #fff;
  border: 1px solid #ced4da;
  color: #555;
}

.btn-default:hover,
.btn-default:focus {
  background-color: #f8f9fa;
  border-color: #adb5bd;
  color: #333;
}


/* ===== PANEL REFINEMENTS ===== */
/* Panel heading icons — subtle color */
.panel-heading i.fa {
  color: #6c757d;
  margin-right: 4px;
}

/* Credential panels — code blocks inside */
.panel-body code {
  font-size: 0.9em;
  word-break: break-all;
}

/* Panel heading with h3 — no extra margin */
.panel-heading h3 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* ===== TABLE REFINEMENTS ===== */
/* Striped table rows */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Table bordered — softer borders */
.table-bordered {
  border-color: #e0e0e0;
}

.table-bordered > :not(caption) > * > * {
  border-color: #e0e0e0;
}

/* Hover effect on table rows for interactivity */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
  background-color: rgba(13, 110, 253, 0.03);
}


/* ===== ALERT STYLING ===== */
/* Modernize alerts with subtle left border accent */
.alert {
  border-left-width: 4px;
  border-radius: 0.375rem;
}

.alert-warning {
  border-left-color: #ffc107;
}

.alert-info {
  border-left-color: #0dcaf0;
}

.alert-danger {
  border-left-color: #dc3545;
}

.alert-success {
  border-left-color: #198754;
}

/* Alert close button alignment */
.alert button.close {
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}


/* ===== LABEL / BADGE REFINEMENTS ===== */
/* Application state labels — softer appearance */
.label {
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 0.7em;
}


/* ===== WELL MODERNIZATION ===== */
/* Signup well — clean callout style */
.well {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: none;
}

.well-sm {
  padding: 0.75rem;
}


/* ===== DEFINITION LIST POLISH ===== */
/* Modern dl-horizontal for credentials, account details, invoices */
.dl-horizontal dt {
  font-weight: 600;
  color: #6c757d;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dl-horizontal dd {
  color: #333;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.dl-horizontal dd:last-child {
  border-bottom: none;
}


/* ===== HELP TEXT ===== */
.help-block {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.35rem;
}


/* ===== PAGINATION ===== */
.pagination > li > a,
.pagination > li > span {
  color: #0d6efd;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  margin: 0 2px;
  padding: 0.4rem 0.75rem;
}

.pagination > li.active > a,
.pagination > li.active > span {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.pagination > li > a:hover {
  background-color: #e9ecef;
  color: #0a58ca;
}


/* ===== LIST UNSTYLED ===== */
.list-unstyled {
  padding-left: 0;
  list-style: none;
}


/* ===== TRIAL PERIOD WARNING ===== */
/* Softer trial warning on dashboard */
.alert-warning h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}


/* ===== ERROR PAGES ===== */
/* 404 / 500 / 403 pages */
.errors h1 {
  font-size: 3rem;
  color: #1a1a2e;
  margin-bottom: 0.5rem;
}

.errors p {
  font-size: 1.1rem;
  color: #6c757d;
}


/* ===== MESSAGES (inbox/outbox) ===== */
/* Read messages - muted appearance */
.read {
  opacity: 0.65;
}

.read:hover {
  opacity: 1;
}


/* ===== STATS / CHART PAGE ===== */
.chart-container {
  background: #fff;
  border-radius: 0.375rem;
  padding: 1rem;
}


/* ===== SUBTLE TRANSITIONS ===== */
/* Smooth transitions on interactive elements */
.panel {
  transition: box-shadow 0.15s ease-in-out;
}

.panel:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Don't hover-elevate panels inside tables */
.panel.table:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Button transitions */
.btn {
  transition: all 0.15s ease-in-out;
}

/* Link transitions in panels */
.panel-body a {
  transition: color 0.15s ease-in-out;
}


/* ===== SIGNUP PAGE ===== */
.signup-page {
  padding-top: 1em;
}

.signup-plan-callout {
  background: #d1e7dd;
  border: 1px solid #a3cfbb;
  border-radius: 0.5rem;
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.5em;
  font-size: 0.95rem;
  color: #0f5132;
}

.signup-panel {
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
}

.signup-panel .panel-body {
  padding: 2em 2.5em;
}

.signup-panel fieldset {
  padding-top: 0;
  padding-bottom: 1em;
}

.signup-panel fieldset:first-of-type {
  padding-top: 0;
}

.signup-panel .form-group {
  margin-bottom: 1.25rem;
}

.signup-panel .control-label {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  color: #333;
}

.signup-panel .form-control {
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  border-radius: 0.375rem;
}

.signup-panel .btn-success {
  padding: 0.65rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  letter-spacing: 0.3px;
}

.signup-trust a:hover {
  color: #0d6efd !important;
}

/* Auth provider buttons on signup */
.signup-page .list-auth-provider {
  border-bottom: 1px solid #eee;
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
}

.signup-page .auth-provider {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.6rem 1rem;
  text-align: center;
  transition: all 0.15s ease-in-out;
}

.signup-page .auth-provider:hover {
  border-color: #0d6efd;
  background-color: #f0f7ff;
}


/* ================================================================
   STATS PAGE — chart controls & selectors
   ================================================================ */
.chart-control-buttons {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75em;
}

.chart-control-buttons span {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  color: #555;
  border-radius: 0.25rem;
  transition: all 0.15s;
}

.chart-control-buttons span:hover {
  background: #e9ecef;
  color: #333;
}

.chart-control-buttons span.current {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

#selector-widgets {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 1em;
}

.detail-selector {
  flex: 0 0 auto;
}

.selector.current-item {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  cursor: pointer;
  background: #fff;
  color: #333;
}

.selector.current-item:hover {
  border-color: #0d6efd;
}

.metric-list {
  list-style: none;
  padding: 0.25em 0;
  margin: 0;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 300px;
  overflow-y: auto;
  position: absolute;
  z-index: 100;
  min-width: 200px;
}

.metric-list li {
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #333;
}

.metric-list li:hover {
  background: #dbeafe;
  color: #0d6efd;
}

#total-and-period {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

/* ===== PRINT STYLES ===== */
@media print {
  .navbar, footer, .navbar-toggle { display: none !important; }
  .container { padding: 0; background: white; }
  .panel { box-shadow: none; border: 1px solid #ccc; }
  a[href]:after { content: none !important; }
}