/* ============================================================
   PoCalendaring Design Tokens & Shared Styles
   ============================================================ */

:root {
  /* Colors — Primary */
  --po-color-primary: #2563eb;
  --po-color-primary-hover: #1d4ed8;
  --po-color-primary-border: #3b82f6;
  --po-color-primary-active: #0a58ca;

  /* Colors — Status */
  --po-color-status-pending: #f59e0b;
  --po-color-status-paid: #22c55e;
  --po-color-status-overdue: #ef4444;
  --po-color-status-cancelled: #6b7280;

  /* Colors — Backgrounds */
  --po-color-bg-page: #f8f9fa;
  --po-color-bg-hover: #f1f3f5;
  --po-color-bg-dropzone-hover: #e7f1ff;

  /* Colors — Text */
  --po-color-text-primary: #1f2937;
  --po-color-text-white: #fff;

  /* Typography */
  --po-fs-xs: 0.8rem;
  --po-fs-sm: 0.875rem;

  /* Layout */
  --po-header-height: 60px;
  --po-sidebar-width: 200px;

  /* Radii */
  --po-radius-event: 4px;
  --po-radius-file-item: 0.25rem;
  --po-radius-dropzone: 0.375rem;

  /* Effects */
  --po-shadow-event-hover: 0 2px 6px rgba(0,0,0,0.1);
  --po-transition-base: 0.15s ease;
  --po-transition-dropzone: 0.3s ease;
}

/* ============================================================
   Layout — Header & Sidebar
   ============================================================ */

.app-header {
  height: var(--po-header-height);
}

.app-sidebar {
  width: var(--po-sidebar-width);
  min-height: calc(100vh - var(--po-header-height));
}

/* ============================================================
   FullCalendar — Custom Button
   ============================================================ */

.fc-addEventButton-button {
  background-color: var(--po-color-primary) !important;
  border-color: var(--po-color-primary) !important;
  color: var(--po-color-text-white) !important;
}
.fc-addEventButton-button:hover {
  background-color: var(--po-color-primary-hover) !important;
}

/* ============================================================
   FullCalendar — Toolbar Dropdown
   ============================================================ */

.fc-header-toolbar .dropdown { vertical-align: middle; }
.fc-header-toolbar .dropdown-menu { min-width: 160px; }
.fc-header-toolbar .dropdown-item:active { background-color: transparent; color: inherit; }

/* ============================================================
   FullCalendar — Event Styling
   ============================================================ */

.fc-event {
  background-color: var(--po-color-bg-page) !important;
  border: 2px solid var(--po-color-primary-border) !important;
  border-radius: var(--po-radius-event) !important;
  transition: box-shadow var(--po-transition-base), transform var(--po-transition-base), background-color var(--po-transition-base);
  animation: eventSlideIn 0.25s ease both;
}
.fc-event:hover {
  background-color: var(--po-color-bg-hover) !important;
  box-shadow: var(--po-shadow-event-hover);
  transform: translateY(-1px);
}
.fc-event .fc-event-title,
.fc-event .fc-event-main,
.fc-event .fc-event-main-frame,
.fc-event .fc-list-event-title {
  color: var(--po-color-text-primary) !important;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-event .fc-daygrid-event-dot { display: none; }
.fc-event .fc-event-main { display: flex; align-items: center; gap: 0; padding: 4px 8px; }
.fc-event-po { font-weight: 600; font-size: var(--po-fs-xs); line-height: 1; }
.fc-event-client { font-weight: 400; font-size: var(--po-fs-xs); line-height: 1; opacity: 0.75; }

/* Event status border colors */
.fc-event--pending   { border-color: var(--po-color-status-pending) !important; }
.fc-event--paid      { border-color: var(--po-color-status-paid) !important; }
.fc-event--overdue   { border-color: var(--po-color-status-overdue) !important; }
.fc-event--cancelled { border-color: var(--po-color-status-cancelled) !important; }

@keyframes eventSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Dropzone Component
   ============================================================ */

.dropzone {
  border: 2px dashed var(--bs-primary);
  border-radius: var(--po-radius-dropzone);
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--po-transition-dropzone);
  background: var(--bs-light);
  min-height: 120px;
}
.dropzone:hover,
.dropzone.dragover {
  background: var(--po-color-bg-dropzone-hover);
  border-color: var(--po-color-primary-active);
}
.dropzone.has-files { padding: 0.625rem; }
.dropzone-icon { color: var(--bs-primary); margin-bottom: 0.625rem; }
.dropzone.has-files .dropzone-icon,
.dropzone.has-files p,
.dropzone.has-files small { display: none; }

/* ============================================================
   File List & File Items
   ============================================================ */

.file-list { margin-top: 0; text-align: left; }
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.625rem;
  background: var(--bs-light);
  border-radius: var(--po-radius-file-item);
  margin-bottom: 0.3125rem;
  font-size: var(--po-fs-sm);
}
.file-item .btn-remove { color: var(--bs-danger); cursor: pointer; }

/* ============================================================
   Files Display (View PO)
   ============================================================ */

.files-display {
  background: var(--bs-light);
  border-radius: var(--po-radius-file-item);
  padding: 0.625rem;
}