/* bc-bootstrap-skin.css
   A Bootstrap 3 "theme" feel on top of Bootstrap 5: smaller type, calmer
   palette, gradient + shadow depth. Two modes: light (default, :root) and
   dark ([data-theme="dark"]). header.inc.php resolves each user's preference
   (auto / light / dark) to one of these before first paint, and also sets
   Bootstrap's matching data-bs-theme. Must load AFTER bootstrap.min.css. */

/* ============ theme variables (default = light) ============ */
:root {
  --skin-primary:#337ab7;   --skin-primary-dark:#265a88;   --skin-primary-border:#245580;
  --skin-link:#337ab7;      --skin-link-hover:#23527c;
  --skin-nav-top:#ffffff;   --skin-nav-bottom:#f5f5f5;     --skin-nav-border:#e2e6ea;
  --skin-nav-text:#777777;  --skin-nav-active:#337ab7;
  --skin-cardhdr-top:#f5f5f5; --skin-cardhdr-bottom:#e8e8e8; --skin-cardhdr-border:#dddddd; --skin-cardhdr-text:#333333;
}
[data-theme="dark"] {
  --skin-primary:#4a8fd0; --skin-primary-dark:#2f6aa6; --skin-primary-border:#2b5e91;
  --skin-link:#6db3f2; --skin-link-hover:#9ccbf7;
  --skin-nav-top:#2b3035; --skin-nav-bottom:#1b1e21; --skin-nav-border:#3a4046;
  --skin-nav-text:#adb5bd; --skin-nav-active:#6db3f2;
  --skin-cardhdr-top:#2b3035; --skin-cardhdr-bottom:#23272b; --skin-cardhdr-border:#3a4046; --skin-cardhdr-text:#e9ecef;
}

/* ============ type scale: back toward BS3's 14px ============ */
body { font-size: 14px; line-height: 1.42857143; }
.btn, .form-control, .form-select, .input-group-text, .nav-link, .dropdown-item, .table, table { font-size: 14px; }
.btn-sm, .form-control-sm, .form-select-sm { font-size: 12px; }
.btn-lg, .form-control-lg { font-size: 18px; }
h1, .h1 { font-size: 32px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; }
.page-header h1 { font-size: 30px; }

/* iOS Safari auto-zooms when a focused field is < 16px. Keep the 14px desktop
   look but force text-entry controls to 16px on touch devices to stop the zoom. */
@media (pointer: coarse) {
  .form-control, .form-select, .form-control-sm, .form-select-sm,
  input, textarea, select,
  .note-editable, .note-editable p { font-size: 16px; }
}

/* ============ links ============ */
a { color: var(--skin-link); text-decoration: none; }
a:hover, a:focus { color: var(--skin-link-hover); text-decoration: underline; }

/* ============ form focus: BS3 soft glow (in accent) ============ */
.form-control:focus, .form-select:focus {
  border-color: var(--skin-primary);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.5);
}

/* ============ buttons: BS3 gradients + shadows ============ */
.btn {
  border-radius: 4px;
  padding: 6px 12px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
  background-repeat: repeat-x;
}
.btn:active, .btn.active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }
.btn-sm { padding: 5px 10px; border-radius: 3px; }
.btn-lg { padding: 10px 16px; border-radius: 6px; }

/* primary follows the active mode */
.btn-primary { background-color:var(--skin-primary-dark); background-image: linear-gradient(to bottom, var(--skin-primary) 0, var(--skin-primary-dark) 100%); border-color:var(--skin-primary-border); }
.btn-primary:hover, .btn-primary:focus { background-color:var(--skin-primary-dark); background-position:0 -15px; border-color:var(--skin-primary-border); }
.btn-primary:active, .btn-primary.active { background-color:var(--skin-primary-dark); background-image:none; border-color:var(--skin-primary-border); }

