/*-----------------------------------------------
  Font Imports
-----------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Orbitron:400,700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/*-----------------------------------------------
  CSS Variables
-----------------------------------------------*/
:root {
  --font-main: 'Roboto', sans-serif;
  --font-logo: 'Orbitron', sans-serif;

  --bg-dark: #121212;
  --bg-surface: rgba(255,255,255,0.06);
  --bg-surface-hover: rgba(255,255,255,0.12);
  --glass-blur: 16px;

  --color-on-surface: #E0E0E0;
  --color-primary: #03DAC6;
  --color-primary-dark: #018786;
  --color-secondary: #BB86FC;
  --color-error: #CF6679;
  --color-success: #00C853;
  --color-warning: #FFC107;

  --ripple: rgba(255,255,255,0.3);
  --transition: 0.3s ease;
}

/*-----------------------------------------------
  Reset & Base Styles
-----------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: var(--bg-dark);
  color: var(--color-on-surface);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font: inherit; }

/*-----------------------------------------------
  Scrollbar
-----------------------------------------------*/
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

/*-----------------------------------------------
  App Bar (Top Navbar)
-----------------------------------------------*/
.navbar {
  background: linear-gradient(90deg, #1f1f1f, #2c2c2c);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.navbar-brand {
  font-family: var(--font-logo);
  font-weight: 700;
  background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-error));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logo-gradient 5s ease infinite alternate;
}
@keyframes logo-gradient {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/*-----------------------------------------------
  Ripple Effect
-----------------------------------------------*/
.app-icon, .nav-item, .btn {
  position: relative; overflow: hidden;
}
.app-icon:active::after,
.nav-item:active::after,
.btn:active::after {
  content: '';
  position: absolute;
  width: 150px; height: 150px;
  background: var(--ripple);
  border-radius: 50%;
  top: var(--y); left: var(--x);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple var(--transition) ease-out;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/*-----------------------------------------------
  Flash Messages
-----------------------------------------------*/
.flash { padding: 12px; margin-bottom: 8px; border-radius: 8px; }
.flash-success { background: rgba(0,200,0,0.2); color: #00C853; }
.flash-danger  { background: rgba(255,0,0,0.2); color: #CF6679; }
.flash-warning { background: rgba(255,255,0,0.2); color: #FFEB3B; }
.flash-info    { background: rgba(0,0,255,0.2); color: #2196F3; }

/*-----------------------------------------------
  Glass Utility
-----------------------------------------------*/
.glass {
  background: var(--bg-surface);
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: background var(--transition);
}
.glass:hover { background: var(--bg-surface-hover); }

/*-----------------------------------------------
  Buttons
-----------------------------------------------*/
.btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  transition: background var(--transition), transform 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-primary); color: var(--bg-dark); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-success { background: var(--color-success); color: var(--bg-dark); }
.btn-warning { background: var(--color-warning); color: var(--bg-dark); }
.btn-danger  { background: var(--color-error); color: var(--bg-dark); }

/*-----------------------------------------------
  Tables
-----------------------------------------------*/
.table-responsive { overflow-x: auto; }
.futuristic-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.futuristic-table thead {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: #fff;
}
.futuristic-table th, 
.futuristic-table td {
  padding: 12px;
  text-align: center;
}
.futuristic-table tbody tr {
  background: var(--bg-surface);
  transition: background var(--transition);
}
.futuristic-table tbody tr:hover {
  background: var(--bg-surface-hover);
}

/*-----------------------------------------------
  Dashboard Cards
-----------------------------------------------*/
.glass h6 {
  font-size: 0.9rem;
  color: var(--color-on-surface);
  margin-bottom: 8px;
}
.glass h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.glass .material-icons {
  font-size: 28px;
  opacity: 0.9;
}