/* Aramghar Homes -- Owner module: Olive Green & Red | Admin module: Blue & Red
   Owner primary: #556b2f (olive green), #3d4f22 (dark accent)
   Admin primary: #14468c (blue), #0f356b (dark accent)
   Brand red:     #c0392b (primary), #96271c (dark accent) -- shared, used for danger/CTAs and both navbars' accent border
   Fonts:         Poppins (body/UI), Playfair Display (section headings), Dancing Script (brand wordmark)

   Scoping: body.owner-theme (includes/header.php) vs body.admin-theme
   (admin/includes/header.php, admin/setup_admin.php) - since some CSS
   classes (buttons, headings, links, etc.) are shared by both modules,
   these two body classes let the same class names resolve to different
   colors depending on which module the page belongs to. Elements that
   are inherently only ever used by one module (e.g. .navbar-default is
   owner-only, .navbar-inverse is admin-only) are colored directly
   without needing this scoping.
*/

body {
    background-color: #f4f6f9;
    padding: 10px;
    font-family: 'Poppins', Arial, sans-serif;
    color: #2c2c2c;
}

.navbar.navbar-static-top {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;
}

.form-control {
    min-height: 40px;
}

select.form-control,
textarea.form-control {
    min-height: 40px;
}

.input-group-addon {
    min-height: 40px;
}

/* ---- Brand wordmark ---- */
.brand-link {
    display: flex;
    align-items: center;
}
.brand-logo {
    height: 32px;
    width: 32px;
    margin-right: 8px;
    border-radius: 50%;
}
.brand-script {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 0.5px;
}
.admin-badge {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}

/* ---- Owner-facing navbar (navbar-default) ---- */
.navbar-default {
    background-color: #556b2f;
    border-color: #3d4f22;
    border-width: 0 0 3px 0;
    border-style: solid;
    border-bottom-color: #c0392b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    min-height: 56px;
}

.navbar-default .navbar-header {
    padding: 8px 0;
}

.navbar-default .navbar-brand,
.navbar-inverse .navbar-brand {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a {
    color: #eaf1fb;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
    padding-top: 24px;
    padding-bottom: 24px;
    position: relative;
}
.navbar-default .navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 16px;
    height: 2px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
}
.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > li > a:focus::after {
    transform: scaleX(1);
}

.navbar-default .navbar-toggle {
    border-color: #3d4f22;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #3d4f22;
}

@media (max-width: 767px) {
    .navbar-default .navbar-collapse {
        background-color: #3d4f22;
    }
    .navbar-default .navbar-nav > li > a::after {
        display: none;
    }
}

/* ---- Admin navbar (navbar-inverse), red accent to visually separate it ---- */
.navbar-inverse {
    background-color: #96271c;
    border-color: #7a1f16;
    border-width: 0 0 3px 0;
    border-style: solid;
    border-bottom-color: #14468c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    min-height: 56px;
}
.navbar-inverse .navbar-header {
    padding: 8px 0;
}
.navbar-inverse .navbar-nav > li > a {
    color: #fbe6e3;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
    padding-top: 24px;
    padding-bottom: 24px;
    position: relative;
}
.navbar-inverse .navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 16px;
    height: 2px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
}
.navbar-inverse .navbar-nav > li > a:hover::after,
.navbar-inverse .navbar-nav > li > a:focus::after {
    transform: scaleX(1);
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav > li > a::after {
        display: none;
    }
}

/* ---- Links & headings ---- */
body.owner-theme a {
    color: #556b2f;
}
body.owner-theme a:hover,
body.owner-theme a:focus {
    color: #c0392b;
}
body.admin-theme a {
    color: #14468c;
}
body.admin-theme a:hover,
body.admin-theme a:focus {
    color: #c0392b;
}

body.owner-theme h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #556b2f;
    letter-spacing: 0.2px;
}
body.admin-theme h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #14468c;
    letter-spacing: 0.2px;
}

h3 {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #96271c;
}

body.owner-theme h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    color: #556b2f;
}
body.admin-theme h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    color: #14468c;
}

