:root {
    /* 🏛️ Midnight Horizon (Dark Theme) Tokens */
    --bg-color: #0b0f19;
    --side-bg: #111827;
    --header-bg: #111827;
    --header-accent: #3b82f6;
    --card-bg: #1f2937;
    --app-item-bg: #1f2937;
    --app-item-hover: #374151;
    --text-main: #f3f4f6;
    --text-dim: #9ca3af;
    --accent-blue: #3b82f6;
    --accent-indigo: #6366f1;
    --border-soft: rgba(255, 255, 255, 0.05);
    --border-glow: rgba(59, 130, 246, 0.2);
    --font-main: 'Inter', system-ui, sans-serif;
    --font-display: 'Outfit', sans-serif;
    --radius-main: 6px;
    --modal-bg: #1a2233;
    --input-bg: #0f172a;
    --glow: transparent;
}

/* 🏛️ Pure Daylight (Light Theme) Tokens */
[data-theme="light"] {
    --bg-color: #f1f5f9;
    --side-bg: #ffffff;
    --header-bg: #ffffff;
    --header-accent: #3b82f6;
    --card-bg: #ffffff;
    --app-item-bg: #ffffff;
    --app-item-hover: #e2e8f0;
    --text-main: #0f172a;
    --text-dim: #64748b;
    --accent-blue: #2563eb;
    --accent-indigo: #4338ca;
    --border-soft: rgba(0, 0, 0, 0.05);
    --border-glow: rgba(37, 99, 235, 0.1);
    --modal-bg: #ffffff;
    --input-bg: #f8fafc;
}

