/* ═══════════════════════════════════════════════════════════
   Happy Building — Shared Styles
   Used by: login, register, dashboard, admin pages
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Root ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:        #1a3a5c;
    --primary-light:  #2557a7;
    --accent:         #0ea472;
    --danger:         #b91c1c;
    --warning:        #d97706;

    --bg:             #f0f2f5;
    --surface:        #ffffff;
    --surface2:       #f7f8fa;
    --border:         #dde1e7;
    --border-strong:  #c0c7d0;

    --text:           #1a1f2e;
    --text-mid:       #3d4557;
    --muted:          #6b7385;

    --radius:         8px;
    --radius-sm:      5px;
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.07);
    --shadow-md:      0 4px 20px rgba(0,0,0,0.09);

    --font:           'DM Sans', system-ui, sans-serif;
    --mono:           'DM Mono', monospace;
    --header-h:       56px;
    --aside-w:        220px;
}

body {
    font-family: var(--font);
    background:  var(--bg);
    color:       var(--text);
    font-size:   14px;
    line-height: 1.5;
    min-height:  100vh;
    display:     flex;
    flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────── */
header {
    height:       var(--header-h);
    background:   var(--primary);
    color:        #fff;
    display:      flex;
    align-items:  center;
    padding:      0 24px;
    gap:          16px;
    position:     sticky;
    top:          0;
    z-index:      100;
    box-shadow:   0 2px 8px rgba(0,0,0,0.18);
    flex-shrink:  0;
}

header .logo {
    font-family:    var(--mono);
    font-size:      13px;
    font-weight:    500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          #fff;
    background:     rgba(255,255,255,.12);
    border:         1px solid rgba(255,255,255,.22);
    padding:        3px 10px;
    border-radius:  4px;
    white-space:    nowrap;
}
header .header-powered {
    font-family:    var(--mono);
    font-size:      11px;
    color:          rgba(255,255,255,.45);
    letter-spacing: .06em;
    padding-left:   12px;
    border-left:    1px solid rgba(255,255,255,.2);
    margin-left:    4px;
    white-space:    nowrap;
}

header h1 {
    font-size:    16px;
    font-weight:  600;
}

header .spacer { flex: 1; }

header .user-name {
    font-size:  12px;
    color:      rgba(255,255,255,.6);
}

header .hdr-link {
    color:        rgba(255,255,255,.75);
    text-decoration: none;
    font-size:    12px;
    padding:      5px 11px;
    border:       1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-sm);
    transition:   background .15s;
}
header .hdr-link:hover { background: rgba(255,255,255,.1); }

/* ── Page Layout ────────────────────────────────────────────── */
.page {
    flex:       1;
    padding:    32px 28px;
    max-width:  1000px;
    margin:     0 auto;
    width:      100%;
}

.page-title {
    font-size:   20px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Admin two-column layout */
.app-layout {
    display:    flex;
    flex:       1;
    min-height: calc(100vh - var(--header-h));
}

/* ── Admin Sidebar ───────────────────────────────────────────── */
.sidebar {
    width:         var(--aside-w);
    background:    var(--surface);
    border-right:  1px solid var(--border);
    padding:       24px 0;
    flex-shrink:   0;
}

.sidebar-section { margin-bottom: 24px; }

.sidebar-label {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--muted);
    padding:        0 18px 8px;
    display:        block;
}

.sidebar a {
    display:      block;
    padding:      9px 18px;
    color:        var(--text-mid);
    text-decoration: none;
    font-size:    13px;
    border-left:  3px solid transparent;
    transition:   background .12s;
}
.sidebar a:hover  { background: var(--bg); color: var(--primary-light); }
.sidebar a.active {
    background:   #e8f0fe;
    color:        var(--primary-light);
    border-left-color: var(--primary-light);
    font-weight:  500;
}

.sidebar-content { flex: 1; padding: 28px; min-width: 0; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow-sm);
    margin-bottom: 20px;
}
.card:last-child { margin-bottom: 0; }

.card-header {
    padding:       14px 20px;
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
}

.card-header h3 {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--primary);
}

.card-header a {
    font-size:      12px;
    color:          var(--primary-light);
    text-decoration: none;
}
.card-header a:hover { text-decoration: underline; }

.card-body { padding: 20px; }

/* ── Auth card (login / register) ───────────────────────────── */
.auth-page {
    flex:           1;
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:        40px 20px;
}

