/*
 * TapuVision Studio — Panel CSS
 * Müşteri paneli stilleri.
 */

/* -----------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------- */
.tv-panel *,
.tv-login-wrap * {
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------
   Panel layout
   --------------------------------------------------------------------- */
.tv-panel {
    display: flex;
    min-height: 600px;
    background: #f6f5f2;
    border-radius: 12px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    color: #1a1a18;
}

/* Sidebar */
.tv-panel__sidebar {
    width: 200px;
    flex-shrink: 0;
    background: #085041;
    padding: 0;
}

.tv-panel__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.tv-panel__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1D9E75;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tv-panel__username {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.tv-panel__usermeta {
    font-size: 11px;
    color: #5DCAA5;
    margin-top: 1px;
}

/* Nav */
.tv-panel__nav {
    padding: 8px 0;
}

.tv-panel__nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: 13px;
    transition: background .15s, color .15s;
    border-left: 2px solid transparent;
}

.tv-panel__nav-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.tv-panel__nav-item--active {
    background: rgba(255,255,255,.12);
    color: #9FE1CB;
    border-left-color: #9FE1CB;
}

.tv-panel__nav-item--logout {
    margin-top: 16px;
    color: rgba(255,255,255,.4);
}

/* Content */
.tv-panel__content {
    flex: 1;
    padding: 24px;
    min-width: 0;
    overflow: auto;
}

/* -----------------------------------------------------------------------
   Section
   --------------------------------------------------------------------- */
.tv-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.tv-section__header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* -----------------------------------------------------------------------
   Proje kartları
   --------------------------------------------------------------------- */
.tv-project-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tv-project-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e3da;
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.tv-project-card:hover {
    border-color: #1D9E75;
    box-shadow: 0 2px 8px rgba(29,158,117,.1);
}

.tv-project-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.tv-project-card__title {
    font-size: 14px;
    font-weight: 500;
}

.tv-project-card__meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #888780;
}

/* -----------------------------------------------------------------------
   Proje adımları
   --------------------------------------------------------------------- */
.tv-steps {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e5e3da;
    border-radius: 10px;
    padding: 14px 16px;
}

