/*
 * Barakah POS – modern login page
 * Loaded after auth.css. Remove its <link> in auth/login.blade.php to go back.
 */
:root {
  --bp-primary: #f5933a;
  --bp-primary-dark: #dc7a22;
  --bp-primary-ring: rgba(245, 147, 58, .25);
  --bp-navy: #10284a;
  --bp-bg: #f5f6fa;
  --bp-border: #dfe3ea;
  --bp-text: #1f2a44;
  --bp-muted: #6b7385;
}

body { font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.login-page,
.dark-mode .login-page {
  background: linear-gradient(180deg, var(--bp-navy) 0, var(--bp-navy) 42vh, var(--bp-bg) 42vh) !important;
  background-image: none;
}
.login-page::before {
  content: '';
  position: fixed;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 147, 58, .35), rgba(245, 147, 58, 0) 70%);
  pointer-events: none;
}

.login-page .form-outer { max-width: 440px; padding: 24px 16px; }

.login-page .form-inner {
  position: relative;
  padding: 40px 36px 32px;
  border: 1px solid #e7eaf0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(16, 40, 74, .14);
  overflow: hidden;
}
.login-page .form-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bp-primary);
}
.login-page .logo img { max-height: 56px; width: auto; }
.login-page .logo span { color: var(--bp-text); font-weight: 800; }

.login-page form { max-width: none; margin: 28px 0 4px; text-align: left; }

/* boxed fields with the label floating onto the border */
.form-group-material { margin-bottom: 22px; }
input.input-material {
  height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--bp-text);
  font-size: 15px;
  font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
input.input-material:focus {
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 3px var(--bp-primary-ring);
}
input.input-material ~ label {
  top: 14px;
  left: 12px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--bp-muted);
  background: #fff;
}
input.input-material ~ label.active {
  top: -9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bp-primary-dark);
}

.login-page .btn-primary {
  height: 48px;
  border: none;
  border-radius: 10px;
  background: var(--bp-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}
.login-page .btn-primary:hover,
.login-page .btn-primary:focus {
  background: var(--bp-primary-dark);
  box-shadow: 0 0 0 3px var(--bp-primary-ring);
}

.login-page .form-inner strong { display: block; margin-top: 6px; color: #e5484d; font-size: 13px; }
.login-page .copyrights p { color: var(--bp-muted); }
.login-page .copyrights .external { color: var(--bp-text); font-weight: 700; }