/* ============================================================
   Triyakom Music Publishing — App Styles
   ============================================================ */

:root {
    --brand:        #C13A1B;
    --brand-dark:   #A12E14;
    --brand-light:  #E05828;
    --c-text:       #1A1A1A;
    --c-body:       #75635E;
    --c-muted:      #A08E89;
    --c-bg:         #F7F0EE;
    --c-border:     #E6D0CB;
    --c-input:      #F5EDEB;
}

/* ---- Base ---- */
body {
    background-color: var(--c-bg);
    color: var(--c-text);
}

/* ---- Buttons ---- */
.btn-primary {
    background: linear-gradient(to right, var(--brand), var(--brand-light));
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    font-weight: 800;
    font-size: 0.875rem;
    transition: all 0.15s;
    border: none;
    cursor: pointer;
}
.btn-primary:hover  { background: linear-gradient(to right, var(--brand-dark), var(--brand)); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-outline {
    background: #fff;
    color: var(--c-muted);
    border: 1px solid var(--c-border);
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-outline:hover { background: var(--c-bg); }

/* ---- Links ---- */
.link-accent {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}
.link-accent:hover { color: var(--c-text); }

/* ---- Inputs ---- */
.input-field {
    background-color: var(--c-input);
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    outline: none;
    width: 100%;
    font-size: 0.875rem;
}
.input-field:focus { border-color: var(--brand); }

/* ---- Cards ---- */
.card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: 0 20px 25px -5px rgba(193, 58, 27, 0.06);
}
.card-gradient {
    background: linear-gradient(to bottom right, #fff, var(--c-bg));
    border: 1px solid var(--c-border);
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: 0 20px 25px -5px rgba(193, 58, 27, 0.08);
}

/* ---- Sidebar ---- */
.sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--c-border);
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(24px);
    padding: 1.5rem 1.5rem 0 1.5rem;
    width: 18rem;
}
.sidebar-link {
    display: block;
    width: 100%;
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    color: var(--c-body);
    text-decoration: none;
    transition: all 0.15s;
}
.sidebar-link:hover { background: var(--c-bg); color: var(--brand); font-weight: 600; }
.sidebar-logout {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.sidebar-logout:hover { background: var(--brand); color: #fff; }
.sidebar-link.active {
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    color: #fff;
    font-weight: 600;
}

/* ---- Text utilities ---- */
.text-accent { color: var(--brand); }
.text-muted  { color: var(--c-body); }
.text-nowrap { white-space: nowrap; }

/* ---- Border utilities ---- */
.border-c { border-color: var(--c-border); }
.shadow-brand { box-shadow: 0 20px 25px -5px rgba(193, 58, 27, 0.06); }

/* ---- Table ---- */
.thead-c { background: var(--c-bg); color: var(--c-body); }

/* ---- Misc ---- */
.btn-disabled { opacity: 0.4; cursor: default; }
.btn-link { background: none; border: none; cursor: pointer; padding: 0; }