@import url("./base.css");

/* ===== HEADER NAVIGATION BUTTONS ===== */
.nav-btn{
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;
  cursor:pointer;
  padding:clamp(8px,1.5vw,12px) clamp(14px,2vw,20px);
  border-radius:10px;
  font-weight:700;
  font-size:clamp(0.85rem,1.2vw,1rem);
  transition:all .2s cubic-bezier(.2,.9,.2,1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 4px 12px rgba(10,132,255,0.2);
  min-height:44px;
  white-space:nowrap;
}

.nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,132,255,0.3);
  opacity:0.95;
}

.nav-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(10,132,255,0.2);
}

.nav-btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
}

.nav-btn--secondary{
  background:transparent;
  color:var(--accent);
  border:2px solid var(--accent);
  padding:clamp(6px,1.5vw,10px) clamp(12px,2vw,18px);
}

.nav-btn--secondary:hover{
  background:rgba(10,132,255,0.1);
}

.nav-btn--success{
  background:linear-gradient(135deg,var(--success),#1ab85f);
  color:#fff;
}

.nav-btn--success:hover{
  box-shadow:0 8px 24px rgba(40,199,111,0.3);
}

@media(max-width:768px){
  .nav-btn{
    padding:8px 12px;
    font-size:0.85rem;
    min-height:40px;
  }
}

@media(max-width:600px){
  .nav-btn{
    padding:6px 10px;
    font-size:0.8rem;
    min-height:38px;
    border-radius:8px;
  }
  
  .nav-btn--secondary{
    padding:4px 8px;
  }
}

@media(max-width:480px){
  .nav-btn{
    padding:6px 10px;
    font-size:0.75rem;
    min-height:36px;
    border-radius:6px;
  }
}

/* Admin dashboard — iOS clean, density control, emphasis on data clarity */
.admin-panel{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start;width:100%;box-sizing:border-box}
.sidebar{background:var(--surface);border-radius:12px;padding:14px;border:1px solid rgba(11,18,32,0.035);max-height:100vh;overflow-y:auto}
.sidebar .menu-item{padding:10px;border-radius:10px;color:var(--muted);transition:background .16s ease,color .16s ease;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .menu-item:hover{background:rgba(10,132,255,0.04);color:var(--accent)}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;width:100%;box-sizing:border-box}
.stat-card{padding:16px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);border:1px solid rgba(11,18,32,0.03);transition:all .2s ease}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}

@media(max-width:1200px){
  .admin-panel{grid-template-columns:1fr}
  .sidebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;max-height:none}
  .sidebar .menu-item{padding:8px;text-align:center;font-size:0.85rem}
}

@media(max-width:980px){
  .admin-panel{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
  .admin-panel{gap:14px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .stat-card{padding:12px}
  .stat-value{font-size:1.1rem}
  .system-tiles{grid-template-columns:1fr;gap:12px}
  .system-tile iframe{height:200px}
  .sidebar{grid-template-columns:repeat(3,1fr)}
  .sidebar .menu-item{font-size:0.8rem}
}

@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .sidebar{grid-template-columns:repeat(2,1fr)}
  .system-tiles{gap:10px}
}

@media(max-width:480px){
  .admin-panel{gap:10px}
  .stats-grid{grid-template-columns:1fr;gap:10px}
  .stat-card{padding:10px}
  .stat-value{font-size:1rem}
  .sidebar{grid-template-columns:1fr}
  .sidebar .menu-item{padding:8px;font-size:0.75rem}
  .system-tiles{grid-template-columns:1fr;gap:8px}
  .system-tile iframe{height:180px}
  .login-form-container{max-width:100%;margin:0 auto}
  table{font-size:0.75rem}
  th,td{padding:6px}
  .monitoring-display{grid-template-columns:1fr}
}

/* Micro-interactions and emphasis */
.stat-card .stat-value{font-weight:800;font-size:1.25rem;color:var(--text)}
.stat-card .stat-label{color:var(--muted);font-size:0.9rem}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.metric-spark{height:34px;background:linear-gradient(90deg, rgba(10,132,255,0.08), rgba(10,132,255,0.02));border-radius:8px}

/* Action buttons in admin */
.admin-actions{display:flex;gap:10px;flex-wrap:wrap}
.admin-actions .btn{padding:10px 12px}

/* Compact tables in admin */
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid rgba(11,18,32,0.04);text-align:left;color:var(--muted)}
.admin-table tr:hover{background:rgba(10,132,255,0.03)}

