:root{
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0d6efd;
  --accent-2:#0d3755;
  --success:#28a745;
  --danger:#d32f2f;
  --rounded:10px;
}

/* Page */
.amtec-v2-wrapper { padding:22px; font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg);max-width:1200px;margin:18px auto;padding:8px}
.amtec-title{font-size:20px;margin-bottom:12px;color:#0b3b57}


/* Table */
.amtec-table-wrap { background:#fff; border-radius:10px; overflow:auto; box-shadow:0 4px 14px rgba(8,29,44,0.04); }
.amtec-table { width:100%; border-collapse:collapse; background:var(--card); }
.amtec-table th, .amtec-table td { padding:12px 14px; border-bottom:1px solid #eef4f7; text-align:center; font-size:15px;  }
.amtec-table thead th { background:#0d3755; color:#fff; font-weight:bold; text-transform:uppercase; padding:12px 14px; font-size:12px; letter-spacing:0.6px; }
.amtec-table tbody tr:hover { background:rgba(13,55,85,0.03); }
         
        .amtec-text-pending {background: #e5e7eb; color: #374151; padding: 4px 15px; border-radius: 999px;}
        .amtec-text-for-review {background: #dbeafe; color: #1e40af;padding: 4px 15px; border-radius: 999px;}
        .amtec-text-for-approval {background: #ffedd5; color: #c2410c;padding: 4px 15px; border-radius: 999px;}
        .amtec-text-approved {background: #dcfce7; color: #166534;padding: 4px 15px; border-radius: 999px;}
        .amtec-text-rejected {background: #fee2e2; color: #b91c1c;padding: 4px 15px; border-radius: 999px;}

/* Buttons */
.amtec-btn { border:none; padding:8px 12px; border-radius:8px; cursor:pointer; color:#fff; background:var(--accent); box-shadow:0 4px 10px rgba(13,55,85,0.06); }
.amtec-btn.ghost { background:transparent; color:var(--accent-2); border:1px solid #e6eef2; }
.amtec-btn.small { padding:6px 8px; font-size:13px }

/* Modal */
.amtec-modal { position:fixed; inset:0; display:flex; justify-content:center; align-items:flex-start; padding:36px; background:rgba(6,18,30,0.45); z-index:99999; }
.amtec-modal-header { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #eef4f7; padding-bottom:12px; margin-bottom:12px; }
        .amtec-status-pending { background: #e5e7eb; color: #374151; }        /* Gray */
        .amtec-status-for-review { background: #dbeafe; color: #1e40af;}  /* Blue */
        .amtec-status-for-approval { background: #ffedd5;color: #c2410c; }   /* Orange */
        .amtec-status-approved { background: #dcfce7; color: #166534;}       /* Green */
        .amtec-status-rejected { background: #fee2e2; color: #b91c1c;}       /* Red */

#amtec-modal-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
    margin-left: 6px;
}
#amtec-modal-status-wrapper {
    margin-top: 6px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* FIX MODAL SIZE — always same width */
.amtec-modal-content {
    width: 1200px;          /* modal width (adjust if you want) */
    height: 800px;
    max-height: 90vh;      /* prevents modal from growing too tall */
    overflow-y: auto;      /* scrolls inside if content is tall */
    margin: 0 auto;        /* center horizontally */
    border-radius: 14px;
}

/* Ensure inner layout behaves consistently */
.amtec-modal-body {
    padding: 24px 28px;
}

/* Fix the top-right action button container spacing */
.modal-actions-topright {
    position: absolute;
    right: 25px;
    top: 20px;
    z-index: 20;
}
#modal-cancel {position: absolute;top: 50px;right: 200px;z-index: 50;}

.amtec-details-grid > div {
    min-width: 0; /* critical */
}

.amtec-details-value {
    word-wrap: break-word;
    overflow-wrap: break-word ;
}

.amtec-details-label {
    white-space: nowrap;
}



/* Modal */
.amtec-modal-header-top {    display: flex;    align-items: center;    justify-content: space-between;}
.amtec-portal-number {    font-size: 28px;    font-weight: 700;}
.amtec-status {    font-size: 17px;    font-weight: 600;    color: #004e89;    margin-right: 20px;}
.amtec-close-btn {font-size: 26px;cursor: pointer;color: #7e7e7e;transition: 0.2s ease;}
.amtec-close-btn:hover {color: #333;}
.amtec-modal-title {    font-size: 20px;font-weight: 700;  color: #0d1b2a;    margin: 0;}
.amtec-modal-subtitle {display: flex;align-items: center;gap: 10px;font-size: 15px;color: #4e5a65;}
.amtec-modal-subtitle span {display: flex; align-items: center;}
.amtec-bullet {width: 5px;height: 5px;background: #888;border-radius: 50%;margin: 0 4px;}

/* Tabs */
.amtec-tabs { display:flex; gap:8px; padding:3px 0 10px 0; border-bottom:1px solid #eef4f7; margin-bottom:12px; max-height: 50px;}
.tab-btn { background:#EEF3F9; border:none; padding:10px 14px; border-radius:999px; font-size: 14px; font-weight:600; cursor:pointer; color:#28323a; }
.tab-btn.active { background:#f49d1e; color:white; box-shadow:0 6px 18px rgba(13,55,85,0.08); }
.tab-btn.disabled { opacity:0.45; pointer-events:none; }

/* Tab content */
.tab-content { display:none; padding:8px 2px 18px 2px; }
.tab-content.active { display:block; }

/* Details grid */
.amtec-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.amtec-details-label { font-weight:700; color:var(--accent-2); font-size:13px; }
.amtec-details-value { color:#1a2a33; margin-top:6px; }

/* Timeline */
.amtec-stage-timeline { display:flex; gap:12px; justify-content:space-between; margin-bottom:12px; padding:6px 0; }
.stage-item { text-align:center; flex:1; }
.stage-circle { width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#eef3f9; color:var(--muted); font-weight:800; margin-bottom:6px; font-size:16px; }
.stage-label { font-size:12px; color:#123; }
.stage-item.active .stage-circle { background:var(--success); color:#fff; transform:scale(1.03); }
.stage-item.current .stage-circle { background:var(--accent); color:#fff; transform:scale(1.05); }
.stage-item.final-approved .stage-circle { background:var(--success); color:#fff; }
.stage-item.final-rejected .stage-circle { background:var(--danger); color:#fff; }

/* Timeline logs */
.amtec-timeline { margin-top:10px; border-left:3px solid var(--accent-2); padding-left:12px; }
.amtec-timeline .log-entry { margin-bottom:12px; }
.amtec-timeline .time { font-size:13px; color:var(--muted); }
.amtec-timeline .action { font-weight:700; color:var(--accent-2); }

/* Modal actions */
.amtec-modal-actions { display:flex; gap:10px; padding-top:12px; border-top:1px solid #eef4f7; margin-top:10px; justify-content:flex-end; }

/* Docs */
.docs-list .amtec-doc-item { padding:10px; border:1px solid #eef4f7; margin-bottom:8px; border-radius:8px; }

/* pagination */
.amtec-pagination{display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;margin-top:14px}
.amtec-pagination button{padding:8px 10px;border-radius:6px;border:1px solid #e2e8ee;background:#fff;cursor:pointer}

/* Responsive */
@media (max-width:900px){
  .amtec-modal-content { width:95%; padding:12px; }
  .amtec-details-grid { grid-template-columns:1fr; }
  .amtec-stage-timeline { flex-direction:row; overflow:auto; gap:8px; }}
  
#amtecModal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;
    display: flex;                  /* Enable centering */
    align-items: center;            /* Vertical center */
    justify-content: center;        /* Horizontal center */
    background: rgba(0,0,0,0.45);   /* Dimmed background */
    z-index: 99999;
    overflow-y: auto;               /* Allow scrolling when modal content is tall */
    padding: 30px;                  /* Avoid edges on small screens */
}

/* Force table to use fixed widths */
#amtec-v2-main-table {
    table-layout: fixed;
    width: 100%;
}

/* ADJUSTING COLUMN WIDTHS */

#amtec-v2-main-table th:nth-child(1),
#amtec-v2-main-table td:nth-child(1) {
    width: 60px;     /* ID */
}

#amtec-v2-main-table th:nth-child(2),
#amtec-v2-main-table td:nth-child(2) {
    width: 150px;    /* Portal Ctrl No */
}

#amtec-v2-main-table th:nth-child(3),
#amtec-v2-main-table td:nth-child(3) {
    width: 140px;    /* Date Received */
}

#amtec-v2-main-table th:nth-child(4),
#amtec-v2-main-table td:nth-child(4) {
    width: 220px;    /* Requesting Party */
}

#amtec-v2-main-table th:nth-child(5),
#amtec-v2-main-table td:nth-child(5) {
    width: 180px;    /* Machinery Type */
}

#amtec-v2-main-table th:nth-child(6),
#amtec-v2-main-table td:nth-child(6) {
    width: 180px;    /* Testing Type */
}

#amtec-v2-main-table th:nth-child(7),
#amtec-v2-main-table td:nth-child(7) {
    width: 115px;    /* Status */
}

#amtec-v2-main-table th:nth-child(8),
#amtec-v2-main-table td:nth-child(8) {
    width: 90px;     /* Action */
}

.amtec-controls {display: flex;align-items: center; gap: 16px; flex-wrap: nowrap; width: 100%;}
.amtec-controls input,.amtec-controls select {height: 40px;}
/* Actions container (page size + buttons) */
.amtec-actions { display: flex;align-items: center; gap: 12px;margin-left: auto;}
.amtec-page-size { display: flex;align-items: center; gap: 6px;padding:8px 10px;border-radius:50px;background:#fff;cursor:pointer;   border-color: #f59e0b;}