/* 
 * HUNGRY SHARK EVOLUTION MOD APK - DASHBOARD THEME
 * Legal & Educational Purpose Only
 */

:root {
    --bg-body: #F3F4F6;
    --bg-surface: #FFFFFF;
    --primary: #0284C7; /* Tech Blue */
    --primary-hover: #0369A1;
    --secondary: #10B981; /* Success Green */
    --text-main: #1F2937;
    --text-muted: #6B7280;
    --border: #E5E7EB;
    --sidebar-width: 260px;
    --header-height: 60px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
}

/* LAYOUT GRID */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    left: 0;
    top: 0;
    transition: transform 0.3s ease;
    z-index: 50;
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.brand-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-menu {
    list-style: none;
    padding: 1rem 0;
}

.nav-item {
    margin-bottom: 0.25rem;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.nav-link:hover, .nav-link.active {
    background-color: #F0F9FF;
    color: var(--primary);
    border-left-color: var(--primary);
}

.nav-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-color: currentColor;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* CSS Icons using masks would require SVGs or external files. 
   Simplifying to CSS shapes or Unicode for "Minimal icons using CSS only" requirement 
   Or just simple SVG background images encoded in CSS if possible, but Unicode is safer for pure CSS.
   Let's use simple heavy-dot or similar markers for now to keep it pure CSS/HTML specific.
*/
.nav-link::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
    margin-right: 12px;
    opacity: 0.5;
}
.nav-link.active::before {
    opacity: 1;
}


.legal-section {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.legal-section .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 1.5rem;
}

/* MAIN CONTENT */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 2rem;
    width: calc(100% - var(--sidebar-width));
}

/* CARDS & PANELS */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.panel {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform 0.2s;
}

.panel:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary);
}

/* TYPOGRAPHY COMPONENTS */
h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-main);
}

p {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #E0F2FE;
    color: var(--primary);
}

.btn {
    display: inline-block;
    background-color: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--primary-hover);
}

.btn-full {
    width: 100%;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--border);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Quick Info Table */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.info-table td {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.info-table tr:last-child td {
    border-bottom: none;
}

.info-label {
    font-weight: 500;
    color: var(--text-main);
}

.info-value {
    text-align: right;
    color: var(--text-muted);
}

/* MOBILE RESPONSIVE */
.menu-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
        padding-top: 5rem; /* Space for header/toggle */
    }

    .menu-toggle {
        display: block;
    }
}