/* ============================================================
   CONFIG MANAGER - MULTITV CMS THEME
   Based on the provided CMS screenshots.
   Drop-in replacement for assets/style.css
   ============================================================ */

:root{
    --cms-blue:#3c8dbc;
    --cms-blue-dark:#337aa5;
    --cms-blue-light:#e8f4fb;
    --cms-navy:#243b5a;
    --cms-green:#00a65a;
    --cms-red:#dd4b39;
    --cms-orange:#f39c12;

    --sidebar:#ffffff;
    --header:#ffffff;
    --body:#ffffff;
    --panel:#ffffff;
    --panel-soft:#f8f9fa;

    --text:#333333;
    --muted:#777777;
    --border:#e4e4e4;
    --border-blue:#d7e7f1;

    --shadow:0 1px 3px rgba(0,0,0,.08);
    --radius:2px;
}

/* ================= RESET ================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

body{
    background:#fff;
    color:var(--text);
    font-family:
        "Source Sans Pro",
        "Segoe UI",
        Arial,
        sans-serif;
    font-size:14px;
    line-height:1.42857143;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

button{
    cursor:pointer;
}

/* ================= LAYOUT ================= */

.layout{
    min-height:100vh;
    display:flex;
    background:#fff;
}

/* ================= LEFT SIDEBAR ================= */

.sidebar{
    position:fixed;
    z-index:30;
    top:0;
    left:0;
    bottom:0;

    width:260px;
    padding:0;

    display:flex;
    flex-direction:column;

    background:#fff;
    color:#333;

    border-right:1px solid #d9d9d9;

    box-shadow:1px 0 3px rgba(0,0,0,.04);

    overflow-y:auto;
}

/* CMS-style logo area */

.brand{
    height:60px;
    padding:0 18px;

    display:flex;
    align-items:center;
    gap:10px;

    background:#fff;
    border-bottom:1px solid #e5e5e5;

    color:var(--cms-navy);

    font-size:20px;
    font-weight:700;
    letter-spacing:-.3px;
}

.brand span{
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:4px;

    background:var(--cms-blue);
    color:#fff;

    font-size:11px;
    font-weight:700;
}

/* Group title */

.nav-section{
    margin-top:8px;
}

