/* ==========================================================================
   Concterto — concert ticketing UI
   A restrained, classical-venue palette: ivory, ink, and warm gold accents.
   ========================================================================== */

:root {
    --ink:        #1c1a24;
    --ink-soft:   #4a4658;
    --paper:      #f6f3ec;
    --paper-2:    #fffdf8;
    --line:       #e0dacd;
    --gold:       #b8860b;
    --gold-dark:  #8c6608;
    --burgundy:   #6d1f2e;
    --green:      #2e8b57;
    --green-soft: #cde6d6;
    --red:        #b23a3a;
    --grey:       #b9b4a8;
    --shadow:     0 2px 10px rgba(28, 26, 36, .08);
    --radius:     10px;
    --font:       "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --serif:      "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--paper);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .2px; }
a { color: var(--gold-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: none; border-top: 1px solid var(--line); margin: 1.25rem 0; }
code { background: #efeadd; padding: 1px 5px; border-radius: 4px; font-size: .9em; }

/* ----- Buttons ---------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink);
    border-radius: 8px;
    cursor: pointer;
    font-size: .92rem;
    transition: background .15s, border-color .15s, transform .05s;
    text-decoration: none;
}
.btn:hover { background: #fff; border-color: var(--grey); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--gold); border-color: var(--gold-dark); color: #fff; }
.btn-primary:hover { background: var(--gold-dark); }
.btn-danger { color: #fff; background: var(--red); border-color: #963030; }
.btn-danger:hover { background: #963030; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgba(0,0,0,.05); }
.btn-block { width: 100%; }
.btn-sm { padding: .3rem .6rem; font-size: .82rem; }
.btn-lg { padding: .7rem 1rem; font-size: 1rem; }
.btn-row { display: flex; gap: .5rem; }

/* ----- Header / nav ----------------------------------------------------- */
.app-header {
    display: flex; align-items: center; gap: 1.5rem;
    padding: .65rem 1.4rem;
    background: var(--ink);
    color: #f3efe6;
    box-shadow: var(--shadow);
}
.brand a { display: flex; align-items: center; gap: .5rem; color: #f3efe6; }
.brand-mark { color: var(--gold); font-size: 1.5rem; }
.brand-name { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .5px; }
.main-nav { display: flex; gap: .25rem; flex: 1; }
.nav-link {
    color: #cfc9bb; padding: .4rem .75rem; border-radius: 7px; font-size: .92rem;
}
.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-link.active { background: var(--gold); color: #1c1a24; }
.user-box { display: flex; align-items: center; gap: .6rem; }
.user-name { font-size: .9rem; }
.user-role { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px;
    padding: 2px 7px; border-radius: 20px; background: rgba(255,255,255,.12); }
.role-admin { background: var(--gold); color: #1c1a24; }

.app-main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.4rem 3rem; }
.app-footer { text-align: center; color: var(--ink-soft); padding: 1.5rem; font-size: .85rem; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 1.6rem; }
.subtle { color: var(--ink-soft); font-size: .9rem; margin: .25rem 0 0; }
.head-actions { display: flex; align-items: center; gap: .6rem; }

/* ----- Alerts / badges -------------------------------------------------- */
.alert { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert-error { background: #fce9e9; border: 1px solid #f0c4c4; color: #7d2020; }
.alert-info  { background: #eef3fb; border: 1px solid #cdd9ef; color: #2c4a7a; }
.badge { font-size: .78rem; padding: .25rem .6rem; border-radius: 20px; background: #efeadd; }
.badge-admin { background: var(--gold); color: #1c1a24; }

/* ----- Login ------------------------------------------------------------ */
.login-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 20%, #2a2636, #16131d);
    padding: 1.5rem;
}
.login-card {
    width: 100%; max-width: 380px; background: var(--paper-2);
    border-radius: 16px; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.login-brand { text-align: center; margin-bottom: 1.25rem; }
.login-brand .brand-mark { font-size: 2.5rem; }
.login-brand h1 { margin: .3rem 0 .1rem; font-size: 1.8rem; }
.login-sub { color: var(--ink-soft); margin: 0; font-size: .88rem; }
.login-form { display: flex; flex-direction: column; gap: .85rem; margin-top: 1rem; }
.login-hint { text-align: center; font-size: .8rem; color: var(--ink-soft); margin-top: 1rem; }

/* ----- Forms ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.field > span { font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.field-row { display: flex; gap: .6rem; align-items: flex-end; }
.field-row .field { flex: 1; }
input[type=text], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=week], input[type=month],
input[type=file], select, textarea {
    padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; font: inherit; color: var(--ink); width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
input[type=color] { padding: 2px; height: 42px; width: 52px; }

.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; box-shadow: var(--shadow); }
.form-card { max-width: 520px; }
.form-actions { display: flex; gap: .6rem; margin-top: .5rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }

/* ----- Tables ----------------------------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; background: var(--paper-2);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--line); }
.data-table thead th { background: #efeadd; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.data-table tfoot th { background: #f3eee1; font-size: .95rem; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .breakdown { font-size: .85rem; color: var(--ink-soft); }
.data-table .empty, .empty { text-align: center; color: var(--ink-soft); padding: 1.5rem; }
.row-actions { display: flex; gap: .4rem; }

.filter-bar { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem;
    background: var(--paper-2); padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.filter-bar .field { margin-bottom: 0; }

/* ----- Dashboard event cards -------------------------------------------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.event-card { display: flex; flex-direction: column; background: var(--paper-2);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); color: var(--ink); transition: transform .12s, box-shadow .12s; }
.event-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(28,26,36,.16); text-decoration: none; }
.event-thumb { height: 140px; background: #2a2636; display: flex; align-items: center; justify-content: center; }
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-thumb-placeholder { font-size: 3rem; color: var(--gold); }
.event-info { padding: .9rem 1rem 1.1rem; }
.event-info h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.event-meta { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.event-avail { margin: .55rem 0 0; font-size: .9rem; }
.event-avail strong { color: var(--green); font-size: 1.05rem; }

/* ==========================================================================
   Seat map
   ========================================================================== */
.seatmap { display: flex; flex-direction: column; align-items: center; }
.seatmap-stage {
    width: 70%; max-width: 640px; text-align: center; color: #f3efe6;
    background: linear-gradient(180deg, #2a2636, #1c1a24);
    padding: .55rem; border-radius: 0 0 60px 60px; letter-spacing: 4px;
    font-family: var(--serif); font-size: .95rem; margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.seatmap-scroll { width: 100%; overflow: auto; padding-bottom: .5rem; }
.seatmap-canvas { position: relative; margin: 0 auto; min-height: 80px; }

.seat {
    position: absolute; display: flex; align-items: center; justify-content: center;
    font-size: .62rem; color: var(--ink-soft); background: #fff;
    border: 1px solid var(--grey); border-radius: 6px 6px 4px 4px;
    cursor: pointer; user-select: none; transition: background .1s, transform .05s;
}
.seat:hover { background: #fdf6e3; }
.seat.selected { background: var(--gold); border-color: var(--gold-dark); color: #1c1a24; font-weight: 700; }
.seat.status-available { background: var(--green-soft); border-color: #9eccb0; }
.seat.status-sold { background: #e7c9c9; border-color: #cc9999; color: #7d2020; cursor: not-allowed; }
.seat.status-unavailable {
    background: repeating-linear-gradient(45deg, #ddd6c8, #ddd6c8 4px, #cfc7b6 4px, #cfc7b6 8px);
    border-color: var(--grey); color: #6a6557; cursor: not-allowed;
}
.seat.selected.status-sold, .seat.selected.status-unavailable { background: var(--gold); }

.row-label { position: absolute; width: 22px; text-align: center; font-size: .7rem;
    font-weight: 700; color: var(--ink-soft); }

.select-rect { position: absolute; border: 1.5px dashed var(--gold-dark);
    background: rgba(184,134,11,.12); pointer-events: none; z-index: 5; }

.seat-tooltip {
    position: absolute; z-index: 999; background: var(--ink); color: #f3efe6;
    padding: .35rem .6rem; border-radius: 6px; font-size: .8rem; pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: nowrap;
}

.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.25rem; justify-content: center;
    font-size: .82rem; color: var(--ink-soft); }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--grey); display: inline-block; }
.swatch.status-available { background: var(--green-soft); }
.swatch.status-sold { background: #e7c9c9; }
.swatch.status-unavailable { background: repeating-linear-gradient(45deg, #ddd6c8, #ddd6c8 3px, #cfc7b6 3px, #cfc7b6 6px); }
.swatch.selected { background: var(--gold); }

/* ----- Seat layout (pricing & sales) ------------------------------------ */
.seat-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; }
.seat-layout-map { background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.side-panel { background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); position: sticky; top: 1rem; }
.side-panel h3 { margin: .25rem 0 .6rem; font-size: 1.05rem; }
.hint { font-size: .82rem; color: var(--ink-soft); }

/* ----- Cart (sales) ----------------------------------------------------- */
.cart-list { display: flex; flex-direction: column; gap: .5rem; max-height: 50vh; overflow: auto; margin-bottom: .8rem; }
.cart-row { display: grid; grid-template-columns: 1fr auto; gap: .35rem .5rem; align-items: center;
    padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cart-seat { display: flex; flex-direction: column; }
.cart-seat strong { font-size: .9rem; }
.cart-base { font-size: .76rem; color: var(--ink-soft); }
.discount-select { grid-column: 1 / 2; font-size: .8rem; padding: .3rem; }
.cart-final { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cart-remove { grid-column: 2; grid-row: 1 / 3; border: none; background: transparent; color: var(--red);
    font-size: 1.2rem; cursor: pointer; line-height: 1; }
.cart-total { display: flex; justify-content: space-between; align-items: center;
    padding: .7rem 0; border-top: 2px solid var(--line); margin-bottom: .6rem; }
.cart-total strong { font-size: 1.3rem; color: var(--burgundy); }

/* ==========================================================================
   Hall builder
   ========================================================================== */
.builder { display: grid; grid-template-columns: 300px 1fr; gap: 1.25rem; align-items: start; }
.builder-tools { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem; box-shadow: var(--shadow); position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.builder-tools h2 { margin: .25rem 0 1rem; font-size: 1.25rem; }
.tool-group { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tool-group:last-child { border-bottom: none; }
.tool-group h3 { margin: 0 0 .6rem; font-size: .95rem; }
.builder-canvas { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; box-shadow: var(--shadow); overflow: auto; min-height: 420px; }

.zone-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.zone-chip { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem;
    border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.zone-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--grey); }
.zone-chip-name { flex: 1; font-size: .88rem; }
.zone-del { border: none; background: transparent; color: var(--red); cursor: pointer; font-size: 1.1rem; line-height: 1; }

/* ----- Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
    .seat-layout, .builder, .two-col { grid-template-columns: 1fr; }
    .side-panel, .builder-tools { position: static; max-height: none; }
    .main-nav { flex-wrap: wrap; }
}