/* Custom styles migrated from resources/css/app.css (without Tailwind directives) */

/* From Uiverse.io by umairmanzoor1143 */
.loader {
  width: 50px;
  aspect-ratio: 1.154;
  position: relative;
  background: conic-gradient(
    from 120deg at 50% 64%,
    #0000,
    #ff1919 1deg 120deg,
    #0000 121deg
  );
  animation: l27-0 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

/* ---- Custom Login Page Styles ---- */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background-color: transparent;
}

.login-card {
  width: 100%;
  max-width: 28rem; /* 448px */
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.08); /* subtle border */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem; /* 12px */
  padding: 2rem; /* 32px */
}

.login-logo {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 auto;
}

.login-title {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1.5rem; /* 24px */
  line-height: 2.25rem; /* 36px */
  font-weight: 700;
  color: #111827; /* gray-900 */
}

.login-field { margin-top: 1rem; }

.login-label {
  display: block;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  font-weight: 500;
  color: #374151; /* gray-700 */
}

.login-input {
  margin-top: 0.5rem;
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #111827;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  border: 1px solid #e5e7eb; /* gray-200 */
}

.login-input::placeholder { color: #9ca3af; /* gray-400 */ }
.login-input:focus { outline: 2px solid #6366f1; outline-offset: 0; }

.login-actions { margin-top: 1.25rem; }

.login-submit {
  display: flex;
  justify-content: center;
  width: 100%;
  border-radius: 0.5rem;
  background: #6366f1; /* indigo-500 */
  color: #fff;
  padding: 0.625rem 0.75rem;
  font-size: 0.938rem; /* ~15px */
  line-height: 1.5rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.login-submit:hover { background: #818cf8; /* indigo-400 */ }
.login-submit:disabled { opacity: 0.6; }

.login-help {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280; /* gray-500 */
}

.login-help a { font-weight: 600; color: #818cf8; /* indigo-400 */ }
.login-help a:hover { color: #a5b4fc; /* lighter indigo */ }

/* ---- Login Background (Blurred) ---- */
.login-page { position: relative; min-height: 100vh; overflow: hidden; }
.login-bg { position: absolute; inset: 0; pointer-events: none; }

.login-bg::before {
  content: "";
  position: absolute;
  inset: -20px; /* extend to avoid edge artifacts when blurred */
  background-image: url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  filter: grayscale(60%) blur(10px) brightness(0.85);
  transform: scale(1.05);
}

.login-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(17,24,39,0.15) 0%, rgba(17,24,39,0.25) 100%); }
.login-foreground { position: relative; z-index: 1; }

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform-origin: 50% 66%;
  animation: l27-1 1.5s infinite;
}

.loader:after { --s: -1; }

@keyframes l27-0 {
  0%, 30% { transform: rotate(0); }
  70% { transform: rotate(120deg); }
  70.01%, 100% { transform: rotate(360deg); }
}

@keyframes l27-1 {
  0% { transform: rotate(calc(var(--s, 1) * 120deg)) translate(0); }
  30%, 70% { transform: rotate(calc(var(--s, 1) * 120deg)) translate(calc(var(--s, 1) * -5px), 10px); }
  100% { transform: rotate(calc(var(--s, 1) * 120deg)) translate(0); }
}

/* ---- End of existing styles ---- */

/* ---- Global Typography Enhancements ---- */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  letter-spacing: -0.01em;
}

p { color: #4b5563; }

/* Sidebar section headings */
.sidebar-section-title {
  font-weight: 700;
  color: #9ca3af; /* gray-400 */
}

/* Material Symbols alignment */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sidebar link aesthetics */
.sidebar-link {
  transition: background-color 120ms ease, color 120ms ease;
}

/* Ring loader (lds-ring) */
.lds-ring,
.lds-ring div {
  box-sizing: border-box;
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Chart responsive wrapper */
.chart-resize {
  max-width: 420px;
}
.chart-resize canvas {
  width: 100% !important;
  height: auto !important;
}

/* Simple reveal animation for cards */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Minimal DaisyUI-like loading ring so classes work without the plugin */
.loading {
  display: inline-block;
  vertical-align: middle;
  color: currentColor; /* inherits from Tailwind text-* e.g., text-green-600 */
}
.loading-ring {
  width: 1.5rem; /* default md */
  height: 1.5rem;
  border-radius: 9999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: loading-spin 0.6s linear infinite;
}
.loading-xs { width: 0.75rem; height: 0.75rem; border-width: 2px; }
.loading-sm { width: 1rem;   height: 1rem;   border-width: 2px; }
.loading-md { width: 1.5rem; height: 1.5rem; border-width: 2px; }
.loading-lg { width: 2rem;   height: 2rem;   border-width: 3px; }
@keyframes loading-spin { to { transform: rotate(360deg); } }

/* ---- Alert (DaisyUI-like) ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  border-width: 1px;
}
.alert svg { color: currentColor; }
.alert-success { background-color: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-info    { background-color: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-warning { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-error   { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---- Ripple Loader (.lds-ripple) ---- */
.lds-ripple,
.lds-ripple div {
  box-sizing: border-box;
}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid currentColor;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}