/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ============================================
   Brand Color Tokens
   All colors in the app derive from these vars.
   ============================================ */
:root {
  /* Brand colors — 7 tokens total */
  --mw-text:             #000;
  --mw-accent:           #0d9488;
  --mw-green:            #7c9a72;
  --mw-red:              #dc2626;
  --mw-surface:          rgba(128,128,128,0.5);
  --mw-surface-border:   rgba(128,128,128,0.6);
  --mw-surface-hover:    rgba(128,128,128,0.65);

  /* Derived — glass effect */
  --mw-glass-bg:         rgba(255,255,255,0.12);
  --mw-glass-border:     rgba(255,255,255,0.3);
  --mw-glass-shadow:     0 0 0 0.5px rgba(255,255,255,0.2) inset, 0 1px 3px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);
  --mw-glass-blur:       blur(8px) saturate(1.4) brightness(1.08);
  --mw-text-shadow:      0 0 8px rgba(255,255,255,0.4);

  /* Derived — grid */
  --mw-cell-border:      rgba(0,0,0,0.04);
  --mw-cell-am:          rgba(0,0,0,0.02);
  --mw-stripe:           rgba(0,0,0,0.06);

  /* Derived — ghost (accent at varying opacity) */
  --mw-ghost-bg:         rgba(13,148,136,0.35);
  --mw-ghost-border:     rgba(13,148,136,0.7);
  --mw-ghost-hover:      rgba(13,148,136,0.45);
}
.dark {
  --mw-text:             #fff;
  --mw-glass-bg:         rgba(20,20,20,0.2);
  --mw-glass-border:     rgba(255,255,255,0.1);
  --mw-glass-shadow:     0 0 0 0.5px rgba(255,255,255,0.06) inset, 0 1px 3px rgba(0,0,0,0.2), 0 8px 32px rgba(0,0,0,0.15);
  --mw-glass-blur:       blur(8px) saturate(1.3) brightness(0.95);
  --mw-text-shadow:      0 0 8px rgba(0,0,0,0.5);
  --mw-cell-border:      rgba(255,255,255,0.04);
  --mw-cell-am:          rgba(255,255,255,0.02);
  --mw-stripe:           rgba(255,255,255,0.06);
  --mw-ghost-bg:         rgba(13,148,136,0.35);
  --mw-ghost-border:     rgba(13,148,136,0.7);
  --mw-ghost-hover:      rgba(13,148,136,0.45);
}

/* ============================================
   Liquid Glass Effect
   Clear, transparent panels with subtle refraction
   ============================================ */
.liquid-glass {
  background: var(--mw-glass-bg);
  backdrop-filter: var(--mw-glass-blur);
  -webkit-backdrop-filter: var(--mw-glass-blur);
  border-radius: 0.75rem;
  border: 1px solid var(--mw-glass-border);
  box-shadow: var(--mw-glass-shadow);
  color: var(--mw-text);
}
/* Ensure text is crisp on glass surfaces */
.liquid-glass * {
  text-shadow: var(--mw-text-shadow);
}

/* ============================================
   Design System
   ============================================
   7 brand colors (CSS vars, defined above):

   --mw-text       #000 / #fff    All text
   --mw-accent     #0d9488        Links, today, ghost, now-line
   --mw-green      #7c9a72        Connected-user dot
   --mw-red        #dc2626        Error messages
   --mw-surface    grey @ 50%     Buttons, busy blocks, list slots
   --mw-surface-border  grey @ 60%
   --mw-surface-hover   grey @ 65%

   Rules:
     Text is always --mw-text, never grey/muted.
     Buttons and busy blocks share the same surface.
     Accent is ONE color in both modes.
     Toasts use the glass surface, errors in --mw-red.

   Typography (4 sizes):
     h1: 1.125rem/500  h2: 0.8rem/500
     h3: 0.7rem/500    body: 0.7rem/300
   ============================================ */

/* ============================================
   Font Scale: 4 levels
   ============================================
   h1:   1.125rem (18px), weight 500 — app title only
   h2:   0.8rem   (13px), weight 500 — section headings, buttons, day headers
   h3:   0.7rem   (11px), weight 500 — time labels, list day headers, tz label
   body: 0.7rem   (11px), weight 300 — participant names, hints, tagline
   ============================================ */
.cal-h1   { font-size: 1.125rem; font-weight: 500; }
.cal-h2   { font-size: 0.8rem;   font-weight: 500; }
.cal-h3   { font-size: 0.7rem;   font-weight: 500; }
.cal-body-text { font-size: 0.7rem; font-weight: 300; }