.nav-group{
    width:100%;
    min-height:38px;
    padding:9px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:0;
    border-left:3px solid transparent;
    border-radius:0;

    background:#fff;
    color:#777;

    text-align:left;
    font-size:11px;
    font-weight:600;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.nav-group:hover{
    background:#f5f5f5;
    color:var(--cms-blue);
}

.nav-arrow{
    display:inline-block;
    font-size:16px;
    line-height:1;
    transition:transform .15s ease;
}

.nav-group[aria-expanded="true"] .nav-arrow{
    transform:rotate(180deg);
}

.nav-children[hidden]{
    display:none;
}

/* Menu item */

.nav-btn{
    position:relative;

    width:100%;
    min-height:38px;

    margin:0;
    padding:9px 20px;

    border:0;
    border-left:3px solid transparent;
    border-radius:0;

    background:#fff;
    color:#555;

    text-align:left;

    font-size:13px;
    font-weight:400;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.nav-btn:hover{
    background:#f5f5f5;
    color:var(--cms-blue);
}

.nav-btn.active{
    background:var(--cms-blue);
    border-left-color:var(--cms-blue-dark);
    color:#fff;
    font-weight:600;
}

.nav-btn.active:hover{
    background:var(--cms-blue);
    color:#fff;
}

/* Admin bottom item */

.admin-link{
    width:100%;
    margin-top:auto;

    padding:13px 18px;

    border:0;
    border-top:1px solid #e5e5e5;

    border-radius:0;

    background:#fff;
    color:#555;

    text-align:left;
    font-size:13px;
}

.admin-link:hover{
    background:#f5f5f5;
    color:var(--cms-blue);
}

/* ================= MAIN ================= */

.main{
    width:calc(100% - 260px);
    margin-left:260px;

    min-height:100vh;

    background:#fff;
}

/* ================= TOP HEADER ================= */

.header{
    min-height:65px;

    padding:0 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:#fff;

    border-bottom:1px solid #ddd;

    box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.header h1{
    margin:0;

    color:var(--cms-navy);

    font-size:24px;
    font-weight:600;
    line-height:1.2;
}

.muted{
    margin-bottom:3px;

    color:#777;
    font-size:11px;
}

/* Right header */

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

.session-user{
    color:#555;
    font-size:12px;
    white-space:nowrap;
}

.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px;
    background:
        linear-gradient(115deg,rgba(8,25,45,.5),rgba(12,48,75,.18)),
        url("login-background.svg") center/cover no-repeat fixed,
        #173f68;
}

.login-card{
    width:min(420px,100%);
    padding:28px;
    border:1px solid #ddd;
    border-radius:4px;
    background:rgba(255,255,255,.96);
    box-shadow:0 16px 48px rgba(3,18,34,.32);
    backdrop-filter:blur(8px);
}

.login-card .brand{
    height:auto;
    padding:0 0 20px;
    border:0;
    font-size:20px;
}

.login-card h1{
    margin:0 0 4px;
    color:var(--cms-navy);
    font-size:24px;
}

.login-card p{
    margin:0 0 20px;
    color:var(--muted);
}

.login-card label{
    display:block;
    margin:12px 0 5px;
    color:#444;
    font-weight:600;
}

.login-card input{
    width:100%;
    min-height:40px;
    padding:8px 10px;
    border:1px solid #ccc;
    border-radius:3px;
}

.login-card input:focus{
    border-color:var(--cms-blue);
    outline:2px solid var(--cms-blue-light);
}

.login-card button{
    width:100%;
    min-height:40px;
    margin-top:12px;
}

.login-error{
    min-height:18px;
    margin-top:10px;
    color:var(--cms-red);
    font-size:13px;
}

/* ================= SC VERSION ================= */

.version-select{
    display:flex;
    flex-direction:column;
    gap:2px;

    color:#777;
    font-size:10px;
    font-weight:600;
}

.version-select select{
    min-width:145px;
    height:34px;

    padding:5px 9px;

    border:1px solid #ccc;
    border-radius:2px;

    background:#fff;
    color:#444;

    outline:none;
}

.version-select select:focus{
    border-color:var(--cms-blue);
    box-shadow:0 0 0 1px var(--cms-blue);
}

/* ================= TOOLBAR ================= */

.toolbar{
    min-height:56px;

    padding:9px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:#fff;

    border-bottom:1px solid #e5e5e5;
}

.actions{
    display:flex;
    align-items:center;
    gap:6px;
}

/* ================= BUTTONS ================= */

.btn{
    min-height:32px;

    padding:6px 12px;

    border:1px solid #d2d6de;
    border-radius:2px;

    background:#fff;
    color:#555;

    font-size:12px;
    font-weight:600;

    box-shadow:none;

    transition:
        background .12s ease,
        border-color .12s ease,
        color .12s ease;
}

.btn:hover{
    background:#f5f5f5;
    border-color:#bbb;
    box-shadow:none;
    transform:none;
}

.btn:disabled{
    cursor:not-allowed;
    opacity:.55;
}

.btn.primary{
    background:var(--cms-blue);
    border-color:var(--cms-blue);
    color:#fff;
}

.btn.primary:hover{
    background:var(--cms-blue-dark);
    border-color:var(--cms-blue-dark);
}

.btn.success{
    background:var(--cms-green);
    border-color:var(--cms-green);
    color:#fff;
}

.btn.success:hover{
    background:#008d4c;
    border-color:#008d4c;
}

.btn.danger{
    background:#fff;
    border-color:#dd4b39;
    color:#dd4b39;
}

.btn.danger:hover{
    background:#dd4b39;
    color:#fff;
}

/* ================= STATUS ================= */

.status{
    display:inline-block;

    min-height:27px;

    padding:5px 12px;

    border:1px solid #ddd;
    border-radius:2px;

    background:#f5f5f5;
    color:#777;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.status.active{
    background:#00a65a;
    border-color:#00a65a;
    color:#fff;
}

.status.draft{
    background:#f39c12;
    border-color:#f39c12;
    color:#fff;
}

.status.locked{
    background:#605ca8;
    border-color:#605ca8;
    color:#fff;
}

.status.inactive{
    background:#777;
    border-color:#777;
    color:#fff;
}

/* ================= CONTENT ================= */

.page{
    max-width:none;
    margin:0;

    padding:20px 22px 35px;

    background:#fff;
}

/* ================= STAT BOXES ================= */

.stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:14px;

    margin-bottom:18px;
}

.stats > div{
    position:relative;

    min-height:88px;

    padding:14px 16px;

    background:#fff;

    border:1px solid #e2e2e2;
    border-radius:2px;

    box-shadow:var(--shadow);

    overflow:hidden;
}

.stats > div:before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:var(--cms-blue);
}

