/* This code uses media queries to adjust the layout for smaller screens. */
/* When the screen width is 768 pixels or less, make the flex-boxes take the full screen-width */


/* Redefine the content pane for the user dashboards to have smaller margins */
.content-pane {
    margin: 10px 10px;
}

/* The whole page dashboard box is a flex container holding sub-dashboards */
/* Make it wrap as it goes across the page, put space between the flex-items and have margins all round but not exceed the page width */
.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    align-content: space-around; /* for multi-line flex containers */
    width: 100%;
}

/* Container to hold the Title plus Back and Logout buttons (titleleft and titleright) so the buttons are above the title and use the full width on smaller screens but on bigger screens, appear either side of the title */
.link-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%; /* Ensures full width */
}

/* Overrides the IPSACstyles.css entry to make this a flex box in order to cater for the extra-to-dashboard-pages Back and Logout buttons which appear to left and right on a bigger screen (they are above the title on smaller screens) */

.title {
    flex: 1 1 60%;
    text-align: center;
    max-width: 60%;
    order: -2;
}

.titleleft {
    flex: 1 1 10%;
    text-align: left;
    max-width: 20%;
    order: -3;

}
.titleright {
    flex: 1 1 20%;
    text-align: right;
    max-width: 20%;
    order: -1;
}

/* Form style overrides for Member area */
form {
    max-width: 100%;
    background-color: #ffffff;
}


/* For select drop down boxes, give them a border and make them a reasonable height and width */
select {
    border: 1px solid #439538;
    border-radius: 4px;
/*    background-color: #70bd66; */
    font-size: 1em;
    color: #003399;
    height:1.5em;
    max-width: 100%;
}

/* On the dashboard, buttons will just be icons (16x16 pictures) so don't use a background colour */

.dash-button {
    max-width: 100px;
    padding: 0.5em 0.5em;
    background-color: #ffffff; /* white */
    color: #439538; /* text colour */
    border: 0.3px solid #439538;    /* Plesiosaur green */
    border-radius: 4px;
    cursor: pointer;
}

/* Text takes up 90% of horizontal space*/
.dash-text {
    max-width: 90%; /* Ensure the text does not overflow */
    overflow-wrap: break-word; /* Break long words to fit within the container*/
    white-space: normal;
}

/* The data should fill the rest of the flex-container and be aligned to the left so that it is next to the labels */
.data-value {
    min-width: 10%;
    max-width: 90%;
    text-align: left;
    vertical-align: middle;
    margin: 0 0 0 2px;
    padding: 5px;
    overflow-wrap: break-word;
    white-space: normal;
/*    word-break: break-all; /* Break words at any point */
    border: 0.5px solid #439538;
    border-radius: 5px;
}

/* But for checkbox data items, don't make them huge! */
.data-chkbox {
    width: 10%;
/*    height: 1em; */
    font-family: Helvetica, sans serif;
    vertical-align: middle;
    margin: 0 0 0 2px;
    padding: 5px;
}

/* Make an output-only checkbox a little more obvious (not so grey) */
.data-chkbox:disabled {
    cursor: not-allowed;
    filter: brightness(60%) contrast(800%);
/*    opacity: 0.9;
    accent-color: #444; /* Darker tick and box */
}

/* Sub-dashboard general settings */

.dashEvents, .dashMyDetails, .dashContact, .dashMyGallery, .dashMyProjects {
    flex: 1 1 calc(50% - 20px); /* allow for margins */
    max-width: calc(50% - 20px); /* allow for margins */
    max-height:80vh;
    overflow: auto; /* Only show scrollbars when required */
    background-color: #f1f1f1;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(67, 149, 56, 0.5);
    margin: 10px; /* Add margin around flex-item to create space between */
    padding:0 10px; /* Add padding at sides internally */
}

/* Sub-dashboard: Event schedule - full page width */
.dashEvents {
/*    justify-content: space-between; /* Space out the items */
}


/* Sub-dashboard: My Details - needs to be a Grid layout so the labels stay in line with the values, when either of them wrap on smaller screens */
/* fr means fractional unit so auto 1fr means labels have as much space as required and the values take up 1 fraction of the remaining space */
.dashMyDetails {
    display: grid;
    grid-template-columns: 2fr 4fr;
/*    height:80vh; */
}

/* Let the grid box title span across both columns */
.dashMyDetails-span, .dashMyGallery-span {
    grid-column: span 2; /* Make the title span both columns */
}

/* The field labels are defined as block elements in the main CSS so they take up the full width of the grid column. Make them right adjusted so they are next to the data. Add padding so there is a space between the label box and the value box */
.dashMyDetails .data-label {
    font-weight: bold;
    text-align: right;
    padding: 4px;
/*    overflow-wrap: break-word; */
    white-space: normal; /* Allow text to wrap */
/*    border: 0.5px solid #439538; */
    border-radius: 5px;
}

