/* =========================================================
   METOT STUDIO
   assets/css/app.css
   ========================================================= */


/* =========================================================
   RESET / GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: #eef1f5;
    color: #1d2433;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    user-select: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(214, 31, 44, .30);
    outline-offset: 2px;
}


/* =========================================================
   ANA UYGULAMA
   ========================================================= */

.app {
    display: grid;

    grid-template-columns:
        270px
        minmax(700px, 1fr)
        280px;

    width: 100%;
    height: 100vh;

    overflow: hidden;
}


/* =========================================================
   SOL SIDEBAR
   ========================================================= */

.sidebar {
    background: #171b25;
    color: #ffffff;

    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100vh;

    overflow: hidden;

    border-right: 1px solid #11151d;
}


/* =========================================================
   LOGO / BRAND
   ========================================================= */

.brand {
    height: 72px;

    flex-shrink: 0;

    padding: 15px 18px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid rgba(255, 255, 255, .08);
}

.brand-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #d61f2c;

    color: #ffffff;

    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 700;
}

.brand strong {
    display: block;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.2;
}

.brand span {
    display: block;

    margin-top: 3px;

    color: #9299a9;

    font-size: 11px;
}


/* =========================================================
   SIDEBAR HEADER
   ========================================================= */

.sidebar-header {
    padding: 22px 16px 8px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #8e96a8;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;
}

.icon-button {
    width: 27px;
    height: 27px;

    padding: 0;

    border: 0;
    border-radius: 6px;

    background: #252b39;
    color: #ffffff;

    cursor: pointer;

    transition:
        background-color .15s ease,
        transform .15s ease;
}

.icon-button:hover {
    background: #323949;
}

.icon-button:active {
    transform: scale(.95);
}


/* =========================================================
   KİTAP AĞACI
   ========================================================= */

.library-tree {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        4px
        10px
        20px;
}

.library-tree::-webkit-scrollbar {
    width: 7px;
}

.library-tree::-webkit-scrollbar-track {
    background: transparent;
}

.library-tree::-webkit-scrollbar-thumb {
    background: #303746;
    border-radius: 10px;
}

.loading {
    padding: 15px 8px;

    color: #858da0;

    font-size: 13px;
    line-height: 1.5;
}

.book-title {
    padding: 10px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
}

.chapter-title {
    padding:
        10px
        12px
        5px;

    color: #aab1c0;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: .02em;
}

.lesson-item {
    margin: 2px 0;

    padding:
        9px
        12px
        9px
        20px;

    border-radius: 7px;

    color: #bbc1cc;

    font-size: 13px;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease;
}

.lesson-item:hover {
    background: #222836;
    color: #ffffff;
}

.lesson-item.active {
    background: #d61f2c;
    color: #ffffff;
}


/* =========================================================
   YENİ DERS
   ========================================================= */

.new-lesson-button {
    margin: 12px;

    padding: 11px;

    flex-shrink: 0;

    border: 1px solid #343b4a;
    border-radius: 8px;

    background: transparent;
    color: #c5cad4;

    font-size: 13px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background-color .15s ease,
        color .15s ease;
}

.new-lesson-button:hover {
    border-color: #4a5365;

    background: #202632;
    color: #ffffff;
}


/* =========================================================
   ORTA ALAN
   ========================================================= */