.tv-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.tv-step__dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.tv-step--done  .tv-step__dot { background: #E1F5EE; color: #085041; }
.tv-step--active .tv-step__dot { background: #1D9E75; color: #fff; }
.tv-step--wait  .tv-step__dot { background: #f0efe8; color: #888780; }

.tv-step__label { font-size: 11px; color: #888780; text-align: center; }
.tv-step--active .tv-step__label { color: #085041; font-weight: 500; }

.tv-step__line {
    flex: 1;
    height: 1px;
    margin-bottom: 18px;
}

.tv-step__line--done { background: #1D9E75; }
.tv-step__line--wait { background: #e5e3da; }

/* -----------------------------------------------------------------------
   Detay grid
   --------------------------------------------------------------------- */
.tv-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.tv-detail-card {
    background: #fff;
    border: 1px solid #e5e3da;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tv-detail-label {
    font-size: 11px;
    font-weight: 500;
    color: #888780;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tv-detail-value {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a18;
}

/* -----------------------------------------------------------------------
   Dosyalar
   --------------------------------------------------------------------- */
.tv-files { margin: 16px 0; }
.tv-files h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.tv-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f6f5f2;
    border-radius: 8px;
    margin-bottom: 6px;
}

.tv-file-icon { font-size: 20px; flex-shrink: 0; }

.tv-file-info { flex: 1; min-width: 0; }

.tv-file-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-file-size { font-size: 11px; color: #888780; }

/* -----------------------------------------------------------------------
   Ticket
   --------------------------------------------------------------------- */
.tv-ticket-section { margin-top: 20px; }
.tv-ticket-section h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

.tv-ticket-thread {
    background: #fff;
    border: 1px solid #e5e3da;
    border-radius: 10px;
    padding: 14px;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.tv-ticket-msg { max-width: 85%; }
.tv-ticket-msg--admin { align-self: flex-start; }
.tv-ticket-msg--customer { align-self: flex-end; }

.tv-ticket-meta {
    font-size: 11px;
    color: #888780;
    margin-bottom: 3px;
    padding: 0 4px;
}

.tv-ticket-msg--admin .tv-ticket-meta { text-align: left; }
.tv-ticket-msg--customer .tv-ticket-meta { text-align: right; }

.tv-ticket-body {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
}

.tv-ticket-msg--admin    .tv-ticket-body { background: #f0efe8; border-bottom-left-radius: 3px; }
.tv-ticket-msg--customer .tv-ticket-body { background: #E1F5EE; color: #085041; border-bottom-right-radius: 3px; }

.tv-ticket-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.tv-ticket-form textarea {
    flex: 1;
    resize: none;
    border: 1px solid #e5e3da;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    height: 72px;
}

/* -----------------------------------------------------------------------
   Revize kutusu
   --------------------------------------------------------------------- */
.tv-revision-box {
    background: #fff;
    border: 1px solid #e5e3da;
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
}

.tv-revision-form textarea {
    width: 100%;
    resize: none;
    border: 1px solid #e5e3da;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    margin-bottom: 8px;
}

/* -----------------------------------------------------------------------
   Ödeme listesi
   --------------------------------------------------------------------- */
.tv-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e3da;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.tv-payment-row__project { font-size: 13px; font-weight: 500; }
.tv-payment-row__date    { font-size: 11px; color: #888780; margin-top: 2px; }
.tv-payment-row__right   { text-align: right; }
.tv-payment-row__amount  { font-size: 14px; font-weight: 600; }

/* -----------------------------------------------------------------------
   Ticket listesi
   --------------------------------------------------------------------- */
.tv-ticket-list { display: flex; flex-direction: column; gap: 8px; }

.tv-ticket-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e3da;
    border-radius: 8px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
}

.tv-ticket-list-item:hover { border-color: #1D9E75; }
.tv-ticket-list-item__project { font-size: 13px; }

/* -----------------------------------------------------------------------
   Form stilleri
   --------------------------------------------------------------------- */
.tv-form__group { margin-bottom: 14px; }
.tv-form__row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tv-form__label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #888780;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 5px;
}

.tv-form__input,
.tv-form__select,
.tv-form__textarea {
    width: 100%;
    border: 1px solid #e5e3da;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #1a1a18;
    transition: border-color .15s;
}

.tv-form__input:focus,
.tv-form__select:focus,
.tv-form__textarea:focus {
    outline: none;
    border-color: #1D9E75;
}

.tv-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* -----------------------------------------------------------------------
   Butonlar
   --------------------------------------------------------------------- */
.tv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid #e5e3da;
    background: #fff;
    color: #1a1a18;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.tv-btn:hover { background: #f6f5f2; }

.tv-btn--primary {
    background: #085041;
    color: #9FE1CB;
    border-color: #085041;
}

.tv-btn--primary:hover { background: #0F6E56; }

.tv-btn--warning {
    background: #633806;
    color: #FAC775;
    border-color: #633806;
}

.tv-btn--sm { padding: 5px 10px; font-size: 12px; }
.tv-btn--lg { padding: 10px 20px; font-size: 14px; }

/* -----------------------------------------------------------------------
   Badge
   --------------------------------------------------------------------- */
.tv-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.tv-badge--pending   { background: #FAEEDA; color: #633806; }
.tv-badge--quoted    { background: #f0efe8; color: #444441; }
.tv-badge--paying    { background: #EEEDFE; color: #3C3489; }
.tv-badge--active    { background: #E1F5EE; color: #085041; }
.tv-badge--preview   { background: #E6F1FB; color: #0C447C; }
.tv-badge--delivered { background: #E6F1FB; color: #0C447C; }
.tv-badge--revision  { background: #FAECE7; color: #712B13; }
.tv-badge--completed { background: #EAF3DE; color: #27500A; }

/* -----------------------------------------------------------------------
   Bildirimler
   --------------------------------------------------------------------- */
.tv-notice {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.55;
}

.tv-notice--info    { background: #E6F1FB; color: #0C447C; }
.tv-notice--success { background: #EAF3DE; color: #27500A; }
.tv-notice--error   { background: #FCEBEB; color: #791F1F; }
.tv-notice--warning { background: #FAEEDA; color: #633806; }

.tv-empty {
    text-align: center;
    padding: 32px;
    color: #888780;
    font-size: 14px;
}

/* -----------------------------------------------------------------------
   Login kutusu
   --------------------------------------------------------------------- */
.tv-login-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.tv-login-box {
    background: #fff;
    border: 1px solid #e5e3da;
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
}

.tv-login-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.tv-login-links {
    text-align: center;
    font-size: 13px;
    margin-top: 12px;
}

/* -----------------------------------------------------------------------
   Mobil uyum
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    .tv-panel {
        flex-direction: column;
    }

    .tv-panel__sidebar {
        width: 100%;
    }

    .tv-panel__nav {
        display: flex;
        overflow-x: auto;
        padding: 0;
        border-top: 1px solid rgba(255,255,255,.1);
    }

    .tv-panel__nav-item {
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .tv-panel__nav-item--active {
        border-left: none;
        border-bottom-color: #9FE1CB;
    }

    .tv-panel__content { padding: 16px; }

    .tv-form__row { grid-template-columns: 1fr; }

    .tv-detail-grid { grid-template-columns: 1fr 1fr; }

    .tv-steps { overflow-x: auto; }
}