/* Sub-dashboard: Contact options and Announcements - don't need much width */
.dashContact {
/*    height: 65vh; */
}


/* Sub-dashboard: My albums */
.dashMyGallery {
/*    height: 80vh; */
}

/* Sub-dashboard: My projects */
.dashMyProjects {
    max-width: 100%;
/*    height: 60vh; */
}


/* Only used for event_booking due to the grid which overflows... MaintGridWrapper is used, but not defined. Get rid of both */
.GridWrapper {
    max-height: 80vh;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    border: 0.5px solid #439538;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(67, 149, 56, 0.5);
    padding:0; /* No padding internally */
}


/* Set up a grid in a flex-box to hold the details on the Maintenance screens */
/* Cannot have overflow: hidden as it breaks the layout (all left text is chopped off) and the sticky header no longer works */
/*    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
.MaintGrid, .MaintGrid5, .MaintGrid_role, .MaintGrid_ppl, .MaintGrid_std {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
    grid-gap: 2px; /* spacing between items */
    background-color: #439538;
    max-width: 100%;
/*    overflow: auto; /* Only show scrollbars when required*/ 
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(67, 149, 56, 0.5);
    margin: 10px; /* Add margin around grid-item to create space between */
    padding:10px 10px; /* Add padding at sides internally */
    border: 0.5px solid #439538;
    color: beige;
}


/* Define the style for the header - make it sticky and allow enough space at the top so the header stays below the page title/burger bar */
.MaintGridHeader {
  position: sticky;
  top: 30px;
  background-color: #439538;
  z-index: 1;
  padding: 5px;
  font-weight: bold;
  border-bottom: 0.5px solid #439538;
  border-right: 0.5px solid beige;
}


.MaintGrid5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
}

/* Standard grid - 7 equal columns */
.MaintGrid_std {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* Club role maintenance table */
.MaintGrid_role {
    grid-template-columns: 1fr 2fr 2fr 2fr;
}

/* User and Member maintenance table - and Last Login report */
.MaintGrid_ppl {
    grid-template-columns: 2fr 2fr 1fr 1fr 2fr 2fr 3fr;
}

.MaintGrid_evnt, .MaintGrid_evntshort {
    display: grid;
    grid-template-columns: 1fr 1fr 3fr 2fr 1fr 2fr 3fr;
    grid-gap: 1px; /* spacing between items is slimmer */
    background-color: #439538;
    width: auto;
    margin: 0; /* Add margin around grid-item to create space between */
    padding: 0 10px 10px 10px; /* Add padding but not top */
    color: beige;
}

.MaintGrid_evntshort {
    grid-template-columns: 1fr 1fr 3fr;
}

/* For the Dashboard event list, remove formatting from the links */
.MaintGrid_evntshort a:link, .MaintGrid_evntshort a:visited, .MaintGrid_evntshort a:active {
    font-size: 1em;
    font-family: "Helvetica";
    color: #003399;
    font-weight:normal;
    line-height: 14pt;
    text-decoration: none;
}

/* Create a full row span from 1st to last column */
/*.MaintGrid .fullwidth, .MaintGrid_role .fullwidth, .MaintGrid_ppl .fullwidth, .MaintGrid_std .fullwidth { */
.fullwidth {
    grid-column: 1 / -1; /* Make the title span the whole width */
}

/* Let the grid box title span 2 columns */
.MaintGrid .span2, .MaintGrid_role .span2, .MaintGrid_ppl .span2, .MaintGrid_std .span2 {
grid-column: span 2;
}

/* Ensure the background colour for the data row is white */
/* Cannot have overflow: hidden as it breaks the layout (all left text is chopped off) and the sticky header no longer works */
.MaintGrid .gridRow, .MaintGrid5 .gridRow, .MaintGrid_role .gridRow, .MaintGrid_ppl .gridRow, .MaintGrid_std .gridRow, .MaintGrid_evntshort .gridRow {
    background-color: #fff;
    color: #003399;
    text-align: left;
/*    overflow: hidden; /* Hide any overflowing content */
/*    text-overflow: ellipsis; /* Adds '...' for truncated text */
    white-space: normal; /* nowrap - Prevent wrapping of text */
    padding: 5px; /* Add padding for better spacing */
    border-bottom: 0.5px solid #439538;
}

/* Do not change background colour or have bottom border for event booking grid rows (for dash and public events (MaintGrid_evntshort), treat as normal (see above) */
.MaintGrid_evnt .gridRow, .MaintGrid_evnt .gridRowcanc {
    color: #003399;
    text-align: left;
/*    overflow: hidden; /* Hide any overflowing content */
    white-space: normal; /* nowrap - Prevent wrapping of text */
    padding: 5px; /* Add padding for better spacing */
}

.MaintGrid_evnt .gridRowcanc {
    color: black;
}

.MaintGrid .gridRowfull, .MaintGrid_std .gridRowfull, .MaintGrid_role .gridRowfull, .MaintGrid_evnt .gridRowfull {
    grid-column: 1 / -1; /* Make the title span the whole width */
    background-color: #fff;
    color: #003399;
    text-align: left;
    padding: 5px;
    white-space: normal; /* nowrap - Prevent wrapping of text */
}

.MaintGrid_evnt .gridRowfull {
    display: grid;
}

/********.MaintGrid > div, .MaintGrid5 > div {
    background-color: #fff;
    text-align: left;
    padding: 5px;
/*    min-width: 75px; /* prevents narrow columns */ 
/*    overflow: hidden; /* Hide any overflowing content */
/*    text-overflow: ellipsis; /* Add '...' for truncated text */
/*****    white-space: normal; /* nowrap - Prevent wrapping of text */
/*****    padding: 5px; /* Add padding for better spacing */
/*****    border-bottom: 0.5px solid #439538;
/*****} */



/* START of Event classes */
/* A flex-box with flex-items sequenced vertically to hold a list of events */
.eventlist {
    display: flex;
    max-width: 100%;
    flex-direction: column;
}
/* A flex-box inside the list of events to hold a single event */
.eventitem, .eventitemhdr, .eventitemnob, .eventitemhdrnob {
    display: flex;
    align-items: center;
    padding: 5px; /* space at top and bottom of event row */
    border-bottom: 0.5px solid #439538;
}

.eventitemnob, .eventitemhdrnob {
    border-bottom: 0;
}

/* When displaying the event table, need the header to have a different background colour and set the font weight to bold */

.eventitemhdr, .eventitemhdrnob {
/*    position: sticky;
    top: 25px;
    z-index: 50; */
    font-weight: bold;
    color: #ffffff;
    background-color: #003399;
/*    display:block; */
}

/* Another flex-box inside the single event to hold ddd, DD and MMM */
.eventdate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70px;
    font-size: 1.0em;
}
/* A section inside the ddd/DD/MMM box to hold the day - med+ text */
.eventDDD {
    font-size: 1.0em;
}
/* A section inside the ddd/DD/MMM box to hold the DD - big text */
.eventDD {
    font-weight: bold;
    font-size: 1.3em;
}
/* A section inside the ddd/DD/MMM box to hold the MMM - med text */
.eventMMM {
    font-size: 1.0em;
}
/* Another flex-box (so second column) inside the single event to hold event type icons or other narrow content which needs to wrap not expand */
.eventdetails, .eventdtl, .eventdtlctr {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
/*    width: 70px; */
    font-size: 1.0em;
}

