/* ==========================================================
   Teamlead — Notes page
   File: resources/css/teamlead/notes.css
   Світлий стиль, як на дашборді / балансах
   ========================================================== */

:root{
    --notes-primary:#3b82f6;
    --notes-primary-soft:#e5edff;

    --notes-border:#e5e7eb;
    --notes-text:#0f172a;
    --notes-muted:#6b7280;

    --notes-shadow-soft:0 6px 16px rgba(15,23,42,.10);
    --notes-shadow-hover:0 12px 26px rgba(15,23,42,.16);

    --notes-radius-lg:18px;
    --notes-radius-pill:999px;
}

/* ----------------------------------------------------------
   ANIMATION + WRAPPER
---------------------------------------------------------- */

@keyframes notes-fade{
    from{opacity:0; transform:translateY(6px);}
    to  {opacity:1; transform:translateY(0);}
}

.notes-page{
    animation:notes-fade .22s ease-out;
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.notes-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
}

.notes-head h3{
    margin:0;
    font-weight:600;
    color:var(--notes-text);
}

.notes-head-sub{
    font-size:.82rem;
    color:var(--notes-muted);
}

.notes-head-actions{
    display:flex;
    align-items:center;
    gap:.5rem;
}

/* Красива кнопка "Нова нотатка" */

.notes-head-actions .btn{
    border-radius:var(--notes-radius-pill);
    padding:.45rem 1.3rem;
    font-size:.82rem;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    border-width:1px;
    box-shadow:var(--notes-shadow-soft);
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease,
        color .15s ease;
}

/* primary — синьо-фіолетовий градієнт */

.notes-page .btn-primary{
    background:linear-gradient(135deg,#3b82f6,#6366f1);
    border-color:transparent;
    color:#ffffff;
}

.notes-page .btn-primary i{
    font-size:.9rem;
}

.notes-page .btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 28px rgba(37,99,235,.35);
}

/* ----------------------------------------------------------
   EMPTY STATE
---------------------------------------------------------- */

.notes-empty{
    border-radius:var(--notes-radius-lg);
    border:1px solid var(--notes-border);
    box-shadow:var(--notes-shadow-soft);
    background:#ffffff;
}

.notes-empty-title{
    font-weight:600;
    color:var(--notes-text);
}

.notes-empty-sub{
    font-size:.82rem;
    color:var(--notes-muted);
}

/* ----------------------------------------------------------
   TABLE CARD
---------------------------------------------------------- */

.notes-card{
    border-radius:var(--notes-radius-lg);
    border:1px solid var(--notes-border);
    background:#ffffff;
    box-shadow:var(--notes-shadow-soft);
    overflow:hidden;
}

/* таблиця */

.notes-table{
    font-size:.82rem;
    margin-bottom:0;
}

.notes-table thead th{
    background:#eef2ff;
    font-size:.74rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#6b7280;
    border-bottom:1px solid #d4d7e6;
}

.notes-table tbody tr{
    transition:
        background .15s ease,
        transform .12s ease,
        box-shadow .15s ease;
}

.notes-table tbody tr:nth-child(even){
    background:#f7f8ff;
}

.notes-page .notes-table tbody tr:hover{
    background:#e0ecff;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(148,163,184,.35);
}

/* ----------------------------------------------------------
   CELLS
---------------------------------------------------------- */

.notes-date-cell{
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    font-size:.8rem;
    color:#374151;
}

.fw-semibold{
    font-weight:600;
}

/* Опис — одна строка + трохи спокійний вигляд */

.notes-content-cell{
    max-width:420px;
    font-size:.8rem;
    color:#4b5563;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ----------------------------------------------------------
   ACTION BUTTONS
---------------------------------------------------------- */

.notes-actions{
    display:inline-flex;
    gap:.25rem;
}

.btn-icon{
    width:32px;
    height:32px;
    border-radius:10px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--notes-shadow-soft);
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        background .12s ease,
        color .12s ease;
}

.btn-icon i{
    font-size:.8rem;
}

.btn-icon:hover{
    transform:translateY(-1px);
    box-shadow:var(--notes-shadow-hover);
}

.notes-page .btn-outline-secondary.btn-icon{
    color:#374151;
    border-color:#cbd5e1;
    background:#ffffff;
}

.notes-page .btn-outline-secondary.btn-icon:hover{
    background:var(--notes-primary-soft);
}

.notes-page .btn-outline-danger.btn-icon{
    color:#b91c1c;
    border-color:#fecaca;
    background:#ffffff;
}

.notes-page .btn-outline-danger.btn-icon:hover{
    background:#fee2e2;
}

/* ----------------------------------------------------------
   FOOTER / PAGINATION
---------------------------------------------------------- */

.notes-footer{
    border-top:1px solid var(--notes-border);
    padding:.75rem 1rem;
    background:linear-gradient(180deg,#ffffff,#f9fafb);
}

.notes-footer .pagination{
    margin:0;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width:768px){
    .notes-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .notes-head-actions{
        width:100%;
    }

    .notes-head-actions .btn{
        width:100%;
        justify-content:center;
    }

    .notes-content-cell{
        max-width:100%;
    }
}

.notes-table tbody tr.notes-row-click{
    cursor:pointer;
}