/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.

 *= require_tree .
 *= require_self
 */


/* import admin_header.css */
@import "admin_header";


:root {
  /* Base font sizing */
  font-size: 16px;

  /* Brand */
  --color-accent: #ff9114;

  /* Grayscale */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Feedback / states */
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
}


.notice {
  color: var(--color-success);
  margin-bottom: 1rem;
}

.warning {
  color: var(--color-warning);
}


.hidden {
  display: none !important;
}

/* Login Page Styles */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 2rem 1rem;
  background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
}

.login-card {
  background: var(--color-white);
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--color-gray-200);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.025em;
}

.login-subtitle {
  font-size: 1rem;
  color: var(--color-gray-600);
  margin: 0;
  line-height: 1.5;
}

.login-form {
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 0.5rem;
  letter-spacing: 0.025em;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-gray-300);
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all 0.2s ease;
  background-color: var(--color-white);
  color: var(--color-gray-900);
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 145, 20, 0.1);
}

.form-input::placeholder {
  color: var(--color-gray-500);
}

.form-input:invalid {
  border-color: var(--color-error);
}

.form-actions {
  margin-top: 2rem;
}

.button--full {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.login-footer {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.login-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.login-link:hover {
  color: var(--color-gray-700);
  text-decoration: underline;
}

/* Alert Styles */
.alert {
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid;
}

.alert--error {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.alert--success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a;
}

/* Responsive Design */
@media (max-width: 480px) {
  .login-container {
    padding: 1rem;
    min-height: calc(100vh - 150px);
  }

  .login-card {
    padding: 1.5rem;
    border-radius: 0.75rem;
  }

  .login-title {
    font-size: 1.5rem;
  }

  .form-input {
    padding: 0.625rem 0.875rem;
  }
}