@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');*{box-sizing:border-box}body{margin:0;background:#f7f4ed;color:#1c2a20;font:14px 'DM Sans',sans-serif}.app{display:flex;min-height:100vh}.side{width:250px;background:#123d20;color:#eaf1e9;padding:24px 16px;position:fixed;inset:0 auto 0 0}.brand{display:flex;gap:10px;align-items:center;padding:5px 6px 30px}.brand-logo{display:block;width:150px;height:88px;flex:0 0 150px;background:#fff;border-radius:12px;padding:5px;overflow:hidden;box-shadow:0 6px 18px #00000012}.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}.brand-copy{display:none}.brand b{display:block;font:700 24px Georgia}.brand small{font-size:9px;letter-spacing:2px;color:#b9c9bd}nav a{display:block;color:#cbd8ce;text-decoration:none;padding:12px 13px;border-radius:10px;margin:4px 0}nav a:hover,nav a.active{background:#e7dfc9;color:#173d24;font-weight:700}.sidefoot{position:absolute;bottom:25px;left:26px;color:#c8d4ca;line-height:1.6}.sidefoot span{font-size:11px;color:#91a897}main{margin-left:250px;padding:28px;flex:1;max-width:1600px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}h1,h2{margin:0}h1{font:700 30px Georgia;color:#173d24}header p{margin:5px 0;color:#718078}.headright{display:flex;gap:12px;align-items:center}.headright button,.menu{border:1px solid #ded8c9;background:#fff;border-radius:10px;padding:10px 13px}.avatar{width:40px;height:40px;border-radius:50%;background:#d9c493;color:#173d24;display:grid;place-items:center;font-weight:700}.menu{display:none}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stat,.panel{background:#fff;border:1px solid #e7e1d4;border-radius:16px;box-shadow:0 8px 25px #173d2408}.stat{padding:20px}.stat span{display:block;color:#78857e;margin-bottom:10px}.stat b{font-size:27px;display:block;color:#173d24}.stat em{font-style:normal;color:#3c8656;font-size:12px}.grid2{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.panel{padding:20px;margin-bottom:18px}.pt{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.pt h2{font:700 20px Georgia;color:#173d24}.pt a{color:#28623c;text-decoration:none}.pt select{padding:8px;border:1px solid #ddd7c9;border-radius:8px}.chart{height:220px;display:flex;align-items:end;gap:10px;border-bottom:1px solid #e8e3d8;padding:10px 8px}.chart i{flex:1;background:#7f9d86;border-radius:7px 7px 0 0;min-width:12px;animation:rise .8s ease}.donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(#174b25 0 66%,#6e9d7b 66% 81%,#d0a64f 81% 93%,#d9d7ce 93%);margin:5px auto 15px;display:grid;place-items:center}.donut:before{content:'';position:absolute;width:112px;height:112px;border-radius:50%;background:white}.donut div{position:relative;text-align:center}.donut b{display:block;font-size:27px}.donut small{color:#79837d}.legend{display:grid;gap:8px;color:#69766e;font-size:12px}.legend span:first-child{color:#174b25}.legend span:nth-child(2){color:#568966}.legend span:nth-child(3){color:#b88b2f}.legend span:nth-child(4){color:#8c8e87}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 10px;border-top:1px solid #eee9df}th{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#89938d}.pill{padding:5px 9px;border-radius:99px;font-size:11px}.green{background:#e2f1e5;color:#28613b}.blue{background:#e4eef8;color:#2d6592}.amber{background:#f8eed8;color:#946e20}.purple{background:#eee6f5;color:#76528d}@keyframes rise{from{height:0}}@media(max-width:900px){.side{transform:translateX(-100%);z-index:5}.side.open{transform:none}main{margin:0;padding:18px}.menu{display:block}.cards{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}@media(max-width:550px){.cards{grid-template-columns:1fr}.panel{overflow:auto}table{min-width:600px}}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.toolbar input,.toolbar select{padding:9px 11px;border:1px solid #ddd7c9;border-radius:9px;background:#fff;color:#2b3a31}.soft-btn{border:1px solid #d9d2c3;background:#f7f4ed;color:#173d24;border-radius:9px;padding:9px 12px;cursor:pointer}.soft-btn:hover{background:#e7dfc9}.table-wrap{overflow:auto}.muted{color:#7b867f;font-size:12px}.empty{text-align:center;color:#8a948e;padding:28px!important}.mobile-title{display:flex;align-items:center;gap:12px}.mobile-title .menu{margin-right:2px}.action-row{display:flex;gap:6px;flex-wrap:wrap}.action-btn{border:1px solid #ddd7c9;background:#fff;border-radius:7px;padding:6px 8px;cursor:pointer;font-size:11px}.action-btn:hover{background:#f0eadb}.status-select{border:1px solid #ddd7c9;border-radius:7px;padding:6px;background:#fff;font-size:11px}.phone-link{color:#1d6339;text-decoration:none;font-weight:600}.lead-name{font-weight:700;color:#173d24}.lead-sub{font-size:11px;color:#89938d;margin-top:3px}.pill.red{background:#f7e0df;color:#a33d37}.pill.gray{background:#ecece8;color:#656962}@media(max-width:700px){.toolbar{width:100%}.toolbar input{min-width:180px}.mobile-title h1{font-size:25px}}
.api-modal{position:fixed;inset:0;background:#173d2466;display:grid;place-items:center;padding:20px;z-index:20}.api-modal-card{background:#fff;width:min(680px,100%);max-height:90vh;overflow:auto;border-radius:18px;padding:22px;box-shadow:0 20px 60px #173d2440}.api-form{display:grid;gap:8px}.api-form label{font-size:12px;font-weight:700;color:#53635a;margin-top:5px}.api-form input,.api-form textarea,.api-form select{width:100%;padding:10px;border:1px solid #ddd7c9;border-radius:9px;font:inherit}.api-form textarea{min-height:80px}.form-actions{display:flex;gap:8px;margin-top:12px}.primary-btn{border:0;background:#174b25;color:#fff;border-radius:9px;padding:10px 16px;cursor:pointer}.login-shell{min-height:100vh;display:grid;place-items:center;background:#f7f4ed;padding:20px}.login-card{width:min(430px,100%);background:#fff;border:1px solid #e7e1d4;border-radius:20px;padding:30px;box-shadow:0 15px 50px #173d2414}.login-card .brand{justify-content:center;padding:0 0 24px}.login-card .brand-logo{width:230px;height:145px;flex-basis:230px}.subcat-tools{display:flex;gap:6px;align-items:center}.subcat-list{display:grid;gap:8px}.subcat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eee9df}.subcat-row:last-child{border-bottom:0}.subcat-meta{font-size:11px;color:#89938d}.subcat-actions{display:flex;gap:6px}.login-card form{display:grid;gap:10px}.login-card input{padding:12px;border:1px solid #ddd7c9;border-radius:9px}.login-card button{border:0;background:#174b25;color:#fff;border-radius:9px;padding:12px}.api-error{color:#a33d37;font-size:13px}


.logout-link{display:block;margin-top:16px;padding:10px 14px;border-radius:10px;color:inherit;text-decoration:none;cursor:pointer;}
.logout-link:hover{background:rgba(0,0,0,.06);}


/* =========================================================
   RESPONSIVE + SMOOTHNESS (layout/content unchanged)
   ========================================================= */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
button,a,input,select,textarea{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.side{
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  z-index:50;
}
.side nav a{transition:background-color .2s ease,color .2s ease,transform .2s ease}
.side nav a:hover{transform:translateX(2px)}
.menu{
  cursor:pointer;
  position:relative;
  z-index:60;
  -webkit-tap-highlight-color:transparent;
}
.menu:active{transform:scale(.96)}
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(18,61,32,.28);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
  z-index:40;
}
.nav-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media (max-width:1100px){
  main{padding:22px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .side{
    transform:translate3d(-100%,0,0);
    box-shadow:12px 0 35px rgba(0,0,0,.12);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .side.open{transform:translate3d(0,0,0)}
  main{margin-left:0;width:100%;min-width:0;padding:18px}
  header{gap:12px;flex-wrap:wrap;margin-bottom:20px}
  .menu{display:block}
  .headright{margin-left:auto}
  .panel{min-width:0}
  .table-wrap{-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .toolbar{max-width:100%}
}
@media (max-width:700px){
  main{padding:14px}
  header{align-items:flex-start}
  h1{font-size:25px}
  .mobile-title{min-width:0;flex:1}
  .mobile-title>div{min-width:0}
  header p{white-space:normal}
  .headright{width:auto}
  .cards{grid-template-columns:1fr;gap:12px}
  .stat{padding:16px}
  .panel{padding:15px;border-radius:14px}
  .pt{align-items:flex-start;gap:12px;flex-wrap:wrap}
  .pt h2{font-size:18px}
  .toolbar{width:100%;flex-wrap:wrap}
  .toolbar input,.toolbar select{min-width:0;flex:1 1 180px}
  .toolbar button{flex:0 0 auto}
  .action-row{gap:5px}
  .action-btn{min-height:34px}
  .api-modal{padding:12px}
  .api-modal-card{padding:16px;border-radius:14px}
  .form-actions{flex-wrap:wrap}
}
@media (max-width:480px){
  main{padding:10px}
  header{margin-bottom:14px}
  h1{font-size:22px}
  .mobile-title{gap:8px}
  .menu,.headright button{padding:9px 11px}
  .avatar{width:36px;height:36px}
  .headright{gap:7px}
  .panel{padding:12px}
  .stat b{font-size:24px}
  .toolbar input,.toolbar select,.toolbar button{width:100%;flex-basis:100%}
  .login-shell{padding:12px}
  .login-card{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   FINAL SIDEBAR RESPONSIVE FIX
   ========================================================= */
.side{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:250px;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  transform:translate3d(0,0,0);
  transition:transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease;
  z-index:1000;
}
.nav-overlay{
  z-index:900;
}
.menu{
  position:relative;
  z-index:1100;
  cursor:pointer;
  touch-action:manipulation;
}
body.nav-open{overflow:hidden}
@media (max-width:1024px){
  .side{
    transform:translate3d(-105%,0,0);
    box-shadow:12px 0 35px rgba(0,0,0,.18);
  }
  .side.open{
    transform:translate3d(0,0,0);
  }
  main{
    margin-left:0;
    width:100%;
  }
  .menu{
    display:block;
  }
}
@media (min-width:1025px){
  .nav-overlay{display:none!important}
  .side{transform:translate3d(0,0,0)!important}
}


















/* =========================================================
   DNP ADMIN PANEL - PREMIUM CSS
   Paste at the END of admin/style.css
   ========================================================= */

:root {
    --dnp-green: #174b25;
    --dnp-green-dark: #0d3519;
    --dnp-green-light: #eaf4ed;
    --dnp-gold: #c9a227;
    --dnp-cream: #f7f5ef;
    --dnp-white: #ffffff;
    --dnp-text: #18231b;
    --dnp-muted: #6b756e;
    --dnp-border: #e4e9e5;
    --dnp-danger: #c0392b;
    --dnp-success: #208044;
    --dnp-shadow: 0 12px 35px rgba(23, 75, 37, 0.08);
    --dnp-radius: 14px;
}

/* ---------- GLOBAL ---------- */

.admin-page,
.admin-layout,
.dashboard-page {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    color: var(--dnp-text);
    background: #f6f8f6;
}

* {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

a {
    transition: all .2s ease;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.admin-sidebar,
.sidebar {
    background: linear-gradient(
        180deg,
        #174b25 0%,
        #123d1e 55%,
        #0d3017 100%
    ) !important;

    color: #fff;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .08);
}

.admin-sidebar .logo,
.sidebar .logo,
.admin-logo {
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.admin-sidebar a,
.sidebar a,
.sidebar-link {
    color: rgba(255,255,255,.78) !important;
    border-radius: 10px;
    margin: 4px 10px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 500;
    transition: all .25s ease;
}

.admin-sidebar a:hover,
.sidebar a:hover,
.sidebar-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.10);
    transform: translateX(3px);
}

.admin-sidebar a.active,
.sidebar a.active,
.sidebar-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.16);
    box-shadow: inset 3px 0 0 var(--dnp-gold);
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.admin-main,
.main-content,
.dashboard-content {
    background: #f6f8f6;
    min-height: 100vh;
}

.admin-header,
.dashboard-header {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--dnp-border);
    padding: 18px 28px;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
}

.admin-header h1,
.dashboard-header h1 {
    color: var(--dnp-green);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}


/* =========================================================
   DASHBOARD CARDS
   ========================================================= */

.dashboard-cards,
.stats-grid,
.stats-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 25px;
}

.dashboard-card,
.stat-card,
.summary-card {
    background: #fff;
    border: 1px solid var(--dnp-border);
    border-radius: var(--dnp-radius);
    padding: 22px;
    box-shadow: var(--dnp-shadow);
    position: relative;
    overflow: hidden;
    transition: all .25s ease;
}

.dashboard-card::before,
.stat-card::before,
.summary-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--dnp-green);
}

.dashboard-card:hover,
.stat-card:hover,
.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(23,75,37,.13);
}

.dashboard-card h3,
.stat-card h3,
.summary-card h3 {
    font-size: 13px;
    color: var(--dnp-muted);
    margin: 0 0 10px;
    font-weight: 600;
}

.dashboard-card .number,
.stat-card .number,
.summary-card .number {
    color: var(--dnp-green);
    font-size: 30px;
    font-weight: 750;
}


/* =========================================================
   CONTENT CARDS
   ========================================================= */

.admin-card,
.content-card,
.panel,
.card {
    background: #fff;
    border: 1px solid var(--dnp-border);
    border-radius: var(--dnp-radius);
    box-shadow: var(--dnp-shadow);
    padding: 24px;
}

.admin-card + .admin-card,
.content-card + .content-card,
.panel + .panel {
    margin-top: 20px;
}


/* =========================================================
   TABLES
   ========================================================= */

.table-wrapper,
.table-responsive {
    width: 100%;
    overflow-x: auto;
    background: #fff;
    border-radius: 14px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

thead th {
    background: #f3f7f4;
    color: var(--dnp-green);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dnp-border);
    white-space: nowrap;
}

tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #edf0ed;
    color: #374139;
    font-size: 14px;
    vertical-align: middle;
}