.eventdtlctr {
    justify-content: center;
}



/* A section inside the time/locn/title box to hold the time - med- text*/
.eventtime {
    font-size: 1.2em;
    font-weight: bold;
/*    padding: 0 10px; */

}
/* Another flex-box inside the time/locn/title box to hold the title and locn - normal text*/
.eventinfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* A section inside the title/locn box to hold the locn - small text*/
.eventlocn {
    font-size: 0.7em;
    color: #555;
}
/* A section inside the time/title/locn box to hold the title - bold text*/
.eventtitle {
    font-size: 1.0em;
    font-weight: bold;
    color: #439538;
    width: 270px;
    overflow-wrap: break-word;
    white-space: normal;
    padding-right: 10px;
}

.eventhighlight {
    background-color: #f828ff !important;
    transition: background-color 3s ease;
}

/* Styles for the event legend (row colours) */
.evtcanc {
    background-color: #E30022;
}
.evtconf {
    background-color: #3FFF00;
    
}
.evtprov {
    background-color: #FFCC33;
}
.evtresv {
    background-color: #FFFF66;
}
.evtskip {
    background-color: #66FFFF;
}
.evtclsd {
    background-color: #d3d3d3;
}
/* END OF Event classes

/* START OF Event Summary classes */

/* The overall container for the table of data - no borders */
.xtable, .xtablenob {
    display: flex;
    max-width: 100%;
    flex-direction: row;
}

/* The overall container for the table of data - with borders */
.xtable {
    flex-direction: column;
    border: 0.3px solid #439538;
}

/* The row for each line of data - no borders*/
.xrow, .xrownob, .xrowbot {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around; /* for multi-line flex containers */
    width: 100%;
    padding: 5px; /* space at top and bottom of event row */
}

/* The row for each line of data - with borders*/
.xrow {
    border: 0.3px solid #439538;
}

/* The row to separate each line of data - wider bottom border and left adjust content */
.xrowbot {
    border-bottom: 2px solid #439538;
    align-content: space-around; /* for multi-line flex containers */
}

