/* 
* Date: 2025-05-14
* Author Name: Alok
* File Name: admin.css
* Purpose: Styles for admin interface
*/

:root{
  --primary-h:0;
  --primary-s:0%;
  --primary-l:0%;
  --secondary-h:0;
  --secondary-s:0%;
  --secondary-l:100%;
  --accent-h:49;
  --accent-s:94%;
  --accent-l:63%;
  --text-h:0;
  --text-s:0%;
  --text-l:7%;
  --primary:hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --primary-dark:hsl(var(--primary-h) var(--primary-s) 18%);
  --secondary:hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l));
  --secondary-light:hsl(var(--secondary-h) var(--secondary-s) 93%);
  --accent:hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --text:hsl(var(--text-h) var(--text-s) var(--text-l));
  --text-muted:hsl(var(--text-h) var(--text-s) 46%);
  --text-inverse:hsl(0 0% 100%);
  --bg:var(--secondary-light);
  --surface:var(--secondary);
  --border:hsl(var(--secondary-h) var(--secondary-s) 88%);
  --border-soft:hsl(var(--secondary-h) var(--secondary-s) 93%);

  --primary-soft:hsl(var(--primary-h) var(--primary-s) 94%);
  --primary-light:hsl(var(--primary-h) var(--primary-s) 84%);
  --secondary-soft:hsl(var(--secondary-h) var(--secondary-s) 100%);
  --secondary-dark:hsl(var(--secondary-h) var(--secondary-s) 42%);
  --accent-soft:hsl(var(--accent-h) var(--accent-s) 94%);
  --accent-light:hsl(var(--accent-h) var(--accent-s) 78%);
  --accent-dark:hsl(var(--accent-h) var(--accent-s) 30%);
  --text-soft:hsl(var(--text-h) var(--text-s) 32%);
  --text-faint:hsl(var(--text-h) var(--text-s) 62%);
  --text-inverse-muted:hsl(0 0% 82%);
  --dark:var(--primary-dark);
  --light:var(--secondary-light);
  --shadow-sm:0 4px 6px hsl(0 0% 0%/.05);
  --shadow-md:0 6px 12px hsl(0 0% 0%/.10);
  --shadow-lg:0 10px 25px hsl(0 0% 0%/.10);
  --shadow-toast:0 4px 12px hsl(0 0% 0%/.15);
  --radius-sm:.5rem;
  --radius-md:.75rem;
}


/* Global Admin Styles */
body {
  min-height:100vh;
  margin:0;
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background-color:var(--bg);
  overflow-x:hidden;
}

.admin-header {
  background-color:var(--primary-dark);
  box-shadow:0 2px 5px hsl(0 0% 0%/.10);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.admin-header .navbar-brand {
  font-weight: 700;
}

.navbar-brand .brand-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
}

.admin-header .navbar-nav .nav-link {
  color:var(--text-inverse-muted, hsl(0 0% 85%));
  padding: 0.5rem 1rem;
  transition: color 0.2s;
}

.admin-header .navbar-nav .nav-link:hover,
.admin-header .navbar-nav .nav-link.active {
  color:var(--text-inverse);
}

.admin-content {
  padding: 2rem 0;
  min-height: calc(100vh - 120px);
}

.admin-card {
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  transition: box-shadow 0.3s;
  margin-bottom: 1.5rem;
}

.admin-card:hover {
  box-shadow:var(--shadow-md);
}

.admin-card .card-header {
  background-color:var(--text-inverse);
  border-bottom:1px solid var(--border-soft);
  font-weight: 600;
}

.admin-card .card-header .btn-icon {
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
}

.admin-table {
  margin-bottom: 0;
}

.admin-table th {
  font-weight: 600;
  border-top: none;
}

.admin-table td {
  vertical-align: middle;
}

/* Admin Dashboard */
.stats-card {
  border-radius:var(--radius-sm);
  padding: 1.5rem;
  height: 100%;
  transition: transform 0.2s;
}

.stats-card:hover {
  transform: translateY(-5px);
}

.stats-card .stats-icon {
  font-size: 2rem;
  opacity: 0.2;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
}

.stats-card .stats-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.stats-card .stats-title {
  font-size: 0.9rem;
  color:var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1060;
}

.toast {
  width: 350px;
  font-size: 0.9rem;
  box-shadow:var(--shadow-toast);
}

.toast-header {
  padding: 0.5rem 1rem;
}

.toast-body {
  padding: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .admin-content {
    padding: 1rem 0;
  }
  
  .stats-card {
    margin-bottom: 1rem;
  }
  
  .stats-card .stats-value {
    font-size: 2rem;
  }
  
  .admin-card {
    margin-bottom: 1rem;
  }
}



/* Client portal additions not already covered by admin components */
.summary-card{border:none;box-shadow:0 2px 8px hsl(0 0% 0%/.08);transition:transform .2s;}
.summary-card:hover{transform:translateY(-2px);}
.summary-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-inverse);font-size:1.25rem;}
.upload-area{border:2px dashed var(--border);border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:all .3s;background:var(--light);}
.upload-area:hover{border-color:var(--accent);background:var(--accent-soft);}
.upload-area.drag-over{border-color:var(--accent);background:var(--accent-light);}
.stat-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border);}
.stat-row:last-child{border-bottom:none;}
.extracted-data{font-size:.9rem;}
.data-field{display:flex;padding:.4rem 0;border-bottom:1px solid var(--border-soft);}
.data-field:last-child{border-bottom:none;}
.field-label{font-weight:600;min-width:180px;color:var(--text-soft);}
.field-value{color:var(--text);}
.data-section{margin-bottom:1rem;}
.api-key-display{background:var(--secondary-light);padding:.25rem .5rem;border-radius:4px;font-size:.85rem;}
.table th{font-weight:600;font-size:.85rem;}
.table td{font-size:.9rem;}
.card{border:none;box-shadow:0 2px 8px hsl(0 0% 0%/.08);}
.card-header{background:var(--surface);border-bottom:1px solid var(--border);font-weight:600;}
.progress{background:var(--border-soft);}
.badge{font-weight:500;}
.cursor-pointer{cursor:pointer;}
.spin{animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
main{flex:1;}
.settings-plan-badge{font-size:.75rem;vertical-align:middle;}

@media(max-width:768px){.field-label{min-width:120px}.upload-area{padding:1.5rem}}