*{box-sizing:border-box}

html,body{
margin:0;
min-height:100%;
font-family:Arial,Helvetica,sans-serif;
background:#f3f6fb;
color:#0f172a;
}

a{text-decoration:none;color:inherit}

.app{
display:flex;
min-height:100vh;
width:100%;
}

/* SIDEBAR */
.app-sidebar{
width:280px !important;
background:#0f172a;
color:#fff;
position:fixed;
left:0;
top:0;
bottom:0;
padding:22px;
overflow-y:auto;
transition:.25s ease;
z-index:1000;
}

.brand-box{
display:flex;
align-items:center;
gap:12px;
margin-bottom:22px;
}

.brand-icon{
width:46px;
height:46px;
border-radius:14px;
background:#10b981;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:22px;
color:#fff;
}

.brand-text strong{
display:block;
font-size:20px;
color:#bbf7d0;
}

.brand-text span{
display:block;
font-size:12px;
color:#94a3b8;
}

.user-box{
display:flex;
align-items:center;
gap:12px;
background:rgba(255,255,255,.06);
padding:14px;
border-radius:18px;
margin-bottom:24px;
}

.user-avatar{
width:42px;
height:42px;
border-radius:50%;
background:#047857;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
color:#fff;
}

.user-meta strong{
display:block;
font-size:14px;
}

.user-meta span{
display:block;
font-size:12px;
color:#94a3b8;
}

.side-menu{
display:grid;
gap:6px;
}

.side-menu a{
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
border-radius:14px;
color:#e5e7eb;
font-weight:800;
font-size:14px;
transition:.2s;
}

.side-menu a i{
width:24px;
text-align:center;
font-style:normal;
font-size:18px;
}

.side-menu a:hover,
.side-menu a.active{
background:#1e293b;
color:#bbf7d0;
}

.menu-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:1px;
color:#94a3b8;
font-weight:900;
margin:18px 10px 8px;
}

/* MAIN */
.app-main{
margin-left:280px !important;
width:calc(100% - 280px) !important;
min-height:100vh;
transition:.25s ease;
}

.app-content{
width:100%;
padding:30px;
}

.app-topbar{
height:74px;
background:#fff;
display:flex;
align-items:center;
gap:16px;
padding:0 28px;
box-shadow:0 8px 24px rgba(15,23,42,.06);
position:sticky;
top:0;
z-index:50;
}

.toggle-btn{
width:48px;
height:48px;
border:none;
border-radius:14px;
background:#0f766e;
color:#fff;
font-size:22px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.25s ease;
box-shadow:0 8px 20px rgba(15,118,110,.25);
}

.toggle-btn:hover{
background:#115e59;
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(15,118,110,.35);
}

.toggle-btn:active{
transform:scale(.96);
}

.toggle-btn svg{
width:22px;
height:22px;
}

.top-title strong{
display:block;
font-size:18px;
}

.top-title span{
display:block;
font-size:12px;
color:#64748b;
margin-top:2px;
}

.top-right{
margin-left:auto;
font-size:14px;
color:#64748b;
font-weight:700;
}

/* COLLAPSED */
.app.sidebar-collapsed .app-sidebar{
width:92px !important;
padding:22px 12px;
}

.app.sidebar-collapsed .app-main{
margin-left:92px !important;
width:calc(100% - 92px) !important;
}

.app.sidebar-collapsed .brand-text,
.app.sidebar-collapsed .user-meta,
.app.sidebar-collapsed .side-menu a span,
.app.sidebar-collapsed .menu-label{
display:none !important;
}

.app.sidebar-collapsed .brand-box,
.app.sidebar-collapsed .user-box{
justify-content:center;
}

.app.sidebar-collapsed .side-menu a{
justify-content:center;
padding:13px 8px;
}

.app.sidebar-collapsed .side-menu a i{
width:auto;
font-size:20px;
}

/* GLOBAL UI */
h1{
margin:0 0 22px;
font-size:28px;
}

.card{
background:white;
border-radius:20px;
padding:24px;
box-shadow:0 12px 32px rgba(15,23,42,.08);
border:1px solid #e5e7eb;
margin-bottom:24px;
}

