/* Prototype theme (scoped). Apply by wrapping content in <div class="proto"> ... </div> */
.proto, .proto * { margin:0; padding:0; box-sizing:border-box; }

/* Base background & typography (scoped instead of body) */
.proto {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height:100vh;
}

/* ---------------------------
   Login Screen Styles
---------------------------- */
.proto .login-container{
  display:flex; justify-content:center; align-items:center;
  min-height:100vh; padding:20px;
}
.proto .login-card{
  background:#fff; border-radius:20px; box-shadow:0 20px 40px rgba(0,0,0,0.1);
  padding:40px; width:100%; max-width:450px; text-align:center;
}
.proto .login-header{ margin-bottom:30px; }
.proto .login-header h1{ color:#333; font-size:2.2rem; margin-bottom:10px; }
.proto .login-header p{ color:#666; font-size:1.1rem; }

.proto .login-form{ text-align:left; }
.proto .form-group{ margin-bottom:20px; }
.proto .form-group label{
  display:block; margin-bottom:8px; font-weight:600; color:#495057;
}
.proto .form-group input{
  width:100%; padding:12px 16px; border:2px solid #dee2e6; border-radius:8px;
  font-size:16px; transition:border-color .3s ease, box-shadow .3s ease;
}
.proto .form-group input:focus{
  outline:none; border-color:#4facfe; box-shadow:0 0 0 3px rgba(79,172,254,.1);
}

.proto .login-btn{
  width:100%;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff; border:none; padding:15px 30px; border-radius:10px;
  font-size:1.1rem; font-weight:600; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease; margin-top:10px;
}
.proto .login-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(102,126,234,.3); }

.proto .login-options{ margin-top:20px; text-align:center; }
.proto .login-link{ color:#4facfe; text-decoration:none; font-weight:600; }
.proto .login-link:hover{ text-decoration:underline; }

/* ---------------------------
   Main App Shell (Header/Sidebar/Layout)
---------------------------- */
.proto .app-container{ display:none; } /* kept for parity with prototype */

.proto .app-header{
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.1);
  padding:10px 20px; display:flex; justify-content:space-between; align-items:center;
  position:fixed; top:0; left:0; right:0; height:60px; z-index:1000;
}
.proto .app-logo{ display:flex; align-items:center; gap:10px; }
.proto .app-logo h1{ color:#333; font-size:1.5rem; }

.proto .user-menu{ display:flex; align-items:center; gap:20px; }
.proto .user-info{ display:flex; align-items:center; gap:10px; color:#666; }
.proto .user-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#4facfe 0%, #00f2fe 100%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold;
}
.proto .logout-btn{
  background:#dc3545; color:#fff; border:none; padding:8px 16px; border-radius:6px;
  cursor:pointer; font-weight:600; transition:background .3s ease;
}
.proto .logout-btn:hover{ background:#c82333; }

.proto .sidebar{
  position:fixed; left:0; top:60px; width:250px; height:calc(100vh - 60px);
  background:#fff; box-shadow:2px 0 10px rgba(0,0,0,.1);
  padding:20px 0; overflow-y:auto; z-index:999;
}
.proto .sidebar-menu{ list-style:none; }
.proto .sidebar-menu li{ margin-bottom:5px; }
.proto .sidebar-menu a{
  display:flex; align-items:center; gap:12px; padding:12px 20px;
  color:#666; text-decoration:none; transition:all .3s ease; font-weight:500;
}
.proto .sidebar-menu a:hover,
.proto .sidebar-menu a.active{
  background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color:#fff;
}

.proto .main-content{
  margin-left:250px; margin-top:60px; padding:20px; min-height:calc(100vh - 60px);
}
.proto .page-content{ width:100%; height:auto; }
.proto .page-header{
  background:#fff; border-radius:15px; padding:20px; margin-bottom:20px;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
}
.proto .page-header h2{ color:#333; font-size:2rem; margin-bottom:10px; }
.proto .page-header p{ color:#666; font-size:1.1rem; }

/* ---------------------------
   Dashboard / Stats / Cards
---------------------------- */
.proto .stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:20px; margin-bottom:30px;
}
.proto .stat-card{
  background:#fff; border-radius:15px; padding:25px; box-shadow:0 5px 15px rgba(0,0,0,.1);
  text-align:center; position:relative; overflow:hidden;
}
.proto .stat-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.proto .stat-icon{ font-size:2.5rem; margin-bottom:15px; }
.proto .stat-number{ font-size:2.2rem; font-weight:bold; color:#333; margin-bottom:5px; }
.proto .stat-label{ color:#666; font-weight:600; }
.proto .stat-change{ margin-top:10px; font-size:.9rem; font-weight:600; }
.proto .stat-change.positive{ color:#28a745; }
.proto .stat-change.negative{ color:#dc3545; }

.proto .content-grid{
  display:grid; grid-template-columns:2fr 1fr; gap:30px; margin-bottom:30px; align-items:start;
}
.proto .content-card{
  background:#fff; border-radius:15px; padding:30px; box-shadow:0 5px 15px rgba(0,0,0,.1);
}
.proto .content-card h3{
  color:#333; margin-bottom:20px; font-size:1.3rem; display:flex; align-items:center; gap:10px;
}
.proto .chart-container{ position:relative; height:300px; margin-bottom:20px; }

.proto .data-table{ width:100%; border-collapse:collapse; margin-top:20px; }
.proto .data-table th,
.proto .data-table td{ padding:12px; text-align:left; border-bottom:1px solid #dee2e6; }
.proto .data-table th{ background:#f8f9fa; font-weight:600; color:#495057; }
.proto .data-table tr:hover{ background:#f8f9fa; }

/* ---------------------------
   QR Grid / Cards
---------------------------- */
.proto .qr-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:20px; margin-top:20px;
}
.proto .qr-item{
  background:#fff; border-radius:10px; padding:20px; box-shadow:0 3px 10px rgba(0,0,0,.1);
  text-align:center; transition:transform .2s ease;
}
.proto .qr-item:hover{ transform:translateY(-5px); }
.proto .qr-preview{
  width:120px; height:120px; margin:0 auto 15px; border:2px solid #dee2e6; border-radius:8px;
  display:flex; align-items:center; justify-content:center; background:#f8f9fa;
}
.proto .qr-info h4{ color:#333; margin-bottom:5px; font-size:1rem; }
.proto .qr-info p{ color:#666; font-size:.9rem; margin-bottom:3px; }
.proto .qr-actions{ margin-top:15px; display:flex; gap:10px; justify-content:center; }

.proto .btn-small{
  padding:6px 12px; font-size:.8rem; border:none; border-radius:4px;
  cursor:pointer; font-weight:600; transition:transform .2s ease;
}
.proto .btn-small:hover{ transform:translateY(-1px); }
.proto .btn-primary{ background:#4facfe; color:#fff; }
.proto .btn-success{ background:#28a745; color:#fff; }
.proto .btn-danger{ background:#dc3545; color:#fff; }
.proto .btn-warning{ background:#ffc107; color:#212529; }

/* ---------------------------
   Search / Filters
---------------------------- */
.proto .search-bar{ display:flex; gap:15px; margin-bottom:20px; align-items:center; }
.proto .search-input{
  flex:1; padding:10px 15px; border:2px solid #dee2e6; border-radius:8px; font-size:16px;
}
.proto .search-input:focus{ outline:none; border-color:#4facfe; }
.proto .filter-select{
  padding:10px 15px; border:2px solid #dee2e6; border-radius:8px; font-size:16px; background:#fff;
}

/* ---------------------------
   Activity List
---------------------------- */
.proto .activity-item{
  display:flex; align-items:center; gap:15px; padding:15px; border-bottom:1px solid #dee2e6;
}
.proto .activity-item:last-child{ border-bottom:none; }
.proto .activity-icon{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff;
}
.proto .activity-icon.create{ background:#28a745; }
.proto .activity-icon.scan{ background:#4facfe; }
.proto .activity-icon.download{ background:#ffc107; color:#212529; }
.proto .activity-icon.delete{ background:#dc3545; }
.proto .activity-content{ flex:1; }
.proto .activity-title{ font-weight:600; color:#333; margin-bottom:3px; }
.proto .activity-time{ color:#666; font-size:.9rem; }

/* ---------------------------
   Modal
---------------------------- */
.proto .modal{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.5); z-index:2000; align-items:center; justify-content:center;
}
.proto .modal.active{ display:flex; }
.proto .modal-content{
  background:#fff; border-radius:15px; padding:30px; max-width:600px; width:90%;
  max-height:80vh; overflow-y:auto;
}
.proto .modal-header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;
}
.proto .modal-header h3{ color:#333; font-size:1.5rem; }
.proto .close-btn{
  background:none; border:none; font-size:1.5rem; cursor:pointer; color:#666; padding:5px;
}
.proto .close-btn:hover{ color:#333; }

/* ---------------------------
   Forms / Controls (shared)
---------------------------- */
.proto .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.proto .form-group{ margin-bottom:20px; }
.proto .form-group label{ display:block; margin-bottom:8px; font-weight:600; color:#495057; }
.proto .form-group input,
.proto .form-group textarea,
.proto .form-group select{
  width:100%; padding:12px 16px; border:2px solid #dee2e6; border-radius:8px; font-size:16px; transition:border-color .3s ease, box-shadow .3s ease;
}
.proto .form-group input:focus,
.proto .form-group textarea:focus,
.proto .form-group select:focus{
  outline:none; border-color:#4facfe; box-shadow:0 0 0 3px rgba(79,172,254,.1);
}

.proto .generate-btn{
  width:100%; background:linear-gradient(135deg,#667eea 0%, #764ba2 100%);
  color:#fff; border:none; padding:15px 30px; border-radius:10px; font-size:1.1rem; font-weight:600;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; margin-top:20px;
}
.proto .generate-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(102,126,234,.3); }

/* Page visibility toggles (if your JS uses them) */
.proto .page-content{ display:none; }
.proto .page-content.active{ display:block; }

/* ---------------------------
   Exports / Date Range / Notifications
---------------------------- */
.proto .export-options{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.proto .export-btn{
  padding:10px 20px; border:none; border-radius:8px; font-weight:600; cursor:pointer; transition:transform .2s ease;
}
.proto .export-btn:hover{ transform:translateY(-1px); }
.proto .export-csv{ background:#28a745; color:#fff; }
.proto .export-pdf{ background:#dc3545; color:#fff; }
.proto .export-excel{ background:#198754; color:#fff; }

.proto .date-range{ display:flex; gap:10px; align-items:center; margin-bottom:20px; }
.proto .date-range input{ padding:8px 12px; border:2px solid #dee2e6; border-radius:6px; }

.proto .notification{
  position:fixed; top:90px; right:20px; background:#fff; border-radius:10px; padding:15px 20px;
  box-shadow:0 5px 15px rgba(0,0,0,.2); z-index:1500; transform:translateX(400px); transition:transform .3s ease; border-left:4px solid #28a745;
}
.proto .notification.show{ transform:translateX(0); }
.proto .notification.error{ border-left-color:#dc3545; }
.proto .notification.warning{ border-left-color:#ffc107; }

/* ---------------------------
   Responsive
---------------------------- */
@media (max-width:768px){
  .proto .sidebar{ transform:translateX(-100%); transition:transform .3s ease; }
  .proto .sidebar.mobile-open{ transform:translateX(0); }

  .proto .main-content{ margin-left:0; margin-top:60px; padding:15px; }
  .proto .app-header{ padding:10px 15px; }
  .proto .content-grid{ grid-template-columns:1fr; }
  .proto .stats-grid{ grid-template-columns:1fr; }
  .proto .form-row{ grid-template-columns:1fr; }
}