/******************
    Material Design 3 Custom CSS for Bootswatch Theme
    --------------------------------------------------
    Google Material Design 3 implementation with:
    - Ubuntu font
    - Cohesive M3 color scheme
    - Card design with shadows
    - Gradient ribbons
    - Full-featured chips with shadows and icons
    - Rounded corners
    - Material navbar with spacing
*/

/* ============================================
   GOOGLE FONTS - Ubuntu + Material Icons
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ============================================
   MATERIAL DESIGN 3 COHESIVE COLOR SCHEME
   ============================================ */
:root {
    /* Primary - Deep Teal */
    --md-primary: #00695c;
    --md-primary-container: #b2dfdb;
    --md-on-primary: #ffffff;
    --md-on-primary-container: #002019;

    /* Secondary - Warm Amber */
    --md-secondary: #ff8f00;
    --md-secondary-container: #ffe082;
    --md-on-secondary: #ffffff;
    --md-on-secondary-container: #2b1700;

    /* Tertiary - Deep Purple Accent */
    --md-tertiary: #7c4dff;
    --md-tertiary-container: #e8ddff;

    /* Neutral Surface */
    --md-surface: #ffffff;
    --md-surface-dim: #f8f9fa;
    --md-surface-container: #f1f3f4;
    --md-surface-container-high: #e8eaed;
    --md-surface-container-highest: #dadce0;

    /* Text colors */
    --md-on-surface: #1f1f1f;
    --md-on-surface-variant: #5f6368;

    /* Outline */
    --md-outline: #80868b;
    --md-outline-variant: #dadce0;

    /* Error */
    --md-error: #d32f2f;
    --md-error-container: #ffcdd2;

    /* Success */
    --md-success: #2e7d32;
    --md-success-container: #c8e6c9;

    /* Shadows - M3 Elevation */
    --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
    --md-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3);

    /* Chip shadow */
    --md-chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);

    /* Gradients */
    --md-gradient-primary: linear-gradient(135deg, var(--md-primary) 0%, #00897b 100%);
    /* --md-gradient-ribbon: Moved to custom_header.twig - now shares navbar gradient config */
    --md-gradient-warm: linear-gradient(135deg, var(--md-secondary) 0%, #ffb300 100%);

    /* Spacing & Radius */
    --md-radius-xs: 4px;
    --md-radius-sm: 8px;
    --md-radius-md: 12px;
    --md-radius-lg: 16px;
    --md-radius-xl: 24px;
    --md-radius-full: 9999px;

    /* Navbar spacing */
    --md-navbar-body-gap: 85px;

    /* Admin configurable - fallbacks (JS will override) */
    --md-navbar-bg: var(--md-surface);
    --md-ribbon-start: var(--md-primary);
    --md-ribbon-end: var(--md-tertiary);
    --md-button-primary: var(--md-primary);
    --md-button-hover: #004d40;
    --md-warning: #e65100;
}

/* ============================================
   GLOBAL TYPOGRAPHY
   ============================================ */
body,
html,
.navbar,
.btn,
input,
textarea,
select,
.form-control {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body {
    background: var(--md-surface-container);
    color: var(--md-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--md-navbar-body-gap) !important;
}

p {
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.aufmacher {
    color: #000000;
    padding: 20px;
}

/* ============================================
   MATERIAL NAVBAR - Elevated with Gap
   ============================================ */
.navbar,
.navbar-default,
.navbar-fixed-top,
.navbar.fixed-top,
html body .navbar.navbar-default.navbar-fixed-top,
html body .navbar.navbar-default.fixed-top {
    background-image: var(--md-gradient-navbar) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: var(--md-elevation-3) !important;
    padding: 12px 24px;
    min-height: 64px;
    position: fixed !important;
}

/* QR Code Chip in Navbar - Integrated within navbar structure */
.qr-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 5px;
    background: #a5a7a7;
    border: 1px solid #ffffff;
    border-radius: 8px;
    height: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.qr-chip-img {
    display: block;
    height: 48px !important;
    width: auto !important;
}

/* Add left padding to container-fluid to make room for QR chip and text */
#survey-nav .container-fluid {
    padding-left: 85px !important;
}

/* QR Share Text - mailto link next to QR chip */
.qr-share-text {
    position: absolute;
    left: 85px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #ffffff !important;
    text-decoration: none;
    white-space: nowrap;
    z-index: 10;
}

.qr-share-text:hover {
    color: #e0e0e0 !important;
    text-decoration: none;
}

/* Hide navbar brand text - keep only logo */
.navbar-brand {
    font-size: 0 !important;
    color: transparent !important;
    padding: 8px 16px;
}

.navbar-brand img,
.logo-container>img {
    max-height: 44px;
    padding: 0;
}

.logo-container {
    padding: 8px 0;
}

/* Navbar links as chips */
.navbar-nav>li>a {
    color: var(--md-on-surface) !important;
    font-weight: 500;
    padding: 10px 20px;
    margin: 4px 8px;
    border-radius: var(--md-radius-full);
    background: var(--md-surface-container);
    box-shadow: var(--md-chip-shadow);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus {
    background: var(--md-primary-container) !important;
    color: var(--md-on-primary-container) !important;
    box-shadow: var(--md-elevation-1);
}

.navbar-nav>li.active>a {
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
}

/* ============================================
   MAIN CONTENT CARD CONTAINER
   ============================================ */
#outerframeContainer,
.outer-wrapper,
#surveycontainer,
.survey-container {
    background: var(--md-surface);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-1);
    margin: 24px auto;
    padding: 0;
    overflow: hidden;
    /*
    margin-top:4px !important;
    */
    max-width: var(--md-container-width);

}

/* Top content container */
.top-container {
    background: var(--md-surface);
    background: #bebebe !important;
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-1);
    margin: 24px auto 24px;
    overflow: hidden;
    max-width: var(--md-container-width);
}

.top-container .top-content {
    padding: 12px 32px;
}

/* ============================================
   QUESTION CARDS
   ============================================ */
.question-container {
    background: var(--md-surface);
    border: none !important;
    border-radius: var(--md-radius-lg) !important;
    box-shadow: var(--md-elevation-1);
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* Question title with gradient ribbon */
.question-title-container {
    background: var(--md-gradient-ribbon) !important;
    color: var(--md-on-primary);
    padding: 20px 28px 16px;
    border-bottom: none;
}

.question-title-container .question-text,
.question-title-container h4,
.question-title-container h5 {
    color: var(--md-on-primary) !important;
    margin: 0;
    font-weight: 500;

}

/* Answer container */
.answer-container {
    border: none !important;
    padding: 24px 28px;
    background: var(--md-surface);
}

.answer-container,
.question-help-container {
    border-color: transparent !important;
}

/* ============================================
   CARD INNER CONTENT PARAGRAPH MARGINS
   ============================================ */
/* Paragraph spacing inside cards */
.question-container p,
.answer-container p,
.group-description p,
.question-help-container p,
.top-content p,
.modal-body p,
#outerframeContainer p,
.survey-container p {
    margin: 16px 0;
    line-height: 1.6;
}

/* First and last paragraph adjustments */
.question-container p:first-child,
.answer-container p:first-child,
.top-content p:first-child,
.modal-body p:first-child {
    margin-top: 0;
}

.question-container p:last-child,
.answer-container p:last-child,
.top-content p:last-child,
.modal-body p:last-child {
    margin-bottom: 0;
}

/* Card content padding enhancement */
.question-text-container,
.question-text,
.group-description {
    padding: 20px 28px;
}

/* Inner content margin from card edges */
.question-container .answer-container,
.question-container .question-text-container {
    margin: 8px 0;
}

/* ============================================
   GRADIENT RIBBONS
   ============================================ */
/* Progress bar ribbon */
.progress,
.top-container .progress {
    background: var(--md-surface-container-high);
    border-radius: var(--md-radius-full);
    height: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    margin: 10px 0;
    width: 100%;
}

.progress-bar {
    background: var(--md-gradient-ribbon) !important;
    border-radius: var(--md-radius-full);
    transition: width 0.4s ease;
}

/* Group title ribbon */
.group-title-container {
    background: var(--md-gradient-primary);
    color: var(--md-on-primary);
    padding: 20px 28px;
    margin: 0;
    border-radius: 0;
}

.group-title-container .group-title,
.group-title-container h2,
.group-title-container h3 {
    color: var(--md-on-primary) !important;
    margin: 0;
    font-weight: 600;
}

/* ============================================
   FULL-FEATURED MATERIAL CHIPS
   ============================================ */
/* Base chip styles */
.md-chip,
.nav-pills>li>a,
.btn-group-sm>.btn,
.language-changer select,
.form-change-lang select,
.dropdown-menu>li>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-full) !important;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-on-surface);
    box-shadow: var(--md-chip-shadow);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Chip hover state */