input,textarea,select{
width:100%;
padding:13px 14px;
border:1px solid #cbd5e1;
border-radius:12px;
margin:8px 0 16px;
font-size:15px;
background:white;
}

textarea{min-height:120px}

label{
font-weight:800;
font-size:14px;
color:#334155;
}

.btn,button{
background:#047857;
color:white;
border:0;
border-radius:12px;
padding:12px 18px;
font-weight:800;
cursor:pointer;
display:inline-block;
}

.btn.red{background:#dc2626}
.btn.blue{background:#2563eb}

.alert{
padding:14px 18px;
background:#dcfce7;
color:#166534;
border-radius:14px;
margin-bottom:20px;
font-weight:700;
}

table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 24px rgba(15,23,42,.06);
}

th,td{
padding:14px;
border-bottom:1px solid #e5e7eb;
text-align:left;
font-size:14px;
}

th{
background:#ecfdf5;
color:#064e3b;
font-weight:900;
}

.actions a{
display:inline-block;
margin:3px;
}

/* MOBILE */
@media(max-width:900px){
.app-sidebar{
left:-290px;
width:280px !important;
}

.app.mobile-open .app-sidebar{
left:0;
}

.app-main,
.app.sidebar-collapsed .app-main{
margin-left:0 !important;
width:100% !important;
}

.toggle-btn{
position:fixed;
top:15px;
left:15px;
z-index:9999;
}
}

/* ===============================
   V3.1 SMART SIDEBAR TOOLTIP
================================ */

.app.sidebar-collapsed .side-menu a{
position:relative;
}

.app.sidebar-collapsed .side-menu a:hover::after{
content:attr(data-title);
position:absolute;
left:78px;
top:50%;
transform:translateY(-50%);
background:#0f172a;
color:#fff;
padding:8px 12px;
border-radius:10px;
font-size:13px;
font-weight:800;
white-space:nowrap;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:9999;
}

.app.sidebar-collapsed .side-menu a:hover::before{
content:"";
position:absolute;
left:70px;
top:50%;
transform:translateY(-50%);
border:7px solid transparent;
border-right-color:#0f172a;
z-index:9999;
}

.app.sidebar-collapsed .brand-icon{
width:48px;
height:48px;
}

.app.sidebar-collapsed .user-avatar{
width:44px;
height:44px;
}

.app.sidebar-collapsed .side-menu a.active{
background:#047857;
color:#fff;
}

.app.sidebar-collapsed .side-menu a.active i{
color:#fff;
}

/* ===============================
   V3.2 ENTERPRISE TOPBAR
================================ */

.topbar-left{
display:flex;
align-items:center;
gap:16px;
}

.page-title h2{
margin:0;
font-size:18px;
font-weight:900;
}

.page-title small{
display:block;
font-size:12px;
color:#64748b;
margin-top:2px;
}

.topbar-center{
flex:1;
display:flex;
justify-content:center;
}

.top-search{
width:100%;
max-width:420px;
}

.top-search input{
width:100%;
height:44px;
border:1px solid #e5e7eb;
border-radius:14px;
padding:0 16px;
font-size:14px;
background:#f8fafc;
outline:none;
margin:0;
}

.top-search input:focus{
border-color:#047857;
box-shadow:0 0 0 4px rgba(4,120,87,.12);
background:#fff;
}

.notify-btn{
width:44px;
height:44px;
border:0;
border-radius:14px;
background:#f8fafc;
color:#0f172a;
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.profile-box{
display:flex;
align-items:center;
gap:10px;
background:#f8fafc;
padding:8px 12px;
border-radius:16px;
}

.profile-avatar{
width:36px;
height:36px;
border-radius:50%;
background:#047857;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
}

.profile-info strong{
display:block;
font-size:13px;
}

.profile-info small{
display:block;
font-size:11px;
color:#64748b;
}

.toggle-btn svg{
width:22px;
height:22px;
display:block;
}

/* Tooltip collapsed sidebar */
.app.sidebar-collapsed .side-menu a{
position:relative;
}

.app.sidebar-collapsed .side-menu a:hover::after{
content:attr(data-title);
position:absolute;
left:76px;
top:50%;
transform:translateY(-50%);
background:#0f172a;
color:#fff;
padding:8px 12px;
border-radius:10px;
font-size:13px;
font-weight:800;
white-space:nowrap;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:9999;
}

.app.sidebar-collapsed .side-menu a:hover::before{
content:"";
position:absolute;
left:68px;
top:50%;
transform:translateY(-50%);
border:7px solid transparent;
border-right-color:#0f172a;
z-index:9999;
}

@media(max-width:900px){
.topbar-center,
.profile-info{
display:none;
}

.app-topbar{
padding-left:72px;
}

.profile-box{
padding:8px;
}
}

/* ===============================
   V3.6 SIDEBAR INSIDE TOGGLE
================================ */

.sidebar-toggle-inside{
width:46px;
height:46px;
border:0;
border-radius:14px;
background:#047857;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 10px 22px rgba(4,120,87,.25);
transition:.25s ease;
flex-shrink:0;
}

.sidebar-toggle-inside:hover{
background:#065f46;
transform:translateY(-2px);
}

.sidebar-toggle-inside svg{
width:22px;
height:22px;
display:block;
}

.brand-box{
display:flex;
align-items:center;
gap:12px;
margin-bottom:22px;
}

.app.sidebar-collapsed .brand-box{
justify-content:center;
}

.app.sidebar-collapsed .sidebar-toggle-inside{
width:48px;
height:48px;
}

.app.sidebar-collapsed .brand-text{
display:none !important;
}

/* remove old topbar toggle spacing */
.topbar-left{
display:flex;
align-items:center;
gap:16px;
}

@media(max-width:900px){
.sidebar-toggle-inside{
position:relative;
top:auto;
left:auto;
z-index:auto;
}
}

/* ===============================
   V4.2 MODULE MANAGER
================================ */

.module-manager{
width:100%;
}

.module-hero{
background:
linear-gradient(135deg,rgba(4,120,87,.95),rgba(15,23,42,.78)),
radial-gradient(circle at 88% 25%,rgba(255,255,255,.25),transparent 14%);
border-radius:26px;
padding:36px;
color:#fff;
margin-bottom:24px;
box-shadow:0 18px 45px rgba(4,120,87,.22);
}

.module-hero span{
display:inline-block;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
padding:8px 12px;
border-radius:999px;
font-size:12px;
font-weight:900;
margin-bottom:14px;
}

.module-hero h1{
margin:0 0 10px;
font-size:32px;
}

.module-hero p{
margin:0;
color:#d1fae5;
}

.module-section{
margin-bottom:28px;
}

.module-section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-bottom:15px;
}

.module-section-head h2{
margin:0;
font-size:22px;
}

.module-section-head small{
color:#64748b;
font-weight:800;
}

.module-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.module-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:22px;
padding:22px;
box-shadow:0 10px 30px rgba(15,23,42,.07);
transition:.25s;
}

