/* ======================================
   ESRRMS GLOBAL STYLE SHEET (REFINED)
====================================== */

/* ======================================
   RESET
====================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======================================
   GLOBAL THEME VARIABLES
====================================== */

:root {

/* Gradients */

--gradient-primary:
linear-gradient(135deg, #2563eb, #06b6d4);

--gradient-secondary:
linear-gradient(135deg, #7c3aed, #ec4899);

/* Colors */

--color-primary: #2563eb;
--color-danger: #ef4444;
--color-success: #10b981;
--color-warning: #f59e0b;

/* Background */

--bg-main: #f1f5f9;
--bg-card: #ffffff;

/* Text */

--text-dark: #1e293b;
--text-light: #64748b;

/* Border */

--border-light: #e2e8f0;

}

/* ======================================
   BODY STYLING
====================================== */

body {

font-family:
"Inter",
"Segoe UI",
Tahoma,
Geneva,
Verdana,
sans-serif;

/* Bright Background */

background: var(--bg-main);

color: var(--text-dark);

min-height: 100vh;

}

/* ======================================
   SCROLLBAR STYLING
====================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #e2e8f0;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
}

/* ======================================
   LOGO TEXT
====================================== */

.logo-text {

font-weight: bold;

font-size: 22px;

background: var(--gradient-primary);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

/* ======================================
   BUTTONS
====================================== */

.btn {

padding: 12px 22px;

border-radius: 10px;

font-weight: 600;

border: none;

cursor: pointer;

transition: 0.3s;

}

/* Hover */

.btn:hover {

transform: scale(1.05);

}

/* Primary Button */

.btn-primary {

background: var(--gradient-primary);

color: white;

}

/* Secondary Button */

.btn-secondary {

background: #e2e8f0;

color: var(--text-dark);

}

/* Danger Button */

.btn-danger {

background: var(--color-danger);

color: white;

}

/* ======================================
   GLOBAL CARDS
====================================== */

.card-global {

background: var(--bg-card);

border-radius: 16px;

padding: 20px;

border: 1px solid var(--border-light);

box-shadow:
0 10px 25px rgba(0,0,0,0.05);

transition: 0.3s;

}

.card-global:hover {

transform: translateY(-5px);

box-shadow:
0 20px 40px rgba(0,0,0,0.08);

}

/* ======================================
   INPUT FIELDS
====================================== */

.input-global {

width: 100%;

padding: 12px;

background: white;

border-radius: 10px;

border: 1px solid var(--border-light);

color: var(--text-dark);

}

.input-global:focus {

outline: none;

border-color: var(--color-primary);

box-shadow:
0 0 0 3px rgba(37,99,235,0.2);

}

/* ======================================
   LINKS
====================================== */

a {

text-decoration: none;

color: var(--color-primary);

}

/* ======================================
   ANIMATIONS
====================================== */

.fade-in {

animation: fadeIn 0.5s ease-in-out;

}

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(10px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

/* ======================================
   ALERT BOX
====================================== */

.alert-box {

background: #fee2e2;

color: #991b1b;

padding: 12px;

border-radius: 10px;

margin-top: 10px;

border: 1px solid #fecaca;

}

/* ======================================
   BADGES
====================================== */

.badge {

padding: 5px 10px;

border-radius: 6px;

font-size: 12px;

color: white;

}

/* Status Colors */

.badge-success {

background: var(--color-success);

}

.badge-warning {

background: var(--color-warning);

}

.badge-danger {

background: var(--color-danger);

}

/* ======================================
   GRID HELPERS
====================================== */

.flex-center {

display: flex;

align-items: center;

justify-content: center;

}

/* ======================================
   FOOTER
====================================== */

footer {

font-size: 14px;

color: var(--text-light);

margin-top: 30px;

text-align: center;

}