.nav-pills>li>a:hover,
.btn-group-sm>.btn:hover,
.dropdown-menu>li>a:hover {
    background: var(--md-surface-container-high);
    border-color: var(--md-primary);
    box-shadow: var(--md-elevation-1);
    transform: translateY(-1px);
}

/* Active chip */
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
    background: var(--md-primary) !important;
    border-color: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
    box-shadow: var(--md-elevation-2);
}

/* Chip with icon - add before pseudo for icon */
.nav-pills>li>a::before {
    font-family: 'Material Icons';
    font-size: 18px;
    margin-right: 4px;
}

/* Question navigation chips */
#question_index_menu .dropdown-toggle {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    border: none;
    border-radius: var(--md-radius-full);
    padding: 10px 20px;
    box-shadow: var(--md-chip-shadow);
    font-weight: 500;
}

#question_index_menu .dropdown-toggle::before {
    content: '\e5d2';
    /* menu icon */
    font-family: 'Material Icons';
    margin-right: 8px;
}

/* Answer option chips */
.radio-list li,
.checkbox-list li {
    display: inline-block;
    margin: 6px;
}

.radio-list li label,
.checkbox-list li label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    margin: 0;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-full);
    cursor: pointer;
    box-shadow: var(--md-chip-shadow);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 400;
}

