/* Design tokens ----------------------------------------------------------
   Single source of truth for this plugin's own chrome (buttons, links,
   panels, borders, spacing) — everything below used to respell the same
   handful of colors/radii slightly differently in different sections (e.g.
   #eef4fc vs #eef7ff for what was meant to be the same pale-blue highlight,
   or #4a90d9 vs #3b7ddd for what was meant to be the same primary blue),
   which is what actually made the UI look inconsistent screen to screen.
   Deliberately excludes calendar/TODO-list *data* colors (the color swatch
   each calendar/list owner picks, the birthday-event pink, etc) — those
   are user data, not part of this plugin's own visual theme. */
:root {
  --sc-primary: #3b7ddd;
  --sc-primary-dark: #2f68b8;
  --sc-primary-bg: #e6eefc;
  --sc-highlight-bg: #eef4fc;
  --sc-select-bg: #d5e6fb;
  --sc-danger: #d9534f;
  --sc-warning: #e0a02f;
  --sc-success: #5cb85c;

  --sc-text: #333;
  --sc-text-muted: #666;
  --sc-text-soft: #888;
  --sc-text-faint: #999;

  --sc-border: #ccc;

  --sc-radius: 4px;
  --sc-radius-sm: 3px;

  --sc-gap-2xs: 2px;
  --sc-gap-xs: 4px;
  --sc-gap-sm: 6px;
  --sc-gap-md: 8px;
  --sc-gap: 10px;
  --sc-gap-lg: 12px;
  --sc-gap-xl: 16px;
  --sc-gap-2xl: 20px;
  --sc-gap-3xl: 24px;
}

/* Layout shell -------------------------------------------------------- */

#simple-calendar-app {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-gap-2xl);
}

#simple-calendar-sidebar {
  flex: 0 0 220px;
  width: 220px;
}

#simple-calendar-main {
  flex: 1 1 auto;
  min-width: 0;
}

.simple-calendar-sidebar-toggle {
  display: none;
}

/* Buttons/links, hover state --------------------------------------------- */
/* The theme's global `a:hover, a:focus { text-decoration: underline; }` is
   more specific than a plain class selector (a pseudo-class counts toward
   specificity same as a class, so `a:hover` beats `.some-class` alone),
   which is why it kept winning here even with our own rules already
   present — every one of these needs its own `:hover`/`:focus` rule to
   actually take precedence. Buttons get a color/background swap instead of
   an underline, matching how a button (not a plain text link) should
   respond to hover. */
#simple-calendar-app a:hover,
#simple-calendar-app a:focus,
.simple-calendar-event-form a:hover,
.simple-calendar-event-form a:focus,
.simple-calendar-calendar-form a:hover,
.simple-calendar-calendar-form a:focus {
  text-decoration: none;
}

#simple-calendar-app a.icon,
.simple-calendar-scope-links a,
.simple-calendar-mini-nav-prev,
.simple-calendar-mini-nav-next,
.simple-calendar-form-actions a {
  border-radius: var(--sc-radius-sm);
  padding: var(--sc-gap-2xs) var(--sc-gap-xs);
}

#simple-calendar-app a.icon:hover,
.simple-calendar-scope-links a:hover,
.simple-calendar-mini-nav-prev:hover,
.simple-calendar-mini-nav-next:hover,
.simple-calendar-form-actions a:hover {
  background-color: var(--sc-primary-bg);
  color: var(--sc-primary-dark);
}

/* The theme positions an .icon's ::before glyph with `margin-left: -20px`,
   which only lines up correctly when padding-left is exactly the 20px the
   theme itself sets on .icon — anywhere we've given one of our own icon
   buttons a different padding-left, that fixed -20px pull throws the icon
   off (shifted/clipped) instead of sitting where the padding actually
   starts. Removing it here (scoped to just our own UI, not Redmine as a
   whole) makes the icon simply follow whatever padding-left we set. */
#simple-calendar-app .icon::before,
#simple-calendar-app .icon-only::before,
.simple-calendar-event-form .icon::before,
.simple-calendar-calendar-form .icon::before {
  margin-left: 0;
}

/* Sidebar --------------------------------------------------------------- */

