/* ==========================================================================
   S3 User Storage Plugin Styles
   Compatible with Twenty-series WP themes + WooCommerce defaults
   ========================================================================== */

/* ── CSS variables ──────────────────────────────────────────────────────── */
:root {
  --s3us-blue:    #3B82F6;
  --s3us-green:   #10B981;
  --s3us-amber:   #F59E0B;
  --s3us-red:     #EF4444;
  --s3us-gray-50: #F9FAFB;
  --s3us-gray-100:#F3F4F6;
  --s3us-gray-200:#E5E7EB;
  --s3us-gray-400:#9CA3AF;
  --s3us-gray-700:#374151;
  --s3us-radius:  10px;
  --s3us-shadow:  0 2px 12px rgba(0,0,0,.08);
  --s3us-font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Base container ─────────────────────────────────────────────────────── */
.s3us-container {
  font-family: var(--s3us-font);
  max-width: 860px;
  margin: 0 auto;
  padding: 0 4px;
}

/* ── Notice ─────────────────────────────────────────────────────────────── */
.s3us-notice {
  padding: 12px 16px;
  border-radius: var(--s3us-radius);
  margin-bottom: 16px;
  font-size: .925rem;
}
.s3us-notice--warning { background: #FEF3C7; border-left: 4px solid var(--s3us-amber); }
.s3us-notice--error   { background: #FEE2E2; border-left: 4px solid var(--s3us-red); }
.s3us-notice--info    { background: #EFF6FF; border-left: 4px solid var(--s3us-blue); }

/* ── Quota bar ──────────────────────────────────────────────────────────── */
.s3us-quota-bar {
  margin: 0 0 20px;
}
.s3us-quota-bar__label {
  font-size: .875rem;
  color: var(--s3us-gray-700);
  margin-bottom: 6px;
}
.s3us-quota-bar__track {
  height: 10px;
  background: var(--s3us-gray-200);
  border-radius: 999px;
  overflow: hidden;
}
.s3us-quota-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease, background .3s;
}
.s3us-quota-bar__fill--ok      { background: var(--s3us-green); }
.s3us-quota-bar__fill--warning { background: var(--s3us-amber); }
.s3us-quota-bar__fill--danger  { background: var(--s3us-red); }

/* ── Panel ──────────────────────────────────────────────────────────────── */
.s3us-panel {
  background: #fff;
  border: 1px solid var(--s3us-gray-200);
  border-radius: var(--s3us-radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--s3us-shadow);
}
.s3us-panel__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--s3us-gray-700);
}
.s3us-panel__hint {
  font-size: .8rem;
  color: var(--s3us-gray-400);
  margin: 0 0 14px;
}

/* ── Dropzone ───────────────────────────────────────────────────────────── */
.s3us-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  border: 2px dashed var(--s3us-gray-200);
  border-radius: var(--s3us-radius);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: center;
  background: var(--s3us-gray-50);
  user-select: none;
}
.s3us-dropzone:hover,
.s3us-dropzone--active {
  border-color: var(--s3us-blue);
  background: #EFF6FF;
}
.s3us-dropzone__icon { font-size: 2rem; }
.s3us-dropzone__text { font-size: .9rem; color: var(--s3us-gray-400); }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.s3us-progress {
  margin-top: 12px;
  position: relative;
  height: 22px;
  background: var(--s3us-gray-100);
  border-radius: 999px;
  overflow: hidden;
}
.s3us-progress__bar {
  height: 100%;
  width: 0;
  background: var(--s3us-blue);
  border-radius: 999px;
  transition: width .15s linear;
}
.s3us-progress__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  mix-blend-mode: difference;
}