.auth-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       36px 40px;
    width:         100%;
    max-width:     420px;
    box-shadow:    var(--shadow-md);
}
.auth-card h2  { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.auth-card > p { color: var(--muted); font-size: 13px; margin-bottom: 28px; }

/* ── Form Fields ─────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.field:last-of-type { margin-bottom: 0; }

.field label {
    font-size:   12px;
    font-weight: 500;
    color:       var(--muted);
}

.field input,
.field select,
.field textarea {
    padding:       9px 12px;
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family:   var(--font);
    font-size:     14px;
    color:         var(--text);
    background:    var(--surface2);
    transition:    border-color .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--primary-light); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 16px;
    border-radius: var(--radius-sm);
    border:        none;
    font-family:   var(--font);
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    transition:    background .15s, border-color .15s, color .15s;
    white-space:   nowrap;
    text-decoration: none;
}

.btn-primary  { background: var(--primary-light); color: #fff; }
.btn-primary:hover  { background: var(--primary); }

.btn-ghost {
    background: transparent;
    border:     1px solid var(--border);
    color:      var(--muted);
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }

.btn-danger-outline {
    background: transparent;
    border:     1px solid #fecaca;
    color:      var(--danger);
}
.btn-danger-outline:hover { background: #fef2f2; }

.btn-full { width: 100%; justify-content: center; padding: 10px; font-size: 14px; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table.data-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}

table.data-table th {
    background:     var(--surface2);
    border-bottom:  2px solid var(--border);
    padding:        9px 16px;
    text-align:     left;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--muted);
}

table.data-table td {
    border-bottom: 1px solid var(--border);
    padding:       11px 16px;
    vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table td.num { text-align: right; font-family: var(--mono); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display:       inline-block;
    padding:       2px 9px;
    border-radius: 12px;
    font-size:     11px;
    font-weight:   500;
}
.badge-pending  { background: #fef9c3; color: #92400e; }
.badge-approved { background: #dcfce7; color: #166534; }
.badge-banned   { background: #fee2e2; color: var(--danger); }
.badge-admin    { background: #e8f0fe; color: var(--primary-light); }
.badge-type     { background: var(--surface2); border: 1px solid var(--border); color: var(--text-mid); }

/* ── Alert / Message boxes ───────────────────────────────────── */
.alert {
    padding:       11px 16px;
    border-radius: var(--radius-sm);
    font-size:     13px;
    margin-bottom: 18px;
}
.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: var(--danger); }
.alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.alert-warning { background: #fffbeb; border: 1px solid #fde047; color: #92400e; }

/* ── Stat Tiles ──────────────────────────────────────────────── */
.tiles {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap:                   14px;
    margin-bottom:         24px;
}

.tile {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       18px 20px;
    box-shadow:    var(--shadow-sm);
}
.tile h4 {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  8px;
}
.tile .tv {
    font-family: var(--mono);
    font-size:   28px;
    font-weight: 500;
    color:       var(--primary);
}
.tile.tile-warning .tv { color: var(--warning); }
.tile.tile-accent  .tv { color: var(--accent); }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
    padding:    48px 20px;
    text-align: center;
    color:      var(--muted);
}
.empty-state p { font-size: 15px; margin-bottom: 6px; }

/* ── Footer link (auth pages) ────────────────────────────────── */
.auth-footer {
    text-align:  center;
    margin-top:  20px;
    font-size:   13px;
    color:       var(--muted);
}
.auth-footer a { color: var(--primary-light); text-decoration: none; font-weight: 500; }

/* ── Filter bar ──────────────────────────────────────────────── */
.filter-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-bar a {
    padding:        6px 14px;
    border:         1px solid var(--border);
    border-radius:  20px;
    text-decoration: none;
    color:          var(--muted);
    font-size:      13px;
    transition:     all .13s;
}
.filter-bar a:hover { border-color: var(--border-strong); color: var(--text); }
.filter-bar a.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Toggle switch ───────────────────────────────────────────── */
.toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position:      absolute;
    inset:         0;
    background:    var(--border-strong);
    border-radius: 20px;
    cursor:        pointer;
    transition:    .2s;
}
.toggle-slider::before {
    content:       '';
    position:      absolute;
    width:         14px;
    height:        14px;
    left:          3px;
    top:           3px;
    background:    #fff;
    border-radius: 50%;
    transition:    .2s;
}
.toggle input:checked + .toggle-slider            { background: var(--accent); }
.toggle input:checked + .toggle-slider::before    { transform: translateX(16px); }

