/* SageScreen Frontend Styles - Structural/Layout Only */
/* Color overrides are defined below line 280 */

.sagescreen-frontend-wrapper {
    padding: 0;
    width: 100%;
    max-width: none !important; /* Override any theme constraints */
    overflow-x: hidden; /* Prevent horizontal scroll */
    box-sizing: border-box;
}

.sagescreen-frontend-wrapper .container {
    /* Removed max-width and centering for left-aligned content */
    padding: 20px;
    width: 100%;
    max-width: none !important; /* Override any theme constraints */
    margin: 0 !important; /* Remove any auto margins */
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Form Styles */
.council-create-field,
.council-edit-field,
.council-view-field {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    max-width: 500px;
    padding: 8px 12px;
    border: 1px solid var(--ss-color-border-light);
    border-radius: 4px;
    font-size: var(--ss-font-size-website);
}

.form-control:focus {
    outline: none;
    box-shadow: 0 0 0 1px currentColor;
}

/* Button Styles - Base Structure */
.button {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid;
    border-radius: 4px;
    text-decoration: none;
    font-size: var(--ss-font-size-website);
    cursor: pointer;
    transition: all 0.2s ease;
}

.button:hover {
    text-decoration: none;
}

/* Council Details */
.council-details h2 {
    margin-bottom: 20px;
}

.council-meta-table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.council-meta-table td {
    padding: 10px;
    border-bottom: 1px solid var(--ss-color-border-light);
    vertical-align: top;
}

.council-meta-table td:first-child {
    width: 200px;
    font-weight: bold;
}

.council-meta-table a {
    text-decoration: none;
}

.council-meta-table a:hover {
    text-decoration: underline;
}

/* Council Logo */
.council-logo {
    margin-top: 30px;
}

.council-logo h3 {
    margin-bottom: 10px;
}

.council-logo-image {
    max-width: 200px;
    height: auto;
    border: 1px solid var(--ss-color-border-light);
    border-radius: 4px;
}

/* Council Actions */
.council-actions {
    margin-top: 20px;
}

.council-actions .button {
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Council Items (for lists) */
.council-item {
    border: 1px solid var(--ss-color-border-light);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.council-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.council-item h3 a {
    text-decoration: none;
}

.council-item h3 a:hover {
    text-decoration: underline;
}

.council-item p {
    margin-bottom: 10px;
}

/* Create Council Section */
.create-council-section {
    border: 1px solid var(--ss-color-border-light);
    border-radius: 4px;
    padding: 20px;
    margin-top: 30px;
    text-align: center;
}

.create-council-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

/* Homepage Styles */
.council-homepage {
    text-align: center;
    padding: 40px 0;
}

.council-homepage h1 {
    margin-bottom: 30px;
    font-size: 2.5em;
}

.council-homepage .council-actions {
    justify-content: center;
}

/* Message Styles */
.error {
    color: var(--ss-notify-error-color);
    background: var(--ss-notify-error-bg);
    border: 1px solid var(--ss-notify-error-border);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 15px 0;
}

.success {
    color: var(--ss-notify-success-color);
    background: var(--ss-notify-success-bg);
    border: 1px solid var(--ss-notify-success-border);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 15px 0;
}

.sagescreen-error {
    color: var(--ss-notify-error-color);
    background: var(--ss-notify-error-bg);
    border: 1px solid var(--ss-notify-error-border);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 15px 0;
    text-align: center;
}

/* Form Field Wrappers */
.council-create-field label,
.council-edit-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.council-create-field .desc,
.council-edit-field .desc {
    display: block;
    margin-top: 5px;
    font-size: var(--ss-font-size-meta);
    font-style: italic;
    opacity: var(--ss-meta-opacity);
}

/* Mobile Warning */
.mobile-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-warning.hidden {
    display: none;
}

.mobile-warning-content {
    background: var(--ss-color-bg);
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    max-width: 500px;
}

.mobile-warning-content h2 {
    margin: 0 0 20px 0;
    font-size: 24px;
}

.mobile-warning-content p {
    margin: 10px 0;
    font-size: 16px;
}

/* ============================================================================
   CUSTOM BRAND COLORS & TYPOGRAPHY - THESE OVERRIDE DEFAULTS ABOVE
   ============================================================================ */

/* -----------------------
   Text Selection
--------------------------*/
::selection {
    background: #c8e6c9; /* light green */
    color: #1b5e20; /* dark green text */
}

::-moz-selection {
    background: #c8e6c9; /* light green */
    color: #1b5e20; /* dark green text */
}

/* -----------------------
   Base Typography
--------------------------*/
body {
    font-family: var(--ss-font-body);
    font-weight: var(--ss-font-weight-body);
    font-size: var(--ss-font-size-website);
    line-height: var(--ss-line-height-website);
    color: var(--ss-color-text);
    background-color: var(--ss-color-bg-secondary);
}

/* -----------------------
   Headings
--------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ss-font-headings);
    font-weight: var(--ss-font-weight-heading);
    color: var(--ss-color-heading);
    margin-bottom: 0.6em;
}

h1 { font-size: var(--ss-font-size-h1); line-height: var(--ss-line-height-h1); }
h2 { font-size: var(--ss-font-size-h2); line-height: var(--ss-line-height-h2); }
h3 { font-size: var(--ss-font-size-h3); line-height: var(--ss-line-height-h3); }
h4 { font-size: var(--ss-font-size-h4); line-height: var(--ss-line-height-h4); }
h5 { font-size: var(--ss-font-size-h5); line-height: var(--ss-line-height-h5); }
h6 { font-size: var(--ss-font-size-h6); line-height: var(--ss-line-height-h6); }

/* -----------------------
   Links
--------------------------*/
a {
    color: var(--ss-color-form-accent);
    text-decoration: none;
}
a:hover,
a:focus {
    color: var(--ss-color-brand);
}

/* -----------------------
   Buttons
--------------------------*/
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link {
    font-family: var(--ss-font-buttons);
    font-weight: var(--ss-btn-font-weight);
    font-size: var(--ss-btn-font-size);
    line-height: 1em;
    padding: var(--ss-btn-padding);
    border-radius: var(--ss-btn-border-radius);
    border: none;
    color: var(--ss-btn-primary-color);
    background-color: var(--ss-btn-primary-bg);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--ss-btn-primary-hover-bg);
}

/* Secondary button */
.button-secondary,
.wp-block-button__link.is-style-outline {
    background-color: var(--ss-btn-secondary-bg);
    border: var(--ss-btn-secondary-border);
    color: var(--ss-btn-secondary-color);
}
.button-secondary:hover,
.wp-block-button__link.is-style-outline:hover {
    background-color: var(--ss-btn-secondary-hover-bg);
    color: var(--ss-btn-secondary-color);
}

/* Form button (orange) */
.btn-form,
.button-form {
    background-color: var(--ss-btn-form-bg);
    color: var(--ss-btn-form-color);
}
.btn-form:hover,
.button-form:hover {
    background-color: var(--ss-btn-form-hover-bg);
}

/* Form cancel link */
.form-cancel,
.btn-cancel {
    color: var(--ss-form-cancel-color);
    text-decoration: underline;
    font-weight: var(--ss-form-cancel-font-weight);
    font-size: var(--ss-form-cancel-font-size);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
.form-cancel:hover,
.btn-cancel:hover {
    background-color: var(--ss-form-cancel-hover-bg);
    color: var(--ss-form-cancel-hover-color);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
}

/* -----------------------
   Header / Footer
--------------------------*/
.site-header {
    background-color: var(--ss-color-alt-brand);
    color: var(--ss-color-bg-secondary);
}

.site-footer {
    border-top: 1px solid var(--ss-color-border-light);
    color: var(--ss-color-text-light);
    background-color: var(--ss-color-bg-subtle);
}

/* -----------------------
   Layout
--------------------------*/
.container {
    max-width: 1200px;
    width: 100%; /* allow 100% scaling */
    margin: 0 auto;
}
.container.narrow {
    max-width: 750px;
}

/* ============================================================================
   THEME OVERRIDE STYLES - Force SageScreen brand over GeneratePress
   ============================================================================ */

/* Hide GeneratePress footer on SageScreen routes */
body.sagescreen-route .site-footer,
body.sagescreen-route footer.site-footer,
body.sagescreen-route #colophon,
body.sagescreen-route .footer-widgets,
body.sagescreen-route .site-info,
body.sagescreen-route footer:not(.driver-popover-footer) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Exception: Driver.js popover footer must be visible */
body.sagescreen-route .driver-popover-footer,
body.sagescreen-route footer.driver-popover-footer {
    display: flex !important;
    height: auto !important;
}

/* Force SageScreen brand colors over GeneratePress defaults */
body.sagescreen-route {
    font-family: var(--ss-font-body) !important;
    font-size: var(--ss-font-size-website) !important;
    line-height: var(--ss-line-height-website) !important;
    color: var(--ss-color-text) !important;
    background-color: var(--ss-color-bg-secondary) !important;
}

body.sagescreen-route h1,
body.sagescreen-route h2,
body.sagescreen-route h3,
body.sagescreen-route h4,
body.sagescreen-route h5,
body.sagescreen-route h6 {
    font-family: var(--ss-font-headings) !important;
    font-weight: var(--ss-font-weight-heading) !important;
    color: var(--ss-color-heading) !important;
}

body.sagescreen-route a:not(.form-cancel-link):not(.help-button):not(.action-btn):not(.e-btn):not(.ss-email-prefs-continue-btn) {
    color: var(--ss-color-link) !important;
}

body.sagescreen-route a:not(.form-cancel-link):not(.help-button):not(.action-btn):not(.e-btn):not(.ss-email-prefs-continue-btn):hover,
body.sagescreen-route a:not(.form-cancel-link):not(.help-button):not(.action-btn):not(.e-btn):not(.ss-email-prefs-continue-btn):focus {
    color: var(--ss-color-brand-hover) !important;
}

/* Override for header dropdown menu items */
body.sagescreen-route .user-dropdown .dropdown-item {
    color: var(--ss-color-text) !important;
}

body.sagescreen-route .user-dropdown .dropdown-item:hover {
    color: var(--ss-color-heading) !important;
}

body.sagescreen-route button,
body.sagescreen-route input[type='button'],
body.sagescreen-route input[type='submit'],
body.sagescreen-route .wp-block-button__link {
    font-family: var(--ss-font-buttons) !important;
    font-weight: var(--ss-btn-font-weight) !important;
    font-size: var(--ss-btn-font-size) !important;
    padding: var(--ss-btn-padding) !important;
    border-radius: var(--ss-btn-border-radius) !important;
    color: var(--ss-btn-primary-color) !important;
    background-color: var(--ss-btn-primary-bg) !important;
}

body.sagescreen-route button:hover,
body.sagescreen-route input[type='button']:hover,
body.sagescreen-route input[type='submit']:hover,
body.sagescreen-route .wp-block-button__link:hover {
    background-color: var(--ss-btn-primary-hover-bg) !important;
}

/* Exclude temperature check buttons from green hover */
body.sagescreen-route .comfort-option:hover {
    background-color: inherit !important;
}

/* Exclude header user menu button, hamburger menu, temperature check buttons, and profile edit button from button styling */
body.sagescreen-route .user-menu-trigger,
body.sagescreen-route .e-tbar-menu-icon,
body.sagescreen-route .e-tbar-btn,
body.sagescreen-route .comfort-option,
body.sagescreen-route #edit-mode-toggle {
    font-family: inherit !important;
    font-weight: normal !important;
    font-size: inherit !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    color: inherit !important;
    background-color: transparent !important;
    border: none !important;
}

/* Temperature check buttons - keep minimal styling */
body.sagescreen-route .comfort-option {
    padding: 0.5rem !important;
    border-radius: 9999px !important;
}

/* Step card paragraph spacing */
.step-card p {
    padding-bottom: 0;
}

/* Skip testing modal - ensure hidden class works */
#skip-testing-modal.hidden {
    display: none !important;
}

body.sagescreen-route .user-menu-trigger:hover {
    background-color: var(--ss-color-bg-hover) !important;
}

/* Sidebar toggle button - clean custom icon with two states */
body.sagescreen-route .e-tbar-menu-icon,
body.sagescreen-route .e-toolbar .e-tbar-btn {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
    position: relative !important;
    margin-left: 0 !important;
    margin-right: 16px !important;
}

/* Hide the default hamburger icon */
body.sagescreen-route .e-tbar-menu-icon:before,
body.sagescreen-route .e-tbar-btn .tb-icons:before {
    content: '' !important;
    display: none !important;
}

/* Sidebar OPEN state - panel with left divider */
body.sagescreen-route .e-tbar-menu-icon.sidebar-open:after {
    content: '' !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url('/wp-content/plugins/sagescreen/assets/img/icons/sidebar.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.2s ease !important;
    margin-left: 18px !important;
}

/* Sidebar CLOSED state - panel icon with arrow pointing right */
body.sagescreen-route .e-tbar-menu-icon.sidebar-closed:after {
    content: '' !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url('/wp-content/plugins/sagescreen/assets/img/icons/sidebar_closed.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.2s ease !important;
    margin-left: 18px !important;
}

body.sagescreen-route .e-tbar-menu-icon:hover,
body.sagescreen-route .e-toolbar .e-tbar-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.sagescreen-route .e-tbar-menu-icon:active,
body.sagescreen-route .e-toolbar .e-tbar-btn:active {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.stat-card {
    /* No hover effect on cards per design tokens */
}


/* ============================================================================
   Syncfusion Grid Filter Dialog Button Styling Overrides (SageScreen)
   - Clear: plain text link
   - Filter: square orange brand button
   ============================================================================ */
.e-grid .e-filter-popup .e-footer-content .e-btn {
    border-radius: 6px;
    font-weight: var(--ss-font-weight-semibold);
}
.e-grid .e-filter-popup .e-footer-content .e-btn.e-flat { /* Clear */
    background: transparent !important;
    border: none !important;
    color: var(--ss-color-form-accent) !important;
    padding: 0 !important;
    height: auto;
    line-height: 1.2;
    text-decoration: underline;
}
.e-grid .e-filter-popup .e-footer-content .e-btn.e-primary { /* Filter */
    background-color: var(--ss-color-form-accent) !important;
    border-color: var(--ss-color-form-accent) !important;
    color: var(--ss-color-text-inverse) !important;
    padding: 8px 14px !important;
}

.onetap-container-toggle {
    display: none !important;
}

/* ==========================================================================
   Syncfusion Label Styling - reduce font-weight to 500
   ========================================================================== */
body.sagescreen-route .e-float-text,
body.sagescreen-route .e-label-top,
body.sagescreen-route .e-float-input label,
body.sagescreen-route .e-input-group label,
body.sagescreen-route .e-float-input.e-control-wrapper label {
    font-weight: 500 !important;
}

/* ==========================================================================
   Syncfusion Primary Button - use brand green (not orange)
   Orange is reserved for form submit buttons only
   ========================================================================== */
body.sagescreen-route .e-btn.e-primary:not(.e-flat):not([disabled]) {
    background-color: var(--ss-color-brand) !important;
    border-color: var(--ss-color-brand) !important;
    color: var(--ss-color-text-inverse) !important;
}

body.sagescreen-route .e-btn.e-primary:not(.e-flat):not([disabled]):hover,
body.sagescreen-route .e-btn.e-primary:not(.e-flat):not([disabled]):focus {
    background-color: var(--ss-color-brand-hover) !important;
    border-color: var(--ss-color-brand-hover) !important;
}

/* Form submit buttons - use orange */
body.sagescreen-route .form-actions .e-btn.e-primary:not(.e-flat):not([disabled]),
body.sagescreen-route .e-btn.e-primary.btn-form:not(.e-flat):not([disabled]) {
    background-color: var(--ss-btn-form-bg) !important;
    border-color: var(--ss-btn-form-bg) !important;
    color: var(--ss-btn-form-color) !important;
}

body.sagescreen-route .form-actions .e-btn.e-primary:not(.e-flat):not([disabled]):hover,
body.sagescreen-route .form-actions .e-btn.e-primary:not(.e-flat):not([disabled]):focus,
body.sagescreen-route .e-btn.e-primary.btn-form:not(.e-flat):not([disabled]):hover,
body.sagescreen-route .e-btn.e-primary.btn-form:not(.e-flat):not([disabled]):focus {
    background-color: var(--ss-btn-form-hover-bg) !important;
    border-color: var(--ss-btn-form-hover-bg) !important;
}

/* ==========================================================================
   Dashboard Specific Styles
   ========================================================================== */

/* Count badges in dashboard cards - white with light green border */
.dashboard-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 9999px;
    font-size: var(--ss-font-size-app);
    font-weight: var(--ss-font-weight-semibold);
    color: var(--ss-color-brand) !important;
    background-color: var(--ss-color-bg);
    border: 1px solid var(--ss-color-brand);
}

/* Dashboard links - use brand green instead of blue, bold */
.dashboard-link {
    color: var(--ss-color-link) !important;
    text-decoration: none !important;
    font-weight: var(--ss-font-weight-semibold) !important;
    transition: background-color 0.2s ease;
}

.dashboard-link:hover {
    background-color: var(--ss-color-link-hover);
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}

/* ==========================================================================
   reCAPTCHA Notice
   ========================================================================== */
.recaptcha-notice {
    margin-top: 16px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    line-height: 1.5;
}

.recaptcha-notice a {
    color: #6b7280 !important;
    text-decoration: underline;
}

.recaptcha-notice a:hover {
    color: #374151 !important;
}

/* Hide reCAPTCHA badge - we show the required notice in forms instead */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}