/* ============================================ */
/* MB5000 Modern Design System                 */
/* Colors: white, #003277, #4478af, #3752a5    */
/* Font: Work Sans                             */
/* ============================================ */

/* ============================================ */
/* 0. GLOBAL FONT - Work Sans                  */
/* ============================================ */

*, *::before, *::after {
    font-family: 'Work Sans', sans-serif !important;
}

body, .mud-typography, .mud-input, .mud-button, .mud-table, .mud-datagrid {
    font-family: 'Work Sans', sans-serif !important;
}

:root {
    --mud-typography-body1-size: 0.75rem !important;
}

/* ============================================ */
/* 1. GLOBAL INPUT SIZING - Smaller inputs     */
/* ============================================ */
 
/* Make all outlined inputs smaller */
.mud-input-outlined .mud-input-slot {
    padding: 4px 10px !important;
    font-size: 0.82rem !important;
    min-height: 28px !important;
}

.mud-input-outlined.mud-input-adorned-end .mud-input-slot {
    padding-right: 8px !important;
}

.mud-input-outlined.mud-input-adorned-start .mud-input-slot {
    padding-left: 8px !important;
}

/* Dense inputs even smaller */
.mud-input-control-margin-dense .mud-input-outlined .mud-input-slot {
    padding: 0px 0px 0px 5px !important;
    font-size: 0.75rem !important;
    min-height: 12px !important;
}

/* Reduce input control margins */
.mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.75rem !important;
}

