/* =========================================================
   Dokumendid ja Aruanded – Frontend Styles
   Font: Montserrat
   Desktop node: 858-7286  |  Mobile node: 858-7317
   ========================================================= */

/* ── Variables ─────────────────────────────────────────── */
.da-wrap {
    --da-font:            'Montserrat', sans-serif;
    --da-orange:          #f4c58f;
    --da-card-bg:         #f7f7f8;
    --da-card-border:     #e9e9ec;
    --da-input-border:    #c8c8d0;
    --da-text-primary:    #000000;
    --da-text-secondary:  #454854;
    --da-link-color:      #000000;
    --da-white:           #ffffff;
    --da-radius-card:     4px;
    --da-radius-sidebar:  8px;

    font-family: var(--da-font);
    color: var(--da-text-primary);
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
}


/* ── Intro text ─────────────────────────────────────────── */
.da-intro {
    font-family:  var(--da-font);
    font-weight:  400;
    font-size:    18px;
    line-height:  1.6;
    color:        var(--da-text-primary);
    margin:       0;
    width:        100%;
    position:     relative;
}


/* ── Admin inline edit ──────────────────────────────────── */
.da-intro[contenteditable="true"] {
    outline:       none;
    border-radius: 4px;
    transition:    box-shadow 0.15s ease, background 0.15s ease;
}

.da-intro[contenteditable="true"]:hover,
.da-intro[contenteditable="true"]:focus {
    box-shadow: 0 0 0 2px var(--da-orange);
    background: rgba(244, 197, 143, 0.08);
    cursor:     text;
}

.da-intro-save-btn {
    display:       none;
    position:      absolute;
    bottom:        -36px;
    right:         0;
    z-index:       100;
    background:    #1d2327;
    color:         #fff;
    border:        none;
    border-radius: 4px;
    padding:       6px 14px;
    font-family:   var(--da-font);
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    white-space:   nowrap;
    box-shadow:    0 2px 8px rgba(0,0,0,0.18);
    transition:    background 0.15s;
}

.da-intro-save-btn:hover {
    background: #2c3338;
}

.da-intro-save-btn.visible {
    display: block;
}

.da-intro-save-btn.saving {
    opacity: 0.6;
    pointer-events: none;
}

.da-intro-saved-msg {
    display:     none;
    position:    absolute;
    bottom:      -36px;
    right:       0;
    font-family: var(--da-font);
    font-size:   13px;
    color:       #2e7d32;
    font-weight: 500;
}

.da-intro-saved-msg.visible {
    display: block;
}

