/* ===========================================================
   MIDSOFT NOTES — Material Design System
   =========================================================== */
:root{
  --blue:#4285F4; --red:#EA4335; --yellow:#FBBC05; --green:#34A853;
  --bg:#FFFFFF; --bg-secondary:#F8F9FA; --text:#202124; --border:#DADCE0;
  --radius:16px; --radius-sm:10px;
  --font: 'Google Sans','Roboto',Arial,sans-serif;
  --shadow-1: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 2px 6px rgba(60,64,67,.15), 0 4px 12px rgba(60,64,67,.15);
  --anim-speed: .18s;
  --grid-size: 260px;
}
:root.dark{
  --bg:#202124; --bg-secondary:#292A2D; --text:#E8EAED; --border:#3C4043;
}
:root.no-anim *{transition:none !important; animation:none !important;}

/* CRITICAL: the [hidden] attribute must always win over component display rules,
   otherwise overlays/menus stay visible (and clickable) even when "hidden" is set. */
[hidden]{ display:none !important; }

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font); background:var(--bg-secondary); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
button, input, select, textarea{font-family:inherit; color:inherit;}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}

/* ---------- Navbar ---------- */
.navbar{
  height:64px; display:flex; align-items:center; gap:16px; padding:0 16px;
  background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;
}
.nav-left{display:flex;align-items:center;gap:8px;}
.brand{display:flex;align-items:center;gap:8px;}
.brand-logo{width:32px;height:32px;}
.brand-name{font-size:20px;font-weight:500;letter-spacing:.2px;}
.brand-name b{font-weight:700;color:var(--blue);}
.nav-search{
  flex:1; max-width:640px; display:flex; align-items:center; gap:8px;
  background:var(--bg-secondary); border-radius:24px; padding:0 16px; height:44px;
  border:1px solid transparent;
}
.nav-search:focus-within{border-color:var(--blue); background:var(--bg);}
.nav-search svg{width:18px;height:18px;opacity:.6;flex-shrink:0;}
.nav-search input{flex:1; border:none; background:transparent; outline:none; font-size:15px;}
.kbd-hint{font-size:11px; opacity:.5; border:1px solid var(--border); border-radius:4px; padding:1px 6px;}
.nav-right{display:flex; align-items:center; gap:2px; margin-left:auto;}
.icon-btn{
  width:40px;height:40px; border:none; background:transparent; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
  transition: background var(--anim-speed);
}
.icon-btn:hover{background:rgba(66,133,244,.1);}
.icon-btn.active-toggle{background:rgba(66,133,244,.15); color:var(--blue);}

/* ---------- App body / Sidebar ---------- */
.app-body{display:flex; min-height:calc(100vh - 64px);}
.sidebar{
  width:260px; background:var(--bg); border-right:1px solid var(--border);
  padding:12px 8px; overflow-y:auto; flex-shrink:0; transition: margin var(--anim-speed), width var(--anim-speed);
}
.sidebar.collapsed{margin-left:-260px;}
.side-section{margin-bottom:18px;}
.side-heading{display:flex; align-items:center; justify-content:space-between; padding:6px 12px; font-size:12px; text-transform:uppercase; letter-spacing:.6px; opacity:.6; font-weight:600;}
.mini-btn{border:none;background:var(--bg-secondary);border-radius:6px;width:22px;height:22px;cursor:pointer;font-size:14px;color:var(--text);}
.side-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:none; background:transparent;
  padding:10px 14px; border-radius:0 20px 20px 0; cursor:pointer; font-size:14px; color:var(--text); margin-bottom:2px;
}
.side-item:hover{background:var(--bg-secondary);}
.side-item.active{background:#E8F0FE; color:var(--blue); font-weight:600;}
:root.dark .side-item.active{background:#3a3f52;}
.side-item svg{width:18px;height:18px;flex-shrink:0;}
.folder-item, .tag-item, .collection-item{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:0 20px 20px 0; cursor:pointer; font-size:13px;
}
.folder-item:hover, .tag-item:hover, .collection-item:hover{background:var(--bg-secondary);}
.folder-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;}

/* ---------- Main area ---------- */
.main-area{flex:1; padding:20px 28px 60px; min-width:0;}
.main-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.main-toolbar h1{font-size:22px; font-weight:500; margin:0;}
.view-controls{display:flex; align-items:center; gap:6px;}
.view-controls select{border:1px solid var(--border); border-radius:8px; padding:6px 10px; background:var(--bg);}
.view-btn.active{background:rgba(66,133,244,.15); color:var(--blue);}

.notes-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--grid-size),1fr)); gap:16px;
}
.notes-grid.list-view{grid-template-columns:1fr;}
.notes-grid.list-view .note-card{display:flex; align-items:center; gap:14px;}
.notes-grid.gallery-view{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); grid-auto-rows:220px;}