.stats > div:nth-child(2):before{
    background:#00a65a;
}

.stats > div:nth-child(3):before{
    background:#f39c12;
}

.stats > div:nth-child(4):before{
    background:#605ca8;
}

.stats > div:after{
    display:none;
}

.stats span{
    display:block;

    color:#777;

    font-size:11px;
    font-weight:400;
    text-transform:uppercase;
}

.stats b{
    display:block;

    margin-top:6px;

    color:#333;

    font-size:22px;
    font-weight:600;
    line-height:1;
}

/* ================= CARDS ================= */

.card{
    margin-bottom:15px;

    padding:15px;

    background:#fff;

    border:1px solid #ddd;
    border-radius:2px;

    box-shadow:var(--shadow);
}

.card:hover{
    box-shadow:var(--shadow);
}

.card h2{
    margin:0 0 5px;

    color:#333;

    font-size:17px;
    font-weight:600;
}

.card p{
    margin:0 0 12px;

    color:#777;

    font-size:12px;
}

/* ================= GRID ================= */

.grid2{
    display:grid;
    grid-template-columns:1.5fr 1fr;

    gap:14px;
}

.version-overview{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.version-summary{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.version-summary > span{
    color:var(--cms-navy);
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
}

.version-summary > b{
    margin:4px 0 8px;
    color:#333;
    font-size:30px;
    line-height:1.1;
}

.version-summary > small{
    width:100%;
    padding-top:8px;
    border-top:1px solid #ddd;
    color:#777;
    text-transform:capitalize;
}

.config-history-card,
.bitbucket-history-card,
.activation-history-card{
    margin-top:8px;
}

.bitbucket-branch-dashboard{
    margin-bottom:16px;
}

.bitbucket-dashboard-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.bitbucket-dashboard-controls,
.bitbucket-count-filter,
.bitbucket-custom-range{
    display:flex;
    align-items:center;
    gap:8px;
}

.bitbucket-dashboard-controls{
    flex-wrap:wrap;
    justify-content:flex-end;
}

.bitbucket-count-filter{
    color:#555;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.bitbucket-count-filter select,
.bitbucket-custom-range input{
    min-height:35px;
    padding:6px 9px;
    border:1px solid #ccc;
    border-radius:2px;
    background:#fff;
    color:#333;
}

.bitbucket-custom-range{
    flex-wrap:wrap;
}

.bitbucket-custom-range label{
    display:flex;
    align-items:center;
    gap:5px;
    color:#555;
    font-size:11px;
}

.bitbucket-dashboard-heading h2{
    margin:0;
}

.bitbucket-dashboard-heading p{
    margin:3px 0 0;
    color:var(--muted);
}

.bitbucket-branch-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.bitbucket-branch-card{
    display:block;
    width:100%;
    min-width:0;
    padding:16px;
    border:1px solid #ddd;
    text-align:center;
    color:var(--text);
    transition:border-color .15s ease,box-shadow .15s ease;
}

.bitbucket-branch-card:hover,
.bitbucket-branch-card.selected{
    border-color:var(--cms-blue);
    box-shadow:0 0 0 1px var(--cms-blue),var(--shadow);
}

.bitbucket-branch-card > span{
    display:block;
    overflow-wrap:anywhere;
    color:var(--cms-navy);
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
}

.bitbucket-branch-card > span em{
    display:inline-block;
    margin-left:7px;
    padding:2px 5px;
    border-radius:2px;
    background:#e8f7ef;
    color:#207548;
    font-size:9px;
    font-style:normal;
    letter-spacing:.03em;
    vertical-align:middle;
}

.bitbucket-branch-card > b{
    display:block;
    margin:6px 0 9px;
    font-size:30px;
    line-height:1.1;
}

.bitbucket-branch-card > small{
    display:block;
    padding-top:8px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:11px;
    overflow-wrap:anywhere;
}

.bitbucket-branch-card > small.bitbucket-count-caption{
    padding-top:0;
    border-top:0;
    font-size:10px;
    font-weight:600;
}

.bitbucket-branch-control{
    display:flex;
    align-items:center;
    gap:8px;
    color:#555;
    font-size:12px;
    font-weight:600;
}

.bitbucket-branch-control select{
    min-width:180px;
    min-height:35px;
    padding:6px 9px;
    border:1px solid #ccc;
    border-radius:2px;
    background:#fff;
    color:#333;
}

.bitbucket-branch-control select:focus{
    border-color:var(--cms-blue);
    outline:none;
    box-shadow:0 0 0 1px var(--cms-blue);
}

.bitbucket-history-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

.bitbucket-commit-message{
    white-space:pre-line;
    overflow-wrap:anywhere;
}

.bitbucket-history-card .version-table td:first-child{
    text-align:left;
}

.bitbucket-history-card .version-table a{
    color:var(--cms-blue-dark);
    font-weight:600;
    text-decoration:none;
}

.bitbucket-history-card .version-table a.bitbucket-commit-action{
    color:var(--cms-navy);
}

.bitbucket-history-card .version-table td:last-child{
    text-align:center;
}

.notice a{
    color:inherit;
    font-weight:700;
    text-decoration:underline;
}

.bitbucket-row-actions{
    min-width:112px;
}

.bitbucket-row-actions .icon-btn:disabled{
    cursor:not-allowed;
    opacity:.45;
}

.bitbucket-row-actions .version-menu{
    min-width:205px;
}

.bitbucket-editor-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    margin:10px 0;
}

.bitbucket-editor-files{
    max-height:240px;
    overflow:auto;
    border:1px solid var(--border);
}

.bitbucket-file-entry{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    padding:8px 10px;
    border:0;
    border-bottom:1px solid var(--border);
    background:#fff;
    color:var(--text);
    text-align:left;
}

.bitbucket-file-entry:last-child{
    border-bottom:0;
}

.bitbucket-file-entry:hover{
    background:var(--cms-blue-light);
}

.bitbucket-file-entry small{
    margin-left:auto;
    color:var(--muted);
}

.bitbucket-editor-textarea{
    min-height:360px;
    margin-bottom:12px;
}

.bitbucket-editor-textarea + .field{
    margin:0 0 12px;
}

.bitbucket-editor-textarea + .field input{
    width:100%;
}

.bitbucket-history-card .version-table a:hover{
    text-decoration:underline;
}

body.backend-config-view #versionToolbar,
body.backend-config-view .stats,
body.backend-config-view #versionOverview,
body.backend-config-view .config-history-card,
body.backend-config-view .activation-history-card,
body.backend-config-view .grid2,
body.backend-config-view .tabs,
body.backend-config-view .tab-panel,
body.backend-config-view .header-right .version-select,
body.backend-config-view .header-right > .btn[onclick="openCompare()"],
body.backend-config-view .header-right > .btn[onclick="openHistory()"]{
    display:none;
}

body:not(.backend-config-view) .bitbucket-branch-dashboard,
body:not(.backend-config-view) .bitbucket-history-card{
    display:none;
}

body.compare-page-open #versionToolbar,
body.compare-page-open .stats,
body.compare-page-open #dashboardView,
body.compare-page-open .tabs,
body.compare-page-open .tab-panel,
body.compare-page-open .header-right .version-select,
body.compare-page-open .header-right > .btn[onclick="openCompare()"],
body.compare-page-open .header-right > .btn[onclick="openHistory()"]{
    display:none;
}

.compare-versions-view{
    display:none;
}

body.compare-page-open .compare-versions-view{
    display:block;
}

.compare-page-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.compare-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:6px;
    color:var(--muted);
    font-size:12px;
}

.compare-page-heading h2{
    margin:0;
    color:var(--cms-navy);
}

.compare-page-heading p{
    margin:5px 0 0;
    color:var(--muted);
}

.compare-version-card{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.compare-version-controls{
    display:grid;
    grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);
    align-items:end;
    gap:12px;
    flex:1;
}

.compare-version-controls .field{
    margin:0;
}

.compare-version-controls .field span{
    display:block;
    margin-bottom:6px;
    color:var(--text);
    font-size:12px;
    font-weight:600;
}

.compare-version-controls select{
    width:100%;
    min-height:38px;
    padding:7px 9px;
    border:1px solid #ccc;
    border-radius:2px;
    background:#fff;
    color:var(--text);
}

.compare-swap{
    min-width:40px;
    font-size:20px;
}

.compare-summary{
    margin:0 0 10px;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}

.compare-code-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.compare-code-panel{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:3px;
    background:#fff;
}

.compare-code-panel h3{
    margin:0;
    padding:11px 13px;
    border-bottom:1px solid var(--border);
    background:#f7f9fb;
    color:var(--cms-navy);
    font-size:13px;
}

.compare-code{
    max-height:65vh;
    overflow:auto;
    background:#fff;
    color:#252525;
    font:12px/1.55 Consolas,"Liberation Mono",monospace;
}

.compare-code-row{
    display:flex;
    min-height:19px;
}

.compare-line-number{
    position:sticky;
    left:0;
    flex:0 0 42px;
    padding:1px 7px 1px 3px;
    border-right:1px solid #e8e8e8;
    background:#f7f7f7;
    color:#888;
    text-align:right;
    user-select:none;
}

.compare-code-row code{
    display:block;
    min-width:max-content;
    padding:1px 8px;
    font:inherit;
    white-space:pre;
}

.compare-code-row.removed code{
    background:#ffe9e9;
    color:#a12622;
}

.compare-code-row.added code{
    background:#e6ffed;
    color:#176b35;
}

.bitbucket-diff{
    max-height:65vh;
    overflow:auto;
    background:#fff;
    color:#252525;
    font:12px/1.55 Consolas,"Liberation Mono",monospace;
}

.bitbucket-diff-row{
    min-height:19px;
}

.bitbucket-diff-row code{
    display:block;
    min-width:max-content;
    padding:1px 10px;
    font:inherit;
    white-space:pre;
}

.bitbucket-diff-row.added code{
    background:#e6ffed;
    color:#176b35;
}

.bitbucket-diff-row.removed code{
    background:#ffe9e9;
    color:#a12622;
}

.bitbucket-diff-row.diff-header code{
    background:#f0f3f7;
    color:#38506b;
    font-weight:600;
}

.bitbucket-diff-row.file-header code{
    background:#f7f9fb;
    color:#555;
    font-weight:600;
}

.compare-no-differences,
.compare-loading{
    color:var(--muted);
    text-align:center;
}

.history-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.history-actions input{
    min-height:35px;
    width:min(280px,45vw);
    padding:7px 9px;
    border:1px solid #ccc;
    border-radius:2px;
    color:#333;
}

.history-actions input:focus{
    border-color:var(--cms-blue);
    outline:none;
    box-shadow:0 0 0 1px var(--cms-blue);
}

.table-wrap{
    width:100%;
    overflow-x:auto;
}

.version-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.version-table th,
.version-table td{
    padding:10px 9px;
    border:1px solid #e4e4e4;
    text-align:left;
    vertical-align:middle;
}

.version-table th{
    background:#fafafa;
    color:#333;
    font-weight:600;
}

.version-table td:first-child{
    text-align:center;
    font-weight:600;
}

.version-status{
    display:inline-block;
    padding:3px 7px;
    border-radius:2px;
    background:#f1f1f1;
    color:#555;
    font-size:11px;
    font-weight:600;
    text-transform:capitalize;
}

.version-status.active{
    background:#e7f5ed;
    color:#287a50;
}

.version-status.locked{
    background:#efedf6;
    color:#605ca8;
}

.version-status.draft{
    background:#fff4e5;
    color:#a66300;
}

.table-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.icon-btn{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e5e1ed;
    border-radius:3px;
    background:#f5f3f8;
    color:var(--cms-navy);
    font-size:17px;
}

.icon-btn:hover,
.icon-btn[aria-expanded="true"]{
    border-color:var(--cms-blue);
    background:var(--cms-blue-light);
}

.icon-btn svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.version-menu-wrap{
    position:relative;
}

.version-menu{
    position:absolute;
    z-index:20;
    top:calc(100% + 4px);
    right:0;
    width:205px;
    padding:4px 0;
    border:1px solid #ddd;
    border-radius:4px;
    background:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.version-menu button{
    width:100%;
    padding:10px 12px;
    border:0;
    background:#fff;
    color:#444;
    text-align:left;
    font-size:12px;
}

.version-menu button:hover{
    background:#f5f5f5;
    color:var(--cms-blue);
}

.version-menu button:disabled{
    cursor:not-allowed;
    color:#999;
}

.version-menu button:disabled:hover{
    background:#fff;
}

.deployment-tags{
    display:block;
    margin-top:5px;
    color:#777;
    font-size:10px;
}

.deployment-meta{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin-top:5px;
    color:#666;
    font-size:12px;
}

.rule-detail-view{
    min-height:calc(100vh - 65px);
    background:#f7f8fa;
}

.rule-view-heading,
.rule-view-heading > div,
.rule-view-controls,
.rule-view-toolbar,
.rule-view-toolbar > div{
    display:flex;
    align-items:center;
}

.rule-view-heading,
.rule-view-toolbar{
    justify-content:space-between;
    gap:14px;
}

.rule-view-heading{
    margin-bottom:14px;
}

.rule-view-heading > div:first-child{
    gap:10px;
}

.rule-view-heading h1{
    margin:0;
    color:var(--cms-navy);
    font-size:22px;
}

.rule-view-back{
    width:38px;
    height:36px;
    font-size:19px;
}

.rule-view-controls,
.rule-view-toolbar > div{
    flex-wrap:wrap;
    gap:8px;
}

.rule-view-controls{
    color:#555;
    font-size:12px;
}

.rule-view-controls label{
    display:flex;
    align-items:center;
    gap:6px;
}

.rule-view-controls select,
.rule-view-toolbar select{
    min-height:34px;
    min-width:150px;
    padding:6px 9px;
    border:1px solid #ccc;
    border-radius:3px;
    background:#fff;
    color:#444;
}

.rule-view-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:18px;
    padding:15px 20px;
    border:1px solid #ddd;
    border-radius:5px;
    background:#fff;
    box-shadow:var(--shadow);
    color:#555;
    font-size:12px;
}

.rule-view-meta > div{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding-right:20px;
    border-right:1px solid #eee;
}

.rule-view-meta small{
    color:#777;
}

.rule-view-meta strong{
    color:var(--cms-navy);
    font-size:22px;
}

.rule-view-toolbar{
    margin:12px 0;
}

.rule-view-toolbar > strong{
    color:#444;
    font-size:15px;
}

.rule-view-add-form{
    margin:12px 0;
    padding:16px;
}

.rule-view-add-form > strong{
    display:block;
    margin-bottom:14px;
    color:var(--cms-navy);
    font-size:15px;
}

.rule-view-add-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:16px;
}

