/* PictureHUB visual identity — PornHub-style dark theme (black + #ff9000) */
:root {
    --ph-bg: #000000;
    --ph-surface: #1b1b1b;
    --ph-surface-2: #2a2a2a;
    --ph-border: #333333;
    --ph-text: #ffffff;
    --ph-muted: #b3b3b3;
    --ph-accent: #ff9000;
    --ph-accent-hover: #ffa31a;
    --ph-accent-dark: #cc7300;
}

/* ---- Remove the base theme's background image + white overlay ---- */
body::before,
body::after {
    display: none !important;
    background: none !important;
}

body {
    background-color: var(--ph-bg) !important;
    background-image: none !important;
    color: var(--ph-text);
    font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
}

/* ---- Main content surface (dark card on black, no decorative image) ---- */
body > .container,
.ad-layout-main > .container {
    background-color: var(--ph-surface);
    background-image: none !important;
    box-shadow: none;
    border: 1px solid var(--ph-border);
    border-radius: 6px;
    color: var(--ph-text);
}

/* Index page split panels: drop the semi-white background */
body.index > .container > *,
body.index .ad-layout-main > .container > * {
    background-color: transparent;
}

/* ---- Banner network slots (lama.city / BannerSystem) ----
   Layout:
        [======== top 728x90 ========]
   [left] [===== main content =====] [right]
        [====== bottom 728x90 ======]
*/
.ad-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 1rem;
}

.ad-layout-top,
.ad-layout-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ad-layout-mid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 1520px; /* ~1170 content + 2×160 sides + gaps */
    box-sizing: border-box;
}

.ad-layout-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1170px;
    width: 100%;
}

.ad-layout-main > .container {
    width: 100% !important;
    max-width: 100%;
    margin: 0;
}

.ad-layout-side {
    flex: 0 0 160px;
    width: 160px;
    max-width: 160px;
    box-sizing: border-box;
}

[data-ad-slot="top"],
[data-ad-slot="bottom"] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 728px;
    min-height: 90px;
    margin: 0.5rem auto;
    box-sizing: border-box;
    overflow: hidden;
}

[data-ad-slot="left"],
[data-ad-slot="right"] {
    width: 160px;
    max-width: 160px;
    min-height: 600px;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 1440px) {
    .ad-layout-side,
    [data-ad-slot="left"],
    [data-ad-slot="right"] {
        display: none !important;
    }

    .ad-layout-mid {
        max-width: 1170px;
    }
}

/* ---- Typography & links ---- */
a,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text,
.navbar-default .navbar-brand {
    color: var(--ph-text);
}

a:hover,
a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: var(--ph-accent);
}

body .hennypenny {
    color: var(--ph-text);
}

.help-block {
    color: var(--ph-muted);
}

/* ---- Navbar (black with orange underline) ---- */
.navbar.navbar-default,
body .navbar-default {
    background-color: #000000;
    border-color: #000000;
    border-bottom: 2px solid var(--ph-accent);
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #1a1a1a;
}

.navbar-default .navbar-toggle {
    border-color: #3b3b40;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #f0f0f0;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #2b2b30;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
body .navbar-default .open > a,
body .navbar-default .open > a:focus,
body .navbar-default .open > a:hover,
body .navbar-default .open > a:active {
    color: var(--ph-accent);
    background-color: #161616;
}

.dropdown-menu {
    background-color: #161616;
    border-color: var(--ph-border);
}

.dropdown-menu > li > a {
    color: #f0f0f0;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #000;
    background-color: var(--ph-accent);
}

/* ---- Logo lockup (PornHub-style: white word + orange box) ---- */
.picturehub-logo-wrap {
    display: inline-block;
}

.picturehub-title {
    margin: 8px 0 14px;
    font-family: Impact, "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
}

.picturehub-title-main {
    color: #ffffff;
}

.picturehub-title-accent {
    display: inline-block;
    color: #000000;
    background-color: var(--ph-accent);
    border-radius: 6px;
    padding: 0.1em 0.3em 0.18em;
    margin-left: 2px;
    line-height: 1;
    vertical-align: baseline;
}

.picturehub-domain {
    color: var(--ph-muted);
    font-size: 0.58em;
    margin-left: 6px;
    vertical-align: middle;
}

.picturehub-navbar-brand {
    font-family: Impact, "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
    font-size: 25px;
    letter-spacing: 0.3px;
}

/* ---- Buttons (override base theme's blue) ---- */
body .btn {
    background-color: var(--ph-surface-2);
    border-color: var(--ph-border);
    color: var(--ph-text);
    padding: 0.5em;
}

body .btn:hover,
body .btn:focus,
body .btn:active {
    background-color: #3a3a3a;
    border-color: #4a4a50;
    color: #ffffff;
}

.btn-primary,
.btn.btn-primary,
body .btn.btn-primary {
    background-color: var(--ph-accent);
    border-color: var(--ph-accent-dark);
    color: #000000;
    font-weight: bold;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary,
body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body .btn.btn-primary:active {
    background-color: var(--ph-accent-hover);
    border-color: var(--ph-accent);
    color: #000000;
}

/* ---- Uploader drop zone ---- */
body .uploader {
    border: 2px dashed #3a3a3a;
    color: var(--ph-muted);
}

body .uploader:hover {
    background-color: #161616;
}

body .uploader div.browser label {
    background-color: var(--ph-accent);
    color: #000000;
}

/* ---- Toggle checkboxes (orange when on) ---- */
body input[type='checkbox'] {
    background-color: #4a4a4a;
}

body input[type='checkbox']:checked {
    background-color: var(--ph-accent);
}

/* ---- Alerts ---- */
.alert-success {
    background-color: #14241a;
    border-color: #245236;
    color: #b7f4c7;
}

.alert-danger {
    background-color: #2a1213;
    border-color: #612326;
    color: #ffb2b7;
}

.alert-info {
    background-color: #241a10;
    border-color: var(--ph-accent-dark);
    color: #ffd9a6;
}

/* ---- Forms ---- */
.form-control,
.input-group-addon {
    color: #ececef;
    background-color: #121212;
    border-color: var(--ph-border);
}

.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
    color: #ececef;
    background-color: #121212;
    border-color: var(--ph-border);
    opacity: 1;
}

.form-control:focus {
    border-color: var(--ph-accent);
    box-shadow: 0 0 8px rgba(255, 144, 0, 0.45);
}

.modal-content {
    background-color: #ffffff;
    color: #222222;
}

.modal-content .modal-title,
.modal-content label {
    color: #222222;
}

.modal-content .form-control {
    background-color: #ffffff;
    border-color: #cccccc;
    color: #222222;
}

/* ---- Tables (admin pages) ---- */
.table,
.table > thead > tr > th,
.table > tbody > tr > td {
    color: var(--ph-text);
    border-color: var(--ph-border);
}

/* Striped rows: Bootstrap defaults to a near-white background (#f9f9f9),
   which renders the dark theme's white table text invisible. Darken it. */
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #121212;
    color: var(--ph-text);
}

.table-hover > tbody > tr:hover {
    background-color: #222222;
}

.panel {
    background-color: var(--ph-surface);
    border-color: var(--ph-border);
}

.panel-default > .panel-heading {
    background-color: #222222;
    color: var(--ph-accent);
    border-color: var(--ph-border);
}