/* Control-plane page styles. Built on the SharedUI design tokens (app.css) so it
   stays theme-aware in light and dark. */

.cp-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.cp-h1 {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

.cp-sub {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin: 2px 0 0;
}

.cp-card {
    background: var(--input-bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
    margin-bottom: 18px;
}

.cp-card-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 12px;
}

.cp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.cp-table th {
    text-align: left;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-mid);
    white-space: nowrap;
}

.cp-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
    vertical-align: middle;
}

.cp-table tbody tr:hover { background: var(--fill-soft); }

/* Whole-row navigation: the entire row is clickable (see the row's @onclick). */
.cp-row-click { cursor: pointer; }
.cp-row-click td:first-child { font-weight: 600; color: var(--navy); }

.cp-row-link { color: var(--sky); text-decoration: none; font-weight: 600; }
.cp-row-link:hover { text-decoration: underline; }

.cp-muted { color: var(--text-muted); }
.cp-mono { font-family: var(--font-mono); font-size: var(--fs-xs); }

.cp-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Disabled buttons must READ as disabled (app.css's .btn has no disabled state),
   in addition to being non-clickable via the native `disabled` attribute. */
.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.cp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.cp-field label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.cp-field input[type=text],
.cp-field input[type=password],
.cp-field textarea {
    background: var(--input-bg);
    border: 1px solid var(--line-mid);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-size: var(--fs-sm);
    color: var(--navy);
    font-family: var(--font-sans);
    width: 100%;
}
.cp-field textarea { min-height: 64px; resize: vertical; }
.cp-field-hint { font-size: var(--fs-2xs); color: var(--text-muted); }

.cp-select {
    background: var(--input-bg);
    border: 1px solid var(--line-mid);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    font-size: var(--fs-sm);
    color: var(--navy);
    font-family: var(--font-sans);
}

.cp-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--navy); }

.cp-kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: var(--fs-sm); }
.cp-kv dt { color: var(--text-muted); }
.cp-kv dd { margin: 0; color: var(--navy); }

.cp-empty { color: var(--text-muted); font-size: var(--fs-sm); padding: 20px 0; text-align: center; }

/* Per-tenant feature-module switches (tenant detail). Two columns on a wide
   screen, one on a narrow one — the list is short and reads as a form, not a
   table. Each row is a label so the whole row is a click target. */
.cp-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 4px 20px;
}
.cp-module {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--navy);
    cursor: pointer;
}
.cp-module:hover { background: var(--line); }
.cp-module input { margin-top: 2px; flex: none; cursor: pointer; }
/* An always-on module is shown, but reads as unavailable rather than merely off. */
.cp-module:has(input:disabled) { cursor: default; }
.cp-module:has(input:disabled):hover { background: none; }
.cp-module-blurb { display: block; color: var(--text-muted); font-size: var(--fs-2xs); margin-top: 1px; }

/* Per-tenant result log for the batch (Migrate all / Re-apply all) actions. */
.cp-batch-log { margin: 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; }
.cp-batch-log li { padding: 4px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; color: var(--navy); }
.cp-batch-log li:last-child { border-bottom: none; }
.cp-batch-fail { color: var(--bad); }

/* ------------------------------------------------------------------ */
/* Responsive top bar                                                 */
/* ------------------------------------------------------------------ */
/* Desktop: nav on the left of the bar, user + sign-out pushed right. */
.cp-topbar-menu {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.cp-topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Hamburger — hidden on desktop, shown at the mobile breakpoint. */
.cp-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 34px;
    margin-left: auto;
    padding: 0 9px;
    background: transparent;
    border: 1px solid var(--line-mid);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.cp-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.cp-menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cp-menu-toggle.open span:nth-child(2) { opacity: 0; }
.cp-menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Matches app.css's own topbar collapse breakpoint (900px) so the shared
   .topbar-nav mobile rule and this dropdown transition together — otherwise the
   page links get hidden by app.css while the hamburger hasn't appeared yet. */
@media (max-width: 900px) {
    /* Bar becomes: logo + hamburger; the menu drops below as a full-width panel. */
    .cp-topbar {
        height: auto;
        min-height: var(--topbar-h);
        flex-wrap: wrap;
        padding: 8px 14px;
    }
    .cp-menu-toggle { display: flex; }

    .cp-topbar-menu {
        display: none;
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4px 0 10px;
    }
    .cp-topbar-menu.open { display: flex; }

    /* app.css hides/absolutely-positions .topbar-nav at <=900px for the main app.
       Undo that here so the page-navigation links render INSIDE this dropdown. */
    .cp-topbar-menu .cp-primary-nav {
        display: flex;
        position: static;
        inset: auto;
        flex-direction: column;
        gap: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        z-index: auto;
    }
    .cp-primary-nav a { width: 100%; padding: 11px 12px; border-radius: var(--r-sm); text-align: left; }

    .cp-topbar-user {
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 6px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
    }
    .cp-user-name { padding: 2px 12px; white-space: normal; }
    .cp-logout .btn { width: 100%; }

    /* Cards span the full width; tighter page gutters. */
    .cp-card { max-width: 100% !important; }
    .cp-main-inner { padding: 16px 12px 40px; }

    /* Stack detail key/value pairs and let long values wrap. */
    .cp-kv { grid-template-columns: 1fr; gap: 2px 0; }
    .cp-kv dt { margin-top: 8px; }
    .cp-kv dd { margin-bottom: 2px; overflow-wrap: anywhere; }

    .cp-page-head { align-items: flex-start; }
}