@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --orange:   #ff784f;
  --orange-l: #ff8f6a;
  --green:    #11c15b;
  --green-l:  #2dd36f;
  --red:      #f44236;
  --red-l:    #f55f55;
  --teal:     #00bcd4;
  --teal-l:   #26c6da;
  --blue:     #4099ff;
  --blue-l:   #73b4ff;
  --purple:   #7c4dff;
  --sidebar:  #3f4d67;
  --sidebar-d:#303d54;
  --body:     #eceff1;
  --card:     #fff;
  --border:   #e2e5e8;
  --text:     #37474f;
  --muted:    #9aa4ac;
  --radius:   4px;
  --shadow:   0 1px 8px rgba(0,0,0,.08);
  --shadow-md:0 2px 14px rgba(0,0,0,.12);
  --sw:       230px;
  --hw:       56px;
  --tr:       .2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Open Sans',sans-serif;background:var(--body);color:var(--text);font-size:14px;line-height:1.5;}
a{text-decoration:none;color:inherit;}

/* ── Layout ── */
.dmp-layout{display:flex;min-height:100vh;}
.dmp-main{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════ */
.dmp-sidebar{
  width:var(--sw);background:var(--sidebar);
  display:flex;flex-direction:column;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:none;
}
.dmp-sidebar::-webkit-scrollbar{display:none;}

/* Brand */
.dmp-brand{
  height:var(--hw);display:flex;align-items:center;gap:8px;
  padding:0 18px;background:var(--sidebar-d);flex-shrink:0;
}
.dmp-brand-icon{
  width:32px;height:32px;background:var(--orange);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:.95rem;color:#fff;font-weight:700;flex-shrink:0;
}
.dmp-brand-name{font-size:.95rem;font-weight:700;color:#fff;letter-spacing:.3px;}
.dmp-brand-sub{font-size:.65rem;color:rgba(255,255,255,.45);margin-top:1px;}

/* Nav section labels */
.dmp-nav{padding:8px 0;flex:1;}
.dmp-nav-section{
  font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.3);padding:16px 20px 5px;
}
/* Nav items */
.dmp-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 20px;color:rgba(255,255,255,.65);
  font-size:.84rem;font-weight:400;
  border-left:3px solid transparent;
  transition:all var(--tr);cursor:pointer;
}
.dmp-nav-item:hover{background:rgba(255,255,255,.08);color:#fff;border-left-color:rgba(255,255,255,.3);}
.dmp-nav-item.active{
  background:rgba(255,120,79,.18);color:#fff;
  border-left-color:var(--orange);font-weight:600;
}
.dmp-nav-icon{font-size:.9rem;width:18px;text-align:center;flex-shrink:0;}
.dmp-nav-sep{height:1px;background:rgba(255,255,255,.07);margin:6px 16px;}
.dmp-nav-item.dmp-logout{color:rgba(255,100,100,.65);}
.dmp-nav-item.dmp-logout:hover{background:rgba(244,66,54,.12);color:#f44236;border-left-color:#f44236;}

/* ════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════ */
.dmp-topbar{
  height:var(--hw);background:var(--card);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;position:sticky;top:0;z-index:100;
  box-shadow:0 1px 5px rgba(0,0,0,.06);
}
.dmp-topbar-left{display:flex;flex-direction:column;gap:2px;}
.dmp-page-title{font-size:.95rem;font-weight:700;color:var(--text);}
.dmp-breadcrumb{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--muted);}
.dmp-breadcrumb span{color:var(--orange);}
.dmp-topbar-right{display:flex;align-items:center;gap:10px;}
.dmp-topbar-icon{
  width:34px;height:34px;border-radius:50%;background:var(--body);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:.85rem;cursor:pointer;color:var(--muted);transition:all var(--tr);position:relative;
}
.dmp-topbar-icon:hover{background:#fff;color:var(--text);}
.dmp-topbar-badge{
  position:absolute;top:-3px;right:-3px;
  width:16px;height:16px;background:var(--orange);
  border-radius:50%;font-size:.55rem;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.dmp-admin-chip{
  display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;
  background:var(--body);border:1px solid var(--border);border-radius:99px;
  font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--tr);
}
.dmp-admin-chip:hover{background:#fff;}
.dmp-admin-avatar{
  width:26px;height:26px;background:linear-gradient(135deg,var(--orange),#ffad85);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#fff;
}

/* ── Alert ── */
.dmp-alert{margin:14px 22px 0;padding:11px 16px;border-radius:var(--radius);font-size:.85rem;display:flex;align-items:center;gap:10px;border-left:4px solid;}
.dmp-alert-success{background:#e8faf0;border-color:var(--green);color:#0d7c3a;}
.dmp-alert-error{background:#fff0f0;border-color:var(--red);color:#c0392b;}

/* ════════════════════════════════════════════
   CONTENT
════════════════════════════════════════════ */
.dmp-content{padding:22px;flex:1;}

/* ════════════════════════════════════════════
   STAT CARDS — full colored background
════════════════════════════════════════════ */
.dmp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:22px;}

.dmp-stat-card{
  border-radius:var(--radius);overflow:hidden;
  position:relative;cursor:default;
  transition:transform var(--tr),box-shadow var(--tr);
}
.dmp-stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.dmp-stat-card:nth-child(1){background:linear-gradient(135deg,var(--orange),var(--orange-l));}
.dmp-stat-card:nth-child(2){background:linear-gradient(135deg,var(--green),var(--green-l));}
.dmp-stat-card:nth-child(3){background:linear-gradient(135deg,var(--red),var(--red-l));}
.dmp-stat-card:nth-child(4){background:linear-gradient(135deg,var(--teal),var(--teal-l));}

.dmp-stat-top{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 14px;}
.dmp-stat-body{flex:1;}
.dmp-stat-value{font-size:1.8rem;font-weight:700;color:#fff;letter-spacing:-.5px;line-height:1;}
.dmp-stat-label{font-size:.82rem;color:rgba(255,255,255,.85);margin-top:5px;font-weight:400;}
/* Mini bar chart area (decorative) */
.dmp-stat-bars{display:flex;align-items:flex-end;gap:2px;height:36px;}
.dmp-stat-bar-mini{
  width:8px;background:rgba(255,255,255,.5);border-radius:2px 2px 0 0;
}
.dmp-stat-bar-mini.hi{background:rgba(255,255,255,.9);}
/* Bottom timestamp strip */
.dmp-stat-foot{
  display:flex;align-items:center;gap:6px;
  padding:8px 20px;background:rgba(0,0,0,.1);
  font-size:.72rem;color:rgba(255,255,255,.8);
}

/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
.dmp-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px;overflow:hidden;}
.dmp-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:16px 20px 12px;border-bottom:1px solid #f3f5f7;
}
.dmp-card-head-left h3{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:2px;}
.dmp-card-head-left p{font-size:.75rem;color:var(--muted);}
.dmp-card-head-actions{display:flex;gap:6px;}
.dmp-card-action{width:26px;height:26px;border-radius:3px;background:#f4f7fa;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;color:var(--muted);transition:all var(--tr);}
.dmp-card-action:hover{background:#eaecef;color:var(--text);}
.dmp-card-body{padding:18px 20px;}
.dmp-p0,.dmp-p0 .dmp-card-body{padding:0;}
.dmp-empty{text-align:center;color:var(--muted);padding:36px;font-size:.875rem;}
.dmp-link{font-size:.8rem;color:var(--blue);font-weight:600;}
.dmp-link:hover{text-decoration:underline;}

/* Grid helpers */
.dmp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.dmp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}

/* ════════════════════════════════════════════
   BAR CHART
════════════════════════════════════════════ */
.dmp-bar-chart{display:flex;align-items:flex-end;gap:8px;height:150px;padding:8px 0 0;}
.dmp-bar-col{display:flex;flex-direction:column;align-items:center;flex:1;gap:5px;}
.dmp-bar-tip{font-size:.68rem;color:var(--muted);white-space:nowrap;font-weight:600;}
.dmp-bar{width:100%;border-radius:3px 3px 0 0;min-height:4px;background:linear-gradient(180deg,var(--orange) 0%,#ffad85 100%);animation:barRise .5s ease backwards;}
@keyframes barRise{from{transform:scaleY(0);opacity:0;}to{transform:scaleY(1);opacity:1;}}
.dmp-bar-col:nth-child(1) .dmp-bar{animation-delay:.05s;}
.dmp-bar-col:nth-child(2) .dmp-bar{animation-delay:.1s;}
.dmp-bar-col:nth-child(3) .dmp-bar{animation-delay:.15s;}
.dmp-bar-col:nth-child(4) .dmp-bar{animation-delay:.2s;}
.dmp-bar-col:nth-child(5) .dmp-bar{animation-delay:.25s;}
.dmp-bar-col:nth-child(6) .dmp-bar{animation-delay:.3s;}
.dmp-bar:hover{opacity:.8;cursor:pointer;}
.dmp-bar-label{font-size:.68rem;color:var(--muted);white-space:nowrap;}

/* Package rows */
.dmp-pkg-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f3f5f7;}
.dmp-pkg-row:last-child{border-bottom:none;}
.dmp-pkg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.dmp-pkg-name{flex:1;font-size:.85rem;}
.dmp-pkg-cnt{font-size:.75rem;color:var(--muted);}
.dmp-pkg-rev{font-size:.875rem;font-weight:700;}
.dmp-pkg-progress{height:4px;background:#f0f2f4;border-radius:99px;margin-top:5px;overflow:hidden;}
.dmp-pkg-progress-bar{height:100%;border-radius:99px;transition:width .8s ease;}

/* ════════════════════════════════════════════
   TABLE
════════════════════════════════════════════ */
.dmp-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.dmp-table th{text-align:left;padding:10px 16px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);background:#f8f9fb;border-bottom:2px solid var(--border);}
.dmp-table td{padding:12px 16px;border-bottom:1px solid #f3f5f7;vertical-align:middle;}
.dmp-table tr:last-child td{border-bottom:none;}
.dmp-table tbody tr:hover td{background:#fafbfc;}
.dmp-sub{font-size:.73rem;color:var(--muted);margin-top:2px;}
.dmp-key{font-family:'Courier New',monospace;font-size:.77rem;background:#f0f4ff;border:1px solid #d4e1ff;padding:2px 7px;border-radius:3px;color:var(--blue);cursor:pointer;display:inline-block;transition:background var(--tr);}
.dmp-key:hover{background:#ddeaff;}
.dmp-key-sm,.dmp-txn{font-family:'Courier New',monospace;font-size:.72rem;color:var(--muted);}
.dmp-sites-used{font-size:.82rem;font-weight:600;}
.dmp-domain-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.dmp-domain-list span{font-size:.68rem;background:#e8f1ff;color:var(--blue);padding:1px 6px;border-radius:3px;}

/* Badges */
.dmp-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.2px;}
.dmp-badge-starter{background:#e8faf0;color:#0d7c3a;}
.dmp-badge-business{background:#e8f1ff;color:var(--blue);}
.dmp-badge-agency{background:#f0eaff;color:var(--purple);}
.dmp-status{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:.7rem;font-weight:600;}
.dmp-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}
.dmp-status-active,.dmp-status-completed{background:#e8faf0;color:#0d7c3a;}
.dmp-status-inactive,.dmp-status-refunded{background:#f4f7fa;color:var(--muted);}
.dmp-status-revoked,.dmp-status-disputed{background:#fff0f0;color:var(--red);}
.dmp-status-expired,.dmp-status-pending{background:#fff5e6;color:#b7680a;}

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.dmp-btn-primary{display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;border:none;padding:9px 18px;border-radius:var(--radius);font-size:.84rem;font-weight:600;font-family:'Open Sans',sans-serif;cursor:pointer;transition:all var(--tr);box-shadow:0 2px 6px rgba(64,153,255,.35);text-decoration:none;}
.dmp-btn-primary:hover{background:var(--blue-l);box-shadow:0 4px 12px rgba(64,153,255,.45);transform:translateY(-1px);}
.dmp-btn-secondary{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--text);border:1px solid var(--border);padding:8px 16px;border-radius:var(--radius);font-size:.84rem;font-weight:500;font-family:'Open Sans',sans-serif;cursor:pointer;transition:all var(--tr);text-decoration:none;}
.dmp-btn-secondary:hover{background:#f4f7fa;}
.dmp-btn-ghost{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--muted);border:none;padding:7px 12px;border-radius:var(--radius);font-size:.84rem;font-family:'Open Sans',sans-serif;cursor:pointer;transition:all var(--tr);text-decoration:none;}
.dmp-btn-ghost:hover{background:#f0f2f4;color:var(--text);}
.dmp-btn-sm{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:3px;font-size:.75rem;font-weight:600;font-family:'Open Sans',sans-serif;cursor:pointer;border:1px solid;transition:all var(--tr);}
.dmp-btn-danger{background:#fff0f0;color:var(--red);border-color:#ffd0d0;}
.dmp-btn-danger:hover{background:#ffe0e0;}
.dmp-btn-success{background:#e8faf0;color:#0d7c3a;border-color:#b4edce;}
.dmp-btn-success:hover{background:#d4f4e3;}
.dmp-btn-block{width:100%;justify-content:center;}

/* Toolbar */
.dmp-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.dmp-search-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.dmp-total-label{font-size:.78rem;color:var(--muted);}
.dmp-actions{display:flex;gap:5px;}

/* Inputs */
.dmp-input{background:#fff;border:1px solid #dde1e7;border-radius:var(--radius);padding:8px 11px;font-size:.84rem;color:var(--text);font-family:'Open Sans',sans-serif;outline:none;transition:border-color var(--tr),box-shadow var(--tr);}
.dmp-input::placeholder{color:#b3bac0;}
.dmp-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(64,153,255,.12);}
.dmp-input-sm{max-width:160px;}
.dmp-input-block{width:100%;}
select.dmp-input{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%239aa4ac' d='M5 7L0 2h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px;appearance:none;}
.dmp-input-prefix{display:flex;align-items:center;}
.dmp-input-prefix span{padding:8px 10px;background:#f4f7fa;border:1px solid #dde1e7;border-right:none;border-radius:var(--radius) 0 0 var(--radius);color:var(--muted);font-size:.84rem;}
.dmp-input-prefix .dmp-input{border-radius:0 var(--radius) var(--radius) 0;}

/* Fields */
.dmp-field{margin-bottom:14px;}
.dmp-field label{display:block;font-size:.78rem;font-weight:600;color:#546e7a;margin-bottom:5px;}
.dmp-help-text{font-size:.72rem;color:var(--muted);margin-top:4px;display:block;}
.dmp-help-text a,.dmp-help-text code{color:var(--blue);}
.req{color:var(--red);}

/* Pagination */
.dmp-pagination{display:flex;gap:4px;margin-top:16px;}
.dmp-page-btn{padding:5px 11px;border-radius:3px;font-size:.78rem;font-weight:500;background:#fff;border:1px solid var(--border);color:var(--muted);text-decoration:none;transition:all var(--tr);}
.dmp-page-btn:hover{background:#f4f7fa;color:var(--text);}
.dmp-page-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 6px rgba(64,153,255,.3);}

/* Modal */
.dmp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.dmp-modal{background:#fff;border-radius:5px;width:100%;max-width:460px;box-shadow:0 8px 32px rgba(0,0,0,.18);animation:slideUp .2s cubic-bezier(.34,1.56,.64,1);}
@keyframes slideUp{from{transform:translateY(16px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.dmp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--border);}
.dmp-modal-head h3{margin:0;font-size:.9rem;font-weight:700;}
.dmp-modal-close{background:#f4f7fa;border:1px solid var(--border);color:var(--muted);width:26px;height:26px;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.78rem;transition:all var(--tr);}
.dmp-modal-close:hover{background:#eaecef;}
.dmp-modal-body{padding:18px 20px;}
.dmp-modal-foot{display:flex;gap:8px;padding:0 20px 18px;}

/* Login */
.dmp-login-page{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  display:flex;align-items:center;justify-content:center;min-height:100vh;
}
.dmp-login-wrap{width:100%;max-width:400px;padding:20px;}
.dmp-login-card{background:#fff;border-radius:5px;padding:38px 34px;box-shadow:0 8px 30px rgba(0,0,0,.2);}
.dmp-login-brand{text-align:center;margin-bottom:28px;}
.dmp-login-logo{width:58px;height:58px;background:linear-gradient(135deg,var(--orange),#ffad85);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 12px;box-shadow:0 4px 14px rgba(255,120,79,.35);}
.dmp-login-title{font-size:1.25rem;font-weight:700;color:var(--text);}
.dmp-login-sub{font-size:.82rem;color:var(--muted);margin-top:3px;}
.dmp-login-form{display:flex;flex-direction:column;gap:13px;}
.dmp-login-form label{font-size:.78rem;font-weight:600;color:#546e7a;display:block;margin-bottom:4px;}

/* Responsive */
@media(max-width:1100px){.dmp-stats-grid{grid-template-columns:repeat(2,1fr);}.dmp-grid-2{grid-template-columns:1fr;}}
@media(max-width:700px){.dmp-sidebar{display:none;}.dmp-stats-grid{grid-template-columns:1fr;}.dmp-content{padding:14px;}}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--body);}
::-webkit-scrollbar-thumb{background:#cfd8dc;border-radius:99px;}