.radio-list li label:hover,
.checkbox-list li label:hover {
    background: var(--md-surface-container-high);
    border-color: var(--md-primary);
    box-shadow: var(--md-elevation-1);
}

/* Selected chip state */
.radio-list li input:checked+label,
.checkbox-list li input:checked+label,
.radio-list li label.selected,
.checkbox-list li label.selected {
    background: var(--md-primary-container);
    border-color: var(--md-primary);
    color: var(--md-on-primary-container);
    box-shadow: var(--md-elevation-2);
}

/* ============================================
   NAVIGATION BUTTONS WITH MARGINS
   ============================================ */
#navigator-container {
    padding: 24px 28px;
    background: var(--md-surface-dim);
    border-top: 1px solid var(--md-outline-variant);
}

#navigator-container .btn,
.action-buttons .btn {
    margin: 8px 12px;
    border-radius: var(--md-radius-full) !important;
    padding: 14px 32px;
    font-weight: 500;
    box-shadow: var(--md-elevation-1);
    transition: all 0.2s ease;
}

/* Primary action button (Next/Submit) */
.btn-primary,
.btn-success,
#ls-button-submit,
[id*="movenext"] {
    background: var(--md-button-primary) !important;
    border: none !important;
    color: var(--md-on-primary) !important;
}

.btn-primary:hover,
.btn-success:hover,
#ls-button-submit:hover,
[id*="movenext"]:hover {
    background: var(--md-button-hover) !important;
    box-shadow: var(--md-elevation-2);
}

/* Secondary action button (Previous) */
.btn-default,
.btn-secondary,
[id*="moveprev"] {
    background: var(--md-surface) !important;
    border: 2px solid var(--md-button-primary) !important;
    color: var(--md-button-primary) !important;
}

.btn-default:hover,
.btn-secondary:hover,
[id*="moveprev"]:hover {
    background: var(--md-primary-container) !important;
    box-shadow: var(--md-elevation-1);
}

/* ============================================
   FORM CONTROLS
   ============================================ */
.form-control {
    border-radius: var(--md-radius-md) !important;
    border: 2px solid var(--md-outline-variant);
    padding: 14px 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--md-surface);
}

.form-control:focus {
    box-shadow: none !important;
    border-width: 1px !important;
    border-color: #bebebe;
    border-style: dashed;
    /*
    border-color: var(--md-primary);
    box-shadow: 0 0 0 4px rgba(0, 105, 92, 0.15);
    outline: none;
    */

}

/* Dropdown selects */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* ============================================
   TABLES - Material Style
   ============================================ */
.table,
.ls-answers {
    border-radius: var(--md-radius-md);
    overflow: hidden;
    border: 1px solid var(--md-outline-variant);
}

.table>thead>tr>th {
    background: var(--md-surface-container-high);
    border-bottom: 2px solid var(--md-outline-variant);
    color: var(--md-on-surface);
    font-weight: 600;
    padding: 16px 20px;
}

.table>tbody>tr>td {
    padding: 14px 20px;
    border-color: var(--md-outline-variant);
}

.table-striped>tbody>tr:nth-of-type(odd),
.ls-even {
    background-color: var(--md-surface-dim);
}

/* ============================================
   ALERTS & MESSAGES
   ============================================ */
