@import url('./tokens.css');

*{box-sizing:border-box}
/* html,body{height:100%} */
/* body{
  margin:0; padding:24px; background:var(--halo-color-bg); color:var(--halo-color-text);
  font-family:var(--halo-font-family); line-height:1.5;
} */

.halo-field{display:flex; flex-direction:column; gap:8px;}
.halo-label{font-size:14px; color:var(--halo-color-muted)}
.halo-input{
  width:100%;
  background:var(--halo-color-surface);
  color:var(--halo-color-text);
  border:var(--halo-border);
  border-radius:var(--halo-radius);
  padding:10px 12px;
  outline:none !important;
  box-shadow:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.halo-input:focus{ border-color:#9ca3af !important; box-shadow:0 0 0 1px #e5e7eb !important; outline:none !important }

.halo-note{font-size:12px; color:var(--halo-color-muted)}

/* Text input baseline system (consistent styling for all inputs) */
.halo-text-root{display:flex; align-items:center; gap:8px; background:#ffffff; color:#111827; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; position:relative; outline:none !important}
.halo-text-root.variant-filled{background:#ffffff}
.halo-text-root.variant-outlined{border-width:1px}
.halo-text-root.size-sm{padding:6px 10px}
.halo-text-root.size-lg{padding:12px 14px}
.halo-text-root:focus-within{outline:none !important; box-shadow:0 0 0 1px #e5e7eb !important; border-color:#9ca3af !important}

.halo-text-prefix,.halo-text-suffix{color:var(--halo-color-muted); min-width:12px}
.halo-text-input{flex:1 1 auto; background:transparent; border:none; color:#111827; font:inherit; outline:none !important; padding:0; min-width:0; font-size:14px}
.halo-text-input::placeholder{font-size:14px}
.halo-textarea{flex:1 1 auto; background:transparent; border:none; color:#111827; font:inherit; outline:none !important; padding:0; min-width:0; resize:none; font-size:14px}
.halo-textarea::placeholder{font-size:14px}
.halo-text-input.invalid{border:none}
.halo-text-clear{background:none; border:none; color:var(--halo-color-muted); cursor:pointer; padding:4px; border-radius:6px; outline:none !important}
.halo-text-clear:hover{background:color-mix(in oklab, var(--halo-color-accent) 12%, transparent)}
.halo-text-spinner{position:absolute; right:40px; opacity:0; transition:opacity .15s ease}
.halo-text-spinner.show{opacity:.8}

.halo-counter{font-size:12px; color:var(--halo-color-muted); margin-top:6px; text-align:right}
.halo-counter.warn{color:var(--halo-color-warning)}
.halo-counter.err{color:var(--halo-color-error)}
.halo-error{font-size:12px; color:var(--halo-color-error); margin-top:4px}

.halo-text-suggestions{display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); background:#ffffff; color:#111827; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); z-index:1000; overflow:hidden; max-height:350px; overflow-y:auto; font-size:14px; text-align:left}
.halo-text-suggestion{padding:10px 12px; border-bottom:1px solid #e5e7eb; cursor:pointer; font-size:14px; text-align:left}
.halo-text-suggestion:last-child{border-bottom:none}
.halo-text-suggestion:hover,.halo-text-suggestion.active{background:#f3f4f6}

/* Calendar (date input) */
.halo-date-dropdown{padding:8px; font-size:14px; text-align:left}
.halo-cal-header{display:flex; align-items:center; justify-content:space-between; padding:6px 8px; font-weight:600}
.halo-cal-nav{background:none; border:none; cursor:pointer; padding:4px 8px; border-radius:6px; outline:none !important; color:#111827}
.halo-cal-nav:hover{background:#f3f4f6}
.halo-cal-title{font-size:14px}
.halo-cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:4px 8px; color:#6b7280; font-size:12px}
.halo-cal-wd{text-align:center}
.halo-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:4px 8px}
.halo-cal-day{background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:8px; text-align:left; cursor:pointer; color:#111827; outline:none !important}
.halo-cal-day:hover{background:#f3f4f6}
.halo-cal-day.selected{background:#eef2ff; border-color:#6366f1; color:#3730a3}
.halo-cal-day.disabled{opacity:.4; cursor:not-allowed}
.halo-cal-day.empty{background:transparent; border:none}
.halo-cal-month-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:8px}
.halo-cal-month{background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:10px; text-align:left; cursor:pointer; outline:none !important}
.halo-cal-month.selected{background:#eef2ff; border-color:#6366f1; color:#3730a3}
.halo-cal-month.disabled{opacity:.4; cursor:not-allowed}
.halo-cal-footer{display:flex; justify-content:space-between; gap:8px; padding:8px}
.halo-cal-today,.halo-cal-clear{background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; cursor:pointer; outline:none !important; color:#111827}
.halo-cal-today:hover,.halo-cal-clear:hover{background:#f3f4f6}

/* Number input steppers */
.halo-num-stepper{display:flex; align-items:center; gap:8px}
.halo-num-inc,.halo-num-dec{background:#f9fafb; border:1px solid #e5e7eb; width:28px; height:28px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; outline:none !important}
.halo-num-inc:hover,.halo-num-dec:hover{background:#f3f4f6}

/* Password input additions */
.halo-pass-toggle,.halo-pass-copy,.halo-pass-generate{background:none; border:none; color:#6b7280; cursor:pointer; padding:4px; border-radius:6px; outline:none !important}
.halo-pass-toggle:hover,.halo-pass-copy:hover,.halo-pass-generate:hover{background:#f3f4f6}
.halo-pass-meter{margin-top:8px}
.halo-pass-bar{height:6px; border-radius:999px; background:#e5e7eb; position:relative; overflow:hidden}
.halo-pass-bar::after{content:""; position:absolute; left:0; top:0; bottom:0; width:20%; background:#ef4444; transition:width .2s ease, background .2s ease}
.halo-pass-bar.s0::after{width:20%; background:#ef4444}
.halo-pass-bar.s1::after{width:35%; background:#f59e0b}
.halo-pass-bar.s2::after{width:55%; background:#fbbf24}
.halo-pass-bar.s3::after{width:75%; background:#10b981}
.halo-pass-bar.s4::after{width:100%; background:#059669}
.halo-pass-meter-label{font-size:12px; color:#6b7280; margin-top:4px}
.halo-pass-reqs{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:6px 12px; padding:8px 0; margin:0; list-style:none}
.halo-pass-reqs .req{font-size:12px; color:#6b7280}
.halo-pass-reqs .req.met{color:#10b981}
.halo-pass-pwned{margin-top:6px; font-size:12px; color:#ef4444}

/* Email chips */
.halo-email-chips{display:flex; flex-wrap:wrap; gap:6px; margin-right:6px}
.halo-dd-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}

/* Checkbox group */
.halo-check-group{display:flex; flex-direction:column; gap:8px; margin-left: -8px;}
.halo-check{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.halo-check input{appearance:none; height:18px; margin:0; outline:none !important}
.halo-check .box{width:18px; height:18px; border:1px solid #e5e7eb; border-radius:4px; display:inline-block; position:relative; background:var(--halo-check-bg,#ffffff)}
.halo-check input:checked + .box::after{content:""; position:absolute; left:4px; top:0px; width:6px; height:12px; border:2px solid var(--halo-check-tick,#6366f1); border-top:none; border-left:none; transform:rotate(45deg)}
.halo-check .text{font-size:14px; color:#111827}
.halo-check.select-all .text{font-weight:600}

/* Radio group */
.halo-radio-group{display:flex; flex-direction:column; gap:8px; margin-left: -8px;}
.halo-radio{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.halo-radio input{appearance:none; height:18px; margin:0; outline:none !important}
.halo-radio .dot{width:18px; height:18px; border:1px solid #e5e7eb; border-radius:999px; display:inline-block; position:relative; background:var(--halo-radio-bg,#ffffff)}
.halo-radio input:checked + .dot::after{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; background:var(--halo-radio-dot,#6366f1); border-radius:999px; transform:translate(-50%,-50%)}
.halo-radio .text{font-size:14px; color:#111827}

/* Slider */
.halo-slider-root{position:relative; padding:6px 0}
.halo-slider{width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:#e5e7eb; outline:none !important}
.halo-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:999px; background:#6366f1; cursor:pointer; border:none}
.halo-slider::-moz-range-thumb{width:18px; height:18px; border:none; border-radius:999px; background:#6366f1; cursor:pointer}
.halo-slider.second{margin-top:8px}
.halo-slider-bubble{position:absolute; top:-22px; right:0; font-size:12px; color:#6b7280}
.halo-chip{background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; border-radius:999px; padding:3px 8px; font-size:12px; display:inline-flex; align-items:center; gap:6px}
.halo-chip-remove{background:none; border:none; cursor:pointer; color:#6b7280; padding:0 2px; outline:none !important}
.halo-email-avatar{margin-left:6px}

/* Phone input */
.halo-phone-country{background:none; border:none; color:#374151; cursor:pointer; padding:4px 6px; border-radius:6px; outline:none !important}
.halo-phone-country:hover{background:#f3f4f6}