/* ============================================================
   EXPENSE MANAGER — Design System v2
   Elegant · Clean · Professional
   ============================================================ */

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

:root {
  --bg:         #F7F5F0;
  --surface:    #FFFFFF;
  --surface-2:  #F2EFE9;
  --ink:        #1C1917;
  --ink-2:      #57534E;
  --ink-3:      #A8A29E;
  --gold:       #C4924A;
  --gold-lt:    #F5E8D3;
  --teal:       #2D6A5E;
  --teal-lt:    #D4EAE5;
  --red:        #B84040;
  --red-lt:     #FDECEA;
  --green:      #2D6B44;
  --green-lt:   #D4EDDE;
  --border:     rgba(28,25,23,0.10);
  --border-md:  rgba(28,25,23,0.18);
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06);
  --shadow:     0 4px 20px rgba(0,0,0,0.07);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10);
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --t: 0.2s ease;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:var(--font-sans);cursor:pointer}
input,select,textarea{font-family:var(--font-sans)}

/* LAYOUT */
.em-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.em-page{padding:32px 0 64px}

/* NAV */
.em-nav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.em-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.em-nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:1.2rem;color:var(--ink);white-space:nowrap}
.em-nav__brand-icon{width:32px;height:32px;background:var(--ink);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px}
.em-nav__links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.em-nav__link{font-size:0.78rem;font-weight:400;color:var(--ink-2);padding:5px 12px;border-radius:999px;border:1px solid transparent;transition:all var(--t);white-space:nowrap}
.em-nav__link:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border)}
.em-nav__link--admin{background:var(--teal);color:#fff;border-color:var(--teal)}
.em-nav__link--admin:hover{background:#235549;color:#fff}
.em-nav__link--logout{background:var(--ink);color:#fff;border-color:var(--ink)}
.em-nav__link--logout:hover{background:#2c2622;color:#fff}

/* PAGE HEADER */
.em-page-header{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.em-page-header__eyebrow{font-size:0.7rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.em-page-header__title{font-family:var(--font-serif);font-size:2rem;font-weight:400;color:var(--ink);line-height:1.15}
.em-page-header__sub{font-size:0.9rem;color:var(--ink-2);margin-top:4px}

/* CARDS */
.em-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.em-card__title{font-family:var(--font-serif);font-size:1.1rem;color:var(--ink);margin-bottom:16px}

/* STAT CARDS */
.em-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.em-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);transition:box-shadow var(--t),transform var(--t)}
.em-stat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.em-stat__label{font-size:0.72rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3)}
.em-stat__value{font-family:var(--font-serif);font-size:1.75rem;color:var(--ink);line-height:1.1}
.em-stat__sub{font-size:0.75rem;color:var(--ink-3)}
.em-stat--gold{border-top:3px solid var(--gold)}
.em-stat--teal{border-top:3px solid var(--teal)}
.em-stat--green{border-top:3px solid var(--green)}
.em-stat--ink{border-top:3px solid var(--ink)}

/* ALERTS */
.em-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius);font-size:0.875rem;margin-bottom:20px;border:1px solid transparent}
.em-alert--success{background:var(--green-lt);color:var(--green);border-color:#b2d9c0}
.em-alert--error{background:var(--red-lt);color:var(--red);border-color:#f0bfbf}
.em-alert--info{background:var(--gold-lt);color:#7a5a28;border-color:#e0c998}

/* FORMS */
.em-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:16px}
.em-form-group{display:flex;flex-direction:column;gap:5px}
.em-label{font-size:0.78rem;font-weight:500;color:var(--ink-2)}
.em-input,.em-select,.em-textarea{width:100%;padding:9px 12px;border:1px solid var(--border-md);border-radius:var(--radius);font-size:0.9rem;color:var(--ink);background:var(--surface);transition:border-color var(--t),box-shadow var(--t);appearance:none;-webkit-appearance:none}
.em-input:focus,.em-select:focus,.em-textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,146,74,0.12)}
.em-textarea{resize:vertical;min-height:72px}
.em-select{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='%2357534E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* BUTTONS */
.em-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:0.85rem;font-weight:500;padding:9px 20px;border-radius:var(--radius);border:1px solid transparent;transition:all var(--t);cursor:pointer;white-space:nowrap}
.em-btn--primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.em-btn--primary:hover{background:#2c2622}
.em-btn--gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.em-btn--gold:hover{background:#aa7c3e}
.em-btn--ghost{background:transparent;color:var(--ink-2);border-color:var(--border-md)}
.em-btn--ghost:hover{background:var(--surface-2);color:var(--ink)}
.em-btn--danger{background:var(--red);color:#fff;border-color:var(--red)}
.em-btn--danger:hover{background:#9e3636}
.em-btn--teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.em-btn--teal:hover{background:#235549}
.em-btn--sm{font-size:0.75rem;padding:5px 12px}
.em-btn:disabled{opacity:.45;cursor:not-allowed}

/* TABLE */
.em-table-wrap{overflow-x:auto}
.em-table{width:100%;border-collapse:collapse;font-size:0.875rem}
.em-table th{font-size:0.7rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:2px solid var(--border);text-align:left;white-space:nowrap}
.em-table td{padding:11px 12px;border-bottom:1px solid var(--border);color:var(--ink-2);vertical-align:middle}
.em-table tbody tr:last-child td{border-bottom:none}
.em-table tbody tr:hover td{background:var(--surface-2)}
.em-table .em-actions{display:flex;gap:6px}

/* BADGE */
.em-badge{display:inline-flex;align-items:center;font-size:0.68rem;font-weight:500;padding:2px 8px;border-radius:999px}
.em-badge--gold{background:var(--gold-lt);color:#7a5628}
.em-badge--teal{background:var(--teal-lt);color:var(--teal)}
.em-badge--green{background:var(--green-lt);color:var(--green)}
.em-badge--red{background:var(--red-lt);color:var(--red)}
.em-badge--muted{background:var(--surface-2);color:var(--ink-3)}

/* BUDGET BARS */
.em-budget-row{display:grid;grid-template-columns:1fr 160px 90px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:0.875rem}
.em-budget-row:last-child{border-bottom:none}
.em-budget-name{font-weight:500;color:var(--ink)}
.em-budget-amounts{font-size:0.78rem;color:var(--ink-3)}
.em-bar-track{height:5px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-top:4px}
.em-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .5s ease}
.em-bar-fill--over{background:linear-gradient(90deg,var(--gold),var(--red))}

/* ACCORDION */
.em-accordion{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;background:var(--surface)}
.em-accordion summary{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:0.9rem;font-weight:500;color:var(--ink);cursor:pointer;user-select:none;list-style:none;transition:background var(--t)}
.em-accordion summary::-webkit-details-marker{display:none}
.em-accordion summary:hover{background:var(--surface-2)}
.em-accordion summary::after{content:'+';font-size:1.2rem;font-weight:300;color:var(--ink-3);flex-shrink:0}
.em-accordion[open] summary::after{content:'−'}
.em-accordion[open] summary{border-bottom:1px solid var(--border)}
.em-accordion__body{padding:20px}

/* AUTH */
.em-auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(196,146,74,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 60% at 80% 90%,rgba(45,106,94,.07) 0%,transparent 60%),var(--bg)}
.em-auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:40px 36px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.em-auth-logo{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:28px;text-align:center}
.em-auth-logo__icon{width:48px;height:48px;background:var(--ink);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:4px}
.em-auth-logo__name{font-family:var(--font-serif);font-size:1.4rem;color:var(--ink)}
.em-auth-logo__sub{font-size:0.82rem;color:var(--ink-3)}
.em-auth-links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px;font-size:0.82rem;color:var(--ink-2)}
.em-auth-links a{color:var(--gold);font-weight:500}
.em-auth-links a:hover{text-decoration:underline}

/* CHARTS */
.em-charts-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.em-chart-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.em-chart-box__title{font-size:0.78rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.em-chart-box canvas{width:100%!important;max-height:220px}

/* FOOTER */
.em-footer{text-align:center;font-size:0.75rem;color:var(--ink-3);padding:32px 0 16px;border-top:1px solid var(--border);margin-top:40px}

/* RESPONSIVE */
@media(max-width:768px){
  .em-nav__link{font-size:.7rem;padding:4px 7px}
  .em-form-grid{grid-template-columns:1fr}
  .em-stats-grid{grid-template-columns:1fr 1fr}
  .em-budget-row{grid-template-columns:1fr;gap:6px}
  .em-charts-two{grid-template-columns:1fr}
  .em-auth-card{padding:28px 20px}
}
@media(max-width:480px){
  .em-stats-grid{grid-template-columns:1fr}
  .em-wrap{padding:0 16px}
}
@media print{
  .em-nav,.em-btn,.em-form-grid{display:none!important}
  body{background:#fff}
}

/* ACTIVE NAV LINK */
.em-nav__link--active{background:var(--surface-2);color:var(--ink)!important;border-color:var(--border);}
.em-nav__link--active-admin{outline:2px solid rgba(255,255,255,0.5);}

/* EXTRA STAT VARIANTS */
.em-stat--red{border-top:3px solid var(--red)}
.em-stat--green{border-top:3px solid var(--green)}