/* tims-forms.css */
/* TIMS Forms – mobile-first, reusable, accessible */

:root{
  --tims-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --tims-text: #1f2937;
  --tims-muted: #6b7280;

  --tims-bg: #ffffff;
  --tims-surface: #f9fafb;

  --tims-border: #d1d5db;
  --tims-border-strong: #9ca3af;

  --tims-focus: #2563eb;           /* ocean-ish blue */
  --tims-danger: #dc2626;
  --tims-success: #16a34a;

  --tims-radius: 14px;
  --tims-radius-sm: 10px;

  --tims-field-h: 48px;            /* good touch target */
  --tims-pad-x: 14px;
  --tims-pad-y: 10px;

  --tims-shadow: 0 10px 22px rgba(0,0,0,.06);
}

/* Wrapper */
.tims-form{
  font-family: var(--tims-font);
  color: var(--tims-text);
  width: 80%;
  max-width: 760px;
  margin: 0 auto;
}

/* Optional form card container */
.tims-form.tims-form--card{
  background: var(--tims-bg);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--tims-shadow);
  border-radius: 18px;
  padding: 18px;
}

.status-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
}

.switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 28px;
}

.switch .input-status-toggle {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.input-status-toggle:checked + .slider {
    background-color: #28a745;
}

.input-status-toggle:checked + .slider:before {
    transform: translateX(27px);
}

/* Styles for alert message success, error, info or warning */
.alert{
    padding:14px 18px;
    margin:15px 0;
    border:1px solid transparent;
    border-radius:5px;
    font-family:Arial;
}

.alert-success{
    background:#d4edda;
    color:#155724;
    border-color:#c3e6cb;
}

.alert-danger{
    background:#f8d7da;
    color:#721c24;
    border-color:#f5c6cb;
}

.alert-warning{
    background:#fff3cd;
    color:#856404;
    border-color:#ffeeba;
}

.alert-info{
    background:#d1ecf1;
    color:#0c5460;
    border-color:#bee5eb;
}

/* END */


@media (min-width: 768px){
  .tims-form.tims-form--card{ padding: 22px; }
}

/* Each field (vertical stack) */
.tims-field{
  display: block;
  margin-bottom: 14px;
}

.tims-field:last-child{ margin-bottom: 0; }

/* Label row */
.tims-label{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.tims-label small{
  font-weight: 500;
  color: var(--tims-muted);
}

/* Required marker */
.tims-required{
  color: var(--tims-danger);
  font-weight: 700;
  margin-left: 6px;
}

/* Controls (inputs/selects/textarea) */
.tims-control,
.tims-form input[type="text"],
.tims-form input[type="email"],
.tims-form input[type="password"],
.tims-form input[type="number"],
.tims-form input[type="tel"],
.tims-form input[type="url"],
.tims-form input[type="date"],
.tims-form input[type="time"],
.tims-form input[type="search"],
.tims-form select,
.tims-form textarea{
  width: 100%;
  background: var(--tims-surface);
  color: var(--tims-text);
  border: 1px solid var(--tims-border);
  border-radius: var(--tims-radius);
  height: var(--tims-field-h);
  padding: var(--tims-pad-y) var(--tims-pad-x);
  font-size: 16px; /* prevent iOS zoom */
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing: border-box;
}

.tims-form textarea{
  height: auto;
  min-height: 120px;
  resize: vertical;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Select tweaks */
.tims-form select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tims-muted) 50%),
    linear-gradient(135deg, var(--tims-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

/* Focus state */
.tims-form input:focus,
.tims-form select:focus,
.tims-form textarea:focus{
  border-color: var(--tims-focus);
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
  background: #fff;
}

/* Disabled */
.tims-form :disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* Help + error text */
.tims-help{
  margin-top: 8px;
  font-size: 13px;
  color: var(--tims-muted);
  line-height: 1.35;
}

.tims-error{
  margin-top: 8px;
  font-size: 13px;
  color: var(--tims-danger);
  line-height: 1.35;
  display: none;
}

/* States applied by JS */
.tims-form .is-invalid{
  border-color: var(--tims-danger) !important;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(220,38,38,.12);
}

.tims-form .is-valid{
  border-color: var(--tims-success) !important;
  background: #fff;
}

/* Show error message when invalid */
.tims-field.is-invalid .tims-error{ display: block; }

/* Radio/checkbox groups */
.tims-options{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 520px){
  .tims-options.tims-options--two{ grid-template-columns: 1fr 1fr; }
}

.tims-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--tims-border);
  background: var(--tims-surface);
  border-radius: var(--tims-radius);
}

.tims-option input{
  width: 18px;
  height: 18px;
}

.tims-option label{
  font-size: 15px;
  cursor: pointer;
}

/* Password toggle wrapper */
.tims-input-wrap{
  position: relative;
}

.tims-toggle{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 1px solid var(--tims-border);
  background: #fff;
  color: var(--tims-text);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.tims-toggle:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
  border-color: var(--tims-focus);
}

/* Buttons */
.tims-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.tims-btn{
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, opacity .15s ease;
}

.tims-btn:active{ transform: translateY(1px); }

.tims-btn--primary{
  background: var(--tims-focus);
  color: #fff;
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
}

.tims-btn--secondary{
  background: #111827;
  color: #fff;
  box-shadow: 0 10px 20px rgba(17,24,39,.18);
}

.tims-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Small form notice area */
.tims-notice{
  padding: 12px 14px;
  border-radius: var(--tims-radius);
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  color: var(--tims-muted);
  font-size: 13px;
  line-height: 1.4;
}