.note-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  cursor:pointer; display:flex; flex-direction:column; gap:8px; min-height:140px; position:relative; overflow:hidden;
  transition: box-shadow var(--anim-speed), transform var(--anim-speed);
}
.note-card:hover{box-shadow:var(--shadow-2); transform:translateY(-2px);}
.note-card .nc-top{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.note-card .nc-title{font-weight:600; font-size:15px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.note-card .nc-preview{font-size:13px; opacity:.75; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; flex:1;}
.note-card .nc-badges{display:flex; gap:6px; flex-wrap:wrap; font-size:11px;}
.badge{background:var(--bg-secondary); border-radius:20px; padding:2px 8px; display:inline-flex; align-items:center; gap:4px;}
.note-card .nc-footer{display:flex; align-items:center; justify-content:space-between; font-size:11px; opacity:.6;}
.note-card .nc-pin{position:absolute; top:10px; right:10px; opacity:.8;}
.progress-bar{height:5px; border-radius:4px; background:var(--border); overflow:hidden;}
.progress-bar > div{height:100%; background:var(--green);}

.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; opacity:.7; text-align:center; gap:10px;}
.empty-state svg{width:56px;height:56px; opacity:.3;}
.primary-btn{
  background:var(--blue); color:#fff; border:none; border-radius:24px; padding:10px 22px; font-size:14px;
  cursor:pointer; font-weight:600; box-shadow:var(--shadow-1);
}
.primary-btn:hover{filter:brightness(1.07);}

/* ---------- Editor Overlay ---------- */
.editor-overlay{
  position:fixed; inset:0; background:var(--bg-secondary); z-index:200; display:flex; justify-content:center;
  animation: fadeIn var(--anim-speed) ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.editor-panel{width:100%; max-width:900px; background:var(--bg); display:flex; flex-direction:column; height:100vh; overflow:hidden;}
.editor-topbar{display:flex; align-items:center; gap:4px; padding:10px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.editor-topbar-actions{display:flex; align-items:center; gap:2px; margin-left:auto; position:relative; flex-wrap:wrap;}
.editor-topbar-actions select{border:1px solid var(--border); border-radius:8px; padding:6px 8px; background:var(--bg); font-size:13px;}

.color-popover, .export-menu, .block-menu{
  position:absolute; top:44px; right:0; background:var(--bg); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-2); padding:10px; z-index:60; display:flex; gap:8px; flex-wrap:wrap; width:180px;
}
.color-popover span{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent; display:inline-block;}
.color-popover span:hover{border-color:var(--text);}
.export-menu{flex-direction:column; width:170px;}
.export-menu button, .block-menu button{
  border:none; background:transparent; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px;
  display:flex; align-items:center; gap:8px; color:var(--text); width:100%;
}
.export-menu button:hover, .block-menu button:hover{background:var(--bg-secondary);}
.block-menu{width:220px; flex-direction:column; max-height:340px; overflow-y:auto;}

.editor-meta-row{padding:14px 24px 6px; border-bottom:1px solid var(--border);}
.note-title-input{
  width:100%; border:none; outline:none; font-size:28px; font-weight:600; background:transparent; margin-bottom:10px;
}
.meta-pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.pill-select{
  border:1px solid var(--border); border-radius:20px; padding:6px 12px; font-size:12px; background:var(--bg-secondary);
  outline:none; max-width:180px;
}
.color-timeline{display:flex; gap:3px; padding-bottom:10px; flex-wrap:wrap;}
.color-timeline span{width:8px;height:8px;border-radius:50%; display:inline-block;}

.block-toolbar{
  display:flex; align-items:center; gap:2px; padding:8px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap;
  position:relative;
}
.block-toolbar button{
  border:none; background:transparent; border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:14px; color:var(--text);
}
.block-toolbar button:hover{background:var(--bg-secondary);}
.block-toolbar select{border:1px solid var(--border); border-radius:8px; padding:4px; font-size:12px; background:var(--bg);}
.toolbar-sep{width:1px; height:22px; background:var(--border); margin:0 6px;}
.add-block-btn{
  width:auto !important; padding:0 12px !important; background:var(--blue) !important; color:#fff !important; font-weight:600; font-size:13px !important;
}

.editor-body{flex:1; overflow-y:auto; padding:20px 24px 60px;}
.blocks-container{display:flex; flex-direction:column; gap:14px; max-width:800px; margin:0 auto;}
.editor-footer-stats{max-width:800px; margin:0 auto; padding:14px 0 40px; font-size:12px; opacity:.55; display:flex; gap:16px;}

/* Slash command + wiki-link popups */
.inline-popup{
  position:fixed; background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-2);
  z-index:400; width:230px; max-height:280px; overflow-y:auto; padding:6px;
}
.inline-popup button{display:flex; align-items:center; gap:8px; width:100%; border:none; background:transparent; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--text);}
.inline-popup button:hover, .inline-popup button.hl{background:var(--bg-secondary);}
.inline-popup .ip-empty{padding:10px; font-size:12px; opacity:.6;}
a.note-link{ color:var(--blue); background:#E8F0FE; border-radius:5px; padding:1px 6px; text-decoration:none; cursor:pointer; font-weight:500; }
:root.dark a.note-link{ background:#2b3550; }
.backlink-badge{cursor:default;}

/* ---------- Blocks ---------- */
.block{position:relative; border-radius:var(--radius-sm); transition:background var(--anim-speed);}
.block:hover{background:var(--bg-secondary);}
.block-controls{
  position:absolute; left:-38px; top:2px; display:flex; flex-direction:column; gap:2px; opacity:0; transition:opacity var(--anim-speed);
}
.block:hover .block-controls{opacity:1;}
.block-controls button{border:none;background:var(--bg-secondary);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:12px;}
.block-rich[contenteditable]{outline:none; padding:6px 8px; min-height:28px; font-size:15px; line-height:1.6;}
.block-rich[contenteditable]:empty:before{content:attr(data-placeholder); opacity:.4;}
.block-heading[contenteditable]{outline:none; padding:6px 8px; font-size:24px; font-weight:600;}
.block-quote{border-left:4px solid var(--blue); padding:6px 8px 6px 16px; font-style:italic; opacity:.85;}
.block-divider hr{border:none; border-top:2px solid var(--border); margin:10px 0;}
.block-code{background:#202124; color:#e8eaed; border-radius:10px; padding:14px; font-family:'Roboto Mono',monospace; font-size:13px; white-space:pre-wrap; outline:none;}
.block-callout{background:#FEF7E0; border-radius:10px; padding:12px 14px; display:flex; gap:10px; align-items:flex-start;}
:root.dark .block-callout{background:#3f3722;}
.block-checklist-item{display:flex; align-items:center; gap:10px; padding:4px 8px;}
.block-checklist-item input[type=checkbox]{width:18px;height:18px; accent-color:var(--green);}
.block-checklist-item .cl-text{flex:1; outline:none;}
.block-checklist-item.done .cl-text{text-decoration:line-through; opacity:.5;}
.checklist-add{background:transparent;border:none;color:var(--blue);cursor:pointer;font-size:13px;padding:6px 8px;text-align:left;}

.block-table table{border-collapse:collapse; width:100%;}
.block-table td{border:1px solid var(--border); padding:8px; outline:none; min-width:80px;}
.block-table-controls{display:flex; gap:6px; margin-top:6px;}
.block-table-controls button{font-size:11px; border:1px solid var(--border); background:var(--bg); border-radius:6px; padding:3px 8px; cursor:pointer;}

.block-image img{max-width:100%; border-radius:10px; display:block;}
.block-image input[type=file]{font-size:12px;}

.block-sticky{
  padding:16px; border-radius:12px; min-height:100px; resize:both; overflow:auto; width:220px;
  box-shadow:var(--shadow-1); position:relative; cursor:grab;
}
.block-sticky.yellow{background:#FEF7E0;} .block-sticky.blue{background:#E8F0FE;}
.block-sticky.green{background:#E6F4EA;} .block-sticky.pink{background:#FCE8F3;}
.block-sticky.purple{background:#F3E8FD;}
.block-sticky [contenteditable]{outline:none; min-height:60px;}

.block-drawing canvas{border:1px solid var(--border); border-radius:10px; width:100%; touch-action:none; cursor:crosshair; background:#fff;}
.draw-toolbar{display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap;}
.draw-toolbar button{border:1px solid var(--border); background:var(--bg); border-radius:8px; padding:4px 8px; cursor:pointer; font-size:12px;}
.draw-toolbar button.active{background:var(--blue); color:#fff; border-color:var(--blue);}
.draw-toolbar input[type=color]{width:28px;height:28px;border:none;background:none;}

.block-voice{display:flex; flex-direction:column; gap:8px;}
.voice-controls{display:flex; align-items:center; gap:10px;}
.voice-controls button{border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;background:var(--red); color:#fff; display:flex;align-items:center;justify-content:center;}
canvas.waveform{width:100%; height:50px; background:var(--bg-secondary); border-radius:8px;}

.block-bookmark{border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; gap:10px; align-items:center;}
.block-bookmark svg{width:28px;height:28px; color:var(--blue); flex-shrink:0;}
.block-bookmark input{border:none; background:transparent; outline:none; font-size:14px; width:100%;}

.block-formula{border:1px dashed var(--border); border-radius:10px; padding:12px; font-family:'Roboto Mono',monospace; text-align:center;}

.smart-timeline .tl-row, .smart-proscons .pc-cols, .smart-meeting .mt-field{margin-bottom:8px;}
.smart-proscons .pc-cols{display:flex; gap:10px;}
.pc-col{flex:1; border-radius:10px; padding:10px;}
.pc-col.pros{background:#E6F4EA;} .pc-col.cons{background:#FCE8E6;}
:root.dark .pc-col.pros{background:#25382b;} :root.dark .pc-col.cons{background:#3a2725;}
.smart-card{border-radius:10px; padding:12px; border-left:4px solid var(--blue);}
.smart-card.question{border-color:var(--yellow);}
.smart-card.decision{border-color:var(--green);}
.smart-card label{font-size:11px; text-transform:uppercase; opacity:.6; display:block; margin-bottom:4px;}
.smart-calc input{border:1px solid var(--border);border-radius:8px;padding:6px 10px;width:120px;}
.smart-calc select{border:1px solid var(--border);border-radius:8px;padding:6px;}
.smart-calc .calc-result{font-weight:700; margin-left:8px;}

/* Canvas mode */
.canvas-mode-area{position:relative; width:3000px; height:2000px; background-image:radial-gradient(var(--border) 1px, transparent 1px); background-size:22px 22px;}
.canvas-mode-block{position:absolute; min-width:180px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:10px; cursor:grab; box-shadow:var(--shadow-1);}

/* Floating thoughts */
.floating-bubble{
  position:fixed; width:150px; min-height:90px; background:#FEF7E0; border-radius:12px; box-shadow:var(--shadow-2);
  padding:10px; z-index:500; cursor:grab;
}
.floating-bubble textarea{width:100%; height:60px; border:none; background:transparent; resize:none; outline:none; font-size:12px;}
.floating-bubble .fb-close{position:absolute; top:2px; right:4px; border:none; background:none; cursor:pointer; font-size:12px; opacity:.5;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:300;}
.modal{background:var(--bg); border-radius:var(--radius); width:420px; max-width:92vw; max-height:86vh; overflow:auto; box-shadow:var(--shadow-2);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border);}
.modal-head h2{margin:0; font-size:18px; font-weight:600;}
.modal-body{padding:18px 20px; display:flex; flex-direction:column; gap:14px;}
.modal-body label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500;}
.modal-body select, .modal-body input[type=file]{border:1px solid var(--border); border-radius:8px; padding:8px; background:var(--bg);}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--bg);
  padding:10px 20px; border-radius:24px; font-size:13px; opacity:0; pointer-events:none; transition:all var(--anim-speed); z-index:999;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* Focus mode */
body.focus-mode .navbar, body.focus-mode .sidebar{display:none;}
body.focus-mode .app-body{min-height:100vh;}

/* ---------- Responsive: Desktop (default) / Tablet / Phone ---------- */

/* Sidebar backdrop, used on tablet & phone so opening the menu doesn't fight the content */
.sidebar-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:70;}

/* Tablet: 601px – 1024px */
@media (max-width: 1024px){
  .sidebar{position:fixed; left:0; top:64px; bottom:0; z-index:80; box-shadow:var(--shadow-2); width:280px; margin-left:-280px;}
  .sidebar.mobile-open{margin-left:0;}
  .main-area{padding:18px 20px 60px;}
  .editor-panel{max-width:100%;}
}

/* Phone: <= 600px */
@media (max-width: 600px){
  .navbar{padding:0 10px; gap:8px;}
  .nav-search{display:none;}
  .nav-search.mobile-open{display:flex; position:fixed; left:8px; right:8px; top:64px; z-index:90; box-shadow:var(--shadow-2);}
  .brand-name{display:none;}
  .nav-right{gap:0;}
  .icon-btn{width:36px;height:36px;}
  .main-area{padding:12px 12px 70px;}
  .main-toolbar{flex-wrap:wrap; gap:10px;}
  .main-toolbar h1{font-size:18px;}
  :root{--grid-size: 148px;}
  .notes-grid{gap:10px;}
  .note-card{padding:12px; min-height:120px;}
  .meta-pills{flex-direction:column; align-items:stretch;}
  .pill-select{max-width:100%;}
  .editor-meta-row{padding:12px 14px 4px;}
  .note-title-input{font-size:22px;}
  .block-toolbar{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;}
  .block-toolbar::-webkit-scrollbar{height:4px;}
  .editor-topbar{padding:8px 10px;}
  .editor-topbar-actions{overflow-x:auto; flex-wrap:nowrap; max-width:60vw; -webkit-overflow-scrolling:touch;}
  .editor-body{padding:14px 14px 160px;}
  .block-controls{left:auto; right:-4px; top:-30px; flex-direction:row; opacity:1; background:var(--bg); border-radius:8px; box-shadow:var(--shadow-1);}
  .modal{width:94vw;}
  .color-popover, .export-menu, .block-menu{right:auto; left:0;}
}

/* Small phone: <= 380px */
@media (max-width: 380px){
  :root{--grid-size: 130px;}
  .brand-logo{width:26px;height:26px;}
  .note-title-input{font-size:19px;}
}