/* ============================================
   Shared Layout Utilities
   ============================================ */
.cal-layout-container { max-height: min(100%, 600px); }
.cal-header-past { opacity: 0.4; }
.cal-weekend-header { opacity: 0.6; }
.cal-block-animated {
  transition: top 0.5s cubic-bezier(0.4,0,0.2,1), height 0.5s cubic-bezier(0.4,0,0.2,1);
}
/* Timezone trigger label (clickable, dotted underline) */
.tz-trigger {
  cursor: pointer;
  font-size: 0.75rem;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* ============================================
   Shared Calendar Grid Component
   Used by: calendars/show, availability_rules/index
   ============================================ */

.cal-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.cal-header-row {
  display: flex;
  border-bottom: 1px solid var(--mw-cell-border);
  shrink: 0;
}
.cal-axis-header {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-day-header {
  flex: 1;
  text-align: center;
  padding: 6px 2px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--mw-text);
}
.cal-day-name { text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.05em; color: var(--mw-text); }
.cal-day-num { font-size: 0.85rem; }
.cal-today-num {
  background: var(--mw-accent);
  color: white !important;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
}
.cal-axis-col {
  width: 56px;
  flex-shrink: 0;
}
.cal-time-label {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--mw-text);
  padding: 2px 8px 0 0;
  text-align: right;
  position: relative;
  top: -0.5em;
  border-bottom: 1px solid transparent;
}
.cal-day-col {
  flex: 1;
  position: relative;
  min-width: 0;
}
.cal-cell {
  border-bottom: 1px solid var(--mw-cell-border);
  border-left: 1px solid var(--mw-cell-border);
}
/* AM/PM shading */
.cal-slot-am { background: var(--mw-cell-am); }
.cal-slot-pm { background: transparent; }
/* Blocks inside day columns */
.cal-block {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 4px;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 5;
}
.cal-busy {
  background: var(--mw-surface);
  border: 1px solid var(--mw-surface-border);
  font-size: 0.75rem;
  font-weight: 300;
}
/* Past day overlay */
.cal-day-col-past {
  pointer-events: none;
}
.cal-day-col-past::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Ensure coverage of all 24 hours (24 * max possible hour height) */
  min-height: 2000px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    var(--mw-stripe) 6px,
    var(--mw-stripe) 7px
  );
  z-index: 6;
  pointer-events: none;
}
.cal-block-text {
  padding: 2px 6px;
  color: var(--mw-text);
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.cal-busy { overflow: hidden; }
.cal-free {
  background: var(--mw-cell-border);
  border-radius: 2px;
}
/* Now indicator */
.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mw-accent);
  z-index: 10;
  pointer-events: none;
}
.cal-now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mw-accent);
}
/* Toolbar buttons */
.cal-btn {
  background: var(--mw-surface);
  border: 1px solid var(--mw-surface-border);
  color: var(--mw-text);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.3em 0.65em;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-btn:hover { background: var(--mw-surface-hover); }
.cal-btn-active { background: var(--mw-surface-hover); border-color: var(--mw-surface-active); }
.cal-btn-accent {
  background: var(--mw-accent);
  border: 1px solid var(--mw-accent);
  color: #fff;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.3em 0.65em;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-btn-accent:hover { opacity: 0.85; }
/* Timezone label */
.tz-axis-label {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-accent);
  padding: 2px 0;
}
/* Ghost preview */
.cal-ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 4px;
  background: var(--mw-ghost-bg);
  border: 1.5px dashed var(--mw-ghost-border);
  z-index: 8;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: top 0.08s ease-out, height 0.08s ease-out;
}
.cal-ghost:hover {
  background: var(--mw-ghost-hover);
}
.cal-ghost-text {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--mw-text);
  padding: 2px 6px;
}
/* List view */
.cal-list-view {
  padding: 0 4px;
}
.cal-list-day {
  margin-bottom: 12px;
}
.cal-list-day-header {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--mw-text);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mw-cell-border);
}
.cal-list-today {
  color: var(--mw-accent) !important;
}
.cal-list-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cal-list-slot {
  padding: 8px 0;
  width: 130px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--mw-surface-border);
  background: var(--mw-surface);
  color: var(--mw-text);
  cursor: pointer;
  transition: background 0.15s;
}
.cal-list-slot:hover {
  background: var(--mw-surface-hover);
}