/* Madison Bond Portal Demo - Design System */
:root {
  --mb-teal:       #0a4f6b;
  --mb-teal-dark:  #083d54;
  --mb-teal-light: #e6f0f4;
  --mb-gold:       #D4AF37;
  --mb-gold-light: #f5ebc1;
  --mb-white:      #FFFFFF;
  --mb-soft:       #f4f6f8;
  --mb-text:       #334155;
  --mb-text-light: #64748b;
  --mb-border:     #e2e8f0;
  --mb-success:    #16a34a;
  --mb-danger:     #dc2626;
  --mb-warning:    #d97706;
  --sidebar-w:     260px;
  --topbar-h:      60px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--mb-text);background:var(--mb-soft);}
a{color:var(--mb-teal);text-decoration:none;}
a:hover{color:var(--mb-teal-dark);}

/* ---- Login ---- */
.demo-login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mb-teal-dark),var(--mb-teal));}
.demo-login-card{background:var(--mb-white);border-radius:12px;padding:2.5rem;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.demo-login-card .logo{text-align:center;margin-bottom:1.5rem;}
.demo-login-card .logo h2{color:var(--mb-teal-dark);font-weight:800;letter-spacing:-.5px;}
.demo-login-card .logo span{color:var(--mb-gold);}
.demo-login-card .form-label{font-size:.85rem;font-weight:600;color:var(--mb-text-light);margin-bottom:.35rem;display:block;}
.demo-login-card .form-control{width:100%;padding:.65rem .85rem;border:1.5px solid var(--mb-border);border-radius:6px;font-size:.95rem;transition:border-color .15s;}
.demo-login-card .form-control:focus{outline:none;border-color:var(--mb-teal);}
.demo-btn{width:100%;padding:.75rem;border:none;border-radius:6px;font-weight:700;cursor:pointer;transition:all .15s;font-size:.95rem;}
.demo-btn-primary{background:var(--mb-teal);color:var(--mb-white);}
.demo-btn-primary:hover{background:var(--mb-teal-dark);}
.demo-btn-gold{background:var(--mb-gold);color:var(--mb-teal-dark);}
.demo-btn-gold:hover{background:#c4a030;}
.demo-btn-outline{background:transparent;border:2px solid var(--mb-teal);color:var(--mb-teal);}
.demo-btn-outline:hover{background:var(--mb-teal);color:var(--mb-white);}
.demo-roles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0;}
.demo-role-btn{padding:.55rem;border:2px solid var(--mb-border);border-radius:6px;background:var(--mb-white);cursor:pointer;text-align:center;font-size:.85rem;font-weight:600;color:var(--mb-text-light);transition:all .15s;}
.demo-role-btn.active,.demo-role-btn:hover{border-color:var(--mb-teal);color:var(--mb-teal);background:var(--mb-teal-light);}
.demo-hint{background:var(--mb-soft);border-radius:6px;padding:.75rem;font-size:.8rem;color:var(--mb-text-light);margin-top:1rem;}
.demo-hint code{background:var(--mb-white);padding:.1rem .35rem;border-radius:4px;border:1px solid var(--mb-border);font-family:monospace;}

/* ---- Layout ---- */
.demo-wrapper{display:flex;height:100vh;overflow:hidden;}
.demo-sidebar{width:var(--sidebar-w);background:var(--mb-teal-dark);color:var(--mb-white);display:flex;flex-direction:column;transition:transform .25s;}
.demo-sidebar-brand{padding:1.25rem;border-bottom:1px solid rgba(255,255,255,.08);}
.demo-sidebar-brand h3{font-weight:800;letter-spacing:-.5px;}
.demo-sidebar-brand h3 span{color:var(--mb-gold);}
.demo-sidebar-brand .sub{font-size:.72rem;color:rgba(255,255,255,.5);margin-top:.15rem;}
.demo-sidebar-nav{flex:1;overflow-y:auto;padding:.75rem 0;}
.demo-sidebar-nav a{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.25rem;color:rgba(255,255,255,.7);font-size:.88rem;font-weight:500;transition:all .15s;}
.demo-sidebar-nav a:hover,.demo-sidebar-nav a.active{color:var(--mb-white);background:rgba(255,255,255,.06);border-right:3px solid var(--mb-gold);}
.demo-sidebar-nav a i{width:20px;text-align:center;}
.demo-sidebar-footer{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem;color:rgba(255,255,255,.5);}
.demo-sidebar-footer .role-tag{display:inline-block;background:var(--mb-gold);color:var(--mb-teal-dark);padding:.15rem .5rem;border-radius:4px;font-size:.7rem;font-weight:700;margin-bottom:.4rem;}
.demo-main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.demo-topbar{height:var(--topbar-h);background:var(--mb-white);border-bottom:1px solid var(--mb-border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;}
.demo-topbar .left{display:flex;align-items:center;gap:.75rem;}
.demo-topbar .menu-toggle{display:none;background:none;border:none;font-size:1.1rem;color:var(--mb-text);cursor:pointer;}
.demo-topbar .title{font-weight:700;color:var(--mb-teal-dark);font-size:1.05rem;}
.demo-topbar .right{display:flex;align-items:center;gap:1rem;}
.demo-notif-btn{position:relative;background:none;border:none;font-size:1.1rem;color:var(--mb-text-light);cursor:pointer;padding:.4rem;}
.demo-notif-btn .badge{position:absolute;top:-2px;right:-2px;background:var(--mb-danger);color:var(--mb-white);font-size:.6rem;font-weight:700;padding:.15rem .35rem;border-radius:10px;}
.demo-avatar{width:34px;height:34px;border-radius:50%;background:var(--mb-teal);color:var(--mb-white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;}
.demo-page{flex:1;overflow-y:auto;padding:1.5rem;}
.demo-page-inner{max-width:1200px;margin:0 auto;}

/* ---- Cards ---- */
.demo-card{background:var(--mb-white);border-radius:10px;border:1px solid var(--mb-border);overflow:hidden;}
.demo-card-header{padding:1rem 1.25rem;border-bottom:1px solid var(--mb-border);display:flex;align-items:center;justify-content:space-between;}
.demo-card-header h5{font-weight:700;color:var(--mb-teal-dark);display:flex;align-items:center;gap:.5rem;}
.demo-card-body{padding:1.25rem;}
.demo-card-body p{font-size:.9rem;color:var(--mb-text-light);line-height:1.6;}
.demo-stat-card{background:var(--mb-white);border-radius:10px;border:1px solid var(--mb-border);padding:1.25rem;text-align:center;transition:transform .15s,box-shadow .15s;}
.demo-stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);}
.demo-stat-card .num{font-size:1.8rem;font-weight:800;color:var(--mb-teal);}
.demo-stat-card .num.gold{color:var(--mb-gold);}
.demo-stat-card .num.success{color:var(--mb-success);}
.demo-stat-card .lbl{font-size:.8rem;color:var(--mb-text-light);margin-top:.35rem;}

/* ---- Tables ---- */
.demo-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.demo-table th{text-align:left;padding:.75rem 1rem;background:var(--mb-soft);color:var(--mb-text-light);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--mb-border);}
.demo-table td{padding:.75rem 1rem;border-bottom:1px solid var(--mb-border);vertical-align:middle;}
.demo-table tr:hover td{background:rgba(10,79,107,.03);}
.demo-table .ticker{font-family:monospace;font-weight:700;color:var(--mb-teal);font-size:.85rem;}
.demo-table .badge{display:inline-block;padding:.25rem .6rem;border-radius:20px;font-size:.72rem;font-weight:600;}
.demo-table .badge-draft{background:var(--mb-soft);color:var(--mb-text-light);}
.demo-table .badge-submitted{background:#dbeafe;color:#1d4ed8;}
.demo-table .badge-review{background:#fef3c7;color:#b45309;}
.demo-table .badge-approved{background:#dcfce7;color:#15803d;}
.demo-table .badge-rejected{background:#fee2e2;color:#b91c1c;}

/* ---- Forms ---- */
.demo-form-label{display:block;font-size:.82rem;font-weight:600;color:var(--mb-text-light);margin-bottom:.35rem;}
.demo-form-control{width:100%;padding:.6rem .85rem;border:1.5px solid var(--mb-border);border-radius:6px;font-size:.9rem;transition:border-color .15s;background:var(--mb-white);}
.demo-form-control:focus{outline:none;border-color:var(--mb-teal);}
.demo-select{background:var(--mb-white);}
.demo-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem;}

/* ---- Kanban ---- */
.demo-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.demo-kanban-col{background:var(--mb-soft);border-radius:10px;padding:1rem;min-height:200px;}
.demo-kanban-col h6{font-size:.8rem;font-weight:700;color:var(--mb-text-light);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem;}
.demo-kanban-card{background:var(--mb-white);border-radius:8px;padding:.85rem;border-left:3px solid var(--mb-teal);margin-bottom:.6rem;cursor:pointer;transition:all .15s;}
.demo-kanban-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.demo-kanban-card .ticker{font-family:monospace;font-weight:700;color:var(--mb-teal);font-size:.9rem;margin-bottom:.2rem;}
.demo-kanban-card .company{font-size:.82rem;font-weight:600;color:var(--mb-text);margin-bottom:.35rem;}
.demo-kanban-card .meta{font-size:.72rem;color:var(--mb-text-light);}

/* ---- Notes / Feed ---- */
.demo-note-card{background:var(--mb-white);border-radius:10px;border:1px solid var(--mb-border);padding:1.25rem;margin-bottom:1rem;}
.demo-note-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;}
.demo-note-header .ticker{font-family:monospace;font-weight:700;color:var(--mb-gold);background:var(--mb-teal-dark);padding:.2rem .5rem;border-radius:4px;font-size:.8rem;}
.demo-note-header .meta{font-size:.78rem;color:var(--mb-text-light);}
.demo-note-body{font-size:.9rem;color:var(--mb-text);line-height:1.6;}

/* ---- Pagination ---- */
.demo-pagination{display:flex;gap:.4rem;justify-content:center;}
.demo-pagination button{padding:.4rem .75rem;border:1px solid var(--mb-border);background:var(--mb-white);border-radius:6px;font-size:.85rem;cursor:pointer;color:var(--mb-text);transition:all .15s;}
.demo-pagination button:hover{background:var(--mb-soft);}
.demo-pagination button.active{background:var(--mb-teal);color:var(--mb-white);border-color:var(--mb-teal);}
.demo-pagination button:disabled{opacity:.5;cursor:not-allowed;}

/* ---- Toast / Alert ---- */
.demo-alert{padding:.85rem 1rem;border-radius:8px;font-size:.88rem;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;}
.demo-alert-info{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;}
.demo-alert-success{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;}
.demo-alert-warning{background:#fef3c7;color:#b45309;border:1px solid #fde68a;}
.demo-alert-danger{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;}

/* ---- Modal ---- */
.demo-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:1000;padding:1rem;}
.demo-modal-overlay.open{display:flex;}
.demo-modal{background:var(--mb-white);border-radius:12px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.demo-modal-header{padding:1rem 1.25rem;border-bottom:1px solid var(--mb-border);display:flex;align-items:center;justify-content:space-between;background:var(--mb-teal-dark);color:var(--mb-white);border-radius:12px 12px 0 0;}
.demo-modal-header h5{font-weight:700;}
.demo-modal-body{padding:1.25rem;}
.demo-modal-footer{padding:1rem 1.25rem;border-top:1px solid var(--mb-border);display:flex;justify-content:flex-end;gap:.6rem;}

/* ---- Responsive ---- */
@media(max-width:768px){
  .demo-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:900;transform:translateX(-100%);}
  .demo-sidebar.open{transform:translateX(0);}
  .demo-topbar .menu-toggle{display:block;}
  .demo-kanban{grid-template-columns:1fr;}
  .demo-stat-card{margin-bottom:.5rem;}
  .demo-roles{grid-template-columns:1fr;}
}

/* ---- Utilities ---- */
.d-flex{display:flex;}
.gap-1{gap:.25rem;}
.gap-2{gap:.5rem;}
.gap-3{gap:1rem;}
.gap-4{gap:1.5rem;}
.mb-1{margin-bottom:.25rem;}
.mb-2{margin-bottom:.5rem;}
.mb-3{margin-bottom:1rem;}
.mb-4{margin-bottom:1.5rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:1rem;}
.mt-4{margin-top:1.5rem;}
.ms-auto{margin-left:auto;}
.text-muted{color:var(--mb-text-light);}
.text-center{text-align:center;}
.text-end{text-align:right;}
.fw-bold{font-weight:700;}
.fw-semibold{font-weight:600;}
.small{font-size:.85rem;}
.w-100{width:100%;}
.justify-between{justify-content:space-between;}
.align-center{align-items:center;}
.flex-wrap{flex-wrap:wrap;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}