/* /mobile/styles/device-optimizations.css */
/* SIMPLIFIED: Device-specific optimizations based on 3 groups */

/* Base styles for all devices */
.phone-frame {
    width: 100vw;
    height: 95vh;
    margin: 0;
    background: #000;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.screen {
    background: var(--mobile-bg);
    border-radius: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 95vh;
    width: 100vw;
    position: relative;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* SIMPLIFIED GROUP 1: Small devices (≤360px width) */
.device-small .header {
    padding: 12px;
}

.device-small .month-year {
    font-size: 18px;
}

.device-small .nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 16px;
}

.device-small .today-indicator {
    padding: 4px 8px;
    font-size: 10px;
}

.device-small .day {
    padding: 3px 2px;
}

.device-small .day-number {
    font-size: 11px;
}

.device-small .weekday {
    padding: 8px 0;
    font-size: 10px;
}

.device-small .fab {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    font-size: 20px;
    bottom: 60px;
    right: 15px;
}

.device-small .status-bar {
    height: 36px;
    font-size: 14px;
}

.device-small .callout-bar {
    height: 2px;
    margin: 0 1px;
}

.device-small .callout-count {
    font-size: 8px;
    padding: 1px 3px;
    min-width: 12px;
}

/* SIMPLIFIED GROUP 2: Medium devices (361-400px width) - Your S25 gets this */
.device-medium .header {
    padding: 20px;
}

.device-medium .month-year {
    font-size: 24px;
}

.device-medium .day {
    padding: 6px 4px;
}

.device-medium .day-number {
    font-size: 14px;
}

.device-medium .weekday {
    padding: 12px 0;
    font-size: 12px;
}

.device-medium .fab {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    font-size: 24px;
    bottom: 80px;
    right: 20px;
}

.device-medium .status-bar {
    height: 44px;
    font-size: 16px;
}

.device-medium .callout-bar {
    height: 3px;
    margin: 0 2px;
}

.device-medium .callout-count {
    font-size: 9px;
    padding: 1px 4px;
    min-width: 14px;
}

/* SIMPLIFIED GROUP 3: Large devices (401px+ width) - iPhone Pro Max, etc. */
.device-large .header {
    padding: 25px;
}

.device-large .month-year {
    font-size: 28px;
}

.device-large .day {
    padding: 8px 6px;
}

.device-large .day-number {
    font-size: 16px;
}

.device-large .weekday {
    padding: 14px 0;
    font-size: 13px;
}

.device-large .fab {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    font-size: 28px;
    bottom: 90px;
    right: 25px;
}

.device-large .status-bar {
    height: 52px;
    font-size: 18px;
}

.device-large .callout-bar {
    height: 4px;
    margin: 0 3px;
}

.device-large .callout-count {
    font-size: 11px;
    padding: 1px 5px;
    min-width: 16px;
}