tbody tr {
    transition: background .2s ease;
}

tbody tr:hover {
    background: #f8fbf8;
}

tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   FORM DESIGN
   ========================================================= */

.form-group,
.form-field,
.mb-3 {
    margin-bottom: 18px;
}

label {
    display: block;
    color: #29362d;
    font-size: 13px;
    font-weight: 650;
    margin-bottom: 7px;
}

input,
select,
textarea,
.form-control {
    width: 100%;
    border: 1px solid #d9e1db;
    background: #fff;
    color: #17221a;
    border-radius: 9px;
    padding: 11px 13px;
    font-size: 14px;
    outline: none;
    transition: all .2s ease;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input:hover,
select:hover,
textarea:hover,
.form-control:hover {
    border-color: #b7c7ba;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--dnp-green);
    box-shadow: 0 0 0 3px rgba(23,75,37,.10);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button {
    border-radius: 9px;
    transition: all .22s ease;
}

.btn-primary,
.btn-success,
.btn-green,
.primary-btn {
    background: var(--dnp-green) !important;
    border-color: var(--dnp-green) !important;
    color: #fff !important;
    padding: 10px 18px;
    font-weight: 600;
}

.btn-primary:hover,
.btn-success:hover,
.btn-green:hover,
.primary-btn:hover {
    background: var(--dnp-green-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(23,75,37,.20);
}

.btn-danger,
.danger-btn {
    background: #fff !important;
    color: var(--dnp-danger) !important;
    border: 1px solid #e6c3bf !important;
}

.btn-danger:hover,
.danger-btn:hover {
    background: #fff3f1 !important;
}

.btn-secondary,
.secondary-btn {
    background: #f1f4f2 !important;
    color: #344039 !important;
    border: 1px solid #dce3de !important;
}


/* =========================================================
   BADGES / STATUS
   ========================================================= */

.badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge-success,
.status-active {
    background: #e7f6eb;
    color: #18743b;
}

.badge-danger,
.status-inactive {
    background: #fdeceb;
    color: #b42e25;
}

.badge-warning {
    background: #fff6dc;
    color: #8a6811;
}

.badge-info {
    background: #eaf3fb;
    color: #24618e;
}


/* =========================================================
   PERMISSIONS / RBAC
   ========================================================= */

.permission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.permission-card,
.permission-item {
    background: #fafcfb;
    border: 1px solid #dfe7e1;
    border-radius: 11px;
    padding: 15px;
    transition: all .2s ease;
}

.permission-card:hover,
.permission-item:hover {
    border-color: #9db5a2;
    background: #f5faf6;
}

.permission-card input[type="checkbox"],
.permission-item input[type="checkbox"] {
    accent-color: var(--dnp-green);
    width: auto;
    margin-right: 8px;
}


/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.notification-item {
    background: #fff;
    border-bottom: 1px solid var(--dnp-border);
    padding: 15px 17px;
    transition: background .2s ease;
}

.notification-item:hover {
    background: #f7faf8;
}

.notification-item.unread {
    background: #eef7f0;
    border-left: 3px solid var(--dnp-green);
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-box input {
    padding-left: 40px;
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a958e;
}


/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    border-radius: 10px;
    padding: 13px 16px;
    border: 1px solid transparent;
    font-size: 14px;
}

.alert-success {
    background: #edf8f0;
    color: #196b35;
    border-color: #cce8d2;
}

.alert-danger {
    background: #fff0ee;
    color: #a62d24;
    border-color: #f0c9c4;
}

.alert-warning {
    background: #fff8e7;
    color: #7b5c11;
    border-color: #efdda8;
}


/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-page,
.admin-login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(201,162,39,.10), transparent 35%),
        linear-gradient(135deg, #f4f7f4, #edf3ee);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}

.login-card,
.admin-login-card {
    width: 100%;
    max-width: 440px;
    background: rgba(255,255,255,.97);
    border: 1px solid #e0e7e1;
    border-radius: 18px;
    padding: 35px;
    box-shadow: 0 25px 70px rgba(13,48,23,.12);
}

.login-card h1,
.admin-login-card h1 {
    color: var(--dnp-green);
    font-size: 27px;
    margin-bottom: 8px;
}

.login-card .subtitle,
.admin-login-card .subtitle {
    color: var(--dnp-muted);
    font-size: 14px;
    margin-bottom: 25px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .dashboard-cards,
    .stats-grid,
    .stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .permission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-cards,
    .stats-grid,
    .stats-cards,
    .permission-grid {
        grid-template-columns: 1fr;
    }

    .admin-header,
    .dashboard-header {
        padding: 15px 18px;
    }

    .admin-card,
    .content-card,
    .panel,
    .card {
        padding: 17px;
    }

    .login-card,
    .admin-login-card {
        padding: 25px 20px;
    }

    .admin-sidebar,
    .sidebar {
        box-shadow: none;
    }
}

@media (max-width: 480px) {
    .dashboard-card .number,
    .stat-card .number {
        font-size: 25px;
    }

    thead th,
    tbody td {
        padding: 10px 11px;
    }
}













/* From Uiverse.io by zjssun */ 
button {
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
 
  text-shadow: none;
  background: transparent;
  cursor: pointer;
  box-shadow: transparent;
  border: 1px solid #ffffff80;
  transition: 0.5s ease;
  user-select: none;
}


.pf-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.pf-card{text-align:center}.pf-card h2{margin:10px 0 2px}
.pf-avatar{width:110px;height:110px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,#174b25,#2a8a45);color:#fff;font:700 38px "DM Sans",sans-serif;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 22px rgba(23,75,37,.3)}
.pf-avatar img{width:100%;height:100%;object-fit:cover}
.pf-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin:16px 0}
.pf-facts div{background:#f6f7f4;border-radius:10px;padding:10px}.pf-facts span{display:block;font-size:11px;color:#6b7280}.pf-facts b{font-size:13px}
#contentForm label{display:block;font-weight:700;margin-bottom:5px}#contentForm input,#contentForm textarea{width:100%}
@media(max-width:900px){.pf-grid{grid-template-columns:1fr}}

.headright{display:flex;align-items:center;gap:10px}
.avatar-wrap{position:relative}
.avatar-wrap .avatar{user-select:none;transition:.2s}
.avatar-wrap .avatar:hover{transform:scale(1.08);box-shadow:0 0 0 3px rgba(23,75,37,.25)}
.avatar-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);min-width:230px;background:#fff;border:1px solid #e5e1d4;border-radius:14px;box-shadow:0 16px 40px rgba(16,42,23,.2);z-index:100;overflow:hidden}
.avatar-menu.open{display:block}
.avatar-menu .am-head{padding:14px 16px;background:linear-gradient(135deg,#eaf3ea,#fff5dc);display:flex;flex-direction:column;gap:2px}
.avatar-menu .am-head b{font-size:14px;color:#172018}.avatar-menu .am-head span{font-size:12px;color:#6b7280;word-break:break-all}
.avatar-menu .am-head em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;color:#174b25;margin-top:4px}
.avatar-menu a{display:block;padding:12px 16px;color:#172018;text-decoration:none;font-size:14px;font-weight:600}
.avatar-menu a:hover{background:#f1f4ef;color:#174b25}

.tsearch{display:flex;align-items:center;gap:8px;background:#f6f7f4;border:1.5px solid #e5e1d4;border-radius:999px;padding:4px 14px;margin:0 0 12px;max-width:420px;transition:.2s}
.tsearch:focus-within{border-color:#f59e0b;background:#fff;box-shadow:0 0 0 4px rgba(245,158,11,.16)}
.tsearch input{flex:1;border:0!important;outline:0;background:transparent!important;padding:9px 0!important;font-size:14px;min-width:0;box-shadow:none!important}
.tsearch .tcount{font-style:normal;font-size:11px;color:#6b7280;white-space:nowrap}
tr.tsearch-empty td{text-align:center;padding:22px}

.lead-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.action-btn.call-btn{background:#e0f2fe;color:#075985;border-color:#bae6fd}
.action-btn.wa-btn{background:#25d366;color:#fff;border-color:#25d366}
.action-btn.wa-btn:hover{background:#1ebe5b}.action-btn.call-btn:hover{background:#0284c7;color:#fff}
.wa-template{background:#f0fbf4;border:1px solid #c9ecd6;border-radius:12px;padding:12px 16px;margin:0 0 14px}
.wa-template summary{cursor:pointer;font-weight:700}.wa-template summary small{font-weight:400;color:#6b7280}
.wa-template textarea{width:100%;margin-top:10px}.wa-template code{background:#fff;padding:1px 6px;border-radius:6px}

/* =========================================================
   SIDEBAR (flat list, no dropdowns) - same on every page
   ========================================================= */
.side{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:28px}
.side nav{flex:1 1 auto;display:block}
.side nav a{display:flex;align-items:center;gap:10px;margin:3px 0;padding:11px 13px;font-size:14px;line-height:1.2}
.side nav .nav-ico{width:20px;text-align:center;flex:0 0 20px;font-size:14px}
.side nav .nav-label{flex:1;min-width:0}
/* unread-notification number: 1 2 3 ... */
.nav-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e5484d;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px #123d20;animation:navBadgePop .35s ease}
.nav-badge[hidden]{display:none}
.side nav a.active .nav-badge,.side nav a:hover .nav-badge{box-shadow:0 0 0 2px #e7dfc9}
@keyframes navBadgePop{0%{transform:scale(.4)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.side nav a.logout-link{margin-top:14px;border-top:1px solid rgba(255,255,255,.12);border-radius:10px;padding-top:13px;color:#ffd9d6}
.side nav a.logout-link:hover{background:rgba(255,255,255,.1);color:#fff;transform:none}
.menu{min-width:42px;min-height:42px;font-size:18px;line-height:1}
@media(max-width:1024px){.side{width:min(290px,86vw)}}


/* =========================================================
   ENQUIRIES: new-enquiry indicators
   ========================================================= */
.enq-count{display:inline-block;margin-left:10px;padding:3px 11px;border-radius:999px;background:#e5484d;color:#fff;font:700 12px 'DM Sans',sans-serif;vertical-align:middle}
.enq-count[hidden]{display:none}
.new-pill{display:inline-block;padding:2px 8px;margin-right:4px;border-radius:999px;background:#e5484d;color:#fff;font:700 10px 'DM Sans',sans-serif;letter-spacing:.06em;vertical-align:middle}
tr.enq-new td{background:#fff8ec}
tr.enq-new td:first-child{box-shadow:inset 3px 0 0 #e5484d}
tr.enq-flash td{animation:enqFlash 2.4s ease}
@keyframes enqFlash{0%,40%{background:#ffe1a8}100%{background:#fff8ec}}

/* ---- responsive supplement: grid children may shrink, so inner tables scroll instead of stretching the page ---- */
.pf-grid > *, .grid2 > *, .app > main, main > *, .panel { min-width: 0; }
.panel { max-width: 100%; }
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pf-facts { grid-template-columns: minmax(0, 1fr); }
  .panel { padding-left: 14px; padding-right: 14px; }
  .pt { flex-wrap: wrap; gap: 10px; }
  .toolbar { flex-wrap: wrap; }
  .api-form input, .api-form select, .api-form textarea, .panel input, .panel select, .panel textarea { font-size: 16px; max-width: 100%; }
  .primary-btn, .action-btn, .soft-btn { min-height: 40px; }
}