/* ================================================
   MASSER MOBILE RESPONSIVE STYLESHEET
   Mobile-First Responsive Design
   ================================================ */

/* Prevent layout jump when scrollbar appears/disappears */
html {
    scrollbar-gutter: stable both-edges;
}

/* ================================================
   TABLETS AND BELOW (max 920px)
   ================================================ */
@media screen and (max-width: 920px) {
    /* Force full width on small screens */
    body {
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* CRITICAL FIX: Force grid display for Statistics panel - PREVENT FLEX OVERRIDE */
    /* Lock the grid at all widths, prevent any flex conversion */
    #rpanel .card-accent-purple > div[style*="display:grid"],
    #rpanel .modern-card.card-accent-purple > div[style*="display:grid"],
    td#rpanel .card-accent-purple > div[style*="display:grid"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
        grid-auto-rows: 1fr !important;
    }
    
    /* Ensure grid stays grid even if something tries to flex it */
    #rpanel div[style*="gap:8px"][style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Prevent any flexbox rules from affecting grid containers */
    #rpanel [style*="display:grid"] {
        display: grid !important;
    }
    
    #total {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    /* ===== LAYOUT - SPLIT LPANEL AND RPANEL INTO SEPARATE ROWS ===== */
    /* Make the main content row display as block so td's stack */
    #total > tbody > tr {
        display: block !important;
    }
    
    /* Make both panels full width and stack vertically */
    td#lpanel,
    td#rpanel {
        display: block !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }
    
    /* Right panel (Statistics) comes after left panel */
    td#rpanel {
        margin-top: 16px !important;
    }
    
    /* ===== HEADER ADJUSTMENTS ===== */
    /* Hide header completely on mobile - too cluttered */
    #toptop {
        display: none !important;
    }
    
    #menu {
        font-size: 14px;
        text-align: center;
        padding: 10px 0;
    }
    
    /* ===== PROFILE HEADER - MOBILE OVERRIDE ===== */
    /* Center the profile image on mobile */
    body[data-page*="profile"] [style*="linear-gradient(135deg, #7c3aed"][style*="display:flex"] {
        justify-content: center !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Center the text content */
    body[data-page*="profile"] [style*="linear-gradient(135deg, #7c3aed"] > div[style*="flex:1"] {
        text-align: center !important;
        flex: none !important;
        width: 100% !important;
    }
    
    /* Center the image wrapper */
    body[data-page*="profile"] [style*="linear-gradient(135deg, #7c3aed"] > div:last-child {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Center the image link */
    body[data-page*="profile"] [style*="linear-gradient(135deg, #7c3aed"] img[src*="skins/head.php"] {
        display: block !important;
        margin: 0 auto !important;
    }
    
    #masser {
        text-align: center;
        padding: 15px 0;
    }
    
    #masser .logo {
        max-width: 100px;
        height: auto;
    }
    
    #masser .brand-text {
        font-size: 14px;
    }
    
    #masser .brand-title-row a {
        font-size: 24px !important;
    }
    
    /* ===== NAVIGATION ===== */
    #navi table {
        width: 100%;
    }
    
    #navi td {
        display: block;
        width: 100% !important;
        text-align: center;
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
    }
    
    #navi a {
        display: block;
        padding: 10px;
    }
    
    /* ===== CONTENT AREA ===== */
    #body {
        width: 100% !important;
        padding: 10px;
        box-sizing: border-box;
    }
    
    /* ===== TABLES ===== */
    table {
        width: 100% !important;
        font-size: 14px;
        overflow-x: auto;
    }
    
    table th,
    table td {
        padding: 8px 4px !important;
    }
    
    /* ===== FORMS ===== */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 10px;
        height: 21.5px;
    }
    
    /* ===== BUTTONS ===== */
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    a.button {
        padding: 12px;
        font-size: 16px;
        margin: 10px 0;
        box-sizing: border-box;
        min-height: 44px; /* Touch-friendly */
    }
    
    /* Form submit buttons should be full width */
    input[type="submit"],
    input[type="button"] {
        width: 100%;
        max-width: 100%;
    }
    
    /* Inline utility buttons (like copy buttons) should NOT be full width */
    button[onclick*="clipboard"],
    button[style*="font-size:11px"],
    button[style*="padding:4px"] {
        width: auto !important;
        max-width: none !important;
        display: inline-block !important;
        padding: 8px 12px !important;
        min-width: 44px;
    }
    
    /* ===== IMAGES ===== */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* ===== GRID LAYOUTS ===== */
    /* GLOBAL: Convert all 3+ column grids to single column on mobile */
    [style*="display:grid"][style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="display:grid"][style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="display:grid"][style*="grid-template-columns:1fr 1fr 1fr 1fr"],
    [style*="display:grid"][style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Lock dashboard grid - PREVENT FLEX CONVERSION */
    .dashboard-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        align-items: stretch !important;
        grid-auto-rows: 1fr !important;
    }
    
    /* Ensure links inside grid don't break layout */
    .dashboard-grid > a {
        display: block !important;
        height: 100% !important;
        text-decoration: none !important;
        color: inherit !important;
    }
    
    /* Ensure cards fill their grid cells */
    .dashboard-grid > a > div {
        height: 100% !important;
        min-height: 180px;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
    
    /* Hub dashboard - repeat() grids (backup selector) */
    body[data-page="hub"] [style*="display:grid"][style*="repeat(3, 1fr)"],
    body[data-page="hub"] [style*="display:grid"][style*="repeat(4, 1fr)"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Guide/home page grids - explicit column grids */
    body[data-page="guide"] [style*="display:grid"][style*="1fr 1fr 1fr 1fr"],
    body[data-page="home"] [style*="display:grid"][style*="1fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    body[data-page="guide"] [style*="display:grid"][style*="1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
    body[data-page="home"] [style*="display:grid"][style*="1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) {
        grid-template-columns: 1fr !important;
    }
    
    /* Target all 3-column grids on guide page to prevent horizontal scroll */
    body[data-page="guide"] [style*="grid-template-columns:1fr 1fr 1fr"],
    body[data-page="guide"] [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Profile and other pages - handle repeat(4) grids */
    [style*="display:grid"][style*="repeat(4, 1fr)"]:not(body[data-page="guide"] *):not(body[data-page="home"] *):not(body[data-page="hub"] *) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Keep Statistics grid as 2x2 - MAXIMUM SPECIFICITY */
    /* Multiple selectors to ensure it works in all situations */
    td#rpanel .modern-card.card-accent-purple > div[style*="display:grid"],
    td#rpanel .card-accent-purple > div[style*="display:grid"],
    #rpanel .modern-card.card-accent-purple > div[style*="display:grid"],
    #rpanel .card-accent-purple > div[style*="display:grid"],
    .modern-card.card-accent-purple > div[style*="display:grid"],
    .card-accent-purple > div[style*="display:grid"] {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
    }
    
    /* Even more specific - target the exact gap value */
    td#rpanel div[style*="display:grid"][style*="gap:8px"],
    #rpanel div[style*="display:grid"][style*="gap:8px"] {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
    }
    
    /* Force all direct children of Statistics grid to be grid items */
    #rpanel div[style*="display:grid"][style*="1fr 1fr"] > * {
        display: block !important;
    }
    
    /* ===== DASHBOARD CARDS - PREVENT OVERFLOW ===== */
    /* Ensure dashboard cards don't overflow their grid cells */
    [style*="display:grid"] > a > div[style*="padding:24px"],
    [style*="display:grid"] > a > div[style*="padding: 24px"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Also target links inside grids to prevent width issues */
    [style*="display:grid"] > a {
        min-width: 0;
        width: 100%;
    }
    
    /* CRITICAL: Prevent flex from being applied to grid children */
    /* Lock Statistics grid links to NOT use flex */
    #rpanel div[style*="display:grid"] > a,
    #rpanel .card-accent-purple div[style*="display:grid"] > a,
    .card-accent-purple > div[style*="display:grid"] > a {
        display: block !important;
    }
    
    /* ===== FLEXBOX ADJUSTMENTS ===== */
    /* Only apply flex-wrap to elements that explicitly have display:flex in their style */
    /* Do NOT catch elements that just happen to have other flex properties */
    div[style*="display:flex"],
    span[style*="display:flex"] {
        flex-wrap: wrap !important;
    }
    
    /* Fix for Links card and similar flex-direction:column elements */
    div[style*="display:flex"][style*="flex-direction:column"] > a {
        display: block !important;
        width: 100% !important;
    }
    
    /* Remove the overly broad [style*="display:flex"] rule that was catching everything */
    
    /* ===== PADDING/MARGIN REDUCTIONS ===== */
    [style*="padding:32px"] {
        padding: 16px !important;
    }
    
    [style*="padding:24px"] {
        padding: 12px !important;
    }
    
    [style*="margin:32px"] {
        margin: 16px !important;
    }
    
    [style*="margin:24px"] {
        margin: 12px !important;
    }
    
    /* ===== STATISTICS PANEL ===== */
    /* Make statistics display as 2x2 grid instead of vertical list */
    #rpanel table {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }
    
    #rpanel table tr {
        display: contents;
    }
    
    #rpanel table td {
        display: block;
        padding: 10px !important;
        background: #f9fafb;
        border-radius: 6px;
        text-align: center !important;
        border: 1px solid #e5e7eb;
    }
    
    /* ===== HIDE RIGHT PANEL ON LOGIN/REGISTER ===== */
    /* Hide the entire rpanel column on login/register pages */
    body[data-page="connect"] td#rpanel,
    body[data-page="register"] td#rpanel,
    body[data-page="Connect"] td#rpanel,
    body[data-page="Register"] td#rpanel {
        display: none !important;
    }
    
    /* Also target by ID directly as backup */
    body[data-page="connect"] #rpanel,
    body[data-page="register"] #rpanel,
    body[data-page="Connect"] #rpanel,
    body[data-page="Register"] #rpanel {
        display: none !important;
    }
    
    /* ===== LOGIN/REGISTER FORM CENTERING ===== */
    body[data-page="connect"] #body,
    body[data-page="register"] #body,
    body[data-page="Connect"] #body,
    body[data-page="Register"] #body {
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
    }
    
    /* Expand main content when rpanel is hidden */
    body[data-page="connect"] td#body,
    body[data-page="register"] td#body,
    body[data-page="Connect"] td#body,
    body[data-page="Register"] td#body {
        width: 100% !important;
        display: block !important;
    }
    
    body[data-page="connect"] #body,
    body[data-page="register"] #body,
    body[data-page="Connect"] #body,
    body[data-page="Register"] #body {
        width: 100% !important;
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
    }
    
    /* Center login/register tables */
    body[data-page="connect"] #body table,
    body[data-page="register"] #body table,
    body[data-page="Connect"] #body table,
    body[data-page="Register"] #body table {
        margin: 0 auto;
        max-width: 400px;
        width: 100%;
    }
    
    /* Make login/register form fields stack nicely */
    body[data-page="connect"] #body table tr,
    body[data-page="register"] #body table tr,
    body[data-page="Connect"] #body table tr,
    body[data-page="Register"] #body table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
    }
    
    body[data-page="connect"] #body table td,
    body[data-page="register"] #body table td,
    body[data-page="Connect"] #body table td,
    body[data-page="Register"] #body table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 6px 0 !important;
    }
    
    body[data-page="connect"] #body table td[colspan],
    body[data-page="register"] #body table td[colspan],
    body[data-page="Connect"] #body table td[colspan],
    body[data-page="Register"] #body table td[colspan] {
        text-align: center !important;
        margin-top: 10px;
    }
    
    /* ===== CLAN MEMBER TABLES - KEEP AS TABLES ===== */
    /* Override the general table stacking for clan member tables */
    body[data-page*="clan"] table,
    body[data-page*="Clan"] table {
        display: table !important;
        border-collapse: collapse !important;
    }
    
    body[data-page*="clan"] table tr,
    body[data-page*="Clan"] table tr {
        display: table-row !important;
    }
    
    body[data-page*="clan"] table td,
    body[data-page*="Clan"] table td,
    body[data-page*="clan"] table th,
    body[data-page*="Clan"] table th {
        display: table-cell !important;
        padding: 8px 4px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    
    /* ===== FOOTER ===== */
    #foot {
        padding: 15px 10px;
        text-align: center;
    }
    
    #foot table {
        display: block;
    }
    
    #foot td {
        display: block;
        text-align: center !important;
        padding: 5px;
    }
}

