/* Many More Plugin Dashboard — style.css */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
    --cream:    #f5f4ed;
    --purple:   #392f52;
    --orange:   #f4b573;
    --white:    #ffffff;
    --teal:     #76dce2;
    --pink:     #ed7095;
    --text:     #392f52;
    --muted:    #8c7fa8;
    --border:   #e4e2d8;
    --surface:  #ffffff;
    --status-green:   #4caf81;
    --status-orange:  #f4b573;
    --status-red:     #ed7095;
    --status-blue:    #76dce2;
    --sidebar-w: 240px;
    --radius:    10px;
    --shadow:    0 2px 12px rgba(57,47,82,.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--pink); }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cream); }
.login-box { background: var(--white); border-radius: 16px; padding: 48px; width: 100%; max-width: 400px; box-shadow: var(--shadow); text-align: center; }
.login-box .logo { font-family: 'DM Serif Display', serif; font-size: 2rem; color: var(--purple); margin-bottom: 4px; }
.login-box .logo span { color: var(--pink); }
.login-box .subtitle { color: var(--muted); font-size: 0.85rem; margin-bottom: 32px; }
.login-box input[type="password"] { width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 1rem; color: var(--text); background: var(--cream); outline: none; transition: border-color .2s; margin-bottom: 16px; }
.login-box input[type="password"]:focus { border-color: var(--purple); }
.login-box .error { background: #fdeef3; color: var(--pink); border-radius: var(--radius); padding: 10px 14px; font-size: 0.875rem; margin-bottom: 16px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; border: none; transition: opacity .2s, transform .1s; text-decoration: none; }
.btn:hover { opacity: .85; }
.btn:active { transform: scale(.98); }
.btn-primary   { background: var(--purple); color: var(--white); width: 100%; justify-content: center; padding: 13px; font-size: 1rem; }
.btn-approve   { background: var(--teal);   color: var(--purple); }
.btn-blacklist { background: var(--pink);   color: var(--white); }
.btn-delete    { background: var(--cream);  color: var(--pink); border: 1px solid var(--pink); }
.btn-check     { background: var(--cream);  color: var(--purple); border: 1px solid var(--border); }
.btn-notes     { background: var(--cream);  color: var(--muted); border: 1px solid var(--border); font-size: 0.8rem; padding: 6px 12px; }
.btn-sm        { padding: 6px 12px; font-size: 0.8rem; }

/* Layout */
.layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: var(--sidebar-w); background: var(--purple); color: var(--white); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; padding: 32px 0; }
.sidebar-logo { font-family: 'DM Serif Display', serif; font-size: 1.5rem; color: var(--white); padding: 0 24px 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-logo span { color: var(--orange); }
.sidebar-logo small { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.7rem; color: rgba(255,255,255,.4); font-weight: 400; margin-top: 2px; letter-spacing: .05em; text-transform: uppercase; }
.sidebar nav { flex: 1; padding: 24px 0; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 11px 24px; color: rgba(255,255,255,.6); font-size: 0.9rem; font-weight: 400; transition: all .2s; border-left: 3px solid transparent; }
.sidebar nav a:hover { color: var(--white); background: rgba(255,255,255,.06); }
.sidebar nav a.active { color: var(--white); background: rgba(255,255,255,.08); border-left-color: var(--orange); font-weight: 500; }
.sidebar nav a .nav-icon { font-size: 1rem; width: 20px; text-align: center; }
.nav-badge { margin-left: auto; background: var(--pink); color: var(--white); font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; min-width: 20px; text-align: center; }
.sidebar-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-footer a { color: rgba(255,255,255,.4); font-size: 0.8rem; display: flex; align-items: center; gap: 8px; }
.sidebar-footer a:hover { color: rgba(255,255,255,.7); }

/* Main */
.main { margin-left: var(--sidebar-w); flex: 1; padding: 40px; max-width: calc(100vw - var(--sidebar-w)); }
.page-header { margin-bottom: 32px; }
.page-header h1 { font-family: 'DM Serif Display', serif; font-size: 1.9rem; color: var(--purple); font-weight: 400; }
.page-header p { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { background: var(--white); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); }
.stat-card .stat-value { font-family: 'DM Serif Display', serif; font-size: 2rem; color: var(--purple); line-height: 1; }
.stat-card .stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.stat-card.accent-orange .stat-value { color: var(--orange); }
.stat-card.accent-pink   .stat-value { color: var(--pink);   }
.stat-card.accent-teal   .stat-value { color: var(--teal);   }

/* Card */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 24px; overflow: hidden; }
.card-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-header h2 { font-family: 'DM Serif Display', serif; font-size: 1.15rem; font-weight: 400; color: var(--purple); }

/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead th { text-align: left; padding: 10px 16px; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; background: var(--cream); border-bottom: 1px solid var(--border); }
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #faf9f5; }

/* Status dot */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-green  { background: var(--status-green);  }
.dot-orange { background: var(--status-orange); }
.dot-red    { background: var(--status-red);    }
.dot-blue   { background: var(--status-blue);   }
.status-cell { display: flex; align-items: center; gap: 8px; }

/* Badge */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; }
.badge-staging   { background: #edf9fa; color: #2a9ba3; }
.badge-approved  { background: #edf7f2; color: #2d7a56; }
.badge-pending   { background: #fff4e6; color: #b5721a; }
.badge-blacklist { background: #fdeef3; color: var(--pink); }

/* Domain cell */
.domain-cell { font-weight: 500; }
.domain-cell small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; }

/* Actions */
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Version */
.version-current { color: var(--status-green); font-weight: 500; }
.version-old     { color: var(--orange); font-weight: 500; }
.version-old::after { content: ' ↑'; font-size: 0.75em; }

/* Notes */
.notes-text { font-size: 0.8rem; color: var(--muted); font-style: italic; margin-top: 2px; }

/* Empty state */
.empty-state { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state p { font-size: 0.9rem; }

/* Flash */
.flash { padding: 12px 18px; border-radius: var(--radius); margin-bottom: 24px; font-size: 0.9rem; font-weight: 500; }
.flash-success { background: #edf7f2; color: #2d7a56; }
.flash-error   { background: #fdeef3; color: var(--pink); }