/* =========================================================
   Component library — buttons, form fields, select2 & flatpickr
   skinning. Everything here follows the CSS variables defined in
   style.css and assets/themes/*.css, so it re-themes automatically.
   ========================================================= */

:root{
  --success: #16A34A;
  --success-soft: #e7f6ea;
  --danger: #d1495b;
  --danger-soft: #fbe7ea;
  --warning: #d9a520;
  --warning-soft: #fdf3d9;
  --neutral: #6b6b70;
  --neutral-soft: #eeeeef;

  /* Light theme: fields sit as opaque white cards with a soft
     lifted shadow, so they stand out clearly against the glass
     cards and textured background behind them. */
  --field-bg: var(--panel);
  --field-shadow: 0 3px 10px rgba(0,0,0,.06);
}
body.theme-dark{
  --success-soft: rgba(22,163,74,.16);
  --danger-soft: rgba(209,73,91,.16);
  --warning-soft: rgba(217,165,32,.16);
  --neutral-soft: rgba(255,255,255,.08);

  /* Dark theme: back to the translucent glass look, which already
     reads fine against the dark card behind it. */
  --field-bg: var(--panel-glass);
  --field-shadow: none;
  --popover-bg: rgba(38,39,43,.9);
}

/* =========================================================
   BUTTONS
   Usage: <button class="btn btn-primary">Save</button>
          <button class="btn btn-soft-danger btn-sm">Delete</button>
          <button class="btn btn-outline-neutral btn-pill">Cancel</button>
          <button class="btn-circle btn-circle-primary"><i class="ri-add-line"></i></button>
   Colors: primary / success / danger / warning / neutral
   Styles: solid (default) / soft / outline / ghost — combine as
           .btn-{style}-{color}, e.g. .btn-outline-success
   Sizes:  .btn-sm / (default) / .btn-lg
   Shape:  add .btn-pill for fully rounded
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:2px solid transparent;
  border-radius:12px;
  padding:10px 20px;
  font-family:inherit;font-size:14px;font-weight:400;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn:disabled,.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}
.btn-pill{border-radius:999px;}
.btn-sm{padding:6px 14px;font-size:12.5px;border-radius:10px;}
.btn-sm.btn-pill{border-radius:999px;}
.btn-lg{padding:13px 26px;font-size:15.5px;}

/* Solid (default) */
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-success{background:var(--success);border-color:var(--success);color:#fff;}
.btn-success:hover{filter:brightness(.92);}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn-danger:hover{filter:brightness(.92);}
.btn-warning{background:var(--warning);border-color:var(--warning);color:#fff;}
.btn-warning:hover{filter:brightness(.92);}
.btn-neutral{background:var(--neutral);border-color:var(--neutral);color:#fff;}
.btn-neutral:hover{filter:brightness(1.15);}

/* Soft (tinted background, colored text) */
.btn-soft-primary{background:var(--accent-soft);color:var(--accent);}
.btn-soft-primary:hover{background:var(--accent-soft);filter:brightness(.97);}
.btn-soft-success{background:var(--success-soft);color:var(--success);}
.btn-soft-danger{background:var(--danger-soft);color:var(--danger);}
.btn-soft-warning{background:var(--warning-soft);color:var(--warning);}
.btn-soft-neutral{background:var(--neutral-soft);color:var(--text-dark);}

/* Outline (colored border, transparent fill, fills on hover) */
.btn-outline-primary{border-color:var(--accent);color:var(--accent);background:transparent;}
.btn-outline-primary:hover{background:var(--accent);color:#fff;}
.btn-outline-success{border-color:var(--success);color:var(--success);background:transparent;}
.btn-outline-success:hover{background:var(--success);color:#fff;}
.btn-outline-danger{border-color:var(--danger);color:var(--danger);background:transparent;}
.btn-outline-danger:hover{background:var(--danger);color:#fff;}
.btn-outline-neutral{border-color:var(--border);color:var(--text-dark);background:transparent;}
.btn-outline-neutral:hover{background:var(--neutral-soft);}

/* Ghost (no border, no bg, colored text, soft bg on hover) */
.btn-ghost-primary{color:var(--accent);background:transparent;}
.btn-ghost-primary:hover{background:var(--accent-soft);}
.btn-ghost-neutral{color:var(--text-dark);background:transparent;}
.btn-ghost-neutral:hover{background:var(--neutral-soft);}

/* Circle icon buttons — <button class="btn-circle btn-circle-primary"><i class="ri-..."></i></button> */
.btn-circle{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:2px solid transparent;
  font-size:16px;cursor:pointer;flex-shrink:0;
  transition:background-color .15s ease,transform .1s ease;
}
.btn-circle:active{transform:translateY(1px);}
.btn-circle-sm{width:32px;height:32px;font-size:13px;}
.btn-circle-lg{width:52px;height:52px;font-size:19px;}
.btn-circle-primary{background:var(--accent);color:#fff;}
.btn-circle-primary:hover{background:var(--accent-hover);}
.btn-circle-soft-primary{background:var(--accent-soft);color:var(--accent);}
.btn-circle-success{background:var(--success);color:#fff;}
.btn-circle-danger{background:var(--danger);color:#fff;}
.btn-circle-outline{background:transparent;border-color:var(--card-border);color:var(--text-dark);}
.btn-circle-outline:hover{background:var(--neutral-soft);}


/* =========================================================
   FORM FIELDS — floating labels
   Markup:
     <div class="field-float">
       <input class="field-input" placeholder=" " id="f1">
       <label for="f1">Full name</label>
     </div>
   For plain <input>/<textarea>, the label animates via pure CSS
   (:placeholder-shown). Select2 and flatpickr can't use that trick
   (they replace/lock the input), so components.js toggles a
   `.is-filled` class on `.field-float` for those — same visual result.
   ========================================================= */
.field-float{position:relative;margin-bottom:24px;}
.field-input,
.field-textarea,
.select2-container .select2-selection{
  width:100%;
  padding:19px 14px 7px;
  border-radius:14px;
  border:2px solid var(--card-border);
  background:var(--field-bg);
  box-shadow:var(--field-shadow);
  font-family:inherit;
  font-size:14.5px;
  color:var(--text-dark);
  outline:none;
  transition:border-color .15s ease,background-color .2s ease,box-shadow .2s ease;
}
.field-textarea{min-height:96px;resize:vertical;padding-top:22px;}
.field-input:focus,
.field-textarea:focus{border-color:var(--accent);}

.field-float label{
  position:absolute;
  left:15px;top:18px;
  font-size:14.5px;
  color:var(--text-muted);
  pointer-events:none;
  transition:all .15s ease;
  background:transparent;
  max-width:calc(100% - 30px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* float up: focused, has content (native :placeholder-shown trick), or
   JS-marked filled/open (select2 & flatpickr) */
.field-input:focus ~ label,
.field-input:not(:placeholder-shown) ~ label,
.field-textarea:focus ~ label,
.field-textarea:not(:placeholder-shown) ~ label,
.field-float.is-filled label,
.field-float.is-focused label{
  top:7px;
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--accent);
}

.field-hint{font-size:12px;color:var(--text-muted);margin-top:6px;}

/* Checkbox / switch / radio — small extras that pair naturally
   with the fields above */
.field-check{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.field-check input[type="checkbox"],
.field-check input[type="radio"]{
  width:18px;height:18px;accent-color:var(--accent);cursor:pointer;
}
.field-check label{font-size:14px;color:var(--text-dark);cursor:pointer;}

.field-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;}
.field-switch input{opacity:0;width:0;height:0;}
.field-switch .track{
  position:absolute;inset:0;background:var(--neutral-soft);
  border-radius:999px;transition:background-color .15s ease;
}
.field-switch .track::before{
  content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;
  background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.15);
  transition:transform .15s ease;
}
.field-switch input:checked + .track{background:var(--accent);}
.field-switch input:checked + .track::before{transform:translateX(18px);}


/* =========================================================
   SELECT2 skin — restyle to match .field-input exactly
   ========================================================= */
.select2-container{width:100% !important;}
.select2-container .select2-selection{height:52px;display:flex;align-items:center;}
.select2-container .select2-selection__rendered{
  padding:0;line-height:normal;color:var(--text-dark) !important;
}
.select2-container .select2-selection__arrow{height:50px;right:10px;}
.select2-container--default .select2-selection__arrow b{
  border-color:var(--text-muted) transparent transparent transparent;
}
.select2-container--open .select2-selection{border-color:var(--accent);}
.select2-dropdown{
  border-radius:14px !important;
  border:2px solid var(--card-border) !important;
  background:var(--popover-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}
.select2-search--dropdown{padding:10px;}
.select2-search__field{
  border-radius:10px !important;
  border:2px solid var(--card-border) !important;
  padding:8px 10px !important;
  background:var(--panel);
  color:var(--text-dark);
  outline:none;
}
.select2-results__option{padding:9px 14px;font-size:14px;color:var(--text-dark);}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--accent-soft) !important;color:var(--accent) !important;
}
.select2-container--default .select2-results__option[aria-selected=true]{
  background:var(--accent) !important;color:#fff !important;
}


/* =========================================================
   FLATPICKR skin — date & time pickers
   ========================================================= */
.flatpickr-calendar{
  border-radius:18px !important;
  border:2px solid var(--card-border) !important;
  background:var(--popover-bg) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 16px 40px rgba(0,0,0,.12) !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday{color:var(--text-dark) !important;fill:var(--text-dark);}
.flatpickr-day{color:var(--text-dark);border-radius:10px !important;}
.flatpickr-day.today{border-color:var(--accent) !important;}
.flatpickr-day:hover{background:var(--accent-soft) !important;}
.flatpickr-day.selected,
.flatpickr-day.selected:hover{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{color:var(--text-muted) !important;opacity:.5;}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm{color:var(--text-dark) !important;}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover{background:var(--accent-soft) !important;}
.numInputWrapper span.arrowUp:after{border-bottom-color:var(--text-muted) !important;}
.numInputWrapper span.arrowDown:after{border-top-color:var(--text-muted) !important;}