/* css3buttons.flat.css — modern flat theme, drop-in alternative to css3buttons.css.
   Keeps every original class name (.button, .primary, .negative, .positive,
   .pill, .left/.middle/.right groups, .big, span.icon.*) so it can swap in
   without touching markup.

   Flat philosophy vs. the Aristo (glossy) sheet:
     - solid fills instead of top→bottom gradients
     - no inset highlight / text-shadow (crisp, no faux-bevel)
     - color-driven states (border + subtle bg tint on hover, ring on focus)
     - slightly larger radius, calmer motion */

:root {
  /* Neutral default — light surface, slate text */
  --fbtn-bg: #f4f5f7;
  --fbtn-bg-hover: #e9ebef;
  --fbtn-bg-active: #dfe2e7;
  --fbtn-border: #cdd2da;
  --fbtn-border-hover: #b4bbc6;
  --fbtn-color: #353b45;

  /* Primary — indigo/blue accent */
  --fbtn-primary: #2f6fed;
  --fbtn-primary-hover: #2961d6;
  --fbtn-primary-active: #2455bd;
  --fbtn-primary-ring: rgba(47, 111, 237, .35);

  /* Negative — red */
  --fbtn-negative: #e23b3b;
  --fbtn-negative-hover: #cf3232;
  --fbtn-negative-active: #b82b2b;
  --fbtn-negative-ring: rgba(226, 59, 59, .35);

  /* Positive — green */
  --fbtn-positive: #2faa55;
  --fbtn-positive-hover: #28974b;
  --fbtn-positive-active: #228341;
  --fbtn-positive-ring: rgba(47, 170, 85, .35);
}

a.button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fbtn-color);
  background: var(--fbtn-bg);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--fbtn-border);
  border-radius: 3px;
  outline: none;
  position: relative;
  vertical-align: middle;
  text-shadow: none;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

button {
  margin-left: 0;
  margin-right: 0;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Hover → subtle darken of the surface */
a.button:hover, .button:hover {
  color: var(--fbtn-color);
  border-color: var(--fbtn-border-hover);
  text-decoration: none;
  background: var(--fbtn-bg-hover);
}

/* Pressed / active (neutral) */
a.button:active, .button:active,
a.button.active, .button.active {
  background: var(--fbtn-bg-active);
  border-color: var(--fbtn-border-hover);
}

/* Keyboard focus → accessible focus ring (kept separate from hover) */
a.button:focus-visible, .button:focus-visible {
  border-color: var(--fbtn-primary);
  box-shadow: 0 0 0 3px var(--fbtn-primary-ring);
}

/* Primary → solid accent fill */
a.button.primary, .button.primary {
  color: #fff;
  border-color: transparent;
  background: var(--fbtn-primary);
}
a.button.primary:hover, .button.primary:hover {
  color: #fff;
  border-color: transparent;
  background: var(--fbtn-primary-hover);
}
a.button.primary:active, .button.primary:active,
a.button.primary.active, .button.primary.active {
  background: var(--fbtn-primary-active);
}
a.button.primary:focus-visible, .button.primary:focus-visible {
  box-shadow: 0 0 0 3px var(--fbtn-primary-ring);
}

/* Negative → neutral by default, red on interaction (matches original) */
a.button.negative:hover, .button.negative:hover {
  color: #fff;
  border-color: transparent;
  background: var(--fbtn-negative-hover);
}
a.button.negative:active, .button.negative:active,
a.button.negative.active, .button.negative.active {
  background: var(--fbtn-negative-active);
}
a.button.negative:focus-visible, .button.negative:focus-visible {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--fbtn-negative-ring);
}

/* Positive → neutral by default, green on interaction (matches original) */
a.button.positive:hover, .button.positive:hover {
  color: #fff;
  border-color: transparent;
  background: var(--fbtn-positive-hover);
}
a.button.positive:active, .button.positive:active,
a.button.positive.active, .button.positive.active {
  background: var(--fbtn-positive-active);
}
a.button.positive:focus-visible, .button.positive:focus-visible {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--fbtn-positive-ring);
}

/* Disabled */
a.button[disabled], .button[disabled],
button[disabled], button:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}

/* Shapes */
a.button.pill, .button.pill {
  border-radius: 19px;
  padding: 7px 16px;
}

/* Button groups — flat, single shared border between members */
a.button.left, .button.left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}
a.button.middle, .button.middle {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  border-right: none;
  border-left: none;
}
a.button.right, .button.right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
}

/* Sizes */
a.button.big, button.big {
  font-size: 13px;
  padding: 9px 18px;
}

/* Icons: rendered with Font Awesome 4 (already loaded via font-awesome.min.css)
   instead of the PNG sprite. Same markup as before — <span class="icon NAME"> —
   but the glyph comes from the FontAwesome font, so it inherits currentColor
   (crisp on light buttons and on the colored hover states alike).
   Only the icons actually used in the app are mapped (calendar, clock,
   magnifier, mail, plus, user); add a line here if a new one is needed. */
a.button span.icon, .button span.icon {
  flex: none;
  width: auto;
  height: auto;
  margin: 0 7px 0 0;
  font-family: 'FontAwesome';
  font-size: 13px;
  line-height: 1;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a.button span.icon::before, .button span.icon::before { display: inline-block; }

a.button span.icon.calendar::before,   .button span.icon.calendar::before   { content: "\f073" }
a.button span.icon.clock::before,      .button span.icon.clock::before      { content: "\f017" }
a.button span.icon.magnifier::before,  .button span.icon.magnifier::before  { content: "\f002" }
a.button span.icon.mail::before,       .button span.icon.mail::before       { content: "\f0e0" }
a.button span.icon.plus::before,       .button span.icon.plus::before       { content: "\f067" }
a.button span.icon.user::before,       .button span.icon.user::before       { content: "\f007" }