/* The column for each column of data in each row */
.xcol {
    display: flex;
    flex: 1;
    align-content: space-around; /* for multi-line flex containers */
}

/* Each item in the row or column */
.xitem {
    flex: 1 1 30%;
    text-align: center;
    max-width: 100%;
    padding: 7px;
}

/* END OF Event Summary classes */


/* START of banner style */

.banner {
/*    position: relative; */
/*    top:-20vh; */
/*    left: -10vw; */
    width: 100%; 
    background-color: #FFFF00;
    color: #003399;
    text-align: center;
/*    padding: 0 95px 0 40px; */
    font-size: 16px;
    font-weight: bold;
/*    transform: rotate(-25deg); */
    z-index: 10;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}

/* END of banner style */


/* END of main CSS

/*----------------------------------------------------------------------------*/

/* Make the page responsive using Media Queries */
/* Amazon Fire HD8 is 800x1280. iPhoneSE is 320x568px */
@media screen and (max-width: 768px) {

/* Redefine the content pane for the user dashboards on smaller screens to have no margin */
.content-pane {
    margin: 0;
}


/* Changing the flex-direction from row to column on smaller screens means that items in the original row are likely to expand to take up the full row width  */
.dashboard-container {
    flex-direction: column;
/*    align-items: center; */
    padding: 5px;
}

/* link-container needed for Title plus Back and Logout links as switching the dashboard-container to direction column means the elements stack rather than align across the page - this makes the buttons appear on one line */
.link-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-wrap: wrap;
}

/* Overrides the IPSACstyles.css entry and the above big-screen entry (which makes it a flex box. This style makes the title full width (the Back and Logout buttons are underneath the title on smaller screens) */

.link-container .title {
    flex: 0 0 100%;
    max-width: 100%;
    order: -1;
}

.titleleft {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: left;
    order: -3;
}

.titleright {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: right;
    order: -2;
}


/* banner for smaller screens */
.banner {
/*        top: -2vh; 
        left: -15vw; 
        width: 85vw; */
        font-size: 12px;
        padding: 2px;
/*        transform: rotate(0deg); */
}


form {
    width: 100%;
    margin: 0;
}


/* Sub-dashboards: Contact options, My albums and Event schedule*/
.dashContact, .dashMyDetails, .dashMyGallery, .dashEvents, .dashMyProjects {
    flex: 1 1 100%; /* Flex items to take full width each */
    max-width: 100%;
    max-height: 70vw;
    overflow: auto; /* Only show scrollbars when required */
    margin: 5px;
}

/* Make the My Details grid box smaller on smaller screens */
.dashMyDetails {
    grid-template-columns: 1fr;
    padding:5px; /* Add padding internally */
}

/* For smaller screens, prevent the grid box title from spanning across both columns */
.dashMyDetails-span {
    grid-column: span 1; /* Make the title span the only column available */
}

.data-value {
    width:100%;
}

/* START of event calendar tweaks for small screens */

/* A flex-box with flex-items sequenced horizontally to hold a list of events */
.eventlist {
    display: flex;
    max-width: 100%;
    flex-direction: column;
}

.eventitem {
    flex-direction: row;
    align-items: flex-start;
}

.eventdate {
    max-width: 50px;
    margin-bottom: 10px;
}

.eventtype {
    width: auto;
    margin-bottom: 10px;
}

.eventtime {
    padding: 0;
}
.eventdetails {
    margin-left: 20px;
}
.eventtitle {
    width: auto;
}

.view-button {
    font-size: 0.9em;
}

/* END of event calendar tweaks for small screens */


/* START OF MaintGrid classes for smaller screens */

.MaintGrid {
    grid-template-columns: 2fr 1fr auto;
}

.MaintGrid5 {
    grid-template-columns: 1fr auto;
}

.MaintGrid_std {
    grid-template-columns: 2fr 2fr;
}
.MaintGrid_role {
    grid-template-columns: 2fr 2fr;
}

.MaintGrid_ppl {
    grid-template-columns: 2fr 2fr; /* 2 columns */
}


.MaintGrid .fullwidth, .MaintGrid_role .fullwidth, .MaintGrid_ppl .fullwidth, .MaintGrid_std .fullwidth, .MaintGrid_evnt .fullwidth {
    padding: 10px;
}

/* #col3, #col4, #col5, #col6, #col7 {
    display: none;
  }
*/

/* END OF MaintGrid Summary classes for smaller screens */

}
/* End of media query for smaller screens */



/* Start of media query for timeline on v small screens */
/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {

/* Show only columns 1 and 7 (name, available and buttons) */
.MaintGrid {
    grid-template-columns: 1fr auto;
}

#.MaintGrid5 {
    grid-template-columns: 1fr auto;
}

/* #col2, #col3, #col4, #col5, #col6, #col7 {
    display: none;
  }
*/
    
}
/* End of media query for v small screens */