.rule-view-card{
    margin:12px 0;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    box-shadow:var(--shadow);
}

.rule-view-card summary{
    position:relative;
    min-height:86px;
    padding:16px 44px 14px 15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    list-style:none;
    cursor:pointer;
}

.rule-view-card summary::-webkit-details-marker{
    display:none;
}

.rule-view-card summary strong{
    color:#444;
    font-size:16px;
}

.rule-view-card summary > span:not(.rule-view-chevron){
    padding-top:7px;
    border-top:1px solid #eee;
    color:#555;
    font-size:13px;
}

.rule-view-chevron{
    position:absolute;
    right:16px;
    top:50%;
    color:#777;
    font-size:18px;
    transform:translateY(-50%);
    transition:transform .15s ease;
}

.rule-view-card[open] .rule-view-chevron{
    transform:translateY(-50%) rotate(180deg);
}

.rule-view-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 20px;
    padding:0 15px 15px;
}

.rule-view-fields > div{
    display:grid;
    grid-template-columns:minmax(110px,35%) 1fr;
    gap:10px;
    padding:9px 0;
    border-top:1px solid #eee;
    overflow-wrap:anywhere;
    font-size:12px;
}

.rule-view-fields b{
    color:#666;
}

.rule-view-fields span{
    color:#333;
}