.panel-onboard h3 {
    border-bottom: none;
}
.panel-onboard hr {
    border-top: 2px solid #c0392b;
    margin-top: 8px;
}

/* ---- Public property gallery ---- */
.gallery-thumb {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gallery-thumb:hover {
    opacity: 1;
}
body.owner-theme .gallery-thumb:hover {
    border-color: #556b2f;
}
body.admin-theme .gallery-thumb:hover {
    border-color: #14468c;
}

/* ---- Public property listing cards ---- */
.property-listing-card {
    display: block;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    overflow: hidden;
    color: #2c2c2c;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.property-listing-card:hover,
.property-listing-card:focus {
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    color: #2c2c2c;
    text-decoration: none;
}
.property-listing-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: #f4f6f9;
}
.property-listing-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 42px;
}
.property-listing-body {
    padding: 15px;
}
.property-listing-body h4 {
    margin-top: 0;
    margin-bottom: 4px;
}
.property-listing-rent {
    font-weight: 600;
    margin-bottom: 0;
}
body.owner-theme .property-listing-rent {
    color: #556b2f;
}
body.admin-theme .property-listing-rent {
    color: #14468c;
}

/* ---- Admin properties table: horizontal scroll instead of squished/
   wrapped columns on ANY screen size (Bootstrap's table-responsive only
   scrolls below 768px by default - this extends it to desktop/laptop
   too), action buttons and every other cell always stay in one row ---- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-properties-table {
    min-width: 1150px;
}
.admin-properties-table th,
.admin-properties-table td {
    white-space: nowrap;
}

/* ---- Facilities / appliances badge lists (bigger, easier to read) ---- */
.facility-list.list-inline > li.label {
    font-size: 14px;
    font-weight: 500;
    padding: 7px 12px;
    margin-right: 4px;
}

/* ---- Buttons ---- */
/* !important on the text color here is deliberate and narrowly scoped:
   button text color must never be affected by the generic "a" /
   "a:hover" link-color rules above, no matter what else changes on this
   page. Several buttons on this site (View/Edit/Delete/Add Property,
   etc.) are <a> tags styled to look like buttons, so without a hard
   guarantee here they can end up inheriting link colors instead of
   proper button text, making them unreadable against a colored
   background. */
body.owner-theme .btn-primary,
body.owner-theme .btn-primary:hover,
body.owner-theme .btn-primary:focus,
body.owner-theme .btn-primary:active,
body.owner-theme .btn-primary:visited {
    color: #ffffff !important;
    background-color: #556b2f;
    border-color: #3d4f22;
}
body.owner-theme .btn-primary:hover,
body.owner-theme .btn-primary:focus,
body.owner-theme .btn-primary:active {
    background-color: #3d4f22;
    border-color: #2c3a19;
}
body.admin-theme .btn-primary,
body.admin-theme .btn-primary:hover,
body.admin-theme .btn-primary:focus,
body.admin-theme .btn-primary:active,
body.admin-theme .btn-primary:visited {
    color: #ffffff !important;
    background-color: #14468c;
    border-color: #0f356b;
}
body.admin-theme .btn-primary:hover,
body.admin-theme .btn-primary:focus,
body.admin-theme .btn-primary:active {
    background-color: #0f356b;
    border-color: #0b2951;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:visited {
    color: #ffffff !important;
    background-color: #c0392b;
    border-color: #96271c;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #96271c;
    border-color: #7a1f16;
}

.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:visited {
    color: #333333 !important;
}

/* ---- Labels / status badges ---- */
body.owner-theme .label-primary {
    background-color: #556b2f;
}
body.admin-theme .label-primary {
    background-color: #14468c;
}
.label-danger {
    background-color: #c0392b;
}

