/**
 * Widget Chrome Styles
 *
 * Provides the floating pill handle and size controls for all widgets.
 * Import this CSS for consistent widget chrome across the app.
 *
 * Usage:
 *   <link rel="stylesheet" href="/css/widget-chrome.css">
 *
 * Required HTML structure:
 *   <div class="widget" data-widget-type="calendar">
 *     <div class="widget-handle">
 *       <div class="handle-icon"><svg>...</svg></div>
 *       <span class="handle-label">Calendar</span>
 *       <div class="handle-divider"></div>
 *       <div class="size-controls">
 *         <button class="size-btn" data-size="card">...</button>
 *         <button class="size-btn active" data-size="mini">...</button>
 *         <button class="size-btn" data-size="expanded">...</button>
 *       </div>
 *       <button class="handle-close">×</button>
 *     </div>
 *     <div class="widget-body">...</div>
 *   </div>
 */

/* ==========================================
   WIDGET COLOR VARIABLES
   ========================================== */
:root {
  /* Vibrant, charming widget colors */
  --widget-calendar: #d06012;
  --widget-clients: #3483c5;
  --widget-resources: #8f49d2;
  --widget-map: #1daa68;
  --widget-job: #2563eb;  /* Blue for job widgets */
  --widget-review: #f59e0b;  /* Amber for review widgets */
  --widget-contact: #22d3ee; /* Cyan for contact widgets */
}

/* Apply color based on widget type */
.widget[data-widget-type="calendar"] { --widget-color: var(--widget-calendar); }
.widget[data-widget-type="clients"] { --widget-color: var(--widget-clients); }
.widget[data-widget-type="resources"] { --widget-color: var(--widget-resources); }
.widget[data-widget-type="map"] { --widget-color: var(--widget-map); }
.widget[data-widget-type="job"] { --widget-color: var(--widget-job); }
.widget[data-widget-type="review"] { --widget-color: var(--widget-review); }
.widget[data-widget-type="contact"] { --widget-color: var(--widget-contact); }

/* ==========================================
   BASE WIDGET
   ========================================== */