.table-empty{
    color:#777;
    text-align:center !important;
}

.history-pagination{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:12px;
    color:#777;
    font-size:12px;
}

.history-pagination > div{
    display:flex;
    gap:3px;
}

.history-pagination .btn{
    min-width:30px;
    min-height:30px;
    padding:4px 8px;
}

.history-pagination .btn.active{
    background:var(--cms-blue);
    border-color:var(--cms-blue);
    color:#fff;
}

.history-pagination .btn:disabled{
    cursor:not-allowed;
    opacity:.5;
}

/* ================= WORKFLOW ================= */

.workflow{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    margin-top:18px;
}

.workflow span{
    padding:7px 13px;

    border:1px solid #d8e8f2;
    border-radius:2px;

    background:#eaf5fb;
    color:var(--cms-blue);

    font-size:11px;
    font-weight:600;
}

.workflow i{
    color:#999;
    font-style:normal;
}

/* ================= TABS ================= */

.tabs{
    display:flex;
    align-items:center;

    gap:0;

    margin:18px 0 0;

    border-bottom:1px solid #ddd;
}

.tab{
    position:relative;

    min-height:40px;

    padding:10px 15px;

    border:0;
    border-bottom:3px solid transparent;

    background:#fff;
    color:#777;

    font-size:12px;
    font-weight:500;
}