/* secondary == BS3 "default" (light) */
.btn-secondary {
  color:#333; text-shadow:0 1px 0 #fff;
  background-color:#e0e0e0; background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%); border-color:#ccc;
}
.btn-secondary:hover, .btn-secondary:focus { color:#333; background-color:#e0e0e0; background-position:0 -15px; border-color:#adadad; }
/* extra .btn specificity so this beats the BS5 (0,3,0) :active rule, which would otherwise invert the background to dark and flip the text to white. slight darken; font and colour unchanged. */
.btn.btn-secondary:active, .btn.btn-secondary.active { color:#333; background-color:#d4d4d4; background-image:none; border-color:#adadad; }

/* semantic buttons: constant in both modes */
.btn-success { background-color:#419641; background-image: linear-gradient(to bottom,#5cb85c 0,#419641 100%); border-color:#3e8f3e; }
.btn-success:hover, .btn-success:focus { background-color:#419641; background-position:0 -15px; }
.btn-success:active, .btn-success.active { background-color:#419641; background-image:none; }
.btn-info { background-color:#2aabd2; background-image: linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%); border-color:#28a4c9; }
.btn-info:hover, .btn-info:focus { background-color:#2aabd2; background-position:0 -15px; }
.btn-info:active, .btn-info.active { background-color:#2aabd2; background-image:none; }
.btn-warning { color:#fff; background-color:#eb9316; background-image: linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%); border-color:#e38d13; }
.btn-warning:hover, .btn-warning:focus { color:#fff; background-color:#eb9316; background-position:0 -15px; }
.btn-warning:active, .btn-warning.active { color:#fff; background-color:#eb9316; background-image:none; }
.btn-danger { background-color:#c12e2a; background-image: linear-gradient(to bottom,#d9534f 0,#c12e2a 100%); border-color:#b92c28; }
.btn-danger:hover, .btn-danger:focus { background-color:#c12e2a; background-position:0 -15px; }
.btn-danger:active, .btn-danger.active { background-color:#c12e2a; background-image:none; }

.btn-link { color:var(--skin-link); text-shadow:none; box-shadow:none; background-image:none; }
.btn-link:hover, .btn-link:focus { color:var(--skin-link-hover); }

/* ============ cards (old BS3 panels) ============ */
.card { box-shadow: 0 1px 1px rgba(0,0,0,.05); margin-bottom: 20px; }
.card-header {
  background-color: var(--skin-cardhdr-top);
  background-image: linear-gradient(to bottom, var(--skin-cardhdr-top) 0, var(--skin-cardhdr-bottom) 100%);
  border-bottom: 1px solid var(--skin-cardhdr-border);
  color: var(--skin-cardhdr-text);
  font-weight: 500;
}

/* ============ navbar (old BS3 navbar-default) ============ */
.navbar.bg-light {
  background-color: var(--skin-nav-bottom) !important;
}
.navbar.bg-light .nav-link { color: var(--skin-nav-text); }
.navbar.bg-light .nav-link:hover, .navbar.bg-light .nav-link:focus, .navbar.bg-light .nav-link.active { color: var(--skin-nav-active); }

/* dark mode: make the mobile toggler icon visible on the dark bar */
[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28233,236,239,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============ dropdowns + badges ============ */
.dropdown-menu { box-shadow: 0 6px 12px rgba(0,0,0,.175); }
.badge { box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }

/* ============ dark-mode surface fixes ============ */
/* secondary button: the light gradient is far too bright on a dark page */
[data-theme="dark"] .btn-secondary {
  color:#e9ecef; text-shadow:0 -1px 0 rgba(0,0,0,.35);
  background-color:#2b3035; background-image: linear-gradient(to bottom,#3a4046 0,#2b3035 100%); border-color:#454d55;
}
[data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-secondary:focus {
  color:#fff; background-color:#2b3035; background-position:0 -15px; border-color:#545c64;
}
[data-theme="dark"] .btn-secondary:active, [data-theme="dark"] .btn-secondary.active {
  color:#fff; background-color:#2b3035; background-image:none; border-color:#545c64;
}
/* footer bar: sticky-footer-navbar.css hardcodes #f5f5f5 (a bright bar on dark) */
[data-theme="dark"] .footer {
  background-color:#1b1e21;
  border-top:1px solid #2b3035;
}

/* ============ summernote-lite in dark mode ============ */
[data-theme="dark"] .note-editor.note-frame { border-color:#3a4046; }
[data-theme="dark"] .note-toolbar { background-color:#2b3035; border-bottom:1px solid #3a4046; }
[data-theme="dark"] .note-btn {
  background-color:#343a40; background-image:none; border-color:#454d55; color:#e9ecef;
}
[data-theme="dark"] .note-btn:hover, [data-theme="dark"] .note-btn:focus { background-color:#3d444b; border-color:#545c64; color:#fff; }
[data-theme="dark"] .note-btn.active, [data-theme="dark"] .note-btn:active { background-color:#21262b; color:#fff; }
[data-theme="dark"] .note-editing-area .note-editable { background-color:#212529; color:#e9ecef; }
[data-theme="dark"] .note-editing-area .note-editable a { color:#6db3f2; }
[data-theme="dark"] .note-placeholder { color:#8a9198; }
[data-theme="dark"] .note-codable { background-color:#1b1e21; color:#e9ecef; }
[data-theme="dark"] .note-statusbar { background-color:#2b3035; border-top:1px solid #3a4046; }
[data-theme="dark"] .note-statusbar .note-resizebar .note-icon-bar { border-bottom:1px solid #6c757d; }
/* toolbar dropdowns: font family, color, lists, paragraph, table, line height */
[data-theme="dark"] .note-dropdown-menu { background-color:#2b3035; border-color:#3a4046; color:#e9ecef; }
[data-theme="dark"] .note-dropdown-item:hover, [data-theme="dark"] .note-dropdown-menu a:hover { background-color:#3d444b; color:#fff; }
/* link, image and video dialogs use summernote-lite's own modal (not Bootstrap) */
[data-theme="dark"] .note-modal-content { background-color:#2b3035; color:#e9ecef; border:1px solid #3a4046; }
[data-theme="dark"] .note-modal .note-modal-title { color:#fff; }
[data-theme="dark"] .note-modal .close { color:#e9ecef; }
[data-theme="dark"] .note-modal .note-input { background-color:#212529; color:#e9ecef; border-color:#454d55; }