/* ==================================================
   RideMonkey App — Global Shell
   ================================================== */


/* --------------------------------------------------
   Global reset for the RideMonkey app
   -------------------------------------------------- */

.rm-app,
.rm-app * {
	box-sizing: border-box;
}


/* --------------------------------------------------
   App shell
   -------------------------------------------------- */

.rm-app {
	width: 100%;
	margin: 0;
	padding: 0;
}


/* --------------------------------------------------
   Section 1 — App Header / Logo
   Full width
   -------------------------------------------------- */

.rm-app-header {
    width: 100%;
    margin: 0;
    padding: 10px 0 8px;

    box-sizing: border-box;

    position: sticky;
    top: 0;
    z-index: 1000;

    background: #ffffff;

    border-bottom: 1px solid #ff4b00;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}


/* Logged-in-as indicator — overlay, doesn't affect layout */

.rm-app-user-indicator {
    position: absolute;
    top: 6px;
    right: 14px;

    color: #999999;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* Logo */

.rm-app-home {
    display: flex;
    width: 100%;

    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 0;

    line-height: 0;
}


.rm-app-logo {
    display: block;

    width: 300px;
    max-width: 70vw;
    height: auto;

    margin: 0;
    padding: 0;
}


/* --------------------------------------------------
   Section 2 — Desktop Navigation
   Full width, desktop only

   4 icon-only buttons, each a FIXED size regardless
   of page — this rigidity is deliberate. Text labels
   caused the nav's total width to visibly shift
   between pages ("Add" vs "Settings" are very
   different lengths), which read as disorientating.
   Fixed-size icons make the nav's footprint identical
   everywhere; only the icon glyphs/destinations
   change.
   -------------------------------------------------- */

.rm-app-desktop-nav {
	width: 100%;
	margin: 0;
	padding: 0 20px 0 0;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;

	background: #ffffff;

	border-bottom: 1px solid #ff4b00;
}

.rm-app-desktop-nav a,
.rm-app-desktop-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	width: auto;
	min-height: 48px;
	padding: 5px 22px;

	background: none;
	border: none;

	color: #222222;
	text-decoration: none;

	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;

	cursor: pointer;
}

.rm-app-desktop-nav svg {
	width: 20px !important;
	height: 20px !important;
}

.rm-app-desktop-nav .rm-app-nav-label {
	display: inline;
}

.rm-app-desktop-nav .rm-app-nav-inert {
	display: flex;

	width: 64px;
	height: 48px;

	opacity: 0.25;
}

.rm-app-desktop-nav a:hover,
.rm-app-desktop-nav a:focus,
.rm-app-desktop-nav button:hover,
.rm-app-desktop-nav button:focus {
	color: #ff4b00;
}


/* --------------------------------------------------
   Section 3 — Page Content
   This is the ONLY global section with
   horizontal padding.
   -------------------------------------------------- */

.rm-app-content {
    width: 100%;
    margin: 0;
    padding: 24px 20px 40px;
}

@media (min-width: 768px) {
    .rm-app-content {
        /* Less reserved space at the bottom on desktop, now that
           several pages use the fixed-height tile grid rather
           than a naturally-scrolling stack — see
           tile-grid-fit.js, which assumes this same number in
           its own math. Change them together. */
        padding-bottom: 16px;
    }
}


/* --------------------------------------------------
   Section 4 — Mobile Navigation
   Full width, mobile only, fixed to bottom of screen

   Same 4-item pattern as desktop, but each item takes
   equal width (flex: 1) to fill the bar edge to edge,
   matching a typical bottom-tab-bar layout.
   -------------------------------------------------- */

.rm-app-mobile-nav {
    display: none;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    margin: 0;
    padding: 0;

    background: #ffffff;

    border-top: 1px solid #ff4b00;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.12);

    z-index: 999;
}

.rm-app-mobile-nav a,
.rm-app-mobile-nav button {
    display: flex;
    flex: 1 1 0;

    align-items: center;
    justify-content: center;

    height: 56px;
    padding: 0;

    background: none;
    border: none;

    color: #222222;
    text-decoration: none;

    cursor: pointer;
}

.rm-app-mobile-nav svg {
    width: 22px !important;
    height: 22px !important;
}

.rm-app-mobile-nav .rm-app-nav-label {
    display: none;
}

.rm-app-mobile-nav .rm-app-nav-inert {
    display: flex;
    flex: 1 1 0;

    height: 56px;

    opacity: 0.25;
}

.rm-app-mobile-nav a:hover,
.rm-app-mobile-nav a:focus,
.rm-app-mobile-nav button:hover,
.rm-app-mobile-nav button:focus {
    color: #ff4b00;
}


/* ==================================================
   Mobile
   ================================================== */

@media (max-width: 767px) {

    .rm-app-desktop-nav {
        display: none;
    }

    .rm-app-mobile-nav {
        display: flex;
    }

    .rm-app-content {
        padding-bottom: 110px;
    }

}


/* ==================================================
   Desktop
   ================================================== */

@media (min-width: 768px) {

    .rm-app-mobile-nav {
        display: none;
    }

}