/* --- VARIABLES --- */
:root {
    --bg-body: #f4f6f9; --bg-panel: #ffffff; --text-main: #333333; --text-muted: #777777;
    --border-color: #e0e0e0; --accent-color: #000000; --hover-bg: #f8f9fa; --active-bg: #f59f00;
    --icon-color: #000000; --table-header-bg: #f8f9fa; --input-bg: #ffffff; --input-border: #dddddd;
    --auth-bg: #eef2f5;
    --link-color: #000000;
    --row-selected: #e3f2fd; /* Light Blue for selected row */
}

[data-theme="dark"] {
    --bg-body: #121212; --bg-panel: #1e1e1e; --text-main: #e0e0e0; --text-muted: #aaaaaa;
    --border-color: #333333; --accent-color: #ffffff; --hover-bg: #2c2c2c; --active-bg: #fc7c00;
    --icon-color: #ffffff; --table-header-bg: #252525; --input-bg: #2d2d2d; --input-border: #444444;
    --auth-bg: #0f0f0f;
    --link-color: #ffffff;
    --row-selected: #3a3a3a; /* Dark Grey for selected row */
}

/* --- RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: background-color 0.3s, color 0.3s; }
body { background-color: var(--bg-body); color: var(--text-main); overflow-x: hidden; min-height: 100vh; }

/* --- LINKS --- */
a { text-decoration: none; color: var(--link-color); cursor: pointer; }
a:hover { text-decoration: underline; }
.auth-card a { font-weight: 500; font-size: 0.9rem; color: var(--link-color); }
[data-theme="dark"] .auth-card a { color: #ffffff !important; }

/* --- LOADING SPINNER --- */
#spinload { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.8); color:#fff; padding:20px 40px; border-radius:8px; z-index:9999; font-weight:bold; }

/* --- AUTH LAYER --- */
#auth-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--auth-bg); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.auth-card { background-color: var(--bg-panel); width: 100%; max-width: 400px; padding: 40px; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 10px 25px rgba(0,0,0,0.05); text-align: center; }
.auth-logo { font-size: 2rem; margin-bottom: 10px; color: var(--text-main); }

/* --- DASHBOARD LAYER --- */
#dashboard-layer { display: none; height: 100vh; width: 100%; display: flex; }

/* Mobile Header */
.mobile-header { display: none; background: var(--bg-panel); padding: 15px 20px; width: 100%; border-bottom: 1px solid var(--border-color); align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; z-index: 999; }
.hamburger-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-main); }