/* 🏛️ Corporate Indigo (Professional Theme) Tokens */
[data-theme="corporate"] {
    --bg-color: #fdfdfd;
    --side-bg: #f8f9fa;
    --header-bg: #002c52;
    --header-accent: #ffffff;
    --card-bg: #ffffff;
    --app-item-bg: #ffffff;
    --app-item-hover: #f1f3f5;
    --text-main: #212529;
    --text-dim: #6c757d;
    --accent-blue: #0056b3;
    --accent-indigo: #002c52;
    --border-soft: #dee2e6;
    --border-glow: rgba(0, 86, 179, 0.1);
    --modal-bg: #ffffff;
    --input-bg: #ffffff;
    --glow: none;
}
[data-theme="corporate"] .portal-title { color: #ffffff; }
[data-theme="corporate"] .user-info-bar { color: #ffffff; opacity: 0.8; }
[data-theme="corporate"] .user-info-bar strong { color: #ffffff; }

/* 🏛️ Cyber-Void (Futuristic Theme) Tokens */
[data-theme="cyber"] {
    --bg-color: #050510;
    --side-bg: #08081a;
    --header-bg: rgba(8, 8, 26, 0.9);
    --header-accent: #00f3ff;
    --card-bg: rgba(13, 13, 33, 0.7);
    --app-item-bg: rgba(20, 20, 50, 0.5);
    --app-item-hover: rgba(0, 243, 255, 0.1);
    --text-main: #00f3ff;
    --text-dim: #7000ff;
    --accent-blue: #00f3ff;
    --accent-indigo: #ff00ff;
    --border-soft: rgba(0, 243, 255, 0.2);
    --border-glow: rgba(0, 243, 255, 0.5);
    --modal-bg: #0d0d21;
    --input-bg: #050510;
    --glow: 0 0 15px rgba(0, 243, 255, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg-color); font-family: var(--font-main); color: var(--text-main); overflow-x: hidden; min-height: 100vh; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

[data-theme="cyber"] body::before {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999; background-size: 100% 2px, 3px 100%; pointer-events: none;
}

/* 🍱 Primary Application Layout */
.portal-container { width: 100%; display: flex; flex-direction: column; }

.top-header { 
    background-color: var(--header-bg); 
    padding: 0 24px; 
    min-height: 60px; 
    display: flex; 
    align-items: center; 
    border-bottom: 1px solid var(--border-soft); 
    position: sticky; 
    top: 0; 
    z-index: 1000;
    backdrop-filter: blur(12px);
    transition: all 0.3s;
    box-shadow: var(--glow);
}

.header-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo-area { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 36px; width: auto; object-fit: contain; filter: drop-shadow(0 0 8px var(--border-glow)); transition: filter 0.3s; }
.portal-title { font-family: var(--font-display); font-size: 20px; color: var(--text-main); font-weight: 800; letter-spacing: -0.5px; text-transform: lowercase; text-shadow: var(--glow); }

.action-area { display: flex; gap: 14px; align-items: center; }
.user-info-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.user-info-bar strong { color: var(--accent-blue); text-shadow: var(--glow); }

.search-container { position: relative; width: 280px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 14px; }
#search-input { 
    width: 100%; 
    background: var(--input-bg); 
    border: 1px solid var(--border-soft); 
    padding: 8px 12px 8px 36px; 
    border-radius: var(--radius-main); 
    color: var(--text-main); 
    font-size: 12px; 
    transition: all 0.2s;
    box-shadow: inset var(--glow);
}
#search-input:focus { background: var(--input-bg); border-color: var(--accent-blue); outline: none; box-shadow: 0 0 15px var(--border-glow); }

.btn-top-admin { 
    background: var(--input-bg); 
    color: var(--text-main); 
    border: 1px solid var(--border-soft); 
    padding: 8px 16px; 
    border-radius: var(--radius-main); 
    font-size: 13px; 
    font-weight: 700; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    transition: all 0.2s; 
    letter-spacing: 0.4px; 
}
.btn-top-admin i { font-size: 18px; margin-top: -1px; }
.btn-top-admin:hover { border-color: var(--accent-blue); filter: brightness(1.2); box-shadow: 0 0 20px var(--border-glow); }

.btn-add-new-app { background: var(--accent-blue); color: #fff; border: none; padding: 8px 18px; border-radius: var(--radius-main); font-size: 13px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
[data-theme="cyber"] .btn-add-new-app { color: #000; }
.btn-add-new-app:hover { filter: brightness(1.2); box-shadow: 0 0 25px var(--border-glow); transform: scale(1.02); }

.btn-theme-toggle, .btn-logout-small { background: var(--input-bg); color: var(--text-dim); width: 34px; height: 34px; border: 1px solid var(--border-soft); border-radius: var(--radius-main); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.btn-theme-toggle:hover { color: var(--accent-blue); border-color: var(--accent-blue); box-shadow: 0 0 15px var(--border-glow); }
.btn-logout-small:hover { border-color: #ef4444; color: #ef4444; box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); }

/* 🏙️ Application Board Architecture */
.portal-layout { display: flex; width: 100%; min-height: calc(100vh - 60px); }
.main-content { flex: 1; padding: 40px; overflow-y: auto; background: var(--bg-color); transition: background-color 0.4s; }
.sidebar-column { width: 340px; background: var(--side-bg); padding: 30px; border-left: 1px solid var(--border-soft); transition: all 0.4s; }

.category-group { width: 100%; margin-bottom: 48px; }
.category-header { 
    font-family: var(--font-display); 
    font-size: 14px; 
    font-weight: 900; 
    color: var(--text-main); 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    margin-bottom: 24px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    position: relative; 
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-soft);
    text-shadow: var(--glow);
}
.category-header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 3px; background: var(--accent-blue); box-shadow: 0 0 10px var(--border-glow); }

.app-grid { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.app-grid-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; width: 100%; }

.app-item { 
    position: relative; 
    background: var(--app-item-bg); 
    min-height: 58px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 8px 12px; 
    border-radius: var(--radius-main); 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    border: 1px solid var(--border-soft); 
    text-align: center;
    backdrop-filter: blur(4px);
}
.app-item:hover { background-color: var(--app-item-hover); border-color: var(--accent-blue); transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.1), 0 0 15px var(--border-glow); }

.item-controls { position: absolute; top: 4px; right: 4px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.2s; }
.app-item:hover .item-controls { opacity: 1; }
.item-controls i { font-size: 11px; color: var(--text-dim); padding: 4px; border-radius: 3px; cursor: pointer; background: rgba(0,0,0,0.2); }
.item-controls i:hover { color: #fff; background: var(--accent-blue); box-shadow: 0 0 10px var(--accent-blue); }

.app-icon { font-size: 22px; margin-bottom: 4px; color: var(--text-main); transition: transform 0.3s; text-shadow: var(--glow); }
.app-item:hover .app-icon { transform: scale(1.15) rotate(5deg); }
.app-icon-img { height: 22px; width: auto; max-width: 80%; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 0 5px var(--border-glow)); }
.app-label { font-size: 10px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.1; transition: color 0.2s; }
.app-item:hover .app-label { color: var(--text-main); }

.sidebar-header { font-family: var(--font-display); font-weight: 900; font-size: 12px; letter-spacing: 2px; color: var(--text-main); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.sidebar-dropzone { display: flex; flex-direction: column; gap: 12px; min-height: 500px; padding: 20px; border: 2px dashed var(--border-soft); border-radius: 12px; transition: all 0.2s; }
.sidebar-dropzone:hover { border-color: var(--accent-blue); background: rgba(0, 243, 255, 0.03); }

/* 🛡️ Administrative Governance UI */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.85); backdrop-filter: blur(15px); display: none; justify-content: center; align-items: center; z-index: 2000; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal-card { background: var(--modal-bg); width: 100%; max-width: 480px; padding: 36px; border-radius: 12px; border: 1px solid var(--border-soft); box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px var(--border-glow); color: var(--text-main); position: relative; overflow: hidden; }
.modal-card::before { content: ''; position: absolute; top:0; left:0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-indigo)); }

.modal-card h2 { margin-bottom: 24px; font-size: 20px; color: var(--text-main); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.5px; text-shadow: var(--glow); }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 10px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px; font-weight: 900; letter-spacing: 1.5px; }
.form-group input, .form-group select { 
    width: 100%; 
    background: var(--input-bg); 
    border: 1px solid var(--border-soft); 
    padding: 12px; 
    color: var(--text-main); 
    border-radius: var(--radius-main); 
    font-size: 13px;
    transition: all 0.2s;
}
.form-group input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 15px var(--border-glow); }

