:root{
	--bg:#0F172A; /* dark blue */
	--panel:#1E293B; /* surface/card color */
	--muted:#94A3B8; /* lighter gray */
	--accent:#00e5a8; /* vibrant teal */
	--accent-2:#ff4da6; /* vibrant pink */
	--button-purple: #7C3AED; /* unified purple for all buttons */
	--button-purple-hover: #8B5CF6; /* lighter purple hover */
	--button-purple-active: #6D28D9; /* darker purple active */
	--success: #10B981; /* green for confirmations */
	--warning: #F59E0B; /* amber for warnings */
	--error: #EF4444; /* red for errors */
	--link-color: #7C3AED; /* purple links */
	--bubble-in:#0e1b24; /* incoming bubble */
	--bubble-out:#083233; /* outgoing bubble */
	--card:#1E293B; /* surface color */
	--glass: rgba(255,255,255,0.04);
	--text:#e6f0f2;
}
html,body{height:100%;line-height:1.5}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; background:#0F172A; color:var(--text); margin:0; -webkit-font-smoothing:antialiased}
.container{position:relative;max-width:1100px;margin:0 auto;background:#1E293B;padding:40px 22px 22px 22px;border-radius:0;box-shadow:none;border:none}
.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.btn{background:var(--button-purple);color:#fff;border:0;border-radius:10px;padding:8px 12px;text-decoration:none;display:inline-block;font-weight:600;font-size:14px;box-shadow:0 6px 18px rgba(124,58,237,0.18);cursor:pointer;transition:background-color 0.2s,box-shadow 0.2s,color 0.2s}
.btn:hover{background:var(--button-purple-hover);color:#fff;box-shadow:0 8px 24px rgba(124,58,237,0.25)}
.btn:active{background:var(--button-purple-active);color:#fff}
.btn-danger{background:var(--error);color:#fff;transition:background-color 0.2s}
.btn-danger:hover{background:#DC2626;color:#fff}
a{color:var(--link-color);text-decoration:none;transition:color 0.2s}
a:hover{color:var(--button-purple-hover)}
.card{background:#1E293B;border-radius:12px;padding:16px;margin:14px 0;border:1px solid rgba(255,255,255,0.08);transition:box-shadow 0.2s}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.card b{color:#fff}
input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);margin:12px 0;background:transparent;color:var(--text);transition:border-color 0.2s,box-shadow 0.2s;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--button-purple);box-shadow:0 0 0 2px rgba(124,58,237,0.2)}
textarea{min-height:80px}
.badge{background:var(--success);color:#0a2e1f;border-radius:10px;padding:4px 10px;font-weight:700}
.muted{opacity:1;color:var(--muted)}

/* Trip specific */
h2{margin:6px 0 12px 0;font-size:1.5rem;line-height:1.4}
.container h3{margin-top:32px;font-size:24px;font-weight:700;margin-bottom:16px;line-height:1.3}
/* Trip header */
.trip-header{margin:6px 0 18px 0}
.trip-title{font-size:1.8rem;margin:0;display:flex;align-items:center;gap:10px;line-height:1.3;font-weight:700}
.trip-title .trip-delete{margin-left:8px;display:inline-flex;cursor:pointer;transition:opacity 0.2s}
.trip-title .trip-delete:hover{opacity:0.7}
.trip-dates{font-size:0.95rem;opacity:0.8;margin-top:6px;line-height:1.5}
.activity-card{display:flex;flex-direction:column}

/* Trip total banner */
.trip-total{background:rgba(124,58,237,0.15);padding:14px 16px;border-radius:10px;margin-bottom:12px;font-weight:700;color:var(--text);display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(124,58,237,0.25)}

.user-bar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:#0F172A;border-bottom:1px solid rgba(255,255,255,0.08);z-index:1000;height:48px;box-sizing:border-box}
.user-bar .user-name{font-size:0.9rem;color:var(--text);font-weight:500}
.logout-inline{background:transparent;color:var(--text);font-size:0.9rem;padding:6px 12px;border-radius:8px;text-decoration:none;transition:background-color 0.2s,color 0.2s;font-weight:500}
.logout-inline:hover{background:var(--button-purple);color:#fff}
body{padding-top:48px;line-height:1.6}

@media (max-width:700px){
	.logout-inline{font-size:0.85rem;padding:6px}
	.user-bar{padding:10px 12px;height:44px}
	body{padding-top:44px}
	.container{padding:40px 12px 12px 12px}
}
.activity-body{flex:1;padding:8px 0;display:flex;flex-direction:column;gap:12px}
.activity-footer{margin-top:8px;display:flex;gap:8px;justify-content:flex-end}
.comment-btn{position:relative}

/* Scrollable comments panel: show only last 4 messages by height */
.comments-panel{max-height:calc(4 * 72px);overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:12px 0}
.comment-form{display:flex;gap:8px;align-items:center}
.comment-form input{flex:1;padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:var(--text);transition:border-color 0.2s}
.comment-form input:focus{outline:none;border-color:var(--button-purple);box-shadow:0 0 0 2px rgba(124,58,237,0.2)}
.send-btn{padding:8px 12px;border-radius:10px}

/* Comment bubbles (iPhone-like) */

.activity-body .card{
	display:block;
	position:relative;
	background: linear-gradient(180deg, var(--bubble-in), rgba(11,22,32,0.85));
	color:var(--text);
	padding:12px 16px;
	border-radius:18px;
	margin:0; /* gap handled by parent */
	max-width:76%;
	box-shadow:0 6px 14px rgba(2,6,23,0.6);
	border:1px solid rgba(255,255,255,0.02);
	align-self:flex-start; /* left-aligned by default */
	line-height:1.5;
}
.activity-body .card::after{
	content: '';
	position: absolute;
	left: 12px;
	top: 12px;
	width: 0; height: 0;
	border-top: 8px solid transparent;
	border-right: 8px solid rgba(255,255,255,0.02);
	border-bottom: 8px solid transparent;
}

/* Right aligned bubble for current user (if PHP adds .me class later) */
.activity-body .card.me{ align-self:flex-end; background: linear-gradient(90deg,var(--bubble-out), rgba(8,50,51,0.9)); color:#fff }
.activity-body .card.me::after{ left:auto; right:12px; border-right: none; border-left: 8px solid rgba(0,0,0,0.08); }

/* delete icon inside bubble */
.delete-comment{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;color:rgba(255,255,255,0.7);text-decoration:none}
.delete-comment img{
	width:18px; height:18px;
	max-width:20px; max-height:20px;
	opacity:0.95; display:inline-block; vertical-align:middle;
	object-fit:contain; box-sizing:border-box; cursor:pointer;
}
.icon-trash{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;color:rgba(255,255,255,0.85);text-decoration:none}
.icon-delete{
	width:20px; height:20px;
	max-width:20px; max-height:20px;
	display:inline-block; vertical-align:middle; opacity:0.95;
	object-fit:contain; box-sizing:border-box; cursor:pointer;
}

/* Dashboard */
.dashboard-nav{flex-wrap:wrap;gap:8px}
.trip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px}
.trip-grid .card{display:flex;flex-direction:column;gap:6px}
.trip-grid .btn{width:100%;text-align:center;box-sizing:border-box;display:block}
.trip-link{color:inherit;text-decoration:none}
.trip-link:hover{text-decoration:underline}
.trip-range{margin-top:4px}
.trip-stats{margin-top:6px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.trip-actions{margin-top:10px}
@media (max-width:700px){
	.dashboard-nav{flex-direction:column;align-items:stretch}
	.trip-grid{grid-template-columns:1fr}
}

/* Timestamp below message bubble */
.activity-body .msg-time{
	font-size:0.65rem;
	color:#0b0b0b;
	margin-top:6px;
	opacity:0.9;
	font-family: 'Courier New', Courier, monospace;
}
.activity-body .card.me .msg-time{ text-align:right }
.activity-body .card .msg-time{ text-align:left }

/* Flight and lodging card styling */
.flight-card{
	border-left:4px solid var(--button-purple);
	transition:all 0.2s ease;
}
.flight-card:hover{
	box-shadow:0 8px 16px rgba(124,58,237,0.15),0 2px 4px rgba(0,0,0,0.2);
	border-left-color:var(--button-purple-hover);
}
.lodging-card{
	border-left:4px solid var(--accent);
	transition:all 0.2s ease;
}
.lodging-card:hover{
	box-shadow:0 8px 16px rgba(0,229,168,0.15),0 2px 4px rgba(0,0,0,0.2);
	border-left-color:#00d89a;
}

/* Map styling */
#map{width:100%;height:420px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}

/* Map legend */
.map-legend{margin-top:8px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;color:var(--muted);font-size:12px}
.map-legend__item{display:inline-flex;align-items:center;gap:6px}
.map-legend__icon{width:18px !important;height:18px !important;max-width:18px !important;max-height:18px !important;object-fit:contain}

/* Legend responsiveness */
@media (max-width:700px){
	.map-legend{gap:10px;font-size:11px}
	.map-legend__icon{width:16px !important;height:16px !important;max-width:16px !important;max-height:16px !important}
}
@media (max-width:420px){
	.map-legend{gap:8px;font-size:10px}
	.map-legend__icon{width:14px !important;height:14px !important;max-width:14px !important;max-height:14px !important}
}

/* Responsive tweaks */
@media (max-width:700px){
	.container{padding:14px;margin:12px}
	.nav{gap:8px;flex-direction:column;align-items:stretch;width:100%}
	.btn{padding:10px;width:100%;display:block;text-align:center;box-sizing:border-box}
	.btn-danger{width:100%;box-sizing:border-box}
	.activity-body .card{max-width:92%}
	#map{height:260px}
	.activity-footer{flex-direction:column;align-items:stretch}
	input,textarea,select{font-size:16px;padding:12px}
	.list-row img.icon{width:24px;height:24px}
}

/* Smaller phones (iPhone/Pixel internal widths) */
@media (max-width:420px){
	.container{padding:12px;margin:10px;border-radius:10px}
	.trip-title{font-size:1.1rem}
	.trip-dates{font-size:0.9rem}
	.trip-total{flex-direction:column;align-items:flex-start;padding:8px}
	.nav{gap:8px;flex-direction:column;align-items:stretch;width:100%}
	.nav .btn{width:100%;padding:10px;font-size:15px;box-sizing:border-box}
	#flightToggleBtn{width:auto!important;padding:6px 10px!important;font-size:12px!important}
	.card{padding:10px;margin:8px 0}
	.flight-card{padding:10px}
	.flight-card .muted{font-size:0.9rem}
	.icon-delete{width:18px;height:18px}
	input,textarea,select{font-size:16px;padding:12px}
	textarea{min-height:100px}
	.activity-body .card{max-width:100%;border-radius:14px}
	.activity-body .card::after{left:10px;top:10px}
	#map{height:220px}
	.activity-footer{gap:6px}
	.trip-header{margin-bottom:8px}
}

/* Small helper for list items */
.list-row{display:flex;align-items:center;gap:12px}
.list-row img.icon{width:28px;height:28px;object-fit:contain}

/* Form select styling */
select{
	background: rgba(15, 23, 32, 0.8) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 8px;
	padding: 10px !important;
	color: #e6f0f2 !important;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e6f0f2' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 30px;
}
select:hover{
	border-color: rgba(255, 255, 255, 0.25) !important;
}
select:focus{
	outline: none;
	border-color: rgba(255, 255, 255, 0.35) !important;
	box-shadow: 0 0 0 2px rgba(0, 229, 168, 0.15);
}
select option{
	background: #0f1720;
	color: #e6f0f2;
}

/* Form overlay spinner (shared across add/edit forms) */
.form-loading{
	position:fixed;
	inset:0;
	background:rgba(12,17,27,0.55);
	backdrop-filter:blur(2px);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
}
.form-spinner{
	width:42px;
	height:42px;
	border-radius:50%;
	border:4px solid #cbd5e1;
	border-top-color:#60a5fa;
	animation:spin 1s linear infinite;
}
@keyframes spin{
	to{transform:rotate(360deg)}
}