:root { --npd-accent-clr:#4361ee;--npd-accent-deep-clr:#3a56d4;--npd-accent-light-clr:#e6f0ff;--npd-body-text-clr:#2b2d42;--npd-header-text-clr:#1e293b;--npd-bg-clr:#f8f9fa;--npd-white-clr:#ffffff;--npd-border-clr:#e0e3e7;--npd-danger-clr:#ff422d;--npd-success-clr:#2ecc71;--npd-success-deep-clr:#27ae60;--npd-border-radius:5px;--npd-box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;--npd-transition:all 0.2s ease;} #npd-app-container { display:flex;flex-direction:column;width:100%;max-width:1200px;margin:10px auto;background-color:var(--npd-white-clr);border-radius:var(--npd-border-radius);box-shadow:var(--npd-box-shadow);transition:opacity 0.5s ease-in-out;box-sizing:border-box;} .npd-header-actions { display:flex;gap:8px 12px;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;padding:15px;border-radius:var(--npd-border-radius);border:1px solid var(--npd-border-clr);background-color:var(--npd-bg-clr);color:var(--npd-body-text-clr) !important;} .npd-icon-btn { background-color:var(--npd-white-clr) !important;border:1px solid var(--npd-border-clr) !important;padding:8px 10px !important;color:var(--npd-body-text-clr) !important;border-radius:var(--npd-border-radius);cursor:pointer;transition:var(--npd-transition);font-size:1rem;display:flex;align-items:center;gap:5px;} .npd-icon-btn:hover { background-color:var(--npd-accent-light-clr) !important;} .npd-new-note-btn { color:var(--npd-white-clr) !important;background-color:var(--npd-accent-clr) !important;} .npd-new-note-btn:hover { background-color:var(--npd-accent-deep-clr) !important;} #npd-auto-save-status { color:var(--npd-accent-clr) !important;font-size:0.9rem !important;margin-right:10px;opacity:0;transition:opacity 0.3s ease-in-out;} .npd-dropdown { position:relative;display:inline-block;} .npd-dropdown-content { display:none;position:absolute;background-color:var(--npd-white-clr) !important;min-width:160px;box-shadow:var(--npd-box-shadow);z-index:1;border-radius:var(--npd-border-radius);right:0;top:100%;overflow:hidden;} .npd-dropdown-content a { color:var(--npd-body-text-clr) !important;padding:10px !important;text-decoration:none;display:block;font-size:0.9rem !important;transition:background-color 0.1s ease;} .npd-dropdown-content a:hover { background-color:var(--npd-accent-light-clr) !important;color:var(--npd-accent-deep-clr) !important;} .npd-dropdown:hover .npd-dropdown-content { display:block;} #npd-main-content { display:flex;flex-grow:1;} #npd-sidebar { width:270px;min-width:250px;background-color:var(--npd-white-clr) !important;border-right:1px solid var(--npd-border-clr) !important;padding:15px 10px;display:flex;flex-direction:column;gap:15px;} .npd-search-bar { position:relative;width:100%;min-height:50px !important;display:flex;align-items:center;justify-content:start;} #npd-search-input { width:100%;height:100%;padding:8px 10px 8px 35px !important;border:1px solid var(--npd-border-clr);border-radius:var(--npd-border-radius);font-size:0.9rem !important;} .npd-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--npd-body-text-clr);font-size:0.85rem !important;} .npd-new-note-sidebar-btn { background-color:var(--npd-accent-clr) !important;color:var(--npd-white-clr) !important;min-height:50px !important;border:none;padding:0 15px;border-radius:var(--npd-border-radius);cursor:pointer;font-size:1rem;transition:var(--npd-transition);display:flex;align-items:center;justify-content:center;gap:8px;} .npd-new-note-sidebar-btn:hover { background-color:var(--npd-accent-deep-clr) !important;} #npd-notes-list { flex-grow:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:thin;min-height:50px;max-height:660px;padding:1px;} #npd-no-notes-message { text-align:center;color:#6c757d;font-size:0.95rem !important;padding:15px 0;} .npd-hidden { display:none !important;} .npd-note-item { display:flex;justify-content:space-between;align-items:start;background-color:var(--npd-bg-clr);padding:15px 10px;border-radius:var(--npd-border-radius);cursor:pointer;transition:var(--npd-transition);border:1px solid var(--npd-bg-clr);position:relative;box-shadow:rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;} .npd-note-item:hover { background-color:var(--npd-accent-light-clr) !important;border-color:var(--npd-accent-clr) !important;} .npd-note-item.npd-active-note { background-color:var(--npd-accent-clr) !important;color:var(--npd-white-clr) !important;font-weight:500;border-color:var(--npd-accent-deep-clr) !important;} .npd-note-item.npd-active-note .npd-note-title, .npd-note-item.npd-active-note .npd-note-date, .npd-note-item.npd-active-note .npd-delete-note-btn { color:var(--npd-white-clr);} .npd-note-title { font-size:1rem;margin-bottom:5px;display:block;text-transform:capitalize;margin-right:12px !important;} .npd-note-date { font-size:0.85rem !important;color:#6c757d;display:block;font-weight:400;} .npd-delete-note-btn { position:absolute;right:8px !important;top:8px !important;background:none !important;border:none;color:var(--npd-danger-clr) !important;cursor:pointer;font-size:0.95rem !important;padding:5px !important;border-radius:var(--npd-border-radius);transition:var(--npd-transition);opacity:0;} .npd-note-item:hover .npd-delete-note-btn { opacity:1;} .npd-delete-note-btn:hover { background-color:rgba(231, 76, 60, 0.1) !important;} .npd-note-item.npd-active-note .npd-delete-note-btn:hover { background-color:rgba(255, 255, 255, 0.2) !important;color:var(--npd-white-clr) !important;} #npd-editor-section { flex-grow:1;padding:15px;display:flex;flex-direction:column;gap:15px;} #npd-note-title-input { width:100%;height:55px !important;border:1px solid var(--npd-border-clr);padding:0 15px;font-size:1.1rem !important;font-weight:700;border-radius:var(--npd-border-radius);color:var(--npd-header-text-clr);background-color:var(--npd-bg-clr);text-transform:capitalize;} #npd-note-title-input:focus { outline:none;border-color:var(--npd-accent-clr);box-shadow:0 0 0 2px var(--npd-accent-light-clr);} #npd-toolbar { display:flex;flex-wrap:wrap;gap:12px 6px;padding:10px;background-color:var(--npd-bg-clr);border:1px solid var(--npd-border-clr);border-radius:var(--npd-border-radius);align-items:center;} .npd-toolbar-btn, .npd-toolbar-select { padding:8px 10px !important;border:none;border-radius:var(--npd-border-radius);box-shadow:var(--npd-box-shadow);background-color:var(--npd-white-clr);cursor:pointer;font-size:0.9rem !important;color:var(--npd-body-text-clr) !important;transition:var(--npd-transition);} .npd-toolbar-select { width:110px;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 5px center;background-size:15px;text-overflow:ellipsis;} .npd-toolbar-btn { background-color:var(--npd-white-clr) !important;color:var(--npd-body-text-clr);} .npd-toolbar-btn:hover { background-color:var(--npd-accent-light-clr) !important;} .npd-toolbar-btn:active, .npd-toolbar-btn.npd-active { background-color:var(--npd-accent-light-clr);border-color:var(--npd-accent-deep-clr) !important;color:var(--npd-accent-deep-clr) !important;} .npd-color-picker-label { display:flex;align-items:center;justify-content:center;width:40px;height:34px;border:1px solid var(--npd-border-clr);border-radius:var(--npd-border-radius);background-color:var(--npd-white-clr);cursor:pointer;position:relative;transition:var(--npd-transition);} .npd-color-picker-label i { color:var(--npd-body-text-clr);font-size:1.1em;} .npd-color-picker-label:hover { background-color:var(--npd-accent-light-clr);border-color:var(--npd-accent-clr);} .npd-color-picker { position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;} #npd-editor-content { min-height:500px;max-height:600px;border:1px solid var(--npd-border-clr);border-radius:var(--npd-border-radius);padding:25px;font-size:1rem;line-height:1.8;overflow-y:auto;scrollbar-width:thin;flex-grow:1;background-color:var(--npd-white-clr);cursor:text;} #npd-editor-content:focus { outline:none;border-color:var(--npd-accent-clr);box-shadow:0 0 0 2px var(--npd-accent-light-clr);} body.npd-fullscreen #npd-app-container { min-height:100vh;border-radius:0;box-shadow:none;padding:15px;} body.npd-fullscreen #npd-main-content { flex-grow:1;} body.npd-fullscreen #npd-sidebar { display:none;} body.npd-fullscreen #npd-editor-section { padding:0;} body.npd-fullscreen #npd-editor-content { min-height:calc(100vh - 120px - 150px);} #npd-editor-stats { display:flex;justify-content:flex-end;align-items:center;gap:20px;padding:15px 10px;font-size:0.95rem !important;color:#6c757d;border:1px solid var(--npd-border-clr);border-radius:var(--npd-border-radius);} .npd-modal { display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0, 0, 0, 0.4);justify-content:center;align-items:center;} .npd-modal-content { background-color:var(--npd-white-clr);padding:15px 10px;border-radius:var(--npd-border-radius);box-shadow:var(--npd-box-shadow);width:90%;max-width:400px;position:relative;text-align:center;} #npd-alert-message { margin:20px 0;font-size:1rem;color:var(--npd-body-text-clr);text-transform:capitalize;} #npd-alert-ok-btn { background-color:var(--npd-accent-clr) !important;color:var(--npd-white-clr) !important;border:none;padding:10px 20px;border-radius:var(--npd-border-radius);cursor:pointer;font-size:0.9rem !important;transition:var(--npd-transition);} #npd-alert-ok-btn:hover { background-color:var(--npd-accent-deep-clr);} .npd-tooltip { position:relative;} .npd-tooltip::before, .npd-tooltip::after { --scale:0;--tooltip-color:#333;--arrow-size:6px;position:absolute;top:-0.25rem;left:50%;transform:translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));transition:transform var(--npd-transition);transform-origin:bottom center;} .npd-tooltip::before { content:attr(data-tooltip);background-color:var(--tooltip-color);color:var(--npd-white-clr);padding:0.5rem 0.8rem;border-radius:var(--npd-border-radius);font-size:0.8rem !important;white-space:nowrap;z-index:100;pointer-events:none;} .npd-tooltip:hover::before, .npd-tooltip:hover::after { --scale:1;--translate-y:-100%;} .npd-tooltip::after { content:"";border:var(--arrow-size) solid transparent;border-top-color:var(--tooltip-color);transform-origin:top center;top:calc(-0.25rem + var(--arrow-size));pointer-events:none;} @media (max-width:768px) { #npd-main-content { flex-direction:column;} #npd-app-container { border-radius:0;box-shadow:none;} #npd-toolbar { justify-content:center;padding:5px;} #npd-sidebar { width:100%;border:none;border-bottom:1px solid var(--npd-border-clr);} #npd-editor-content { max-height:400px;} #npd-notes-list { min-height:50px;max-height:300px;} } @media (max-width:480px) { #npd-sidebar { width:100%;border-bottom:1px solid var(--npd-border-clr);} #npd-editor-content { max-height:300px;} #npd-editor-stats { flex-direction:column;align-items:center;gap:10px;} }