/* ============================================================
   KURA — Layout
   kura-layout.css — v1.1
   Page-specific structural CSS. Each section scoped by page class.
   No component styles — those live in kura-components.css.
   ============================================================ */

/* ============================================================
   APP SHELL
   ============================================================ */
.kura-app {
    display: flex;
    min-height: 100vh;
}

.kura-main {
    flex:        1;
    margin-left: var(--sidebar-w);
    min-width:   0;
    display:     flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .kura-main {
        margin-left: 0;
        padding-bottom: 56px; /* bottom nav height */
    }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.kura-login-page {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bg);
    padding:         var(--sp-5);
}

.kura-login-box {
    width:          min(360px, 100%);
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-6);
}

.kura-login-box__brand {
    text-align: center;
}

.kura-login-box__wordmark {
    font-family:    var(--font-display);
    font-size:      48px;
    font-weight:    400;
    text-transform: uppercase;
    color:          var(--ink);
    letter-spacing: 0.04em;
    line-height:    1;
}

.kura-login-box__wordmark span { color: var(--accent); }

.kura-login-box__tagline {
    font-size:      var(--t-meta);
    color:          var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top:     var(--sp-2);
}

.kura-login-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-4);
}

.kura-login-error {
    font-size:  var(--t-body);
    color:      var(--accent);
    text-align: center;
    padding:    var(--sp-2) var(--sp-3);
    background: rgba(232,64,16,.06);
    border:     1px solid rgba(232,64,16,.2);
}

/* ============================================================
   DASHBOARD PAGE (.page-dashboard)
   ============================================================ */
.page-dashboard .kura-content-shell {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    auto;
    gap:                   var(--sp-5);
    align-items:           start;
}

.page-dashboard .panel-upcoming     { grid-column: 1; grid-row: 1; }
.page-dashboard .panel-pets         { grid-column: 2; grid-row: 1; }
.page-dashboard .panel-quick-access { grid-column: 1; grid-row: 2; }
.page-dashboard .panel-quick-add    { grid-column: 2; grid-row: 2; }

/* Panel component */
.kura-panel {
    background: var(--surface);
    border:     1px solid var(--div);
}

.kura-panel__head {
    padding:         var(--sp-4) var(--sp-5);
    border-bottom:   1px solid var(--div);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.kura-panel__title {
    font-family:    var(--font-display);
    font-size:      16px;
    font-weight:    400;
    text-transform: uppercase;
    color:          var(--ink);
    letter-spacing: 0.04em;
    line-height:    1;
}

/* Ghost button inside panel head — tighter size */
.kura-panel__view-all {
    font-size: var(--t-label);
    height:    24px;
    padding:   0 var(--sp-2);
}

.kura-panel__body  { padding: 0; }

.kura-panel__body--padded { padding: var(--sp-4) var(--sp-5); }

.kura-panel__footer {
    padding:    var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--div);
}

/* Full-width CTA button in panel footer */
.kura-panel__cta {
    width:           100%;
    justify-content: center;
}

/* Date display in dashboard header */
.kura-date-display {
    font-size:      var(--t-meta);
    color:          var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Quick Access inline list (dashboard panel) */
.kura-qa-inline-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-3);
}

.kura-qa-inline-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--sp-3);
}

.kura-qa-inline-item__title {
    font-size:   var(--t-body);
    font-weight: 500;
    color:       var(--ink);
}

.kura-qa-inline-item__cat {
    font-size:      var(--t-meta);
    color:          var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top:     2px;
}

/* Quick Add shortcuts */
.kura-quick-add-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--sp-2);
    padding:               var(--sp-4) var(--sp-5);
}

.kura-quick-add-btn {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--sp-2);
    padding:         var(--sp-4);
    background:      var(--s1);
    border:          1px solid var(--div);
    cursor:          pointer;
    text-decoration: none;
    color:           var(--ink2);
    transition:      background 0.15s ease;
}

.kura-quick-add-btn:hover { background: var(--s2); }

.kura-quick-add-btn__symbol { font-size: 18px; }

.kura-quick-add-btn__label {
    font-size:      var(--t-label);
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align:     center;
}

@media (max-width: 768px) {
    .page-dashboard .kura-content-shell {
        grid-template-columns: 1fr;
    }
    .page-dashboard .panel-upcoming,
    .page-dashboard .panel-pets,
    .page-dashboard .panel-quick-access,
    .page-dashboard .panel-quick-add {
        grid-column: 1;
        grid-row:    auto;
    }
}

/* ============================================================
   TASK LIST PAGE (.page-tasks)
   ============================================================ */