.simple-calendar-add-btn {
  display: block;
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
  background: var(--sc-primary);
  color: #fff !important;
  border-radius: var(--sc-radius);
  margin-bottom: var(--sc-gap-lg);
  font-weight: bold;
}

.simple-calendar-add-btn:hover {
  background: var(--sc-primary-dark);
}

.simple-calendar-mini-nav {
  margin-bottom: var(--sc-gap-lg);
}

.simple-calendar-mini-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  margin-bottom: var(--sc-gap-xs);
}

.simple-calendar-mini-month {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: center;
}

.simple-calendar-mini-month td, .simple-calendar-mini-month th {
  padding: var(--sc-gap-2xs);
  position: relative;
}

.simple-calendar-mini-month td.is-outside a {
  color: var(--sc-text-faint);
}

.simple-calendar-mini-month td.is-today {
  background: var(--sc-highlight-bg);
  border-radius: 50%;
}

.simple-calendar-scope-links, .simple-calendar-footer-links {
  list-style: none;
  margin: 0 0 var(--sc-gap-lg);
  padding: 0;
}

.simple-calendar-scope-links li, .simple-calendar-footer-links li {
  padding: 3px 0;
}

.simple-calendar-scope-links li.selected a {
  font-weight: bold;
  color: var(--sc-primary);
}

.simple-calendar-calendar-group {
  margin-bottom: var(--sc-gap-lg);
}

.simple-calendar-calendar-group h4 {
  margin: 0 0 var(--sc-gap-xs);
  font-size: 12px;
  color: var(--sc-text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.simple-calendar-add-calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--sc-radius-sm);
  background: var(--sc-primary);
  color: #fff !important;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
}

.simple-calendar-add-calendar-btn:hover {
  background: var(--sc-primary-dark);
  text-decoration: none;
}

.simple-calendar-calendar-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.simple-calendar-checkbox-row form {
  display: inline;
}

.simple-calendar-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: var(--sc-gap-xs);
  vertical-align: middle;
}

/* Toolbar ----------------------------------------------------------------- */

#simple-calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sc-gap-md);
  margin-bottom: var(--sc-gap-lg);
}

.simple-calendar-toolbar-nav {
  display: flex;
  align-items: center;
  gap: var(--sc-gap-sm);
}

.simple-calendar-btn {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  background: #fff;
  text-decoration: none;
  color: var(--sc-text);
}

.simple-calendar-period-label {
  margin: 0 0 0 var(--sc-gap-md);
  font-size: 18px;
}

.simple-calendar-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sc-gap-md);
  position: relative;
}

.simple-calendar-filter-dropdown {
  position: relative;
}

.simple-calendar-filter-toggle {
  border: 1px solid var(--sc-border);
  background: #fff;
  border-radius: var(--sc-radius-sm);
  padding: 3px 8px;
  cursor: pointer;
}

.simple-calendar-filter-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: var(--sc-gap);
  z-index: 50;
  min-width: 220px;
}

.simple-calendar-filter-menu p {
  margin: var(--sc-gap-xs) 0;
}

/* Month grid --------------------------------------------------------------- */

.simple-calendar-month-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.simple-calendar-month-grid th, .simple-calendar-month-grid td {
  border: 1px solid #e0e0e0;
  vertical-align: top;
}

.simple-calendar-month-grid th {
  padding: var(--sc-gap-xs);
  background: #f5f5f5;
  text-align: center;
}

.simple-calendar-day-cell {
  height: 100px;
  padding: var(--sc-gap-xs);
}

.simple-calendar-day-cell.is-outside {
  background: #fafafa;
}

.simple-calendar-day-cell.is-today {
  background: var(--sc-highlight-bg);
}

.simple-calendar-drag-day-cell {
  cursor: pointer;
  user-select: none;
}

.simple-calendar-drag-day-cell.is-drag-selected {
  background: var(--sc-select-bg);
}

.simple-calendar-drag-day-cell.is-move-target {
  background: var(--sc-select-bg);
}

.simple-calendar-day-number {
  font-size: 12px;
  margin-bottom: 2px;
}

.simple-calendar-lunar-label {
  color: var(--sc-text-faint);
  font-size: 10px;
  margin-left: var(--sc-gap-xs);
}

.is-sunday, th.is-sunday {
  color: var(--sc-danger);
}