/* ── Misc utils ──────────────────────────────────────────────── */
.text-muted  { color: var(--muted); }
.text-mono   { font-family: var(--mono); }
.text-small  { font-size: 12px; }
.mt-4        { margin-top: 4px; }
.mt-8        { margin-top: 8px; }
.gap-col     { display: flex; flex-direction: column; gap: 6px; }

/* ── Page header row (title + action button) ─────────────── */
.page-header {
    display:       flex;
    align-items:   center;
    gap:           16px;
    margin-bottom: 24px;
    flex-wrap:     wrap;
}
.page-header h2 { font-size: 20px; font-weight: 600; flex: 1; }

/* ── New project inline form (dashboard) ─────────────────── */
.new-project-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow-sm);
    margin-bottom: 20px;
    overflow:      hidden;
}
.new-project-card-header {
    padding:       14px 24px;
    border-bottom: 1px solid var(--border);
    background:    var(--surface2);
    display:       flex;
    align-items:   center;
    gap:           10px;
}
.new-project-card-header h3 {
    font-size:      13px;
    font-weight:    600;
    color:          var(--primary);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.new-project-form {
    padding:     24px;
    display:     grid;
    grid-template-columns: 1fr 220px auto;
    gap:         14px;
    align-items: flex-end;
}
.new-project-form .field        { margin-bottom: 0; }
.new-project-form .field label  { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.new-project-form .field input,
.new-project-form .field select { font-size: 14px; padding: 10px 12px; background: var(--surface2); border-radius: var(--radius); }
.new-project-form .field input:focus,
.new-project-form .field select:focus { background: #fff; }
@media (max-width: 680px) {
    .new-project-form { grid-template-columns: 1fr; }
}

/* ── Project name link ───────────────────────────────────── */
.project-link { color: var(--primary-light); text-decoration: none; font-weight: 500; }
.project-link:hover { text-decoration: underline; }

/* ── Admin notice bar ────────────────────────────────────── */
.admin-bar {
    background: #fffbeb; border: 1px solid #fde047;
    border-radius: var(--radius-sm); padding: 10px 16px;
    margin-bottom: 20px; font-size: 13px;
    display: flex; align-items: center; gap: 12px;
}
.admin-bar a { color: var(--primary-light); font-weight: 500; text-decoration: none; }
.admin-bar a:hover { text-decoration: underline; }

/* ── Rate settings ───────────────────────────────────────── */
.rate-input {
    font-family: var(--mono); padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; width: 120px; text-align: right;
    background: var(--surface2); color: var(--text);
    transition: border-color .15s, background .15s;
}
.rate-input:focus   { outline: none; border-color: var(--primary-light); background: #fff; }
.rate-input.changed { border-color: var(--accent); background: #f0fdf4; }

.save-bar {
    position: sticky; bottom: 0; background: var(--surface);
    border-top: 1px solid var(--border); padding: 14px 28px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06); z-index: 10;
}
.save-bar .change-note { font-size: 12px; color: var(--muted); }

/* ── Table action buttons ────────────────────────────────── */
.action-group { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-approve { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.btn-approve:hover { background: #dcfce7; }
.btn-ban { background: #fef2f2; border: 1px solid #fecaca; color: var(--danger); }
.btn-ban:hover { background: #fee2e2; }
.btn-reset { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); }
.btn-reset:hover { border-color: var(--border-strong); color: var(--text); }

/* ── User info cell ──────────────────────────────────────── */
.user-name-cell .name  { font-weight: 500; }
.user-name-cell .email { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Print ───────────────────────────────────────────────────── */
@media print {
    header, .sidebar { display: none !important; }
    .app-layout       { display: block; }
    .card             { box-shadow: none; border: 1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════════
   Landing Page — Split Screen Layout
   ═══════════════════════════════════════════════════════════ */

/* ── Full-height split layout ───────────────────────────────── */
body.landing {
    display:        flex;
    flex-direction: row;
    min-height:     100vh;
    background:     var(--bg);
}

/* ── Left panel — branding + background image ───────────────── */
.landing-left {
    flex:              1;
    position:          relative;
    background-color:  var(--primary);
    background-size:   cover;
    background-position: center;
    background-repeat: no-repeat;
    display:           flex;
    flex-direction:    column;
    justify-content:   flex-end;
    padding:           48px;
    min-height:        100vh;
    overflow:          hidden;
}

/* Dark overlay so text is always readable over any image */
.landing-left::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
            to bottom,
            rgba(10, 25, 45, 0.35) 0%,
            rgba(10, 25, 45, 0.75) 60%,
            rgba(10, 25, 45, 0.92) 100%
    );
    z-index: 1;
}

.landing-left-content {
    position: relative;
    z-index:  2;
    color:    #fff;
}

.landing-logo {
    font-family:    var(--mono);
    font-size:      11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.55);
    margin-bottom:  14px;
    display:        block;
}

.landing-company {
    font-size:   32px;
    font-weight: 600;
    line-height: 1.15;
    color:       #fff;
    margin-bottom: 6px;
    letter-spacing: -.02em;
}

.landing-tool {
    font-size:     18px;
    font-weight:   400;
    color:         rgba(255,255,255,.7);
    margin-bottom: 28px;
}

.landing-divider {
    width:        40px;
    height:       2px;
    background:   var(--accent);
    border:       none;
    margin:       0 0 24px;
}

.landing-hero {
    font-size:   14px;
    line-height: 1.75;
    color:       rgba(255,255,255,.65);
    max-width:   420px;
}

/* ── Right panel — form area ────────────────────────────────── */
.landing-right {
    width:           460px;
    flex-shrink:     0;
    background:      #fff;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         48px 44px;
    min-height:      100vh;
    overflow-y:      auto;
    box-shadow:      -4px 0 32px rgba(0,0,0,0.08);
}

/* ── Form tabs (Sign in / Request access) ───────────────────── */
.form-tabs {
    display:       flex;
    gap:           0;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--border);
}

.form-tab {
    background:  none;
    border:      none;
    padding:     10px 0;
    margin-right: 28px;
    font-family: var(--font);
    font-size:   15px;
    font-weight: 500;
    color:       var(--muted);
    cursor:      pointer;
    position:    relative;
    transition:  color .15s;
    white-space: nowrap;
}
.form-tab::after {
    content:    '';
    position:   absolute;
    bottom:     -2px;
    left:       0;
    right:      0;
    height:     2px;
    background: var(--primary-light);
    transform:  scaleX(0);
    transition: transform .2s;
}
.form-tab.active        { color: var(--primary); }
.form-tab.active::after { transform: scaleX(1); }
.form-tab:hover         { color: var(--text); }

/* ── Individual form panels ─────────────────────────────────── */
.form-panel         { display: block; }
.form-panel.hidden  { display: none; }

.form-panel h2 {
    font-size:     20px;
    font-weight:   600;
    margin-bottom: 6px;
    color:         var(--text);
}
.form-panel > p {
    font-size:     13px;
    color:         var(--muted);
    margin-bottom: 26px;
    line-height:   1.6;
}

/* Landing page fields slightly larger */
.landing-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.landing-field label {
    font-size:   11px;
    font-weight: 600;
    color:       var(--muted);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.landing-field input {
    padding:       10px 13px;
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family:   var(--font);
    font-size:     14px;
    color:         var(--text);
    background:    var(--surface2);
    transition:    border-color .15s, background .15s;
}
.landing-field input:focus {
    outline:      none;
    border-color: var(--primary-light);
    background:   #fff;
}

.landing-btn {
    width:         100%;
    padding:       11px;
    background:    var(--primary-light);
    color:         #fff;
    border:        none;
    border-radius: var(--radius-sm);
    font-family:   var(--font);
    font-size:     14px;
    font-weight:   500;
    cursor:        pointer;
    margin-top:    8px;
    transition:    background .15s;
}
.landing-btn:hover { background: var(--primary); }

/* ── Responsive — mobile stacks vertically ──────────────────── */
@media (max-width: 820px) {
    body.landing    { flex-direction: column; }

    .landing-left {
        min-height: 280px;
        padding:    36px 28px 32px;
        justify-content: flex-end;
    }
    .landing-company { font-size: 24px; }
    .landing-tool    { font-size: 15px; margin-bottom: 0; }
    .landing-hero    { display: none; }
    .landing-divider { display: none; }

    .landing-right {
        width:      100%;
        min-height: auto;
        padding:    36px 28px;
        box-shadow: none;
    }
}