/* --- SIDEBAR (FORCED DARK) --- */
.sidebar { 
    width: 260px; background-color: #1e1e1e; border-right: 1px solid #333333; 
    display: flex; flex-direction: column; padding-top: 20px; flex-shrink: 0; 
    transition: transform 0.3s ease; z-index: 1000; 
}
.sidebar-header { padding: 0 25px 30px 25px; font-size: 1.2rem; font-weight: 700; color: #e0e0e0; }
.nav-link { display: flex; align-items: center; padding: 15px 25px; text-decoration: none; color: #aaaaaa; border-left: 4px solid transparent; cursor: pointer; user-select: none; }
.nav-link:hover { background-color: #2c2c2c; color: #ffffff; text-decoration: none; }

/* FIXED: Restored Orange Active State */
.nav-link.active { background-color: #f59f00; border-left-color: #ffffff; color: #ffffff; font-weight: 600; }

.nav-link i.nav-icon { width: 25px; font-size: 1.1rem; margin-right: 15px; color: #ffffff; }

/* Specific Hover Effect for Notifications */
/***
#nav-notifications:hover i { color: #f59f00; transition: color 0.3s; }
*****/

/* Submenu */
.submenu { display: none; background-color: #121212; overflow: hidden; animation: slideDown 0.3s ease-out; }
.submenu .nav-link { padding-left: 65px; font-size: 0.95rem; }
.chevron { margin-left: auto; font-size: 0.8rem; transition: transform 0.3s; color: #aaaaaa; }
.chevron.rotate { transform: rotate(180deg); }

/* --- TABLES --- */
/* Mouseover & Selection */
tbody tr:hover td { background-color: var(--hover-bg); transition: background-color 0.1s; }
.row-selected td { background-color: var(--row-selected) !important; }

/* --- MAIN CONTENT --- */
.main-content { flex: 1; padding: 40px; overflow-y: auto; position: relative; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 998; }

/* Components */
.card { background: var(--bg-panel); border-radius: 12px; padding: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid var(--border-color); margin-bottom: 20px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-icon-bg { background-color: var(--bg-body); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.metric-value { font-size: 2rem; font-weight: bold; color: var(--text-main); margin-bottom: 10px; }
.status-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; }
.status-good { background-color: #0ca678; color: #ffffff; }
.status-warn { background-color: #bf4551; color: #ffffff; }
.status-info { background-color: #17a2b8; color: #ffffff; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #000; }
[data-theme="dark"] input:checked + .slider { background-color: #ffffff; }
input:checked + .slider:before { transform: translateX(24px); }
[data-theme="dark"] .slider:before { background-color: #000; }

/* Forms */
.form-input { width: 100%; padding: 12px 15px; border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-main); border-radius: 6px; margin-bottom: 15px; }
.btn-black { background-color: var(--accent-color); color: var(--bg-panel); border: none; padding: 12px 25px; border-radius: 6px; cursor: pointer; font-weight: 600; width: 100%; }

/* Responsive */
@media (max-width: 768px) {
    #dashboard-layer { flex-direction: column; }
    .mobile-header { display: flex; }
    .sidebar { position: fixed; top: 0; left: 0; height: 100%; transform: translateX(-100%); box-shadow: 2px 0 10px rgba(0,0,0,0.5); }
    .sidebar.active { transform: translateX(0); }
    .overlay.active { display: block; }
    .main-content { padding: 20px; padding-top: 80px; }
    .status-grid { grid-template-columns: 1fr; }
}

/* --- UPDATED MODAL BOX FOR SCROLLING --- */
.custom-modal-box {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 30px;
    width: 95%;          /* Changed from 100% for better mobile spacing */
    max-width: 450px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    animation: fadeIn 0.2s ease-out;

    /* Add these properties for vertical scroll */
    max-height: 90vh;    /* Prevents modal from exceeding 90% of screen height */
    overflow-y: auto;    /* Enables vertical scrolling if content is too long */
    position: relative;
}

/* Ensure the overlay allows the box to be centered even when small */
.custom-modal-overlay {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;       /* Adds a safety buffer for small screens */
}

/* Icon Circle */
.modal-icon-circle {
	width: 60px;
	height: 60px;
	background: #2c2c2c;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px auto;
}
.modal-icon-circle i {
	font-size: 1.5rem;
	color: #ffffff;
}

.icon-success i { color: #2fb344; }
.icon-error i { color: #d63939; }

.custom-modal-box h3 {
	margin: 0 0 10px 0;
	color: #fff;
	font-size: 1.2rem;
}

.custom-modal-box p {
	color: #aaa;
	font-size: 0.9rem;
	margin-bottom: 20px;
	line-height: 1.5;
}

/* Form Elements */
.form-group {
	text-align: left;
	margin-bottom: 15px;
}
.form-label {
	display: block;
	color: #ccc;
	font-size: 0.85rem;
	margin-bottom: 5px;
}
.modal-input, .modal-select {
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	border: 1px solid #444;
	background: #2b2b2b;
	color: #fff;
	font-size: 0.95rem;
	outline: none;
	box-sizing: border-box;
}
.modal-input:focus, .modal-select:focus {
	border-color: #666;
}
.modal-input[readonly] {
	background: #222;
	color: #777;
	cursor: not-allowed;
}

/* Buttons */
.modal-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 25px;
}

.btn-modal-primary {
	flex: 1;
	padding: 12px;
	background: #ffffff;
	color: #000;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}

.btn-modal-primary:hover {
    border-color: #666;
}

.btn-modal-secondary {
	flex: 1;
	padding: 12px;
	background: transparent;
	border: 1px solid #444;
	color: #aaa;
	border-radius: 6px;
	cursor: pointer;
}
.btn-modal-secondary:hover {
	background: #333;
	color: #fff;
    border-color: #666;
}

/* Specific styling for Retrieve button to distinguish it from Manage */
#btnRetrieveAuth {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--text-main);
}

#btnRetrieveAuth:hover:not(:disabled) {
    background-color: var(--hover-bg);
}

/* Modal specific: Ensure the Retrieve modal is scrollable for mobile */
#retrieveAuthModal .custom-modal-box {
    max-height: 90vh;
    overflow-y: auto;
}

/* Styling for the enabled state */
/* Ensure the Retrieve button matches the Manage button style when active  */

/* Ensure Retrieve button matches active styling */
/****
#btnRetrieveAuth:not(:disabled) {
    opacity: 1 !important;
    cursor: pointer !important;
    border: 1px solid var(--active-bg);
    color: var(--text-main);
    pointer-events: auto !important;
}
********/
/* Ensure Retrieve button matches Manage Selected (Solid background, no border) */
#btnRetrieveAuth:not(:disabled) {
    background-color: var(--accent-color) !important;
    color: var(--bg-panel) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    border: none !important;
    pointer-events: auto !important;
}

#btnRetrieveAuth:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* Style for Download button in modal */
.btn-modal-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Styling for the small copy buttons next to inputs */
.btn-copy {
    background: #2b2b2b;
    border: 1px solid #444;
    color: #aaaaaa;
    padding: 0 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-copy:hover {
    background: #444;
    color: #ffffff;
    border-color: #666;
}

.btn-copy:active {
    background: #f59f00;
    color: #ffffff;
}

/* Maintain the disabled state for all black buttons */
.btn-black:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Styling for the Download button in the modal */
.btn-download {
    background-color: #2b2b2b;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.btn-download:hover {
    background: #444;
    color: #ffffff;
    border-color: #666;
}
/* Tooltip or feedback class */
.copy-success {
    background: #0ca678 !important;
    color: white !important;
    border-color: #0ca678 !important;
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- DATATABLES THEME OVERRIDES --- */
.dataTables_wrapper {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #ccc;
}
/* Length & Filter inputs */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: #2b2b2b !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
}
/* Remove default white text shadows if any */
table.dataTable tbody tr {
    background-color: transparent !important;
}
/* Pagination Buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #aaa !important;
    border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
}
/* Info text */
.dataTables_wrapper .dataTables_info, 
.dataTables_wrapper .dataTables_length label, 
.dataTables_wrapper .dataTables_filter label {
    color: #777 !important;
}
/* Header Sorting */
table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid #444 !important;
}
table.dataTable.no-footer {
    border-bottom: 1px solid #444 !important;
}
/* --- Fix for DataTables Dropdown Options --- */
.dataTables_wrapper .dataTables_length select option {
    background-color: #2b2b2b !important;
    color: #fff !important;
}

/* Optional: Ensure the arrow icon remains visible if global styles hid it */
.dataTables_wrapper .dataTables_length select {
    background-image: none; /* specific resets may be needed depending on browser */
    appearance: auto !important; /* Forces the default dropdown arrow back if it was lost */
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
}