/* 
Theme Name: Hello Syaf
Theme URI: https://syaf.net/
Description: WordPress Theme
Author: Syaf
Author URI: https://syaf.net/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


/* =============================================
   RESPONSIVE PROJECT TABLE STYLES
   Add this to your WordPress theme's style.css
   Reusable class: .pom-table-container
   ============================================= */

/* Base Container */
.pom-table-container {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table Base */
.pom-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

/* Table Header */
.pom-table thead th {
  background-color: #237E51;
  color: #ffffff;
  font-weight: 600;
  padding: 12px 10px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #1a6340;
}

/* Table Body Cells */
.pom-table tbody td {
  padding: 10px;
  color: #000000;
  border: 1px solid #dddddd;
  text-align: center;
  vertical-align: middle;
}

/* Alternating Row Colors (Striped) */
.pom-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.pom-table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* Hover Effect */
.pom-table tbody tr:hover {
  background-color: #e8f5e9;
  transition: background-color 0.2s ease;
}

/* Column Widths */
.pom-table .col-no {
  width: 4%;
}

.pom-table .col-project {
  width: 18%;
}

.pom-table .col-location {
  width: 15%;
}

.pom-table .col-client {
  width: 18%;
}

.pom-table .col-country {
  width: 10%;
}

.pom-table .col-collaborators {
  width: 15%;
}

.pom-table .col-date {
  width: 6%;
}

.pom-table .col-capacity {
  width: 8%;
}

/* Hide mobile labels on desktop */
.pom-table .mobile-label {
  display: none;
}

/* =============================================
   MOBILE CARD LAYOUT (Below 768px)
   ============================================= */
@media screen and (max-width: 768px) {
  
  .pom-table-container {
    overflow-x: visible;
  }

  .pom-table-container .pom-table {
    min-width: unset;
  }

  /* Hide table header on mobile */
  .pom-table-container .pom-table thead {
    display: none;
  }

  /* Transform table structure to block */
  .pom-table-container .pom-table,
  .pom-table-container .pom-table tbody,
  .pom-table-container .pom-table tbody tr,
  .pom-table-container .pom-table tbody tr td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Card styling for each row */
  .pom-table-container .pom-table tbody tr {
    margin-bottom: 16px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
  }

  /* Reset striping for cards */
  .pom-table-container .pom-table tbody tr:nth-child(odd),
  .pom-table-container .pom-table tbody tr:nth-child(even) {
    background-color: #ffffff;
  }

  /* Card hover effect */
  .pom-table-container .pom-table tbody tr:hover {
    background-color: #f8fdf9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  }

  /* =============================================
     CARD HEADER - Green row with No. and Project
     ============================================= */
  
  /* Hide the separate No. column */
  .pom-table-container .pom-table tbody tr td.col-no {
    display: none;
  }

  /* Project header - becomes flex container for 10/90 split */
  .pom-table-container .pom-table tbody tr td.col-project {
    background-color: #237E51;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
  }

  .pom-table-container .pom-table tbody tr td.col-project::before {
    content: attr(data-no);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    min-width: 40px;
    padding: 14px 10px;
    box-sizing: border-box;
    color: #ffffff;
    font-weight: 600;
  }

  .pom-table-container .pom-table tbody tr td.col-project .mobile-label {
    display: none;
  }

  .pom-table-container .pom-table tbody tr td.col-project .cell-content {
    display: flex;
    align-items: center;
    width: 90%;
    padding: 14px 15px;
    box-sizing: border-box;
    color: #ffffff;
    text-align: left;
  }

  /* =============================================
     CARD CONTENT ROWS - 50/50 split with alternating colors
     ============================================= */
  
  /* Base styles for all content rows */
  .pom-table-container .pom-table tbody tr td.col-location,
  .pom-table-container .pom-table tbody tr td.col-client,
  .pom-table-container .pom-table tbody tr td.col-country,
  .pom-table-container .pom-table tbody tr td.col-collaborators,
  .pom-table-container .pom-table tbody tr td.col-architect,
  .pom-table-container .pom-table tbody tr td.col-me,
  .pom-table-container .pom-table tbody tr td.col-date,
  .pom-table-container .pom-table tbody tr td.col-capacity {
    padding: 0;
    border: none;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
  }

  .pom-table-container .pom-table tbody tr td:last-child {
    border-bottom: none;
  }

  /* Alternating row colors using nth-child (auto-adjusts for any column count) */
  /* Odd content rows (3rd, 5th, 7th child = 1st, 3rd, 5th content row) = #f5f5f5 */
  .pom-table-container .pom-table tbody tr td:nth-child(odd):not(.col-no):not(.col-project) {
    background-color: #f5f5f5;
  }

  /* Even content rows (4th, 6th, 8th child = 2nd, 4th, 6th content row) = #ffffff */
  .pom-table-container .pom-table tbody tr td:nth-child(even):not(.col-no):not(.col-project) {
    background-color: #ffffff;
  }

  /* Mobile labels - Left column 50% */
  .pom-table-container .pom-table tbody tr td .mobile-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 600;
    color: #237E51;
    width: 50%;
    padding: 12px 15px;
    box-sizing: border-box;
  }

  /* Cell content - Right column 50% */
  .pom-table-container .pom-table tbody tr td .cell-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 50%;
    padding: 12px 15px;
    box-sizing: border-box;
    color: #000000;
  }
}

/* =============================================
   SMALL MOBILE (Below 480px)
   ============================================= */
@media screen and (max-width: 480px) {
  
  .pom-table-container {
    font-size: 13px;
  }

  .pom-table-container .pom-table tbody tr td.col-project::before {
    width: 15%;
    padding: 12px 8px;
  }

  .pom-table-container .pom-table tbody tr td.col-project .cell-content {
    width: 85%;
    padding: 12px 10px;
  }

  .pom-table-container .pom-table tbody tr td .mobile-label {
    width: 40%;
    padding: 10px 12px;
  }

  .pom-table-container .pom-table tbody tr td .cell-content {
    width: 60%;
    padding: 10px 12px;
  }
}