:root {
    --MidasYellow: #FFD400;
    --MidasYellowDark: #E8C200;
    --MidasBlack: #111111;
    --MidasInk: #1a1a1a;
    --MidasMuted: #555;
    --MidasBorder: #e5e5e5;
    --MidasSurface: #ffffff;
    --MidasBg: #f7f7f7;
    --MidasGreen: #2e7d32;
    --MidasGreenDark: #1f5c23;
    --MidasGray: #6c7280;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    background: var(--MidasBg);
    color: var(--MidasInk);
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--MidasBlack);
    color: #fff;
    border-bottom: 5px solid var(--MidasYellow);
}

.HeaderLeft {
    display: flex;
    align-items: center;
    gap: 16px;
}

.HeaderLogo {
    height: 48px;
    width: auto;
    display: block;
}

.HeaderTitleBlock {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.HeaderTitleBlock h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
}

.ShopBadge {
    background: var(--MidasYellow);
    color: var(--MidasBlack);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.HeaderRight {
    display: flex;
    align-items: center;
    gap: 16px;
}

.Status {
    font-size: 13px;
    color: #cccccc;
    min-width: 220px;
    text-align: right;
}

#RefreshButton {
    background: var(--MidasYellow);
    color: var(--MidasBlack);
    border: none;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.3px;
}

#RefreshButton:hover { background: var(--MidasYellowDark); }
#RefreshButton:disabled { opacity: 0.5; cursor: not-allowed; }

main {
    padding: 24px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--MidasSurface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-radius: 6px;
    overflow: hidden;
}

thead th {
    text-align: left;
    padding: 14px 16px;
    background: var(--MidasBlack);
    color: var(--MidasYellow);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
}

tbody td {
    padding: 22px 16px;
    border-top: 1px solid var(--MidasBorder);
    vertical-align: top;
    font-size: 15px;
    line-height: 1.5;
}

tbody tr:hover { background: #fffbe6; }
tbody tr.Fading { transition: opacity linear; }
tbody tr.Fading td { background: #f4faf4; }

.ColWhen { width: 170px; }
.ColCustomer { width: 200px; }
.ColContact { width: 220px; }
.ColVehicle { width: 220px; }
.ColArrival { width: 130px; }
.ColCheck { width: 200px; text-align: right; }

.CheckButton {
    display: inline-block;
    padding: 12px 18px;
    background: var(--MidasGreen);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.2px;
}
.CheckButton:hover { background: var(--MidasGreenDark); }

.UndoButton {
    display: inline-block;
    padding: 12px 18px;
    background: var(--MidasGray);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.2px;
}
.UndoButton:hover { background: #4f5460; }

.WhenDate {
    font-weight: 700;
    color: var(--MidasInk);
}
.WhenTime {
    color: var(--MidasMuted);
    font-size: 14px;
}
.CustomerName {
    font-weight: 700;
}
.CustomerZip {
    color: var(--MidasGray);
    font-size: 13px;
}
.ContactPreferred {
    background: var(--MidasYellow);
    color: var(--MidasBlack);
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3px;
}
.ContactValue {
    display: block;
    color: var(--MidasMuted);
    font-size: 14px;
    margin-top: 4px;
}
.VehicleYear {
    color: var(--MidasGray);
}
.ArrivalBadge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.ArrivalDrop {
    background: var(--MidasBlack);
    color: var(--MidasYellow);
}
.ArrivalWait {
    background: var(--MidasYellow);
    color: var(--MidasBlack);
}

.ServiceItem {
    margin-bottom: 10px;
}
.ServiceItem:last-child { margin-bottom: 0; }
.ServiceName {
    font-weight: 700;
}
.ServiceComment {
    color: var(--MidasMuted);
    font-size: 14px;
    margin-top: 2px;
}

.EmptyState, .OffHours {
    text-align: center;
    padding: 40px;
    color: var(--MidasMuted);
    font-size: 16px;
}

.LoginMain {
    display: flex;
    justify-content: center;
    padding: 60px 24px;
}

.LoginCard {
    width: 100%;
    max-width: 360px;
    background: var(--MidasSurface);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    border-top: 5px solid var(--MidasYellow);
    padding: 28px 28px 32px;
}

.LoginTitle {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 700;
    color: var(--MidasInk);
}

.LoginLabel {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--MidasMuted);
    margin-bottom: 6px;
}

.LoginInput {
    width: 100%;
    padding: 11px 12px;
    font-size: 16px;
    border: 1px solid var(--MidasBorder);
    border-radius: 4px;
    margin-bottom: 18px;
    background: #fff;
    color: var(--MidasInk);
}

.LoginInput:focus {
    outline: none;
    border-color: var(--MidasYellow);
    box-shadow: 0 0 0 3px rgba(255,212,0,0.25);
}

.LoginButton {
    width: 100%;
    background: var(--MidasYellow);
    color: var(--MidasBlack);
    border: none;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.3px;
}

.LoginButton:hover { background: var(--MidasYellowDark); }

.LoginError {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c6c2;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 18px;
}

.LoginAway {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--MidasGray);
    text-decoration: none;
}

.LoginAway:hover { text-decoration: underline; }