.dataTables_wrapper .row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem; /* Add some space below the controls */
}

/* Ensure the right-aligned controls stay together */
.dataTables_wrapper .col-md-6:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
} 

/* Add margin to the right of the buttons container */
.dataTables_wrapper .dt-buttons {
    margin-right: 1rem; 
} 
/* A custom card class for drivers */
.driver-card {
    border: 1px solid #000000;
    border-radius: 0.25rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Card header */
.driver-card-header {
    background-color: #49799a;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #17a2b8;
    flex-shrink: 0;
}

/* Card body */
.driver-card-body {
    background-color: #e8f0f8;
    color: #212529;
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.driver-card-body .badge {
    width: fit-content;
    align-self: flex-start;
}

/* Card footer */
.driver-card-footer {
    background-color: #f3f7fb;
    border-top: 0;
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-height: 60px;
    flex-shrink: 0;
    margin-top: auto;
}

.driver-card-footer .btn {
    display: flex;
    align-items: center;
    height: auto;
    min-width: 80px;
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
}

/* Ensure consistent card heights in Bootstrap grid */
.row .col {
    display: flex;
}

.row .col .card {
    width: 100%;
}

/* Responsive adjustments for smaller cards */
@media (max-width: 1400px) {
    .driver-card-footer {
        flex-direction: column;
        gap: 0.4rem;
        align-items: center;
    }
    
    .driver-card-footer .btn {
        width: 100%;
        min-width: unset;
        flex: none;
    }
}

.drivers-back-btn {
    width: 30%;
    text-align: left;
    margin-top: 1rem;
}

.drivers-back-btn a {
    width: 50%;
}

@media (max-width:576px) {
    .drivers-back-btn {
        width: 100%;
        text-align: center;
        /* margin-top: 1rem; */
    }
}
h1 {
    padding-top: 10px;
}

.today-page {
    max-width: 100%;
    margin: auto;
}

.today-page .today-form {
    max-width: 100%;
    margin-bottom: 20px;
}

.today-page .form-group {
    margin-bottom: 10px;
}

.today-page .form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.today-page .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.today-page .button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.today-page .button-group .btn {
    display: flex;
    align-items: center; /* Center vertically */
    min-height: 41px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.today-page .btn-primary {
    background-color: #007bff;
    color: white;
}

.today-page .btn-secondary {
    background-color: #6c757d;
    color: white;
}

.today-page #btn-print {
    margin-left: auto;
}

.shift-button {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* PC */
.today-page .rides-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
    table-layout: auto;
    overflow-x: auto;
}

.today-page .rides-table thead {
    position: sticky;
    top: 0;
    background-color: #f4f4f4;
    z-index: 10;
}

.today-page .rides-table th,
.today-page .rides-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.today-page .rides-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.today-page .rides-list {
    display: none;
}

.today-page .no-rides {
    color: red;
    font-weight: bold;
}

/* mobile */
@media (max-width:576px) {
    .today-page .rides-table {
        display: none;
    }
    
    .today-page .rides-list {
        display: block;
    }

    .today-page .ride-block {
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .today-page .ride-block p {
        margin: 5px 0;
    }

    .btn-shift {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 70%;
    }

    .btn-shift .btn {
        margin-bottom: 10px;
    }
}

/* Print styles */
@media print {
    /* Hide all navigation and buttons */
    nav,
    .navbar,
    .custom-header,
    .custom-footer,
    footer,
    .flash-container,
    .pagination,
    .alert,
    .button-group,
    .btn,
    .shift-button,
    #btn-print,
    .btn-shift {
        display: none !important;
    }

    .today-page {
        max-width: 100%;
    }

    .today-page .rides-table th,
    .today-page .rides-table td {
        border: 1px solid black;
        padding: 5px;
    }

    .today-page .no-rides {
        color: black;
        font-weight: bold;
    }

    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    /* Default: hide table, will re-enable on PC */
    .today-page .rides-table {
        display: none !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    /* PC-specific: show rides table */
    @media (min-width: 576px) {
        .today-page .rides-table {
            display: table !important;
            width: 100%;
            border: 1px solid black;
            font-size: 12px;
        }

        .today-page .rides-list {
            display: none !important;
        }
    }

    /* Mobile-specific: show rides list */
    @media (max-width: 575.98px) {
        .today-page .rides-table {
            display: none !important;
        }

        .today-page .rides-list {
            display: block !important;
        }
    }
}
/* app/assets/stylesheets/shifts.css */

/* style for three buttons */
.calendar-nav-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 1rem 0;
}

/* style for the calendar */
.calendar-body {
    overflow-x: auto;
    width: 100%;
}

.calendar-body table {
    width: 100%;
    border-collapse: collapse;
}

.calendar-body th {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
}

.calendar-body td {
    border: 1px solid #ddd;
    padding: 10px;
    vertical-align: top;
}

.calendar-body .day {
    height: 100px;
}

.calendar-body .today {
    background-color: #ffffcc;
}

.calendar-body .prev-month,
.calendar-body .next-month {
    background-color: #f9f9f9;
    color: #ccc;
}

/* /shifts/id */
/* /_shift.html.erb */
.van-col {
    display: inline-block;
    width: 30%;
}

/* /feedbacks/id/edit */
.ride-feedback-btn {
    width: 50%;
}

/* /shifts/id/feedback */
.shift-feedback-btn {
    width: 50%;
    white-space: nowrap;
    text-align: center;
}

/* /shifts */
.calendar-back-btn {
    width: 30%;
    text-align: left;
}

.calendar-back-btn a {
    width: 50%;
}

@media (max-width:576px) {

    /* /feedbacks/id/edit */
    .ride-feedback-btn {
        width: 80%;
    }

    /* /shifts/id/feedback */
    .shift-feedback-btn {
        width: 80%;
    }

    /* /shifts */
    .calendar-nav-buttons {
        justify-content: center;
    }

    .calendar-body th,
    .calendar-body td {
        /* Adjust the width of the table cells for smaller screens */
        min-width: 115px;
    }
    
    .calendar-back-btn {
        width: 100%;
        text-align: center;
        margin-top: 1rem;
    }

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
@import "datatables_custom";

/* app/assets/stylesheets/application.css */

/* ========== Global Common Styles (PC + Mobile) ========== */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.flash-container {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: auto;
  max-width: 90%;
  pointer-events: none;
}

.flash-container .alert {
  pointer-events: auto;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-wrapper {
  flex: 1;
}

.custom-header,
.custom-footer {
  background-color: #003e29;
  color: white;
}

.app-logo {
  height: 60px;
  border-radius: 8px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.app-logo.white {
  filter: brightness(0) invert(1);
}

.app-logo.white:hover {
  filter: none;
}

.navbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo {
  flex: 0 0 auto;
}

.navbar-links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.navbar-links a {
  font-weight: 650;
  font-size: 1.5rem;
  color: white;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
}

.navbar-links a:hover,
.navbar-links a.active {
  color: #cab2fb;
  border-bottom-color: #f8f8f8;
}

.navbar-user {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* ========== Mobile-specific Styles (All devices with width < 576px) ========== */
@media (max-width: 576px) {

  .navbar-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-logo {
    margin-bottom: 0.5rem;
  }

  .navbar-links {
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .navbar-links a {
    font-size: 1.2rem;
    flex: 1 1 auto;
    min-width: 80px;
    text-align: center;
  }

  .navbar-user {
    margin-top: 0.5rem;
    justify-content: flex-start;
  }
}