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

:root {

/* Gradients */

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

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

/* Core 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 GLOBAL
====================================== */

body {

background: var(--bg-main);

font-family: 'Inter', sans-serif;

color: var(--text-dark);

margin: 0;

}

/* ======================================
   LAYOUT
====================================== */

.dashboard-container {

display: flex;

min-height: 100vh;

}

/* Content Area */

.dashboard-content {

flex: 1;

padding: 24px;

}

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

.card {

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 ease;

}

.card:hover {

transform: translateY(-5px);

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

}

/* Stats Cards */

.stat-card {

display: flex;

align-items: center;

justify-content: space-between;

}

.stat-icon {

font-size: 28px;

color: var(--color-primary);

}

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

.btn-primary {

background: var(--gradient-primary);

color: white;

padding: 12px 20px;

border-radius: 10px;

font-weight: 600;

border: none;

cursor: pointer;

transition: 0.3s;

}

.btn-primary:hover {

transform: scale(1.05);

}

/* Danger Button */

.btn-danger {

background: var(--color-danger);

color: white;

padding: 12px 20px;

border-radius: 10px;

border: none;

cursor: pointer;

}

/* Secondary Button */

.btn-secondary {

background: #e2e8f0;

color: var(--text-dark);

padding: 12px 20px;

border-radius: 10px;

border: none;

cursor: pointer;

}

/* ======================================
   TABLES
====================================== */

.table-container {

overflow-x: auto;

}

.table {

width: 100%;

border-collapse: collapse;

background: white;

border-radius: 12px;

overflow: hidden;

}

/* Table Header */

.table th {

background: #f8fafc;

padding: 12px;

text-align: left;

color: var(--text-dark);

border-bottom: 2px solid var(--border-light);

}

/* Table Data */

.table td {

padding: 12px;

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

}

/* Row Hover */

.table tr:hover {

background: #f1f5f9;

}

/* ======================================
   SOS BUTTON
====================================== */

.sos-button {

width: 150px;

height: 150px;

background:
radial-gradient(circle,
#ef4444,
#b91c1c);

border-radius: 50%;

font-size: 22px;

font-weight: bold;

color: white;

cursor: pointer;

box-shadow:
0 0 30px rgba(239,68,68,0.7);

transition: 0.3s;

}

.sos-button:hover {

transform: scale(1.12);

}

/* SOS Pulse Animation */

@keyframes pulseSOS {

0% {

box-shadow:
0 0 0 0 rgba(239,68,68,0.7);

}

70% {

box-shadow:
0 0 0 25px rgba(239,68,68,0);

}

100% {

box-shadow:
0 0 0 0 rgba(239,68,68,0);

}

}

.sos-pulse {

animation: pulseSOS 2s infinite;

}

/* ======================================
   ALERT FLASH
====================================== */

@keyframes alertFlash {

0% {
background-color: transparent;
}

50% {
background-color: rgba(239,68,68,0.2);
}

100% {
background-color: transparent;
}

}

.alert-flash {

animation: alertFlash 1s infinite;

}

/* ======================================
   SIDEBAR
====================================== */

.sidebar {

width: 250px;

background: var(--gradient-primary);

color: white;

padding: 20px;

min-height: 100vh;

}

/* Sidebar Links */

.sidebar-link {

display: flex;

align-items: center;

gap: 10px;

padding: 12px;

border-radius: 10px;

transition: 0.2s;

cursor: pointer;

}

.sidebar-link:hover {

background: rgba(255,255,255,0.2);

}

/* Active */

.sidebar-active {

background: var(--gradient-secondary);

color: white;

}

/* ======================================
   FORM INPUTS
====================================== */

.input-field {

width: 100%;

padding: 12px;

background: white;

border-radius: 10px;

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

color: var(--text-dark);

}

.input-field:focus {

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

outline: none;

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

}

/* ======================================
   MODALS
====================================== */

.modal-overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(15,23,42,0.4);

display: flex;

align-items: center;

justify-content: center;

z-index: 999;

}

.modal-box {

background: white;

padding: 24px;

border-radius: 16px;

width: 420px;

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

}

/* ======================================
   GRID SYSTEM
====================================== */

.grid-3 {

display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 20px;

}

.grid-2 {

display: grid;

grid-template-columns:
repeat(2, 1fr);

gap: 20px;

}

/* ======================================
   RESPONSIVE
====================================== */

@media (max-width: 1024px) {

.sidebar {

width: 220px;

}

}

@media (max-width: 768px) {

.grid-3 {

grid-template-columns: 1fr;

}

.grid-2 {

grid-template-columns: 1fr;

}

.sos-button {

width: 110px;

height: 110px;

font-size: 18px;

}

.sidebar {

width: 200px;

}

}

@media (max-width: 480px) {

.dashboard-container {

flex-direction: column;

}

.sidebar {

width: 100%;

min-height: auto;

}

}