.main {
    min-width: 0;
    height: 100vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =========================================================
   ÜST TOOLBAR
   ========================================================= */

.toolbar {
    height: 72px;

    flex-shrink: 0;

    padding: 0 24px;

    background: #ffffff;

    border-bottom:
        1px solid #dfe3e9;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.toolbar-left {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}

.toolbar-left > div {
    min-width: 0;
}

.toolbar-left strong {
    display: block;

    max-width: 400px;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: #252a34;

    font-size: 14px;
    font-weight: 700;
}

.toolbar-left small {
    display: block;

    margin-top: 3px;

    color: #9298a3;

    font-size: 11px;
}

.toolbar-button {
    padding: 5px;

    border: 0;

    background: transparent;
    color: #252a34;

    font-size: 20px;

    cursor: pointer;
}

.toolbar-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


/* =========================================================
   GENEL BUTON
   ========================================================= */

.button {
    border: 0;
    border-radius: 7px;

    padding:
        9px
        14px;

    cursor: pointer;

    font-size: 13px;
    font-weight: 600;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .1s ease;
}

.button:active {
    transform: translateY(1px);
}

.button.secondary {
    border: 1px solid #dfe3e9;

    background: #ffffff;
    color: #333a46;
}

.button.secondary:hover {
    background: #f6f7f9;

    border-color: #cfd4dc;
}

.button.primary {
    background: #d61f2c;
    color: #ffffff;
}

.button.primary:hover {
    background: #be1925;
}


/* =========================================================
   İÇERİK EKLEME TOOLBAR
   ========================================================= */

.block-toolbar {
    height: 53px;

    flex-shrink: 0;

    background: #fafbfc;

    border-bottom:
        1px solid #dfe3e9;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 0 15px;
}

.block-toolbar button {
    padding:
        7px
        11px;

    border:
        1px solid transparent;

    border-radius: 6px;

    background: transparent;
    color: #505866;

    cursor: pointer;

    font-size: 13px;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.block-toolbar button:hover {
    background: #ffffff;

    border-color: #dfe3e9;

    color: #222832;
}

.block-toolbar .score-button {
    color: #c81d29;
    font-weight: 700;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.workspace {
    flex: 1;

    min-height: 0;

    overflow: auto;

    padding:
        38px
        38px
        80px;

    background: #eef1f5;
}

.workspace::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.workspace::-webkit-scrollbar-track {
    background: #e6e9ed;
}

.workspace::-webkit-scrollbar-thumb {
    background: #c4c9d0;

    border-radius: 10px;

    border: 2px solid #e6e9ed;
}


/* =========================================================
   A4 SAYFA
   ========================================================= */

.page {
    position: relative;

    width: 794px;
    min-height: 1123px;

    margin:
        0
        auto
        80px;

    background: #ffffff;

    box-shadow:
        0
        5px
        25px
        rgba(30, 40, 55, .12);
}

.page-content {
    padding:
        80px
        78px
        100px;
}

.lesson-number {
    color: #d61f2c;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
}

.page h1 {
    margin:
        9px
        0
        10px;

    color: #171b24;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;
    line-height: 1.15;
}

.lesson-description {
    margin:
        0
        0
        45px;

    color: #737985;

    font-size: 14px;
    line-height: 1.6;
}

.content-blocks {
    min-height: 400px;
}


/* =========================================================
   BOŞ İÇERİK
   ========================================================= */

.empty-state {
    padding:
        65px
        30px;

    border:
        2px dashed #e1e4e9;

    border-radius: 10px;

    text-align: center;

    color: #9ca2ad;
}

.empty-note {
    color: #d61f2c;

    font-family: Georgia, serif;

    font-size: 45px;
}

.empty-state h3 {
    margin:
        10px
        0
        5px;

    color: #59606c;

    font-size: 16px;
}

.empty-state p {
    margin: 0;

    color: #9ca2ad;

    font-size: 13px;
}


/* =========================================================
   SAYFA FOOTER
   ========================================================= */

.page-footer {
    position: absolute;

    bottom: 30px;
    left: 78px;
    right: 78px;

    padding-top: 10px;

    border-top:
        1px solid #e6e8ec;

    display: flex;
    justify-content: space-between;

    color: #a3a7ae;

    font-size: 10px;
}


/* =========================================================
   SAĞ ÖZELLİKLER PANELİ
   ========================================================= */

.properties {
    height: 100vh;

    overflow-y: auto;

    background: #ffffff;

    border-left:
        1px solid #dfe3e9;
}

.properties::-webkit-scrollbar {
    width: 7px;
}

.properties::-webkit-scrollbar-track {
    background: #f5f6f8;
}

.properties::-webkit-scrollbar-thumb {
    background: #d0d4da;

    border-radius: 10px;
}

.properties-header {
    min-height: 72px;

    padding:
        0
        20px;

    border-bottom:
        1px solid #e6e8ec;

    display: flex;
    align-items: center;

    color: #252a34;

    font-size: 14px;
    font-weight: 700;
}

.properties-empty {
    padding:
        100px
        35px;

    text-align: center;

    color: #a1a7b0;

    font-size: 13px;
    line-height: 1.5;
}

.properties-empty div {
    color: #d5d8de;

    font-family: Georgia, serif;

    font-size: 40px;
}

.properties-empty p {
    margin-top: 15px;
}


/* =========================================================
   SCORE / NOTA BLOĞU
   ========================================================= */

.score-block {
    margin:
        25px
        0;

    overflow: hidden;

    border:
        1px solid #e1e4e8;

    border-radius: 10px;

    background: #ffffff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.score-block:hover {
    border-color: #cfd4db;
}

.score-block.selected {
    border-color: #d61f2c;

    box-shadow:
        0
        0
        0
        2px
        rgba(214, 31, 44, .08);
}


/* =========================================================
   SCORE HEADER
   ========================================================= */

.score-header {
    min-height: 44px;

    padding:
        8px
        14px;

    background: #fafbfc;

    border-bottom:
        1px solid #e8eaee;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.score-title {
    color: #363d49;

    font-size: 13px;
    font-weight: 700;
}

.score-edit-button {
    padding:
        5px
        9px;

    border:
        1px solid #dfe2e7;

    border-radius: 6px;

    background: #ffffff;
    color: #555d68;

    cursor: pointer;

    font-size: 11px;

    transition:
        border-color .15s ease,
        color .15s ease,
        background-color .15s ease;
}

.score-edit-button:hover {
    border-color: #d61f2c;

    background: #fff8f8;

    color: #d61f2c;
}


/* =========================================================
   SCORE CANVAS
   ========================================================= */

.score-canvas {
    padding:
        25px
        25px
        20px;
}

.staff-area {
    position: relative;

    height: 160px;

    margin-left: 38px;
}


/* =========================================================
   PORTE ÇİZGİLERİ
   ========================================================= */

.staff-lines {
    position: absolute;

    top: 25px;
    left: 0;
    right: 0;

    height: 49px;

    pointer-events: none;
}

.staff-line {
    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background: #252525;
}

.staff-line:nth-child(1) {
    top: 0;
}

.staff-line:nth-child(2) {
    top: 12px;
}

.staff-line:nth-child(3) {
    top: 24px;
}

.staff-line:nth-child(4) {
    top: 36px;
}

.staff-line:nth-child(5) {
    top: 48px;
}


/* =========================================================
   ANAHTAR
   ========================================================= */

.clef-symbol {
    position: absolute;

    top: 7px;
    left: -34px;

    color: #111111;

    font-family:
        "Times New Roman",
        Georgia,
        serif;

    font-size: 61px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   ÖLÇÜ
   ========================================================= */

.time-signature {
    position: absolute;

    top: 20px;
    left: 29px;

    color: #111111;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;
    font-weight: 700;

    line-height: 21px;

    text-align: center;

    pointer-events: none;
}


/* =========================================================
   NOTA KONTEYNER
   ========================================================= */

.score-notes {
    position: absolute;

    top: 0;
    left: 80px;
    right: 0;

    height: 150px;

    display: flex;
    align-items: flex-start;

    gap: 25px;
}

.score-empty {
    width: 100%;
    height: 135px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #9aa0aa;

    font-size: 12px;
}


/* =========================================================
   TEK NOTA
   ========================================================= */

.score-note {
    position: relative;

    flex:
        0
        0
        42px;

    width: 42px;
    height: 145px;

    border-radius: 5px;

    cursor: pointer;

    transition:
        background-color .15s ease,
        transform .15s ease;
}

.score-note:hover {
    background:
        rgba(214, 31, 44, .05);
}


/* =========================================================
   NOTA KAFASI
   ========================================================= */

.note-head {
    position: absolute;

    width: 13px;
    height: 9px;

    background: #111111;

    border-radius: 50%;

    transform:
        rotate(-18deg);

    transform-origin: center;
}


/* =========================================================
   BİRLİK / İKİLİK NOTA KAFASI
   ========================================================= */

.note-head.hollow {
    background: #ffffff;

    border:
        2px solid #111111;
}


/* =========================================================
   NOTA SAPI
   ========================================================= */

.note-stem {
    position: absolute;

    width: 1.5px;
    height: 35px;

    background: #111111;
}


/* =========================================================
   NOTANIN ALT BİLGİLERİ
   ========================================================= */

.note-info {
    position: absolute;

    top: 87px;
    left: 50%;

    width: 78px;

    transform:
        translateX(-50%);

    text-align: center;

    pointer-events: none;
}


/* 1. SATIR - ŞARKI SÖZÜ */

.note-lyric {
    min-height: 19px;

    color: #333840;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;
    font-weight: 500;

    line-height: 18px;

    white-space: nowrap;
}


/* 2. SATIR - TEZENE */

.note-picking {
    min-height: 20px;

    color: #d61f2c;

    font-size: 17px;
    font-weight: 800;

    line-height: 20px;
}


/* 3. SATIR - DO RE Mİ */

.note-name {
    min-height: 17px;

    color: #535a66;

    font-size: 11px;
    font-weight: 800;

    line-height: 17px;

    letter-spacing: .02em;

    white-space: nowrap;
}


/* =========================================================
   SAĞ PANEL - NOTA EDİTÖRÜ
   ========================================================= */

.note-panel {
    padding: 18px;
}

.property-group {
    margin-bottom: 18px;
}

.property-group label {
    display: block;

    margin-bottom: 7px;

    color: #777e89;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .055em;
}


/* =========================================================
   INPUT / SELECT
   ========================================================= */

.property-group input,
.property-group select,
.property-group textarea {
    display: block;

    width: 100%;

    padding:
        9px
        10px;

    border:
        1px solid #dfe2e7;

    border-radius: 7px;

    background: #ffffff;
    color: #333a45;

    font-size: 13px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.property-group input:hover,
.property-group select:hover,
.property-group textarea:hover {
    border-color: #cbd0d8;
}

.property-group input:focus,
.property-group select:focus,
.property-group textarea:focus {
    border-color: #d61f2c;

    outline: 0;

    box-shadow:
        0
        0
        0
        3px
        rgba(214, 31, 44, .08);
}

.property-group input:disabled {
    background: #f7f8fa;

    color: #404652;

    opacity: 1;

    cursor: default;
}


/* =========================================================
   NOTA SÜRE BUTONLARI
   ========================================================= */

.note-toolbar {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 5px;
}

.note-toolbar button {
    min-height: 44px;

    padding:
        6px
        3px;

    border:
        1px solid #dfe2e7;

    border-radius: 6px;

    background: #ffffff;
    color: #404752;

    cursor: pointer;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .1s ease;
}

.note-toolbar button:hover {
    border-color: #d61f2c;

    color: #d61f2c;
}

.note-toolbar button:active {
    transform: scale(.97);
}


/* =========================================================
   SEÇİLİ NOTA SÜRESİ
   ========================================================= */

.note-toolbar button.active {
    border-color: #d61f2c;

    background: #d61f2c;
    color: #ffffff;
}

.note-toolbar button.active:hover {
    background: #c51b27;
    color: #ffffff;
}


/* =========================================================
   AYIRICI
   ========================================================= */

.note-panel hr {
    margin:
        20px
        0;

    border: 0;

    border-top:
        1px solid #e6e8ec;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

    .app {
        grid-template-columns:
            240px
            minmax(700px, 1fr);
    }

    .properties {
        display: none;
    }

}


@media (max-width: 1000px) {

    .app {
        grid-template-columns:
            210px
            minmax(700px, 1fr);
    }

    .workspace {
        padding:
            25px
            20px
            60px;
    }

}


/* =========================================================
   PRINT
   Şimdilik temel yapı.
   PDF aşamasında bunu ayrıca geliştireceğiz.
   ========================================================= */

@media print {

    body {
        background: #ffffff;
    }

    .sidebar,
    .toolbar,
    .block-toolbar,
    .properties {
        display: none !important;
    }

    .app {
        display: block;

        height: auto;
    }

    .main {
        display: block;

        height: auto;

        overflow: visible;
    }

    .workspace {
        padding: 0;

        overflow: visible;

        background: #ffffff;
    }

    .page {
        width: 210mm;
        min-height: 297mm;

        margin: 0;

        box-shadow: none;
    }

}

/* =========================================================
   VEXFLOW RENDERER
   ========================================================= */

.vex-score-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
}

.vex-score-canvas {
    min-height: 180px;
}

.vex-score-canvas svg {
    display: block;
}


/* Eğitim katmanı */

.score-annotations {
    display: flex;
    align-items: flex-start;

    margin-top: -43px;
    margin-left: 102px;
    margin-right: 20px;

    position: relative;
    z-index: 4;
}

.score-annotation-item {
    flex: 1;
    min-width: 45px;

    text-align: center;

    cursor: pointer;

    border-radius: 5px;

    padding: 2px;

    transition:
        background-color .15s ease;
}

.score-annotation-item:hover {
    background:
        rgba(214, 31, 44, .06);
}

.annotation-lyric {
    min-height: 19px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    color: #333840;
}

.annotation-picking {
    min-height: 21px;

    font-size: 18px;
    font-weight: 800;

    color: #d61f2c;
}

.annotation-note-name {
    min-height: 18px;

    font-size: 11px;
    font-weight: 800;

    color: #555c67;
}


/* Tıklanabilir nota alanları */

.vex-note-hit-layer {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 120px;

    pointer-events: none;
}

.vex-note-hit {
    position: absolute;

    top: 28px;

    width: 32px;
    height: 75px;

    padding: 0;

    border: 0;
    border-radius: 6px;

    background: transparent;

    cursor: pointer;

    pointer-events: auto;
}

.vex-note-hit:hover {
    background:
        rgba(214, 31, 44, .07);
}


/* Hata */

.score-render-error {
    padding: 30px;

    text-align: center;

    color: #b4232e;

    font-size: 13px;

    background: #fff7f7;

    border:
        1px solid #f0d5d7;

    border-radius: 8px;
}