:root {
    --primary: #4CAF50; --primary-dark: #388E3C; --primary-light: #e8f5e9;
    --pink: #e91e8c; --dark: #2c3e50; --gray: #6c757d; --light-gray: #adb5bd;
    --border: #dee2e6; --bg: #f8f9fa; --danger: #f44336; --warning: #ff9800; --info: #2196F3;
    --sw: 240px; --sc: 64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--dark); overflow-x: hidden; }

/* ── LOGIN ── */
.login-body { background: var(--bg); }
.login-split { display: flex; height: 100vh; }
.login-left { flex: 6; background: url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1200&q=80') center/cover no-repeat; position: relative; display: flex; align-items: center; justify-content: center; }
.login-left::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(76,175,80,.5), rgba(56,142,60,.65)); z-index: 1; }
.login-overlay { position: relative; z-index: 2; text-align: center; padding: 60px; color: #fff; }
.login-overlay h1 { font-size: clamp(36px, 5vw, 68px); font-weight: 700; letter-spacing: 12px; margin-bottom: 16px; text-shadow: 0 4px 20px rgba(0,0,0,.3); }
.login-overlay p { font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 2px; opacity: .95; }
.login-right { flex: 4; display: flex; align-items: center; justify-content: center; background: #fff; padding: 40px; }
.login-form-wrapper { width: 100%; max-width: 380px; }
.login-logo { display: flex; justify-content: center; margin-bottom: 30px; }
.login-logo img { max-width: 180px; height: auto; }
.logo-fallback { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.logo-fallback .logo-icon { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, #e91e8c, #ff6b9d); display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; }
.login-heading { font-size: 28px; font-weight: 700; color: #202124; margin-bottom: 26px; text-align: center; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-error { background: #fdecea; border: 1px solid #f5c6cb; color: var(--danger); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 4px; }
.fg { display: flex; flex-direction: column; gap: 5px; }
.fg label { font-size: 13px; font-weight: 500; color: #5f6368; }
.fg input { padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 15px; outline: none; background: #fafafa; transition: border-color .2s, box-shadow .2s; }
.fg input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(76,175,80,.15); background: #fff; }
.login-btn { padding: 13px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s; }
.login-btn:hover { background: var(--primary-dark); }

/* ── DASHBOARD LAYOUT ── */
.dashboard-body { background: var(--bg); }
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 998; }
.overlay.on { display: block; }

/* SIDEBAR */
.sidebar { width: var(--sw); min-height: 100vh; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 999; transition: transform .25s ease, width .25s ease; overflow: hidden; }
.sidebar.compact { width: var(--sc); }
.sidebar.compact .sb-logo, .sidebar.compact .sb-name, .sidebar.compact .sb-role, .sidebar.compact .nav-label { display: none; }
.sidebar.compact .sb-head { padding: 14px 0; align-items: center; }
.sidebar.compact .nav-link { justify-content: center; padding: 14px 0; }
.sb-head { padding: 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sb-logo { width: 72px; height: auto; border-radius: 8px; object-fit: contain; }
.sb-name { font-size: 14px; font-weight: 700; }
.sb-role { font-size: 11px; color: var(--gray); letter-spacing: 1.5px; text-transform: uppercase; }
.sb-nav { flex: 1; padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 12px 20px; text-decoration: none; color: var(--dark); font-size: 14px; font-weight: 500; border-left: 4px solid transparent; cursor: pointer; transition: all .2s; white-space: nowrap; position: relative; }
.nav-link:hover { background: var(--primary-light); color: var(--primary); }
.nav-link.active { background: var(--primary-light); color: var(--primary); border-left-color: var(--primary); }
.nav-link i { font-size: 17px; min-width: 20px; text-align: center; }
.nav-badge { background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; display: flex; align-items: center; justify-content: center; margin-left: auto; }
.sb-foot { padding: 10px 0; border-top: 1px solid var(--border); }

/* MAIN */
.main { flex: 1; margin-left: var(--sw); display: flex; flex-direction: column; min-height: 100vh; transition: margin-left .25s ease; }
.main.compact { margin-left: var(--sc); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar h2 { font-size: 17px; font-weight: 700; }
.btn-icon { background: none; border: none; font-size: 20px; color: var(--gray); cursor: pointer; padding: 6px; border-radius: 6px; transition: all .2s; }
.btn-icon:hover { background: var(--bg); color: var(--dark); }
.user-pill { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.user-pill i { font-size: 26px; color: var(--primary); }
.content-wrapper { padding: 22px; padding-bottom: 80px; }

/* ALERT */
.alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 18px; }
.alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.alert-danger  { background: #fdecea; color: #c62828; border: 1px solid #ef9a9a; }

/* PAGE HEADER */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.page-header h3 { font-size: 19px; font-weight: 700; }
.page-header p { font-size: 13px; color: var(--gray); margin-top: 3px; }

/* STATS */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 12px; padding: 16px; border: 1px solid var(--border); display: flex; align-items: center; gap: 12px; transition: all .2s; }
.stat-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.stat-info h4 { font-size: 20px; font-weight: 800; line-height: 1; }
.stat-info p { font-size: 11px; color: var(--gray); margin-top: 3px; }
.g { background: var(--primary-light); color: var(--primary); }
.b { background: #e3f2fd; color: var(--info); }
.o { background: #fff3e0; color: var(--warning); }
.r { background: #fdecea; color: var(--danger); }
.pk { background: #fce4ec; color: var(--pink); }

/* ROW CARDS (dashboard) */
.row-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* CARD */
.card { background: #fff; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.card-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head h4 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* SEARCH ROW */
.search-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search-box { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; width: 240px; }
.search-box i { color: var(--light-gray); }
.search-box input { border: none; background: none; outline: none; font-size: 13px; color: var(--dark); width: 100%; }
.fsel { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--dark); background: var(--bg); outline: none; cursor: pointer; }

/* TABLE */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th { padding: 10px 13px; text-align: left; font-size: 11px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: .7px; background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
tbody tr:hover { background: var(--primary-light); }
tbody tr:last-child { border-bottom: none; }
tbody td { padding: 11px 13px; vertical-align: middle; }
.empty-row { text-align: center; color: var(--gray); font-size: 13px; padding: 20px !important; }
.row-editing { background: #fffde7 !important; }

/* THUMB */
.thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; border: 1px solid var(--border); }
.thumb-ph { width: 40px; height: 40px; border-radius: 9px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 16px; }
.p-name { font-weight: 600; }
.p-desc { font-size: 12px; color: var(--gray); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price { font-weight: 700; color: var(--primary-dark); font-size: 14px; }

/* BADGES */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.b-ativo   { background: #e8f5e9; color: #2e7d32; }
.b-inativo { background: #f5f5f5; color: #757575; }
.b-dest    { background: #fff3e0; color: #e65100; }
.b-pend    { background: #fff3e0; color: #e65100; }
.b-conf    { background: #e8f5e9; color: #2e7d32; }
.b-conc    { background: #e3f2fd; color: #1565c0; }
.b-canc    { background: #fdecea; color: #c62828; }
.badge i   { font-size: 7px; }

/* ACTION BUTTONS */
.acts { display: flex; gap: 4px; flex-wrap: wrap; }
.ba { width: 30px; height: 30px; border: none; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .2s; text-decoration: none; }
.ba-edit  { background: #e3f2fd; color: var(--info); }   .ba-edit:hover  { background: var(--info); color: #fff; }
.ba-del   { background: #fdecea; color: var(--danger); } .ba-del:hover   { background: var(--danger); color: #fff; }
.ba-view  { background: #f3e5f5; color: #7b1fa2; }       .ba-view:hover  { background: #7b1fa2; color: #fff; }
.ba-wpp   { background: #e8f5e9; color: #128c7e; }       .ba-wpp:hover   { background: #128c7e; color: #fff; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); }
.btn-outline  { background: transparent; color: var(--dark); border: 1.5px solid var(--border); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-wpp      { background: #25d366; color: #fff; } .btn-wpp:hover { background: #128c7e; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* EMPTY */
.empty { text-align: center; padding: 48px 20px; }
.empty i { font-size: 46px; color: var(--light-gray); margin-bottom: 12px; display: block; }
.empty h4 { font-size: 16px; color: var(--gray); margin-bottom: 5px; }
.empty p  { font-size: 13px; color: var(--light-gray); margin-bottom: 16px; }

/* FORM */
.form-card { }
.form-body { padding: 22px; display: flex; flex-direction: column; gap: 0; }
.fg2 { margin-bottom: 14px; }
.fg2 label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.fg2 label span { color: var(--danger); }
.fg2 input, .fg2 select, .fg2 textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--dark); outline: none; font-family: inherit; background: #fff; transition: border-color .2s, box-shadow .2s; }
.fg2 input:focus, .fg2 select:focus, .fg2 textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(76,175,80,.15); }
.fg2 textarea { resize: vertical; min-height: 72px; }
.fhint { font-size: 11px; color: var(--gray); margin-top: 3px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.text-danger { font-size: 12px; color: var(--danger); margin-top: 3px; display: block; }

/* IMG PREVIEW */
.img-prev { margin-top: 8px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); height: 120px; display: flex; align-items: center; justify-content: center; }
.img-prev img { width: 100%; height: 100%; object-fit: cover; }
.img-prev i { font-size: 30px; color: var(--light-gray); }

/* SWITCH */
.sw-group { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--bg); border-radius: 10px; }
.sw-label { font-size: 13px; font-weight: 500; }
.sw-desc  { font-size: 12px; color: var(--gray); margin-top: 2px; }
.sw { position: relative; width: 44px; height: 24px; display: inline-block; }
.sw input { display: none; }
.sl { position: absolute; inset: 0; background: var(--light-gray); border-radius: 24px; cursor: pointer; transition: background .2s; }
.sl::before { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.sw input:checked + .sl { background: var(--primary); }
.sw input:checked + .sl::before { transform: translateX(20px); }

/* DETAIL GRID */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.detail-body { padding: 0 4px; }
.d-row { display: flex; justify-content: space-between; font-size: 13px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.d-row:last-child { border-bottom: none; }
.d-row span:first-child { color: var(--gray); }
.d-row strong { text-align: right; }
.mb { padding: 20px; }

/* TIMELINE */
.tl-item { display: flex; gap: 10px; padding-bottom: 14px; position: relative; }
.tl-item::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 1px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; flex-shrink: 0; margin-top: 2px; }

/* MOBILE NAV */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border); z-index: 997; box-shadow: 0 -2px 14px rgba(0,0,0,.07); }
.mn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px 8px; text-decoration: none; color: var(--gray); font-size: 10px; font-weight: 600; gap: 3px; cursor: pointer; transition: color .2s; position: relative; }
.mn-item:hover, .mn-item.active { color: var(--primary); }
.mn-item i { font-size: 19px; }
.mn-badge { position: absolute; top: 5px; left: 50%; transform: translateX(4px); background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; padding: 0 3px; display: flex; align-items: center; justify-content: center; }

/* RESPONSIVE */
@media (max-width: 960px) {
    .sidebar { transform: translateX(-100%); width: var(--sw) !important; }
    .sidebar.open { transform: translateX(0); }
    .main, .main.compact { margin-left: 0; }
    .mobile-nav { display: flex; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .row-cards { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .login-left { display: none; }
    .login-right { flex: 1; padding: 24px 18px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .hide-m { display: none; }
    .frow { grid-template-columns: 1fr; }
    .content-wrapper { padding: 14px; padding-bottom: 76px; }
    .page-header { flex-direction: column; gap: 8px; }
    .page-header .btn { width: 100%; justify-content: center; }
    .search-box { width: 100%; }
    .search-row { flex-direction: column; align-items: stretch; }
}
@media (min-width: 961px) {
    .mobile-nav { display: none !important; }
}


.user-dropdown {
    position: relative;
}

.user-pill-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .2s;
}

    .user-pill-btn:hover {
        background: var(--bg);
    }

    .user-pill-btn i.fa-user-circle {
        font-size: 26px;
        color: var(--primary);
    }

.dd-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    min-width: 180px;
    z-index: 500;
    overflow: hidden;
    animation: slideUp .15s ease;
}

    .dd-menu.open {
        display: block;
    }

.dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
    text-decoration: none;
    transition: background .15s;
}

    .dd-item:hover {
        background: var(--primary-light);
        color: var(--primary);
    }

.dd-danger {
    color: var(--danger) !important;
}

    .dd-danger:hover {
        background: #fdecea !important;
        color: var(--danger) !important;
    }

.dd-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}



.img-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    width: fit-content;
}

.img-tab {
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--gray);
    background: none;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .img-tab.active {
        background: #fff;
        color: var(--primary);
        box-shadow: 0 1px 4px rgba(0,0,0,.1);
    }

.upload-area {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

    .upload-area:hover {
        border-color: var(--primary);
        background: var(--primary-light);
    }

    .upload-area i {
        font-size: 32px;
        color: var(--primary);
        opacity: .6;
    }

    .upload-area span {
        font-size: 13px;
        color: var(--gray);
    }

    .upload-area small {
        font-size: 11px;
        color: var(--light-gray);
    }

    .upload-area.dragging {
        border-color: var(--primary);
        background: var(--primary-light);
    }
.img-prev {
    height: 200px !important;
}

    .img-prev img {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
    }