﻿@font-face {
  font-family: "Aquatico";
  src: url("/fonts/Aquatico.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body.admin-enhanced {
  --admin-red: #ff3131;
  --admin-red-dark: #e41f2b;
  --admin-red-soft: #fff2f2;
  --admin-text: #111827;
  --admin-muted: #5b667a;
  --admin-border: rgba(255, 49, 49, 0.22);
}

body.admin-enhanced h1,
body.admin-enhanced h2,
body.admin-enhanced h3,
body.admin-enhanced h4,
body.admin-enhanced .card-title,
body.admin-enhanced .tabs button,
body.admin-enhanced button,
body.admin-enhanced .button,
body.admin-enhanced .button-link,
body.admin-enhanced .dashboard-back-link,
body.admin-enhanced nav a,
body.admin-enhanced .nav a {
  font-family: "Aquatico", Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body.admin-enhanced h1 {
  line-height: 1;
}

body.admin-enhanced .dashboard-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--admin-border);
  color: var(--admin-red-dark);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(255, 49, 49, 0.08);
}

body.admin-enhanced .dashboard-back-link:hover {
  background: var(--admin-red);
  color: #ffffff;
  border-color: var(--admin-red);
}

body.admin-enhanced button,
body.admin-enhanced .button,
body.admin-enhanced .button-link,
body.admin-enhanced a.button,
body.admin-enhanced a.btn {
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(255, 49, 49, 0.18);
}

body.admin-enhanced .tabs button,
body.admin-enhanced nav a,
body.admin-enhanced .nav a {
  border-radius: 18px !important;
}

body.admin-enhanced .card,
body.admin-enhanced .editor-card,
body.admin-enhanced .panel,
body.admin-enhanced .box,
body.admin-enhanced .login-card,
body.admin-enhanced .stat,
body.admin-enhanced .stat-card,
body.admin-enhanced .summary-card {
  border-color: var(--admin-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.05);
}

body.admin-enhanced .card:hover,
body.admin-enhanced .panel:hover,
body.admin-enhanced .summary-card:hover {
  box-shadow: 0 18px 36px rgba(255, 49, 49, 0.09);
}

body.admin-enhanced p,
body.admin-enhanced .subtitle,
body.admin-enhanced .muted,
body.admin-enhanced .small,
body.admin-enhanced .helper {
  color: var(--admin-muted);
}

body.admin-enhanced hr,
body.admin-enhanced .divider {
  border-color: rgba(255, 49, 49, 0.16) !important;
}

body.admin-enhanced input:focus,
body.admin-enhanced select:focus,
body.admin-enhanced textarea:focus {
  border-color: var(--admin-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 49, 49, 0.14) !important;
}

body.admin-enhanced .top-actions,
body.admin-enhanced .page-actions {
  gap: 10px;
}

body.admin-enhanced img[alt*="Calypso"],
body.admin-enhanced img[src*="calypso-logo"] {
  max-width: 230px;
  height: auto;
}

@media (max-width: 720px) {
  body.admin-enhanced .dashboard-back-link {
    width: 100%;
  }
}

/* SCHEDULE EDITOR ROW LAYOUT FIX START */

/* Logo on Schedule Editor */
body.schedule-admin-page .schedule-logo-row {
  margin: 0 0 12px 0;
}

body.schedule-admin-page .schedule-logo {
  display: block;
  width: min(240px, 70vw);
  max-height: 75px;
  height: auto;
  object-fit: contain;
}

