@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap";
:root{--bg-main:#f8fafc;--bg-sidebar:#ea9b00;--bg-sidebar-gradient:linear-gradient(160deg, #fbc62b 0%, #e88604 100%);--bg-sidebar-hover:#0f172a14;--bg-sidebar-active:#0f172a26;--text-sidebar:#0f172a;--text-sidebar-active:#0f172a;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--border-color:#e2e8f0;--accent-color:#ea9b00;--status-pending:#ea9b00;--status-pending-bg:#fef3c7;--status-approved:#10b981;--status-approved-bg:#d1fae5;--status-rejected:#ef4444;--status-rejected-bg:#fee2e2;--sidebar-width:260px;--sidebar-collapsed-width:78px;--transition-speed:.25s}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);min-height:100vh;font-family:Inter,sans-serif;display:flex}h1,h2,h3,h4,.serif-heading{color:#0f172a;font-family:Playfair Display,serif}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.layout-container{background-color:var(--bg-main);width:100%;min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar-gradient);z-index:1000;transition:width var(--transition-speed) cubic-bezier(.4, 0, .2, 1), left var(--transition-speed) cubic-bezier(.4, 0, .2, 1);border-right:1px solid #0f172a14;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;overflow-y:auto}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:0 0}.sidebar::-webkit-scrollbar-thumb{background-color:#0f172a26;border-radius:4px}.sidebar::-webkit-scrollbar-thumb:hover{background-color:#0f172a40}.main-content{margin-left:var(--sidebar-width);min-width:0;transition:margin-left var(--transition-speed) cubic-bezier(.4, 0, .2, 1);flex-direction:column;flex:1;display:flex}.topbar{border-bottom:1px solid var(--border-color);background:#fff;justify-content:space-between;align-items:center;height:70px;padding:0 40px;display:flex;box-shadow:0 1px 2px #0f172a08}.page-content{flex-direction:column;gap:24px;padding:40px;display:flex}.logo-container{transition:padding var(--transition-speed) ease, justify-content var(--transition-speed) ease;border-bottom:1px solid #0f172a14;align-items:center;gap:12px;margin-bottom:20px;padding:24px;display:flex}.logo-icon-box{width:40px;height:40px;transition:width var(--transition-speed) ease, height var(--transition-speed) ease;background:0 0;flex-shrink:0;justify-content:center;align-items:center;display:flex}.logo-text-col{white-space:nowrap;flex-direction:column;transition:opacity .15s;display:flex}.logo-main{color:#0f172a;letter-spacing:-.02em;font-family:Inter,sans-serif;font-size:1.2rem;font-weight:700;line-height:1.1}.logo-sub{color:#475569;letter-spacing:.1em;text-transform:uppercase;font-family:Inter,sans-serif;font-size:.65rem;font-weight:600}.nav-links{flex-direction:column;flex:1;display:flex}.nav-section-title{color:#475569;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;padding:20px 24px 8px;font-size:.7rem;font-weight:600;transition:opacity .15s}.nav-item{color:#334155;transition:all var(--transition-speed) ease;white-space:nowrap;align-items:center;gap:14px;padding:12px 24px;font-size:.85rem;font-weight:500;text-decoration:none;display:flex}.nav-item svg{flex-shrink:0}.nav-item span{transition:opacity .15s}.nav-item:hover{color:#0f172a;background-color:var(--bg-sidebar-hover);padding-left:28px}.nav-item.active{color:#0f172a;background-color:var(--bg-sidebar-active);border-left:3px solid #0f172a;padding-left:24px;font-weight:600}.create-story-box{transition:padding var(--transition-speed) ease;padding:24px}.create-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#0f172a;border:none;border-radius:8px;width:100%;padding:12px;font-size:.85rem;font-weight:600;transition:all .2s;overflow:hidden;box-shadow:0 4px 12px #0f172a26}.create-btn:hover{background:#1e293b;transform:translateY(-1px);box-shadow:0 6px 16px #0f172a40}.sidebar-footer{transition:padding var(--transition-speed) ease;border-top:1px solid #0f172a14;flex-direction:column;gap:16px;padding:24px;display:flex}.logout-btn{color:#dc2626;cursor:pointer;transition:all var(--transition-speed) ease;white-space:nowrap;background:#dc262614;border:none;border-radius:8px;justify-content:center;align-items:center;gap:12px;width:100%;padding:10px 16px;font-size:.85rem;font-weight:600;display:flex}.logout-btn:hover{color:#fff;background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 12px #dc262633}.layout-container.sidebar-collapsed{--sidebar-width:var(--sidebar-collapsed-width)}.layout-container.sidebar-collapsed .sidebar .logo-text-col,.layout-container.sidebar-collapsed .sidebar .nav-item span,.layout-container.sidebar-collapsed .sidebar .nav-section-title,.layout-container.sidebar-collapsed .sidebar .sidebar-footer span,.layout-container.sidebar-collapsed .sidebar .create-story-box{opacity:0;pointer-events:none;width:0;height:0;margin:0;padding:0;overflow:hidden}.layout-container.sidebar-collapsed .sidebar .logo-container{justify-content:center;padding:20px 0}.layout-container.sidebar-collapsed .sidebar .logo-icon-box{width:44px;height:44px}.layout-container.sidebar-collapsed .sidebar .nav-item{justify-content:center;padding:14px 0}.layout-container.sidebar-collapsed .sidebar .nav-item.active{background-color:var(--bg-sidebar-active);border-left:3px solid #0f172a}.layout-container.sidebar-collapsed .sidebar .sidebar-footer{padding:16px 8px}.layout-container.sidebar-collapsed .sidebar .logout-btn{justify-content:center;padding:10px 0}.card{border:1px solid var(--border-color);background:#fff;border-radius:12px;padding:24px;transition:all .2s;box-shadow:0 1px 3px #0f172a05,0 1px 2px #0f172a03}.card:hover{box-shadow:0 4px 20px #0f172a0d}.topbar-left{align-items:center;gap:16px;display:flex}.menu-toggle-btn{cursor:pointer;color:var(--text-secondary);background:#f1f5f9;border:none;border-radius:8px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.menu-toggle-btn:hover{color:var(--text-primary);background:#e2e8f0;transform:scale(1.05)}.topbar-title{color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:700}.topbar-links{gap:24px;font-size:.9rem;font-weight:600;display:flex}.active-link{color:#ea9b00}.inactive-link{color:#9ca3af}.topbar-right{align-items:center;gap:24px;display:flex}.search-container{background:#f1f5f9;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;width:240px;padding:8px 16px;transition:all .2s;display:flex}.search-container:focus-within{background:#fff;border-color:#cbd5e1;box-shadow:0 2px 8px #0f172a0a}.search-input{width:100%;color:var(--text-primary);background:0 0;border:none;outline:none;font-size:.85rem}.topbar-icons{gap:24px;display:flex}.profile-section{border-left:1px solid #e2e8f0;align-items:center;gap:12px;padding-left:24px;display:flex}.profile-text{flex-direction:column;align-items:flex-end;display:flex}.profile-name{color:var(--text-primary);font-size:.85rem;font-weight:600}.profile-role{color:var(--text-secondary);letter-spacing:.05em;font-size:.65rem}.profile-avatar{background:linear-gradient(135deg,#f59e0b 0%,#ea9b00 100%);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 4px 10px #ea9b0033}.close-sidebar-btn{cursor:pointer;color:#0f172a;background:#0f172a14;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:background .2s;display:none}.close-sidebar-btn:hover{background:#0f172a26}.sidebar-overlay{z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all var(--transition-speed) ease;background:#0f172a4d;position:fixed;inset:0}@media (max-width:1024px){.sidebar{width:var(--sidebar-collapsed-width)}.sidebar .logo-text-col,.sidebar .nav-item span,.sidebar .nav-section-title,.sidebar .sidebar-footer span,.sidebar .create-story-box{display:none!important}.sidebar .logo-container{justify-content:center;padding:20px 0}.sidebar .logo-icon-box{width:44px;height:44px}.sidebar .nav-item{justify-content:center;padding:14px 0}.main-content{margin-left:var(--sidebar-collapsed-width)}.topbar{padding:0 24px}.mobile-hide{display:none!important}}@media (max-width:768px){.sidebar{z-index:2000;width:280px;transition:left var(--transition-speed) cubic-bezier(.4, 0, .2, 1);flex-direction:column;position:fixed;top:0;bottom:0;left:-100%;box-shadow:10px 0 30px #0f172a26;background:var(--bg-sidebar-gradient)!important;display:flex!important}.sidebar.active{left:0}.sidebar .logo-container{justify-content:flex-start;padding:24px;display:flex!important}.sidebar .logo-icon-box{width:40px;height:40px}.sidebar .logo-text-col,.sidebar .nav-item,.sidebar .nav-item span,.sidebar .nav-section-title,.sidebar .sidebar-footer{display:flex!important}.sidebar .nav-item{justify-content:flex-start;padding:12px 24px}.close-sidebar-btn{display:flex;position:absolute;top:25px;right:15px}.main-content{margin-left:0!important}.topbar{height:60px;padding:0 16px}.topbar-title{white-space:nowrap;text-overflow:ellipsis;max-width:160px;font-size:1.1rem;overflow:hidden}.page-content{padding:24px 16px}.table-container{-webkit-overflow-scrolling:touch;border:1px solid var(--border-color);border-radius:8px;margin-bottom:1rem;overflow-x:auto}}