/* =========================================
   PRODUCTION READY FORM UI
========================================= */

/* =========================================
   RESET
========================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

/* =========================================
   ROOT VARIABLES
========================================= */

:root{

  /* COLORS */
  --primary:#2563eb;
  --primary-hover:#1d4ed8;
  --primary-active:#1e40af;

  --secondary:#e5e7eb;
  --secondary-hover:#d1d5db;

  --danger:#dc2626;
  --success:#16a34a;

  /* SURFACE */
  --background:#f3f4f6;
  --card:#ffffff;

  /* TEXT */
  --text:#1f2937;
  --text-light:#6b7280;
  --label:#374151;

  /* BORDER */
  --border:#d1d5db;
  --border-hover:#9ca3af;
  --border-focus:#2563eb;

  /* EFFECTS */
  --focus-shadow:0 0 0 4px rgba(37,99,235,.15);

  --shadow:
    0 10px 25px rgba(0,0,0,.06);

  /* RADIUS */
  --radius:14px;
  --radius-sm:10px;

  /* ANIMATION */
  --transition:all .2s ease;

  /* HEADER */
  --header-gradient:
    linear-gradient(135deg,#2563eb,#1d4ed8);
}

/* =========================================
   THEME : DARK
========================================= */

/* =========================================
   THEME : DARK
========================================= */

.theme-dark{

  /* PRIMARY */
  --primary:#3b82f6;
  --primary-hover:#2563eb;
  --primary-active:#1d4ed8;

  /* SECONDARY */
  --secondary:#374151;
  --secondary-hover:#4b5563;

  /* SURFACE */
  --background:#0f172a;
  --card:#1e293b;

  /* TEXT */
  --text:#f8fafc;
  --text-light:#94a3b8;
  --label:#e2e8f0;

  /* BORDER */
  --border:#334155;
  --border-hover:#475569;
  --border-focus:#60a5fa;

  /* EFFECTS */
  --focus-shadow:
    0 0 0 4px rgba(96,165,250,.20);

  --shadow:
    0 10px 30px rgba(0,0,0,.45);

  /* HEADER */
  --header-gradient:
    linear-gradient(135deg,#1d4ed8,#2563eb);
}

/* =========================================
   DARK MODE PANEL
========================================= */

.theme-dark.panel,
.theme-dark .panel{

  background:var(--card);

  border:1px solid var(--border);
}

/* =========================================
   DARK PANEL CONTENT
========================================= */

.theme-dark .panel-content{

  background:var(--card);

  color:var(--text);
}

/* =========================================
   DARK INPUTS
========================================= */

.theme-dark input,
.theme-dark select,
.theme-dark textarea{

  background:#0f172a;

  color:var(--text);

  border:1px solid var(--border);
}

/* =========================================
   INPUT HOVER
========================================= */

.theme-dark input:hover,
.theme-dark select:hover,
.theme-dark textarea:hover{

  border-color:var(--border-hover);
}

/* =========================================
   INPUT FOCUS
========================================= */

.theme-dark input:focus,
.theme-dark select:focus,
.theme-dark textarea:focus{

  border-color:var(--border-focus);

  box-shadow:var(--focus-shadow);
}

/* =========================================
   PLACEHOLDER
========================================= */

.theme-dark input::placeholder,
.theme-dark textarea::placeholder{

  color:var(--text-light);
}

/* =========================================
   SELECT OPTIONS
========================================= */

.theme-dark select option{

  background:#0f172a;

  color:var(--text);
}

/* =========================================
   LABELS
========================================= */

.theme-dark label{

  color:var(--label);
}

/* =========================================
   SECONDARY BUTTON
========================================= */

.theme-dark .secondary{

  background:var(--secondary);

  color:var(--text);

  border:1px solid var(--border);
}

.theme-dark .secondary:hover{

  background:var(--secondary-hover);
}

/* =========================================
   DISABLED INPUTS
========================================= */

.theme-dark input:disabled,
.theme-dark select:disabled,
.theme-dark textarea:disabled{

  background:#1e293b;

  color:#64748b;

  opacity:.75;
}

/* =========================================
   INFO CARD
========================================= */

.theme-dark .info-card{

  background:rgba(255,255,255,.03);

  border:1px solid var(--border);
}

/* =========================================
   PAGE BACKGROUND
========================================= */

.theme-dark{

  background:var(--background);

  color:var(--text);
}

/* =========================================
   THEME : EMERALD
========================================= */

.theme-emerald{

  --primary:#059669;
  --primary-hover:#047857;
  --primary-active:#065f46;

  --secondary:#d1fae5;
  --secondary-hover:#a7f3d0;

  --focus-shadow:0 0 0 4px rgba(5,150,105,.18);

  --header-gradient:
    linear-gradient(135deg,#059669,#047857);
}

/* =========================================
   THEME : SUNSET
========================================= */

.theme-sunset{

  --primary:#ea580c;
  --primary-hover:#c2410c;
  --primary-active:#9a3412;

  --secondary:#ffedd5;
  --secondary-hover:#fed7aa;

  --focus-shadow:0 0 0 4px rgba(234,88,12,.18);

  --header-gradient:
    linear-gradient(135deg,#ea580c,#c2410c);
}

/* =========================================
   THEME : PURPLE
========================================= */

.theme-purple{

  --primary:#7c3aed;
  --primary-hover:#6d28d9;
  --primary-active:#5b21b6;

  --secondary:#ede9fe;
  --secondary-hover:#ddd6fe;

  --focus-shadow:0 0 0 4px rgba(124,58,237,.18);

  --header-gradient:
    linear-gradient(135deg,#7c3aed,#6d28d9);
}

/* ====ADDITIONAL THEMES + MODERN ENHANCEMENTS====== */
/* =================== THEME : LIGHT ===================== */

.theme-light{
	--primary:#2563eb;
	--primary-hover:#1d4ed8;
	--primary-active:#1e40af;

	--secondary:#f3f4f6;
	--secondary-hover:#e5e7eb;
	--background:#f8fafc;
	--card:#ffffff;

	--text:#111827;
	--text-light:#6b7280;
	--border:#d1d5db;
	--border-hover:#9ca3af;

	--focus:rgba(37,99,235,.16);
	--shadow:0 10px 30px rgba(0,0,0,.06);

	--header-gradient:linear-gradient(135deg,#2563eb,#1d4ed8);
}

/* ==================== THEME : MODERN ================== */

.theme-modern{
	--primary:#0f172a;
	--primary-hover:#1e293b;
	--primary-active:#334155;

	--secondary:#e2e8f0;
	--secondary-hover:#cbd5e1;
	--background:#f8fafc;
	--card:#ffffff;

	--text:#0f172a;
	--text-light:#64748b;
	--border:#e2e8f0;
	--border-hover:#cbd5e1;

	--focus:rgba(15,23,42,.12);
	--shadow:0 15px 40px rgba(15,23,42,.08);
	--header-gradient:linear-gradient(135deg,#0f172a,#334155);
}

/* ===================== THEME : MINIMAL ================ */

.theme-minimal{
	--primary:#111827;
	--primary-hover:#1f2937;
	--primary-active:#374151;

	--secondary:#f3f4f6;
	--secondary-hover:#e5e7eb;
	--background:#ffffff;
	--card:#ffffff;

	--text:#111827;
	--text-light:#6b7280;
	--border:#e5e7eb;
	--border-hover:#d1d5db;

	--focus:rgba(17,24,39,.08);
	--shadow:0 2px 8px rgba(0,0,0,.04);
	--header-gradient: linear-gradient(135deg,#111827,#374151);
}

/* =================== THEME : CORPORATE ================ */

.theme-corporate{
	--primary:#0f766e;
	--primary-hover:#115e59;
	--primary-active:#134e4a;

	--secondary:#ccfbf1;
	--secondary-hover:#99f6e4;
	--background:#f0fdfa;
	--card:#ffffff;

	--text:#134e4a;
	--text-light:#4b5563;
	--border:#99f6e4;
	--border-hover:#5eead4;

	--focus:rgba(15,118,110,.16);
	--shadow:0 12px 28px rgba(15,118,110,.10);
	--header-gradient:linear-gradient(135deg,#0f766e,#115e59);
}

/* ==================== THEME : GLASS ==================== */

.theme-glass{
	--primary:#2563eb;
	--primary-hover:#1d4ed8;
	--primary-active:#1e40af;
	--secondary:rgba(255,255,255,.18);
	--secondary-hover:rgba(255,255,255,.28);

	--background:linear-gradient(135deg,#dbeafe,#ede9fe,#fce7f3);
	--card:rgba(255,255,255,.55);
	--text:#111827;
	--text-light:#4b5563;

	--border:rgba(255,255,255,.35);
	--border-hover:rgba(255,255,255,.55);
	--focus:rgba(37,99,235,.18);

	--shadow:0 10px 40px rgba(0,0,0,.12);
	--header-gradient:linear-gradient(135deg,rgba(37,99,235,.85),rgba(124,58,237,.85));
}

/* ===================== GLASS EFFECTS ======================= */

.theme-glass .panel,
.theme-glass .info-card,
.theme-glass input,
.theme-glass select,
.theme-glass textarea{
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
}

/* ====================== GLASS PANEL =================== */

.theme-glass .panel{
	border:1px solid rgba(255,255,255,.35);
	background:rgba(255,255,255,.42);
}

/* ======================= GLASS INPUTS ================== */

.theme-glass input,
.theme-glass select,
.theme-glass textarea{
	background:rgba(255,255,255,.35);
}

/* =========================================================
AUTO DARK MODE SUPPORT
========================================================= */

@media (prefers-color-scheme:dark){
	.auto-theme{
		--primary:#3b82f6;
		--primary-hover:#2563eb;
		--primary-active:#1d4ed8;

		--secondary:#374151;
		--secondary-hover:#4b5563;
		--background:#0f172a;
		--card:#1e293b;

		--text:#f8fafc;
		--text-light:#94a3b8;
		--border:#334155;
		--border-hover:#475569;

		--focus:rgba(59,130,246,.22);
		--shadow:0 12px 35px rgba(0,0,0,.45);
		--header-gradient: linear-gradient(135deg,#1d4ed8,#2563eb);

	}

	.auto-theme body, body.auto-theme{
		background:var(--background);
		color:var(--text);
	}
}

/* =========================================================
PREMIUM BUTTON STYLING
========================================================= */

button.primary,
.button.primary{
	background:linear-gradient(to bottom,var(--primary),var(--primary-hover));
	color:#fff;
	box-shadow:0 6px 16px rgba(0,0,0,.10);
}

/* =========================================================
PRIMARY BUTTON HOVER
========================================================= */
button.primary:hover,
.button.primary:hover{
	background:linear-gradient(to bottom,var(--primary-hover),var(--primary-active));
	transform:translateY(-2px);
	box-shadow:0 10px 20px rgba(0,0,0,.14);
}

/* =========================================================
SECONDARY BUTTON IMPROVEMENT
========================================================= */

button.secondary,
.button.secondary{
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	border:1px solid var(--border);
}

/* =========================================================
THEME TRANSITION
========================================================= */
.page,
.panel,
.panel-header,
.panel-content,
input,
select,
textarea,
button{
	transition: background .25s ease,
	color .25s ease,
	border-color .25s ease,
	box-shadow .25s ease,
	transform .2s ease;
}

/* =========================================
   PANEL
========================================= */

.panel{

  background:var(--card);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  overflow:hidden;

  transition:var(--transition);

  margin-bottom:1.5rem;
}

/* =========================================
   PANEL HEADER
========================================= */

.panel-header{

  background:var(--header-gradient);

  color:#fff;

  padding:1rem 1.25rem;

  font-size:1rem;
  font-weight:700;

  display:flex;
  align-items:center;
  justify-content:space-between;

  cursor:pointer;

  user-select:none;
}

/* =========================================
   PANEL ARROW
========================================= */

.panel-arrow{
  transition:transform .2s ease;
}

.panel.expanded .panel-arrow{
  transform:rotate(90deg);
}

/* =========================================
   PANEL CONTENT
========================================= */

.panel-content{

  background:var(--card);

  padding:1.5rem;

  color:var(--text);
}

/* COLLAPSE SUPPORT */

.panel:not(.expanded) .panel-content{
  display:none;
}

/* =========================================
   HEADINGS
========================================= */

.panel-content h1,
.panel-content h2,
.panel-content h3{

  margin-top:0;
  margin-bottom:1rem;

  color:var(--text);

  font-weight:700;
}

/* =========================================
   FORM GRID
========================================= */

.form-layout{

  display:grid;

  gap:1.25rem;

  width:100%;
}

.form-layout.one-columns,
.form-layout.one-column{
  grid-template-columns:1fr;
}

.form-layout.two-columns{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.form-layout.three-columns{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:992px){

  .form-layout.three-columns{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:768px){

  .form-layout.two-columns,
  .form-layout.three-columns{
    grid-template-columns:1fr;
  }

  .inline-form{
    flex-direction:column;
    align-items:stretch;
  }

  .formbutton{
    justify-content:stretch;
  }

  .formbutton button{
    width:100%;
  }
}

/* =========================================
   FORM GROUP
========================================= */

.form-group{

  display:flex;

  flex-direction:column;

  position:relative;
}

/* =========================================
   LABELS
========================================= */

.form-group label{

  margin-bottom:.45rem;

  color:var(--label);

  font-size:.95rem;
  font-weight:600;
  line-height:1.3;
}

/* =========================================
   INPUTS
========================================= */

.form-group input,
.form-group select,
.form-group textarea{

  width:100%;

  min-height:44px;

  padding:.75rem .9rem;

  border:1px solid var(--border);

  border-radius:var(--radius-sm);

  background:var(--card);

  color:var(--text);

  font-size:.95rem;
  line-height:1.4;

  transition:var(--transition);

  appearance:none;
}

/* =========================================
   TEXTAREA
========================================= */

.form-group textarea{

  resize:vertical;

  min-height:110px;
}

/* =========================================
   PLACEHOLDER
========================================= */

.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--text-light);
}

/* =========================================
   HOVER
========================================= */

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{

  border-color:var(--border-hover);
}

/* =========================================
   FOCUS
========================================= */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

  outline:none;

  border-color:var(--border-focus);

  box-shadow:var(--focus-shadow);
}

/* =========================================
   DISABLED
========================================= */

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled{

  opacity:.7;

  cursor:not-allowed;
}

/* =========================================
   VALIDATION
========================================= */

.form-group.error input,
.form-group.error select,
.form-group.error textarea{

  border-color:var(--danger);
}

.form-group.success input,
.form-group.success select,
.form-group.success textarea{

  border-color:var(--success);
}

/* =========================================
   ERROR MESSAGE
========================================= */

.form-error-message{

  margin-top:.35rem;

  font-size:.85rem;

  color:var(--danger);
}

/* =========================================
   BUTTON AREA
========================================= */

.formbutton{

  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:.75rem;

  margin-top:1.5rem;

  flex-wrap:wrap;
}

/* =========================================
   BUTTONS
========================================= */

.formbutton button,
.button{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;

  padding:.75rem 1.4rem;

  border:none;

  border-radius:10px;

  font-size:.95rem;
  font-weight:600;

  cursor:pointer;

  transition:var(--transition);

  user-select:none;
}

.button.primary:active,
button.primary:active{

  background:var(--primary-active) !important;

  transform:translateY(0);
}


/* =========================================
   DISABLED
========================================= */

button:disabled,
.button:disabled{

  opacity:.65;

  cursor:not-allowed;

  transform:none !important;
}


/* =========================================
   INLINE FORM
========================================= */

.inline-form{

  display:inline-flex;

  align-items:center;

  flex-wrap:wrap;

  gap:1rem;
}

/* =========================================
   INFO CARD
========================================= */

.info-card{

  padding:1rem;

  border:1px solid var(--border);

  border-radius:var(--radius);

  margin-bottom:1rem;

  background:rgba(255,255,255,.04);
}

.info-card h3{

  margin-top:0;

  color:var(--text);
}

.info-card p{

  margin-bottom:0;

  color:var(--text-light);
}

/* =========================================
   SECTION TITLE
========================================= */

.section-title{

  position:relative;

  margin:2rem 0 1.25rem;

  padding-bottom:.65rem;

  color:var(--text);

  font-size:1.1rem;
  font-weight:700;
  line-height:1.3;

  display:flex;
  align-items:center;
  gap:.75rem;
}

/* Accent Line */

.section-title::after{

  content:"";

  flex:1;

  height:2px;

  border-radius:999px;

  background:
    linear-gradient(
      to right,
      var(--primary),
      transparent
    );

  opacity:.7;
}

/* =========================================
   SECTION TITLE : CARD STYLE
========================================= */

.section-title-card{

  display:flex;
  align-items:center;
  gap:.75rem;

  margin:2rem 0 1.25rem;

  padding:.9rem 1rem;

  border:1px solid var(--border);

  border-left:5px solid var(--primary);

  border-radius:12px;

  background:
    linear-gradient(
      to right,
      rgba(37,99,235,.06),
      transparent
    );

  color:var(--text);

  font-size:1rem;
  font-weight:700;

  transition:var(--transition);
}

/* DARK MODE SUPPORT */

.theme-dark .section-title-card{

  background:
    linear-gradient(
      to right,
      rgba(59,130,246,.12),
      transparent
    );
}

/* =========================================
   SECTION TITLE : DIVIDER
========================================= */

.section-divider{

  display:flex;
  align-items:center;

  gap:1rem;

  margin:2.5rem 0 1.5rem;

  color:var(--text);

  font-size:1rem;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.08em;
}

.section-divider::before,
.section-divider::after{

  content:"";

  flex:1;

  height:1px;

  background:var(--border);
}

.section-divider span{

  color:var(--primary);
}

/* =========================================
   SECTION TITLE : BADGE
========================================= */

.section-badge{

  display:inline-flex;
  align-items:center;

  margin:1.5rem 0 1rem;

  padding:.55rem 1rem;

  border-radius:999px;

  background:var(--header-gradient);

  color:#fff;

  font-size:.9rem;
  font-weight:700;

  box-shadow:
    0 4px 12px rgba(0,0,0,.08);
}