/* ===== SYSTEM TILES ===== */
.system-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:20px}
.system-tile{background:var(--surface);border-radius:12px;padding:0;overflow:hidden;border:1px solid rgba(11,18,32,0.04);transition:all .2s ease}
.system-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(10,132,255,0.1)}
.system-tile-header{padding:14px;border-bottom:1px solid rgba(11,18,32,0.04);display:flex;align-items:center;gap:10px}
.system-tile-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem}
.system-tile-info h3{margin:0;font-weight:700;color:var(--text);font-size:0.95rem}
.system-tile-info p{margin:2px 0 0 0;font-size:0.85rem;color:var(--muted)}
.system-tile iframe{width:100%;height:250px;border:none;display:block}

/* ===== LOGIN FORM ===== */
.login-form-container{background:var(--surface);border-radius:12px;padding:24px;border:1px solid rgba(11,18,32,0.04);max-width:400px}
.login-form-container h2{margin:0 0 20px 0;font-size:1.2rem;color:var(--text)}
.login-form-container .form-group{margin-bottom:16px}
.login-form-container .form-label{display:block;font-weight:600;color:var(--text);margin-bottom:6px;font-size:0.95rem}
.login-form-container .form-input{width:100%;padding:10px 12px;border:1px solid rgba(11,18,32,0.06);border-radius:10px;background:var(--surface);color:var(--text);font-size:0.95rem;transition:all .12s ease}
.login-form-container .form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(4,71,255,0.1)}
.login-form-container .btn{width:100%;margin-top:16px}

/* ===== WELCOME SECTION ===== */
.admin-welcome{background:linear-gradient(135deg,rgba(0,71,255,0.04),rgba(10,132,255,0.02));border-radius:14px;padding:24px;margin-bottom:24px;border:1px solid rgba(10,132,255,0.1)}
.admin-welcome h2{margin:0 0 8px 0;font-size:1.3rem;color:var(--text)}
.admin-welcome p{margin:0;color:var(--muted);max-width:70ch}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ===== MONITORING DISPLAY ===== */
.monitoring-display{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.monitoring-item{background:var(--surface);border-radius:12px;padding:14px;border:1px solid rgba(11,18,32,0.04)}
.monitoring-label{font-size:0.85rem;color:var(--muted);margin-bottom:6px}
.monitoring-value{font-size:1.4rem;font-weight:800;color:var(--accent)}

/* ===== DATA TABLE SECTION ===== */
.table-container{background:var(--surface);border-radius:12px;border:1px solid rgba(11,18,32,0.04);overflow:hidden;margin-bottom:20px}
.table-header{padding:14px;border-bottom:1px solid rgba(11,18,32,0.04);display:flex;justify-content:space-between;align-items:center}
.table-header h3{margin:0;font-size:0.95rem;color:var(--text)}
.table-body{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{background:rgba(10,132,255,0.04);padding:12px;text-align:left;font-weight:600;color:var(--text);font-size:0.9rem;border-bottom:1px solid rgba(11,18,32,0.04)}
td{padding:10px 12px;border-bottom:1px solid rgba(11,18,32,0.04);color:var(--muted);font-size:0.9rem}
tr:hover{background:rgba(10,132,255,0.02)}

/* ===== STATUS INDICATORS ===== */
.status-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:0.8rem;font-weight:600}
.status-online{background:rgba(40,199,111,0.15);color:var(--success)}
.status-offline{background:rgba(255,107,107,0.15);color:var(--danger)}
.status-pending{background:rgba(245,158,11,0.15);color:#f59e0b}
.status-active{background:rgba(10,132,255,0.15);color:var(--accent)}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media(max-width:980px){
	.admin-panel{grid-template-columns:1fr}
	.sidebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
	.sidebar .menu-item{padding:8px;text-align:center}
	.stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
	.admin-panel{gap:14px}
	.stats-grid{grid-template-columns:1fr;gap:12px}
	.stat-card{padding:12px}
	.stat-value{font-size:1.1rem}
	.system-tiles{grid-template-columns:1fr;gap:12px}
	.system-tile iframe{height:200px}
	.login-form-container{max-width:100%;margin:0 auto}
	table{font-size:0.85rem}
	th,td{padding:8px}
	.monitoring-display{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
	.stats-grid{grid-template-columns:1fr}
	.stat-card{padding:10px}
	.stat-value{font-size:1rem}
	.sidebar{grid-template-columns:repeat(2,1fr)}
	.system-tiles{grid-template-columns:1fr}
	.system-tile-header{padding:10px}
	.system-tile iframe{height:150px}
	.admin-welcome{padding:14px}
	.monitoring-display{grid-template-columns:1fr;gap:10px}
	.monitoring-item{padding:10px}
	table{font-size:0.75rem}
	th,td{padding:6px}
}