.is-saturday, th.is-saturday {
  color: var(--sc-primary);
}

.hide-weekends .is-sunday, .hide-weekends .is-saturday {
  display: none;
}

.simple-calendar-day-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Reserves a same-height empty row for the slots assign_month_row_slots!
   (server-side) leaves nil in this cell, so every day's rows line up with
   whichever *other* day actually has that row's event — see
   _month_grid.html.erb. Invisible, not just empty, so it never looks like
   its own event. */
.simple-calendar-event-bar-placeholder {
  height: 18px;
  visibility: hidden;
}

.is-compact .simple-calendar-event-bar-placeholder {
  display: none;
}

.simple-calendar-event-bar {
  /* A fixed, explicitly-*specified* height (not min-height) is required so
     the child's `height: 100%` below resolves at all — per the CSS spec, a
     percentage height only resolves against a parent whose height was
     explicitly specified; against an auto/min-height-only parent it
     computes to auto instead. Without this, an empty continuation segment
     (is-continued-from/-to render blank text — see _event_bar.html.erb, so
     the title isn't repeated on every day of a multi-day event) had no
     line box, so both the child and this bar collapsed toward 0 height and
     the color visually vanished on those days. */
  height: 18px;
  /* is-important adds a 2px border; without border-box that border is
     added *on top of* the 18px content height (default content-box),
     making important events 4px taller than normal ones. border-box keeps
     every event bar's rendered height identical regardless of border. */
  box-sizing: border-box;
  border-radius: var(--sc-radius-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  /* Lifts the bar's painted background above the <table>'s own
     border-collapse border layer, which can otherwise render on top of a
     child's bled-out background right at the shared cell edge. */
  position: relative;
  z-index: 2;
  cursor: move;
}

/* Hidden (not just dimmed) while its floating clone follows the cursor —
   showing both at once read as two separate events instead of one moving.
   visibility:hidden rather than display:none so it keeps its layout space
   (nothing else in the cell reflows) and drops out of elementFromPoint hit
   testing (so it can't get picked up as its own drop target). */
.simple-calendar-event-bar.is-dragging {
  visibility: hidden;
}

/* The <a>/<span> fill the whole bar (not just their text) so the entire
   colored block is clickable, not only the glyphs of the title. */
.simple-calendar-event-bar a, .simple-calendar-event-bar span {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  line-height: 16px;
  padding: 0 var(--sc-gap-xs);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  text-decoration: none;
}

.simple-calendar-event-bar.is-important {
  border: 2px solid var(--sc-danger);
  font-weight: bold;
}

/* A multi-day event's bar is rendered once per day cell it touches (each
   cell is a separate <td>); these two classes make consecutive same-event
   bars read as one continuous block instead of N disconnected pills —
   square off + bleed into the shared edge, and keep rounding only at the
   event's real start/end (or the week row's edge, if it continues into
   another week). The cell has 4px of padding and the grid uses
   border-collapse (a shared ~1px border between cells); bleeding 5px
   (rather than exactly 4px) makes the two adjoining bars overlap slightly
   at the border instead of merely touching it, so the shared gridline is
   fully covered rather than showing through as a thin seam. */
.simple-calendar-event-bar.is-continued-from {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -5px;
}

.simple-calendar-event-bar.is-continued-to {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -5px;
}

.simple-calendar-event-bar.is-important.is-continued-from {
  border-left: none;
}

.simple-calendar-event-bar.is-important.is-continued-to {
  border-right: none;
}

.simple-calendar-event-bar.is-virtual {
  opacity: 0.85;
}

.simple-calendar-event-bar.is-todo.is-completed a,
.simple-calendar-event-bar.is-todo.is-completed span {
  text-decoration: line-through;
  opacity: 0.7;
}

.is-compact .simple-calendar-event-bar {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

.is-compact .simple-calendar-event-bar a, .is-compact .simple-calendar-event-bar span {
  display: none;
}

.is-compact .simple-calendar-day-items {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Year grid ----------------------------------------------------------------- */

.simple-calendar-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-gap-xl);
}

.simple-calendar-year-month h3 {
  text-align: center;
  margin: 0 0 var(--sc-gap-xs);
}

.simple-calendar-year-dot {
  color: var(--sc-primary);
  font-size: 8px;
  display: block;
  line-height: 4px;
}

/* Time grid (week/day) ------------------------------------------------------- */

.simple-calendar-time-grid-header, .simple-calendar-time-grid-allday, .simple-calendar-time-grid-body {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.simple-calendar-time-gutter {
  width: 70px;
}

.simple-calendar-time-grid-header th, .simple-calendar-time-grid-allday td {
  border: 1px solid #e0e0e0;
  padding: var(--sc-gap-xs);
  text-align: center;
}

.simple-calendar-time-grid-scroll {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-top: none;
}

.simple-calendar-hour-row {
  font-size: 11px;
  color: var(--sc-text-soft);
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  padding-right: var(--sc-gap-xs);
  text-align: right;
}

.simple-calendar-time-col {
  position: relative;
  border-left: 1px solid #eee;
  cursor: pointer;
  user-select: none;
}

.simple-calendar-drag-selection {
  position: absolute;
  left: 2px;
  right: 2px;
  background: rgba(59, 125, 221, 0.25);
  border: 1px solid var(--sc-primary);
  border-radius: var(--sc-radius-sm);
  pointer-events: none;
  z-index: 5;
}

/* Dragging an existing event: a floating clone follows the cursor
   directly (see the mousedown/mousemove handlers in simple_calendar.js) —
   simpler and clearer than a separate dashed preview box, since you're
   literally looking at the event itself moving to where you drag it. The
   original is hidden for the duration (.is-dragging above) so there's only
   ever one visible copy. The target cell/column still gets a light
   highlight for drop-zone feedback (.is-move-target, see the
   day-cell/time-col rules above). Month keeps this default (fixed,
   following the raw mouse position) — .is-snapped below overrides it for
   the time-grid instead. */
.simple-calendar-floating-bar {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.85;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Time-grid drag: the clone is re-parented into whichever day column is
   under the cursor and pinned to the snapped time slot (see
   simple_calendar.js) instead of trailing the raw mouse — so minor pointer
   drift never detaches it from the grid it's about to be dropped on. */
.simple-calendar-floating-bar.is-snapped {
  position: absolute;
  left: 0;
  width: 100%;
}

.simple-calendar-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #f0f0f0;
}

/* Current-time indicator (오늘 컬럼에만, see SimpleCalendar.renderNowLine in
   simple_calendar.js) — sits above every event bar (z-index 2) so it's
   always visibly "맨 앞" regardless of how many events are stacked there. */
.simple-calendar-now-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid #e53935;
  z-index: 10;
  pointer-events: none;
}

.simple-calendar-timed-event {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 2px;
}

.simple-calendar-timed-event .simple-calendar-event-bar {
  height: 100%;
}

/* Time-grid events show a two-line block (start-end range, then title) —
   the block's vertical position already encodes the time approximately,
   but only whole-hour gridlines are drawn, so the exact range is spelled
   out in text too (see show_time_range in _event_bar.html.erb). Overrides
   the single-line nowrap+ellipsis rule above, which assumed one line of
   plain text. */
.simple-calendar-timed-event .simple-calendar-event-bar a,
.simple-calendar-timed-event .simple-calendar-event-bar span {
  line-height: normal;
  padding: 2px var(--sc-gap-xs);
}

.simple-calendar-event-time {
  font-size: 10px;
  line-height: 12px;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-calendar-event-title-line {
  font-size: 11px;
  line-height: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* List view ------------------------------------------------------------------ */

.simple-calendar-list-table {
  width: 100%;
  border-collapse: collapse;
}

.simple-calendar-list-table th, .simple-calendar-list-table td {
  border-bottom: 1px solid #eee;
  padding: var(--sc-gap-sm) var(--sc-gap-md);
  text-align: left;
}

.simple-calendar-list-table tr.is-completed td {
  text-decoration: line-through;
  opacity: 0.6;
}

/* TODO checklist page (simple_calendar/todos.html.erb) -------------------- */

.simple-calendar-todo-board {
  display: flex;
  gap: var(--sc-gap-3xl);
  flex-wrap: wrap;
}

.simple-calendar-todo-column {
  flex: 1 1 320px;
  min-width: 280px;
}

.simple-calendar-todo-list-section {
  margin-bottom: var(--sc-gap-2xl);
}

.simple-calendar-todo-list-section h4 {
  margin: 0 0 var(--sc-gap-sm);
  display: flex;
  align-items: center;
  gap: var(--sc-gap-xs);
}

.simple-calendar-add-todo-btn {
  margin-left: auto;
}

.simple-calendar-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #eceff3;
  border-radius: var(--sc-radius);
}

.simple-calendar-todo-row {
  display: flex;
  align-items: center;
  gap: var(--sc-gap-md);
  padding: var(--sc-gap-sm) var(--sc-gap);
  border-bottom: 1px solid #eceff3;
}

.simple-calendar-todo-row:last-child {
  border-bottom: none;
}

.simple-calendar-todo-checkbox {
  /* The active theme styles every <button> as a solid blue pill with white
     text and a 1px blue drop-shadow along the bottom edge
     (input[type=button],input[type=submit],input[type=reset],button in the
     theme's application.css). background/border/color are overridden, but
     box-shadow and border-radius were left as-is, so a rounded blue sliver
     from that drop-shadow still showed beneath the glyph. */
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--sc-text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

.simple-calendar-todo-checkbox:hover,
.simple-calendar-todo-checkbox:focus {
  background: none;
  color: var(--sc-primary);
  box-shadow: none;
}

.simple-calendar-todo-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.simple-calendar-todo-title {
  color: var(--sc-text);
  text-decoration: none;
}

.simple-calendar-todo-title:hover {
  color: var(--sc-primary);
}

.simple-calendar-todo-due {
  font-size: 11px;
  color: var(--sc-text-faint);
}

.simple-calendar-todo-row.is-completed .simple-calendar-todo-title,
.simple-calendar-todo-row.is-completed .simple-calendar-todo-due {
  text-decoration: line-through;
  color: var(--sc-text-faint);
}

.simple-calendar-empty {
  text-align: center;
  color: var(--sc-text-faint);
  padding: var(--sc-gap-2xl) 0 !important;
}

.simple-calendar-history-action {
  display: inline-block;
  padding: 1px var(--sc-gap-md);
  border-radius: 10px;
  font-size: 11px;
  color: #fff;
}

.simple-calendar-history-action-created { background: var(--sc-primary); }
.simple-calendar-history-action-updated { background: var(--sc-warning); }
.simple-calendar-history-action-deleted { background: var(--sc-danger); }
.simple-calendar-history-action-restored { background: var(--sc-success); }

/* Event / calendar modal forms ------------------------------------------------ */

.simple-calendar-event-form, .simple-calendar-calendar-form {
  font-size: 13px;
}

.simple-calendar-field-row {
  margin: 0 0 14px;
}

.simple-calendar-field-row:last-child {
  margin-bottom: 0;
}

.simple-calendar-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-text-muted);
  margin-bottom: var(--sc-gap-xs);
}

/* Checkboxes/radios default to baseline alignment and carry a small default
   margin — next to a text label that reads as sitting low / not lined up
   with its own text, even inside a flex row with align-items:center. This
   fixes it everywhere in both forms, not just the rows already using flex. */
.simple-calendar-event-form input[type="checkbox"],
.simple-calendar-event-form input[type="radio"],
.simple-calendar-calendar-form input[type="checkbox"],
.simple-calendar-calendar-form input[type="radio"] {
  margin: 0;
  vertical-align: middle;
}

/* Consistent look for every plain text/date input, textarea and select in
   these forms — previously each relied on the HTML `size` attribute (a
   character count, not a pixel width) or nothing at all, so inputs, selects
   and textareas all lined up to slightly different widths/heights row to
   row. */
.simple-calendar-event-form input[type="text"],
.simple-calendar-event-form input[type="color"],
.simple-calendar-event-form textarea,
.simple-calendar-event-form select,
.simple-calendar-calendar-form input[type="text"],
.simple-calendar-calendar-form input[type="color"],
.simple-calendar-calendar-form textarea,
.simple-calendar-calendar-form select {
  box-sizing: border-box;
  padding: var(--sc-gap-sm) var(--sc-gap-md);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  font-size: 13px;
  background: #fff;
}

.simple-calendar-event-form input[type="text"]:focus,
.simple-calendar-event-form textarea:focus,
.simple-calendar-event-form select:focus,
.simple-calendar-calendar-form input[type="text"]:focus,
.simple-calendar-calendar-form textarea:focus,
.simple-calendar-calendar-form select:focus {
  border-color: var(--sc-primary);
  outline: none;
}

.simple-calendar-event-form textarea,
.simple-calendar-calendar-form textarea {
  width: 100%;
  resize: vertical;
}

/* Plain text fields (제목/장소, etc.) default to full width — narrower ones
   (date/time pickers, the small 반복 횟수 count field) already override this
   below via a more specific selector, so they're unaffected. Without this,
   a field like 장소 fell back to the browser's default ~20-character input
   width instead of matching the rest of the form. */
.simple-calendar-event-form input[type="text"],
.simple-calendar-calendar-form input[type="text"] {
  width: 100%;
}

.simple-calendar-event-form input[type="color"],
.simple-calendar-calendar-form input[type="color"] {
  width: 60px;
  height: 32px;
  padding: 2px;
}

.simple-calendar-event-form input.simple-calendar-title-input {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  padding: var(--sc-gap-md) 10px;
}

#simple_calendar_event_calendar_id {
  width: 200px;
}