.tab:hover{
    color:var(--cms-blue);
    background:#fafafa;
}

.tab.active{
    border-bottom-color:var(--cms-blue);

    background:#fff;

    color:var(--cms-blue);

    font-weight:600;
}

/* ================= CARD HEADER ================= */

.card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-bottom:14px;
}

.card-head > div:last-child{
    display:flex;
    gap:6px;
}

/* ================= RULE ================= */

.rule{
    margin:10px 0;

    border:1px solid #ddd;
    border-radius:2px;

    background:#fff;

    overflow:hidden;
}

.rule:hover{
    border-color:#c9dfe9;
    box-shadow:none;
}

.rule-head{
    min-height:43px;

    padding:8px 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:#f7f7f7;

    border-bottom:1px solid #ddd;
}

.rule.collapsed .rule-head{
    border-bottom:0;
}

.rule.collapsed .rule-body{
    display:none;
}

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

.rule-toggle{
    width:30px;
    padding:3px;
    font-size:18px;
    line-height:1;
}

.rule-title{
    color:#333;

    font-size:13px;
    font-weight:600;
}

.rule-body{
    padding:15px;
}

/* ================= FIELDS ================= */

.fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:13px;
}

.field{
    min-width:0;
}

.field label{
    display:block;

    margin-bottom:5px;

    color:#555;

    font-size:11px;
    font-weight:600;
    text-transform:none;
    letter-spacing:0;
}