/* ── Split layout ───────────────────────────────────────── */
.da-split {
    display:     flex;
    gap:         48px;
    align-items: flex-start;
    width:       100%;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.da-sidebar {
    flex-shrink: 0;
    width:       270px;
}

.da-sisukord {
    background:    var(--da-white);
    border-radius: var(--da-radius-sidebar);
    overflow:      hidden;
}

.da-sisukord-title {
    font-family:  var(--da-font);
    font-weight:  500;
    font-size:    24px;
    line-height:  32px;
    color:        var(--da-text-primary);
    margin:       0 0 16px 0;
}

.da-nav {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.da-nav-item {
    display:         block;
    padding:         4px 8px;
    font-family:     var(--da-font);
    font-weight:     400;
    font-size:       16px;
    line-height:     24px;
    color:           var(--da-link-color);
    text-decoration: underline;
    border-radius:   2px;
    transition:      background 0.15s ease;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.da-nav-item:hover {
    background:      rgba(244, 197, 143, 0.35);
    text-decoration: underline;
    color:           var(--da-link-color);
}

.da-nav-item--active {
    background:      var(--da-orange);
    text-decoration: none;
    font-weight:     400;
    pointer-events:  none;
}

/* Mobile dropdown – hidden on desktop */
.da-mobile-nav {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════ */
.da-main {
    flex:           1 0 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.da-section {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.da-section-title {
    font-family: var(--da-font);
    font-weight: 500;
    font-size:   40px;
    line-height: 48px;
    color:       var(--da-text-primary);
    margin:      0;
}

/* ═══════════════════════════════════════════════════════════
   DOCUMENT LIST
   ═══════════════════════════════════════════════════════════ */
.da-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        16px;
}

.da-item {
    background:    var(--da-card-bg);
    border:        1px solid var(--da-card-border);
    border-radius: var(--da-radius-card);
    overflow:      hidden;
}

/*
  DESKTOP grid template areas:
    "icon title arrow"
    "icon meta  arrow"
*/
.da-item-inner {
    display:               grid;
    grid-template-columns: 68px 1fr 32px;
    grid-template-rows:    auto auto;
    grid-template-areas:
        "icon title arrow"
        "icon meta  arrow";
    column-gap:      8px;
    padding:         4px 16px 4px 4px;
    text-decoration: none;
    color:           inherit;
    transition:      background 0.15s ease;
}

.da-item-inner:hover {
    background: rgba(244, 197, 143, 0.2);
}

.da-item-icon {
    grid-area:       icon;
    background:      var(--da-white);
    border-radius:   var(--da-radius-card);
    display:         flex;
    align-items:     center;
    justify-content: center;
    align-self:      stretch;
    padding:         4px;
}

.da-item-icon svg {
    width:       36px;
    height:      36px;
    color:       #888;
    flex-shrink: 0;
}

.da-item-title {
    grid-area:   title;
    font-family: var(--da-font);
    font-weight: 500;
    font-size:   18px;
    line-height: 1.6;
    color:       var(--da-text-primary);
    margin:      0;
    padding-top: 4px;
    align-self:  end;
}

.da-item-meta {
    grid-area:       meta;
    display:         flex;
    flex-direction:  column;
    padding-bottom:  16px;
    align-self:      start;
}

.da-item-org {
    font-family: var(--da-font);
    font-weight: 400;
    font-size:   14px;
    line-height: 24px;
    color:       var(--da-text-primary);
    margin:      0;
}

.da-item-year {
    font-family: var(--da-font);
    font-weight: 400;
    font-size:   14px;
    line-height: 24px;
    color:       var(--da-text-secondary);
    margin:      0;
}

.da-item-arrow {
    grid-area:       arrow;
    display:         flex;
    align-items:     center;
    justify-content: center;
    align-self:      center;
    opacity:         0.4;
    transition:      opacity 0.15s ease;
}

.da-item-inner:hover .da-item-arrow {
    opacity: 1;
}

.da-item-arrow svg {
    width:  20px;
    height: 20px;
    color:  var(--da-text-primary);
}

.da-empty {
    font-family: var(--da-font);
    font-size:   16px;
    color:       var(--da-text-secondary);
    padding:     32px 0;
    margin:      0;
}


/* ═══════════════════════════════════════════════════════════
   MOBILE  (≤ 768px)
   Figma node 858-7317:
   - padding: 16px
   - gap: 16px
   - Sidebar → dropdown with chevron
   - Card: 2-row grid, icon 40px, meta spans full width
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .da-wrap {
        gap: 16px;
    }

    .da-split {
        flex-direction: column;
        gap:            24px;
    }

    /* Hide desktop sidebar */
    .da-sidebar {
        display: none;
    }

    /* ── Mobile dropdown ──────────────────────────────────── */
    .da-mobile-nav {
        display:        flex;
        flex-direction: column;
        gap:            4px;
        width:          100%;
    }

    .da-mobile-nav-label {
        font-family: var(--da-font);
        font-weight: 700;
        font-size:   16px;
        line-height: 24px;
        color:       var(--da-text-primary);
        margin:      0;
    }

    .da-mobile-select-wrap {
        position:   relative;
        width:      100%;
        background: var(--da-white);
        border:     1px solid var(--da-input-border);
    }

    .da-mobile-select {
        width:              100%;
        appearance:         none;
        -webkit-appearance: none;
        background:         transparent;
        border:             none;
        outline:            none;
        padding:            12px 48px 12px 16px;
        font-family:        var(--da-font);
        font-weight:        400;
        font-size:          16px;
        line-height:        24px;
        color:              var(--da-text-primary);
        cursor:             pointer;
    }

    .da-mobile-select-arrow {
        position:        absolute;
        right:           8px;
        top:             50%;
        transform:       translateY(-50%);
        width:           32px;
        height:          32px;
        display:         flex;
        align-items:     center;
        justify-content: center;
        pointer-events:  none;
    }

    .da-mobile-select-arrow svg {
        width:  16px;
        height: 16px;
        color:  var(--da-text-primary);
    }

    /* ── Mobile card ──────────────────────────────────────────
       Grid areas:
         "icon  title"
         "meta  meta"
    ─────────────────────────────────────────────────────────── */
    .da-item-inner {
        grid-template-columns: 40px 1fr;
        grid-template-rows:    auto auto;
        grid-template-areas:
            "icon  title"
            "meta  meta";
        padding:    8px;
        column-gap: 8px;
        row-gap:    0;
    }

    .da-item-icon {
        width:  40px;
        height: 40px;
        padding: 2px;
        align-self: start;
    }

    .da-item-icon svg {
        width:  28px;
        height: 28px;
    }

    .da-item-title {
        padding-top: 0;
        align-self:  center;
    }

    .da-item-meta {
        padding-bottom: 0;
        padding-top:    4px;
    }

    /* Hide arrow on mobile */
    .da-item-arrow {
        display: none;
    }

    .da-item-inner:hover {
        background: transparent;
    }
}

/* ── Very small screens ─────────────────────────────────── */
@media (max-width: 400px) {
    .da-intro          { font-size: 16px; }
    .da-section-title  { font-size: 28px; line-height: 36px; }
    .da-item-title     { font-size: 16px; }
}