.module-card:hover{
transform:translateY(-3px);
box-shadow:0 16px 38px rgba(15,23,42,.12);
}

.module-card.inactive{
opacity:.65;
}

.module-card-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}

.module-icon{
width:56px;
height:56px;
border-radius:18px;
background:#ecfdf5;
display:flex;
align-items:center;
justify-content:center;
font-size:27px;
}

.module-status{
font-size:12px;
font-weight:900;
padding:7px 11px;
border-radius:999px;
background:#dcfce7;
color:#047857;
}

.module-card.inactive .module-status{
background:#fee2e2;
color:#dc2626;
}

.module-card h3{
margin:0 0 8px;
font-size:20px;
}

.module-card p{
margin:0 0 18px;
color:#64748b;
font-size:14px;
}

.module-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.module-actions a{
padding:10px 14px;
border-radius:12px;
font-size:13px;
font-weight:900;
}

.module-toggle.on{
background:#fee2e2;
color:#dc2626;
}

.module-toggle.off{
background:#dcfce7;
color:#047857;
}

.module-open{
background:#eff6ff;
color:#2563eb;
}

@media(max-width:1100px){
.module-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:700px){
.module-grid{
grid-template-columns:1fr;
}
}

/* ===============================
   MEDIA MANAGER ULTIMATE
================================ */

.media-manager{
width:100%;
}