/* Filter tabs */
.kura-filter-tabs {
    display:     flex;
    gap:         var(--sp-1);
    padding:     var(--sp-4) 0;
    flex-wrap:   wrap;
}

.kura-filter-tab {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    padding:         var(--sp-2) var(--sp-3);
    font-family:     var(--font-body);
    font-size:       var(--t-body);
    font-weight:     400;
    color:           var(--ink3);
    text-decoration: none;
    border:          1px solid transparent;
    transition:      color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.kura-filter-tab:hover  { color: var(--ink2); background: var(--s1); }

.kura-filter-tab.active {
    color:        var(--ink);
    font-weight:  500;
    border-color: var(--div);
    background:   var(--surface);
}

/* Task list shell */
.page-tasks .kura-drawer-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kura-list-container {
    background: var(--surface);
    border:     1px solid var(--div);
}

/* Task row extensions */
.kura-task-row {
    align-items: center;
}

.kura-task-check {
    flex-shrink:  0;
    width:        28px;
    height:       28px;
    border:       none;
    background:   transparent;
    color:        var(--ink3);
    font-size:    16px;
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    justify-content: center;
    transition:   color 0.15s ease;
    line-height:  1;
    padding:      0;
}

.kura-task-check:hover       { color: var(--accent); }
.kura-task-check--today      { color: var(--accent); }

.kura-task-row__right {
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
    flex-shrink: 0;
}

.kura-task-edit {
    font-size:   14px;
    height:      28px;
    padding:     0 var(--sp-2);
    color:       var(--ink3);
    opacity:     0;
    transition:  opacity 0.15s ease;
}

.kura-task-row:hover .kura-task-edit { opacity: 1; }

/* ============================================================
   PET PAGES (.page-pets, .page-pet-detail)
   ============================================================ */
.kura-pet-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   var(--sp-4);
}

.kura-pet-card {
    background:      var(--surface);
    border:          1px solid var(--div);
    padding:         var(--sp-5);
    cursor:          pointer;
    transition:      border-color 0.15s ease;
    text-decoration: none;
    display:         block;
    color:           inherit;
}

.kura-pet-card:hover { border-color: var(--ink3); }

.kura-pet-card__name {
    font-family:    var(--font-display);
    font-size:      22px;
    font-weight:    400;
    text-transform: uppercase;
    color:          var(--ink);
    line-height:    1;
}

.kura-pet-card__species {
    font-size:      var(--t-meta);
    color:          var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top:     var(--sp-1);
}

.kura-pet-card__meta {
    margin-top:     var(--sp-4);
    font-size:      var(--t-body);
    color:          var(--ink2);
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-1);
}

/* Pet detail — two column layout */
.kura-pet-detail {
    display:               grid;
    grid-template-columns: 300px 1fr;
    gap:                   var(--sp-6);
    align-items:           start;
}

@media (max-width: 900px) {
    .kura-pet-detail {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CONTACT LIST PAGE (.page-contacts)
   ============================================================ */
.kura-contacts-layout {
    display:               grid;
    grid-template-columns: 200px 1fr;
    gap:                   var(--sp-5);
    align-items:           start;
}

.kura-contact-filters {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-1);
}

.kura-filter-btn {
    padding:         var(--sp-2) var(--sp-3);
    font-size:       var(--t-body);
    font-weight:     400;
    color:           var(--ink2);
    cursor:          pointer;
    border:          none;
    background:      transparent;
    text-align:      left;
    transition:      background 0.1s ease;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.kura-filter-btn:hover  { background: var(--s1); }
.kura-filter-btn.active { background: var(--s2); color: var(--ink); font-weight: 500; }

@media (max-width: 768px) {
    .kura-contacts-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   QUICK ACCESS PAGE (.page-quick-access)
   ============================================================ */
.kura-qa-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   var(--sp-4);
}

.kura-qa-item {
    background:     var(--surface);
    border:         1px solid var(--div);
    padding:        var(--sp-5);
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-3);
}

.kura-qa-item__category {
    font-size:      var(--t-label);
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--ink3);
}

.kura-qa-item__title {
    font-size:   var(--t-body);
    font-weight: 500;
    color:       var(--ink);
}

.kura-qa-item__value {
    font-size:      10px;
    color:          var(--ink2);
    word-break:     break-all;
    padding:        var(--sp-2) var(--sp-3);
    background:     var(--s1);
    font-family:    monospace;
    letter-spacing: 0.03em;
}

.kura-qa-item__actions {
    display:    flex;
    gap:        var(--sp-2);
    margin-top: auto;
}