/* --- GLOBAL --- */
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; min-height: 100vh; background: #f8f9fa; overflow: hidden;}

/* --- LOGIN --- */
.login-container {display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; position: relative; z-index: 1; background: linear-gradient(135deg, #0b4f2e 0%, #1a8a4a 30%, #2ecc71 70%, #a8e6cf 100%);}
.login-card {background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: 24px; box-shadow: 0 25px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.1) inset; width: 100%; max-width: 420px; padding: 45px 38px; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden;}
.login-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #1a8a4a, #2ecc71, #a8e6cf);}
@keyframes slideUp {from {opacity:0; transform:translateY(40px) scale(0.97);} to {opacity:1; transform:translateY(0) scale(1);}}
.login-logo {text-align:center; margin-bottom:32px;}
.login-logo .logo-icon {width: 64px; height: 64px; background: linear-gradient(135deg, #1a8a4a, #2ecc71); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 32px; color: white; box-shadow: 0 8px 24px rgba(26,138,74,0.3);}
.login-logo h1 {color:#1a5c38; font-size:26px; margin-bottom:4px; font-weight:700; letter-spacing: -0.5px;}
.login-logo p {color:#7f8c8d; font-size:14px; font-weight:500;}

/* --- FORM --- */
.form-group {margin-bottom:18px; position: relative;}
.form-group label {display:block; margin-bottom:7px; color:#2c3e50; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.5px;}
.form-group input {width:100%; padding:14px 16px; border:2px solid #e8ecef; border-radius:12px; font-size:15px; transition: all 0.25s ease; background: #f8faf9; color: #2c3e50;}
.form-group input:hover {border-color:#c8d6d0;}
.form-group input:focus {outline:none; border-color:#2ecc71; background:#fff; box-shadow: 0 0 0 4px rgba(46,204,113,0.1);}
.form-group input::placeholder {color: #b0bcc6;}

/* --- BUTTONS --- */
.btn {width:100%; padding:14px; background: linear-gradient(135deg, #1a8a4a 0%, #2ecc71 100%); color:white; border:none; border-radius:12px; font-size:16px; font-weight:700; cursor:pointer; transition: all 0.3s ease; position: relative; overflow: hidden;}
.btn:hover {transform:translateY(-2px); box-shadow:0 12px 28px rgba(46,204,113,0.35);}
.btn:active {transform:translateY(0); box-shadow:0 4px 12px rgba(46,204,113,0.2);}
.btn::after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%); opacity: 0; transition: opacity 0.3s;}
.btn:hover::after {opacity: 1;}
.btn.secondary {background: #f0f4f2; color:#2c3e50; margin-top:10px; box-shadow: none;}
.btn.secondary:hover {background:#e2e9e4; box-shadow:0 6px 16px rgba(0,0,0,0.06);}

/* --- ALERTS --- */
.alert {padding:14px 16px; border-radius:12px; margin-bottom:20px; display:none; font-size:14px; font-weight:500;}
.alert.error {background:#fef2f2; color:#dc2626; border:1px solid #fecaca; display:block;}
.alert.success {background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; display:block;}
.alert.info {background:#f0f9ff; color:#2563eb; border:1px solid #bae6fd; display:block;}

/* --- OTP --- */
.otp-section {display:none;}
.otp-section.active {display:block;}
.otp-note {background: linear-gradient(135deg, #f0fdf4, #ecfdf5); padding:16px; border-radius:14px; margin-bottom:22px; font-size:14px; color:#2c5f3e; border:1px solid #bbf7d0;}
.otp-note strong {color:#1a5c38;}

/* === DASHBOARD LAYOUT (LIMS-style) === */
.dashboard-container {display:none; height:100vh; width:100vw; overflow:hidden; background:#f8f9fa;}
.dashboard-container.active {display:block;}

/* Sidebar — fixed left, dark like LIMS */
.sidebar {position:fixed; top:0; left:0; width:250px; height:100vh; background:#343a40; color:white; z-index:1000; overflow-y:auto; padding:0;}
.sidebar-logo {font-size:18px; font-weight:700; padding:20px 20px 10px; color:#fff; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:10px;}
.sidebar-menu {list-style:none; padding:0 10px;}
.sidebar-menu li {margin:0;}
.sidebar-menu a {display:block; padding:10px 14px; color:#c9d1d9; text-decoration:none; border-radius:6px; transition:all 0.15s; font-size:14px;}
.sidebar-menu a:hover {background:#495057; color:#fff;}
.sidebar-menu a.active {background:#0d6efd; color:#fff; font-weight:600;}
.sidebar-menu hr {border:none; border-top:1px solid rgba(255,255,255,0.08); margin:10px 0;}

/* Main content — iframe-style area to the right of sidebar */
.main-content {margin-left:250px; height:100vh; display:flex; flex-direction:column; overflow:hidden;}

/* Top bar — like LIMS banner, fixed inside main-content area */
.topbar {background:#fff; padding:14px 24px; border-bottom:2px solid #dee2e6; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;}
.topbar-left h2 {color:#212529; font-size:20px; font-weight:700; margin:0;}
.topbar-right {display:flex; gap:20px; align-items:center;}
.admin-info .name {font-weight:600; color:#212529; font-size:14px;}
.admin-info .role {font-size:12px; color:#6c757d;}

/* Content sections — scrollable iframe-like area */
.content-area {flex:1; overflow-y:auto; padding:20px; background:#fff; border-radius:0;}
.section {display:none;}
.section.active {display:block;}

/* --- BOOTSTRAP OVERRIDES --- */
.wallet-card {border-left:4px solid #2ecc71 !important;}
.wallet-card .account-table {width:100%; border-collapse:collapse;}
.wallet-card .account-table tr {border-bottom:1px solid #f0f2f5;}
.wallet-card .account-table tr:last-child {border-bottom:none;}
.wallet-card .account-table td {padding:10px 6px; vertical-align:top;}
.wallet-card .account-table .label {color:#8896ab; font-size:13px; width:120px;}
.wallet-card .account-table .value {font-size:14px; color:#1a3a2a;}
.wallet-card .account-table .mono {font-family:monospace; font-size:12px; word-break:break-all; color:#555;}
.wallet-alert {margin-top:14px; padding:10px 14px; border-radius:8px; font-size:13px; display:none;}
.wallet-alert.alert-danger {background:#fef2f2; color:#e74c3c; border:1px solid #fecaca;}

/* --- STATS --- */
.stats-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px;}
.stat-card {background:#fff; border-radius:10px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.08); text-align:center; border:1px solid #e9ecef;}
.stat-card .stat-label {font-size:13px; color:#8896ab; margin-bottom:6px;}
.stat-card .stat-value {font-size:28px; font-weight:700; color:#1a8a4a;}

/* --- MAP --- */
#map {width:100%; height:600px; border-radius:8px;}
.map-container {background:white; padding:16px; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.08); border:1px solid #e9ecef;}

/* --- SPINNER --- */
.loading {display:flex; justify-content:center; align-items:center; padding:40px;}
.spinner {border:4px solid #e9ecef; border-top:4px solid #1a8a4a; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite;}
@keyframes spin {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* --- NEW MODULES --- */
.section .btn-success {background:#1a8a4a; border:none;}
.section .btn-success:hover {background:#2ecc71;}

/* Compact action buttons in tables */
.table .btn-sm, .kanban-card .btn-sm {
    width: auto;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
}
.table .btn-sm i, .kanban-card .btn-sm i {
    font-size: 13px;
}
.section .card {margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,0.08);}
code {background:#f0f2f5; padding:2px 6px; border-radius:4px; font-size:13px;}
.modal-content {border-radius:14px; border:none; box-shadow:0 25px 60px rgba(0,0,0,0.2);}
.modal-header {border-bottom:1px solid #f0f2f5; padding:20px 24px;}
.modal-body {padding:24px;}
.modal-footer {border-top:1px solid #f0f2f5; padding:16px 24px;}
.modal .form-label {font-weight:600; font-size:13px; color:#2c3e50;}

/* --- RESPONSIVE --- */
@media(max-width:768px){
  .dashboard-container.active{display:flex;flex-direction:column;}
  .sidebar{position:relative;width:100%;height:auto;max-height:200px;}
  .main-content{margin-left:0;}
  .sidebar-menu{display:flex;flex-wrap:wrap;gap:2px;}
  .sidebar-menu a{padding:6px 10px;font-size:13px;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  #map{height:400px;}
}

/* --- KANBAN --- */
.kanban-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:16px;min-height:70vh;}
.kanban-col{min-width:240px;max-width:260px;flex-shrink:0;background:#f0f2f5;border-radius:8px;display:flex;flex-direction:column;max-height:calc(100vh - 200px);}
.kanban-col-header{padding:10px 12px;border-radius:8px 8px 0 0;color:#fff;font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.kanban-col-count{background:rgba(255,255,255,0.3);padding:0 8px;border-radius:10px;font-size:11px;}
.kanban-col-body{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:6px;}
.kanban-card{background:#fff;border-radius:6px;padding:10px;box-shadow:0 1px 3px rgba(0,0,0,0.08);cursor:pointer;transition:box-shadow .15s;border-left:3px solid transparent;}
.kanban-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.12);}
.kanban-card h6{margin:0 0 2px;font-size:13px;font-weight:600;}
.kanban-card small{color:#6c757d;font-size:11px;}
.kanban-card .card-actions{margin-top:6px;display:flex;gap:4px;}
.kanban-card .card-actions button{font-size:11px;padding:2px 8px;}
.kanban-empty{color:#adb5bd;font-size:12px;text-align:center;padding:16px;}