body{
    margin:0;
    font-family:Arial;
    background:#1e1e1e;
    color:white;
    display:flex;
    height:100vh;
}

#sidebar{
    width:350px;
    background:#111;
    border-right:2px solid #333;
    display:flex;
    flex-direction:column;
}

#topbar{
    padding:10px;
    border-bottom:1px solid #333;
}

#notes{
    overflow-y:auto;
    flex:1;
}

.note{
    padding:15px;
    border-bottom:1px solid #333;
    cursor:pointer;
}

.note:hover{
    background:#222;
}

.noteTitle{
    font-weight:bold;
}

.notePreview{
    color:#aaa;
    margin-top:5px;
    font-size:13px;
}

#main{
    flex:1;
    display:flex;
    flex-direction:column;
}

#title{
    background:#222;
    color:white;
    border:none;
    padding:15px;
    font-size:24px;
}

#content{
    flex:1;
    background:#1b1b1b;
    color:white;
    border:none;
    padding:20px;
    resize:none;
    font-size:17px;
}

#toolbar{
    background:#111;
    padding:10px;
    display:flex;
    gap:10px;
}

button{
    padding:10px 16px;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

#saveBtn{
    background:green;
    color:white;
}

#deleteBtn{
    background:darkred;
    color:white;
}

#attachments{
    padding:10px;
    background:#181818;
    max-height:180px;
    overflow-y:auto;
}

.file{
    margin:5px 0;
}

.file a{
    color:#6aa8ff;
    text-decoration:none;
}

input, textarea{
    outline:none;
}

/* ── Notatki udostępnione (sidebar) ─────────────────────────────────────── */

.note.note-shared {
    border-left: 3px solid #4a6a9a;
}

.note-shared-by {
    font-size: 11px;
    color: #6a90c0;
    margin-top: 4px;
}

/* ── Pasek tylko-do-odczytu ─────────────────────────────────────────────── */

#readonly-bar {
    background: #1a2a3a;
    border-bottom: 1px solid #2a4a6a;
    color: #7aaad0;
    font-size: 13px;
    padding: 7px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Panel udostępniania ─────────────────────────────────────────────────── */

#share-panel {
    background: #1a1a1a;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 10px 15px;
}

.share-header {
    font-size: 13px;
    color: #999;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #2a2a2a;
}

.share-row:last-child { border-bottom: none; }

.share-email-label {
    font-size: 13px;
    color: #ccc;
}

