/* ============================================================
   prod.murmur.tv — Base styles
   White background · Black text · Monospace numbers
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --black:   #000000;
    --white:   #ffffff;
    --grey-1:  #f5f5f5;
    --grey-2:  #e0e0e0;
    --grey-3:  #999999;
    --font:    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --mono:    'Courier New', Courier, monospace;
    --size-sm: 12px;
    --size-md: 14px;
    --size-lg: 16px;
}

body {
    font-family:      var(--font);
    font-size:        var(--size-md);
    color:            var(--black);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--black);
    text-decoration: underline;
}

a:hover {
    opacity: 0.6;
}

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

.site-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 32px;
    border-bottom:   1px solid var(--black);
}

.logo-text {
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header-nav {
    display:     flex;
    align-items: center;
    gap:         24px;
    font-size:   var(--size-sm);
}

.nav-user {
    color: var(--grey-3);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
    max-width: 1200px;
    margin:    0 auto;
    padding:   40px 32px;
}

.page-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    margin-bottom:   32px;
}

.page-header h1 {
    font-size:      20px;
    font-weight:    700;
    letter-spacing: 0.02em;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display:          inline-block;
    padding:          8px 16px;
    background-color: var(--black);
    color:            var(--white);
    font-size:        var(--size-sm);
    font-weight:      600;
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    text-decoration:  none;
    border:           1px solid var(--black);
    cursor:           pointer;
}

.btn:hover {
    background-color: var(--white);
    color:            var(--black);
    opacity:          1;
}

.btn-outline {
    background-color: var(--white);
    color:            var(--black);
}

.btn-outline:hover {
    background-color: var(--black);
    color:            var(--white);
}

/* ============================================================
   FORMS
   ============================================================ */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display:       block;
    font-size:     var(--size-sm);
    font-weight:   600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width:      100%;
    padding:    10px 12px;
    border:     1px solid var(--black);
    background: var(--white);
    font-size:  var(--size-md);
    font-family: var(--font);
    outline:    none;
    appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:        2px solid var(--black);
    outline-offset: -2px;
}

.form-error {
    padding:       10px 12px;
    border:        1px solid var(--black);
    font-size:     var(--size-sm);
    margin-bottom: 20px;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-page {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    background:      var(--white);
}

.login-box {
    width:     360px;
}

.login-logo {
    margin-bottom: 40px;
}

.login-box button[type="submit"] {
    width:            100%;
    padding:          12px;
    background-color: var(--black);
    color:            var(--white);
    border:           none;
    font-size:        var(--size-sm);
    font-weight:      700;
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    cursor:           pointer;
}

.login-box button[type="submit"]:hover {
    opacity: 0.8;
}

/* ============================================================
   TABLES
   ============================================================ */

.data-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--size-md);
}

.data-table th {
    text-align:     left;
    font-size:      var(--size-sm);
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        8px 12px;
    border-bottom:  2px solid var(--black);
}

.data-table td {
    padding:       10px 12px;
    border-bottom: 1px solid var(--grey-2);
    vertical-align: middle;
}

.data-table tr:hover td {
    background-color: var(--grey-1);
}

/* ============================================================
   UTILITIES
   ============================================================ */

.mono {
    font-family: var(--mono);
    font-size:   var(--size-sm);
}

.status-tag {
    font-size:      var(--size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.empty-state {
    color:     var(--grey-3);
    font-size: var(--size-md);
    padding:   40px 0;
}