/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
    font-family: 'Calligraffiti';
    src: url('../../fonts/Calligraffiti-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arimo';
    src: url('../../fonts/Arimo-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arimo';
    src: url('../../fonts/Arimo-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* ==========================================================================
   Global Reusable Menu Buttons
   ========================================================================== */
body,
input,
button,
select,
textarea {
    font-family: 'Arimo', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #3B3B3B;
    line-height: 1.6;
}

.menu-button {
    display: block; /* FIXED: Swapped inline-block to block so it fills the portal-dashboard columns perfectly on desktop */
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 15px; /* Restores exact legacy padding metric */
    
    /* Typography Parameters */
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    color: #ffffff !important;
    
    /* Structural Framing Visual Details */
    border: 1px solid #eb8d00; /* Signature orange boundary highlight */
    border-radius: 6px;       /* Smooth rounded edge layout constraints */
    background-color: #182659; /* Core navy base paint */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Smooth transition instead of builder lag */
}

/* Hover Interactivity Focus State Layouts */
.menu-button:hover {
    background-color: #ffffff !important;
    color: #eb8d00 !important; /* Swaps text to signature orange on mouse hover */
}

/* Active Click Down State Layout Parameters */
.menu-button:active {
    background-color: #e6e6e6 !important;
    color: #333333 !important; /* Dark charcoal text color on active mouse click down */
}

.menu-button.disabled-btn {
    background-color: #3b4875 !important; /* Muted, slightly grayed-out navy tone */
    color: #a4b0cb !important;            /* Dull slate gray text color instead of bright white */
    border-color: #555555 !important;      /* Drops the signature orange highlight for a dull border */
    cursor: not-allowed;                  /* Shows the circle-slash error icon when hovered */
    opacity: 0.65;                        /* Fades the button look to indicate a locked state */
    pointer-events: none;                 /* Completely blocks hover animations and click actions */
}

/* Fallback protection to ensure hover states never activate on locked elements */
.menu-button.disabled-btn:hover,
.menu-button.disabled-btn:active {
    background-color: #3b4875 !important;
    color: #a4b0cb !important;
    border-color: #555555 !important;
}

/* ==========================================================================
   Generic Layout Container for Standalone Content Pages
   ========================================================================== */

/* Forces a full-width vertical stack with zero gaps across all devices */
.layout-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stretches buttons to full width and completely removes gaps */
.layout-container .menu-button {
    display: block;
    width: 100% !important;
    max-width: none !important; /* Unlocks any restricted widths from old code */
    margin: 0 !important;       /* Eliminates the gap between stacked buttons */
    box-sizing: border-box;
    text-align: center;
    border-radius: 0;           /* Gives flat edges so stacked items look seamless */
}

/* Structural cleanup for responsive viewports */
@media (max-width: 767px) {
    /* Removes any structural page padding that creates margins/gaps on mobile */
    body, .layout-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Destroys any legacy mobile max-width limits on the buttons */
    .layout-container .menu-button {
        width: 100% !important;
        max-width: none !important; /* Overrides any old 320px constraints */
        margin: 0 !important;       /* Pinches any vertical or top spacing shut */
        display: block !important;
    }
}

/* ==========================================================================
   Shared Content Container (Tables, Forms, Entry Pages & Yearbooks)
   ========================================================================== */
.page-container {
    width: 100%;
    max-width: 1200px; /* Remove this line if you prefer full-width tables on desktop */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .page-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.disabled-btn {
    pointer-events: none; /* Prevents clicking */
    cursor: default;      /* Removes the hand pointer */
    opacity: 0.6;         /* Visual fade */
    filter: grayscale(1); /* Optional: makes it look grey */
}

.data-form{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin:0 auto ;
}

.form-group {
    display: flex;
    justify-content: space-between; /* Pushes labels and inputs to opposite ends */
    align-items: center; /* Vertically centers items within the row */
    margin-bottom: 5px; /* Spacing between rows */
}

.form-group label {
    flex-basis: 40%; /* Gives label 40% of the row width */
    padding-right: 10px; /* Space between label and input */
    text-align: left
}

.form-group input{
    flex-basis: 60%; /* Gives input box 60% of the row width */
    padding: 8px;
    box-sizing: border-box; /* Ensures padding doesn't add to width */
    width: 100%;
}

.form-group select {
    flex-basis: 60%; /* Gives input box 60% of the row width */
    padding: 8px;
    box-sizing: border-box; /* Ensures padding doesn't add to width */
    width: 100%;
}
.form-group-add {
    display: flex;
    justify-content: space-between; /* Pushes labels and inputs to opposite ends */
    align-items: center; /* Vertically centers items within the row */
    margin-bottom: 5px; /* Spacing between rows */
}

.form-group-add label {
    flex-basis: 40%; /* Gives label 40% of the row width */
    padding-right: 10px; /* Space between label and input */
    text-align: left
}
.form-group-add select{
    flex-basis: 50%; /* Gives input box 50% of the row width */
    padding: 8px;
    box-sizing: border-box; /* Ensures padding doesn't add to width */
    width: 100%;
}
.form-group-add button{
    cursor: pointer;
    border: 1px solid #fff0;
    padding: 7px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 0;
    flex-basis: 10%; /* Gives input box 10% of the row width */
    box-sizing: border-box; /* Ensures padding doesn't add to width */
    width: 100%;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.form-group-checkbox {
  display: flex;             
  justify-content: space-between; 
  align-items: center;
  width: 100%;               
  max-width: 500px;       
  gap: 10px;
  cursor: pointer;
  margin-bottom: 10px;  
}

/* Hide default checkbox */
.form-group-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* The Custom Box */
.checkmark {
  flex-shrink: 0; 
  position: relative;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Background Color when Checked */
.form-group-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
  border-color: #2196F3;
}

/* The Checkmark (The White Tick) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  
  /* Create the tick shape */
  left: 9px;      /* Center horizontally */
  top: 5px;       /* Center vertically */
  width: 5px;     /* Width of the short side of L */
  height: 10px;    /* Length of the long side of L */
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Show checkmark on checked */
.form-group-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Hover effect */
.form-group-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

.btn-table-action {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4
}

.btn-table-action:focus,
.btn-table-action.focus {
    color: #fff;
    background-color: #286090;
    border-color: #122b40
}

.btn-table-action:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74
}

.btn-table-action:active,
.btn-table-action.active,
.open>.dropdown-toggle.btn-table-action {
    color: #fff;
    background-color: #286090;
    background-image: none;
    border-color: #204d74
}

.btn-table-action:active:hover,
.btn-table-action.active:hover,
.open>.dropdown-toggle.btn-table-action:hover,
.btn-table-action:active:focus,
.btn-table-action.active:focus,
.open>.dropdown-toggle.btn-table-action:focus,
.btn-table-action:active.focus,
.btn-table-action.active.focus,
.open>.dropdown-toggle.btn-table-action.focus {
    color: #fff;
    background-color: #204d74;
    border-color: #122b40
}

.btn-table-action.disabled:hover,
.btn-table-action[disabled]:hover,
fieldset[disabled] .btn-table-action:hover,
.btn-table-action.disabled:focus,
.btn-table-action[disabled]:focus,
fieldset[disabled] .btn-table-action:focus,
.btn-table-action.disabled.focus,
.btn-table-action[disabled].focus,
fieldset[disabled] .btn-table-action.focus {
    background-color: #337ab7;
    border-color: #2e6da4
}

.btn-table-action .badge {
    color: #337ab7;
    background-color: #fff
}

/* ==========================================================================
   Debug Verification Interface
   ========================================================================== */

/* Debugging Panel Container Box Parameters */
#hidden_data_block {
    display: none; /* Controlled dynamically via PHP $debug context state */
    box-sizing: border-box;
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    background-color: #fffde7;   /* Soft yellow verification backdrop tone */
    border: 2px dashed #ff9800;  /* High-visibility amber boundary line styling */
    border-radius: 4px;
}

/* Operational Debug Heading Notice Layout */
#hidden_data_block p {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #e65100;              /* Deep warning orange tint parameter */
    margin-top: 0;
    margin-bottom: 15px;
}

/* Explicit Readonly State Overrides for Debug Variables */
#hidden_data_block .form-group input[readonly] {
    background-color: #f5f5f5 !important; /* Locks out input interaction modifications visually */
    border: 1px solid #cccccc;
    color: #555555;
    cursor: not-allowed;
}

#hidden_data_block .form-group label {
    font-weight: bold;
    color: #333333;
}