/* ============================================================
   DMP License Dashboard — Adminty-inspired design
   Bootstrap 5 · Google Fonts · Gradient sidebar · Card UI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
  --primary:       #4099ff;
  --primary-dark:  #3a87ef;
  --primary-light: #73b4ff;
  --success:       #2ed8b6;
  --warning:       #FFB64D;
  --danger:        #ff5370;
  --info:          #58d8a3;
  --purple:        #8c78ef;
  --pink:          #f47dc6;
  --sidebar-bg:    #3f4d67;
  --sidebar-dark:  #2f3b52;
  --header-bg:     #fff;
  --body-bg:       #f4f7fa;
  --card-bg:       #fff;
  --text:          #222;
  --text-muted:    #919aa3;
  --border:        #e2e5e8;
  --radius:        5px;
  --shadow:        0 2px 10px rgba(0,0,0,.08);
  --shadow-lg:     0 5px 20px rgba(0,0,0,.12);
  --sidebar-w:     230px;
  --header-h:      56px;
  --tr:            .2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Open Sans',sans-serif;background:var(--body-bg);color:var(--text);font-size:14px;line-height:1.6;}
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(--sidebar-w);
  background:var(--sidebar-bg);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  position:sticky;top:0;
  height:100vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--sidebar-dark) transparent;
}
.dmp-sidebar::-webkit-scrollbar{width:4px;}
.dmp-sidebar::-webkit-scrollbar-thumb{background:var(--sidebar-dark);border-radius:99px;}

/* Brand */
.dmp-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 18px;
  height:var(--header-h);
  background:var(--sidebar-dark);
  flex-shrink:0;
}
.dmp-brand-icon{
  width:35px;height:35px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:#fff;
  flex-shrink:0;
}
.dmp-brand-name{font-size:.92rem;font-weight:700;color:#fff;letter-spacing:.2px;}
.dmp-brand-sub{font-size:.68rem;color:rgba(255,255,255,.5);margin-top:1px;}

/* Nav */
.dmp-nav{padding:16px 0;flex:1;}
.dmp-nav-section{
  font-size:.68rem;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(255,255,255,.35);
  padding:14px 20px 6px;
}
.dmp-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 20px;
  color:rgba(255,255,255,.65);
  font-size:.85rem;font-weight:400;
  border-left:3px solid transparent;
  transition:all var(--tr);
  cursor:pointer;
}
.dmp-nav-item:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
  border-left-color:var(--primary);
}
.dmp-nav-item.active{
  background:linear-gradient(90deg,rgba(64,153,255,.25),rgba(64,153,255,.05));
  color:#fff;
  border-left-color:var(--primary);
  font-weight:600;
}
.dmp-nav-icon{width:18px;text-align:center;font-size:.9rem;flex-shrink:0;}
.dmp-nav-sep{height:1px;background:rgba(255,255,255,.08);margin:10px 16px;}
.dmp-nav-item.dmp-logout{color:rgba(255,100,100,.7);}
.dmp-nav-item.dmp-logout:hover{background:rgba(255,83,112,.1);color:#ff5370;border-left-color:#ff5370;}

/* ── Topbar / Header ── */
.dmp-topbar{
  height:var(--header-h);
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.dmp-page-title{font-size:1rem;font-weight:600;color:var(--text);}
.dmp-breadcrumb{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-muted);margin-top:2px;}
.dmp-breadcrumb span{color:var(--primary);}
.dmp-topbar-left{display:flex;flex-direction:column;}
.dmp-topbar-right{display:flex;align-items:center;gap:14px;}
.dmp-admin-chip{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px 5px 6px;
  background:var(--body-bg);
  border:1px solid var(--border);
  border-radius:99px;
  font-size:.8rem;font-weight:500;
  cursor:pointer;
  transition:background var(--tr);
}
.dmp-admin-chip:hover{background:#eaf1ff;}
.dmp-admin-avatar{
  width:26px;height:26px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#fff;
}

/* ── Alert / Flash ── */
.dmp-alert{
  margin:16px 24px 0;
  padding:12px 16px;
  border-radius:var(--radius);
  font-size:.875rem;
  display:flex;align-items:center;gap:10px;
  border-left:4px solid;
}
.dmp-alert-success{background:#e8fdf5;border-color:var(--success);color:#1a9a7a;}
.dmp-alert-error{background:#fff0f3;border-color:var(--danger);color:#cc2240;}

/* ── Content ── */
.dmp-content{padding:24px;flex:1;}

/* ── Stat cards ── */
.dmp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px;}

.dmp-stat-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow var(--tr),transform var(--tr);
}
.dmp-stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}

.dmp-stat-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 14px;
}
.dmp-stat-body{}
.dmp-stat-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:5px;}
.dmp-stat-value{font-size:1.65rem;font-weight:700;color:var(--text);letter-spacing:-.5px;line-height:1;}
.dmp-stat-sub{font-size:.75rem;color:var(--text-muted);margin-top:4px;}
.dmp-stat-icon{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
}
/* colored bottom bar */
.dmp-stat-bar{height:4px;}
.dmp-stat-card:nth-child(1) .dmp-stat-bar{background:linear-gradient(90deg,#4099ff,#73b4ff);}
.dmp-stat-card:nth-child(2) .dmp-stat-bar{background:linear-gradient(90deg,#2ed8b6,#58d8a3);}
.dmp-stat-card:nth-child(3) .dmp-stat-bar{background:linear-gradient(90deg,#FFB64D,#ffcb7d);}
.dmp-stat-card:nth-child(4) .dmp-stat-bar{background:linear-gradient(90deg,#ff5370,#ff8397);}
.dmp-stat-card:nth-child(1) .dmp-stat-icon{background:#e8f1ff;color:var(--primary);}
.dmp-stat-card:nth-child(2) .dmp-stat-icon{background:#e6faf6;color:var(--success);}
.dmp-stat-card:nth-child(3) .dmp-stat-icon{background:#fff5e6;color:var(--warning);}
.dmp-stat-card:nth-child(4) .dmp-stat-icon{background:#fff0f3;color:var(--danger);}

/* ── Cards ── */
.dmp-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px;overflow:hidden;}
.dmp-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.dmp-card-head h3{font-size:.9rem;font-weight:700;color:var(--text);}
.dmp-card-body{padding:20px;}
.dmp-p0,.dmp-p0 .dmp-card-body{padding:0;}
.dmp-empty{text-align:center;color:var(--text-muted);padding:36px;font-size:.875rem;}
.dmp-link{font-size:.8rem;color:var(--primary);font-weight:600;}
.dmp-link:hover{text-decoration:underline;}

/* Grid */
.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:6px;}
.dmp-bar-tip{font-size:.68rem;color:var(--text-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(--primary) 0%,var(--primary-light) 100%);
  transition:opacity .2s;
  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;}
.dmp-bar-label{font-size:.68rem;color:var(--text-muted);white-space:nowrap;}

/* Package rows */
.dmp-pkg-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.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:.875rem;color:var(--text);}
.dmp-pkg-cnt{font-size:.78rem;color:var(--text-muted);}
.dmp-pkg-rev{font-size:.875rem;font-weight:700;color:var(--text);}

/* ── Tables ── */
.dmp-table{width:100%;border-collapse:collapse;font-size:.875rem;}
.dmp-table th{
  text-align:left;padding:11px 16px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--text-muted);
  background:#f8f9fb;
  border-bottom:2px solid var(--border);
}
.dmp-table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);}
.dmp-table tr:last-child td{border-bottom:none;}
.dmp-table tbody tr:hover td{background:#f4f7fa;}
.dmp-sub{font-size:.75rem;color:var(--text-muted);margin-top:2px;}
.dmp-key{
  font-family:'Courier New',monospace;font-size:.78rem;
  background:#f0f4ff;border:1px solid #d4e1ff;
  padding:3px 8px;border-radius:3px;color:var(--primary);
  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(--text-muted);}
.dmp-sites-used{font-size:.82rem;font-weight:600;color:var(--text);}
.dmp-domain-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.dmp-domain-list span{font-size:.7rem;background:#e8f1ff;color:var(--primary);padding:1px 7px;border-radius:3px;}

/* ── Badges & Status ── */
.dmp-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.2px;}
.dmp-badge-starter{background:#e6faf6;color:#1a9a7a;}
.dmp-badge-business{background:#e8f1ff;color:var(--primary);}
.dmp-badge-agency{background:#f1eeff;color:var(--purple);}
.dmp-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:600;}
.dmp-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.dmp-status-active,.dmp-status-completed{background:#e6faf6;color:#1a9a7a;}
.dmp-status-inactive,.dmp-status-refunded{background:#f4f7fa;color:var(--text-muted);}
.dmp-status-revoked,.dmp-status-disputed{background:#fff0f3;color:var(--danger);}
.dmp-status-expired,.dmp-status-pending{background:#fff5e6;color:var(--warning);}

/* ── Buttons ── */
.dmp-btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;border:none;
  padding:9px 18px;border-radius:var(--radius);
  font-size:.85rem;font-weight:600;font-family:'Open Sans',sans-serif;
  cursor:pointer;transition:all var(--tr);
  box-shadow:0 2px 8px rgba(64,153,255,.35);
  text-decoration:none;
}
.dmp-btn-primary:hover{box-shadow:0 4px 14px rgba(64,153,255,.5);transform:translateY(-1px);}
.dmp-btn-primary:active{transform:translateY(0);}
.dmp-btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--text);
  border:1px solid var(--border);
  padding:8px 16px;border-radius:var(--radius);
  font-size:.85rem;font-weight:500;font-family:'Open Sans',sans-serif;
  cursor:pointer;transition:all var(--tr);text-decoration:none;
}
.dmp-btn-secondary:hover{background:#f4f7fa;border-color:#ccc;}
.dmp-btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:var(--text-muted);border:none;
  padding:7px 12px;border-radius:var(--radius);
  font-size:.85rem;font-family:'Open Sans',sans-serif;
  cursor:pointer;transition:all var(--tr);text-decoration:none;
}
.dmp-btn-ghost:hover{background:#f4f7fa;color:var(--text);}
.dmp-btn-sm{
  display:inline-flex;align-items:center;gap:5px;
  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:#fff0f3;color:var(--danger);border-color:#ffd0d8;}
.dmp-btn-danger:hover{background:#ffe0e5;}
.dmp-btn-success{background:#e6faf6;color:#1a9a7a;border-color:#b4edde;}
.dmp-btn-success:hover{background:#d0f4ec;}
.dmp-btn-block{width:100%;justify-content:center;}

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

/* ── Inputs ── */
.dmp-input{
  background:#fff;border:1px solid #dde1e7;border-radius:var(--radius);
  padding:8px 12px;font-size:.85rem;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(--primary);box-shadow:0 0 0 3px rgba(64,153,255,.15);}
.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='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23919aa3' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;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(--text-muted);font-size:.85rem;}
.dmp-input-prefix .dmp-input{border-radius:0 var(--radius) var(--radius) 0;}

/* Fields */
.dmp-field{margin-bottom:16px;}
.dmp-field label{display:block;font-size:.8rem;font-weight:600;color:#555;margin-bottom:6px;}
.dmp-help-text{font-size:.75rem;color:var(--text-muted);margin-top:5px;display:block;}
.dmp-help-text a,.dmp-help-text code{color:var(--primary);}
.req{color:var(--danger);}

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

/* ── Modal ── */
.dmp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);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:8px;width:100%;max-width:460px;box-shadow:0 10px 40px rgba(0,0,0,.2);animation:slideUp .2s cubic-bezier(.34,1.56,.64,1);}
@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.dmp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.dmp-modal-head h3{margin:0;font-size:.95rem;font-weight:700;}
.dmp-modal-close{background:#f4f7fa;border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all var(--tr);}
.dmp-modal-close:hover{background:#eaecef;}
.dmp-modal-body{padding:20px;}
.dmp-modal-foot{display:flex;gap:10px;padding:0 20px 20px;}

/* ── Settings ── */
.dmp-settings-section{margin-bottom:24px;}
.dmp-settings-section h4{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}

/* ── Login ── */
.dmp-login-page{
  background:var(--body-bg);
  background-image: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:8px;padding:40px 36px;box-shadow:0 10px 40px rgba(0,0,0,.2);}
.dmp-login-brand{text-align:center;margin-bottom:30px;}
.dmp-login-logo{width:60px;height:60px;background:linear-gradient(135deg,var(--primary),var(--purple));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 14px;}
.dmp-login-title{font-size:1.3rem;font-weight:700;color:var(--text);margin-bottom:4px;}
.dmp-login-sub{font-size:.85rem;color:var(--text-muted);}
.dmp-login-form{display:flex;flex-direction:column;gap:14px;}
.dmp-login-form label{font-size:.8rem;font-weight:600;color:#555;display:block;margin-bottom:5px;}

/* ── 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:16px;}}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:#f4f7fa;}
::-webkit-scrollbar-thumb{background:#dde1e7;border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:#c5ccd6;}