.media-hero{
background:
linear-gradient(135deg,rgba(4,120,87,.95),rgba(15,23,42,.78)),
radial-gradient(circle at 88% 25%,rgba(255,255,255,.25),transparent 14%);
border-radius:26px;
padding:36px;
color:#fff;
margin-bottom:24px;
box-shadow:0 18px 45px rgba(4,120,87,.22);
}

.media-hero span{
display:inline-block;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
padding:8px 12px;
border-radius:999px;
font-size:12px;
font-weight:900;
margin-bottom:14px;
}

.media-hero h1{
margin:0 0 10px;
font-size:32px;
}

.media-hero p{
margin:0;
color:#d1fae5;
}

.media-upload-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:22px;
padding:24px;
box-shadow:0 10px 30px rgba(15,23,42,.07);
margin-bottom:22px;
}

.upload-zone{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
min-height:180px;
border:2px dashed #86efac;
border-radius:22px;
background:#f0fdf4;
cursor:pointer;
text-align:center;
padding:24px;
margin-bottom:18px;
}

.upload-zone input{
display:none;
}

.upload-zone strong{
font-size:20px;
color:#064e3b;
}

.upload-zone span{
color:#64748b;
font-weight:700;
}

.media-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:22px;
}

.media-toolbar form{
display:flex;
gap:10px;
align-items:center;
flex:1;
}

.media-toolbar input{
margin:0;
max-width:360px;
}

.media-count{
font-weight:900;
color:#64748b;
}

.media-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.media-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:22px;
overflow:hidden;
box-shadow:0 10px 30px rgba(15,23,42,.07);
}

.media-thumb{
height:190px;
background:#f8fafc;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.media-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.media-info{
padding:14px;
border-bottom:1px solid #e5e7eb;
}

.media-info strong{
display:block;
font-size:13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.media-info small{
display:block;
color:#64748b;
margin-top:4px;
}

.media-actions{
padding:14px;
display:grid;
gap:8px;
}

.media-actions input{
margin:0;
font-size:12px;
padding:10px;
}

.media-actions button,
.media-actions a{
text-align:center;
background:#ecfdf5;
color:#047857;
border:0;
border-radius:12px;
padding:10px;
font-size:13px;
font-weight:900;
cursor:pointer;
}

.media-actions a.delete{
background:#fee2e2;
color:#dc2626;
}

.media-empty{
background:#fff;
border:1px solid #e5e7eb;
border-radius:22px;
padding:30px;
color:#64748b;
font-weight:800;
}

@media(max-width:1200px){
.media-grid{
grid-template-columns:repeat(3,1fr);
}
}

@media(max-width:900px){
.media-grid{
grid-template-columns:repeat(2,1fr);
}

.media-toolbar{
flex-direction:column;
align-items:stretch;
}

.media-toolbar form{
flex-direction:column;
align-items:stretch;
}

.media-toolbar input{
max-width:100%;
}
}

@media(max-width:600px){
.media-grid{
grid-template-columns:1fr;
}
}

/* ===============================
   V5 GLOBAL MEDIA PICKER
================================ */

.media-picker-modal{
position:fixed;
inset:0;
background:rgba(15,23,42,.65);
z-index:99999;
display:none;
align-items:center;
justify-content:center;
padding:25px;
}

.media-picker-box{
width:100%;
max-width:980px;
max-height:85vh;
overflow:auto;
background:#fff;
border-radius:24px;
box-shadow:0 30px 90px rgba(0,0,0,.35);
padding:24px;
}

.media-picker-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
}

.media-picker-head h2{
margin:0;
font-size:24px;
}

.media-picker-head button{
width:42px;
height:42px;
border-radius:50%;
background:#fee2e2;
color:#dc2626;
font-size:28px;
line-height:1;
}

.media-picker-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
}

.media-picker-item{
border:1px solid #e5e7eb;
border-radius:18px;
overflow:hidden;
background:#f8fafc;
cursor:pointer;
transition:.25s;
}

.media-picker-item:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(15,23,42,.15);
border-color:#86efac;
}

.media-picker-item img{
width:100%;
height:130px;
object-fit:cover;
display:block;
}

.media-picker-item span{
display:block;
padding:10px;
font-size:12px;
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

@media(max-width:900px){
.media-picker-grid{
grid-template-columns:repeat(2,1fr);
}
}