/* Shared with the site types' admin pages (src/<Type>.Web/site/brand/brand.css): keep the copies the same.
   Masher Sites brand (as mashersites.com): cream paper with a halftone dot, ink lines and hard
   offset shadows, Anton display headings, Nunito text, red action buttons.
   Loaded after sb-admin-2.min.css and overrides its look; the page markup stays SB Admin 2. */

:root {
  --ms-bg: #fbf6e9;
  --ms-cream: #f7f0dc;
  --ms-surface: #fffdf7;
  --ms-surface-2: #f3ead0;
  --ms-ink: #24202b;
  --ms-muted: #57515f;
  --ms-hairline: #24202b24;
  --ms-action: #c43d22;
  --ms-action-hover: #a93219;
  --ms-verm: #e14b2e;
  --ms-gold: #f7c948;
  --ms-sky: #57b8e8;
  --ms-on-action: #fffdf7;
  --ms-display: Anton, Impact, "Arial Narrow", sans-serif;
  --ms-sans: Nunito, ui-sans-serif, system-ui, sans-serif;
}

/* ---- Page ---- */
body {
  font-family: var(--ms-sans);
  color: var(--ms-ink);
  background-color: var(--ms-bg);
  background-image: radial-gradient(rgba(36, 32, 43, .10) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
}
#content-wrapper { background: transparent !important; }
a { color: var(--ms-action); }
a:hover { color: var(--ms-action-hover); }
.text-gray-800, .text-gray-900 { color: var(--ms-ink) !important; }
.text-gray-600, .text-muted { color: var(--ms-muted) !important; }
.text-primary { color: var(--ms-action) !important; }
.text-danger { color: var(--ms-action) !important; }

h1, .h1, .ms-display { font-family: var(--ms-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.container-fluid > .d-sm-flex h1.h3 { font-size: 2.1rem; line-height: 1.05; }
h5, .h5, h6 { font-weight: 900; }

/* ---- Sidebar: ink panel ---- */
.sidebar, .sidebar.sidebar-dark { background: var(--ms-ink) !important; border-right: 2px solid var(--ms-ink); }
.sidebar .sidebar-brand { height: auto; padding: 1.1rem .75rem; }
.sidebar .sidebar-brand .brand-full { display: block; width: 100%; max-width: 190px; height: auto; }
.sidebar .sidebar-brand .brand-mark { display: none; width: 40px; height: 40px; }
.sidebar .sidebar-brand .brand-version { display: block; color: var(--ms-gold); font-size: .65rem; font-weight: 900; letter-spacing: .12em; margin-top: .35rem; }
.sidebar.toggled .sidebar-brand .brand-full, .sidebar.toggled .sidebar-brand .brand-version { display: none; }
.sidebar.toggled .sidebar-brand .brand-mark { display: block; }
@media (max-width: 767.98px) {
  .sidebar .sidebar-brand .brand-full, .sidebar .sidebar-brand .brand-version { display: none; }
  .sidebar .sidebar-brand .brand-mark { display: block; }
}
.sidebar-dark .nav-item .nav-link, .sidebar-dark .nav-item .nav-link i { color: var(--ms-cream) !important; font-weight: 800; }
.sidebar-dark .nav-item .nav-link i { color: var(--ms-gold) !important; }
.sidebar-dark .nav-item .nav-link:hover, .sidebar-dark .nav-item .nav-link:focus, .sidebar-dark .nav-item.active .nav-link { color: var(--ms-gold) !important; }
.sidebar-dark hr.sidebar-divider { border-top: 1px solid rgba(247, 240, 220, .18); }
.sidebar .nav-item .collapse .collapse-inner, .sidebar .nav-item .collapsing .collapse-inner {
  background: var(--ms-surface) !important; border: 2px solid var(--ms-ink); border-radius: 14px !important;
}
.sidebar .nav-item .collapse .collapse-inner .collapse-item { color: var(--ms-ink); font-weight: 700; border-radius: 8px; }
.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover { background: var(--ms-gold); }
#sidebarToggle { background: rgba(247, 240, 220, .15); }
#sidebarToggle::after { color: var(--ms-cream); }

/* ---- Top bar ---- */
.topbar, .topbar.shadow { background: rgba(251, 246, 233, .92) !important; border-bottom: 2px solid var(--ms-ink); box-shadow: none !important; }
.topbar .ms-topbar-title { font-family: var(--ms-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ms-ink); }
.topbar .ms-topbar-title span { color: var(--ms-action); }
.topbar .topbar-divider { border-right-color: var(--ms-hairline); }
.topbar .nav-item .nav-link .text-gray-600 { color: var(--ms-ink) !important; font-weight: 800; }
#sidebarToggleTop { color: var(--ms-ink); }

/* ---- Cards, panels, modals, dropdowns ---- */
.card, .modal-content, .dropdown-menu {
  background: var(--ms-surface); border: 2px solid var(--ms-ink) !important; border-radius: 20px !important;
  box-shadow: 6px 6px 0 var(--ms-ink) !important;
}
.dropdown-menu { border-radius: 14px !important; box-shadow: 4px 4px 0 var(--ms-ink) !important; }
.card.shadow, .shadow { box-shadow: 6px 6px 0 var(--ms-ink) !important; }
.card-header, .card-footer { background: var(--ms-surface-2); border-color: var(--ms-ink); }
.modal-header, .modal-footer { border-color: var(--ms-hairline); }
.modal-title { font-family: var(--ms-display); text-transform: uppercase; font-weight: 400; }
.dropdown-item { font-weight: 700; color: var(--ms-ink); }
.dropdown-item:hover { background: var(--ms-gold); }
.ms-card-red { background: var(--ms-action) !important; color: var(--ms-on-action) !important; }
.ms-card-red a, .ms-card-red table { color: var(--ms-on-action) !important; }
.ms-card-red a.btn { color: var(--ms-ink) !important; }
.ms-card-red b, .ms-card-gold b { font-family: var(--ms-display); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; letter-spacing: .02em; }
.ms-card-gold { background: var(--ms-gold) !important; color: var(--ms-ink) !important; }
.ms-card-gold a { color: var(--ms-ink) !important; font-weight: 800; text-decoration: underline; }
.ms-card-gold .card-footer { background: var(--ms-ink) !important; border-top: 2px solid var(--ms-ink); border-radius: 0 0 18px 18px; }
.ms-card-gold .card-footer, .ms-card-gold .card-footer a, .ms-card-gold a.card-footer { color: var(--ms-cream) !important; text-decoration: none; }
.card-body-icon { color: currentColor; }

/* ---- Buttons: pills with an ink edge and a hard shadow ---- */
.btn {
  border-radius: 999px !important; border: 2px solid var(--ms-ink) !important; font-weight: 900;
  box-shadow: 3px 3px 0 var(--ms-ink); transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ms-ink); }
.btn:active, .btn.active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ms-ink) !important; }
.btn:focus, .btn.focus { box-shadow: 3px 3px 0 var(--ms-ink), 0 0 0 .2rem rgba(247, 201, 72, .6) !important; }
.btn-link { border: 0 !important; box-shadow: none !important; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active { background: var(--ms-action); color: var(--ms-on-action); }
.btn-primary:hover { background: var(--ms-action-hover); color: var(--ms-on-action); }
.btn-success { background: var(--ms-gold); color: var(--ms-ink); }
.btn-success:hover { background: #f0bd2c; color: var(--ms-ink); }
.btn-info { background: var(--ms-sky); color: var(--ms-ink); }
.btn-info:hover { background: #43a9dc; color: var(--ms-ink); }
.btn-warning { background: var(--ms-gold); color: var(--ms-ink); }
.btn-warning:hover { background: #f0bd2c; color: var(--ms-ink); }
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary { background: var(--ms-surface); color: var(--ms-ink); }
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover { background: var(--ms-surface-2); color: var(--ms-ink); }
/* Delete stands apart from the red main action: white with red letters. */
.btn-danger, .btn-outline-danger { background: var(--ms-surface); color: var(--ms-action); }
.btn-danger:hover, .btn-outline-danger:hover { background: var(--ms-action); color: var(--ms-on-action); }
.btn-sm { box-shadow: 2px 2px 0 var(--ms-ink); }
.btn-user { padding: .75rem 1rem; }

/* ---- Forms ---- */
.form-control, .custom-select {
  border: 2px solid var(--ms-ink); border-radius: 12px; background-color: var(--ms-surface); color: var(--ms-ink);
}
.form-control:focus, .custom-select:focus { border-color: var(--ms-ink); box-shadow: 0 0 0 .2rem rgba(247, 201, 72, .6); background-color: #fff; }
.form-control[readonly], .form-control:disabled { background: var(--ms-surface-2); }
form.user .form-control-user { border-radius: 999px; border: 2px solid var(--ms-ink); }
.form-label-col { font-weight: 800; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--ms-action); border-color: var(--ms-ink); }

/* ---- Tables ---- */
.table { color: var(--ms-ink); background: var(--ms-surface); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--ms-hairline); }
.table-responsive > .table-bordered { border: 2px solid var(--ms-ink); }
.table thead th, .thead-light th { background: var(--ms-surface-2) !important; color: var(--ms-ink) !important; border-color: var(--ms-ink) !important;
  font-weight: 900; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.table-pick tbody tr:hover td { background: rgba(247, 201, 72, .18); }
.table-pick tbody tr.table-active td { background: rgba(247, 201, 72, .45) !important; }
.detail-row td { background: var(--ms-cream) !important; }

/* ---- Alerts, badges, paging ---- */
.alert { border: 2px solid var(--ms-ink); border-radius: 14px; color: var(--ms-ink); box-shadow: 3px 3px 0 var(--ms-ink); }
.alert-success { background: #e9f3d8; }
.alert-info { background: #dcf0fa; }
.alert-warning { background: #fdf0c4; }
.alert-danger { background: #fbe0d8; }
.badge { border: 1.5px solid var(--ms-ink); border-radius: 999px; font-weight: 900; }
.badge-warning { background: var(--ms-gold); color: var(--ms-ink); }
.badge-danger { background: var(--ms-action); }
.badge-secondary { background: var(--ms-surface-2); color: var(--ms-ink); }
.bg-danger { background-color: var(--ms-action) !important; }
.page-link { color: var(--ms-ink); border: 2px solid var(--ms-ink); margin-left: -2px; font-weight: 800; background: var(--ms-surface); }
.page-item.active .page-link { background: var(--ms-action); border-color: var(--ms-ink); color: var(--ms-on-action); }
.page-item:first-child .page-link { border-radius: 999px 0 0 999px; }
.page-item:last-child .page-link { border-radius: 0 999px 999px 0; }

/* ---- Footer, scroll button ---- */
footer.sticky-footer { background: var(--ms-ink) !important; color: var(--ms-cream); }
footer.sticky-footer .copyright { color: var(--ms-cream); font-weight: 700; }
footer.sticky-footer a { color: var(--ms-gold) !important; }
.scroll-to-top { background: var(--ms-action); border: 2px solid var(--ms-ink); }

/* ---- Login pages ---- */
body.ms-login { min-height: 100vh; }
.ms-login .ms-login-card { overflow: hidden; }
.ms-login .ms-login-side {
  background: var(--ms-ink); color: var(--ms-cream); display: flex; flex-direction: column; justify-content: center; padding: 3rem;
}
.ms-login .ms-login-side img { width: 100%; max-width: 300px; height: auto; margin-bottom: 2rem; }
.ms-login .ms-login-side .ms-display { font-size: 2.6rem; line-height: 1.02; color: var(--ms-cream); }
.ms-login .ms-login-side .ms-display span { color: #f2765b; }
.ms-login .ms-login-side p { color: #bdb4a6; margin-top: 1rem; }
.ms-login .ms-login-logo { width: 220px; max-width: 80%; height: auto; }
.ms-login h1.h4 { font-family: var(--ms-display); text-transform: uppercase; font-weight: 400; font-size: 2rem; }

/* ---- Site admin pages (the site types' _AdminLayout) ---- */
.admin-form > h1 { font-family: var(--ms-display); font-weight: 400; text-transform: uppercase; font-size: 2.1rem; line-height: 1.05; margin-bottom: 1.25rem !important; }
.sidebar .sidebar-brand .brand-site { display: block; color: var(--ms-cream); font-size: .8rem; font-weight: 800; margin-top: .2rem; text-transform: none; letter-spacing: 0;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar.toggled .sidebar-brand .brand-site { display: none; }
@media (max-width: 767.98px) { .sidebar .sidebar-brand .brand-site { display: none; } }
.topbar .ms-site-logo { max-height: 40px; width: auto; }
.img-preview { border: 2px solid var(--ms-ink) !important; border-radius: 10px; }