.simple-calendar-assignee-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sc-gap-xs) var(--sc-gap-md);
}

.simple-calendar-assignee-option {
  display: flex;
  align-items: center;
  gap: var(--sc-gap-xs);
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simple-calendar-inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-gap-xs);
  margin-left: var(--sc-gap-lg);
  font-weight: normal;
  white-space: nowrap;
}

.simple-calendar-datetime-row {
  display: flex;
  align-items: center;
  gap: var(--sc-gap-md);
  flex-wrap: wrap;
}

.simple-calendar-datetime-row input.simple-calendar-date-input {
  width: 130px;
}

.simple-calendar-datetime-row .simple-calendar-time-select {
  width: 100px;
}

.simple-calendar-datetime-sep {
  color: var(--sc-text-faint);
}

.simple-calendar-recurrence-row select {
  width: 180px;
}

.simple-calendar-repeat-subpanel {
  display: flex;
  gap: var(--sc-gap-md);
  align-items: center;
  margin-top: -2px;
}

.simple-calendar-repeat-subpanel input.simple-calendar-date-input {
  width: 130px;
}

.simple-calendar-repeat-subpanel input[type="text"]:not(.simple-calendar-date-input) {
  width: 70px;
}

.simple-calendar-reminders {
  padding: var(--sc-gap) var(--sc-gap-lg);
  background: #f8f9fb;
  border: 1px solid #eceff3;
  border-radius: var(--sc-radius);
}