/* Keep title/button font style */
body.schedule-admin-page h1,
body.schedule-admin-page h2,
body.schedule-admin-page h3,
body.schedule-admin-page .tabs button,
body.schedule-admin-page button,
body.schedule-admin-page .button-link,
body.schedule-admin-page .dashboard-back-link {
  font-family: "Aquatico", Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Restore schedule row layout: time | slot text | delete */
body.schedule-admin-page .entry {
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1fr) 90px !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

/* Inputs stay in the same row */
body.schedule-admin-page .entry input {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Delete button goes back to the right */
body.schedule-admin-page .entry button,
body.schedule-admin-page .entry .delete,
body.schedule-admin-page .entry .delete-row {
  width: 90px !important;
  min-width: 90px !important;
  justify-self: end !important;
  margin: 0 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Day tabs: selected black/white, unselected white/black */
body.schedule-admin-page .tabs button {
  background: #ffffff !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  box-shadow: none !important;
}

body.schedule-admin-page .tabs button.active,
body.schedule-admin-page .tabs button[aria-selected="true"] {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

/* Keep normal red action buttons outside day tabs */
body.schedule-admin-page button.danger,
body.schedule-admin-page #logoutBtn,
body.schedule-admin-page .top-actions button,
body.schedule-admin-page .actions button {
  background: var(--admin-red, #ff3131) !important;
  color: #ffffff !important;
  border-color: var(--admin-red, #ff3131) !important;
}

/* But do not let the generic button style wreck the tab row */
body.schedule-admin-page .tabs button:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

/* Card spacing like before */
body.schedule-admin-page .editor-card {
  padding: 18px !important;
}

/* Mobile: only stack on genuinely narrow screens */
@media (max-width: 720px) {
  body.schedule-admin-page .entry {
    grid-template-columns: 1fr !important;
  }

  body.schedule-admin-page .entry button,
  body.schedule-admin-page .entry .delete,
  body.schedule-admin-page .entry .delete-row {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  body.schedule-admin-page .schedule-logo {
    width: min(220px, 76vw);
  }
}

/* SCHEDULE EDITOR ROW LAYOUT FIX END */

/* SCHEDULE DAY BUTTON RED STYLE FIX START */

/* Add breathing space under the day buttons */
body.schedule-admin-page .tabs {
  margin-bottom: 12px !important;
}

/* Unselected day buttons: white background, red text/border */
body.schedule-admin-page .tabs button {
  background: #ffffff !important;
  color: var(--admin-red, #ff3131) !important;
  border: 1px solid rgba(255, 49, 49, 0.45) !important;
  box-shadow: none !important;
}

/* Selected day button: red background, white text */
body.schedule-admin-page .tabs button.active,
body.schedule-admin-page .tabs button[aria-selected="true"],
body.schedule-admin-page .tabs button.is-active,
body.schedule-admin-page .tabs button.selected {
  background: var(--admin-red, #ff3131) !important;
  color: #ffffff !important;
  border-color: var(--admin-red, #ff3131) !important;
  box-shadow: 0 8px 18px rgba(255, 49, 49, 0.18) !important;
}

/* Hover follows the same red theme */
body.schedule-admin-page .tabs button:hover {
  background: var(--admin-red, #ff3131) !important;
  color: #ffffff !important;
  border-color: var(--admin-red, #ff3131) !important;
}

/* Keep a little gap between tabs and first row */
body.schedule-admin-page .editor-card .entry:first-of-type {
  margin-top: 6px !important;
}

/* SCHEDULE DAY BUTTON RED STYLE FIX END */


/* CALYPSO_SHARED_ADMIN_HEADER_START */

/*
  Shared admin module header.
  This intentionally copies the Poll Backend header styling.
  Use class "calypso-shared-admin-header-page" on every current/future admin module page.
*/

body.calypso-shared-admin-header-page {
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at top left, rgba(255, 49, 49, 0.08), transparent 34%),
    #ffffff !important;
}

body.calypso-shared-admin-header-page .calypso-shared-admin-header {
  background: linear-gradient(180deg, #fff6f6 0%, #ffffff 100%) !important;
  color: #111111 !important;
  border-bottom: 1px solid rgba(255, 49, 49, 0.16) !important;
  padding: 42px 20px 34px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

body.calypso-shared-admin-header-page .calypso-shared-admin-header .hero-inner {
  max-width: 1420px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: left !important;
}

body.calypso-shared-admin-header-page .calypso-shared-admin-header .admin-logo {
  display: block !important;
  width: min(260px, 80vw) !important;
  max-height: 74px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

body.calypso-shared-admin-header-page .calypso-shared-admin-header h1 {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  font-family: "Aquatico", Arial, Helvetica, sans-serif !important;
  font-size: 44px !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  max-width: none !important;
  text-align: left !important;
}

body.calypso-shared-admin-header-page .calypso-shared-admin-header .subtitle {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  max-width: 760px !important;
  color: var(--admin-muted, #5b667a) !important;
  text-align: left !important;
}

/* Content under the shared header */
body.calypso-shared-admin-header-page .wrap {
  max-width: 1420px !important;
  margin: 24px auto !important;
  padding: 0 24px 28px !important;
}

body.calypso-shared-admin-header-page .top-actions,
body.calypso-shared-admin-header-page .calypso-standard-top-actions {
  max-width: 1420px !important;
  margin: 24px auto 14px !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Sign-up campaign edit footer buttons */
body.signup-admin-page .signup-fixed-actions {
  padding: 12px 20px !important;
}

body.signup-admin-page .signup-fixed-actions-inner {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body.signup-admin-page .signup-fixed-actions-inner a,
body.signup-admin-page .signup-fixed-actions-inner button,
body.signup-admin-page .signup-fixed-actions-inner .button-link,
body.signup-admin-page .signup-fixed-actions-inner .badge {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 22px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  transform: none !important;
}

/* Hide presets permanently */
body.signup-admin-page .preset-row {
  display: none !important;
}

@media (max-width: 720px) {
  body.calypso-shared-admin-header-page .calypso-shared-admin-header {
    padding: 32px 16px 28px !important;
  }

  body.calypso-shared-admin-header-page .calypso-shared-admin-header .admin-logo {
    width: min(230px, 76vw) !important;
  }

  body.calypso-shared-admin-header-page .calypso-shared-admin-header h1 {
    font-size: 36px !important;
  }

  body.calypso-shared-admin-header-page .wrap {
    margin-top: 18px !important;
    padding: 0 16px 28px !important;
  }

  body.calypso-shared-admin-header-page .top-actions,
  body.calypso-shared-admin-header-page .calypso-standard-top-actions {
    margin-top: 18px !important;
    padding: 0 16px !important;
  }

  body.signup-admin-page .signup-fixed-actions-inner a,
  body.signup-admin-page .signup-fixed-actions-inner button,
  body.signup-admin-page .signup-fixed-actions-inner .button-link,
  body.signup-admin-page .signup-fixed-actions-inner .badge {
    width: 100% !important;
  }
}

/* CALYPSO_SHARED_ADMIN_HEADER_END */