/* ---- Panels & cards ---- */
.panel-onboard {
    background: #fff;
    padding: 25px;
    margin-top: 25px;
    border-radius: 4px;
    border-top: 3px solid #c0392b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ---- Contact page ---- */
.contact-details .glyphicon {
    margin-right: 8px;
    width: 18px;
}
body.owner-theme .contact-details .glyphicon {
    color: #556b2f;
}
body.admin-theme .contact-details .glyphicon {
    color: #14468c;
}

.property-card {
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
body.owner-theme .property-card {
    border-left: 4px solid #556b2f;
}
body.admin-theme .property-card {
    border-left: 4px solid #14468c;
}

/* ---- Form accents ---- */
label.required:after {
    content: " *";
    color: #c0392b;
}

body.owner-theme .form-control:focus {
    border-color: #556b2f;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(85,107,47,0.4);
}
body.admin-theme .form-control:focus {
    border-color: #14468c;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(20,70,140,0.4);
}

/* Error highlighting for radio-button groups (wrapped in a plain .has-error div,
   not .form-group, since each option needs its own grid column) */
.has-error .radio label {
    color: #a94442;
}
.has-error .help-block {
    color: #a94442;
}

@media (max-width: 767px) {
    .btn-block-xs {
        display: block;
        width: 100%;
    }
    .property-card .text-right {
        text-align: left;
        margin-top: 8px;
    }
}

/* ---- File upload thumbnail previews (js/file-upload-preview.js) ---- */
.upload-preview-single,
.upload-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.upload-thumb {
    position: relative;
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #f4f6f9;
}
.upload-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}
.upload-thumb-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #999;
}
.upload-thumb-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    line-height: 1.4;
    padding: 1px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upload-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(192, 57, 43, 0.9);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.upload-count-label {
    margin: 6px 0 0;
}
.upload-add-more-btn {
    margin-top: 6px;
}

/* ---------------------------------------------------------------
   Role-based color schemes. The logged-out/default appearance
   (plain .owner-theme, olive green) is completely untouched below -
   these two blocks only apply once .role-owner-logged-in or
   .role-guest-logged-in is added to <body>, layering a distinct
   accent color on top of the same base theme rather than replacing
   it. Both use white nav/button text throughout, same as the
   existing themes, which stays comfortably high-contrast against
   these background colors.
   --------------------------------------------------------------- */

/* Logged in as OWNER - deep teal */
body.role-owner-logged-in .navbar-default {
    background-color: #0f6674;
    border-bottom-color: #c0392b;
}
body.role-owner-logged-in a {
    color: #0f6674;
}
body.role-owner-logged-in a:hover,
body.role-owner-logged-in a:focus {
    color: #0a4750;
}
body.role-owner-logged-in h2 {
    color: #0f6674;
}
body.role-owner-logged-in .btn-primary,
body.role-owner-logged-in .btn-primary:hover,
body.role-owner-logged-in .btn-primary:focus,
body.role-owner-logged-in .btn-primary:active,
body.role-owner-logged-in .btn-primary:visited {
    color: #ffffff !important;
    background-color: #0f6674;
    border-color: #0a4750;
}
body.role-owner-logged-in .btn-primary:hover,
body.role-owner-logged-in .btn-primary:focus,
body.role-owner-logged-in .btn-primary:active {
    background-color: #0a4750;
    border-color: #073338;
}

/* Logged in as GUEST - warm amber (echoes the logo's orange accent) */
body.role-guest-logged-in .navbar-default {
    background-color: #c0621b;
    border-bottom-color: #556b2f;
}
body.role-guest-logged-in a {
    color: #c0621b;
}
body.role-guest-logged-in a:hover,
body.role-guest-logged-in a:focus {
    color: #8f4813;
}
body.role-guest-logged-in h2 {
    color: #c0621b;
}
body.role-guest-logged-in .btn-primary,
body.role-guest-logged-in .btn-primary:hover,
body.role-guest-logged-in .btn-primary:focus,
body.role-guest-logged-in .btn-primary:active,
body.role-guest-logged-in .btn-primary:visited {
    color: #ffffff !important;
    background-color: #c0621b;
    border-color: #8f4813;
}
body.role-guest-logged-in .btn-primary:hover,
body.role-guest-logged-in .btn-primary:focus,
body.role-guest-logged-in .btn-primary:active {
    background-color: #8f4813;
    border-color: #6b360e;
}