.simple-calendar-creator-row {
  background: #eef1f5;
  border-radius: var(--sc-radius);
  padding: var(--sc-gap-xs) var(--sc-gap-md);
}

.simple-calendar-creator-name {
  font-weight: 600;
}

.simple-calendar-creator-role {
  margin-left: auto;
  font-size: 12px;
  color: var(--sc-text-soft);
}

.simple-calendar-reminder-field-row {
  display: flex;
  align-items: center;
  gap: var(--sc-gap);
  margin-bottom: var(--sc-gap-sm);
}

.simple-calendar-reminder-field-row:last-of-type {
  margin-bottom: var(--sc-gap-md);
}

.simple-calendar-reminder-field-row label {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-gap-xs);
  white-space: nowrap;
}

.simple-calendar-form-actions {
  margin-top: var(--sc-gap-lg);
  display: flex;
  align-items: center;
  gap: var(--sc-gap);
  /* Lets .simple-calendar-delete-link pin to the right edge via plain
     absolute positioning instead of a flex auto-margin — takes it out of
     flex layout entirely so nothing about the flex row (item order, other
     items' widths, etc) can affect where it lands. Applies wherever this
     row shows up (event form, TODO form) — one rule, not a per-form copy. */
  position: relative;
}

.simple-calendar-delete-link {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Notifications bell (rendered on every page via layout hook) ---------------- */

/* Moved into #top-menu, just left of #loggedas, by JS on page load (see the
   $(function(){...}) init block in simple_calendar.js) — float:right so it
   stacks correctly alongside #top-menu's other float:right siblings
   (#account, #loggedas), which is what actually determines left/right
   order there, not DOM position alone. */
.simple-calendar-notifications-bell {
  display: inline-block;
  position: relative;
  float: right;
  margin-right: var(--sc-gap);
}

.simple-calendar-bell-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--sc-danger);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  padding: 0 var(--sc-gap-xs);
  line-height: 14px;
}