.mud-input-control.mud-input-control-margin-dense {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Smaller labels */
.mud-input-label {
    font-size: 0.8rem !important;
}

.mud-input-label.mud-shrink {
    font-size: 0.75rem !important;
}

/* Hide numeric spinners */
.mud-input-control input[type="number"]::-webkit-inner-spin-button,
.mud-input-control input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mud-input-control input[type="number"] {
    -moz-appearance: textfield;
}

/* ============================================ */
/* 2. GLOBAL TABLE / DATAGRID SIZING           */
/* ============================================ */

/* All tables more compact */
.mud-table .mud-table-cell {
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
}

.mud-table .mud-table-head .mud-table-cell {
    padding: 8px 10px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
}

/* Dense tables even tighter - VB6-style compact rows */
.mud-table-dense .mud-table-cell {
    padding: 1px 6px !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    height: 20px !important;
}

.mud-table-dense .mud-table-head .mud-table-cell {
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    height: 22px !important;
}

.mud-table-dense .mud-table-row {
    height: 20px !important;
}

/* Dense toolbar compact */
.mud-table-dense .mud-toolbar {
    min-height: 32px !important;
    padding: 0 8px !important;
}

.mud-table-dense .mud-toolbar .mud-typography,
.mud-table-dense .mud-toolbar .mud-typography-h6,
.mud-table-dense .mud-toolbar .mud-typography-subtitle2 {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
}

/* Dense icon buttons */
.mud-table-dense .mud-icon-button {
    padding: 2px !important;
}

.mud-table-dense .mud-icon-button .mud-icon-root {
    font-size: 15px !important;
}

/* Dense cell-edit inputs */
.mud-table-dense .mud-input-outlined .mud-input-slot {
    padding: 1px 4px !important;
    font-size: 0.74rem !important;
    min-height: 20px !important;
    height: 20px !important;
}

.mud-table-dense .mud-input-control {
    margin: 0 !important;
    padding: 0 !important;
}

.mud-table-dense .mud-input-outlined fieldset {
    border-radius: 2px !important;
}

/* Softer table lines */
.mud-table .mud-table-row {
    border-bottom: 1px solid var(--mud-palette-table-lines) !important;
}

/* Subtle hover */
.mud-table .mud-table-row:hover {
    background-color: rgba(0, 50, 119, 0.04) !important;
}

/* Striped rows */
.mud-table-striped .mud-table-row:nth-child(even) {
    background-color: rgba(0, 50, 119, 0.02) !important;
}

/* remove the footer */
.mud-table-foot {
    display: none !important;
}

/* ============================================ */
/* 3. GLOBAL BUTTON SIZING                     */
/* ============================================ */

/* Default buttons slightly smaller � excludes login page */
:not(.login-form-panel) > .mud-button-root,
:not(.login-form-panel) .mud-button-root {
    font-size: 0.7rem !important; 
    padding: 0 6px !important;
    min-width: 0 !important;
}

/* Size classes */
.btn-xs {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    min-height: 24px !important;
    height: 24px !important;
}

.btn-sm {
    padding: 5px 12px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: 28px !important;
}

.btn-md {
    padding: 6px 16px !important;
    font-size: 0.82rem !important;
    min-height: 34px !important;
    height: 34px !important;
}

.btn-lg {
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
    min-height: 40px !important;
    height: 40px !important;
}

.btn-icon-sm {
    padding: 4px !important;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
}

.btn-icon-md {
    padding: 6px !important;
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
}


/* ============================================ */
/* 5. NAVIGATION - Remove underlines, clean    */
/* ============================================ */

/* Remove underlines from nav links */
.nav-menu-clean .mud-nav-link {
    text-decoration: none !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.nav-menu-clean .mud-nav-link:hover {
    text-decoration: none !important;
    background-color: rgba(0, 50, 119, 0.06) !important;
}

.nav-menu-clean .mud-nav-link.active {
    text-decoration: none !important;
    background-color: rgba(0, 50, 119, 0.1) !important;
    color: #003277 !important;
    font-weight: 600 !important;
}

/* Dark mode nav active */
.mud-theme-dark .nav-menu-clean .mud-nav-link:hover {
    background-color: rgba(68, 120, 175, 0.12) !important;
}

.mud-theme-dark .nav-menu-clean .mud-nav-link.active {
    background-color: rgba(68, 120, 175, 0.2) !important;
    color: #4478af !important;
}

/* Remove any default link underlines in drawers */
.mud-drawer a,
.mud-nav-link,
.mud-navmenu a {
    text-decoration: none !important;
}

/* ============================================ */
/* 6. TAB STYLING - Smooth and modern          */
/* ============================================ */

.mud-tabs {
    border-bottom: 2px solid var(--mud-palette-lines-default) !important;
}

.mud-tab {
    text-transform: none !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    padding: 8px 16px !important;
    min-height: 40px !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.2s ease !important;
}

.mud-tab:hover {
    background-color: rgba(0, 50, 119, 0.04) !important;
}

.mud-tab.mud-tab-active {
    font-weight: 700 !important;
    color: #003277 !important;
}

.mud-theme-dark .mud-tab.mud-tab-active {
    color: #4478af !important;
}

/* Tab indicator */
.mud-tabs-toolbar .mud-tab-slider {
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
    background: linear-gradient(90deg, #003277, #4478af) !important;
}

/* ============================================ */
/* 7. HEADER / APP BAR                         */
/* ============================================ */

.mud-appbar {
    background: linear-gradient(135deg, #003277 0%, #3752a5 100%) !important;
    box-shadow: 0 2px 12px rgba(0, 50, 119, 0.25) !important;
}

/* Header inputs */
.mud-appbar .mud-input-control {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px;
}

.mud-appbar .mud-input-outlined fieldset {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.mud-appbar .mud-input-outlined:hover fieldset {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.mud-appbar .mud-input-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

.mud-appbar .mud-input-label.mud-shrink {
    color: rgba(255, 255, 255, 0.9) !important;
}

.mud-appbar .mud-input-slot,
.mud-appbar .mud-input-slot input,
.mud-appbar .mud-select-input {
    color: white !important;
}

.mud-appbar .mud-icon-button {
    color: rgba(255, 255, 255, 0.9) !important;
}

.mud-appbar .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.mud-appbar .mud-typography {
    color: white !important;
} 

/* ============================================ */
/* 8. CARD / PAPER STYLING                     */
/* ============================================ */

.mud-paper {
    border-radius: 12px !important;
}

.mud-card {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 4px rgba(0, 50, 119, 0.06) !important;
    transition: box-shadow 0.2s ease;
}

.mud-card:hover {
    box-shadow: 0 4px 16px rgba(0, 50, 119, 0.1) !important;
}

/* ============================================ */
/* 9. ALERT STYLING                            */
/* ============================================ */

.mud-alert {
    border-radius: 10px !important;
    font-size: 0.82rem !important;
}

/* ============================================ */
/* 10. CHIP STYLING                            */
/* ============================================ */

.mud-chip {
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    height: 28px !important;
}

/* Chips inside dense data grid rows */
.mud-table-dense .mud-chip {
    height: 14px !important;
    font-size: 0.6rem !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
    line-height: 14px !important;
}

/* ============================================ */
/* 11. CHECKBOX / SWITCH                       */
/* ============================================ */

.mud-checkbox .mud-typography {
    font-size: 0.60rem !important;
}

.mud-switch .mud-typography {
    font-size: 0.60rem !important;
}

/* ============================================ */
/* 12. TOOLTIP                                 */
/* ============================================ */

.mud-tooltip {
    font-size: 0.75rem !important;
    border-radius: 6px !important;
}

/* ============================================ */
/* 13. SCROLLBAR STYLING                       */
/* ============================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 50, 119, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 50, 119, 0.3);
}

/* ============================================ */
/* 14. COMPACT GRIDS                           */
/* ============================================ */

.mud-grid.compact-grid {
    margin: 0 !important;
}

.mud-grid.compact-grid > .mud-grid-item {
    padding: 4px !important;
}

/* ============================================ */
/* 15. CALIBRATION FORM SPECIFIC               */
/* ============================================ */

.calibration-dialog .mud-dialog-content {
    padding: 8px !important;
    max-height: 85vh;
    overflow-y: auto;
}

.calibration-panel {
    padding: 6px !important;
    margin-bottom: 6px !important;
}

.calibration-panel .mud-table {
    font-size: 0.75rem !important;
}

.calibration-panel .mud-table-cell {
    padding: 2px 4px !important;
    font-size: 0.75rem !important;
}

.calibration-panel-header {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center;
    margin-bottom: 4px !important;
    padding: 4px !important;
}

.calibration-main-table .mud-table-cell {
    padding: 3px 5px !important;
    font-size: 0.75rem !important;
}

.calibration-main-table .mud-table-head .mud-table-cell {
    padding: 4px 5px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.calibration-textfield .mud-input-slot {
    padding: 3px 6px !important;
    font-size: 0.75rem !important;
}

.calibration-textfield input {
    font-size: 0.75rem !important;
}

.calibration-numeric .mud-input-slot {
    padding: 3px 6px !important;
    font-size: 0.75rem !important;
}

.calibration-button {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    min-height: 30px !important;
    height: 30px !important;
}

.calibration-checkbox .mud-checkbox-label {
    font-size: 0.8rem !important;
}

.calibration-datepicker .mud-input-slot {
    padding: 3px 6px !important;
    font-size: 0.75rem !important;
}

.calibration-select .mud-input-slot {
    padding: 3px 6px !important;
    font-size: 0.75rem !important;
}

.calibration-stack {
    gap: 6px !important;
}

.calibration-grid {
    margin: 0 !important;
}

.calibration-grid > .mud-grid-item {
    padding: 3px !important;
}

/* ============================================ */
/* 16. LOGIN PAGE — Split Layout               */
/* ============================================ */

/* Full-screen split wrapper */
.login-split-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* LEFT: form panel */
.login-form-panel {
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 40px 48px;
    overflow-y: auto;
}

.login-form-inner {
    width: 100%;
    max-width: 400px;
}

/* Logo icon */
.login-logo-wrap {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #003277, #4478af);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 50, 119, 0.3);
}

.login-logo-icon .mud-icon-root {
    color: white !important;
    font-size: 2rem !important;
}

/* RIGHT: image panel */
.login-image-panel {
    flex: 1;
    position: relative;
    background-image: url('/images/login-panel-bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.login-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,50,119,0.45) 0%, rgba(55,82,165,0.25) 60%, transparent 100%);
}

/* Responsive: hide image panel on small screens */
@media (max-width: 768px) {
    .login-image-panel {
        display: none;
    }
    .login-form-panel {
        flex: 0 0 100%;
        padding: 32px 24px;
    }
}


/* ============================================ */
/* 17. DASHBOARD                               */
/* ============================================ */

/* Dashboard cards */
.dashboard-widget {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 1px 4px rgba(0, 50, 119, 0.05) !important;
    transition: all 0.2s ease !important;
    overflow: hidden;
}

.dashboard-widget:hover {
    box-shadow: 0 6px 20px rgba(0, 50, 119, 0.12) !important;
    transform: translateY(-2px);
}

/* Widget header — icon sits in a soft rounded "badge" tinted to the widget's colour,
   title reads bolder, matching a stat-card look rather than a bare icon + label row. */
.dash-widget-header {
    gap: 10px;
}

.dash-widget-title {
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.1px;
}

.dash-widget-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Soft colour-tinted badges — used for widget header icons and for status tiles
   (e.g. Spray & Risk Advice) so an icon "pops" against the card instead of sitting
   bare. Background is each MudBlazor palette colour's own hover tint (already a
   low-opacity version of that colour); foreground is the full-strength colour. */
.dash-badge-primary   { background: var(--mud-palette-primary-hover);   color: var(--mud-palette-primary); }
.dash-badge-secondary { background: var(--mud-palette-secondary-hover); color: var(--mud-palette-secondary); }
.dash-badge-tertiary  { background: var(--mud-palette-tertiary-hover);  color: var(--mud-palette-tertiary); }
.dash-badge-info      { background: var(--mud-palette-info-hover);      color: var(--mud-palette-info); }
.dash-badge-success   { background: var(--mud-palette-success-hover);   color: var(--mud-palette-success); }
.dash-badge-warning   { background: var(--mud-palette-warning-hover);   color: var(--mud-palette-warning); }
.dash-badge-error     { background: var(--mud-palette-error-hover);     color: var(--mud-palette-error); }
.dash-badge-default   { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }

/* Stat tiles inside KPI widgets (icon/number/label stacks) — a soft rounded surface
   with a gentle hover lift, so each figure reads as its own small card rather than
   floating text in a grid. */
.dash-stat {
    padding: 10px 4px 8px;
    border-radius: 12px;
    background: var(--mud-palette-action-default-hover);
    transition: background 0.15s ease, transform 0.1s ease;
}

.dash-stat:hover {
    background: var(--mud-palette-table-hover);
    transform: translateY(-1px);
}

/* ============================================ */
/* 18. SELECTION / FOCUS STYLING               */
/* ============================================ */

/* Focus ring */
.mud-input-outlined:focus-within fieldset {
    border-color: #003277 !important;
    border-width: 2px !important;
}

/* Selection color */
::selection {
    background: rgba(0, 50, 119, 0.15);
    color: #003277;
}

/* ============================================ */
/* 19. COMPACT DIALOG FORMS                    */
/* ============================================ */



/* ============================================ */
/* 4. DIALOG / MODAL STYLING                   */
/* ============================================ */

/* Dialog shell */
 .mud-dialog {
    min-width: 0 !important;
    width: auto !important;
}

/* Title bar */
 .mud-dialog-title {
    padding: 4px 8px 3px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-bottom: 1px solid #e0e0e0;
}

.mud-dialog-title h6,
.mud-dialog-title .mud-typography,
.mud-dialog-title .mud-typography-h6 {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Close button */
.mud-dialog-title .mud-button-root {
    width: 20px !important;
    height: 20px !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.mud-dialog-title .mud-button-root .mud-icon-root {
    font-size: 0.85rem !important;
    width: 14px !important;
    height: 14px !important;
}

.mud-dialog .mud-dialog-title .mud-button-close {
    top: 1px;
}

/* Content area */
.mud-dialog-content {
    padding: 6px 10px !important;
} 
 
/* Actions bar */
.mud-dialog-actions {    
    min-height: 0 !important;
    padding: 4px 10px  ;
}
 
/* Label + field layout table */
.cfd-table {
    border-collapse: collapse;
    width: 100%;
}

.cfd-table tr {
    height: 28px;
}

.cfd-lbl {
    white-space: nowrap;
    padding: 2px 6px 2px 0;
    font-size: 0.74rem;
    color: #333;
    vertical-align: middle;
    width: 1%;
}

.cfd-ctrl {
    padding: 2px 0;
    vertical-align: middle;
}

/* Inputs inside compact dialog */
.compact-form-dialog .mud-input-outlined .mud-input-slot {
    padding: 1px 6px !important;
    font-size: 0.75rem !important;
    min-height: 22px !important;
    height: 22px !important;
}

.compact-form-dialog .mud-input-control {
    margin: 0 !important;
    padding: 0 !important;
}

.compact-form-dialog .mud-input-root {
    font-size: 0.75rem !important;
}

.compact-form-dialog .mud-input-outlined fieldset {
    border-radius: 2px !important;
}

.compact-form-dialog .mud-select .mud-input-slot {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 0.75rem !important;
    padding: 1px 6px !important;
}

/* Actions footer */
.cfd-actions {
    width: 100%;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    border-top: 1px solid #e0e0e0;
    gap: 6px;
}

.cfd-actions .mud-button {
    font-size: 0.72rem !important;
    padding: 1px 8px !important;
    min-height: 0 !important;
    height: 24px !important;
    border-radius: 2px !important;
}

/* ============================================ */
/* FERT BLOCK DIALOG � Ultra-Compact           */
/* ============================================ */

/* Shrink the dialog itself */
.fb-dialog .mud-dialog {
    max-width: 98vw !important;
    max-height: 92vh !important;
}

/* Dialog content: minimal padding, scrollable */
.fb-dialog .mud-dialog-content {
    padding: 4px 8px !important;
    max-height: calc(92vh - 110px) !important;
    overflow-y: auto !important;
}

/* All outlined inputs: tiny height */
.fb-dialog .mud-input-outlined .mud-input-slot,
.fb-dialog .mud-input-root-outlined {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 0.7rem !important;
    line-height: 22px !important;
}

/* Remove extra margin/padding on form controls */
.fb-dialog .mud-input-control,
.fb-dialog .mud-form-control {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Input text itself */
.fb-dialog .mud-input {
    font-size: 0.7rem !important;
    height: 18px !important;
    line-height: 18px !important;
    padding: 0 !important;
}

/* Fieldset border tight */
.fb-dialog .mud-input-outlined fieldset {
    border-radius: 3px !important;
}

/* Select dropdown arrow */
.fb-dialog .mud-select-input .mud-input-adornment-end {
    height: 22px !important;
    padding: 0 !important;
}

.fb-dialog .mud-select .mud-icon-root,
.fb-dialog .mud-input-adornment .mud-icon-root {
    font-size: 14px !important;
}

/* Clearable X button */
.fb-dialog .mud-input-adornment .mud-icon-button {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
}

/* Helper text hidden */
.fb-dialog .mud-input-helper-text {
    display: none !important;
}

/* Placeholder text */
.fb-dialog .mud-input::placeholder {
    font-size: 0.7rem !important;
    opacity: 0.6;
}

/* Grid items: zero padding */
.fb-dialog .mud-grid-item {
    padding: 1px !important;
}

/* Checkboxes */
.fb-dialog .mud-checkbox {
    margin: 0 !important;
    padding: 0 !important;
    height: 20px !important;
}

.fb-dialog .mud-checkbox .mud-button-root {
    padding: 1px !important;
}

.fb-dialog .mud-checkbox .mud-icon-root {
    font-size: 16px !important;
}

.fb-dialog .mud-checkbox .mud-checkbox-label,
.fb-dialog .mud-form-control-label-input {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
}

/* Section captions */
.fb-dialog .fb-section-title {
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* Data grid inside dialog � toolbar and rows */
.fb-dialog .mud-toolbar {
    min-height: 30px !important;
    padding: 0 4px !important;
}

.fb-dialog .mud-table-toolbar {
    min-height: 30px !important;
}

.fb-dialog .mud-table-head .mud-table-cell {
    font-size: 0.65rem !important;
    padding: 1px 4px !important;
    height: 22px !important;
}

.fb-dialog .mud-table-body .mud-table-cell {
    font-size: 0.68rem !important;
    padding: 1px 4px !important;
    height: 20px !important;
}

.fb-dialog .mud-table-row {
    height: 20px !important;
}

/* Pager smaller */
.fb-dialog .mud-table-pagination {
    font-size: 0.65rem !important;
    min-height: 28px !important;
}

.fb-dialog .mud-table-pagination .mud-select-input {
    font-size: 0.65rem !important;
}

/* maurice ************************************************************************* */
.mud-grid-item {
    padding: 1px;
    font-size: 0.60rem !important;
}

.mud-input-numeric-spin {
    display: none !important;
}

.mud-input > textarea.mud-input-root-outlined { 
    margin-top: 0px; 
}

.mud-table-dense .mud-table-cell {
    padding: 0px 0px 0px 5px !important;
}

.mud-icon-size-medium {
    font-size: 1rem;
}

.mud-icon-size-small {
    font-size: 1rem;
}

/* fertblocks - depth soil*/
.fb-dialog .mud-input-outlined .mud-input-slot, .fb-dialog .mud-input-root-outlined {
    height: 19px !important;
} 

/*calendar icon alignment on growthstages*/
.mud-icon-button-edge-end {
    margin-right: 0px;
    margin-inline-end: 0px;
    margin-inline-start: unset;
}
 
/*calibration - Column 1 - Bottom Panel - Instructions */
.mud-input > input.mud-input-root.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root.mud-input-root-margin-dense {
    padding-top: 0px;
    font-size: 0.75rem !important;
}

/*calibration - Column 2 - Nozzle Configuration Table  */
.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    padding: 0px 0 0px;
    font-size: 0.75rem !important;
}

/* ============================================ */
/* 18. PHONE (<= 600px)                         */
/* ============================================ */
/* The desktop layout is built for a mouse and a wide screen: 0.72rem grid text,
   24px rows, toolbars on one line and hard-coded min-widths. This block relaxes
   those on a phone only - nothing above 600px is touched.
   Selectors are prefixed with .mud-layout to out-specify the !important compact
   rules injected inline by MainLayout, which load after this file. */

@media (max-width: 600px) {

    /* ── Readable text, thumb-sized rows ── */
    .mud-layout .compact-grid .mud-table-head .mud-table-cell,
    .mud-layout .compact-grid .mud-table-body .mud-table-cell {
        font-size: 0.8rem !important;
        height: 36px !important;
        padding: 4px 10px !important;
    }

    .mud-layout .compact-grid .mud-table-row {
        height: 36px !important;
    }

    .mud-layout .compact-grid .mud-typography {
        font-size: 0.8rem !important;
    }

    /* ── Toolbars wrap instead of squashing buttons to "AD BLO" ── */
    .mud-layout .mud-toolbar,
    .mud-layout .mud-table-toolbar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 8px !important;
        row-gap: 6px;
        column-gap: 6px;
    }

    .mud-layout .mud-toolbar .mud-button-root {
        flex: 0 0 auto;
    }

    /* ── Wide grids scroll sideways; the page itself never does ── */
    .mud-layout .mud-table-container {
        overflow-x: auto !important;
    }

    html, body {
        overflow-x: hidden;
    }

    /* ponytail: blunt override for the ~90 hard-coded `min-width: NNNpx` inline styles
       across the pages and dialogs - one rule beats editing 90 files. If a specific
       screen needs a real mobile layout later, give that screen its own rule. */
    .mud-main-content [style*="min-width"],
    .mud-dialog [style*="min-width"] {
        min-width: 0 !important;
    }

    /* ── Dialogs fit the screen ── */
    .mud-dialog {
        margin: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    .mud-dialog-content {
        max-height: 70vh;
        overflow: auto;
    }

    /* ── Nav drawer: overlay wide enough to read, tappable links ── */
    .mud-layout .mud-drawer {
        width: 78vw !important;
        min-width: 0 !important;
        max-width: 300px !important;
    }

    .mud-layout .nav-menu-clean .mud-nav-link {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
        min-height: 40px !important;
    }
}