/* Styling after www.premierphoneplus.com: blues + blue-green on white. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --blue: #0067d6;
  --blue-mid: #2364da;
  --navy: #243474;
  --ink: #313131;
  --muted: #828282;
  --subhead: #4f4f4f;
  --nav-link: rgba(0, 0, 0, 0.6);
  --tint: #e5f4f6;
  --line: #dfe3e8;
  --bg: #fff;
  --danger: #cf2e2e;
  --body: "Roboto", arial, sans-serif;
  --heading: "Montserrat", helvetica, arial, sans-serif;
  --width: 1080px;
  --header-width: 1600px;
  --header-h: 60px;
  --radius: 8px;
  --gap: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--body);
}

h1, h2 {
  font-family: var(--heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

h1 { font-size: 1.75rem; margin: 0 0 calc(var(--gap) * 1.5); }
h2 { font-size: 1.375rem; margin: 0 0 var(--gap); }

a { color: var(--blue); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* Content column: the original's 80%-capped-at-1080px container. */
.wrap {
  width: 80%;
  max-width: var(--width);
  margin: 0 auto;
}

/* Standalone forms (log in, and friends): a centred, narrow column. */
.auth {
  max-width: 26rem;
  margin: 0 auto;
}

.auth input:not([type="submit"]),
.auth select {
  max-width: none;
}

/* Center the submit button and give it a little room above. */
.auth form button[type="submit"],
.auth form input[type="submit"] {
  display: block;
  margin: 0.75rem auto 0;
}

.auth p:last-of-type {
  text-align: center;
}

/* Header bar spans nearly the whole width, unlike the content column. */
.header-inner {
  width: 96%;
  max-width: var(--header-width);
  margin: 0 auto;
  min-height: var(--header-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Header: sticky, brand left, links right. */
body > header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  font-family: var(--heading);
}

body > header .brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
}

body > header .brand img {
  height: 38px;
  width: auto;
}

body > header .brand:hover { text-decoration: none; }

/* Nav links follow the original menu: 14px Roboto 600, 60% black. The
   original's inline `li { font-family: Roboto }` overrides the Montserrat
   set on the header, so the links are Roboto while the brand is Montserrat. */
body > header nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nav-link);
}

body > header .who {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--nav-link);
}

body > header nav a {
  color: var(--nav-link);
}

body > header nav a {
  transition: opacity 0.4s ease-in-out;
}

body > header nav a:hover,
body > header nav a:focus {
  opacity: 0.7;
  text-decoration: none;
}

body > header nav form { margin: 0; }

body > header nav button {
  font: inherit;
  /* Re-stated because the generic button rule below sets a weight. */
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  color: var(--nav-link);
  cursor: pointer;
  transition: opacity 0.4s ease-in-out;
}

body > header nav button:hover,
body > header nav button:focus { opacity: 0.7; }

/* Messages */
body > ul {
  max-width: var(--width);
  margin: var(--gap) auto;
  padding: var(--gap) var(--gap) var(--gap) 2.5rem;
  list-style: none;
  border-radius: var(--radius);
  background: var(--tint);
  border-left: 4px solid var(--blue);
}

body > ul li.error { color: var(--danger); }

main { max-width: var(--width); margin: 0 auto; padding: var(--gap); }

/* Home: a section per domain, a responsive card per auto attendant. */
.domain { margin-bottom: calc(var(--gap) * 2); }

/* Cards are at least 300px wide so the auto attendant name does not wrap too
   early. Measured against the 44 names actually in the database: the longest
   is 27 characters, which fits two lines at this width. The grid keeps them
   equal height per row. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  padding: var(--gap);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* The upload is the card's only call to action, so centre the button.
   The label and field stay left-aligned. */
.card form input[type="submit"],
.card form button[type="submit"] {
  display: block;
  margin: 0 auto;
}

/* Fixed slots, sized here rather than with placeholder text: a missing piece
   leaves the slot empty but keeps its height, so the form below starts at the
   same offset on every card. Heights come from the content they stand in for -
   2.75rem is the default <audio> control in Chrome at this font size. */
.card .slot {
  margin-bottom: 0.5rem;
}

.card .slot-player {
  min-height: 2.75rem;
}

.card .slot-script {
  min-height: 2.5rem;
}

.card .slot-delete {
  min-height: 1.5rem;
}