.btn { padding: 12px 20px; border-radius: var(--radius-main); cursor: pointer; border: none; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; }
.btn-primary { background: var(--accent-blue); color: #fff; font-weight: 900; }
[data-theme="cyber"] .btn-primary { color: #000; }
[data-theme="corporate"] .btn-primary { background: #002c52; }

.btn-secondary { background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-soft); }
.btn-danger { background: #ef4444; color: #fff; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.2); box-shadow: 0 5px 20px var(--border-glow); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--text-main); margin-top: 10px; }
.admin-table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--border-soft); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.admin-table tr:hover { background: rgba(0, 243, 255, 0.03); }

.status-badge { padding: 4px 10px; border-radius: 99px; font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.status-active { background: rgba(0, 243, 255, 0.1); color: var(--accent-blue); border: 1px solid var(--border-soft); }
[data-theme="cyber"] .status-active { color: #00f3ff; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--accent-indigo); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* 🖼️ High-Fidelity Icon Gallery Architecture */
.gallery-card { max-width: 850px; max-height: 85vh; overflow-y: auto; background: var(--modal-bg); }
.gallery-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; border-bottom: 1px solid var(--border-soft); padding-bottom: 20px; }
.gallery-brand h2 { margin-bottom: 4px; }
.gallery-brand p { font-size: 12px; color: var(--text-dim); }

.gallery-controls-integrated { display: flex; gap: 16px; align-items: center; }
.gallery-search-compact { position: relative; width: 220px; }
.gallery-search-compact i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); }
.gallery-search-compact input { width: 100%; background: var(--input-bg); border: 1px solid var(--border-soft); padding: 8px 12px 8px 32px; border-radius: 4px; color: var(--text-main); font-size: 12px; }

.gallery-color-integrated { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-dim); }
.gallery-color-integrated input { padding: 0; width: 30px; height: 30px; border: none; background: none; cursor: pointer; }

.icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 12px; padding: 10px 2px; }
.icon-box { aspect-ratio: 1; background: var(--input-bg); display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border-soft); transition: all 0.2s; color: var(--text-main); }
.icon-box:hover { background: var(--app-item-hover); border-color: var(--accent-blue); transform: scale(1.1); box-shadow: 0 0 15px var(--border-glow); }

.close-gallery-btn { background: none; border: none; font-size: 24px; color: var(--text-dim); cursor: pointer; transition: color 0.2s; }
.close-gallery-btn:hover { color: #ef4444; }


/* 🏛️ Information Gateway */
.info-floating-btn { 
    position: fixed; 
    bottom: 24px; 
    right: 24px; 
    z-index: 3000; 
    background: var(--input-bg); 
    color: var(--text-dim); 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 22px; 
    cursor: pointer; 
    border: 1px solid var(--border-soft); 
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.info-floating-btn:hover { 
    color: var(--accent-blue); 
    border-color: var(--accent-blue); 
    transform: scale(1.1); 
    box-shadow: 0 0 15px var(--border-glow);
}

.decoration-glow, .decoration-glow-2 { display: none; }