/* Effirox Demo CMS - small CSS layer (no build step). */

.card{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
}
.dark .card{
  background: rgba(2,6,23,0.55);
  border-color: rgba(30,41,59,0.9);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border-radius:.9rem;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.6);
  transition: background .15s ease, transform .05s ease, border-color .15s ease;
}
.btn:hover{ background: rgba(255,255,255,0.85); }
.btn:active{ transform: translateY(1px); }
.dark .btn{
  background: rgba(15,23,42,0.35);
  border-color: rgba(30,41,59,0.9);
}
.dark .btn:hover{ background: rgba(15,23,42,0.6); }

.btn-sm{
  padding:.35rem .75rem;
  border-radius:.7rem;
  font-size:.875rem;
}

.btn-primary{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
}
.btn-primary:hover{ background:#1f2937; }
.dark .btn-primary{
  background:#fff;
  border-color:#fff;
  color:#0f172a;
}
.dark .btn-primary:hover{ background:#f1f5f9; }

.input{
  width:100%;
  padding:.55rem .85rem;
  border-radius:.9rem;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.6);
  outline:none;
  transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.input:focus{
  box-shadow: 0 0 0 3px rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.85);
}
.dark .input{
  background: rgba(15,23,42,0.35);
  border-color: rgba(30,41,59,0.9);
}
.dark .input:focus{
  box-shadow: 0 0 0 3px rgba(51,65,85,0.55);
  background: rgba(15,23,42,0.6);
}

.input-sm{
  padding:.35rem .55rem;
  border-radius:.7rem;
  font-size:.875rem;
}

.label{
  display:block;
  font-size:.75rem;
  color: rgba(100,116,139,1);
  margin-bottom:.25rem;
}
.dark .label{ color: rgba(148,163,184,1); }

.table{
  width:100%;
  font-size:.9rem;
}
.table thead th{
  text-align:left;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: rgba(100,116,139,1);
  padding:.75rem 1rem;
  border-bottom:1px solid rgba(148,163,184,0.25);
  white-space:nowrap;
}
.dark .table thead th{
  color: rgba(148,163,184,1);
  border-bottom-color: rgba(30,41,59,0.9);
}
.table tbody td{
  padding:.75rem 1rem;
  border-bottom:1px solid rgba(226,232,240,0.8);
  vertical-align:middle;
}
.dark .table tbody td{
  border-bottom-color: rgba(15,23,42,1);
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:.2rem .55rem;
  border-radius:.65rem;
  font-size:.75rem;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.55);
}
.dark .badge{
  background: rgba(15,23,42,0.35);
  border-color: rgba(30,41,59,0.9);
}

.badge-ok{ border-color: rgba(16,185,129,0.35); background: rgba(209,250,229,0.7); color: rgba(4,120,87,1); }
.badge-off{ border-color: rgba(148,163,184,0.35); background: rgba(241,245,249,0.8); color: rgba(71,85,105,1); }
.badge-warn{ border-color: rgba(245,158,11,0.35); background: rgba(254,243,199,0.7); color: rgba(180,83,9,1); }
.badge-info{ border-color: rgba(14,165,233,0.35); background: rgba(224,242,254,0.7); color: rgba(3,105,161,1); }
.dark .badge-ok{ background: rgba(6,78,59,0.25); color: rgba(110,231,183,1); border-color: rgba(6,95,70,0.9); }
.dark .badge-off{ background: rgba(15,23,42,0.35); color: rgba(203,213,225,1); }
.dark .badge-warn{ background: rgba(120,53,15,0.25); color: rgba(253,230,138,1); border-color: rgba(120,53,15,0.8); }
.dark .badge-info{ background: rgba(12,74,110,0.25); color: rgba(125,211,252,1); border-color: rgba(12,74,110,0.8); }

.toast{
  width: 20rem;
  border-radius: 1rem;
  border: 1px solid rgba(148,163,184,0.35);
  padding:.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
}
.toast-ok{ background: rgba(255,255,255,0.78); }
.toast-error{ background: rgba(254,226,226,0.85); border-color: rgba(248,113,113,0.35); }
.dark .toast-ok{ background: rgba(2,6,23,0.72); border-color: rgba(30,41,59,0.9); }
.dark .toast-error{ background: rgba(136,19,55,0.25); border-color: rgba(136,19,55,0.7); }

.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index: 50;
}
.modal{
  width:100%;
  max-width: 38rem;
  border-radius: 1rem;
  border: 1px solid rgba(148,163,184,0.35);
  background:#fff;
  padding:1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.20);
}
.dark .modal{
  background: rgb(2,6,23);
  border-color: rgba(30,41,59,0.9);
}
.modal-wide{ max-width: 56rem; }

.codeblock{
  background: rgb(15,23,42);
  color: rgb(248,250,252);
  border-radius: 1rem;
  padding: .85rem;
  overflow:auto;
  max-height: 65vh;
  font-size: .75rem;
}


/* Cropper stage */
.crop-stage{max-height:70vh;}
#cropImage{max-height:70vh; width:100%; object-fit:contain;}