.simple-calendar-notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.simple-calendar-notifications-list li {
  padding: var(--sc-gap-md);
  border-bottom: 1px solid #eee;
}

.simple-calendar-notifications-list li.is-unread {
  background: var(--sc-highlight-bg);
  font-weight: bold;
}

.simple-calendar-notification-time {
  color: var(--sc-text-faint);
  font-size: 11px;
  margin-left: var(--sc-gap-md);
}

/* Drag handle ----------------------------------------------------------------- */

.simple-calendar-drag-handle {
  cursor: move;
  color: var(--sc-text-faint);
  width: 20px;
}

.simple-calendar-table-actions {
  white-space: nowrap;
}

/* 자세히 보기/수정(/삭제) links here previously relied on nothing but the
   whitespace between ERB tags for spacing — a few px at most. */
.simple-calendar-table-actions a + a {
  margin-left: var(--sc-gap-lg);
}

/* Responsive / mobile ------------------------------------------------------------
   Modal max-width applies at every size (a 500-700px jQuery UI dialog
   already overflows plenty of desktop-sized-but-not-huge windows too, not
   just phones) — everything else below is gated behind the breakpoints. */

.ui-dialog {
  max-width: 95vw;
  box-sizing: border-box;
}

.ui-dialog .ui-dialog-content {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #simple-calendar-app {
    flex-direction: column;
    gap: var(--sc-gap);
  }

  .simple-calendar-sidebar-toggle {
    display: inline-block;
    align-self: flex-start;
  }

  /* Hidden by default on mobile (rather than always stacked above the
     grid) so the calendar/TODO content itself is what's immediately
     visible on a small screen — the sidebar's mini-nav/calendar list are
     secondary, opt-in navigation, not the primary content. */
  #simple-calendar-sidebar {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    display: none;
  }

  #simple-calendar-sidebar.is-open {
    display: block;
  }

  #simple-calendar-main {
    width: 100%;
  }

  #simple-calendar-toolbar {
    gap: var(--sc-gap-sm);
  }

  .simple-calendar-period-label {
    font-size: 15px;
  }

  .simple-calendar-todo-board {
    gap: var(--sc-gap-lg);
  }
}