/* ── Messages ───────────────────────────────────────────────────────────── */
.s3us-msg {
  margin-top: 10px;
  font-size: .875rem;
  padding: 8px 12px;
  border-radius: 6px;
}
.s3us-msg--success { background: #D1FAE5; color: #065F46; }
.s3us-msg--error   { background: #FEE2E2; color: #991B1B; }
.s3us-msg--info    { background: #EFF6FF; color: #1E40AF; }

/* ── File list ──────────────────────────────────────────────────────────── */
.s3us-file-list { margin-top: 16px; }
.s3us-file-list__empty { color: var(--s3us-gray-400); font-size: .875rem; font-style: italic; }
.s3us-file-list__items { list-style: none; margin: 0; padding: 0; }
.s3us-file-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .875rem;
  transition: background .15s;
}
.s3us-file-list__item:hover { background: var(--s3us-gray-50); }
.s3us-file-list__item a { flex: 1; color: var(--s3us-blue); text-decoration: none; word-break: break-all; }
.s3us-file-list__item a:hover { text-decoration: underline; }
.s3us-file-list__meta { color: var(--s3us-gray-400); white-space: nowrap; font-size: .8rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.s3us-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid var(--s3us-gray-200);
  background: #fff;
  border-radius: 6px;
  font-size: .875rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: var(--s3us-font);
  color: var(--s3us-gray-700);
}
.s3us-btn:hover { background: var(--s3us-gray-50); border-color: var(--s3us-gray-400); }
.s3us-btn--primary { background: var(--s3us-blue); border-color: var(--s3us-blue); color: #fff; }
.s3us-btn--primary:hover { background: #2563EB; }
.s3us-btn--danger { background: #fff; border-color: var(--s3us-red); color: var(--s3us-red); }
.s3us-btn--danger:hover { background: #FEE2E2; }
.s3us-btn--active { background: var(--s3us-blue); border-color: var(--s3us-blue); color: #fff; }
.s3us-btn--sm { padding: 3px 8px; font-size: .78rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHART DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */

.s3us-chart-container {
  font-family: var(--s3us-font);
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Controls row ───────────────────────────────────────────────────────── */
.s3us-chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.s3us-chart-controls__ranges,
.s3us-chart-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.s3us-chart-controls__actions { margin-left: auto; }
.s3us-label { font-size: .8rem; color: var(--s3us-gray-400); margin-right: 4px; }

/* ── Legend toggles ─────────────────────────────────────────────────────── */
.s3us-chart-legend-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  font-size: .85rem;
}
.s3us-chart-legend-toggles label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.s3us-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Chart wrapper ──────────────────────────────────────────────────────── */
.s3us-chart-wrapper {
  position: relative;
  background: #fff;
  border: 1px solid var(--s3us-gray-200);
  border-radius: var(--s3us-radius);
  padding: 16px;
  box-shadow: var(--s3us-shadow);
  height: 400px;
  margin-bottom: 8px;
}
#s3us-storage-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.s3us-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.85);
  border-radius: var(--s3us-radius);
  z-index: 10;
}
.s3us-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid var(--s3us-gray-200);
  border-top-color: var(--s3us-blue);
  border-radius: 50%;
  animation: s3us-spin .7s linear infinite;
  margin-bottom: 10px;
}
@keyframes s3us-spin { to { transform: rotate(360deg); } }

.s3us-chart-hint {
  font-size: .8rem;
  color: var(--s3us-gray-400);
  text-align: center;
  margin-bottom: 20px;
}

/* ── Summary stat cards ─────────────────────────────────────────────────── */
.s3us-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.s3us-stat-card {
  background: #fff;
  border: 1px solid var(--s3us-gray-200);
  border-radius: var(--s3us-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--s3us-shadow);
}
.s3us-stat-card__label {
  font-size: .78rem;
  color: var(--s3us-gray-400);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.s3us-stat-card__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--s3us-gray-700);
}

/* ── Annotation panel ───────────────────────────────────────────────────── */
.s3us-annotation-panel {
  background: #fff;
  border: 1px solid var(--s3us-gray-200);
  border-radius: var(--s3us-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--s3us-shadow);
}
.s3us-annotation-panel__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--s3us-gray-700);
}
.s3us-annotation-list { margin-bottom: 16px; }
.s3us-annotation-list__empty { font-size: .875rem; color: var(--s3us-gray-400); font-style: italic; }
.s3us-annotation-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--s3us-gray-100);
}
.s3us-annotation-row:last-child { border-bottom: none; }
.s3us-annotation-row__info { flex: 1; font-size: .875rem; color: var(--s3us-gray-700); }
.s3us-annotation-row__info small { color: var(--s3us-gray-400); }

/* ── Annotation add form ────────────────────────────────────────────────── */
.s3us-annotation-add > summary {
  cursor: pointer;
  color: var(--s3us-blue);
  font-size: .9rem;
  font-weight: 600;
  list-style: none;
  padding: 6px 0;
}
.s3us-annotation-add > summary::marker,
.s3us-annotation-add > summary::-webkit-details-marker { display: none; }
.s3us-annotation-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.s3us-annotation-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .85rem;
  color: var(--s3us-gray-700);
}
.s3us-annotation-form textarea,
.s3us-annotation-form input[type="text"],
.s3us-annotation-form input[type="date"] {
  padding: 7px 10px;
  border: 1px solid var(--s3us-gray-200);
  border-radius: 6px;
  font-size: .875rem;
  font-family: var(--s3us-font);
  transition: border-color .15s;
}
.s3us-annotation-form input:focus,
.s3us-annotation-form textarea:focus {
  outline: none;
  border-color: var(--s3us-blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.s3us-annotation-form input[type="color"] {
  height: 38px;
  padding: 2px 4px;
  border: 1px solid var(--s3us-gray-200);
  border-radius: 6px;
  cursor: pointer;
}
.s3us-annotation-form textarea { grid-column: 1 / -1; resize: vertical; }
#s3us-annot-submit             { grid-column: 1; }
#s3us-annot-msg                { grid-column: 1 / -1; margin: 0; }

/* ── Admin page styles ──────────────────────────────────────────────────── */
.s3us-admin-card {
  background: #fff;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.s3us-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600;
}
.s3us-badge--green { background: #D1FAE5; color: #065F46; }
.s3us-badge--red   { background: #FEE2E2; color: #991B1B; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .s3us-chart-wrapper { height: 280px; }
  .s3us-annotation-form { grid-template-columns: 1fr; }
  .s3us-chart-controls { flex-direction: column; align-items: flex-start; }
  .s3us-chart-controls__actions { margin-left: 0; }
}