* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
            color: #333;
        }
        
        .wireframe {
            background: white;
            border: 2px solid #333;
            margin: 20px;
            min-height: 100vh;
        }
        
        /* Header */
        .header {
            border-bottom: 2px solid #333;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            width: 30px;
            height: 30px;
            border: 2px solid #333;
            background: #f0f0f0;
        }
        
        .breadcrumb {
            display: flex;
            gap: 10px;
            font-size: 14px;
        }
        
        .header-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 12px;
            border: 2px solid #333;
            background: white;
            cursor: pointer;
        }
        
        .btn-primary {
            background: #007cba;
            color: white;
        }
        
        .btn-warning {
            background: #ffc107;
            color: #212529;
        }
        
        /* Sidebar */
        .layout {
            display: flex;
            min-height: calc(100vh - 80px);
        }
        
        .sidebar {
            width: 60px;
            border-right: 2px solid #333;
            padding: 15px 0;
        }
        
        .sidebar-item {
            width: 30px;
            height: 30px;
            border: 2px solid #333;
            margin: 0 auto 15px;
            background: #f0f0f0;
        }
        
        /* Main Content */
        .main-content {
            flex: 1;
            padding: 20px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
        }
        
        /* Left Column */
        .left-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .order-items {
            border: 2px solid #333; margin-bottom: 20px;
        }
        .order-header {
            background: #f0f0f0; 
            padding: 15px; 
            border-bottom: 2px solid #333; 
            display: grid; 
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr; 
            gap: 15px; 
            font-weight: bold;
        }
        .order-item {
            padding: 15px; 
            border-bottom: 1px solid #ccc; 
            display: grid; 
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr; 
            gap: 15px;
        }
        .order-item-edited {
            padding: 15px; 
            border-bottom: 1px solid #ccc; 
            display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; 
            gap: 15px; 
            background: #f8f9ff; 
            border: 2px solid #007cba; 
            margin: 0 -2px;
        }
        .order-title {
            font-size: 24px;
            font-weight: bold;
        }
        .order-activity {
            border:2px solid black;
        }
        .order-activity-head {
            display: grid; 
            grid-template-columns: 140px 1fr 100px; 
            gap: 15px; 
            margin-bottom: 15px; 
            font-weight: bold; 
            font-size: 14px;
        }
        .collapsible:before {
            content: "▼ ";
            font-size: 12px;
        }
        .section-header {
            background: #f0f0f0;
            border-bottom: 2px solid #333;
            font-weight: bold;
            padding: 15px;
        }
        .activity-item {
            border-bottom: 1px solid #ccc;
            display: grid;
            font-size: 14px;
            gap: 15px;
            grid-template-columns: 140px 1fr 90px;
            padding: 10px;
        }
        .tabs {
            display: flex;
            border-bottom: 2px solid #333;
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 20px;
            border: 2px solid #333;
            border-bottom: none;
            background: #f0f0f0;
            margin-right: 5px;
        }
        
        .tab.active {
            background: white;
        }
        
        .info-section {
            border: 2px solid #333;
        }
        
        .info-header {
            background: #f0f0f0;
            padding: 12px 15px;
            border-bottom: 2px solid #333;
            font-weight: bold;
        }
        
        .info-content {
            padding: 15px;
        }
        
        .address-block {
            margin-bottom: 15px;
        }
        
        /* Right Column - Sidebar Info */
        .right-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .info-line {
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .info-label {
            font-weight: bold;
            display: inline-block;
            width: 100px;
        }


        .table-header {
            background: #f0f0f0;
            border-bottom: 2px solid #333;
            display: grid;
            font-weight: bold;
            gap: 10px;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
            padding: 15px;
        }

        .table-row {
            border-bottom: 1px solid #ccc;
            display: grid;
            gap: 15px;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
            padding: 15px;
        }

        .order-totals {
            border-top: 2px solid #333;
            padding: 15px;
            text-align: right;
        }

        .total-line {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .total-final {
            border-top: 1px solid #333;
            font-weight: bold;
            padding-top: 5px;
        }