.btn-unshare {
    background: none;
    border: none;
    color: #a44;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.btn-unshare:hover { background: #3a1a1a; color: #f66; }

.share-empty {
    font-size: 12px;
    color: #666;
    font-style: italic;
    padding: 4px 0;
}

.share-add {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.share-add input[type=email] {
    flex: 1;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 5px 9px;
    color: white;
    font-size: 13px;
}

.share-add input[type=email]:focus { border-color: #4a7aaa; outline: none; }

#share-add-btn {
    background: #1a3a5a;
    color: #7aaad0;
    border: 1px solid #2a5a8a;
    border-radius: 5px;
    padding: 5px 13px;
    font-size: 13px;
    cursor: pointer;
}

#share-add-btn:hover { background: #1e4a70; }

/* ── Auth pages (login / register / verify) ─────────────────────────────── */

body.auth-page {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    height:auto;
    background:#1e1e1e;
}

.auth-box {
    background:#2a2a2a;
    border:1px solid #444;
    border-radius:10px;
    padding:2rem 2.4rem;
    width:100%;
    max-width:420px;
    box-shadow:0 4px 24px rgba(0,0,0,.5);
}

.auth-logo {
    font-size:1.6rem;
    font-weight:bold;
    margin-bottom:.4rem;
}

.auth-box h2 {
    margin:.2rem 0 1.2rem;
    color:#ccc;
    font-size:1.1rem;
    font-weight:normal;
}

.auth-box label {
    display:block;
    font-size:.8rem;
    color:#999;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:.8rem 0 .25rem;
}

.auth-box input[type=email],
.auth-box input[type=password],
.auth-box input[type=text] {
    width:100%;
    box-sizing:border-box;
    background:#333;
    border:1px solid #555;
    border-radius:6px;
    padding:.55rem .75rem;
    color:white;
    font-size:.95rem;
}

.auth-box input:focus {
    border-color:#5a9f5a;
}

.btn-primary {
    display:block;
    width:100%;
    margin-top:1.2rem;
    padding:.65rem;
    background:#2e7d32;
    color:white;
    border:none;
    border-radius:7px;
    font-size:1rem;
    cursor:pointer;
}

.btn-primary:hover { background:#388e3c; }

.msg {
    padding:.65rem .9rem;
    border-radius:6px;
    margin-bottom:1rem;
    font-size:.9rem;
}

.msg.error   { background:#5c1a1a; border:1px solid #a33; color:#faa; }
.msg.success { background:#1a4a1a; border:1px solid #3a3; color:#8f8; }

.auth-link {
    text-align:center;
    margin-top:1rem;
    color:#888;
    font-size:.9rem;
}

.auth-link a { color:#6aa8ff; }

.auth-hint {
    text-align:center;
    margin-top:.5rem;
    color:#666;
    font-size:.82rem;
}

.auth-hint a { color:#9a9; }

/* ── Notes app: userbar ──────────────────────────────────────────────────── */

#userbar {
    margin-top:8px;
    font-size:.82rem;
    color:#888;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

#userEmail { color:#aaa; }

.userbar-link {
    color:#6aa8ff;
    text-decoration:none;
    background:#1a1a2e;
    padding:2px 8px;
    border-radius:4px;
    border:1px solid #334;
}

.userbar-link:hover { background:#222244; }

/* ── Admin panel ─────────────────────────────────────────────────────────── */

body.admin-page {
    display:block;
    height:auto;
    min-height:100vh;
    background:#181818;
}

.admin-topbar {
    background:#111;
    border-bottom:2px solid #333;
    padding:.7rem 1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:10;
}

.admin-logo { font-size:1.1rem; font-weight:bold; }

.admin-user { font-size:.88rem; color:#aaa; }

.admin-user a { color:#6aa8ff; text-decoration:none; }

.admin-content {
    max-width:900px;
    margin:1.5rem auto;
    padding:0 1rem;
}

.admin-card {
    background:#2a2a2a;
    border:1px solid #444;
    border-radius:8px;
    padding:1.4rem 1.6rem;
    margin-bottom:1.4rem;
}

.admin-card h2 {
    margin:0 0 .8rem;
    font-size:1.1rem;
    color:#ddd;
}

.hint { color:#888; font-size:.88rem; margin:.2rem 0 .8rem; }

.empty { color:#666; font-style:italic; }

.admin-table {
    width:100%;
    border-collapse:collapse;
    font-size:.9rem;
    margin-bottom:.8rem;
}

.admin-table th {
    text-align:left;
    padding:.4rem .6rem;
    border-bottom:1px solid #444;
    color:#999;
    font-size:.8rem;
    text-transform:uppercase;
}

.admin-table td {
    padding:.5rem .6rem;
    border-bottom:1px solid #333;
    vertical-align:middle;
}

.admin-table tr:last-child td { border-bottom:none; }

.admin-table tr.row-me td { background:#1e2d1e; }

.actions { display:flex; gap:6px; flex-wrap:wrap; }

.inline-form { display:inline; }

.badge {
    display:inline-block;
    padding:2px 8px;
    border-radius:4px;
    font-size:.78rem;
}

.badge-ok    { background:#1a4a1a; color:#8f8; }
.badge-warn  { background:#4a3a00; color:#fc9; }
.badge-admin { background:#1a2a4a; color:#8af; }

.btn-sm {
    padding:3px 10px;
    font-size:.82rem;
    border-radius:5px;
    border:1px solid #555;
    background:#333;
    color:#ccc;
    cursor:pointer;
}

.btn-sm:hover { background:#444; }

.btn-danger    { background:#5c1a1a !important; color:#faa !important; border-color:#a33 !important; }
.btn-danger:hover { background:#7a2020 !important; }

.btn-ok        { background:#1a4a1a !important; color:#8f8 !important; border-color:#3a3 !important; }
.btn-ok:hover  { background:#256025 !important; }

.add-form {
    display:flex;
    gap:.5rem;
    align-items:center;
    margin-top:.5rem;
    flex-wrap:wrap;
}

.add-form input[type=text] {
    background:#333;
    border:1px solid #555;
    border-radius:5px;
    padding:.45rem .7rem;
    color:white;
    font-size:.9rem;
}

.admin-card label {
    display:block;
    font-size:.8rem;
    color:#999;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:.8rem 0 .2rem;
}

.admin-card input[type=password] {
    background:#333;
    border:1px solid #555;
    border-radius:5px;
    padding:.5rem .7rem;
    color:white;
    font-size:.9rem;
    width:100%;
    box-sizing:border-box;
}