/* CSS riêng cho trang: note-form-modal.html — phần không trùng với base.css */

/* nền mờ phía sau, mô phỏng lớp app đang mở khi modal xuất hiện */

.backdrop{
    position:absolute;
    inset:0;
    background:
      linear-gradient(var(--paper), var(--paper)),
      repeating-linear-gradient(90deg, transparent 0 238px, var(--line) 238px 239px);
    opacity:0.5;
  }

.modal{
    position:relative;
    width:560px;
    max-width:92vw;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 18px 40px -12px rgba(27,36,48,0.28);
    overflow:hidden;
  }

.modal-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px 0 24px;
  }

.modal-title{
    font-family:'Source Serif 4', serif;
    font-size:19px;
    font-weight:600;
    margin:0;
    display:flex;align-items:center;gap:8px;
  }

.modal-title .mark{width:7px;height:7px;background:var(--accent);border-radius:1px;flex-shrink:0;}

.modal-close{
    border:none;background:none;cursor:pointer;
    color:var(--ink-soft);
    padding:4px;border-radius:var(--radius);
    display:flex;
  }

.modal-close:hover{background:rgba(0,0,0,0.05); color:var(--ink);}

.modal-body{padding:16px 24px 4px 24px;}

.field-title input{
    width:100%;
    border:none;outline:none;background:none;
    font-family:'Source Serif 4', serif;
    font-size:22px;
    font-weight:600;
    color:var(--ink);
    padding-bottom:10px;
    border-bottom:1.5px solid var(--line);
    transition:border-color .18s ease, box-shadow .18s ease;
  }

.field-title input::placeholder{color:#B7AF9E;}

.field-title input:focus{
    border-bottom-color:var(--accent);
    box-shadow:0 1.5px 0 0 rgba(63,93,83,0.22);
  }

.field-body textarea{
    width:100%;
    min-height:120px;
    border:none;outline:none;background:none;resize:none;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:14.5px;
    line-height:1.7;
    color:var(--ink);
    margin-top:14px;
  }

.field-body textarea::placeholder{color:#B7AF9E;}

.meta-row{
    display:flex;align-items:center;gap:10px;
    margin-top:6px;
    padding-top:14px;
    border-top:1px solid var(--line);
    flex-wrap:wrap;
  }

.pill-select{
    display:flex;align-items:center;gap:6px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    padding:6px 12px;
    font-size:12.5px;
    color:var(--ink-soft);
    cursor:pointer;
    position:relative;
  }

.pill-select:hover{border-color:var(--line-strong); color:var(--ink);}

.pill-select select{
    position:absolute; inset:0; opacity:0;
    cursor:pointer; border:none; width:100%; height:100%;
  }

.pill-select svg{flex-shrink:0;}

.tag-pill-input{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    padding:5px 10px;
    font-size:12.5px;
    flex:1;
    min-width:140px;
  }

.tag-pill-input:focus-within{border-color:var(--line-strong);}

.tag-chip{
    display:inline-flex;align-items:center;gap:4px;
    background:var(--accent-soft);
    color:var(--accent);
    padding:2px 7px;
    border-radius:10px;
    font-size:11.5px;
  }

.tag-chip button{border:none;background:none;color:var(--accent);opacity:0.6;cursor:pointer;font-size:11px;padding:0;}

.tag-chip button:hover{opacity:1;}

.tag-pill-input input{
    border:none;outline:none;background:none;
    font-size:12.5px;flex:1;min-width:70px;
    color:var(--ink-soft);
    font-family:'IBM Plex Sans', sans-serif;
  }

.pin-toggle{
    display:flex;align-items:center;gap:6px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    padding:6px 12px;
    font-size:12.5px;
    color:var(--ink-soft);
    cursor:pointer;
  }

.pin-toggle:hover{border-color:var(--line-strong);}

.pin-toggle.active{
    background:var(--gold-soft);
    border-color:var(--gold);
    color:#8A6528;
  }

.pin-toggle svg{flex-shrink:0;}

.dropzone-inline{
    display:flex;align-items:center;gap:8px;
    border:1.5px dashed var(--line-strong);
    border-radius:var(--radius);
    padding:9px 12px;
    color:var(--ink-soft);
    font-size:12.5px;
    cursor:pointer;
    margin-top:14px;
    transition:border-color .15s ease, background .15s ease;
  }

.dropzone-inline:hover{border-color:var(--accent); background:var(--accent-soft);}

.modal-footer{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 24px 20px 24px;
  }

.footer-hint{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--ink-soft);
  }

.footer-hint kbd{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:3px;
    padding:1px 5px;
    font-family:'IBM Plex Mono', monospace;
  }

.footer-actions{display:flex;align-items:center;gap:10px;}