/* ================================================
   MOBILE PHONES (max 480px)
   ================================================ */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    #toptop table {
        font-size: 11px;
    }
    
    #toptop td {
        padding: 3px;
    }
    
    /* ===== GRID LAYOUTS - SINGLE COLUMN ON PHONES ===== */
    /* Lock dashboard grid to single column on phones */
    .dashboard-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Hub dashboard grids to 1 column on small phones (backup) */
    body[data-page="hub"] [style*="display:grid"][style*="repeat(3, 1fr)"],
    body[data-page="hub"] [style*="display:grid"][style*="repeat(4, 1fr)"],
    body[data-page="hub"] [style*="display:grid"][style*="repeat(2, 1fr)"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Guide/home page grids to 1 column on small phones */
    body[data-page="guide"] [style*="display:grid"][style*="1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
    body[data-page="home"] [style*="display:grid"][style*="1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) {
        grid-template-columns: 1fr !important;
    }
    
    body[data-page="guide"] [style*="display:grid"][style*="1fr 1fr 1fr 1fr"],
    body[data-page="home"] [style*="display:grid"][style*="1fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Keep Statistics grid as 2x2 even on phones - MAXIMUM SPECIFICITY */
    td#rpanel .modern-card.card-accent-purple > div[style*="display:grid"],
    td#rpanel .card-accent-purple > div[style*="display:grid"],
    #rpanel .modern-card.card-accent-purple > div[style*="display:grid"],
    #rpanel .card-accent-purple > div[style*="display:grid"],
    .modern-card.card-accent-purple > div[style*="display:grid"],
    .card-accent-purple > div[style*="display:grid"] {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
    }
    
    td#rpanel div[style*="display:grid"][style*="gap:8px"],
    #rpanel div[style*="display:grid"][style*="gap:8px"] {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
    }
    
    /* ===== TYPOGRAPHY ===== */
    h1 {
        font-size: 24px !important;
        margin: 10px 0;
    }
    
    h2 {
        font-size: 20px !important;
        margin: 8px 0;
    }
    
    h3 {
        font-size: 18px !important;
        margin: 6px 0;
    }
    
    h4 {
        font-size: 16px !important;
    }
    
    p {
        font-size: 15px !important;
        line-height: 1.5;
    }
    
    /* ===== ADDRESS (SERVER INFO) ===== */
    #address {
        font-size: 20px !important;
        margin-left: -3px !important;
        vertical-align: middle !important;
    }
    
    .online {
        color: green !important;
    }
    
    /* ===== LOGO SMALLER ===== */
    #masser .logo {
        max-width: 80px;
    }
    
    #masser .brand-title-row a {
        font-size: 20px !important;
    }
    
    /* ===== STACK EVERYTHING VERTICALLY ===== */
    table tr {
        display: block;
        margin-bottom: 10px;
    }
    
    table td {
        display: block;
        width: 100% !important;
        text-align: left !important;
        padding: 5px !important;
        border-bottom: 1px solid #eee;
    }
    
    table th {
        display: block;
        width: 100% !important;
        text-align: left !important;
    }
    
    /* ===== SMALLER BUTTONS ===== */
    button,
    input[type="submit"],
    input[type="button"] {
        font-size: 14px;
        padding: 10px;
    }
}