.alert {
    border: none;
    border-radius: var(--md-radius-md);
    padding: 18px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert::before {
    font-family: 'Material Icons';
    font-size: 24px;
    flex-shrink: 0;
}

.alert-success {
    background: var(--md-success-container);
    color: var(--md-success);
}

.alert-success::before {
    content: '\e86c';
    /* check_circle */
}

.alert-info {
    background: var(--md-primary-container);
    color: var(--md-primary);
}

.alert-info::before {
    content: '\e88e';
    /* info */
}

.alert-warning {
    background: var(--md-secondary-container);
    color: #e65100;
}

.alert-warning::before {
    content: '\e002';
    /* warning */
}

.alert-danger {
    background: var(--md-error-container);
    color: var(--md-error);
}

.alert-danger::before {
    content: '\e000';
    /* error */
}

/* ============================================
   MODAL DIALOGS
   ============================================ */
.modal-content {
    border: none;
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-4);
    overflow: hidden;
}

.modal-header {
    background: var(--md-surface-container);
    border-bottom: 1px solid var(--md-outline-variant);
    padding: 24px 28px;
}

.modal-body {
    padding: 28px;
}

.modal-footer {
    background: var(--md-surface-dim);
    border-top: 1px solid var(--md-outline-variant);
    padding: 20px 28px;
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
    border: none;
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-3);
    padding: 8px 0;
    margin-top: 8px;
}

.dropdown-menu>li>a {
    padding: 12px 20px;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: var(--md-surface-container);
    transform: none;
}

/* ============================================
   QUESTION VALIDATION
   ============================================ */
.question-valid-container {
    /*
    padding: 16px 28px;
    */
    background: var(--md-surface-dim);
    border-radius: 0 0 var(--md-radius-lg) var(--md-radius-lg);
}

/* ============================================
   SURVEY LIST PAGE
   ============================================ */
.surveys-list li {
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-1);
    margin-bottom: 16px;
    padding: 20px 24px;
}

#surveys-list-jumbotron {
    background: var(--md-surface);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-2);
    padding: 48px;
}

/* ============================================
   LANGUAGE CHANGER CHIP
   ============================================ */
.form-change-lang select,
.language-changer select {
    background: var(--md-tertiary-container);
    color: var(--md-tertiary);
    border: none;
    padding: 10px 36px 10px 16px;
    font-weight: 500;
    cursor: pointer;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
.question-text .ls-label-question {
    font-size: 130% !important;
}

#main-col {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 4% !important;
    margin-bottom: 4% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #main-col {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 4% !important;
        margin-bottom: 4% !important;
        padding-left: 1% !important;
        padding-right: 1% !important;
        box-sizing: border-box;
    }

    body {
        padding-top: 80px !important;
        margin: 0px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;

    }

    /* Hide QR share text on mobile devices */
    .qr-share-text {
        display: none !important;
    }

    .question-container,
    #surveycontainer,
    .top-container,
    #outerframeContainer {
        border-radius: var(--md-radius-md);
        margin-top: 0px !important;
        margin-bottom: 16px;
        margin-left: auto !important;
        margin-right: auto !important;
        width: calc(100% - 16px);
        max-width: 100%;
    }



    #navigator-container .btn {
        margin: 6px 8px;
        padding: 12px 24px;
    }

    .radio-list li,
    .checkbox-list li {
        display: block;
        margin: 8px 0;
    }

    .radio-list li label,
    .checkbox-list li label {
        width: 100%;
        justify-content: flex-start;
    }

    .question-text .ls-label-question {
        font-size: 100% !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    .question-container,
    #surveycontainer,
    .top-container {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================
   PRESERVE FUNCTIONALITY
   ============================================ */
/* containerwidthpercent functionality preserved via responsive-width.js */
/* Upload modals preserved with material styling applied */
/* All form functionality preserved */

/* ============================================
    CUSTOM MARGIN FOR INPUTS
    ============================================ */
.answer-container input.form-control,
.answer-container textarea.form-control,
.answer-container select.form-control,
.answer-container .form-control {
    /*
    margin-left: 20px !important;
    width: calc(100% - 20px) !important;
    */
}

.question-count-text {
    margin: left 20px !important;
    padding-left: 20px !important;
}

.top-container.space-col {
    padding-top: 0px !important;
    margin-top: 0px !important;

}

.ls-answers {
    border: 0px;
}

#main-row {}

#navigator-container {

    border-radius: var(--md-radius-lg) !important;
    border-color: transparent !important;
}
.pklar .uklar{
    color:#000000 !important;
    font-size:xx-large !important;
}
/* customization - remove hyphenation */
#outerframeContainer { hyphens: none; word-wrap: none; }
* { -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none;}