.field input,
.field select,
.field textarea{
    width:100%;

    min-height:35px;

    padding:7px 9px;

    border:1px solid #ccc;
    border-radius:2px;

    background:#fff;
    color:#333;

    outline:none;

    box-shadow:none;

    transition:border-color .12s ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover{
    border-color:#aaa;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--cms-blue);

    box-shadow:0 0 0 1px var(--cms-blue);
}

.full{
    grid-column:1 / -1;
}

/* ================= JSON ================= */

.json{
    width:100%;

    min-height:430px;

    padding:12px;

    border:1px solid #ccc;
    border-radius:2px;

    background:#1e282c;

    color:#f5f5f5;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:12px;
    line-height:1.55;

    outline:none;
    resize:vertical;
}

.json:focus{
    border-color:var(--cms-blue);

    box-shadow:0 0 0 1px var(--cms-blue);
}

/* ================= NOTICE ================= */

.notice{
    margin-bottom:14px;

    padding:10px 12px;

    border:1px solid #d6eadf;
    border-left:3px solid var(--cms-green);
    border-radius:2px;

    background:#f4fbf7;

    color:#287a50;

    font-size:12px;
}

.notice.error{
    border-color:#efd2cd;
    border-left-color:var(--cms-red);

    background:#fff7f5;

    color:#b33a2a;
}

/* ================= DETAILS ================= */

.detail{
    display:grid;

    grid-template-columns:180px 1fr;

    gap:15px;

    padding:10px 0;

    border-bottom:1px solid #eee;

    font-size:12px;
}

.detail:last-child{
    border-bottom:0;
}

.detail b{
    color:#666;
    font-weight:600;
}

.detail span{
    color:#333;
}

/* ================= MODAL ================= */

.modal{
    position:fixed;
    z-index:100;

    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.55);
}

