/* Container Pembagi Layout */
.app-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Wrapper Sidebar */
.sidebar-wrapper {
    width: 80px;
    flex-shrink: 0;
    background-color: var(--color-bg);
    height: 100vh;
    position: relative;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0 24px 0;
    border-right: 1px solid var(--color-border-subtle);
}

/* Wrapper Konten Utama */
.main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

/* Header / Top Navigation */
.top-header {
    height: 80px;
    flex-shrink: 0;
    padding: 0 16px 0 8px;
    display: flex;
    align-items: center;
    background-color: var(--color-bg);
    z-index: 40;
    gap: 16px;
}

/* Search Bar */
.search-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background-color: var(--color-search-bg);
    border-radius: var(--radius-pill);
    height: 48px;
    padding: 0 16px;
    transition: background-color 0.2s;
}

.search-container:hover, .search-container:focus-within {
    background-color: #e1e1e1;
}

.search-icon {
    color: var(--color-text-secondary);
    font-size: 20px !important;
}

.search-container input {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    outline: none;
    font-family: inherit;
    font-size: 16px;
    margin-left: 12px;
    color: var(--color-text);
}

.search-container input::placeholder {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.search-action-icon {
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    font-size: 20px !important;
}

.search-action-icon:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Ikon Navigasi Kanan */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
}

.header-profile-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-pill);
    transition: background-color 0.2s;
}

.header-profile-wrap:hover {
    background-color: var(--color-surface-hover);
}

.header-profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fce8eb;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}

.header-profile-chevron {
    color: var(--color-text-secondary);
    margin-left: 4px;
    font-size: 18px !important;
}

/* Area Konten Utama */
.content-area {
    flex-grow: 1;
    padding: 0 24px 32px 24px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Demo Style untuk Tampilan Konten (Page Headers) */
.page-header {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* Reset & Variabel lokal untuk sidebar */
.sidebar-menu-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Ikon Logo */
.sidebar-logo {
    color: var(--color-primary);
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    margin-bottom: 16px;
}

.sidebar-logo:hover {
    background-color: var(--color-surface-hover);
}

/* List Menu Utama */
.sidebar-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
}

.sidebar-nav li {
    position: relative;
}

.sidebar-nav li a {
    text-decoration: none;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.sidebar-nav li a:hover {
    background-color: var(--color-surface-hover);
}

.sidebar-nav li a.active,
.sidebar-bottom li a.active {
    color: var(--color-text);
    background-color: transparent;
}

.sidebar-nav li a.active svg,
.sidebar-bottom li a.active svg {
    fill: currentColor;
    stroke-width: 2.5px;
}

/* Pengaturan Menu Bawah */
.sidebar-bottom {
    margin-top: auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.sidebar-bottom li {
    position: relative;
}

.sidebar-bottom li a {
    text-decoration: none;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.sidebar-bottom li a:hover {
    background-color: var(--color-surface-hover);
}

/* Tooltip Teks Melayang */
.sidebar-nav li::after,
.sidebar-bottom li::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-text);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
    pointer-events: none;
    z-index: 100;
}

.sidebar-nav li:hover::after,
.sidebar-bottom li:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(4px);
}

/* Material Symbols Override for Sidebar */
.sidebar-nav .material-symbols-outlined,
.sidebar-bottom .material-symbols-outlined {
    font-size: 26px !important;
}

.sidebar-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}



/* Extracted Inline Styles */
.lay-style-928e00 { color: var(--color-primary); }
.lay-style-3523a2 { display: none; text-align: center; padding: 48px 0; color: var(--color-text-secondary); }
.lay-style-de2ad9 { font-size: 48px; margin-bottom: 12px; display: block; }
.lay-style-b8b475 { font-size: 16px; font-weight: 600; }
.lay-style-766745 { font-size: 13px; }


/* Extracted Inline Styles */
.lay-style-0e3b08 { font-size: 26px; }
.lay-style-0493b1 { margin: 0; font-size: 18px; }
.lay-style-9b3f82 { margin: 2px 0 0; font-size: 13px; }
.lay-style-881f2e { padding: 8px; }
.lay-style-d85c4e { position: relative; }
.lay-style-6758aa { position: absolute; left: 14px; top: 12px; color: var(--color-text-secondary); font-size: 20px; }
.lay-style-64e917 { padding-left: 44px; }
.lay-style-a2b558 { padding: 24px; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-height: 50vh; }
.lay-style-1bb4de { font-size: 12px; font-weight: 600; }
.lay-style-620f14 { font-size: 16px; vertical-align: middle; }
.lay-style-b6986b { animation: spin 1s linear infinite; vertical-align: middle; }
.lay-style-d33fbc { color: #047857; vertical-align: middle; }
.lay-style-508a21 { grid-column: 1/-1; padding: 32px; text-align: center; color: #64748b; font-weight: 600; font-family: inherit; }
.lay-style-dfe027 { height: 110px; background: #f8fafc; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lay-style-7d1fae { width: 100%; height: 100%; object-fit: cover; }
.lay-style-92d4f0 { padding: 10px; font-size: 12px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-style-cfa36c { padding: 0 10px 10px; font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-style-1c20bb { display: flex; align-items: center; gap: 12px; }
.lay-style-be8706 { width: 100%; height: 100%; object-fit: cover; }
.lay-style-956c6e { color: #94a3b8; font-size: 26px; }
.lay-style-b86f4d { font-weight: 800; font-size: 13px; color: #0f172a; font-family: inherit; }
.lay-style-a29441 { font-size: 11px; color: #64748b; font-weight: 600; font-family: inherit; }
.lay-style-80916c { display: inline-flex; background: #f1f5f9; padding: 4px; border-radius: 12px; }
.lay-style-beab58 { font-size: 16px; }
.lay-style-19fae4 { display: block; }
.lay-style-913c93 { display: none; background: #f8fafc; padding: 14px; border-radius: 12px; }
.lay-style-967fb5 { font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 10px; font-family: inherit; }
.lay-style-38f681 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lay-style-1c92cc { color: #f62440; font-size: 18px; }
.lay-style-224b51 { display: none; }
.lay-style-1b49ff { display: none; margin-top: 10px; font-size: 12px; font-weight: 700; text-align: center; font-family: inherit; }