/* ==========================================================================
   TorahChat — Auth & Admin Styles
   ========================================================================== */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
    --color-bg:        #f5f5f0;
    --color-surface:   #ffffff;
    --color-border:    #ddd;
    --color-text:      #222;
    --color-muted:     #666;
    --color-primary:   #4a6fa5;
    --color-primary-h: #3a5a8f;
    --color-danger:    #c0392b;
    --color-danger-h:  #a93226;
    --color-success:   #27ae60;
    --color-warning:   #e67e22;
    --radius:          6px;
    --shadow:          0 2px 12px rgba(0,0,0,.10);
}

/* ── Auth page layout ───────────────────────────────────────────────────── */
body.auth-page {
    background: var(--color-bg);
    display:    flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 16px;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--color-text);
}

.auth-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    padding:       40px;
    width:         100%;
    max-width:     420px;
}

.auth-card--wide {
    max-width: 520px;
}

.auth-logo {
    font-size:   1.6rem;
    font-weight: 700;
    text-align:  center;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.auth-title {
    text-align:  center;
    font-size:   1.25rem;
    font-weight: 600;
    margin:      0 0 24px;
    color:       var(--color-muted);
}

.auth-error {
    background:    #fdf0ee;
    border:        1px solid #e8a09a;
    border-radius: var(--radius);
    color:         var(--color-danger);
    padding:       10px 14px;
    font-size:     .875rem;
    margin-bottom: 16px;
}

.auth-footer {
    text-align:   center;
    font-size:    .875rem;
    color:        var(--color-muted);
    margin-top:   20px;
}

.auth-footer a {
    color:           var(--color-primary);
    text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* ── Form elements ──────────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display:      block;
    font-size:    .875rem;
    font-weight:  600;
    margin-bottom: 4px;
    color:        var(--color-text);
}

.form-group small {
    display:    block;
    font-size:  .775rem;
    color:      var(--color-muted);
    margin-top: 3px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group select {
    width:         100%;
    padding:       8px 12px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     1rem;
    box-sizing:    border-box;
    transition:    border-color .15s;
}

.form-group input:focus,
.form-group select:focus {
    outline:      none;
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(74,111,165,.15);
}

.form-group input[readonly] {
    background: #f0f0f0;
    color:      var(--color-muted);
}

.form-check label {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-weight: normal;
    cursor:      pointer;
}

.input-password-wrap {
    position: relative;
}

.input-password-wrap input {
    padding-right: 44px;
}

.btn-toggle-pw {
    position:   absolute;
    right:      8px;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    4px;
    font-size:  1rem;
    line-height: 1;
    opacity:    .7;
}
.btn-toggle-pw:hover { opacity: 1; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
    background:    var(--color-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--radius);
    padding:       10px 18px;
    font-size:     1rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-h); }
.btn-primary:disabled             { opacity: .6; cursor: not-allowed; }

.btn-secondary {
    background:    transparent;
    color:         var(--color-primary);
    border:        1px solid var(--color-primary);
    border-radius: var(--radius);
    padding:       8px 16px;
    font-size:     .9rem;
    cursor:        pointer;
    transition:    background .15s;
    text-decoration: none;
    display:       inline-block;
}
.btn-secondary:hover { background: rgba(74,111,165,.07); }

.btn-danger {
    background:    var(--color-danger);
    color:         #fff;
    border:        none;
    border-radius: var(--radius);
    padding:       6px 12px;
    font-size:     .875rem;
    cursor:        pointer;
}
.btn-danger:hover { background: var(--color-danger-h); }

.btn-full { width: 100%; }

.btn-sm {
    padding:   4px 10px;
    font-size: .8rem;
}

/* ── User bar (in app shell) ────────────────────────────────────────────── */
#user-bar {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         6px 16px;
    background:      var(--color-surface);
    border-bottom:   1px solid var(--color-border);
    font-size:       .875rem;
    justify-content: flex-end;
}

.user-bar-name {
    color:       var(--color-text);
    font-weight: 600;
}

.user-bar-link {
    color:           var(--color-primary);
    text-decoration: none;
    font-weight:     500;
}
.user-bar-link:hover { text-decoration: underline; }

.user-bar-btn {
    background:    none;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       3px 10px;
    cursor:        pointer;
    font-size:     .8rem;
    color:         var(--color-muted);
}
.user-bar-btn:hover {
    background: #fafafa;
    color:      var(--color-danger);
    border-color: var(--color-danger);
}