.modal-card{
    width:min(1050px,95vw);
    max-height:90vh;

    overflow:auto;

    background:#fff;

    border-radius:2px;

    box-shadow:0 10px 35px rgba(0,0,0,.25);
}

.modal-head{
    position:sticky;
    top:0;
    z-index:2;

    min-height:52px;

    padding:10px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:#fff;

    border-bottom:1px solid #ddd;
}

.modal-head h2{
    margin:0;

    color:#333;

    font-size:17px;
    font-weight:600;
}

.modal-head button{
    width:32px;
    height:32px;

    border:0;
    border-radius:2px;

    background:#f5f5f5;
    color:#555;

    font-size:20px;
}

.modal-head button:hover{
    background:#e8e8e8;
}

/* ================= COMPARE ================= */

.compare{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;
}

.compare pre{
    max-height:500px;

    overflow:auto;

    padding:12px;

    border:1px solid #ddd;
    border-radius:2px;

    background:#1e282c;
    color:#eee;

    font:12px/1.55 Consolas,monospace;
}

/* ================= HISTORY ================= */

.history{
    padding:11px 2px;

    border-bottom:1px solid #eee;
}

.history:last-child{
    border-bottom:0;
}

.history b{
    color:#333;

    font-size:12px;
}

.history small{
    color:#777;
}

/* ================= VALIDATOR ================= */

.validator-result{
    margin-top:14px;

    padding:13px;

    border:1px solid #ddd;
    border-radius:2px;

    background:#f8f8f8;
}

.validator-result h3{
    margin-top:0;
}

/* ================= HIDDEN ================= */

.hidden{
    display:none !important;
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#f4f4f4;
}

::-webkit-scrollbar-thumb{
    background:#c5c5c5;
    border-radius:2px;
}

::-webkit-scrollbar-thumb:hover{
    background:#999;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1100px){

    .sidebar{
        width:230px;
    }

    .main{
        width:calc(100% - 230px);
        margin-left:230px;
    }

    .stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:800px){

    .bitbucket-dashboard-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .bitbucket-dashboard-controls{
        justify-content:flex-start;
    }

    .layout{
        display:block;
    }

    .sidebar{
        position:relative;

        width:100%;
        min-height:auto;
        max-height:none;
    }

    .main{
        width:100%;
        margin-left:0;
    }

    .header,
    .toolbar{
        flex-direction:column;
        align-items:flex-start;

        padding:12px 16px;
    }

    .header-right,
    .actions{
        flex-wrap:wrap;
    }

    .grid2,
    .compare,
    .compare-code-grid,
    .fields{
        grid-template-columns:1fr;
    }

    .compare-page-heading,
    .compare-version-card{
        align-items:stretch;
        flex-direction:column;
    }

    .compare-version-controls{
        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    }

    .version-overview{
        grid-template-columns:1fr;
    }

    .rule-view-heading,
    .rule-view-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .rule-view-fields{
        grid-template-columns:1fr;
    }

    .history-actions input{
        width:100%;
    }

    .bitbucket-branch-cards{
        grid-template-columns:1fr;
    }

    .bitbucket-branch-control{
        align-items:flex-start;
        flex-direction:column;
    }

    .bitbucket-history-controls{
        align-items:stretch;
        flex-direction:column-reverse;
        width:100%;
    }

    .bitbucket-branch-control select{
        width:100%;
    }

    .page{
        padding:16px;
    }

    .full{
        grid-column:auto;
    }
}

@media(max-width:520px){

    .compare-version-controls{
        grid-template-columns:1fr;
    }

    .compare-swap{
        justify-self:center;
        transform:rotate(90deg);
    }

    .bitbucket-dashboard-controls,
    .bitbucket-custom-range{
        align-items:flex-start;
        flex-direction:column;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .header h1{
        font-size:20px;
    }

    .version-select,
    .version-select select{
        width:100%;
    }

    .tabs{
        overflow-x:auto;
    }

    .tab{
        white-space:nowrap;
    }
}