/* Echo UI scheduling, notes, reminders and operational compositions. */
/* Extracted from notes_reminders.html */
  .notes-layout{ display:flex; gap:16px; align-items:stretch; flex-wrap:wrap; }
  .notes-main{ flex: 2 1 520px; }
  .notes-aside{ flex: 1 1 300px; min-width: 280px; }
  .notes-header-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .note-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
  .note-toolbar input{ flex: 1 1 240px; }
  .note-toolbar form{ margin:0; }
  .folder-create{ display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
  .folder-create.hidden{ display:none; }
  .folder-create input{ min-width: 220px; }
  .folder-card{ border: 1px solid var(--ui-color-border); background: var(--ui-color-surface); border-radius: var(--ui-radius-sm); padding: 12px 14px; }
  .folder-card.is-drop{ border-color: rgba(18,181,166,.6); box-shadow: 0 0 0 3px rgba(18,181,166,.14); }
  .folder-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; }
  .folder-title{ font-weight: var(--ui-font-weight-semibold); display:flex; align-items:center; gap:6px; }
  .folder-count{
    font-size: var(--ui-font-size-caption);
    color: var(--ui-color-text-muted);
    border: 1px solid var(--ui-color-border-strong);
    background: var(--ui-color-surface-raised);
    border-radius: 999px;
    padding: 2px 7px;
  }
  .folder-actions{ display:flex; gap:6px; }
  .folder-actions form{ margin:0; }
  .folder-menu{ position: relative; }
  .folder-menu summary{ list-style: none; }
  .folder-menu summary::-webkit-details-marker{ display:none; }
  .folder-menu[open] summary{ color: var(--ui-color-text); }
  .folder-menu-panel{
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: var(--ui-color-surface);
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-surface);
    padding: 8px;
    z-index: 10;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .folder-menu-panel button,
  .folder-menu-panel form button{
    width: 100%;
    text-align: left;
  }
  .folder-notes{ margin-top: 10px; display:flex; flex-direction:column; gap:8px; }
  .folder-card.is-collapsed .folder-notes{ display:none; }
  .note-row{ display:flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 10px; background: var(--ui-color-surface-raised); border: 1px solid transparent; }
  .note-row:hover{ border-color: rgba(255,107,74,.35); }
  .note-row[draggable="true"]{ cursor: grab; }
  .note-row.is-dragging{ opacity: .6; }
  .note-open{ flex:1 1 auto; min-width:0; display:block; text-align:left; box-shadow:none; }
  .note-preview{ max-width:100%; font-size: var(--ui-font-size-table); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-meta{ min-width:0; display:flex; align-items:center; gap:8px; margin-top:2px; }
  .note-time{ font-size: var(--ui-font-size-caption); color: var(--ui-color-text-muted); }
  .note-folder{
    font-size: var(--ui-font-size-caption);
    color: var(--ui-color-text-muted);
    border: 1px solid var(--ui-color-border);
    background: var(--ui-color-surface);
    border-radius: 999px;
    padding: 2px 8px;
  }
  .note-actions{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }
  .note-delete{ flex:0 0 auto; }
  .reminder-card{ margin:0; }

  .note-modal{ position: fixed; inset: 0; background: rgba(15,23,42,.35); display:flex; align-items:center; justify-content:center; z-index: 9999; }
  .note-modal.hidden{ display:none; }
  .note-modal-card{ width: min(560px, 92vw); background: var(--ui-color-surface); border-radius: var(--ui-radius); border: 1px solid var(--ui-color-border-strong); box-shadow: var(--ui-shadow-overlay); padding: 18px; }
  .note-modal-body{ margin-top: 10px; white-space: pre-wrap; overflow-wrap:anywhere; }

  .calendar-shell{
    position: sticky;
    top: 96px;
    height: auto;
    overflow: visible;
    align-self: flex-start;
  }
  .calendar-card{
    height: auto;
    display:flex;
    flex-direction:column;
    width: 100%;
  }
  .calendar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .calendar-grid{
    margin-top: 10px;
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    gap:6px;
  }
  .calendar-weekday{
    text-align:center;
    font-size: var(--ui-font-size-caption);
    color: var(--ui-color-text-muted);
  }
  .calendar-day{
    text-align:center;
    padding: 8px 0;
    border-radius: 10px;
    background: rgba(18,24,38,.08);
    color: var(--ui-color-text);
    cursor: pointer;
    border: 1px solid var(--ui-color-border-strong);
    font-weight: var(--ui-font-weight-semibold);
    position: relative;
  }
  [data-theme="dark"] .calendar-day{
    background: rgba(255,255,255,.08);
  }
  .calendar-badge{
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ui-color-primary);
    color: #fff;
    font-size: var(--ui-font-size-caption);
    line-height: var(--ui-line-height-normal);
    font-weight: var(--ui-font-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .calendar-day:hover{ border-color: rgba(255,107,74,.4); }
  .calendar-day.is-muted{
    background: transparent;
    color: var(--ui-color-text-muted);
    border-color: rgba(18,24,38,.12);
    cursor: default;
  }
  [data-theme="dark"] .calendar-day.is-muted{
    border-color: rgba(189,202,236,.18);
  }
  .calendar-day.is-today{
    border-color: rgba(255,107,74,.5);
    background: rgba(255,107,74,.12);
  }
  .calendar-day.is-selected{
    border-color: rgba(255,107,74,.7);
    background: rgba(255,107,74,.22);
  }
  .reminder-pager{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
  }
  .reminder-page-label{
    font-size: var(--ui-font-size-secondary);
    color: var(--ui-color-text-muted);
  }
  .hidden-by-filter,
  .hidden-by-page{
    display: none !important;
  }
  @media (max-width: 900px){
    .notes-aside{ flex: 1 1 100%; }
    .calendar-card{ width: 100%; }
  }

@media (max-width: 1200px){
  .client-edit-section{
    grid-column: span 12;
  }
  .client-edit-contact-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px){
  .client-edit-grid,
  .client-edit-fields{
    grid-template-columns: 1fr;
  }
  .client-edit-field,
  .client-edit-field-lg,
  .client-edit-field-xl{
    grid-column: auto;
  }
  .client-edit-actions{
    align-items: flex-start;
    flex-direction: column;
  }
}