/* ── Role badges ────────────────────────────────────────────────────────── */
.role-badge {
    display:       inline-block;
    padding:       2px 7px;
    border-radius: 99px;
    font-size:     .72rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.role-badge--admin     { background: #fde8e6; color: #c0392b; }
.role-badge--moderator,
.role-badge--mod       { background: #fef3cd; color: #856404; }
.role-badge--user      { background: #e8f4fd; color: #1565c0; }

/* ── Status badges ──────────────────────────────────────────────────────── */
.status-badge {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 99px;
    font-size:     .8rem;
    font-weight:   600;
}
.status-badge--pending  { background: #e8f5e9; color: #2e7d32; }
.status-badge--used     { background: #e8eaf6; color: #3949ab; }
.status-badge--expired  { background: #fafafa; color: #999;    border: 1px solid #ddd; }

/* ── Admin page layout ──────────────────────────────────────────────────── */
body.admin-page {
    margin:      0;
    background:  var(--color-bg);
    font-family: system-ui, -apple-system, sans-serif;
    color:       var(--color-text);
    min-height:  100vh;
}

.admin-header {
    background:  var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding:     12px 24px;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         16px;
}

.admin-header-left {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.admin-logo {
    font-size:   1.2rem;
    font-weight: 700;
}

.admin-badge {
    background:    var(--color-primary);
    color:         #fff;
    padding:       3px 10px;
    border-radius: 99px;
    font-size:     .78rem;
    font-weight:   600;
}

.admin-header-right {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.admin-username {
    font-weight: 600;
    font-size:   .9rem;
}

.admin-body {
    padding: 24px;
}

/* ── Alert ──────────────────────────────────────────────────────────────── */
.admin-alert {
    padding:       10px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size:     .9rem;
}
.admin-alert--success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }
.admin-alert--error   { background: #fdf0ee; border: 1px solid #e8a09a; color: var(--color-danger); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.admin-tabs {
    display:       flex;
    gap:           4px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 24px;
}

.admin-tab {
    background:    none;
    border:        none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding:       8px 18px;
    font-size:     .95rem;
    font-weight:   500;
    cursor:        pointer;
    color:         var(--color-muted);
    transition:    color .15s, border-color .15s;
}
.admin-tab:hover  { color: var(--color-primary); }
.admin-tab.active {
    color:        var(--color-primary);
    border-color: var(--color-primary);
    font-weight:  700;
}

/* ── Stats grid ─────────────────────────────────────────────────────────── */
.stat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                   16px;
}

.stat-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       24px 20px;
    text-align:    center;
    box-shadow:    var(--shadow);
}

.stat-value {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--color-primary);
}

.stat-label {
    font-size:  .85rem;
    color:      var(--color-muted);
    margin-top: 4px;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x:    auto;
    border-radius: var(--radius);
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow);
}

.admin-table {
    width:           100%;
    border-collapse: collapse;
    background:      var(--color-surface);
    font-size:       .875rem;
}

.admin-table th {
    background:  #f8f8f6;
    padding:     10px 14px;
    text-align:  left;
    font-weight: 600;
    font-size:   .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--color-muted);
    border-bottom: 2px solid var(--color-border);
}

.admin-table td {
    padding:     10px 14px;
    border-bottom: 1px solid #f0f0ec;
    vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td      { background: #fafaf7; }

.table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.tab-toolbar {
    display:       flex;
    gap:           10px;
    align-items:   center;
    margin-bottom: 16px;
}

.toolbar-search {
    padding:       7px 12px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     .9rem;
    width:         260px;
}

/* ── Inline form (create invite) ────────────────────────────────────────── */
.inline-form {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       20px;
    margin-bottom: 16px;
}

.form-row {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.form-row .form-group { margin-bottom: 0; flex: 1 1 200px; }
.form-group--action   { flex: 0 0 auto !important; display: flex; gap: 8px; }

.invite-result {
    margin-top:    12px;
    padding:       12px;
    background:    #e8f5e9;
    border-radius: var(--radius);
    font-size:     .875rem;
    word-break:    break-all;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  12px;
    font-size:   .875rem;
    color:       var(--color-muted);
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.45);
    display:    flex;
    align-items: center;
    justify-content: center;
    z-index:    1000;
}

.modal-card {
    background:    var(--color-surface);
    border-radius: var(--radius);
    box-shadow:    0 8px 32px rgba(0,0,0,.2);
    padding:       32px;
    width:         100%;
    max-width:     400px;
}

.modal-card h2 {
    margin:       0 0 20px;
    font-size:    1.1rem;
}

.modal-actions {
    display:    flex;
    gap:        10px;
    margin-top: 20px;
}

/* ── Inline form inputs (admin) ─────────────────────────────────────────── */
.inline-form input,
.inline-form select,
.modal-card input,
.modal-card select {
    width:         100%;
    padding:       7px 10px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     .9rem;
    box-sizing:    border-box;
}

.inline-form input:focus,
.modal-card input:focus,
.modal-card select:focus {
    outline:      none;
    border-color: var(--color-primary);
}