/* login/css/admin.css — Admin Portal & Dashboard Styles */

/* ── Admin login panel ── */
.admin-login-body .admin-left{background:linear-gradient(145deg,#1c2b3a 0%,#2d3f55 60%,#1a3a5c 100%);}
.admin-badge{display:inline-flex;align-items:center;gap:8px;margin-top:28px;background:rgba(232,160,32,.15);border:1px solid rgba(232,160,32,.30);border-radius:20px;padding:6px 16px;font-size:.82rem;font-weight:500;color:#f4b942;letter-spacing:.3px;}
.admin-badge img{width:14px;height:14px;filter:brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(400%) hue-rotate(5deg);}
.admin-card{border-top:3px solid var(--primary);}
.admin-icon-header{margin-bottom:18px;}
.admin-icon-circle{width:54px;height:54px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-l) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(26,58,92,.22);}
.admin-icon-circle img{width:26px;height:26px;filter:brightness(0) invert(1);}
.btn-admin-login{background:linear-gradient(135deg,#1c2b3a 0%,var(--primary) 100%);}

/* ── Dashboard nav ── */
.dashboard-body{background:var(--bg-page);min-height:100vh;margin:0;}
.dashboard-nav{position:sticky;top:0;z-index:100;background:var(--primary);padding:0 28px;height:58px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 12px rgba(0,0,0,.18);}
.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;}
.nav-logo-img{height:28px;filter:brightness(0) invert(1);}
.logo-sa-nav{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--accent);font-weight:600;}
.logo-cargo-nav{font-family:'DM Sans',sans-serif;font-size:.75rem;letter-spacing:3px;color:rgba(255,255,255,.75);text-transform:uppercase;font-weight:300;}
.nav-divider{color:rgba(255,255,255,.25);font-size:1rem;margin:0 4px;}
.nav-section{font-size:.8rem;color:rgba(255,255,255,.6);font-weight:400;letter-spacing:1px;}
.nav-right{display:flex;align-items:center;gap:16px;}
.nav-session{display:flex;align-items:center;gap:8px;font-size:.83rem;color:rgba(255,255,255,.8);}
.session-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.6);}
.session-timer{background:rgba(255,255,255,.1);border-radius:10px;padding:2px 10px;font-size:.76rem;color:rgba(255,255,255,.65);}
.btn-logout{padding:6px 16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.82rem;cursor:pointer;text-decoration:none;font-family:'DM Sans',sans-serif;transition:background var(--tr);}
.btn-logout:hover{background:rgba(255,255,255,.2);}

/* ── Dashboard layout ── */
.dashboard-layout{display:flex;min-height:calc(100vh - 58px);}
.dashboard-sidebar{width:200px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);padding:24px 0;}
.sidebar-nav{display:flex;flex-direction:column;padding:0 12px;}
.sidebar-section-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-light);padding:0 10px;margin-bottom:4px;}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;text-decoration:none;color:var(--text-mid);font-size:.87rem;font-weight:500;transition:background var(--tr),color var(--tr);cursor:pointer;}
.sidebar-link img{width:16px;height:16px;opacity:.5;transition:opacity var(--tr);}
.sidebar-link:hover,.sidebar-link.active{background:rgba(26,58,92,.07);color:var(--primary);}
.sidebar-link.active img,.sidebar-link:hover img{opacity:1;}
.dashboard-main{flex:1;padding:32px 36px;overflow-x:auto;}

/* ── Panels ── */
.dash-panel{display:none;}
.dash-panel.active{display:block;}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;}
.panel-header h1{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--primary);font-weight:500;margin-bottom:4px;}
.panel-header p{color:var(--text-light);font-size:.85rem;}