.widget {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 36, 0.95) 0%,
    rgba(18, 21, 26, 0.98) 100%
  );
  border-radius: 14px;
  overflow: visible;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease, color 0.4s ease, transform 0.4s ease;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.2),
    0 0 40px color-mix(in srgb, var(--widget-color, #f5a623) 5%, transparent);
}

.widget:hover {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.25),
    0 0 60px color-mix(in srgb, var(--widget-color, #f5a623) 10%, transparent),
    0 0 100px color-mix(in srgb, var(--widget-color, #f5a623) 5%, transparent);
}

/* ==========================================
   FLOATING PILL HANDLE
   ========================================== */
.widget-handle {
  position: absolute;
  top: -10px;
  left: 16px;
  width: calc(70% - 32px);  /* 70% of widget, minus left offset and some padding */
  /* Dark background with subtle color tint for better readability */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--widget-color, #f5a623) 25%, rgba(30, 33, 42, 0.98)) 0%,
    color-mix(in srgb, var(--widget-color, #f5a623) 15%, rgba(22, 25, 32, 0.98)) 100%
  );
  border-radius: 14px;
  padding: 4px 10px 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  /* White text for maximum contrast */
  color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 2px 12px rgba(0,0,0,0.5),
    0 0 0 1px color-mix(in srgb, var(--widget-color, #f5a623) 40%, transparent),
    0 0 20px color-mix(in srgb, var(--widget-color, #f5a623) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  user-select: none;
}

.widget-handle:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--widget-color, #f5a623) 35%, rgba(30, 33, 42, 0.98)) 0%,
    color-mix(in srgb, var(--widget-color, #f5a623) 20%, rgba(22, 25, 32, 0.98)) 100%
  );
  box-shadow:
    0 4px 20px rgba(0,0,0,0.5),
    0 0 0 1px color-mix(in srgb, var(--widget-color, #f5a623) 60%, transparent),
    0 0 30px color-mix(in srgb, var(--widget-color, #f5a623) 35%, transparent),
    0 0 60px color-mix(in srgb, var(--widget-color, #f5a623) 15%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.widget-handle:active {
  cursor: grabbing;
  transform: scale(0.98);
}

/* Expanded state - handle still draggable for repositioning when collapsed */
.widget[data-state="expanded"] .widget-handle {
  cursor: default;
}

/* ==========================================
   HANDLE ICON
   ========================================== */
.handle-icon {
  width: 18px;
  height: 18px;
  background: color-mix(in srgb, var(--widget-color, #f5a623) 30%, rgba(0,0,0,0.3));
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Colored icon for widget identification */
  color: var(--widget-color, #f5a623);
}

.handle-icon svg,
.handle-icon i {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

/* ==========================================
   HANDLE LABEL
   ========================================== */
.handle-label {
  flex: 1;  /* Expand to fill available space */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Optional mood indicator for personality */
.handle-mood {
  font-size: 10px;
  transition: transform 0.3s ease;
  opacity: 0.8;
}

.widget:hover .handle-mood {
  transform: scale(1.15);
  opacity: 1;
}

/* ==========================================
   HANDLE DIVIDER
   ========================================== */
.handle-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.2);
  margin: 0 2px;
}

/* ==========================================
   SIZE CONTROLS (Linear-style glyphs)
   ========================================== */
.size-controls {
  display: flex;
  gap: 3px;
  align-items: center;
}

.size-btn {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: rgba(255,255,255,0.6);
  padding: 0;
  position: relative;
}

.size-btn:hover {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}

.size-btn.active {
  background: color-mix(in srgb, var(--widget-color, #f5a623) 40%, rgba(255,255,255,0.15));
  color: rgba(255,255,255,1);
}

.size-btn svg {
  width: 11px;
  height: 11px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
}

/* Size button tooltips */
.size-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  padding: 5px 10px;
  background: rgba(26, 29, 36, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  color: #f4f4f6;
  z-index: 100;
}

.size-btn:hover::after {
  opacity: 1;
}

/* ==========================================
   CLOSE BUTTON
   ========================================== */
.handle-close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.2s;
  margin-left: 4px;
}

.handle-close:hover {
  background: rgba(255,90,90,0.9);
  color: rgba(255,255,255,1);
}

/* ==========================================
   WIDGET BODY
   ========================================== */
.widget .widget-body {
  padding: 24px 14px 14px;
}

/* ==========================================
   WIDGET SIZE STATES
   ========================================== */
.widget[data-state="card"] {
  width: 320px;
}

.widget[data-state="mini"] {
  width: 420px;
}

.widget[data-state="mini"] .widget-body {
  min-height: 220px;
}

.widget[data-state="expanded"] {
  width: 100%;
  max-width: 100%;
}

.widget[data-state="expanded"] .widget-body {
  min-height: 320px;
}

/* ==========================================
   DRAG STATE
   ========================================== */
.widget.dragging {
  opacity: 0.95;
  transform: rotate(-1.5deg) scale(1.01);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 80px color-mix(in srgb, var(--widget-color, #f5a623) 15%, transparent),
    0 0 120px color-mix(in srgb, var(--widget-color, #f5a623) 8%, transparent);
}

.widget.dragging .widget-handle {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--widget-color, #f5a623) 40%, rgba(30, 33, 42, 0.98)) 0%,
    color-mix(in srgb, var(--widget-color, #f5a623) 25%, rgba(22, 25, 32, 0.98)) 100%
  );
  box-shadow:
    0 6px 24px rgba(0,0,0,0.5),
    0 0 0 1px color-mix(in srgb, var(--widget-color, #f5a623) 70%, transparent),
    0 0 40px color-mix(in srgb, var(--widget-color, #f5a623) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ==========================================
   SNAP LANDING ANIMATION
   ========================================== */
.widget.just-snapped {
  animation: snapLanding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes snapLanding {
  0% { transform: scale(1.03); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ==========================================
   RESIZE HANDLE
   ========================================== */
.widget-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.widget:hover .widget-resize-handle {
  opacity: 1;
}

.widget-resize-handle::before {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,0.3);
  border-bottom: 2px solid rgba(255,255,255,0.3);
  border-radius: 0 0 3px 0;
}

.widget-resize-handle:hover::before {
  border-color: var(--widget-color, rgba(255,255,255,0.5));
}

/* Don't show resize on expanded widgets */
.widget[data-state="expanded"] .widget-resize-handle {
  display: none;
}

/* ==========================================
   RESIZE VISUAL GUIDES
   ========================================== */
.widget-resize-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.widget-resize-overlay.active {
  opacity: 1;
}

/* Size zone indicators */
.resize-size-zone {
  position: absolute;
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
}

.resize-size-zone .zone-label {
  background: rgba(0,0,0,0.7);
  color: rgba(255,255,255,0.7);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

/* Zone highlighting when cursor is in range */
.resize-size-zone.approaching {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.03);
}

.resize-size-zone.approaching .zone-label {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}

.resize-size-zone.active {
  border-color: var(--widget-color, #22d3ee);
  border-style: solid;
  background: color-mix(in srgb, var(--widget-color, #22d3ee) 10%, transparent);
  box-shadow:
    0 0 30px color-mix(in srgb, var(--widget-color, #22d3ee) 30%, transparent),
    inset 0 0 40px color-mix(in srgb, var(--widget-color, #22d3ee) 5%, transparent);
}

.resize-size-zone.active .zone-label {
  background: var(--widget-color, #22d3ee);
  color: rgba(0,0,0,0.9);
  transform: scale(1.1);
}

/* Size zone positions (set via JS based on widget position) */
.resize-size-zone[data-size="card"] {
  /* Smallest - leftmost */
}

.resize-size-zone[data-size="mini"] {
  /* Medium - middle */
}

.resize-size-zone[data-size="expanded"] {
  /* Largest - rightmost */
}

/* Resize cursor ghost showing current drag size */
.widget-resize-ghost {
  position: fixed;
  border: 2px solid var(--widget-color, #22d3ee);
  border-radius: 14px;
  background: color-mix(in srgb, var(--widget-color, #22d3ee) 8%, rgba(26, 29, 36, 0.9));
  pointer-events: none;
  z-index: 9999;
  transition: width 0.15s ease, height 0.15s ease;
  box-shadow:
    0 0 20px color-mix(in srgb, var(--widget-color, #22d3ee) 40%, transparent),
    0 10px 40px rgba(0,0,0,0.4);
}

/* Size indicator on ghost */
.widget-resize-ghost::after {
  content: attr(data-size-label);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--widget-color, #22d3ee);
  color: rgba(0,0,0,0.9);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Widget during resize */
.widget.resizing {
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================
   LINEAR-STYLE SIZE GLYPH SVGs
   ========================================== */
/*
  Card glyph: <svg viewBox="0 0 16 16"><rect x="4" y="5" width="8" height="6" rx="1"/></svg>
  Mini glyph: <svg viewBox="0 0 16 16"><rect x="2" y="3" width="12" height="10" rx="1"/><line x1="8" y1="3" x2="8" y2="13"/></svg>
  Expanded glyph: <svg viewBox="0 0 16 16"><rect x="2" y="2" width="12" height="12" rx="1"/><path d="M5 2v2H2M14 5h-2V2M11 14v-2h3M2 11h2v3"/></svg>
*/