/* ================================================
   LANDSCAPE MOBILE OPTIMIZATION
   ================================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #toptop {
        font-size: 11px;
        padding: 5px;
    }
    
    #masser {
        padding: 10px 0;
    }
    
    #masser .logo {
        max-width: 60px;
    }
    
    #masser .brand-title-row a {
        font-size: 18px !important;
    }
    
    #navi td {
        padding: 5px 0;
    }
    
    h1 {
        font-size: 20px !important;
    }
    
    h2 {
        font-size: 18px !important;
    }
}

/* ================================================
   TOUCH-FRIENDLY ENHANCEMENTS
   ================================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for touch devices */
    a, button, input[type="submit"], input[type="button"] {
        min-width: 44px;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove hover effects on touch screens */
    a:hover,
    button:hover {
        opacity: 1;
    }
    
    /* Better touch feedback */
    a:active,
    button:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* ================================================
   PERFORMANCE: REDUCE MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================
   DARK MODE SUPPORT (Optional)
   ================================================ */
@media (prefers-color-scheme: dark) {
    /* You can uncomment this if you want auto dark mode */
    /*
    body {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    
    #total {
        background: #2a2a2a;
    }
    
    a {
        color: #8b9dff;
    }
    */
}

/* ================================================
   PRINT STYLES
   ================================================ */
@media print {
    #toptop,
    #menu,
    #navi,
    #foot {
        display: none;
    }
    
    #body {
        width: 100% !important;
        padding: 0 !important;
    }
    
    a {
        color: #000 !important;
        text-decoration: underline;
    }
}

