/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    margin-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Responsive Text Classes */
.text-responsive {
    font-size: clamp(0.75rem, 2.5vw, 1rem);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.display-4.text-responsive {
    font-size: clamp(1.5rem, 4vw, 3rem);
    line-height: 1.2;
    font-weight: 700;
}

.card-title.text-responsive {
    font-size: clamp(1.25rem, 3.5vw, 2.5rem);
    line-height: 1.3;
    font-weight: 600;
}

/* Dashboard Card Improvements */
.dashboard-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-card .card-title {
    margin-bottom: 0.5rem;
    word-break: break-word;
}

.dashboard-card .card-text {
    margin-bottom: 0;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
}

/* Mobile Responsiveness Improvements */
@media screen and (max-width: 767px) {
    /* Mobile-specific body content adjustments */
    .body-content {
        margin-top: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Mobile form improvements */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="select"],
    select,
    textarea {
        max-width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Mobile table improvements */
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .table-responsive .table {
        margin-bottom: 0;
    }
    
    /* Mobile button improvements */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Mobile card improvements */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Mobile navigation improvements */
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Mobile grid improvements */
    .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Mobile text improvements */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    
    /* Mobile dashboard card improvements */
    .dashboard-card .card-title {
        font-size: clamp(1rem, 3vw, 1.5rem);
    }
    
    .dashboard-card .display-4 {
        font-size: clamp(1.25rem, 4vw, 2rem);
    }
    
    .dashboard-card .card-text {
        font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    }
    
    /* Dashboard card text improvements - prevent wrapping and enable dynamic sizing */
    .dashboard-card .card-header span,
    .dashboard-card .card-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(0.75rem, 2vw, 1rem);
    }
    
    .dashboard-card .card-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }
    
    .dashboard-card .card-header i {
        font-size: clamp(1rem, 3vw, 2rem);
    }
    
    /* Mobile alert improvements */
    .alert {
        margin-bottom: 1rem;
    }
    
    /* Mobile modal improvements */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    /* Mobile spacing improvements */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Mobile footer improvements */
    .contact-info .col-md-4 {
        margin-bottom: 1rem;
    }
    
    /* Mobile sticky positioning */
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 1020;
    }
    
    /* Mobile form validation improvements */
    .text-danger {
        font-size: 0.875rem;
    }
    
    /* Mobile dropdown improvements */
    .dropdown-menu {
        font-size: 0.9rem;
    }
    
    /* Mobile pagination improvements */
    .pagination {
        justify-content: center;
    }
    
    .pagination .page-link {
        padding: 0.375rem 0.75rem;
    }
    
    /* Mobile badge improvements */
    .badge {
        font-size: 0.75rem;
    }
    
    /* Mobile list group improvements */
    .list-group-item {
        padding: 0.75rem 1rem;
    }
    
    /* Mobile progress bar improvements */
    .progress {
        height: 1.5rem;
    }
    
    /* Mobile tooltip improvements */
    .tooltip {
        font-size: 0.875rem;
    }
    
    /* Mobile popover improvements */
    .popover {
        font-size: 0.875rem;
    }
    
    /* Mobile breadcrumb improvements */
    .breadcrumb {
        font-size: 0.875rem;
    }
    
    /* Mobile jumbotron improvements */
    .jumbotron {
        padding: 1rem;
    }
    
    /* Mobile well improvements */
    .well {
        padding: 1rem;
    }
    
    /* Mobile panel improvements */
    .panel {
        margin-bottom: 1rem;
    }
    
    .panel-body {
        padding: 1rem;
    }
    
    /* Mobile thumbnail improvements */
    .thumbnail {
        padding: 0.5rem;
    }
    
    /* Mobile label improvements */
    .label {
        font-size: 0.75rem;
    }
    
    /* Mobile glyphicon improvements */
    .glyphicon {
        font-size: 0.875rem;
    }
    
    /* Mobile input group improvements */
    .input-group-addon {
        font-size: 0.875rem;
    }
    
    /* Mobile navbar improvements */
    .navbar-toggle {
        padding: 0.5rem 0.75rem;
    }
    
    /* Mobile dropdown improvements */
    .dropdown-toggle {
        padding: 0.5rem 1rem;
    }
    
    /* Mobile tab improvements */
    .nav-tabs > li > a {
        padding: 0.5rem 0.75rem;
    }
    
    /* Mobile pill improvements */
    .nav-pills > li > a {
        padding: 0.5rem 0.75rem;
    }
    
    /* Mobile list improvements */
    .list-inline > li {
        padding-right: 0.5rem;
    }
    
    /* Mobile dl improvements */
    .dl-horizontal dt {
        float: none;
        clear: both;
        text-align: left;
        font-weight: bold;
        margin-bottom: 0.25rem;
    }
    
    .dl-horizontal dd {
        margin-left: 0;
        margin-bottom: 1rem;
    }
    
    /* Mobile form group improvements */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Mobile help block improvements */
    .help-block {
        font-size: 0.875rem;
    }
    
    /* Mobile control label improvements */
    .control-label {
        font-size: 0.9rem;
        font-weight: bold;
    }
    
    /* Mobile checkbox and radio improvements */
    .checkbox,
    .radio {
        margin-bottom: 0.5rem;
    }
    
    /* Mobile input improvements */
    .input-sm {
        height: 2.25rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Mobile select improvements */
    .select-sm {
        height: 2.25rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Mobile textarea improvements */
    .textarea-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Mobile file input improvements */
    .file-input {
        font-size: 0.875rem;
    }
    
    /* Mobile range input improvements */
    .range-input {
        width: 100%;
    }
    
    /* Mobile color input improvements */
    .color-input {
        width: 100%;
        height: 2.5rem;
    }
    
    /* Mobile date input improvements */
    .date-input {
        width: 100%;
    }
    
    /* Mobile time input improvements */
    .time-input {
        width: 100%;
    }
    
    /* Mobile datetime input improvements */
    .datetime-input {
        width: 100%;
    }
    
    /* Mobile month input improvements */
    .month-input {
        width: 100%;
    }
    
    /* Mobile week input improvements */
    .week-input {
        width: 100%;
    }
    
    /* Mobile number input improvements */
    .number-input {
        width: 100%;
    }
    
    /* Mobile search input improvements */
    .search-input {
        width: 100%;
    }
    
    /* Mobile tel input improvements */
    .tel-input {
        width: 100%;
    }
    
    /* Mobile url input improvements */
    .url-input {
        width: 100%;
    }
    
    /* Mobile email input improvements */
    .email-input {
        width: 100%;
    }
    
    /* Mobile password input improvements */
    .password-input {
        width: 100%;
    }
    
    /* Mobile hidden input improvements */
    .hidden-input {
        display: none;
    }
    
    /* Mobile readonly input improvements */
    .readonly-input {
        background-color: #f8f9fa;
        opacity: 0.65;
    }
    
    /* Mobile disabled input improvements */
    .disabled-input {
        background-color: #e9ecef;
        opacity: 0.65;
        cursor: not-allowed;
    }
    
    /* Mobile required input improvements */
    .required-input {
        border-left: 3px solid #dc3545;
    }
    
    /* Mobile valid input improvements */
    .valid-input {
        border-left: 3px solid #28a745;
    }
    
    /* Mobile invalid input improvements */
    .invalid-input {
        border-left: 3px solid #dc3545;
    }
    
    /* Mobile focus input improvements */
    .focus-input {
        border-color: #2994AE;
        box-shadow: 0 0 0 0.25rem rgba(41, 148, 174, 0.25);
    }
    
    /* Mobile hover input improvements */
    .hover-input {
        border-color: #2994AE;
    }
    
    /* Mobile active input improvements */
    .active-input {
        border-color: #2994AE;
        box-shadow: 0 0 0 0.25rem rgba(41, 148, 174, 0.25);
    }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
    
    /* Tablet and desktop improvements */
    .table-responsive {
        font-size: 1rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }
    
    /* Desktop dashboard card text improvements */
    .dashboard-card .card-header span,
    .dashboard-card .card-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(0.875rem, 1.5vw, 1.1rem);
    }
    
    .dashboard-card .card-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(2rem, 3vw, 3rem);
    }
    
    .dashboard-card .card-header i {
        font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    }
}

/* Large screens and up */
@media screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    .card-body {
        padding: 1.5rem;
    }
}

/* Extra large screens and up */
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .btn,
    .alert,
    .modal,
    .dropdown-menu,
    .tooltip,
    .popover {
        display: none !important;
    }
    
    .body-content {
        margin: 0;
        padding: 0;
    }
    
    .card {
        border: 1px solid #000;
        margin-bottom: 1rem;
    }
    
    .table {
        border-collapse: collapse;
    }
    
    .table th,
    .table td {
        border: 1px solid #000;
        padding: 0.5rem;
    }
}