/* Long scripts are trimmed in the template; keep the block to three lines. */
.card .script {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Way back from the per-domain page to the domain's admin page. */
.back-link {
  text-align: center;
}

/* Auto attendant: extension as the marker, name as the label. */
.card h3 {
  font-family: var(--heading);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* The name is the card's label: a touch smaller than the extension marker's
   block, clamped to two lines so a long one cannot push the card taller. */
.card .position {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--subhead);
  margin: 0.125rem 0 var(--gap);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5rem;
}

.muted { color: var(--muted); }

main audio { display: block; width: 100%; max-width: 320px; margin: 0.5rem 0; }

/* Forms */
form p { margin: 0 0 0.75rem; }
label { display: block; font-weight: 500; margin-bottom: 0.25rem; }

input:not([type="submit"]),
select,
textarea {
  font: inherit;
  width: 100%;
  max-width: 420px;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: inherit;
}

.helptext, p.help { display: block; font-size: 0.8125rem; color: var(--muted); }

button, input[type="submit"] {
  font: inherit;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  cursor: pointer;
}

button:hover, input[type="submit"]:hover { background: var(--blue-mid); }

.errorlist {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  color: var(--danger);
  /* Sized to the h2 it sits under: an error must not read as a footnote. */
  font-family: var(--heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

/* The single-message twin of .errorlist, used for a form's non-field errors. */
.errornote {
  color: var(--danger);
  font-family: var(--heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

/* Django renders a non-field error as a <ul> inside the <p>, so flatten it. */
.errornote li {
  list-style: none;
}

body > footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: center;
}

@media (max-width: 767px) {
  /* The nav drops below the brand, so centre it in the space it has. */
  .header-inner {
    width: 96%;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  body > header .brand { margin-right: 0; }
  body > header .who { display: none; }
  body > header nav { width: 100%; }
  body > header nav ul {
    justify-content: center;
    gap: 0.75rem;
  }
  body > header .brand img { height: 30px; }
  h1 { font-size: 1.375rem; }
}

/* Scheduler cards: two per domain, one listing what is scheduled and one for
   adding to it. Each is at least as wide as a greeting card so the form's
   fields have room; the pair wraps together on a narrow screen. */
.schedule-card {
  min-width: 20rem;
}

/* The window is three lines, each a label and its input: the zone, then the
   two ends. Boxed like the audio sources and the schedule boxes beside it, so
   the card reads as a set of the same kind of object. */
.schedule-window-box {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.75rem;
}

/* The hidden attribute the JS sets must beat whatever display the box takes. */
.schedule-window-box[hidden] {
  display: none;
}

/* The zone is alone on its line, so its pair is centred in the box. */
.schedule-window-box .schedule-zone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

/* A window PHONE PLUS holds (weekday hours, a holiday) is shown, not typed:
   the timeframe's name and range on one line, in place of the date fields. */
.schedule-window-box .schedule-fixed {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.875rem;
}

.schedule-fixed-label {
  font-weight: 700;
}

.schedule-fixed-value {
  color: var(--muted);
}

/* The two ends of the window share one set of columns, so a label keeps its
   place whichever row it is on and the two time selects line up - "not
   before:" and "not after:" start at the same x even though "From:" and
   "Until:" are not the same width. Columns: label, date, label, time.

   The fields and the pairs around each label and input are dissolved into
   these columns, so a label and its input become the grid items themselves
   and land in neighbouring columns. That is what holds the inputs in one
   column; a pair drawn as a box would size to its own label and drift. */
.schedule-window-grid {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content;
  justify-content: start;
  align-items: center;
  gap: 0.3rem 0.6rem;
  font-size: 0.875rem;
}

.schedule-window-grid .schedule-field,
.schedule-window-grid .schedule-pair {
  display: contents;
}

/* Below the breakpoint the form column is narrow, so each pair gets its own
   line: two columns, label then input, which keeps every input in the same
   column and so still lines the selects up. */
@media (max-width: 767px) {
  .schedule-window-grid {
    grid-template-columns: max-content minmax(0, 1fr);
    justify-content: stretch;
  }
}

.schedule-window-box label {
  display: inline;
  margin: 0;
  white-space: nowrap;
}

.schedule-window-box input,
.schedule-window-box select {
  /* Wide enough to show a whole date or time, and no narrower: if that does
     not fit its column the box is too narrow for the pair and the layout
     stacks it instead of truncating. */
  width: auto;
  max-width: none;
  padding: 0.3rem 0.4rem;
  font-size: 0.875rem;
}

.schedule-window-box input[type="date"] {
  min-width: 8.5rem;
}

.schedule-window-box select {
  min-width: 6rem;
}

.schedule-window-box .schedule-zone select {
  /* Fit the longest zone name, which is the widest thing this row can hold,
     but never demand more than the row has: on a narrow card the select drops
     below its label instead of pushing past the edge. */
  field-sizing: content;
  flex: 0 1 auto;
  max-width: 100%;
}

/* No field-sizing support: enough for a padded name plus " (AKDT/-0800)",
   though never more than the row can take. */
@supports not (field-sizing: content) {
  .schedule-window-box .schedule-zone select {
    width: 100%;
  }
}

/* A gap after the attendant, so the source choice starts a clear block. */
.schedule-attendant {
  margin-bottom: calc(var(--gap) * 1.25);
}

/* The default checkbox sits above the window it replaces. */
.schedule-default {
  margin: 0 0 0.75rem;
}

.schedule-default label {
  display: inline;
  margin-bottom: 0;
}

.schedule-default input[type="checkbox"] {
  width: auto;
  margin-left: 0.4rem;
}

.schedule-default .helptext {
  display: block;
  margin-top: 0.15rem;
}

/* The replacement confirmation, shown only when a default would be replaced.
   Marked as a warning, since it is not the default path through the form. */
.schedule-overwrite {
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  border: 1px solid var(--warn, #d9a441);
  border-radius: var(--radius);
  background: var(--warn-bg, #fdf7e8);
}

.schedule-overwrite input[type="checkbox"] {
  width: auto;
  margin-right: 0.4rem;
}

.schedule-overwrite label {
  display: inline;
  margin-bottom: 0;
}

.schedule-overwrite .helptext {
  display: block;
  margin: 0.15rem 0 0 1.4rem;
}

/* The window of a default greeting is not a window: mark it as the fallback. */
.schedule-window.is-default {
  color: var(--subhead);
  font-style: italic;
}

/* The two ways of giving the greeting audio, marked off from each other. */
.schedule-source {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
}

.schedule-source .source-heading {
  font-family: var(--heading);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.schedule-source p:last-child {
  margin-bottom: 0;
}

/* The "or" between the two sources, centred on its own line. */
.source-or {
  text-align: center;
  font-family: var(--heading);
  font-weight: 500;
  color: var(--muted);
  margin: 0.5rem 0;
}

/* A fragment must not put the card's own title under the sticky header. The
   header floats over the page, so a scroll to an anchor would otherwise align
   the card's top edge with the viewport's and hide the heading behind it.
   scroll-margin-top reserves that band, and the browser honours it for both a
   fragment jump and a scrollIntoView(), so no script is needed for the offset.

   The extra gap leaves the title clear of the header rather than flush against
   it, which reads as a deliberate stop instead of a near miss. */
:target,
[id^="extension-"],
.attendant-block {
  scroll-margin-top: calc(var(--header-h) + var(--gap));
}

/* Below the breakpoint the header wraps to two rows, so the band it covers is
   taller than --header-h; reserving the same fixed amount would leave the
   title barely clear, and any further wrapping would hide it again. */
@media (max-width: 767px) {
  :target,
  [id^="extension-"],
  .attendant-block {
    scroll-margin-top: calc(var(--header-h) * 2 + var(--gap));
  }
}

/* "Scheduled Intro Greetings" / "Schedule an Intro Greeting" */
.schedule-title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--subhead);
  margin: 0 0 var(--gap);
}

/* The card's title, with its "New" action pushed to the far right: the two
   share a line so the button reads as belonging to the list below it. */
.schedule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: var(--gap);
}

.schedule-head .schedule-title {
  margin: 0;
}

.schedule-new {
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* One block per auto attendant inside the list card. */
.attendant-group {
  margin-bottom: var(--gap);
}

.attendant-group:last-child {
  margin-bottom: 0;
}

.attendant-name {
  font-family: var(--heading);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.25rem;
}

/* The player sits under the row it belongs to, at a size that fits a card. */
.schedule-list audio {
  flex-basis: 100%;
  height: 2rem;
  max-width: 100%;
}

.schedule-card .schedule-list {
  margin: 0 0 var(--gap);
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

/* One box per schedule, holding all of it. Boxed like the form's window, so
   the two cards read as the same kind of thing. Lifted off the card's tint,
   so each schedule reads as its own object rather than a run of text. */
.schedule-list .schedule-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
}


.schedule-list .schedule-item:last-child {
  margin-bottom: 0;
}

/* The window is what is being scanned for, so give it the emphasis. Weight
   only: the colour is the box's own, so the row does not read as two tones. */
.schedule-window {
  font-family: var(--heading);
  font-weight: 500;
}

/* Inside a box the window takes the first line to itself, so what the greeting
   says and the actions below it start on a clean one. */
.schedule-item .schedule-window,
.schedule-item .schedule-script {
  flex-basis: 100%;
  margin: 0;
}

.schedule-item .schedule-script {
  font-size: 0.8125rem;
}

/* One auto attendant's pair of cards: what is scheduled, and the form. */
.attendant-block {
  margin-bottom: calc(var(--gap) * 1.5);
}

/* One auto attendant's pair of cards: what is scheduled, and the form. */
.attendant-block {
  margin-bottom: calc(var(--gap) * 1.5);
}

/* Row actions, under the player they belong to. */
.schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
}

.schedule-actions a {
  font-size: 0.8125rem;
}

/* The delete link is the destructive one, so it reads differently. */
.schedule-actions a[href*="delete"] {
  color: var(--danger);
}

/* The file input and its submit are one action, so they share a line.
   The browser's control is short, leaving room for the button beside it. */
.schedule-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.schedule-file-row input[type="file"] {
  width: auto;
  flex: 1 1 12rem;
  min-width: 0;
  /* The shared input rule pads and borders it like a text box; a file control
     has its own button inside, so keep it plain. */
  padding: 0;
  border: 0;
  background: none;
}

.schedule-file-row button {
  flex: 0 0 auto;
  margin: 0;
}