/* ================================================
   MOBILE LAYOUT FOR PURPLE HERO CARD (HUB)
   ================================================ */
@media (max-width: 540px) {
  /* Target the outer purple gradient card */
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] {
    padding: 24px !important;
    border-radius: 6px !important;
  }

  /* Turn the inner row into a vertical stack (override inline flex) */
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] > div {
    display: block !important;
    gap: 0 !important;
  }

  /* Left column (welcome + stats) */
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] > div > div:first-child {
    width: 100% !important;
  }

  /* H1 tweaks */
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] h1 {
    font-size: 28px !important;
    margin-bottom: 10px !important;
      justify-content: right;
  }

  /* Stats row: tighter gap and wrap nicely */
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] h1 + div {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 12px !important;
      justify-content: unset;
      font-size: 14px !important;
      max-width: 250px;
  }

  /* Right column (balance wrapper) -> full width & centered */
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] > div > div:last-child {
    text-align: center !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  /* Balance card itself */
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] > div > div:last-child > div {
    display: inline-block !important;
    width: 100% !important;
    border-radius: 6px !important;
    padding: 16px 20px !important;
    backdrop-filter: blur(10px) !important;
  }

  /* Balance text sizes */
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] > div > div:last-child > div > div:first-child {
    font-size: 13px !important;
  }
  div[style*="background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%)"] > div > div:last-child > div > div:last-child {
    font-size: 24px !important;
  }
}