/* ── Stats ── */
.stats-row{display:flex;gap:16px;margin-bottom:24px;}
.stat-card{background:#fff;border-radius:var(--radius-sm);border:1px solid var(--border);padding:16px 22px;display:flex;flex-direction:column;gap:4px;min-width:110px;}
.stat-num{font-size:1.8rem;font-weight:600;color:var(--primary);line-height:1;}
.stat-label{font-size:.75rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;}
.stat-green .stat-num{color:var(--success);}
.stat-red   .stat-num{color:var(--danger);}

/* ── Buttons ── */
.btn-primary{padding:10px 20px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:opacity var(--tr),transform var(--tr);white-space:nowrap;}
.btn-primary:hover{opacity:.88;transform:translateY(-1px);}
.btn-secondary{padding:10px 18px;background:#fff;color:var(--text-mid);border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:.875rem;font-weight:500;cursor:pointer;transition:background var(--tr);}
.btn-secondary:hover{background:var(--bg-page);}
.btn-danger{padding:10px 20px;background:var(--danger);color:#fff;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;transition:opacity var(--tr);}
.btn-danger:hover{opacity:.88;}

/* ── Panel message ── */
.panel-message{padding:11px 16px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:8px;border:1px solid transparent;}
.panel-message.success{background:#edf7f1;color:var(--success);border-color:#b2dfcc;}
.panel-message.error{background:#fdf2f1;color:var(--danger);border-color:#f5c6c2;}

/* ── Table ── */
.table-wrap{background:#fff;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.table-toolbar{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--bg-page);}
.table-search{flex:1;max-width:280px;padding:8px 12px;border:1.5px solid var(--border);border-radius:6px;font-family:'DM Sans',sans-serif;font-size:.85rem;outline:none;background:#fff;transition:border-color var(--tr);}
.table-search:focus{border-color:var(--primary-l);}
.table-filter{padding:8px 12px;border:1.5px solid var(--border);border-radius:6px;font-family:'DM Sans',sans-serif;font-size:.85rem;color:var(--text-mid);background:#fff;outline:none;cursor:pointer;}
.data-table{width:100%;border-collapse:collapse;font-size:.875rem;}
.data-table thead th{background:var(--bg-page);color:var(--text-light);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;padding:11px 16px;text-align:left;border-bottom:1px solid var(--border);}
.data-table tbody tr{border-bottom:1px solid var(--border);transition:background var(--tr);}
.data-table tbody tr:last-child{border-bottom:none;}
.data-table tbody tr:hover{background:#f8fafc;}
.data-table td{padding:12px 16px;color:var(--text-dark);vertical-align:middle;}
.table-loading{text-align:center;color:var(--text-light);padding:32px!important;font-size:.88rem;}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.badge-active{background:#edf7f1;color:var(--success);}
.badge-inactive{background:#fdf2f1;color:var(--danger);}
.badge-user{background:#e8f0fe;color:#2a5298;}
.badge-admin{background:#fff3e0;color:#e65100;}
.badge-success{background:#edf7f1;color:var(--success);}
.badge-fail{background:#fdf2f1;color:var(--danger);}

/* ── Action buttons in table ── */
.action-btns{display:flex;gap:6px;}
.btn-edit,.btn-del,.btn-toggle{padding:5px 12px;border-radius:5px;font-size:.78rem;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:opacity var(--tr);}
.btn-edit{background:#e8f0fe;color:#2a5298;}
.btn-del{background:#fdf2f1;color:var(--danger);}
.btn-toggle{background:var(--bg-page);color:var(--text-mid);border:1px solid var(--border);}
.btn-edit:hover,.btn-del:hover,.btn-toggle:hover{opacity:.75;}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(28,43,58,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px);}
.modal-box{background:#fff;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;padding:32px;animation:modalIn .2s ease;}
.modal-sm{max-width:400px;}
@keyframes modalIn{from{opacity:0;transform:translateY(-12px) scale(.97);}to{opacity:1;transform:none;}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.modal-header h2{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--primary);font-weight:500;}
.modal-close{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--text-light);padding:4px 8px;border-radius:4px;transition:background var(--tr);}
.modal-close:hover{background:var(--bg-page);}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);}

/* ── Form inside modal ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.modal-box .form-group{margin-bottom:18px;}
.modal-box .form-group label{font-size:.8rem;font-weight:600;color:var(--text-mid);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.req{color:var(--danger);}
.field-hint{font-size:.72rem;color:var(--text-light);font-weight:400;text-transform:none;letter-spacing:0;}
.modal-box input[type=text],
.modal-box input[type=password],
.modal-box input[type=email]{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);font-family:'DM Sans',sans-serif;font-size:.9rem;color:var(--text-dark);outline:none;transition:border-color var(--tr);}
.modal-box input:focus{border-color:var(--primary-l);box-shadow:0 0 0 3px rgba(42,82,152,.08);background:#fff;}
.ip-range-row{display:flex;align-items:center;gap:10px;}
.ip-range-row input{flex:1;}
.ip-dash{color:var(--text-light);font-size:1rem;flex-shrink:0;}
.ip-examples{margin-top:6px;font-size:.74rem;color:var(--text-light);line-height:1.5;}

@media(max-width:900px){
    .dashboard-sidebar{display:none;}
    .dashboard-main{padding:20px 16px;}
    .form-row{grid-template-columns:1fr;}
    .stats-row{flex-wrap:wrap;}
}

/* ── IP Range entries ────────────────────────────────────── */
.ip-range-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ip-range-entry input[type=text] {
    flex: 1;
    min-width: 120px;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-family: 'DM Sans', sans-serif;
    font-size: .88rem;
    outline: none;
    transition: border-color var(--tr);
}
.ip-range-entry input:focus { border-color: var(--primary-l); background: #fff; }
.btn-remove-range {
    padding: 8px 10px;
    background: #fdf2f1;
    color: var(--danger);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: .8rem;
    flex-shrink: 0;
    transition: opacity var(--tr);
}
.btn-remove-range:hover { opacity: .7; }
.btn-add-range {
    margin-top: 4px;
    padding: 7px 14px;
    background: var(--bg-input);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    color: var(--primary-l);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--tr), border-color var(--tr);
}
.btn-add-range:hover { background: #e8f0fe; border-color: var(--primary-l); }

/* IP range count badge in table */
.ip-count-badge {
    display: inline-block;
    background: #e8f0fe;
    color: #2a5298;
    font-size: .74rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}

/* ── Permissions modal ───────────────────────────────────── */
.perm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr);
    user-select: none;
}
.perm-row:hover { background: #f0f4ff; border-color: #b0c4e8; }
.perm-row input[type=checkbox] { display: none; }
.perm-row input:checked ~ .perm-info { color: var(--primary); }
.perm-row::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--bg-input);
    transition: all var(--tr);
}
.perm-row:has(input:checked)::before {
    background: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}
.perm-info { display: flex; flex-direction: column; gap: 2px; }
.perm-name { font-size: .88rem; font-weight: 600; color: var(--text-dark); }
.perm-slug { font-size: .75rem; color: var(--text-light); font-family: monospace; }

/* ── Permissions button in table ─────────────────────────── */
.btn-perm {
    padding: 5px 12px;
    border-radius: 5px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: 'DM Sans', sans-serif;
    background: #f0fdf4;
    color: var(--success);
    transition: opacity var(--tr);
}
.btn-perm:hover { opacity: .75; }