@media (max-width: 600px) {
  .simple-calendar-day-cell {
    height: 60px;
    padding: 2px;
  }

  .simple-calendar-day-number {
    font-size: 10px;
  }

  .simple-calendar-lunar-label {
    display: none;
  }

  .simple-calendar-event-bar {
    height: 14px;
    font-size: 9px;
  }

  .simple-calendar-event-bar a, .simple-calendar-event-bar span {
    line-height: 12px;
    padding: 0 2px;
  }

  /* The time-grid's 3 tables (header/all-day/hour body) share one
     horizontally-scrolling ancestor (added in _time_grid.html.erb) instead
     of each independently shrinking their day columns — table-layout:fixed
     columns squeezed thin enough to clip the time labels otherwise, and
     shrinking the header/all-day/body tables independently would have let
     them drift out of column alignment with each other. */
  .simple-calendar-time-grid-hscroll {
    overflow-x: auto;
  }

  .simple-calendar-time-gutter {
    width: 50px;
  }

  .simple-calendar-year-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  /* .simple-calendar-delete-link stays absolutely positioned (out of
     flex flow entirely) regardless of this wrap, so it keeps pinning to
     the top-right corner of the actions row even if 저장/취소/완료 wrap
     onto a second line on a very narrow screen. */
  .simple-calendar-field-row.simple-calendar-datetime-row,
  .simple-calendar-form-actions {
    flex-wrap: wrap;
  }
}

/* Print ------------------------------------------------------------------------ */

@media print {
  #top-menu, #header, #main-menu, #sidebar, #footer,
  #simple-calendar-sidebar, #simple-calendar-toolbar,
  #ajax-modal, .simple-calendar-notifications-bell {
    display: none !important;
  }

  #simple-calendar-app, #simple-calendar-main {
    display: block !important;
    width: 100% !important;
  }
}