/**
 * SCPC-Admin - Error Page Styles
 */

/* ==========================================================================
   Error Pages
   ========================================================================== */
.error-page {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: calc(100vh - var(--header-height) - var(--footer-height));
   padding: 60px 30px;
}

.error-container {
   text-align: center;
   max-width: 500px;
}

.error-code {
   font-size: clamp(6rem, 20vw, 10rem);
   font-weight: 700;
   line-height: 1;
   color: var(--color-primary);
   margin-bottom: 16px;
}

.error-title {
   font-size: 2rem;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 16px;
}

.error-message {
   font-size: 1.0625rem;
   color: #6b7280;
   margin-bottom: 32px;
   line-height: 1.6;
}

.error-actions {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
}

.error-actions .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 28px;
   border-radius: 10px;
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.3s ease;
}

.error-actions .btn-primary {
   background: var(--color-primary);
   color: var(--color-white);
   border: none;
}

.error-actions .btn-primary:hover {
   background: var(--color-primary-dark);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px var(--color-primary-dark);
}

.error-actions .btn-icon {
   width: 18px;
   height: 18px;
}

@media (max-width: 520px) {
   .error-actions {
      flex-direction: column;
      align-items: stretch;
   }

   .error-actions .btn {
      justify-content: center;
   }
}